How to Use Bootstrap with PHP

Bootstrap is the most popular front-end framework for developing websites and web applications. Bootstrap can help you create a responsive, mobile-first websites quickly and easily.

[tweetshare tweet=”Bootstrap is the most popular front-end framework for developing websites and web applications.” username=”DashBootstrap”]PHP is a very popular scripting language among developers to create dynamic content. It is a free server side language that can interact with many database languages like MySQL, and is very simple to learn and begin with.

How Can I Use Bootstrap with PHP?

Let’s see an example to learn Bootstrap with PHP. Create a file index.php.

Within the HTML code, the PHP code is written between the opening and closing PHP tags. So all the PHP code is written inside <?php and ?>. When a PHP file is being executed the statements in the PHP file is processed and then discarded. If the PHP code produces an output, like a message to the user, then the code is replaced by the output and the browser only sees the output that the PHP code produces.

What are the prerequisites?

First, you need to have Bootstrap installed on your local computer. If you are using CDN, that’s fine too. The next thing you need is a text editor like Sublime, atom, or even notepad will work just fine. Then you need a server so that you can run the PHP files. You can use your own computer as a server by installing local servers like XAMPP or WAMPServer to run the PHP code.

Also Read: How to Use Bootstrap With HTML

Create a folder for your project in the local server and add the Bootstrap files in the folder. Next, create an index.php file to begin creating your Bootstrap web page with PHP.

Let’s take an example of a simple form that inputs some data and submits that data and provide a feedback to the user.Write the basic HTML code, link all the necessary CSS and JS files including the bootstrap CSS and JS. Now create a simple form using Bootstrap.

Create a new folder with an extension .php. Write the HTML markup and include the JS and CSS file for Bootstrap. Write the code for a simple form as follows

The form contains input fields for username, email id, and password and then a submit button.

Here, the <form> element contains the form that we will be using.

The role attribute is for accessibility.

The method attribute is used to specify the method. There are two types of the method in PHP, get and post. when we use the get method, the value that is given in the input field is appended to the URL, to retrieve some data. The post method is used to send the value given in the input field to be processed.

The names given to the name attribute is what we use in reference to the data that is given in the input fields.

The action attribute is used to indicate the URL of the PHP file. We will be writing the PHP code in the same file as the HTML. That is indicated by the htmlspecialchars($_SERVER[“PHP_SELF”]. Here the variable $_SERVER[“PHP_SELF”] returns the filename of the currently executing script. the htmlspecialchars() is used to convert special characters like < and > into HTML entities.

So, we have created our Bootstrap form, which looks like this.

Bootstrap form

What we need is to do is validate if there are inputs in the fields and then give a feedback after submitting the form.

So let’s get to the PHP. We write our code within the <?php and ?> tags. First, we declare the variables in which the values sent to the server by the post method will be stored.

The variables in PHP are preceded by a $ sign. The values of the input fields are assigned to these variables by their names. It is shown in the code as below.

The variable email will be assigned the email address that was input in the email field of the form. The variable name will be assigned the username that is input in the form. Similarly, the variable password will have the password. The variable $valid is assigned a value true which will be later used in validating the form.

Now what we need to do next is to validate the fields that if there are no values in the input fields upon submission then it should show an error message. The email should be a valid email and the password length should be at least 8 characters and must have at least one lower case letter, one upper case letter and one digit.

The first condition checks if the username field is empty. If the string is empty a string of value ‘please enter your username’ is assigned to the variable $errName and the variable $valid is set to false.

The second condition checks whether the email field is empty or not. If there is no value to email, then a string with the error message is assigned to the variable $errEmail and the variable $valid is set to false.

Now to validate the password, we first check if the password field is empty or not. Then we need to check if the password is strong enough. To do that we use a regular expression that looks for a certain pattern in the string that we enter as the password.

Also Read: How to Install Bootstrap

What the function preg_match() does is that it looks for the pattern in the string of password and returns true if the pattern matches the expression else returns false. The regular expression defines the pattern the function should look for in the string. In the expression, the dot (.) is for any character. The ?= is called the positive look ahead. It says what the next character in the string should be. So the expression (?=.{8,}) is to specify that the password must have at least 8 characters. (?=.*[0-9]) is to specify that the string must have at least one numeric character.(?=.*[a-z]) specifies that the password must have at least one lowercase letter, and (?=.*[A-Z]) is for the password to have at least one uppercase letter.

So after these conditions have been validated, we must provide an information to the user that giving the error message. To do that we need to output the value of the variable that we have assigned an error message with, in case there is one. So we include that error message right below the input boxes.

The echo will output the text to the browser.

So if there are no values input in the form fields and then submit button is clicked, then user should get error messages like this

After the input fields have been filled and the form has been submitted the user should get a feedback saying that the form has been submitted. So if there are no errors in the validation, the value of the variable valid is true and in that case the user should get a message that the form has been submitted.

Input the username, email id, and password,

Values input in form

and then submit.

Confirm submission

The entire PHP and HTML code is as given

BootstrapDash believes in providing the best, efficient and quality free and premium bootstrap admin dashboard template to get your web application up and running easily and quickly. Visit our website to get to know more about our products. Want to create a stunning website of your own? Start learning