In the previous tutorial, we made our store more beautiful and professional using Bootstrap. Now we want each of our products to have a photo in the store. We also add two new pages to our store, About Us, and Contact Us, then change the top menu of the app so that the users can access these new pages by clicking on the links. 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. We do all this with PHP and Bootstrap and try to save all the required data in the same data.php file.
What you should know before starting?
This tutorial is the second part, and 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 made our application more beautiful using Bootstrap. We suggest you see our previous tutorial, which is how to use Bootstrap and make your apps more beautiful, or download the source code from here because you will need it to use the following tutorial.
Let's get started
First, we want to add contact pages and about us to our project. To do this, create a new file called pages.php in the bootstrap folder. Then copy the contents of the details.php file to this new file. We have nothing to do with this file at the moment. Open the data.php file and enter the following code below the previous code.
// Pages
$pages_title['about'] = 'About us';
$pages_text['about'] = 'I am a PHP programmer and this is an online shop application that I created with PHP and Bootstrap. Im trying to learn more about PHP and make this application even better!';
$pages_title['contact'] = 'Contact us';
$pages_text['contact'] = '
<p>You can reach me by email, I check my email every day and get back to you as soon as possible!</p>
<p>Email: <strong>help[at]mojipo.com</strong></p>
<p>Also you can find me on twitter! Follow @imojipo</p>
';
Here we used the array again and saved some text data. We want to use this data in the pages we are going to add. The only difference between this array and the ones we used before is that we used one word instead of assigning a number as a key to access the data. Another point is that we also used the <p> and <strong> tags in the data stored in an array, So, we stored the HTML code as data in a PHP array.
Now open the pages.php file and instead of $title[$id] write $pages_title[$id] and also instead of $description[$id] write $pages_text[$id]. Then remove this line :
<div class = "card -footer "> $ '. $ price [$ id].' </div>
And save the file. This means that your pages.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">'.$pages_title[$id].'</h2>
<p class="card-text">'.$pages_text[$id].'</p>
</div>
</div>
';
?>
</div>
</main>
<?php
include ("footer.php");
?>
What we did was we asked PHP on the pages.php to display the new data we added a few minutes ago to the data.php file instead of the previous data related to the products. Now all that remains is to add the right links to header.php to add our pages to our store. Open the header.php file and change the Home, About, and Contact links like this:
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages.php?id=about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages.php?id=contact">Contact</a>
</li>
</ul>
Now run your home page again and try to click on the links on the top menu. Everything is working fine and you have added 2 new pages to your store. Note that we just created a pages.php file and added 2 pages to the app using 2 data sets, each with its own content. Just like we did with products. I mean, now we have one details.php page, but it displays different products based on the number of data we have, and we have a pages.php page that can display an infinite number of different pages. Just add the data related to it to the data.php file and create new links in the menu. Once again, pay attention to the links.
pages.php?id=about
This means that we sent the word about using the GET method we learned earlier to the pages.php file, and in this file, we extracted and displayed the data related to this key, ie about, from the related array. So it's all about data and data storage, and it's the data that makes new pages for us. As we said before, in professional applications, data is stored in the database, and data management will be much easier than we have now. We will learn the database in the next tutorials.
The next step is to add photos to the products
Now that our app has become much more beautiful and functional, let's add a photo to each product and make it better. First, download these photos from here and save them on your desktop.
Download
Now create a new folder in the bootstrap folder and name it uploads. Inside this folder, create another folder and name it products and transfer 4 files of the downloaded photo from your desktop to this folder. Now open the data.php file again. We want to add data related to product photos so that we can use them wherever necessary. Create a new array called photo and save the related photo file name for each product. This means that your data.php file will look like this:
<?php
// Our Data
$title[0] = 'Apple iPhone X';
$description[0] = 'Apple iPhone X smartphone. Announced Sep 2017. Features 5.8″ Super Retina OLED';
$price[0] = 1000;
$photo[0] = 'iphone.jpg';
$title[1] = 'Samsung Galaxy A10';
$description[1] = 'Samsung Galaxy A10 Android smartphone. Announced Feb 2019. Features 6.2″ IPS LCD display, Exynos 7884 chipset';
$price[1] = 300;
$photo[1] = 'samsung.jpg';
$title[2] = 'Xiaomi Mi Note 10';
$description[2] = 'Xiaomi Mi Note 10 Android smartphone. Announced Nov 2019. Features 6.47″ AMOLED display, Snapdragon';
$price[2] = 700;
$photo[2] = 'xiaomi.jpg';
$title[3] = 'Nokia 7.2 Dual Sim';
$description[3] = 'Nokia 7.2 TA-1196/DS 128GB 6GB RAM (GSM Only, No CDMA) Factory Unlocked No Warranty - 4G LTE International Model';
$price[3] = 500;
$photo[3] = 'nokia.jpg';
// Pages
$pages_title['about'] = 'About us';
$pages_text['about'] = 'I am a PHP programmer and this is an online shop application that I created with PHP and Bootstrap. Im trying to learn more about PHP and make this application even better!';
$pages_title['contact'] = 'Contact us';
$pages_text['contact'] = '
<p>You can reach me by email, I check my email every day and get back to you as soon as possible!</p>
<p>Email: <strong>moji[at]mojipo.com</strong></p>
<p>Also you can find me on twitter! Follow @imojipo</p>
';
?>
In this way, the data related to the photos was also saved. Now, all we have to do is use this data where we need it. That is, in the index.php file as well as the details.php file
First, open the index.php file and change the Card section as shown below.
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">
<img src="uploads/products/'.$photo[$i].'" class="card-img-top">
<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>
';
}
Now see the home page of your store.
We simply read the photo data that we added to the photo array in the data.php file and display it in the appropriate place. I found the location of the images in Cards in the following link:
https://getbootstrap.com/docs/4.4/components/card
This means that I learned from the Bootstrap guide where the "img" tag should be placed on the card to display it correctly. Images are one of the features of Card in Bootstrap and how to use it is written in the document. Like the shadow, which is another feature of the Card that I asked you to find in the previous session exercises. Did you do that?
Add a photo to the product details page
Now it's time for the details.php page to have a photo. Open the file and change the Card code as shown below.
echo '
<div class="card">
<div class="row no-gutters">
<div class="col-md-4">
<img src="uploads/products/'.$photo[$id].'" class="card-img">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">'.$title[$id].'</h5>
<p class="card-text">'.$description[$id].'</p>
</div>
</div>
</div>
<div class="card-footer">$'.$price[$id].'</div>
</div>
';
On the home page of your application, click the Details button for a product to go to the product page. The correct photo of each product has been added to the product page!
Again, we read the photo data that we had added to the photo array in the data.php file and display it in the right place. And again, I found the location of the "img" tag in the following link:
https://getbootstrap.com/docs/4.4/components/card
This time I used another type of Card called Horizontal, which uses a Grid to put photos and text together on a card. Try to find this type of card from the link above. Note that this type of card is also responsive, and if someone sees this page of your app on a mobile phone, the photo will be at the top and the text at the bottom! Try this to see what a miracle Bootstrap does.
We're done, and our app is one step closer to become a pro app. Now we want to do something interesting. We want to make every page of our app have its own title. This will have a direct impact on your app's SEO.
Create a dynamic Title related to each page
Currently, all pages have a fixed title, and that is My Shop. We mean the Title highlighted in the image below.
Page Title is one of the most important things in improving your site's SEO, and it's actually part of the HTML code of each web page that is placed in the <title> tag and all pages have it, you can find it in the header.php file.
<title>My Shop</title>
The best-case scenario for page SEO is that the title is exactly related to the page content, but we now have a fixed title for all pages. So we have to make the text in this tag dynamic and, for example, display the name of the same product on the page of each product. Edit this line and write:
<title><?php echo $pageTitle; ?></title>
This code means we have a variable called $pageTitle that we are going to put some inside and here we asked PHP to display it. But this variable has not yet been defined and is empty now. Where should it be defined? Of course, this variable must be defined with the correct value on each page of our application. For example, on the product page or details.php, we need to assign this variable to the product name. So, open the details.php file.
In the code, we see that the header.php file is included first. Since PHP executes files line by line from start to end, we need to set the $pageTitle before we include the header and put the product name in it. But we can get the product name in the middle of the page after $id = $ _GET ['id'];.
What’s the solution?
The solution is to get all the data we need right at the top of the page, save it in separate variables, and then start displaying them. So we edit the details.php file as follows.
<?php
// Our Data
include ("data.php");
// Get and Prepare Data
$id = $_GET['id'];
$out = '
<div class="card">
<div class="row no-gutters">
<div class="col-md-4">
<img src="uploads/products/'.$photo[$id].'" class="card-img">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">'.$title[$id].'</h5>
<p class="card-text">'.$description[$id].'</p>
</div>
</div>
</div>
<div class="card-footer">$'.$price[$id].'</div>
</div>
';
$pageTitle = $title[$id];
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
// Show Data
echo $out;
?>
</div>
</main>
<?php
include ("footer.php");
?>
Let's first explain the code. This code is the same as in the previous file, only some parts have been moved. The first thing we did was to include the data.php file. Then we received the amount of id sent to the page through the GET method and used it to extract the product-related data, but this time instead of displaying or echoing this data, once again we put the whole thing to be displayed in another variable named $out. Then we created the $pageTitle variable and filled it with the correct data, I mean the product's name. Finally, we included the header.php file. So before the header was included, we got the correct data for $pageTitle and prepared it for display in header.php. The rest of the code is the same as our jumbotron, and then we have to display the Card. Since we put the code related to the card a little higher in the $out variable, we displayed the $out variable here, and finally, footer.php is included.
Now run the address of a product from the app. For example, the following link:
http://127.0.0.1/bootstrap/details.php?id=0
You can see that the Title of the page has become exactly the name of the product. We need to do the same for the rest of our application pages, index.php and pages.php, because they include header.php, but we don't have a variable called $pageTitle yet in them. Open the index.php file. For the home page of each web app, we have a fixed title, which is usually the name of the app. It can be the same as My Shop for our app. So we define the $pageTitle variable as above before including header.php and set its value to My Shop. That means top lines should be like:
<?php
$pageTitle = 'My Shop';
include ("header.php");
?>
For the main page, we do not need to transfer the rest of the PHP code and data extraction process to the top of the file because we do not need it at the top. Now it's time for the pages.php file. Open the file. In this file, we need to run a process similar to details.php. So the code for this page becomes:
<?php
// Our Data
include ("data.php");
// Get and Prepare Data
$id = $_GET['id'];
$out = '
<div class="card">
<div class="card-body">
<h2 class="card-title">'.$pages_title[$id].'</h2>
<p class="card-text">'.$pages_text[$id].'</p>
</div>
</div>
';
$pageTitle = $pages_title[$id];
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
// Show Data
echo $out;
?>
</div>
</main>
<?php
include ("footer.php");
?>
We're done, and now all pages have their unique title. Go to the home page of your application and see the different pages and pay attention to the title. For example, see the Title of the "about us" page marked in red in the image below.
