build an E-commerce with html, css (bootstrap), javascirpt and php – Part 3

Welcome back to, today we are going to continue our previous lesson to build an E-commerce with html, css (bootstrap), javascirpt and php – Part 2.

In this part we are going to create a database and build a connection to connect database with our e-commerce. Now, you can activate your xampp control panel, ensure your turn on your MySQL on control panel interface.

From here we start to locate browser URL to localhost/phpmyadmin if your xampp control panel established you will be redirected to the phpmyadmin dashboard, see the figure 1 below

Point your mouse to the left bar of phpmyadmin dashboard select and click new to create your new database then. Fill the input field with com_db then select a collation depend on your choice, in this tutorial I use utf8_unicode_ci to ease me in making a decission. Click create button to build save your database name to phpmyadmin (MySQL).

If error does not appear on your screen it means you are success to build a database, now switch your screen to editor, we will create a connection. The connection as bridge to control and manage any data from MySQL to our code and web design. Retype the code below


The code wrote above is a simple connection for learning purpose. The red word is an option to edit by your credential database, because we use offline server we use localhost for default setting, in other site and hosting you can edit the localhost by following your hosting suggestion. ecom_db is a name from database we created earlier, mentioned in connection to locate SQL database with name ecom_db in order to select, edit and delete data come from ecom_db. root is your default username from Apache setting, you can replace your username to other name by editing any setting file. An empty double quotes is a password from database credential, in Linux platform you have to set a password for your phpmyadmin, in any hosting too. I left blank password here, because xampp in windows did not ask for password setting. Save the code above as connection.php.

Now, switch your screen to the phpmyadmin to create a table called category. To create a table just point your mouse to the ecom_db and field an input field with name category then click go button. see picture below.


give the name for each field like I suggest. first field with id the second field category the third field parent. Set the first field (id) have (int) in type and have a check for A.I (Auto Increment) if you got a popup just click go button, in category filed change (int) to (varchar) give the length/value for varchar 50 and set parent (int) in type and left blank for length/value and set the default as defined: and type 0. And scroll your mouse to bottom and find the save button to save your category table. You can see the setting by image below


Let’s insert the category table with our category set, you can click insert on table ribbon to insert new category for your category list. These are your category should be. id = left blank category = Desktop parent = 0, id = left blank category = Motherboard parent=0, id = left blank category = Hand phone parent = 0 then click to on the go button in the bottom of your display, you can see the setting in the image below.


and the result should be like on the picture below

now, we will display this category into our template. By connecting our database with connection.php and please retype this code to your editor code.

and Try to load your browser by press F5 button on your keyboard to display category data from the MySQL table. If your code is getting error, perhaps you have not included your connection.php into your index file. Please fix the problem by including a connection.php file.

This my presentation today, we will see again tomorrow, please be kind to share this post with credit. Share to your friend who has similar purpose and goal with you, because I want to learn, share and success together. See you.

Tags: , ,

No Comments

Write a Reply or Comment

Your email address will not be published. Required fields are marked *