Build an E-commerce with html, css (bootstrap), javascript and php – Part 2

Build an E-commerce with html, css (bootstrap), javascript and php – Part 2

After following the first step (preparation), we will manage our file as data structure in our web. Today I am going to explain how to manage our folders and files in our localhost. In this part, I assume all of you have ready with the equipment I mentioned on Build E-commerce with html, css (bootstrap), javascript and php – Part 1. Here we go



Let’s start by open header.php from inc folder. retype code below to your header.php with no one character left.

Let’s open your footer.php from inc folder. cut the header.php line code started from script taq until </html> and paste to your footer.php save then.

Now, you have 2 files (header.php and footer.php) like this.


Now, open your index.php from root folder and retype code below to your index.php

save then. Let’s open your installed browser and locate the url to localhost/e-commerce/

If your page doesn’t show anything, please don’t panic, because we haven’t added anything yet to the page. If your page load properly you will see the title appear on title bar of your browser. Now, go back to your editor code and put something on your page. retype this code to your index.php


Now, your index.php file should appear like this.

Now, check your page by pressing F5 button on your keyboard. Then you will see the jumbotron from bootstrap appear on your page. Reopen your editor code, we will add some elements. retype this code below to your index.php and put it under jumbotron div.

Now, open your htdoc folder locate to your inc folder and copy an image from your pictures directory to your inc folder. and put the image location to the src of image i.e <img src=”inc/img/jeans.jpg”>.
now Open your browser and press F5 button to check the image loaded properly or not.
Now, please click link bellow to download bootstrap offline documentation, after you finished your dowmnload, extract the zip and move whole files exist on the folder to xampp/htdocs, this will help you to organize your bootstrap properties. you can open bootstrap offline documentation by visit localhost/bts on your browser. Don’t forget to copy css and js folder to your inc folder
and attach bootstrap and adjust file with the path between stylesheet and javascript.

Download bootstrap here don’t forget to subscribe our youtube channel

Tags: , , ,

No Comments

Write a Reply or Comment

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