We want to create an online store with what we have learned in previous tutorials. If you've seen the previous tutorials, you might say that we haven't learned anything yet that we could create an online store app, but I'll tell you that with the same little information, you can implement the basics of a store. My goal is to get you involved in a goal, and as I said in the previous tutorial, we'll learn everything at the right moment we need. Of course, in the end, this application is not practical and is just an educational app, but in the next tutorials of this website, we will make this application more complete with the new things we learn so that we can finally have a practical online store.
What you should know before starting?
We need to know how to define and set PHP variables and how to show their values. You should also be able to use PHP codes side by side with HTML codes and use PHP to display dynamic pieces of HTML code. If you don't know these, we suggest you check out our previous tutorial, which is a basic introduction to PHP and variables and how to use them.
Let's get started
We want to build a mobile phone store. Open the "index.php" file of the previous tutorial or just create a PHP file named index.php and paste the following code inside it.
<html>
<head>
<title>My Shop</title>
</head>
<body>
<h1>Welcome to My Shop</h1>
<p> Buy new cell phones at a cheap price!</p>
<hr>
<?php
// Our Data
$title1 = 'Apple iPhone X';
$price1 = 1000;
$title2 = 'Samsung Galaxy A10';
$price2 = 300;
$title3 = 'Xiaomi Mi Note 10';
$price3 = 700;
// Show Data
echo '<h2>'.$title1.'</h2>
<p><strong>$'.$price1.'</strong></p>
';
echo '<h2>'.$title2.'</h2>
<p><strong>$'.$price2.'</strong></p>
';
echo '<h2>'.$title3.'</h2>
<p><strong>$'.$price3.'</strong></p>
';
?>
</body>
</html>
Execute the file.
Let explain what we did in the above code. See lines 11 and 12. We defined 2 PHP variables. One of them is a string that holds the phone's name. The second is the price of the phone, which is a numeric variable. We repeated this 2 more times and we have 6 variables in the set that have stored information about 3 phone models. Each of these variables must have a unique name, as you can see, we used numbers 1, 2, and 3.
Then we have displayed this information 3 times in lines 21 to 29. That means we've repeated a series of almost identical codes three times. As we said before, we can use loops for repetition, but here it is not possible to use loops because we have used the usual variables. We need a new type of variable that can be used in loops. Here we need something new called arrays. Open the index.php file and change its code as follows.
<html>
<head>
<title>My Shop</title>
</head>
<body>
<h1>Welcome to My Shop</h1>
<p> Buy new cell phones at a cheap price!</p>
<hr>
<?php
// Our Data
$title[0] = 'Apple iPhone X';
$price[0] = 1000;
$title[1] = 'Samsung Galaxy A10';
$price[1] = 300;
$title[2] = 'Xiaomi Mi Note 10';
$price[2] = 700;
// Show Data
for ($i=0;$i<3;$i++) {
echo '<h2>'.$title[$i].'</h2>
<p><strong>$'.$price[$i].'</strong></p>
';
}
?>
</body>
</html>
Run the file again. You can see that exactly the same content was displayed in the same way before and has not changed. But our code has changed significantly. Instead of 6 variables, we used only 2 variables, but as follows:
$title[] and $price[]
These variables are arrays. Arrays can store large amounts of data of one type. Each value has an identifier that can be, for example, a number starting with 0. We stored 3 values here in the $title[] variable and three values in the $price[] variable and assigned a number to it each time. Then we used a loop and counted the "$i" variable from 0 to 2 (as long as it is less than 3, that is, 2), and each time we displayed the value stored in the array with that identifier. Pay attention to this code and try to learn how it works. Arrays are very versatile and you will always use them. Only continue the training once you understand how the array is used.
In the following, we want each product to be clickable, and when we click on it, we go to a new page and get more information about the same product. Open the index.php file and change it as follows.
<html>
<head>
<title>My Shop</title>
</head>
<body>
<h1>Welcome to My Shop</h1>
<p> Buy new cell phones at a cheap price!</p>
<hr>
<?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;
$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;
$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;
// Show Data
for ($i=0;$i<3;$i++) {
echo '<a href="details.php?id='.$i.'"><h2>'.$title[$i].'</h2></a>
<p><strong>$'.$price[$i].'</strong></p>
';
}
?>
</body>
</html>
All we did is add another array called $description[] to our data set, which is more details about the product. Also, in the display section, we linked the product name so that it can be clicked, and by clicking on the product name, it goes to another page called details.php. In the new page, we want to show more information about the product that we have saved in the $description[] variable. Next to the index.php file, create a new file called details.php and put the following code in it.
<html>
<head>
<title>My Shop</title>
</head>
<body>
<h1>Welcome to My Shop</h1>
<p> Buy new cell phones at a cheap price!</p>
<hr>
<?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;
$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;
$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;
// Show Data
$id = $_GET['id'];
echo '<h1>'.$title[$id].'</h1>
<p>'.$description[$id].'</p>
<p><strong>$'.$price[$id].'</strong></p>
';
?>
</body>
</html>
First, run the index.php file. Then click on the product name to go to the new page and see the description of each product. By clicking on the name of each product, you will see more information about the same product on the new page and there is nothing about other products.
Now I explain the code inside details.php. Lines 10 to 21 are the same as our data in the index.php file. This means that we need access to data from all pages so that we can use it. Line 24 is the most important thing we're dealing with. $id = $ _GET ['id']; We defined a variable called $id and put the value received through the GET method in it. Take a look at the photo above and see the red dot at the page address.
details.php?id=1
To move data between different pages, we have two methods called GET and POST, which you are probably familiar with them in HTML. We used the GET method here and sent the value 1 with the name id to the details.php file. In PHP, to get this information, we need to write something like line 24, and so we get the value 1 and save it in the $id variable. Then, on lines 25 to 27, using this ID, which is 1, we displayed the corresponding stored information in the array. 1 was a Samsung phone. If we change this 1 in the address and type 2 and press Enter, we will see the information about 2, which is the Xiaomi phone. Try to do this with different numbers and see the result.
As you can see, we created a dynamic online store using PHP! We only have 2 PHP files, but the second page gives a dynamic output. This means that we see a new page with new content as many as our products, which here is 3. This is what PHP does for us. Try adding a new product to your data. Add the following code to both files in the data section. Add this new product just below the latest product, the Xiaomi Mi Note 10.
$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;
Then add one more number to the loop in the index.php file, I mean: for ($i=0;$i<4;$i++)
See your online store again. You have a new Nokia product. Click on its name to see more information about it in "details.php". We created this new page dynamically. That means we just added one item to our data and now you have a new product in the store that has its own page. You can add new products to your data as much as you want. For example, add 100 new phone models, so with just 2 PHP files, we will have a store that has 100 dedicated pages for products and one home page. If you didn't use PHP, you would have to create 101 separate HTML files!
Your store is now ready. But there is something wrong with the job. It's not a problem, it's a little difficult. If you want to add a new product, you must open both files each time and add new data. We can use PHP to write all the data in a single file and easily add new products to your store by editing just one file.
Create a new file called data.php next to your files and copy the data code in it. This means the following code. Your data.php file should 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;
$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;
$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;
$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;
?>
Now remove these codes from index.php and details.php files and put the following code instead.
// Our Data
include ("data.php");
This means that your index.php file will look like this:
<html>
<head>
<title>My Shop</title>
</head>
<body>
<h1>Welcome to My Shop</h1>
<p> Buy new cell phones at a cheap price!</p>
<hr>
<?php
// Our Data
include ("data.php");
// Show Data
for ($i=0;$i<4;$i++) {
echo '<a href="details.php?id='.$i.'"><h2>'.$title[$i].'</h2></a>
<p><strong>$'.$price[$i].'</strong></p>
';
}
?>
</body>
</html>
And the details.php file will be as follows.
<html>
<head>
<title>My Shop</title>
</head>
<body>
<h1>Welcome to My Shop</h1>
<p> Buy new cell phones at a cheap price!</p>
<hr>
<?php
// Our Data
include ("data.php");
// Show Data
$id = $_GET['id'];
echo '<h1>'.$title[$id].'</h1>
<p>'.$description[$id].'</p>
<p><strong>$'.$price[$id].'</strong></p>
';
?>
</body>
</html>
See your store again. It's the same store and nothing has changed. It's just easier to add and remove products, and you can add new products by editing a file, data.php. We used "include" and included a shared file into 2 separate files and used it. PHP simplifies things for us this way. There is no data.php file in the stores you see on the Internet, and all the data is stored in the database instead. The database used with PHP is usually a MySQL database. A fast and hassle-free database that makes it easier for us and we no longer need to edit a file to delete or add a product, but by filling out a form we can add new products to the database or click to delete or edit previous products. In the next tutorials, we will learn how to use the database because we need it and thus make our online store more professional.
Download source code
Hafida
27 November 2020thank you for this wonderful tutorial.
For challenge yourself part;I think the solution is to decrement indices of the following items .
Mojipo
9 December 2020