What is Bootstrap and how to add it to your PHP project. We also use some bootstrap elements such as Card, Button, Navbar, and Grid in our project to be a start to make the online store project more professional. In this tutorial, we will use Bootstrap to make our store beautiful and professional. This tutorial has almost nothing new from PHP programming, we combine the same code from the previous tutorial with Bootstrap to make it look better. If you already know these things, please go to the end of this page and see the next tutorial. You can click here and see the online demo version of what we will have after this tutorial.
In the previous tutorial, we created a mobile phone online store using what we learned in PHP. This store does its job properly, but it's not pretty yet. Online stores are professional, beautiful, and attractive. For a customer to be persuaded to buy from an online store, in addition to the fact that the store must be coded in such a way that it works properly, its appearance must be attractive and nice. So we need to write beautiful applications. We've said before that we learn everything we need to know. Now we have to learn something new!
What you should know before starting?
In this tutorial, we will use the same project that we created in the previous tutorial and make it better. So you should have seen the previous tutorial and written or downloaded the source code. In the previous tutorial, we learned how to use arrays, how to transfer information between two PHP pages using the GET method, and how to use "include" in PHP. If you don't know these, we suggest you check out our previous tutorial, which is an online store app with PHP, or download and review its source code here.
Let's get started
First, let's talk about what Bootstrap is. Bootstrap is the thousands of lines of code written by CSS and JS that allow us to create a beautiful user interface for web applications. Bootstrap was created by Twitter, and now several professional and kind developers (these) are working on it so that you can create beautiful user interfaces without writing boring codes. Bootstrap is a ready-made set of various elements used in web application design. Elements such as buttons, forms, menus, lists, tables, and anything else you need to design a user interface. Just like a complete toolbox, you can take and use different code snippets for different parts of a user interface. These elements are designed and built in the best and most standard way and will make your application interface professional and beautiful. Most importantly, this whole box of valuable tools is available to you for free. To get started, go to their website address and check its pages. You do not need to download anything. Just follow our tutorial.
Now back to our online store project. First, create a new folder called bootstrap in the www folder and copy the 3 PHP files you created earlier from the start folder into this new folder. So we want to keep the start project intact and finally compare it to our new project in terms of appearance. Also, the start folder will be a valuable folder for you because it is the first application that you have written in PHP and you can keep it as a souvenir. Now run the index.php address in the new folder to make sure everything is working properly. The following is the address:
http://127.0.0.1/bootstrap/index.php
Now open the index.php file and copy the following code into it.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>My Shop</title>
<style>
footer {
padding-top: 3rem;
padding-bottom: 3rem;
}
footer p {
margin-bottom: .25rem;
}
</style>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">MyShop</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="bg-light">
<div class="jumbotron">
<div class="container">
<h1>Welcome to My Shop</h1>
<p>Buy new cell phones at a cheap price!</p>
</div>
</div>
<div class="container py-5">
<?php
// Our Data
include ("data.php");
// Show Data
for ($i=0;$i<4;$i++) {
echo '
<div class="card mb-3">
<div class="card-body">
<h3 class="card-title">'.$title[$i].'</h3>
<p class="card-text">$'.$price[$i].'</p>
<a href="details.php?id='.$i.'"><button type="button" class="btn btn-success">Details</button></a>
</div>
</div>
';
}
?>
</div>
</main>
<footer class="text-muted">
<div class="container">
<p class="float-right">
<a href="#">Back to top</a>
</p>
<p>MyShop © YourDomain.com, The online shop which I created myself with ❤</p>
<p>Need help? <a href="https://www.mojipo.com/">Visit the homepage</a> or read our <a href="https://www.mojipo.com/myshop">getting started guide</a>.</p>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
Then run the index.php file again to see the result.
This is the same store that you created before, but it has become much more beautiful. We didn't change our PHP code and just added Bootstrap to the previous project. Note that no new files have even been added to your project! Let's take a closer look at the codes and see what has changed.
See line 6:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
This is a Meta tag that is used to display the page properly on various devices such as desktop and mobile, and since Bootstrap makes your web application responsive, it is essential to use it, and today almost all web applications use this line. I'll explain more about responsiveness later.
See line 9:
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
Here we have added an external CSS file to our page via CDN or Content Delivery Network. It's like putting a CSS file in your project folder, and we can actually do that, but using CDN is better, and it speeds up your app's loading time. This CSS file is actually the code that the Bootstrap elements need.
See lines 12 to 20:
<style>
footer {
padding-top: 3rem;
padding-bottom: 3rem;
}
footer p {
margin-bottom: .25rem;
}
</style>
Here we have written a few lines of CSS code inline that improve the shape and image of our application's footer. These codes are not necessary and you can even delete them. Of course, the appearance of the footer will change a little. The reason for writing these codes is to know that you can add custom style and more than Bootstrap to your app.
Then we have the <body> tag. Take a look at the contents of this tag. You can see that we have divided the whole page into three parts: <header>, <main> and <footer>. This is a common way to design web applications. Then we added the codes for each section between them to make the top, middle, and bottom of our app.
The <header> section, as its name implies, is the head of our application. Here we use a Navbar, which is one of the elements that Bootstrap provides us with, and with it, we can create the top menu of the application in the best way.
See the Navbar code:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">MyShop</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
We copied this code exactly from the document section of the Bootstrap website. This address means:
https://getbootstrap.com/docs/4.4/components/navbar
And then we changed the name of the links based on our application. This is the way you should use when you need an element of Bootstrap. First, you need to spend some time reading the documents of Bootstrap. You don't need to read line by line, you just need to know what Bootstrap gives you and what each one is used for. Then when you need to use an element, you will find it in Document and use it. I knew I needed a menu for the top of my app. So I chose Navbar from Bootstrap and added it to my project. That is, I took a piece of Navbar from my toolbox and added it to the project. Finally, this part was added to my app:
In the <main> section, which is the main body of our application, I first used a jumbotron component. I found it at the following address.
https://getbootstrap.com/docs/4.4/components/jumbotron/
I mean this code:
<div class="jumbotron">
<div class="container">
<h1>Welcome to My Shop</h1>
<p>Buy new cell phones at a cheap price!</p>
</div>
</div>
Finally, this part was added to the app:
Now it's time to display my store's products. I used the Card to display the products and found them at the following address:
https://getbootstrap.com/docs/4.4/components/card
The card code snippet is as follows. Look at this code:
<div class="card mb-3">
<div class="card-body">
<h3 class="card-title">Title Here</h3>
<p class="card-text">Text Here</p>
<a href="Link Here"><button type="button" class="btn btn-success">Details</button></a>
</div>
</div>
This code makes a card for me. I need a card for each product. So we're going to repeat some codes. What do we use in PHP to repeat? Loops
That's what I did. I used a loop and displayed my products exactly like the previous project, except that in the loop, I combined the bootstrap card with my own data and repeated it.
Pay attention to its code and try to understand how it works:
// Show Data
for ($i=0;$i<count($title);$i++) {
echo '
<div class="card mb-3">
<div class="card-body">
<h3 class="card-title">'.$title[$i].'</h3>
<p class="card-text">$'.$price[$i].'</p>
<a href="details.php?id='.$i.'"><button type="button" class="btn btn-success">Details</button></a>
</div>
</div>
';
}
Here's something new. In the previous project, I used for ($ i = 0; $ i <4; $ i ++) in the loop, but here we have
for ($i=0;$i<count($title);$i++)
This has nothing to do with bootstrap, and in fact, we could have used the same code as before, but I wanted to learn something new from PHP in this tutorial. I used the count () function in PHP. The job of this function is to return the number of data stored in an array. How much data was in our array? We had 4, that is, 4 phones, so the count ($ title) becomes 4, and that's the same code as before. The only difference is that now if we add a new phone to our data.php, we no longer need to change the number in the loop from 4 to 5, and the count () function itself understands that it has to put 5 there because now we have 5 data in the array! Again, PHP made it easier for us...
Next we have the <footer> tag. Almost all web applications have footers in which they write information such as copyright, etc., and sometimes put a few links in it. We did the same and wrote a few HTML lines here, which finally gives us the following part:
Finally, we added 3 JavaScript files related to Bootstrap, such as the CSS file that we first added to this page via CDN to our project. These JavaScript files are essential for the proper operation of the bootstrap and must be added to the project in order. The index.php code is over. You can see that we used almost the same PHP code as the previous project, in addition to taking some beautiful tools from the Bootstrap toolbox and using them here to make the user interface more beautiful.
Now it's time for our details.php file to mix it with Bootstrap and beautify the product screen like the home screen. Open the details.php file and put the following code in it:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>My Shop</title>
<style>
footer {
padding-top: 3rem;
padding-bottom: 3rem;
}
footer p {
margin-bottom: .25rem;
}
</style>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">MyShop</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="bg-light">
<div class="jumbotron">
<div class="container">
<h1>Welcome to My Shop</h1>
<p>Buy new cell phones at a cheap price!</p>
</div>
</div>
<div class="container py-5">
<?php
// Our Data
include ("data.php");
// Show Data
$id = $_GET['id'];
echo '
<div class="card">
<div class="card-body">
<h2 class="card-title">'.$title[$id].'</h2>
<p class="card-text">'.$description[$id].'</p>
</div>
<div class="card-footer">$'.$price[$id].'</div>
</div>
';
?>
</div>
</main>
<footer class="text-muted">
<div class="container">
<p class="float-right">
<a href="#">Back to top</a>
</p>
<p>MyShop © YourDomain.com, The online shop which I created myself with ❤</p>
<p>Need help? <a href="https://www.mojipo.com/">Visit the homepage</a> or read our <a href="https://www.mojipo.com/myshop">getting started guide</a>.</p>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
Now on the main page of the application, click on the Details button of a product and see the product page:
We have a nice page like the home page, the header, and footer of which are the same, and only the middle part, <main>, has been changed. This design coherence is present in all applications, and it is the true way. A beautiful and integrated application
Let's take a look at details.php. Everything looks like the index.php file, and only the product display area, i.e. its PHP code, is different, the following code:
<div class="container py-5">
<?php
// Our Data
include ("data.php");
// Show Data
$id = $_GET['id'];
echo '
<div class="card">
<div class="card-body">
<h2 class="card-title">'.$title[$id].'</h2>
<p class="card-text">'.$description[$id].'</p>
</div>
<div class="card-footer">$'.$price[$id].'</div>
</div>
';
?>
</div>
And those codes are what we used in the previous project. We only used a Card in the echo section, which we took from the bootstrap toolbox.
We could easily use Bootstrap and make our app look pro. Now compare your new store with the previous one to see how much more beautiful and professional it has become…
One point in the new code may have caught your attention. Many codes are repeated in the header and footer sections of both files. We're already familiar with something called "includes" in PHP. Why not use it for these duplicate codes? Now, if we want to change the footer text, for example, we have to edit both files, but if we put the footer codes that are duplicated in a separate file and then include it in both files, we can easily edit a footer text by editing one file. The same is true for the header. So let's get started!
Create a new file named header.php and another one named footer.php in the bootstrap folder. Try clearing the header duplicate code from both files and putting it in the header.php file. Do the same for the footer, then include these two files in index.php and details.php.
The header.php file should look like this:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>My Shop</title>
<style>
footer {
padding-top: 3rem;
padding-bottom: 3rem;
}
footer p {
margin-bottom: .25rem;
}
</style>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">MyShop</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
Also, the footer.php file will look like this:
<footer class="text-muted">
<div class="container">
<p class="float-right">
<a href="#">Back to top</a>
</p>
<p>MyShop © YourDomain.com, The online shop which I created myself with ❤</p>
<p>Need help? <a href="https://www.mojipo.com/">Visit the homepage</a> or read our <a href="https://www.mojipo.com/myshop">getting started guide</a>.</p>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
The index.php file changes as follows:
<?php
include ("header.php");
?>
<main class="bg-light">
<div class="jumbotron">
<div class="container">
<h1>Welcome to My Shop</h1>
<p>Buy new cell phones at a cheap price!</p>
</div>
</div>
<div class="container py-5">
<?php
// Our Data
include ("data.php");
// Show Data
for ($i=0;$i<count($title);$i++) {
echo '
<div class="card mb-3">
<div class="card-body">
<h3 class="card-title">'.$title[$i].'</h3>
<p class="card-text">$'.$price[$i].'</p>
<a href="details.php?id='.$i.'"><button type="button" class="btn btn-success">Details</button></a>
</div>
</div>
';
}
?>
</div>
</main>
<?php
include ("footer.php");
?>
Also, the details.php file will look like this:
<?php
include ("header.php");
?>
<main class="bg-light">
<div class="jumbotron">
<div class="container">
<h1>Welcome to My Shop</h1>
<p>Buy new cell phones at a cheap price!</p>
</div>
</div>
<div class="container py-5">
<?php
// Our Data
include ("data.php");
// Show Data
$id = $_GET['id'];
echo '
<div class="card">
<div class="card-body">
<h2 class="card-title">'.$title[$id].'</h2>
<p class="card-text">'.$description[$id].'</p>
</div>
<div class="card-footer">$'.$price[$id].'</div>
</div>
';
?>
</div>
</main>
<?php
include ("footer.php");
?>
Now, look at your store again. Nothing has changed, but you are one step closer to becoming more professional. Now you can easily edit the header and footer and see the result on both pages of your store.
One more step in Bootstrap and using the Grid System
In the following tutorial, we want to use another tool in Bootstrap and make the main page of our application better. If you notice, on the home page of our products, they are placed one by one under each other, while we have a whole empty white space. Isn't it better to display 3 to 3 products in each row? Here, Bootstrap comes to our aid and uses Grid to help us do our best. See this page:
https://getbootstrap.com/docs/4.4/layout/grid
Open the index.php file and change its code as follows:
<?php
include ("header.php");
?>
<main class="bg-light">
<div class="jumbotron">
<div class="container">
<h1>Welcome to My Shop</h1>
<p>Buy new cell phones at a cheap price!</p>
</div>
</div>
<div class="container py-5">
<div class="row">
<?php
// Our Data
include ("data.php");
// Show Data
for ($i=0;$i<count($title);$i++) {
echo '
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12">
<div class="card mb-3">
<div class="card-body">
<h3 class="card-title">'.$title[$i].'</h3>
<p class="card-text">$'.$price[$i].'</p>
<a href="details.php?id='.$i.'"><button type="button" class="btn btn-success">Details</button></a>
</div>
</div>
</div>
';
}
?>
</div>
</div>
</main>
<?php
include ("footer.php");
?>
Now, look at your store home page again.
Didn't it look more beautiful? Let's take a look at the codes and see what has changed.
Almost nothing! Only a few words have been added and the result is so good. Compare the code yourself with the previous one, this way you will better understand how the Grid System works in Bootstrap.
Now we want to share an interesting point with you. Try to make your web browser window smaller and see what changes.
For example, I resized my internet browser to the size of a tablet, and the result was the following:
And then I make the window smaller again. For example, the screen size of a mobile phone and the result:
You can see that when the screen size changes, the layout of the products also changes, even when the screen size becomes mobile, the top menu changes and it becomes a button that when you click on it, the menu toggles on. So what is this for? This means that anyone with any device, regardless of the size of the screen, see your web application, the layout of the app elements will be displayed in the best way for him, one person will use your app with a laptop, one sees your app with a tablet, and someone else uses your app with a mobile phone, and all of them can make the best use of your app. If this didn't happen and someone saw your app on their mobile phone, everything would be small and unreadable due to the small size of the mobile screen, but now it doesn't happen anymore! This is the miracle that Bootstrap brings us, and this is called the Responsiveness of the application. Today, if there be a non-responsive application, we can almost say that we have an unprofessional app, and this has a direct impact on increasing the ranking of your application in search engines such as Google because you have provided a comfortable user experience for everyone.