Creating Ecommerce Website with php 😎

[Music] [Music] [Music] welcome to this course on creating an e-commerce site from scratch using PHP and bootstrap framework here's our first module in lesson 1 we'll take a look at the introduction of this course and in the course agenda so this is a crash course that demonstrates creating an e-commerce site using bootstrap framework including creating back-end database using PHP myadmin will be creating products and configuring site functionality in order to create a fully functional ecommerce site and I'll demonstrate CSS PHP and SQL all these languages right from scratch using a simple editor in creating this ecommerce site module two is downloading the essential software to lessons in this module first I'll demonstrate how to download the xampp server and create our own personal web server so we can test the functionality of our site and listen to is I'll demonstrate how to download the editor which in this case is Adam and both of these are open-source software and I'll show you how to go about downloading them and configuring them before we actually start writing our code module 3 is programming from scratch for lessons in this module lesson 1 is creating the top navigation bar of our website lesson 2 is working with drop-down menus lesson three is inserting background images as well as product images and lesson 4 is working with our cascading style sheets so primarily from scratch using your editor I'm going to demonstrate how to in fact create our basic website and the structure of our e-commerce site and keep in mind that I'm going to demonstrate using code so the goal and the objective is to show you the basics of creating this e-commerce site obviously once you have the site created you can then later tweak it add to the functionality of the site such as add additional colors more images background images and whatnot but once you have the fundamentals down it's easy to add to your existing code module four is working with products I've put three lessons in this module lesson one is creating featured products lesson two is inserting those products and lesson three is configuring products functionality so this module covers the essence of working with products how to insert your products within your site how to add products how to create images how to use images and so on then in module five we'll get into working with database so we'll use PHP myadmin which is our SQL basically in the cloud three lessons in this module lesson one is creating database in PHP myadmin now demonstrate how to configure the database how to create the database and how to insert our products into the database lesson two is creating tables within our database and lesson three is linking products with our database so the objective here essentially is once we have the products on our site how do we actually link them to the database what happens when we update the database what happens to our products so I'll demonstrate the fundamentals and the workings of how that is done and module 6 is our conclusion only one lesson I'm gonna recap in this module the entire course from scratch to finish so by this time we should have a fully functional ecommerce site in other words we'll have a basic site we'll have some products in there we would have configured the products functionality and linked our products with the backend database this entire course is based on hands-on tutorials so I'm going to be using the editor and just simply writing code and then explaining the code itself and once again the idea and the goal is for you to understand not only the coding mechanism but also the fundamental structure of what goes into creating an e-commerce site from scratch so without further ado let's get started and let's move to our first lesson in this lesson moving forward I'm going to demonstrate how to download quickly the atom editor for our code we'll be using this editor and then also the bootstrap files that are required so a couple of things that I'm going to demonstrate how to download again pretty straightforward let me run through this ok so let's search for our bootstrap first and just simply click on the link where it says bootstrap or you can navigate directly to the get bootstrap com click on this and you can simply click on download and it will download the bootstrap for you so the current version is 3.2 e dot 6 pretty straightforward just download the zip file and then you install the zip file so once you download and save it on your computer let me quickly show you that also so let's go to our windows explorer here and within my htdocs by the way once you configure your xampp server you'll have this folder called htdocs which is important because everything inside htdocs' is where we'll be working with so let me scroll down here ok here it is so once you've downloaded the zip file for bootstrap for example you extract the files and here's the trick right so here's the important part so within the bootstrap folder there are three folders CSS fonts and jess so all you have to do is again copy these folders to one of the folders they are going to be creating inside htdocs' as your workable folders whether it's tutorial whether it's si 5 7 8 or any name that you give so this is something that you will create so for instance within the tutorial folder that I've created I already have these three files CSS font and j/s so just download bootstrap extract the zip files and place these three folders within the folders that you'll be working with just that simple once you have these boot crap files let me next show you how to download atom editor also okay so let's go back to our google go home and just you can go directly to atom that IO or you can just google it call atom editor and click on the atom dot IO URL it'll take you to the atom site you can simply download the Windows installer to install the atom and it looks like this so pretty powerful editor flexible although there are others available as well but I find this very easy to use especially if you're coding all day long this is much easier to work with so once atom is installed you can simply open software and it'll look like something like this so I hope this helps practice downloading these softwares and let's move to our next lesson in this lesson I'm going to demonstrate how to download the xampp server and then once it's downloaded i'm going to demonstrate how to actually go about doing some minor configurations to the service pretty straightforward process but i'm going to show you how it's done okay so let's go ahead and search for xampp server on google and typically we'll go to Apache friends download it which is right here the first link that it shows you can also download it from SourceForge if need be either way it's the same thing okay so let's go to Apache friends download X app and it takes you directly to the download page and depending upon your operating system you can download it for Windows for Mac or Linux and so on okay so it's your own choice the current version is PHP 5.5 dot 3 yo for Windows and you can either use the 32-bit version to download the entire file once it's downloaded you can install the exam server so again just click on download and it will download the file for you now once it's downloaded using the installer just install it just like a normal software and once it's installed you'll see the control panel okay so for instance since the xampp is running on my machine here so if I click on it and bring up my control panel and this is what it's going to look like so the two services that you need to configure your localhost where you configure your machine as your web server is the Apache server and then in MySQL the ports must also be configured by default your browser uses port 80 so make sure you change these port numbers and you can simply go to config for example and then go to your Apache HTTP d dot config file for instance let me expand that and scroll down and I'm going to demonstrate and show you where do I actually do it okay so here here it is so this is where you change the port for instance I'm using port 8 0 1 5 and you simply change the port here to say 8 0 1 5 and you scroll down the next setting the change is your virtual port which is right here so you're gonna change your server name localhost also to any port number so these two settings you must change before you actually have your exam server up and running so the idea the objective is to change your ports in the HTTP D file once that's done you do the same thing for the the SSL file for Apache and for your SSL change your SSL port to listen to any other port so by default this is 443 but I changed it to 1 0 4 4 3 okay so right here you can see so these simple configurations is done if I scroll down within the SSL for example anywhere that it says 443 it's gonna change to 1 0 443 so in this instance my virtual host is also changed to 1 0 443 so a couple of settings here you can change and couple of settings I short earlier and your Apache will be up and running deikun raishin option within the control panel you can set up the default editor if you need to edit these files and of course if you go to service and port settings you must also make sure that your ports are your new port numbers that you just assigned when you configured your exam server so these are the quick rundown on these settings of the except once you configure these settings you should be able to run these services for exam and once your xampp is installed all you have to do is just browse for your localhost for instance and it will bring you to your home page click enter for example it brings up to the localhost that you have let me also show you in fact what we will achieve moving forward in this course so I have here a site that I'm going to show you on my local server called the Redstone shop so here's the finished site that we gonna see and will create everything from scratch ok in this crash course so I have my main categories my women boys and girls and we are connected to a live database for all these categories and products ok so for example if I scroll down here my products if I click on the details of Levi's jeans a pop-up comes up shows me the quantity size details and so forth so this entire site first we'll create manually using all code there's no drag and drops all code and then eventually connect to our database and then use the database to connect to our product so just one or two quickly show you how to install the local server and once you have it notice it'll say port 8 0 1 5 so hope this helps let's move to the next lesson in this lesson moving forward I'm going to talk about how to create and demonstrate the creation of our drop-down menu in the previous lesson we created our navigation bar here I'm going to show you how to create our drop-down menu so here's our code from our last lesson I'm gonna continue right from here but before I tension with a couple of things and we're in just my code here a little bit so you can also see for instance hereafter our Hut tag is closed we need to open up our body tag okay so this is where our body tags open I'm gonna move my HTML body tag right from here and they go right at the bottom right for everything within my body tag adjusts great so once I've adjusted this I'm also gonna enter the comment so it's easier when you're coding especially when you have long code it's easier nicer to break them down into blocks and you can put comments over each blog so you know exactly what it is that you're coding within that block okay even though I did not start with this but it's a good practice especially if you're new to coding for instance it's a good idea to use those comments I'm gonna use them I found just to make sure that we understand and differentiate our code blocks so in this lesson I'm going to show you how to create drop-down menu right so let's write after a navigation bar I'm gonna hit enter and here I'm gonna first just a comment and I'm gonna say navigation bar Oh navigation bar should be a drop-down menu and I close my tag here and here's my comment all right next we begin our drop down menu let me scroll down so you can see so I'm gonna start off with my first tag here I'm gonna start with that class and I'm gonna say it drop down I'm gonna call it drop down next I'm gonna create some links okay because once you have the drop down obviously you need your anchor tags it's rough and right now we don't have a link to a certain drop-down so for example if I were to add it dropped on for a shirt as a product or shoes or any other products that I'm about to create since I don't have a link at this point so I'm gonna leave it as a number sign okay so nothing will happen I can always come back to this and create a link and then specify my class and this is going to be drop-down toggle and then my data toggle goes here and this is equals drop down then give an ID and this instance my DS gonna be text and then obviously I'm gonna say something right so in my first drop-down for instance I'm going to call it that's a man right this could be a category that would later take a look at it was my span class equals carats and simply close my tags here and use the span tag and get rid of this hanka tech for right now make sure I have my code correct okay so just run through this I'm an anchor tag here and at the end that's close me ain't a perfect you're this correct this there you go all right let's go to the next line I make it even smaller little ax so you can see the entire code there we go that's better all right next I'm going to create a list here again and this is going to be my drop-down menu and specify the role which is simply just the menu itself the next I'm gonna enter the items right those so the things that I would like in my drop-down this is where I can create a list on depending upon number of products that I want to have I can always create the name of the list and of course the link to it as well so my first list and then my it's ref tag here and I'm gonna just call it number sign and my first let's say category would be shirts that's what I'm selling and simply closes the tag and then the list also or I can simply just there to this alright scrambling this back up here alright sorry there's no first Miss complete and the good thing about this editor is that it shows me by underlining the list so it tells me that okay I created a list and then everything goes in the list tag and it underlines both the opening and the closing tags okay so this way we can keep track alright next I'm just gonna copy this line here because it's gonna be a Sam for the rest of my products in my drop-down menu so I'm just gonna copy this maybe have three or let's say maybe even four products right so first is church so next I'm just gonna change the text here so I'm going to say pants for example and then my shoes let's say and then one more product I'm gonna enter enter is let's say accessories right so we're selling accessories and make sure my spelling correct alright great so we created our drop-down we have a list we have our link we have our class credit called drop-down - menu and then of course our items that we created obviously at this point we don't have links to shirts pants shoes and accessories will create them later when we actually create those pages and then our list is closed I notice if I click on two UL it tells me the opening in the closing tags for themselves I also my list here this UL my div my nav my body so far and the HTML which is up here great okay so let's save this now let me test it out go to our browser and refresh and notice it says a menu where sit shirts pants shoes accessories okay great but notice I see something next to many which is quotations right so maybe we had one too many quotations so let's go back to our editor and let's find right next to the men right so if there it is we don't want this so this is an extra piece so get rid of this save it let's go back to our browser refresh and now it's appears so it's good okay so it's looking good so far so and this lesson I demonstrate how to create it drop down menu with a bunch of products that we wish to have now notice if I click on any one of these nothing's gonna happen because we do not have the URL linked to any of these products at this point what I also want to show you is maybe I want to change something to the nav bar right so I don't like this gray color since we call ourselves the Redstone shop maybe I want to change the color to red or some other color so first gonna go to my editor here notice on the left I'm a CSS folder okay so here we're gonna create a file called main CSS and if I scroll up the previous tutorial demonstrated that we are going to link to a main stylesheet so we're gonna create this main CSS or then our CSS folder first and then add an element and some piece of code that's gonna change the color buffer never someone do this quickly so you can actually see how that's done so let's go ahead and do this in order to create our main dot CSS I'm gonna go to the left navigation and on my CSS folder simply right click and create a new file it is within this folder and and they've changed the CSS and give the correct path so it's the forward slash here I'm gonna call it main dot CSS okay so here's my file it's a new file so it's gonna be blank so once it's created notice a new tab opens right so I start my index.php here and now I have my main dot CSS so here I'm gonna simply create a piece of code here so I'm gonna start with my body and then my curly braces here I'm gonna give it some padding here okay top for example and I can even play wrong with it so depending upon your own requirement you can take a look at what setting best works for you so I'm gonna give it 50 pixels at this point new semicolon to close and then my navbar my curly braces here one more time maybe enter some commentary so it's easier for us to see and relate back so whenever we revisit our CSS man files so we know exactly what goes on okay so I'm gonna say something like background color I'm gonna change it to FF the reason why I do this because I may want to activate this later okay and then I use my background color and this time I'm going to use some 8,000 or 80,000 or something like that okay the good thing about again Adam editor is that it shows you that okay well if it changes the color that means this is the correct color code you can always go online to the w3c standards for instance and take a look at the whole list of color codes okay so if you don't know these you can always open up your reference and take a look at which color you like to insert as your background color so first its navbar background color is set to this and our curly braces is closed alright so so far a simple background color we need to reference this within our index dot PHP nav bar code because otherwise nothing's gonna happen even if I were to save this and go to my site and test it nothing's gonna happen so once you create your code and main dot CSS we need to reference the navbar within our index dot PHP so let me switch to our next our PHP code and go to our nav bar fix top right after the inverted commas I'm simply going to say ID equals nav bar this way it knows where to put the color tool let's test it out save it let's go to our site refresh and so far nothing happens let's see what's missing here switch back to our code so our ID equals navbar which is fine so this part seems correct let's go to our main dot CSS this is okay but we need to save the main dot CSS that's something that we did not do okay so now it's saved and notice if it's not saved there was a small dr. which shows you that the file is not saved okay so we saved the main dot CSS our index is saved just to make sure now let's switch back and test it out and we have our red or whatever the color is burgundy type color for our red stone shot obviously this is the gray right so I can't really see it so what if I want to change some additional color so I can see the Reds don't shop and then the drop-down menu also okay so let's switch back to our code and go to my not CSS and right after my last curly braces I'm gonna add a comment here first I'm gonna say change color to no it's a white okay and once I have it let's go ahead and quickly create this background color I'm gonna use any one of these attributes right so I'm gonna use background color for my menu here and the white color is two three four five six well they're all put my semicolon specify the color and here is the of's and then some I call okay let's save this so we do the same exercise one more time we have to refer this text within our index dot PHP so switch to our next top th P and let's navigate to our nav Brian here and then give the ID and here are the equals text and of course our name stairs let's say save this test it out see what it looks like all right looking good so we all restaurant shop man and then our menu so in this lesson I demonstrated how to create a drop-down menu I also showed you how to change the color using our style sheet so as we're progressing creating our e-commerce site you can also see how we can create our CSS and then refer them to our index dot PHP and that's a good practice in programming when you're creating your main code it's always easier to reference my critique classes outside so for example if using javascript you can create scripts place them in a folder and call them from there similarly you can do the same with your cascading style sheets or any other functions that you're creating always call them in your code you can always create it within your code but eventually if your code is too long it may cause problems or issues that might slow down your progress so it's always easier and good practice to create functions and call them in your code or whatever methods that we want to use you always call them linear code itself so practice working with creating the drop-down menu and your cascading style sheet and let's move to our next lesson in this lesson I'm going to demonstrate how to create the top navigation bar of our website so I have my exam server running I'm a bootstrap files and folders installed let me quickly first show you where these are installed before I begin the actual coding of creating the first index dot PHP file so I'm gonna navigate to my file explorer here and here's the tutorial folder which is placed under the htdocs folder so once you create the tutorial folder or you can give it any name if you like but the important thing is to make sure that within this tutorial folder you have your CSS fonts and J's folder which is when you install bootstrap these folders are to be copied in the tutorial folder so once you have these folders here for now to get back to my browser here notice my URL is my localhost and then my port number hr:152 toriel folder and within this folder I have three sub folders and each of these folders contain Britt's files if I click on any one of these folders notice I'll navigate to my fonts folder for example so let's go back so right now I've no index dot PHP there is no site right now all we've done so far again is install the xampp server installed bootstrap so let's open our editor which in this case I'm going to use atom soon as I click on the editor by default shows me on my left navigation the tutorial folder and then the three subfolders that you see when you install bootstrap and the easiest way to open your editor since I already had this open I'm gonna close it so I can quickly demonstrate how to make sure that you have your folder open in the atom editor so let's close this let's go to more Explorer so all you have to do is just simply right-click on the tutorial folder and click on open with atom and what this will do is open up the editor for us and it will show us the folder that says tutorial and of course all the subfolders within the tutorial folder for right now we need to create our first index dot PHP file in order to create our top navigation bar the first thing we have to do is we need an index dot PHP file and that's one of the reasons why when I go to my browser I don't see a home page or any page in fact it just shows me the list of directories within the tutorial folder okay alright let's navigate back to the editor here so right click on tutorial and click on new file and I'm gonna call it index dot PHP I notice new file is created which says index dot PHP so the first thing I have to do is specify the doctype which is nice smart first and then HTML close my tag and then start my HTML tag and notice the way I've configured the atom editor is to do the auto close and I can always install the package that does this for me so I don't have to close the tags because most times when you're coding you forget to close the tag and your code is way too long and then you get some errors okay so it's a good idea to use the simple package they can install and add and once again it's under packages you go to your settings view open click on the packages and you'll see various packages that are installed and when the packages that I've installed it's called auto complete and so on so you can take a look at first packages they can install the one that I'm using right now is called the auto close this package allows the automatic closure of HTML tags so I just want to quickly demonstrate this let's go back to our index dot PHP so once you have the HTML tag we need our header or a head tag and then of course let's begin our title so here's my title as soon as I close the tag I'm gonna get a title I'm gonna call it redstone shop you can of course give it any name you like and then I'm gonna create a link and l equals I'm gonna refer this to our style sheet and of course our anchor tag its ref equals and I'm gonna say CSS and then our bootstrap that meant that CSS close the tag perfect so here's our first style sheet link so I've done so far just give it a title and then create our first link so in other words it's gonna go to this particular folder called CSS which is right here and then find the bootstrap mndot CSS and apply that style sheet okay so this is my first line of code I'm gonna use our main CSS also in other words apply our main stylesheet as well so I'm going to recreate another attribute when you want to call it stylesheet it's ref equals and just call the CSS and this time I'm gonna refer to the main dot CSS file close my tag and of course my meta tag comes next you want to call it meta name equals and this will be our viewport and this is important because this will specify the responsiveness okay so I'm going to specify using the viewport that we use in CSS to make sure that our page is responsive to our tables and anything else that we create inside and then specify content and let's say the width equals device - where comma initial tail it's typically 1 the user Gail equals no close my tag and this is just a meta tag here all right next let's do a simple script here and my script source equals and I'm gonna use an ajax script you can always look it up on the net this is pretty standard script so I'm going to say it's Google API yes comm slash Ajax and just refer to the libraries here and it's jQuery to that 1.3 I believe is the current one let me say jQuery not meant that is okay so simple script number run I'm gonna close my tag here and of course I need to make sure I have my inverted commas the good thing about these editors like Adam for example it tells you when you when you're doing something right and when you're not all right so I'm gonna go to this we don't need all of this and this simply close my script tag which is already closed so I'm gonna bring it up here okay great I'll go to my next line my next script is going to be script and this time the source equals things gonna come from Jess bootstrap that men that is okay and then close my script tag perfect my head closed and the HTML closed as well all right so this first part is essentially just giving our site a title linking couple of style sheets providing a meta name using the viewport and then using or calling the JavaScript and using bootstrap so this goes into the head tags of my index dot PHP file alright so far this is our HTML basically so that we can create our web page or index dot PHP file when started with the navbar yet but couple of things I wanna mention before I move forward is for instance the CSS main file here this is not part of any of these folders because we'll be creating our own style shape and all elements within the style sheet or selector elements and attributes we'll specify within this style sheet that's why if I go to my CSS folder for instance CSS folder notice there is no main that CSS file within this folder okay so we will create the main that CSS of course as we go about creating styles for our website but the reason why I mentioned this within the HTML because we want to apply the CSS stylesheet and we'll create this file later alright perfect so let's test it out see what happens when I actually save and refresh our page what happens so let me go ahead and just simply quickly save this navigate to my browser and refresh and notice we get nothing right all we get is the Redstone shop on the top left and that's about it because all we have right now is just a blank page and a small title that we see on our tab on the top left perfect score editor alright next I'm going to create the navigation bar on our website so let's start with the nav class and I'm going to call it a nav bar and that bar dot default and then I'm gonna make sure it stays fixed on the top close my tag here I'm gonna do another div class and I'm gonna say container close my tag alright next let's enter our anchor tag here so I'm going to say a H ref and this time I would refer to my tutorial folder and then my index dot PHP and then use a class for my navbar brand and to specify the name here and this is the Redstone shop and let's just do an unordered list here I'll specify the class I'm gonna call it nav nav bar not nav close my tag and just make sure all right great so so far in first half we have to create a page and then the next half we quitted the actual nav bar and we fixed this navigation bar to the top of our page we created a container that specifies for the entire nav bar and then quitted the link to our index dot PHP let's test it out see what happens let's quickly save it let's go to our page let's refresh and notice here's our navigation bar okay now of course I can add to this for instance change the color of the nav bar and so on or the sides and the width and so forth but the basic idea is I want to demonstrate how to first create our navigation bar and notice as I hover over the Redstone shop on the bottom you'll notice the link being displayed which is to our index dot PHP or our home page so if I go to my code and here's the link that we created to our home page if i do not give the anchor tag here no problem it will just not display a link they'll just create the nav bar and fix it to the top so I hope this helps and this lesson we took a look at how to create our nav bar from scratch including configuring and setting up our index dot PHP file so practice and let's move to our next lesson in this lesson I'm going to demonstrate how to insert images onto our site so we created some products we created a drop down menu now we need to add some images both the background image as well as the product images our index dot PHP for instance and we have our main stylesheet or cascading style sheet here main dot CSS so first let me navigate back to my index dot PHP in order to create or insert images we need to go to our tutorials folder and create a new folder you have a folder already that's fine but if not I'm gonna create one so I'm gonna right click on tutorial click on new folder and I want to call it images so at this point there's nothing in my images folder but I just name the folder called images so let's go down to our index dot PHP right after the nav tag here I'm gonna first provide a comment I'm gonna call it inserting images next start with my div tag and specify a few IDs okay so it depends on the number of images that you want to create you can create several IDs on the go so first I'm going to set the background image so its background image next number div ID and this one is going to be image 1 for example and you can name as per your own requirement goes my tag and of course I need my div tag closed alright so make sure we have everything corrected here commas here for example this I already have my div tags here I'm gonna use them ok another ID and this is going to be image 2 all right and then finally close my main div tag alright great so just three IDs that I created here one for the background image and then a couple more images now once we've created our folder it's called images then we created our IDs here in our index dot PHP next I'm gonna go to my CSS main that CSS and then actually create these styles right and the selectors so let's navigate to our main dot CSS scroll down to line number 14 here and first to the background image selector so just do the background image then we're gonna make sure we open it up with curly braces and here I'm gonna enter the URL or the location of the actual image okay so in this instance right now I just know that it's background image and the URL for this particular image is in my folder right because that's the folder I created I'm a reference to this folder so here I'm gonna say simply creating the reference here by clicking on by providing the slash and just typing images and then the name of the image okay so right now I don't have an image in my images folder so either I can place the image first in my image folder that I wish to use and then provide the name here let's do that first it's easier because once you have the image in the images folder then you can always reference it within your stylesheet okay so I'm gonna leave everything here I'll go to my file explorer and I may have some images here for example here's my background image and a couple of others as well so I need to drag these images and place them into the images folder here and just move them here and just verify that all these three images are inside my images folder so once they are in this folder let's go back to my code here and now I can specify which image I like to insert so for instance since I'm using the background image and the name of the image is background dot jpg so I'm just gonna say background that and jpg here and of course use my semicolon and next I'm gonna create others as well but I forgot the D here for the background so make sure your spellings are correct so next I'm going to create my second four element for the image one here so I'm gonna say image - one my curly braces and repeat the same thing so I'm just gonna copy this and place it here and just simply change it to say ecommerce dot PNG or I can use the other image as well so depending upon your own preference right so I can say something like e-commerce - dot jpg and so on and likewise my last element I can simply copy this and paste it again and this is going to be image two and this is going to be called ecommerce dot PNG okay great so once I have the three images here in my main CSS first is the background image image 1 and image 2 going back to our index dot PHP I created three IDs called background image as ID ID for the image - one and my last ID for image - and also made sure that all of these images are placed in my images folder within my tutorials folder let's save these files save my index dot PHP and notice you'll see a blue dot right so this means that you've not saved your file yet so just ctrl s to save the file so once I've saved both of these files whether it's the main dot CSS and index dot PHP let's test it out let's go to our browser and refresh to see if something is displayed and nothing really happens so let's go back to our code and see what went wrong here russer are caught seams okay we have our ID background image image one image - let me check this CSS and these URLs are also fine the reason why we don't see them on the screen yet is because obviously we have to style them right so in my next lesson I'm gonna demonstrate how to use CSS and how to use the padding for instance how to use the borders the margins and in fact bring these images they have been added that's for sure but we need to style them in order to bring them to where ever we want them to be displayed on our screen another thing we can do is I can always add let's say after my div I'm gonna use my paragraph tag here add some text as well so I'm gonna use P here and I'm just gonna bring up some text and I can bring the text from the net here for example just some sample text I can pick from many of these sites such as lorem ipsum or you can use any text you like as well okay so I'm just gonna copy this and go back to my code and simply paste it and paste it a couple of times depending upon your own requirement so save it switch back refresh and here's our text now we still have to work with the images because all I've done so far is inserted the images but they're all over the place we don't know where that is on the page yet once we start styling them we would bring them onto our page and adjust them accordingly but for right now let's go back to our code I'm going to demonstrate the use of code here for instance and then of course our text that we added and we got adjust the text it's just some sample text that we have novice Justin so this way in this lesson I demonstrated how to add the images on to our e-commerce site the next lesson I'm gonna demonstrate how to style them so hope this helps and let's move to our next lesson this lesson I'm going to demonstrate how to adjust our images that we inserted in the previous lesson and then take a look at how we can use them and specify certain places on our web page so for instance in the last lesson we inserted the background image image 1 and image to and then we also used by going to our CSS file and then created various selectors right so background image and then some attributes and values and then image 1 an image 2 but when we actually navigate to our site we don't see our images obviously is just text so let's take a look at how we can adjust these images using CSS so let's go to our code here go to our main dot CSS and here our background image let's do some positioning here so I'm gonna use position and keep it relative and give it some padding:0 margin:0 and then over full I'm gonna keep it hidden the image my height and working with CSS is easy once you get the hang of it once you understand the styling that you'd like to provide to your images and then I have my background image already next I'm gonna use and work with my background so I'm gonna say background repeat' I'm gonna set it to null repeat and then my background size and this I'm gonna set it to hundred-percent and then maybe 600 pixels or maybe even 7 pixels for now and you can always test it right so once we create this style for our image and take a look at in a browser we can adjust these settings and then the next the position I'm gonna set it to let's say top center well maybe do another attachment for this image to say it's fixed and then close my curly braces so here's vs. properties and then values that I've set for the background image I can do the same thing for image 1 for instance and here for image 1 I'm going to keep this position to be absolute and then I'm gonna specify some widths and Heights as well and it's going to be hundred percent and then specify the height for example and this is going to be something like maybe 190 or 200 pixels we can always take a look at this later as well or maybe even increase their side - let's say 350 for now and then work with my background properties background image for instance could I already have it from last time so let's get this up and after my background image I'm going to specify the repeat to say no-repeat and then the position and specify those to be let's say I want this to be displayed on the left bottom here and then my size of the background on this I'm going to leave it to auto maybe 200 pixels and then specify the top value to be negative 100 pixels and these are your z values that we can work with and the left one would be negative 25 pixels and then my curly braces is closed and last one for image - I'm going to specify some properties and values quickly for image 2 as well I can always of course copy it right so I can copy the image 1 a few values from the top so I don't have to write them again and again if assuming that they're the same positions right you can always change them depending upon your own need so here I'm gonna say because if use absolute width is 100% and height maybe is 190 for example and then my background image is already here of course I need to write the pixels right px otherwise is not going to work and right after my background image I have to have my repeat position and size right so I'm just gonna copy it from my top here and paste it here so back and repeat to no-repeat and this is going to be in the left bottom because I want the images to stay together and then the size of this is going to be let's say 50% and then 200 pixels it's fine and then maybe some settings for the top 80% and then finally I'm gonna give it a margin also okay something top margin of night- 90% alright perfect so I'm a curly brace is closed so make sure everything is set let's save the main dot CSS file and let's go back to our site and test it out let's refresh and we have a nice background so that's good our text is moved to a position just below this is fine I still don't see my images okay so let's go back to our code and see what happened to our images so image one image 2 and our back so background shows up which is good absolute height okay here we go so here's we need some pixels right so 350 pixels for our height our path is correct and also our spelling background repeat' is okay background sighs Auto tap and then left we also need a semicolon here see how many mistakes you get and then for image two let's verify our position is absolute width and our height path is correct repeat position background size tap and then margin tap is 90 well can't be 90 percent needs to be pixels okay all right great so let's save once we have identified a few errors here let's verify go back to our site reload and good so we have our images perfect so our images are aligned okay they're together just like you wanted and then our text is also displayed our menus are working fine and we have our navbar configured so working with cascading style sheets is very powerful depending upon your own requirement you can adjust the images or the background for your e-commerce site so I hope this helps practice and let's move to our next lesson in this lesson I'm going to demonstrate how to add products how to configure our basic structure of the modal right the pop-up when we create on the details button for example our products should be displayed and we should take a look at the details of the product so let me scroll down to see our last line of code here all right so last thing we did was insert a footer so let's navigate to our website to verify here's our site I'm just quickly refresh and here's our footer that we inserted in the last lesson so I'm gonna use some CSS to configure the footer okay maybe use some color maybe add some space because it's too close to the products okay so let's go to our code open up our main dot CSS and then use our open the curly braces and first I'm gonna give it a margin to the top let's say 50 pixels and then use my background color specify the background color to be the same as my navbar and then the color of my text should be white great save this test it out click reload and now we have a nice footer and some space as well between the products perfect let's go to our code open up our index dot PHP alright next I'm going to create and talk about creating the details model so right after my div I'm gonna have some spaces here so we can see and first of course enter my comment so this is going to be our details model alright the way we go about creating our details model for each of our products is first we create various PHP files ok so within our tutorials folder for example I'm gonna create several files relating to each product and once we create those files we will include those files within our code so you can either create the files first and then include them or write the code and then create the file so either way it depends on your own style so here I'm going to write the code first and then we'll simply create the empty files later so here's my PHP script that I'm gonna use so here's my PHP and I'm gonna say include the details I'm gonna call it modal I'm using the naming conventions so we stick to our same convention in other words the name of the image for example here I've headband so I'm gonna use headband so that way it's easier to follow and as you build code you make less mistakes so my first product was Levi's jeans that PHP okay so this is what I'm going to create as my first PHP put a semicolon and let's include our next product and call it details modal - football if I'm not sure I can always go back scroll up and take a look at my football okay I can copy it from here and scroll down and paste it so just to make sure that we don't make any mistake or errors and place a semicolon and do another include and so on so I'm gonna fill this up quickly so it's easier for us to see and take a look at so here by the way it's not jpg it's gonna be PHP right because that's what we're gonna be creating later on alright next is my detailed modal one more time and this is going to be my watch dot PHP alright so I've entered all my products here for instance and once I'm done I can simply make sure I have my PHP and then bring my body and HTML tags up I can always write another comment here specify end of details modal great save this and next I'm going to create the PHP files within my tutorials folder so just right-click on the trail folder click on new file and the first name of the file is going to be the same as the same name which says details - model - Levi's jeans dot PHP okay so I can type for example details model - Levi's jeans dot PHP so here's my first file similarly I can simply copy to make things faster and make less mistakes right-click on my tutorials folder new file and then create my next file so I'm going to repeat these same steps for each of these files create a new file and then my fourth product is my headband copy this right click on tutorial new file and continue on to do the same for my rest of the products and again each product is going to have its own pop-up modal right so that's why we're creating each of these all right couple more left here quickly just copy it right click on tutorial new file and enter and finally the last PHP file is going to be our polo shirt great so right now these PHP files are all blank right so it does not contain anything the only thing to be careful and watch for is to make sure that these Spelling's on the name stay the same right so for example if detail - model - football dot PHP your code should also match to this so in this doesn't I just wanted to demonstrate how to insert products and create the PHP files for each of those products to build our model for each product so I'm going to close all of these details model because these files are all empty we don't need them right now great in the next lesson I'm going to demonstrate how to add code to each of these PHP files so that our product functionality is enhanced so practice and let's move to our next lesson in this lesson I'm going to demonstrate how to add featured products to our e-commerce site so before I in fact add or start adding these products let's quickly take a look at where we stand as far as our site is concerned so let's navigate to our localhost here and refresh perfect so we have our background a couple of images but let's change this background quickly before I add some featured products in other words I'm gonna make some room and make sure our products are displayed nicely on the screen so let's navigate to our code quickly here and first I'm gonna change the background so I'm gonna click on the main dot CSS file go up to my background image and change the background I can always navigate from the Left pane here and click on images to expand I've added several images okay you can also add your own images if you like all you have to do just place these image files into the images folder within your tutorials folder and will be displayed here so I'm gonna choose the background one so instead of background just simply type 1 save it go to your browser reload and it will change the background for you so this background is much better than the previous one next I'm gonna quickly move the image of this laptop to the top right or maybe change the image and use a different image so let's go back to our code and I'm gonna change the image to here for instance right now it says ecommerce top tangi maybe I want to use let's say which one all right let me go to my tutorials here folder images this way I can see the images right so I'm gonna use which I'm it's right here square okay so I like the square image go back to my code and just change the name to square dot PNG save the file reload and it displays here of course using my CSS I can manipulate this image and move the image around on my screen let's do that so here the position is absolute with this hundred height is 190 since my image height may not be 190 pixels and I can verify that by going to my browser and taking a look at this image as I hover over this image it shows me that the dimensions of this PNG image is 290 by 300 so I need to keep that in mind so here it's 190 so I'm gonna change it to 300 and then background repeat' is fine background size and the top and then the margin tab so I need to change some settings here first I'm gonna insert or before I insert I'm gonna change the tab here so I'm going to keep it to 15% and then the position instead of left bottom I'm gonna say it tap right because I want to move it to the right here let's save and reload and see what happens for image alright great so it moves to the top right and there's a very little space between the navbar and the image so I move this image down and make sure it's sized correctly so go to my code alright next let me change the background size of this image to I'm just gonna use auto here and then tap maybe a little bit more and that's 8% and margin tab or maybe just leave it to zero for now and one thing I when I add here also is the margin left so make sure our image is aligned properly and this is going to be minus 100 pixels save the main CSS file make sure we have our semicolon say one more time let's go to our browser refresh and nice image is now displayed we can always move the same it's more based on your own requirements okay but for now looks good so far alright great so we quickly change the image as well as the placement of our image to there's some text what I'm gonna do next is remove this text I'm gonna add some featured images and we'll come back to this text here as well okay so let's go to our code okay next dot PHP and here's my text so I'm gonna get rid of it for now I can always add it later alright great alright next let's start building our site further right after the dev class this is where we will create our code for our featured images so in order to create featured images first we must understand that since we're using bootstrap the viewport or the screen essentially is divided into twelve grid system and that's what bootstrap uses and within these twelve columns so to speak it automatically adjusts based on the responsiveness so I'm gonna create using the 12-point grid system and predefined bootstrap classes to create these columns so let's start so here's our div class or before I even do this let me insert a comment here okay it's always nice to to know that we're using I'd say the main content goes here products featured products all right great next let's do our div so div class equals and then my column classes column - M T - eight and fix this two dashes here perfect alright next I'm going to do my or define the role here so let's do a div class and this is going to be a row and then I'm going to do some h2 class equals text to be in the center and then let's call it featured products this is my heading two and then do another div class for my column mid three their class and we'll say c UL mid - three and here I'm gonna place another heading and let's say heading 3 or I can use for I want to call it Levi's jeans that's one of my products so that's heading 4 so once I have my headings I need to also ensure that I bring an image right for this product so my image source is gonna come from images folder and my Levi's and make sure it's jpg or PNG right so just to double-check whether I have this image or not and here it is so here's my Levi's dot jpg so back to our code man here's my Levi's jpg I can also specify some alt text for this image so if someone hovers over this image they will see it says Levi's jeans and specify the ID equals images and then close the tag here for my image source next I'm just gonna do a p class list price for example specify the price of my product and call it list price text danger spellings right here and also right list price right space and the price is going to be format Levi's jeans I'm gonna sell it for word let's say $24.99 and then close my paragraph tab alright great so I have my paragraph clothes here out of this so it doesn't duplicate this and also make sure could we do some Corrections here so it's column MD so I'm gonna make sure this also stays the same its column empty and then get rid of this extra backslash here and this list price that I've just listed by the way is the strikethrough okay so we're gonna create a list price and then we're gonna give an offer discount prices as well so that's why the S tag is for the strike - it's gonna place a line across $24.99 so once I have my list price created then we're gonna create our actual clap actual price rather so here our actual price is going to be our price and I'm gonna say our price is going to be lets say $19.99 and we're just giving a discount and bring this up close our paragraph alright next obviously need a button right so we need to place a button so users can click on the button to see the product for instance so we'll just use the button type and our button type is going to be called button here's a class here I'll call it BTN - success and use my data toggle equals modal okay and we create this model so that when so that every time when a user clicks on the button a pop-up screen appears right so you can see the actual product details the image the list price as well as the discount price so we're gonna create this modal here and give it a target so my data target equals details - one right so I'm just gonna say it details - one with a number sign and provide the name it's called details the smaller a little bit and we have our first button created and then my div closes here for instance so within this div class of column - and the - 3 we created our product called Levi's jeans you give an image let's price the actual price and then we created the button let's test it out and see what happens so let's save this go to our site reload and scroll down to see our first feature products okay it looks great so we have our title here we have our jeans the list price is of course right through and our price is $19.99 and here's a button so if I click on this button now there's nothing happens at this point okay right now all we've done just added the product here great let's go to our code now next I'm gonna add several products so we're not just selling Levi's jeans we may be selling other products like football frogs and so on hoodies and so forth okay so we'll be adding additional products and what I'm gonna do is just simply copy the existing code for my first product and then paste it several times and make the changes okay so I don't have to write code again once you create the for one product essentially repeat the same code all you have to do is change the location of the image maybe the image name and the prices so let's do that so in order to do this let me first copy our first product here which is right here starting from the dev class column md3 all the way down to where it closes the tag okay so I'm gonna copy this and then create a couple of spaces and then paste it a couple of spaces and paste it again so that's three times right we have our original feature products and then I paste it twice I'm gonna do maybe one two three maybe four more times so we have about six seven products and each of these products obviously at this point I'm gonna be repeated because I need to change these lines to reflect new products and secondly I also want to make sure that these products and the modal appears in the center on my screen so at this point the future products is on the left so I'm gonna add a code later on after I can figure these products so that the products are displayed in the center so let's quickly scroll up so my Levi's jeans is done my next product where it says column mid - 3 + h4 and sort of Levi's jeans I'm gonna change it to let's say football so I'm gonna call it a day this and football and then of course copy this change my alt text also say the same and of course my image comes from my left image folder and here's a football dot jpg so I'm gonna say a football dot jpg change my prices this is going to be 34 or $39 or whatever price you want to keep that 99 my list price is going to be changed to let's say 29 and then my data target button stays the same and this changed to my second product so details - - ok same thing scroll down my next product is going to be let's say selling some watches also so copy this change to the alt text change the price change it to 20 dollars and 99 cents and this is going to be 17 dollars only and change my details button to say 3 in case we get the idea so this way let's continue on to our next product alright but I did forget was of course the image okay so image source for my watch so instead of Levi's I'm gonna say where's my watch here all right that's fine here's my Gucci watch okay I'm gonna say its underscore and watch I'm gonna be careful to make sure that you use the same name otherwise it's not gonna pull the image okay from that folder alright my next product is going to be my polo shirt copy this change the alt text and the next is my image of course and find my polo shirt dot PNG so this is polo shirt dot PNG make sure my Spelling's are correct alright great and then my list price is $24.99 and also change this to PNG right because this is a PNG image right here on the polo shirt dot PNG you gotta be careful when you're coding because as your code grows typos are pretty common so get be careful all right poet wrote about PNG and it changed my list price to let's say 50 $4.99 and then change this to or keep it to 1999 and then change the target to say details - 4th so this is a 4th product so what I'm gonna do is I'm gonna skip and add these products so they're pretty much the same as the rest of them alright so what I've done is I've added conditional products and simply repeated the steps that we did earlier for our first products so my last product here for example is the headband that I added now let's test it out so I'm gonna save it go to our browser and refresh and see what happens all right so our products are all jumbled up which is nice so we have our 1 2 3 4 5 6 7 & 8 products so let's remove the jumbled up products and fix some of these issues so let's go to our code and let's scroll up so let me place these products in the center here so right after my main content that's a place not to comment here easier to follow so this is simply going to remove the spaces and Center any products so here just to a div class and this is going to be using the bootstrap function and sort of - and sort of free I'm gonna set - and close my a div tag let's save it let's go back to our site refresh and our future products are now in these center great good progress so far let's go to our code alright at this point our images are jumbled up still there in the center because we made sure that they remain in the center now and all you have to do is just remove the problem and make sure our images are displayed correctly so so far within our code here I created this ID or later on called images and within our CSS I'm just gonna call this ID and create a selector because each product for instance my future products has the ID referring to the images and then I have my football also referring to the images I have my watch referring to the same ID and so on so all of my products have the same ID so let's go to my main that CSS here scroll down and let's create a selector called images and simply open my curly braces and let's specify a width so here my width is going to be auto for instance and I'm also going to give a height off let's say 175 or let's say 200 pixels I saw some I : that's about it all we're doing here is simply creating a selector and then specifying the width Auto for the number images and let's save this go to our code refresh and perfect so we have our featured products and they're all in the center and listed correctly so our site is looking nice and each product has a button as well as a scroll down notice there's no footer right so I'm gonna add a footer also so it looks a little better that way so let's go to our code and let me never get back to our index dot PHP scroll all the way down and right above or below of my last div I'm gonna insert a footer use a class and this is going to be text center give it an ID called footer and again you can use any naming conventions okay so hands on your own structure for your naming convention and let's say I'm going to create a copy and then say copyright because it's our own e-commerce site 2016 to 2017 for example I'm gonna call it redstone shop of course my footer closes let's test it out save this refresh our site alright doesn't show up let's see what we did wrong let's go back so here's my footer class my text center ID equals footer looks good so far all right this looks okay let me scroll up here just to verify one more thing I have my comment here for my column which is fine my feature products is okay let's scroll down and for a class Tech Center ID footer hi this looks good so let's say if one more time and refresh to see whether our photo shows up or not all right it still doesn't let's go back all right let's troubleshoot here a little bit so my footer is outside my divs here so my last if that close is scroll up to see where it begins right here so this is a column mid - 8 ok so since within this column I need to make sure my footer also exists otherwise it's not gonna show up on my screen and that's what's gonna happen is I'm simply going to remove my last div and place the foot inside the div and now if I save it go back to our site refresh and here's my footer okay so it says copyright 2016 - 2017 redstone shop of course I can give some spaces as well and further use the CSS to do that but right now our future products are listed there looking good there in the center and the prices are also displayed obviously if I click on the details but nothing happens ok so in this lesson I simply want to demonstrate how to add featured products to our e-commerce site so practice and let's move to our next lesson this lesson I'm gonna move forward and demonstrate how to configure and create code for each one of our products within our modal that we're creating so in the previous lesson we created the details model and we can created various PHP files so I'm going to create code for one of the PHP files and of course once it's created the structure is created we can copy it for the rest of the products as well change the names and so on so let's begin with our Levi's jeans and by the way before I begin let's navigate to our site so I can show you by refreshing that all we did so far is create the featured products configured the footer and so on so at this point when I click on the details for the watch for instance nothing happened so we'll be configuring a modal pop-up box that's going to show me additional details about the watch when I click on detail great so let's go to our code from a Left let's click on and the Levi's jeans PHP so here let's start with our class my first div class as modal fade details and dachuan the ID in this instance is details - 1 my table index it's going to be negative 1 the role I'm gonna say its dialog and then specify the area which is accessible rich Internet and that's bootstrap so here I'm going to specify the area - label by equals my details - 1 and then also specify our hidden property so area shouldn't a RI a and I'm gonna set this to true okay great next specify another div class and this time I'm gonna call it modal - dialog and call it modal - LG so this is our dialog box that's gonna pop up also create the header div class and call it modal - header and next of course cannot forget our button because once the pop-up comes up we need a button right so just specify a button class and I call it closed type is going to be button and use the data dismiss equals modal and specify the area - label and call it closed all right great so right off the button I'm gonna use the span tag he ridden true and specify at times semicolon and then close my span tag okay so this goes within my button class alright next I'm gonna place a heading maybe heading 3 or maybe a little smaller go with the heading for class and this is going to be our modal title and the text is going to be in the center and I'm going to call it and Levi's jeans and close our heading so here's my first div is the header for our model and one thing I want to add up here okay is right after my modal header or prior to this I'm gonna use another div class to place the content okay their class and this is are going to be a modal content all right so I have one two three four devs here and of course I need to close and make sure I have my fourth day okay so that way we don't make mistakes as our code increases okay so gonna be make sure that if you have for devs open then you need to have four days closed okay so the first step that we created was the button and next let's continue on and create some more dev classes for our body and maybe the container sort of class equals modal body and then create some rows for this div class equals role or before the role let's create the container fluid right make it container - fluid and this is also bootstrap by the way and then do the rule so we have the body we create the container we created the role and of course specify our column as well so div class this is going to be column C OLS m6 for instance and then the placement okay so let's say dev class I'm gonna call it center block all right so we have the body the container the row-column the center and then our image right because once the pop-up comes up we also need to specify the image source for this and this is going to come from our images folder I'm gonna call Levi's dot jpg you give it some alt text call it Levi's jeans you give it a class here and call it details image it's going to be responsive and close my image tag one too many all right so we placed our image next I'm going to close this div tag for my image and then the following div tag also for my column six class next let's create another column here so column div class and this is going to be column SM - six referring to the same column one more time and then my headings so start with h4 for instance and call it details right after my heading for add some text also so just a new paragraph and I'm gonna call it these jeans just type some text these jeans are amazing you must try them and buy them get them while they last something like that and then close our paragraph tag all right great so here's some text that I'm gonna do the HR and next specify the prices also so under a new paragraph for instance I'm gonna say price equals $24.99 I think that was the price for our jeans close our P tag and the next of course our brand it's gonna be Levi's also brand its Levi's okay so so far we created the containers columns specify the role the block the source of the and some text that we wanted to display on this particular model next continue on we are going to create the same for the rest of the products so let's make sure our tags are closed properly since I've been closing them manually so we don't need these anymore great alright recheck our code make sure we have everything correctly done and you scroll up this is where we started we created a div class gave a detailed stash one specified the area just make a little smaller so we can see or in fact let me resize this part and then make it bigger so you can see okay alright we gave a div class for modal dialogue modal LG for instance then the content our header specified the button in our span area true okay I need to close the tag here for my span and then use the at times call great the good thing about again these editors is because of the color coding right so you can take a look at and as you get more experience and writing code you got comfortable with the color schemes and the code as well so we have the span corrected and then my Levi's jeans the body container and this should be rather the opposite way so it closes the edge class and now we have our tech corrected perfect alright then the body fluid roll columns this looks good so far our image source is good our paragraphs are ok and our div tags are closed so my last div tag goes to my first div tag my second div tag goes to my second last div tag and so on okay so just to recheck our code before we save and actually see it's a good idea to do this early on so that way you'll have a few errors if any so let's save this and test it out see what happens ok let's navigate to our site refresh great where's my Levi's jeans right here so at this point if I click on details a nice modal pop-up comes up it shows me the image placement my title the details of the product these jeans are amazing you must try them buy them and get them while the last and then the price and the brand a couple of things I don't see is the button I don't see a button here that we created and of course a title some text that we need to capitalize let's go back to our code so here's my title first to make sure its capital hello and let's navigate to our button here so my button class is closed and of course the type is button all right this is good so far so this close button by the way is the close for the dialog box okay so it's not the button that will be creating so we'll create that next I'm gonna demonstrate that in fact I'm gonna create that for you so we can have an actual button on the modal that says closed or at card or whatever okay but for right now this closed in fact closes our modal so if I click on details it's right here okay so it's the X button is the close button that we created we are going to create a button here also so I'm gonna show you how to create a button here so that one users want to click this button to close this model they can do so from here as well great let's go back to our code and let's scroll down so right after my brand Levi's I'm gonna create use the form function and call it form action and this is going to say let's say add to cart I'm gonna again create a couple of things here right so add to cart as well and of course the other button first the form action is going to be for the add cart dot PHP the file I'm will refer to and the method I'm gonna use there's the post okay so that's my first form action next do another div class I'm gonna refer this to my form group and then specify my column also using div class so here's column X s3 and then once that's specify the column and use the label so the label for example quantity is going to be the ID which I'm going to refer to label because once we're adding to the cart you need the user to enter the quantity also right now just select one or pick one but you want to be able to have them use multiple products if they want to buy more than two jeans they can do so so here's where the input function comes in but perhaps the user so the input type equals text and the class is deformed control in this instance and of course our ID must be given same as quantity and I can specify a name as well name equals quantity and simply close my input tag so once I've provided the input my div tag is closed so within this column X s3 I created the label and the input type so maybe do another break for instance or I can insert a couple of breaks if I like or just one I'm gonna leave it for one right now if I need be we can create others as well all right continue on let's create a div class here and refer to our form group and create a label and specify the sizes you call it size next I'm going to create the select or use the select option right so users can select also so it's going to be select name equals size of course ID equals size and class is going to be our form control a form control close the tag here and on this form I'm going to specify certain options right so the first option value is going to be nothing for right now we're gonna add this later my second option value alright my next option or before it type my next up and bring this up so it's easier to copy because we're gonna create options for rest of the drop-down products okay so I'm just gonna copy this and paste a couple of times here so the reason why the first option value is blank because when the user for instance clicks on the drop-down arrow the first field has to be blank otherwise the the numbers gonna be display in the first field and you'll see in just a minute what I mean by this okay the second option value for instance I'm gonna call it give it 28 for this product and say 28 the next will be 32 and 32 maybe under some more option values and this time when I said 36 and 36 and these are again just the different sizes of my Levi's jeans that I'm created and then I my select label closed alright let's test it out so on gonna see what we actually did so far so let's save this let's go to our browser refresh and here's my Levi's jeans click on the details so we corrected our title which is good here's the details we had at the price brand and here's the quantity right so I can enter the quantity and then the size obviously we need to adjust the spacing of this as well okay and here's my drop-down and the three sizes that I just entered which is 28 32 36 and the reason why the first option value was left blank is because you don't want any value displayed in this bigger field when the user clicks on the drop-down arrow so the only values that you see is are these three values all right great let's close this go to our code alright great so let's remove the extra line here okay so here's motive for my form group selective here's my form that ends so this is the entire form that I created so far and right after the form let's specify my dibs here 1 2 3 and let's say 4th live and then do a div class so here's my div class and here I'm gonna create the footer so I'm gonna call it modal footer you don't have to if you don't want to it's a good idea to design and make sure you have everything within your modal and here is where our buttons go so I'm going to create a button class and I'm gonna call it BTN put a default button and use my data dismiss and call it modal and then close the next button is going to be for the warning here for instance so I'm going to say button BTN warning and then the type is going to be submit and also specify the span as well so here this band is going to be span class equals to your eye and you can use these any others as well okay so I'm gonna use the glyphicon tly phi0 n and then the shopping cart you can use again others as well and then right off the shopping cart close my span tag and then right after the span I'm gonna say Add to Cart and then close our button alright great so far we couldn't the two buttons let's scroll up we cap our code first we created the modal itself on the top specify the location of our title image some text of the image prices and then created the actual form within this entire form tag for the user included the sizes and then finally the two buttons that we created man or another break here okay because we had that two fields joined together when we saw the modal pop-up earlier so I'm gonna use the BR tag again and just quickly fix this alright great so just a couple of tags be our tags that I'm gonna create if I can get this right alright great save this let's test it out refresh click on the details button for our featured products Levi's jeans and this time things are looking pretty nice so far the quantities there these size is there there's still some problem here because I want to make sure that the quality and size are aligned properly right but we have our two buttons we have a close button and the Add to Cart button great so let's do this alignment here to do this let's go back to our code before we actually go to the CSS I'm gonna maybe enter another break here and test it out save it let's refresh bring up our modal alright great so good we have a break between the kuan-yin size and all I have to do just use some CSS to bring the quantity and the field to the left okay so it's aligned properly with this column right close this go to our code let's go to our main CSS and specify certain selector here for example quantity and give it a left margin margin left and maybe negative what's it 25 or 20 pixels let's do 20 first let me do 25 on the C and then for my next selector which is the quantity that's label I'm gonna give this a left margin and of course this margin left and about the same 2525 great let's save this let's go to a browser reload click on details for a libras product kind of seems like the quantity is the size seems to be aligned but the quantity is not let's fix this back let's change this to let's say 20 and the label to 20 pixels as well go back refresh can you do back and forth right so this time it's a line right but it's still a little bit off right I don't see it fully aligned and let's see why let's go back to our code all right so let's use this a little bit more so let's change it to let's say minus 1818 save it refresh and this time it's a little bit off and you can play with it okay we can always refer back to the details column and see the exact width but if you quickly go and change it to let's say 16 for quantity and 16 for they label it should pretty much so I'll our thing okay so yes perfect so looking good so we have our modal created for our Levi's product details price a couple of buttons the Add to Cart and then the clothes and of course our drop-down for our various sizes and users can add or enter the value of the quantity all right so once we have our modal pop-up created we have to repeat the same code for the rest of the products okay let me close this so for instance for the football watch shirts shoes and so on we need to repeat the cord so let's go back to our code and expand this so in this entire code that we created smaller just simply copy it and then go to your other product for example football and paste it okay the only thing you need to do obviously is make minor changes to this code for example our details ID will be changed from 1 to 2 or whichever ID we used for the football within our index dot PHP so if I go to index dot PHP here are our IDs for instance for our products that we created earlier so for headband it's details - 8 for my football you scroll up and find my football product here it is so the details is details - - okay so make sure we specify details - - for my football so this is going to be changed from one to two and of course all of these are going to be changed and this is also gonna be change to two so likewise you can follow the same process for the rest of the product so just change the IDs and of course you must change the text also the image also okay and as a practice you can do this for yourself so just change the title and so on so you get the idea so just follow the first Levi's jeans code that I created and simply change the code for all of these products and you'll notice once you're done when you go back to your site and click on details for each of the products you'll get a list so I hope this helps practice and let's move to our next lesson and this lesson moving forward I'm gonna demonstrate how to create our database using PHP myadmin okay so before we use SQL what we have done so far is configured our site background images and if I scroll down we have our featured products and we also configured modal's right so for example if I click on the details for Levi's jeans I'll be able to see the details here let's close this similarly I click on a football here I'll be able to see D football what I do notice is the image for instance is smaller for this particular football whereas if I were to click on let's say the watch the image is larger so I want to make sure that all these images for my product stay the same because you may have hundreds of different products and it's very difficult to change each product by going to the respective PHP file it's going to take you a lot of time so we can use a certain class in CSS and create a class in CSS and that's going to take all these images within each of my modal's and then give them one size so let me check quickly others also the first yep the image is smaller same for my headband so each of them is different size so before I demonstrate the creation of a database let me quickly do a CSS class so that all these images are displayed correctly so let's go to our code let me go to my main dot CSS and let's go down here and create a class called image details and then use the curly braces open them specify a simple width here I'm gonna call it Otto and then get some margins right margins height and so on so the margin in this instance I want to leave it to maybe 10 or let's say 15 pixels and also have it Auto the margin okay and then give it a height for these images for the space for about 200 pixels great so this image got details class that I created in CSS obviously let me say this first and let's go to my code and if I navigate to any of these football dot PHP for instance and find my image source which is right here notice it says the class equals details and the image - responsive okay so I want to make sure that I bring the same in its source and refer this to my CSS and each for example headband the hoodie and other products they have the same line of code for my image source the only difference is obviously the image and then the old text but the class is the same so no matter which product it take a look at so therefore we created a simple and our main dot CSS image - details so I'm gonna save this and refresh our site this time for example when I click on the purse it's nicely centered and the size is correct similarly if I open up my watch perfect it's the same likewise my shirt it's the same so therefore now it doesn't really matter you just keep adding products they're gonna stick to the same size and shape so you have to worry about changing the actual image structure all right great next let me demonstrate how to create our database right so we have these products created on our e-commerce site next we want to be able to create a database so that we can link eventually all these products to our database so in order to access our database let's go to my PHP myadmin hit enter and this will take you to the TSP my admin area where you can create your own databases okay so on the left navigation all you have to do is just simply click on new and this brings up the create database field you can give it a name for example I'm gonna call it red stone shop because you can have multiple databases right you're gonna have database for serving a different purpose for example instance we're gonna call it Redstone shop and then the next option is the coalition this is where you can specify the UTF details for example the Unicode details for this particular database and all of this is really just the way it's sorts and filters the information and these are important especially if you have large number of products if you have thousands and thousands of products or if your database is huge when users go to your site and access information from this database the use of collation becomes important because that's how SQL searches and filters and displays the information so you can look this up on the net there's several of them but the most powerful one is the SQL one that it uses for example a utf-8 standards so right here see utf-8 and within this the CI is the case insensitive Unicode never gonna use okay there's the collation so that's all you have to do is just give it a name specify the collation and then click create and this will create the database called red stone shop so if I click on this database obviously there are no tables nothing yet so in this lesson I quickly wanted to demonstrate first how to make sure that our sizes of our images within the modal's are the same and secondly how to create a database using PHP myadmin so practice and let's move to our next lesson in this lesson I'm gonna demonstrate how to create tables for our products using PHP myadmin database so SQL is a powerful tool which we can use to store data ok and since we want our e-commerce site to function where there has to be a database on the backend so we don't have to worry about the code anymore all we do is we simply open up our database and insert products and these products should show up directly onto our site ok so this is the idea so let's go ahead let's go to our PHP myadmin and in the previous lesson we created a database called redstone shop ok so right now obviously nothing exists in this database so let's go ahead and create tables within this database okay so the first table alright so basically in order to create a table first we specify the name of the table and this instance I'm gonna set products table or just products and again you can use any naming convention as you like there are instances where you can use something like TBL underscore products okay and so on so if you're multiple databases or various tables they need to create and this is a good way to create these naming conventions okay but for our simple purpose I'm gonna use just the name called products and then specify the columns in our instance we have about seven or eight products so we need about eight or nine columns and again we can always go back and delete the empty columns as well so right now I'm just gonna say nine columns and create or click go and this will create the table for us now once the table is created we need to specify what goes within the products table so for example the first field is going to be our ID field and the type is going to be an integer field the length values if I need to write something I can specify the default it's gonna be none the collation of course I can choose here as well attributes and then the index and of course since it's my ID column I'm gonna use the primary key and the reason why I use the primary key is because each product must be unique right so we're not duplicating things again the basic database concepts right but it's justwell or access or whatever so we need to specify the primary key isn't integer key and I can specify the size if any click go and we'll create the primary key as the ID field being the primary key so let's scroll to the right here for the rest of the options and make sure I check this box I can add some of the show information such as comments but to ality mind type and so on so let's go back next field is our title this is going to be a character field I can either choose text or varchar' which is a variable length so I'm going to use this particular option specify the length to be 255 characters and rest leave the same the next field is our price field and prices are obviously in decimal format so let's see here's decimal the length of value I can specify something like 10 maybe comma 2 so it goes to two decimal places my default value is none and everything else stays the same and then of course my list price is the same I'm gonna pick decimal and choose the same value for this the next field is my brand and this is again new character type is larser and then 255 for the length the next is the image and for my image I'm going to use the bar chart and by the way for the brand it's going to be an integer that's what I'm gonna use get her this perfect for my image it's going to be 255 and next a description and this obviously is just simple text with 255 characters alright great so once within my products table I've created all these fields specify the properties and make sure you don't forget the primary key right this is important when you're creating a tables so once you're done scroll down you can either preview the SQL or click Save I'm gonna click on preview so you can also see the SQL so if you don't want to create a table this way we can use the SQL commands such as create table and then specify the name of the database products and then the fields ok so you can create the SQL statement directly and it will create the table for you ok so for example if I copy this code close and go to my SQL of course I need to save this first one it cancel and demonstrate this little later but let's save our products table ok so within our Redstone shop our products table is now created if I need to use SQL for instance I can always click on SQL and this is where I can write my SQL code so if I pay a phase and I execute by clicking on go for instance it's going to create the same table again and call it products and whatever values I've specified so whether you use SQL within your PHP myadmin or you can use the fields to insert or create these columns and then fields so both ways are correct so let's go back to our products table that we just created I wanna see the structure of the table it's nothing that's cool alright great so we created the ID which is a primary key the titled price list price brand image and description obviously at this point there's no information in the product right there's no data in the product and we'll be inputting data for each of these products that we created so in this lesson I wanted to demonstrate how to create a table using my PHP admin and I demonstrate also both ways so if you're comfortable with the SQL code you can use SQL to create the table or you can simply navigate directly into PHP myadmin and create these fields so practice creating your database and let's move to our next lesson but this isn't moving forward I'm gonna demonstrate how to in fact link our products without database okay now so far all they've done is created these featured products manually using code okay and CSS as well as SQL and of course the within the bootstrap functionality and a framework and of course within the bootstrap framework next when we work with our database all products and these categories which we linked earlier are now gonna be dynamically display so everything here that you see will disappear and we will configure it directly from a database okay let's get started let's go to our database here my PHP admin on the Left I have my products table categories and brands so within my brands let's configure and create and insert some additional columns so the first one is going to be Levi's right that's our first category that we created manually way earlier on in this course this time we are going to create this using a database okay so here's our Levi's and then click go which is a first brand so again within my brands table I have my Levi's brand here so what's the plan is added I'm gonna go to my products table and I'm gonna create a couple more columns within this table it's gonna be structured here and at the end I'm gonna add two columns and let's see away at the end maybe let's go to me after the description and click go and the first name in this field it's good to be featured and I'm gonna use it in there or I can use small ant or less use tiny ant and as defined and my parent category which is 0 the next is these sizes and there's some we leave it as text and once I'm done simply click Save and this will add to the products table next I'm gonna insert a product ok so just click on products click on insert and here the description is going to be Levi's jeans here's the apostrophe and then give it a price which is let's say $29.99 and then my list price yes $39.99 for example and then my brand for instance is one well this is a text field so we need a number here okay so let's do this let's go back to our brands table and click OK you want to leave this page yes so we'll come back to this so quickly go back to brand click on edit here and then use all right so this brand is varchar' so it can take the integer let's go to our products here for example and let's see well then our products let me edit deep brand here we're gonna change and instead of text we need to use the integer right here perfect okay and let's click Save so now we're in good shape let's go back to our brand and let's click on edit to edit Divi vice brand all right so it's not here let's go to products go to our structure for example and then we added the brand and a couple of things we need to insert here ok and that's insert Levi's jeans finally we figure this out and then the price will be $29.99 and this price would be $39.99 and this time notice brand is now an integer right so it's not text anymore so I'm going to link it to category 1 or given an ID is 1 and then for my image I need to specify the path which is my tutorial images and make sure I have the correct path I'm the name of the file which is Levi's dot jpg ok and if not sure and always go back to your code bring up your images folder and take a look at the correct extension so here's my Levi's dot jpg that's what I'm looking for ok so you want to make sure this is correct so let's go back to our database and it's Levi's dot jpg next just provided a sample description these Levi's jeans are great buy them now ok let's go down we don't give an ID of 1 as a featured and then I can specify various sizes for my Levi's jeans so such as the waist for example we and stock 32 I have five in stock and then maybe 36 only one in stock all right so I have all of these maybe I'll go to the spaces and simply click go and this will insert one roll put in this table I also can see the SQL kreyòl so okay so the SQL is insert into the products table and then here are my fields that I'd like to insert and of course my image is also part of the SQL so it depends on whether I wish to use the SQL or in my opinion to be admin alright next let's click on products here go to our structure and take a look at whether everything is populated or not seems good let's next go to our Levi's jeans that we just added so here it is and then I'm gonna edit this and assign a category as six scroll down and click go okay so we need this category as six with this brand associated to it now once we have this set up in our database let's not get to our code go to our index dot PHP and here we're gonna remove all these static products that we entered earlier on in this course so I'm gonna scroll down and here are my products so starting from the featured product so we can leave the featured products at this point because we want the heading as Levi's jeans so this is we're gonna leave this product but the rest of the products we're gonna get rid of okay so we gonna highlight all of these products including hoodie here's our last and herb and there's a last product and simply get rid of them okay so the only product now we have here is within our main content or featured products is just need Levi's jeans alright great so let's go to these spaces perfect let's go up above our main contact future products so now since we have our database live and connected all we need is to execute the SQL or specify the SQL statement alright to do this let's go up here to our initialization file for a PHP and anywhere within this PHP let's do the SQL so I'm going to string SQL equals and migrate select everything from products and of course we're featured equals one and then and get our variable in here featured equal tbh get my database in query and then string SQL so once I've added this scroll down to our product Levi's jeans here ok so right after the feature product I want to scrap PHP and here I'm gonna do the a while loop so while product equals my SQL hi fetch and then of course the featured ok so here's my first SQL fetch that I'm basically telling this code that go to my database and bring the featured products next of course my image also needs to be changed and before the image I need to have my heading 4 so instead of these Levi's jeans I need a PHP here rather instead of a pH we simply do and call the product title for the product and close it off with a semicolon okay so all we did here was instead of static name whatever title is in within the title column in the table it's going to be displayed here same thing I'm going to configure the image source as well so the image source is not static anymore it's not coming from the folders that I have on my drive it's good actually coming from the database ok so image source is going to equal and same thing equals products and then my image alright right after the events I need my brackets here of course Andy son I call of course close my tag and then change our alternate text and specify the repeat the same code equals product so essentially you see the concept that we're doing right so we're simply adding dynamic elements to our code so it's not static anymore everything isn't coming from the database now so my alt text is also going to be the same it's gonna come from the title okay so semicolon and close this tag as well alright next let's take a look at a price so configure the price the same way so this insert of the price which is static at this point I can get her this in fact and just copy the same code here and paste it and instead of the title I'm gonna give it the list price which is the name underscore price and then close this tag okay perfect same thing I'm gonna do for the 1999 price copy it and remove the 1999 and paste this code and this is also gonna come from just the price it's not list so this is just coming from Ally price field now let's see what else we need the list price Tex danger list price s give me a string here and then we need another string right after price or after our price right here all right great so we're have configured our Levi's product Levi's jeans dynamically for the price the heading the title the product itself and the image coming from directly from our database so far and of course we need to end the PHP with the end while so right after the div I'm gonna do PHP and just say and well and of course close my div tag great so now it closes the div tags for my product let's save this test it out see what happens let's go to our Explorer to our shop refresh and great so we have our menus which we configure the last lesson perfect and our product is also now connected to the database okay awesome so this way we can in fact now add items to our database directly and then have them displayed here so there's no need to write any additional code for instance so let's say you add a product to your shop or your business and gonna sell that I'm gonna place the product online you don't have to create manual code configure the CSS or do the styling you can simply directly go your database enter a new product and it will be displayed here so with this notice a product stay within the same framework okay the people settings are the same the bootstrap columns are the same we did not change those at all all we did was simply connect you database to our products so hope this helps and as a practice continue on repeating same steps and you'll add additional products directly from your database you know this let's move to our next lesson so we're at the course conclusion of creating an e-commerce site from scratch using PHP and bootstrap framework this crash course demonstrated creating an e-commerce site using bootstrap framework including creating the backend databases we also created different products and configured the entire site functionality for a fully functional ecommerce site we created tables within our database we inserted categories we did some branding we did the CSS and so on so what I recover and what have we learned in this course we began with downloading these central software's that are required for this course which is the exam server which is your personal web server and then the atom editor for the code next we began to create the e-commerce site from scratch using PHP and I demonstrated how to create effective style using their cascading style sheets how to integrate HTML and then finally for our database how to use the SQL and integrate SQL within our code using phpMyAdmin we configured various databases we created tables multiple tables added some categories brands for our products and then connected the database with our site so that products could be directly linked to our site instead of manually entering these products and that we covered in the linking products with databases and I demonstrate this and I demonstrated this in two parts so the whole objective for this course was to give you a rundown from start to finish using code how to establish a functional ecommerce site the hands-on tutorials wouldn't this course are helpful you can always reflect back to any one of the lessons and take a look at how things were done and twelve my students I always keep telling them that practice practice and practice the more you do it the easier it'll become for you so what this I'd like to thank you for taking this course and I look forward to seeing you in my next course you

Channel: Rahul Balsaraf

Views: 347,147

Keywords: ecommerce website, online store, how to, make website, create website, online shopping, website, build, wordpress, wordpress website, how to create an ecommerce website using wordpress, wordpress ecommerce website tutorial, how to make an ecommerce website using wordpress, how to create an ecommerce website, how to create a website like amazon, how to create a website like flipkart, create an online store, make an online store, woocommerce

Id: C1phgYAzIfg

Length: 117min 8sec (7028 seconds)

Published: Sat Sep 16 2017