Advanced Shopping Cart Tutorial With Php and MySqli Database

hey everyone welcome back to daily tuition in this tutorial we are going to create this advanced shopping cart will create this shopping cart using PHP and MySQL database I will first design the shopping cart and then add add to car functionality but before we get started make sure you have a basic understanding of PHP and MySQL database along with that you should have a knowledge about HTML and CSS so you can easily understand everything now let me first explain what we are going to create in this tutorial so in this shopping cart tutorial we cannot create for shopping cart item in these items I have a laptop headphones tablet and mobile and using bootstrap car we're going to display this product information in the shopping cart on the top I have a header and on the right side of the screen I have this car and here I'm going to display how many cars item are there in the car so at this time I have 0 items in the car now I want to add this Xperia Tablet in this car so I will just click on this Add to Cart button and as you can see this product added in the car so on the top right corner I have one car item just out of that I want to add this Apple MacBook Pro and the Sony e7 headphones in the shopping cart so just click on this Add to Cart button and add these products in the shopping bucket now to see the shopping bucket list just click on these car so as you can see here I have 3 products in this car I have my shopping cart items with their price and the total now in my cart section you can see your shopping cart list and on the right side you have the number of products and its total payable amount now let's say I'm going to remove this product from the shopping cart list then I am going to just click on these remove button so when we click on this remove return we are going to see a message product has been removed and as you can see this product has been removed from the shopping cart list and then I am going to remove this MacBook Pro so I can do that as well so I'll just click on this remove button and say ok to this message so as you can see I have only one product in the car both product have been removed from the car if you want you can add them whenever you want now let's say I want to add this product in the car and then I try to add this product in the car again when I do that I'm going to get this message product is already added in the car so we cannot add the same product more than one so this is what we are going to create in this tutorial follow me from the beginning if you are a beginner so before beginning late let's get started now first if you wanted to work with PHP you need a web server so I'm going to use here example web server to insuk Ute my PHP file and will fit my SQL database so as you can see here I have exam control panel and I'm going to start the Apache server so I'm going to click on this start button and I also wanted to start the virus code server so I'm going to just click on these start MySQL server right so once you start the web server I can execute my PHP files in the browser now here as you can see I have this bit pissed home IDE open if you want you can use a Dom sublime text or Visual Studio code whatever you like you need to create your paging file in these exam HT doc folder so in this exam is T doc folder I have this tutorial folder in this folder I'm going to create a new project so I'm going to right click here and just say new directory and create a new directory shopping I already have this folder here so I'm not going to create a new folder so in this directory I'm going to create a new folder so I'm going to right click here and say new directory and name this folder upload in this folder I have four images which we're going to use in this tutorial so as you can see in this file I have four images which we are going to use in this tutorial so I'm going to just minimize this upload folder select this shopping folder right click here and say new PHP file and name this file index dot PHP right so I'm going to just say here index and press ENTER so this gonna create a new file index dot PHP so we're going to use this index dot PHP file as a template so we're going to design the shopping cart tutorial in this file so I'm going to get rid of this PHP script and just add exclamation mark here and press tab so this one and here a simple html5 snippet with meta tag and the body of the HTML document I'm gonna change the title so I'm going to change this title to a shopping cart now in this title I'm going to add few libraries to glorify this template so I'm going to use bootstrap to glorify this template I also wanted to include icons in this project so I'm going to use font or some website so to use predefined CSS style I'm going to use bootstrap website so I'm going to just open the bootstrap website so in the your religious type get bootstrap calm and just open these bootstrap website just click on this get started and just copy these CDN and paste it in the head right here just after that I'm going to just copy these J's files and paste it in the body before the closing body section now just after that I want to use icons in my project so I'm going to just open the font or some website so just type font awesome calm and from this website just click on the start so here you just need to specify your email address and click on these create and use this kit so once you've done that the font or some website will send the point of some kid to your email address instead of doing this instead of doing this I'm going to just open this new tab and say here font awesome CDN and using this CDN I'm going to use font of some icon so from this bootstrap CDN website I'm going to just click on this drop-down and copy this HTML right and just built this HTML in this header right here just create a command and name this command font awesome right I'm going to name this link as well and name is link bootstrap CDN now once you've done that just open this file in the browser to open this file in the browser just open the browser close your tabs and just type here a servant name so I'm gonna say here localhost forward slash name of your folder so as you can see I have here a tutorial folder I have this project in this tutorial folder so I'm going to specify here tutorial then specify the project name I'm going to specify the shopping here so I'm gonna just say here shopping and specify the file name I'm going to specify index dot PHP and press Enter so as you can see I have this shopping cart file open in the browser right so if I just specify here h1 heading tag and say welcome shopping cart then as you can see when I reload this page you can see these welcome shopping card text here in this file I'm going to create a simple shopping card template so I'm going to get rid of this h1 heading tag and right here I'm gonna create a container so I'm going to create here a division tag and create a class and specify here container so instead of doing this I'm going to just specify dot here specify the class named container and press tab so this will create a division tag with the class container now in this division tag I'm going to create a row so I'm going to just say here grow and to this row I want all the text to the center of this division time so I'm going to just say here text Center bootstrap class and also I want padding Y so this will specify top and bottom padding to this division time so I'm going to say a padding Y 5 so this is a bootstrap class right so in this division tag I want to create for shopping card items so in this role I'm going to add bootstrap grid system so as you know bootstrap has 12 column grid system so I'm going to use this bootstrap grid system to create four equal columns so here I'm going to just create a new class call md3 so this class will specify three column space to this division tag 4 million sites all devices now just out of that I'm going to specify here another class which is called sm6 so I want to specify six column space for this division tag for small size of devices and just after that I want to specify margin Y which will specify top and bottom padding to this division tag so I'm going to specify margin y3 here and I don't want to specify this margin by two million size of devices so I'm going to say margin why md0 now so as you can see this division tank will take three column space from 12 column of bootstrap grid system so what I'm going to do is I'm going to just copy this division tag paste it here paste it here and paste it here so this will create four columns of equal width and in the first column right here I'm going to add a form tag and in the action attribute I'm gonna say index dot PHP file and just after that I'm gonna specify metal attribute to post this data so I'm gonna say post method here now in this form tag I'm gonna create a new division tag with the class card and shadow in this tail I'm gonna create a division tag and specify image tag inside of this tip and in the source attribute I want to specify a path of my image so we'll just say here dot forward slash specify my upload folder and then specify my product 1 dot PNG file here and in the alt attribute I'm gonna say image 1 and to this image I'm going to specify a class img' fluid and also I'm going to specify card imj top class to this image now just out of that just after this division time right here I'm going to create a new division tag with the class card body and in this day I will force create h5 heading time with the name of product and to this pitch file heading tag I'm going to specify a class card title and just be cheap on a name for my first product so I will just say here product one just after that I'm going to create here a six heading tag and in this h6 heading tag I'm going to add few font of some icons so I want to use here star icon so I'm going to just add here I tag and specify class to add icons so I'm going to say here fast if a star save the changes and when I execute this file you can see you have this car with this image name of your product and your icon but as you can see this icon is not loading to solve this problem we need to update the font or some Syrian for that I'm going to just open a new tab and just search your font or some CDN and from this website CDN jegs.com I'm going to just copy so I'm going to just copy this link tag and just paste it by replacing this link so I'm going to just get rid of this link and paste this link right here save the changes when I reload this application so as you can see you have this star icon here just talked to that I'm going to just add few more star here to specify rating of these products so I'm going to just copy this I tagged paste it here paste it here and paste it here and just talk that for the fit star I'm going to specify a class if a are FA star so this is going to specify an empty star here like this just after that you'll start with this h6 heading tag right here I'm gonna create a paragraph with the class card text and in this paragraph I want to add some demo text so I'm gonna say some quick example takes to build on the card on the card now just after that I'm going to add here H file bidding time and in this H 5 heading tag I'm going to add spawn tag with the class price and in this price tag I'm going to just add a price of this product so I'm going to just say here $5.99 save the changes reload the application you have your product name rating of your product description of your product and the price of your product so as you can see this is the discounted price of this product I want to display the actual price of this product as well so I'm going to just add here small and in this small tag I will add ISTA in this haystack I'm going to display the actual price of this product so I'm going to say five one nine see if the changes and when I reload this page you can see you have this actual price with the stroke to add this stroke don't forget to use these as tag now I want to change this color of this text so I'm going to just say here class text secondary so this is going to change this text color just out of that just off these h5 reading tag right here I'm going to add a button so I will just say here button space if I type submit' speech by name and I just pitch by text Add to Cart I also want to add icon with this text so I'm going to just add here I tagged with the class FASS if a shopping cart save the changes and when I reload this application you can see I have this Add to Cart button with this shopping cart icon now to change the style of this button I'm going to add class here and specify BT and BT and warning class or bootstrap and just after that I'm going to say marching Y so I'm gonna add top and bottom are chained to this button 3 when I reload this application you can see I have this Add to Cart button with with predefined style just after that what I want I want to specify some custom styling to this product so what I'm going to do is I'm going to just create here a new file so I'm going to right click here and say new style shirt and name the style sheet stipe I'm going to link the style to this index dot PHP file so right here I'm going to create here a link tag and in the href attribute I will specify style dot CSS file to link this to link the style dot CSS file to this index dot PHP file in standard CSS file I'm going to add fuel style to this card so I'm going to fold select image tag and specify max weight 100% then I will specify height:auto and background color is going to be light blue now just talk that I'm going to specify the background gradient color to this image so I will just say here background radial gradient and just base if I hear the first value white 30% and light blue 70% just talk to that I'm going to select this app a star and also select FP star hop and specify color yellow green and then I will say padding 3% and 0% and when you reload your application so as you can see you have this background gradient color with your product name rating of your product then you have this description the actual price and the discounted price and Add to Cart button now I want to add three more product in this template so I'm gonna just open the index dot PHP file I'm gonna just copy this form so I'm going to just copy this form tag and paste it here in the second column right here they load the page you can see you have your second product if I copy and paste that the third column you have your third product and if you copy and paste that in the fourth column you have your fourth product if I reload this page you can see you have your four product here now if your programmer that repeating yourself is not good for a healthy programmer to solve this problem I'm gonna get it off these form tags and just copy this form tag and just use this product code so I'm going to just fix pawn this form tag and just copy this code so I'm going to just minimize this column t3 class copy this code and put this code in the function so when I create a new I can use that function multiple times with the same code so what I'm going to do is I'm going to create here a new directory and ninjas directory PHP in this page B directory I'm gonna create a new file component in this component file I'm going to create a function component in this function in this function I'm going to create a variable element and to this variable in the double code I'm going to specify this code I'm going to just copy this column with three class division tag and paste that in this double quote right here and just stop that just say here equal element save the changes just include this file in index dot PHP file right here so I'm going to just add here a PHP script and just say here require once PHP component dot PHP and just call this function in this row right so I'm gonna get it off this statement so I'm going to get rid off all these columns and if I just call this component function here so if I just add here a PHP script and call the component function I have here this product right if I call this component function again again again and again I have four products here so it's very simple so as a healthy programmer you don't need to repeat yourself just in function you can repeat the same code multiple times now Korriban I want to change this image this product name and this price so to do that I'm going to just open the component dot PHP file and in this function I'm gonna pass few parameters so I'm going to just say here product name and specify this parameter instead of specifying this hard-coded value so I'm going to get rid of this product 1 and specify product name here just talk that speech over the second argument product price and instead of specifying the hard-coded value I'm going to just say here product price and just top that specify the third argument product image I'm just pleased for this argument instead of specifying this source attribute right here product imager and save the changes open index dot PHP file and here when call this function we need to pass these arguments right so I'm going to just pause this augment in this function so the first argument is product name so I'm gonna say here product one then I will specify the second argument product price so I'm going to just specify the price of this product so I will just say $5.99 just talk today I'm going to specify the product image so here I want to specify the path of my image so I was just here dot photon slash blowed product 1 dot PNG save the changes you can see you have your first product with these arguments now if I just copy this function paste it here and change this product 1 to corrupt to change this price 299 and change this image to product - and when I reload this page you can see you have your second product with product two different price and different image you can do the same thing by calling this function again by changing this product name then changing this price and the part of your image like this I can do the same for the fourth product as well so just see here product for $4.99 and product for dot PNG save the changes and if I reload the application you can see I have my four products here right now what I want I want to get this product name this image and this product price from the database so I don't need to put these values manually instead of doing days I'm going to get these values from the database and create these products now what I want I want to specify all these arguments from the database so I don't need to specify this argument values manually so instead of doing days I'm going to create a new database with a new table and insert these arguments in that database so in this tutorial I'm not going to use a user interface to create a new database and the table instead of doing days I'm going to create a new database and table using PHP script I want to show you how you can create yul database and table using PHP script and how you can use that model to your any application so if you are interested to know how you can create module in PHP then this is the best time to understand it so let's see how you can create a module in PHP and create MySQL database with table using PHP script I'm going to create here a new file in this PHP folder so I'm going to right click here and say a new PHP class so I'm going to create here new class and name this class create DB and press ok so this can create a new class create DB I'm going to use this class as a module so you can use this class of your any PHP application but let me first explain one we are going to create this class using this class we're gonna create a new database with new table and just after that we're gonna insert product information in that table instead of creating a new database using user interface of PHP my admin we're gonna use PHP script to create these database so we're gonna simply create a new PHP module to create this database and the table you can use this class to any PHP application to create your new database and the table let me show you how you can create a new database using a PHP script so in this class we're gonna force create few properties to this class so I'm going to first create a new property cell to specify a scope for this property so just stay here public and specify the name of my property so I'm going to say here server name then I will create my second property and specify scope public user name then I'm gonna say here public password then I will create a new property DB name let's create a new property table name and the last we're going to create a new property connection now just off of that here I'm going to create a class constructor so I'm gonna just stay here public function double underscore constructor in this constructor I'm going to pass parameter so the first parameter is DB name and I also need to specify the default value for this property so I'm going to pass the default value here and specify default database name new Libby then I'm gonna pass here table name is equal to product DB then I'm gonna say here server name is equal to localhost then I'm gonna call here user name root and password is going to be empty string just talk to that now in this constructor I'm gonna initialize this argument with these properties so what I'm going to do this I'm gonna call here this giver and it's call the properties so I'm gonna say here DB name is equal to DB nee then I will say this table name is equal to table name so one by one I'm gonna initialize all these arguments with these properties so right here just after this table name I'm gonna say this server name is equal to 70 then I will say this username is equal to user name and the last I'm gonna set this password is equal to password in this constructor right here I'm going to create a new connection so I'm going to create here a command and say create connection to create a new connection I'm going to just call this connection property right so I'm going to initialize this property right here so I'm just called this operator to call the connection property and I'm going to initialize this connection property with my skill Connect function so I'm going to just call here my sqli connect function so this function opens a new connection to the my skills our work so the first argument is the hostname so I will just specify the hostname here so I have my hostname localhost so I'm going to pass this parameter right here I'm gonna pass the username so I will just say here username I'm gonna pass the password so I'm going to pass password variable here and just close this segment when we have this connection I'm going to check that connection so we'll just say here check connection now if if we don't have valid connection so I'm going to call this connection then I want to die this application so I'm going to call die function with a message connection filled and along with that I'm going to concatenate an error message here so I'm going to say my is till I connect error now just off that right here I want to create a new database now just after that once we have the valid connection I'm going to create here a query the query used to create a new database so I'm going to just create here a scale variable and just specify in the double code create data waves they've not exist and specify the database name here so I'm going to pass here DB name variable so what you will is specify to this DB name variable this is gonna create this new database with that name now just offer that to execute this query I'm going to just create here a command and just say here execute query and to execute this query I'm going to say a my sqli query and then the post document is the connection property so I'm going to call this connection and then pass the SQL query so I'm going to call X create here so if you have the valid connection and valid statement this is going to execute this if block now in this if block right here once this database is created I'm going to select our database and specify to this connection property so to do that I'm going to just say here this connection property is equal to MySQL Connect and then specify the server name localhost username root then specify password and then specify the database name so we have this database so I'm going to pass this DB name right here so now in this connection property we have these database so now we can create a new table using this connection property so to create a new table I'm going to create here a command SQL to create new table to create the table I'm going to create to create a table I will just create here variable SQL initialize this variable with SQL command so I'm gonna say here create table if not exist and specify the table name so I have this table name variable so I'm going to pass that variable name right here and just talk to that I'm gonna create here table fields and to create a table I'm gonna put that in the parenthesis and just create a post field id integer element specify not no auto increment and specify primary key just talk to that I'm going to create this second field which is product name then specify the type where can 25 and specify not enough then create toll field for the price and specify type load and the last I'm going to create here product image to store image path and just specify here where car 100 and just close this statement just talk that to execute this statement I'm gonna just stay here if and in the if statement I'm gonna call my SQL query and just specify the connection property post so I'm going to call here this connection and then call the scream quit here right now if this query is not successful then I'm gonna execute this if block so I'm gonna pass here exclamation mark if the statement filter is guilt disk ready I'm gonna send an error message so I'm going to say here echo error creating table and then concatenate an error message with this dot so I'm going to say here my SQL error and then pass here connection property so I'm going to call this connection and now if anything goes wrong and if this if condition is not executed then I'm gonna execute this else condition here so I'm going to say here else and you say here return false save the changes and now if you call this file in index dot PHP file right here on the top and if I just say here require once PHP create DB dot PHP and if you create an instance of these create DB class like this and if I just create here in instance on this class so I'm going to just create here a command and say create instance of create DB class so I'm gonna create here new instance I will just see your database is the name of this instance and to create an instance of this class I'm going to say new keyword and then call create DB class here so if you leave this parameter as it is then this gonna create this database name new DB but I don't want to switch by this name to this database instead of specifying default name I'm gonna pass here a new name to this database so I'm going to pass here product DB so this is the name of my database and I want to pass table name to this database so I'm going to pass here product DB right so the name of my database is product DB and the name of my table is product T B now save the changes and just open the exam server for and just click on this add me to open this wine skill database and now here you can see I have PHP my admin open now I have few database here and now I want to create a new database with the name product DB so instead of creating a new database right from here I'm gonna execute this file again so we'll just reload this application and when I reload it I'm gonna have here creating error message so this is that I have an error in SQL syntax so I would open this up open the create DB dot PHP file oops I need to spit spot here comma like this save the changes I'm gonna execute this application again you can see I have this database in PHP my admin when I replace the database you can see I have this product DB database and in that database I have this product TV table so using PHP script we had created this database and a table now we know that how to create a PHP module to create a new database and the table so in this table I want to insert product information so we can display them in these cards instead of inserting this product one product - and all that information we gonna get the information from this database and display them right here so what we want to do is I'm going to insert product information in this table so I'm going to say here a command in the SQL statement so I'm going to just say here insert into and specify the table name so I'm gonna specify here product TV I want to insert rows in this table so I've gone to insert product name total price and product image and just talk to that I want to insert values so I'm gonna say here values and I want to insert post value so I'm gonna post specify here product name so I'm going to just say here Apple MacBook Pro so this is the name of my post product then i'm gonna specify the product right so I'm gonna say here one seven nine nine and then specify the image part the source of the so I'm going to just say here dot forward slash upload so this is the upload folder and then specify the name of my image so I'm gonna say here product 1 dot PNG so I'm gonna just specify the source part of that particular product image just talk to that I want to insert multiple values so I'm going to specify comma here and just copy the statement paste it here and just change these values so I'm gonna do that very quickly and insert these values in this table now I'm going to insert these values in this table so I'm going to just fix acute this command so I'm going to just click on this Go button when I click on this Go button just gonna insert these values in this table so when I open this table you can see I have 4 rows in this table and each row has its unique ID on ID 1 I have MacBook Pro on ID - I have Sony t7 headphones ID 3 I have a sony xperia and on ID 4 and have this Samsung Galaxy 815 mobile so using this ID I can identify each product so this ID is unique and important to get the information of that product so we're gonna use this ID to get the information of the particular product once we have this information I'm going to display all this information in this card to display this information I'm going to just back to my create TV dot PHP file and right here just after this constructor I'm gonna create here a method so I'm going to create here a command get product from the database so I'm going to specify the public scope and then specify function keyboard and just say here gate data so this is a method get a data and I want to get data from the database so I'm gonna post create here a scale query so I'm gonna say SQL select star from table name so I have here this table name so I'm gonna get all details from this table and I'm gonna give this result in the result variable so I'm going to Security's old and just execute this statement to execute the statement I'm gonna call here my sqli quit and the false argument is the connection string so I'm going to just call this connection and the second is the SQL query so in this video I have this information right the product information just after that II my sqli number of rows and then pass the result variable here is greater than 0 then I want to return this result right if I have more than 0 rows in this table I'm going to return this result variable today's method to stop that once we have this result variable I can get this result variable and display all the information in this card so this method return the result variable in this result variable I have this information right now what I'm going to do is I'm going to open indexed or page file and instead of calling this function multiple times I'm going to get rid of this function and this hard-coded values and in this PHP statement I will just say result is equal to call the database instance this one right here and just call the gate data meta right now you know that this method returns a result in this variable so I have this result in this variable so I can iterate that result and display all the information in this card so I'm going to just say here Y u Rho is equal to my SQL I fetch associative array and then specify here result variable so now I'm going to get all these rows one by one and just create a new card here so I'm going to call here component function and in the post parameter I'm going to pass product name we'll just a hero and pass product name here so I'm gonna pass the value from the database now to stop that I'm gonna pass the signal man so I'm gonna pass here row product price and just start with that I'm gonna call row product image save the changes and when I execute this application you can see I have this different information filled automatically using this database value so what we had done here I had to get these values in this result variable and it created them one by one and using this component function I had to specify these values as an argument and display them in the card right here now let me first explain what we had done so far we just created index dot PHP file and just created four cups in this card we have product image title price and Add to Cart button we're gonna create this UI using component function we created this function in component or PHP file right here and we had called this function in index dot PHP file in the while loop to create a new database we use create DB module using this module we have created a new database with new table and we also have here a new method which we use to get the data of the particular table so to get the data of this table we use this gate data method now using this method we're going to return this result and get that result in the result variable right here now once we have this result I'm going to iterate that result and as you can see here we're going to get each row one by one and specify that values to the component function and create four cards in the UI now let's moon and add shopping cart functionality to this application when we click on this Add to Cart button I want to store this product information in the session variable so we're going to create a simple station variable and store the ID of this product instead of storing this product name product price and the product image we're gonna just store the I D in that session variable so we can access this ID and get the information from the database let me show you how we can do that to create a session variable you need to first start this session so to start decision I'm gonna say here a command start session to create modify and delete session variable you need to start the session variable you need to start the session so I'm going to say here session start just after that right here if we click on this Add to Cart button I want to execute this if block so I'm going to just say here if is said post I just call add button here so as you can see if you open this component function you can see we just specified this add name to this button now what I'm going to do is when I click on this Add to Cart button I want to post the ID of this product now when I click on this Add to Cart button I want to return the product ID to do that I'm going to just open the component dot PHP file and in this file I'm going to just create here input hit enter so I'm going to say input type hidden' specify name product ID and I want to pass here a variable so I'm gonna just pass here a parameter product ID and I'm going to pass that variable right here in this value so I'm going to just say here product ID right and when I call this function in index dot PHP file right here I want to pass this fourth argument so I'm going to pass here row ID so in this input tag value I have product ID so to get this value I'm going to just open the index dot PHP file and when I click on this Add button I'm going to say print our using the post method I can get the post value to get this value I'm going to just call the name of these input tags I'm going to say product ID save the changes so if I just click on the store product right here I can get the idea of this product so if I just click on this Add to Cart button I can get three here and if I just click on this first product I'm gonna get one here right so you know that how you can get the ID of the product now what i want i want to create session variable and store this ID in that variable some could just comment here to the statement and here i'm gonna check if is that session variable card now if this variable is already being said i'm going to execute this if block or execute this else block so if decision variable is set I'm gonna execute this if block or execute this else block now if the station variable is not being said I'm going to create an array and specify name item array and just to here array and in this array I'm gonna pass key product ID and in the value I'm gonna pass this ID right so I'm going to just say here post product ID and just after that I'm going to create here a station variable so I'm going to just say here create new station variable and say here station name decision variable card and on the zero index of this decision variable I'm going to store this array so I will just say here item add it just stop that I want to print this area on the document so you can understand what we are going to store in this area so I'm going to just say here a station card alright if we already have this station variable I'm going to print that in the if block right save the changes reload the application so as you can see I have the second product in my card so you can see here on zero index I have this product ID two now as you can see you have this Product ID - in this variable now if you want to add this third product and if you click on this Add to Cart button you're not going to get this third ID it is valid because as you can see here if the station variable is said I'm going to execute this if block or execute this else block so this application is not going to execute this else block because the session variable is already being set so this application is going to execute this if block because the session variable is set if the session variable is said what I want I want to check if this product is already being in the session variable or not if the product is in the session variable I want to print a message product is already added in the car right I'm going to just call a function add a column and just say here session card and in the second argument I'm gonna pass product ID so this function is going to return an array of product ID let me show you if I just stored this array in a variable so if I just say here item add a D and if I just say here print our item array ID I'm gonna get rid of the statement so as you can see you have this ID - in this salad now we know that you have the second product in your session variable now if I just say here if in array post product ID and if I just say here item array ID if this product ID is in this array I'm going to exclude this if plot or execute these cells plop now let's say if I have this Product ID in this array I'm going to just print here eco statement and in the double code I'm going to call a script tag and just say a lot product is already added in the cop right and just after that I'm going to redirect this page so I'm going to just say double code call this skip tag and just say window dot location is equal to index dot PHP now you know that I have this second product in this array if I click on the second product again you're going to get this message product is already added in the car now just after that if I don't have this product in the array I want to add this product in that session variable right to do that I'm going to just get rid of the statement and just here in this el statement right here now if the product is intercession variable I'm going to print this message product is already added inter card or if the product is not intersection variable I'm going to add that product intercession variable to do that what I'm going to do is I'm going to just call here count function so I'm going to see here count and just say session here I just call here session variable card now this count function returns how many items are there in this session variable this count function is going to return a number of elements in the array so this function is going to return number of elements in the array and I'm going to store that element in the count variable so just after that what I'm going to do is I'm going to call this array right here and just start to that I'm going to call this session variable card and on the count index I'm going to store this item array just after that I'm going to sprint this station variable on the document we load the application and when I click on this Add to Cart button you are going to get a message product is already added in the cart and if you click on these third items you're going to see you have on the zero index you have this Product ID - and on the force index you have these product ID three right so in the station variable you have the second and this third product now if you try to insert this product again you're going to get these message product is already added in the card right as simple as that now once you have this product in the stage and variable you can get the product information from the database and print that in the shopping cart list let me show you how but before we do that I'm going to get rid of the statement and I want to add here a header to display how many items are there in the car so I'm going to create header so I'm going to just create a new file in this PHP folder so I'm going to right click here and say new PHP file and name this file header now what I want I want to use this header more than once so in this file I'm going to create a header so I'm going to say here header and specify ID header right in this header what I want I want to create a navigation menu so I'm going to get a bootstrap now so I'm going to call the now class and specify a class now bar now bar expand mg then I'm going to call now gourd art class and call PG tar class just start with that in this navigation menu I'm gonna call anchor tag with nav bar brand class and in the HEA Pat reboot I want to specify the index dot PHP file so I'm going to say index dot PHP just stop at that in this anchor tag I'm going to call h3 heading tag with the class padding x5 and in this h3 heading tag I'm going to just add an icon and the text so I'm going to call here I tagged with the class France hit a shopping basket just talked to that I'm going to specify text here shopping cart and just out of that I'm gonna call this file in index dot PHP just before this container right here so I'm gonna just add here PHP script and just say it acquired ones and just call PHP header dot PHP save the changes and when I reload this application you can see you have this shopping card header here now just after that in the header dot PHP file what I want just after this anchor tag I'm going to create here a button in this button I'm going to specify a clause now bar toggler now just talked to that right here I'm gonna call tie button then I'm going to call data toggle property collapse then I'm going to say data target property now gone now out markup and then I'm gonna say area control now bar now alt markup and area expanded false and the last booster property is area label toggle navigation now just after that in this button I'm going to call a spawn tag with the class now bar toggler icon now just after this button I'm going to create here a division tag with the class collapse along with that I want to add now bar collapse and I want to specify IDE now are now called markup now in this division time I'm going to create another div with the class margin-right:auto and to start that are going to create another tea with the class now bar now and now in this navigation menu I'm going to create an anchor tag with the class now item now item along the die I will just here active class and just after that in the HD of a tribute I'm going to just specify here god dot PHP file which we are going to create after a few minutes now in this anchor tag I'm going to just create h5 reading tag with the class padding X fine so this class is going to add top and bottom padding to these h5 heading tag and I'm going to just specify the custom CSS class cut I'm going to just add an icon of shopping cart so I'm going to just add a tag here and just specify class if they tense fast pay shopping come and pitch by text cut here save the changes reload the file now as you can see you have this card here to change the color and the border I'm going to just specify here to this anchor tag now link loss blue the page and as you can see you have this card with white color right I'm going to just add some space I just want to specify the items right here so I'm going to specify 0 here so right now I have 0 car titles in the shopping cart I'm going to just specify some styling to these 0 so what I'm going to do is I'm going to schedule of this 0 and call here a span tag and specify ID card count and here I want to specify 0 and just talked to that I'm going to just copy this card count and it the standard CSS file I want to just say card count and just place it by here text-align:center then I'm gonna say padding:0 for the top 0.9 REM for the left 0.1 gram for the bottom and 0.9 dream to the left side just stop that I'm going to specify border radius 3 then save the changes and when I reload the page I have this 0 here I want to specify some text color and the background color to this count variable now just out there to this card count ID I'm going to just specify class and just say text warning and PG light color save the changes when I reload this application you can see this type of result now what I want I want to display how many products are there in this card to do that I'm going to get rid off this spawn time instead of printing the hard coded value I'm going to just call here please script and in the script I'm going to say a insert session card then I'm going to call count function and in this count function I'm going to call the card variable and stow that count in the count variable like this and just talk to that I'm going to say echo in in the double code I will paste the span tag right here and instead of specifying this 0 here I'm going to just say count here right and just talk to that in the else statement if position variable is not being said I'm going to just copy this echo statement print it here and to specify 0 here right save the changes and when I reload this application you can see you have two products in the cart now what if I want to add one more product in the cart so if I just click on this post product I'm going to get 3 here because I have 3 product in my card now let me show you how to display this color item in the cart dot PHP file now total use to display this car items in car dot PHP file so we should have display these items down here in the table I am going to create a new file called or PHP and display all the cars product one by one and along the door I am going to display the total of the product now let me show you how we are going to do that so we are going to force create a new file so I'm going to right click on the shopping and just select PHP file and just say god dot PHP so I'm going to just say here card now in this file I'm gonna first add the HTML files neighbored and just change the title to card and just stop that in the head section I'm going to copy these header links and paste it in the car head and just copy these script tags and paste it in the car dot PHP file down here just after that what I want I want to specify the background color to the body so I'm going to specify here class and specify BG light color just after that I want to add this header to this car dot PHP file so I'm going to just say here I'm going to call the PHP script here and just say here require ones PHP header dot PHP right save the changes to load the application and Vinny and when you click on this card you are going to get this page on this page you can see you have this car dot PHP file now in this file you can say you don't have anything because you don't start at the station yet I want to display the car items one by one here and display the total on the right side so I'm going to create here in the body section oops in the body section right here I'm going to create a division tag with the class container fluid in this class I'm going to just create a row and specify padding X 5 so I'm going to specify this padding to the left and the right side just talk to that so I'm going to create here two columns so I'm going to just here call md7 so I'm going to speech by seven column space to this division time and then I'm going to create here Dave with comma md5 so I'm going to specify five column space to this division down in the first column I'm going to just create here a division tag with the class shopping cart and in this Dave I'm going to create h6 heading tag and specify my cart and just after that specify horizontal row here save the changes they load the application and you can see this type of result now just talk to this horizontal draw I'm going to create here a form tag and in the action attribute I'm going to just say here card dot PHP specify method get' and just paste by class card items in this form I'm going to create a division tag with the class border along with that I'm going to specify a rounded poster class now in this division tag I'm going to create here new row with row class and BG white class now in this row I'm going to create three columns so I'm going to first specify call empty three so I'm going to specify three column space to this division tag call md6 how do you specify six column space to this division tank and call md3 so i'm going to specify three column space to this division tab right I mean the post Dave I'm going to call image with the source attribute and in this source attribute I won't specify an image I'm going to just specify a path of an image so I'm going to just here upload product one and the alt attribute is going to be image one just out of that I am going to specify class img' fluid and then just after this division tag to this column d six right here I'm going to call it five heading tag with the class padding top two and specify text product one then I'm going to call small tag and then specify class text secondary and here I'm going to just specify a Siller and you specify the daily teacher name so I'm going to just say here daily tuition just after that I'm going to call H by reading tag with padding top two and specify the price of the product so I'm going to just say here $5.99 and the last I'm going to add here a button so I'm going to just here button type submit' then specify class BTN BTN falling and then specify text save for later and another button here with the type submit' specify class BTN meeting in danger and along with that I'm going to space by margin x2 and specify name remove and this top of that I'm going to space by text three more save the changes have been I reload this application you're going to see we have this car with product image product name say the name price the Save button and the remove button right now just on to that in the third column right here I want to create here a quantity section where the user can increase and decrease the quantity of the product so I'm going to just create here a division time create a button the type of the button is button then I'm going to specify the class BTN BG light then I'm going to specify border and just say down date circle to stop that I want to add here an icon I'm going to call I tagged here and specify class France if a - right you softer that copy the statement paste it here change this icon to plus and just after that between these two buttons I'm going to add input time input type text the value of this text is one specified class form control specify with 25% specify display:block property in line so I'm going to specify the booster class T in line and save the changes reload the application and you can see you have this product right here I want to Center this contry section so I'm going to just specify here to this third column padding Y file save the changes and when you reload this you can see you have this quantity section to the center now if you want you can add these plus and minus functionality as well using javascript I'm not going to do that because this is just a pure shopping cart tutorial so just out of that I'm going to just select this shopping cart class this one and just call this class installed our CSS file right here so I'm going to just say here shopping pound specify palying three percent and zero percent save the changes to load the application and as you can see I have this padding on the top here now just out of that open the car dot PHP file and right here now let me just remove this padding left from here so I'm going to just specify padding left 0 now what I want I want to display all the cars item here so what I'm going to do is I'm going to just cut this form cut this form right from here open the component dot PHP file and in this file I'm going to create a new function and name this function called element and in this function I'm going to paste this form so I'm going to create here a variable element and just store this form in this element like this alright and just say here Iko element to start that what I'm going to do is I'm going to pass here parameters so the first parameter is product image so I'm going to just hear IMG pause this IMG in the source attribute so I'm going to just say here and stop calling this double code I'm going to just say here put up IMG create a new parameter and name this parameter product name and specify this product name right here instead of specifying this product one I'm going to call product name here just after that create a new parameter product price and specify that right here product price save the changes so we can call this function we need to specify these parameters open the car dot PHP file now in this file I'm going to first call the ph2 script on the top right here and just after that I'm going to first start the session so I'm going to just say here session start and just after that what I want I'm going to just require a file so I'm going to just secure it if I once and just call PHP create DB dot PHP file along with that I'm going to just set it by ones PHP and just import component dot PHP file just onto that I'm going to create here a new instance DB and just create new creative instance and specify the first parameter which is the database name product DB and just specify the table name product DB so using this instance you can access the gate data method now right here just talk to this horizontal row I'm going to call a PHP script here now just out of that in this PHP script whatever I want to get the ID from the session variable to do that I'm going to create here a variable product ID and just call here a column function then specify this session variable here card and just talk to that specify the key so I'm going to just say here product ID so now we have this Product ID array in this variable now just out of that I'm gonna get the data from the database so to do that I'm going to create here a variable desert then call the histones DB and call the gate data meta so we have this result in this video I'm going to call while loop called it all and just call my SQL I fetch associative array and just call result here now in this while loop I'm going to check if the shopping cart item ID is equal to the row ID so let's say I want to display all the shopping cart ID product one by one right here so what I'm going to do is I'm going to scroll for each loop here and just say here product ID has ID all right and just say e row of ID is equal to ID oops I need to just specify here dollar sign like this then then I want to print the product information on the document so I'm going to call this function call element now right here so I'm going to just here car element specifies it all the post argument is the product image so I'm going to just call here product image the second argument is product name and the third argument is product price say you two changes I'm going to load this application I can see I have three products here now just top of that I want to space for some padding to this car items so I'm going to just open the standard CSS file and just call Karl items and to select the second car I'm going to specify this plus sign then call the car items and then call the padding 2% and 0% all right now now what if I don't have anything in the car section in that case I need to switch for message here so what I'm gonna do is I'm gonna just get rid of this PHP script and just to hear if is sad call decision variable god if we have decision variable set I'm going to call these statements else I'm going to just here eco and in the double code I'm going to call h5 waiting tank and just say here god is empty save the changes now just offer that I want to display how many products are there in the cart and display the total price of the product so I'm going to display that on the right side of the scale right here so I'm going to open the card or PHP file and in the second column right here in the column d5 I'm going to call a div with the padding top four and in this Dale I'm going to call it six heading tag with the text price details now I'm going to post an horizontal row then I will create a division tag with the row class along with that I'm going to call price details class and in this Dave I'm going to create here two columns or column d6 so I'm going to just say here call em d6 and do the same here with call em d6 alright in the first column I'm going to just call a PHP script and in this craft right here I'm going to say a each set session card then I want to just print how many cars item in the session variable so I'm going to call here count variable call this session variable right here and just do that count in the count variable and just say here echo and in the double code I'm going to call h6 heading time and in the h6 heading type I will say price count items and just close the statement and in the L statement right here I'm going to bring this echo statement again and just get rid of this count and specify zero we load the application you can see I have this type of result but now what I'm going to do is I'm going to the space bar here column D for specify the offset so I'm going to just secure offset MD one specify a border round it specify marching top 5 + BG white color along with that I'm going to specify height 25% save the changes when I wrote the application you can see this type of result just talked to that just after the script I'm going to just call here h6 heading tank and specify delivery charges text and then specify horizontal row and the h6 heading tank and just say amount payable and in the second column right here I'm going to add h6 heading tag call the PHP script and in this scrape I'm going to sitt Iko the total price of the product so I'm going to just create here a new variable right here dou tau is equal to 0 and then just call this variable right here so I'm going to just say here total is equal to total plus row or product price but right now this statement is going to return a string we need to convert this string into integer so I'm going to pass parentheses here and just call integer so we have the total price in this total variable so I'm going to pass this variable right here total save the changes reload the application and you can see the total price of this product don't forget to specify dollar sign here when you reload the application you are going to get this type of result now just talk that let's talk to these h6 heading time I'm going to call one low h6 any tag with the class text success specify text pre then add horizontal draw then add h6 heading tag again all the dollar sign call the PHP script here and in this PHP script just call eco total price now what I want I want to add some padding to these price details so I'm going to just open the style dot CSS file and I'm going to call this price detail class so I'm going to call this class install dot CSS file right here so I'm going to call here price detail select the h6 heading tag and say padding three percent and 2 percent save the changes and when I reload this application you're going to get this type of result now the last thing we want to do is when we click on this remove water I want to remove this particular card I'm going to just open the component HP file and right here in this action attribute I'm going to just paste over here action so I'm going to just call here question mark action is equal to when I click on the Remove button I want to pass a variable so I'm going to just add here and person here the variable ID and then specify the value now what I want I want to specify the ID when we click on deeds remover done so I'm going to pass here another parameter product ID and pass this product ID right here when we call this function we need to pass this product ID so save the changes and open the car door PHP file when we call this function right here going to pass this product ID specify comma here called it oh and pass ID here save the changes and now when we click on this remove button I want to return this particular ID of the product to do that I'm going to create here if talk pay is say post and I'm going to say here remove when I click on this remove button I want to print the product ID so I'm going to just say here print R and just get ID save the changes they load the application when I click on this remover turn oops I need to just specify here post here method post and when I click on this button I want to find the particular ID so when I reload the application and when I click on this product I'm going to get this ID right here alright and I click on the second product I'm going to get this ID on the top what I want I want to get this ID and remove this particular product so I'm going to get trade off this print R and just here a get a get action is equal to limo and then call the for each loop and in the forest loop I'm going to call this session variable car and then I will just say as key and value just off of that I will just say here here value of product ID is equal to get ID then now what we are going to do is I'm going to check if the product ID is in the card I'm going to remove that particular product ID so I'm go to just unset that product ID I'm going to just call unser session card and just specify here keep high just after that all the eco statement and the double code call the script I just closed it and just say here a lot and just call product has been removed right then just page by echo statement and just in the split time reading this page so I'm going to just say here window dot location is equal to God dot PHP save the changes now if I want to remove this particular card then I can click on this remove button so when I click on this remover tun this card is removed from the list so you can see the message product has been removed when I click on this okay button we are going to see we don't have this card in the card list right and you have two cards in your pocket now let's say I want to remove this first cup when I click on the same overton you can see the message product has been removed when you click on this ok pattern you have only one card in the bucket as simple as that now that's it if you have any question you can ask me anytime don't forget to like this video if you find anything useful don't forget to comment and I will see you in the next tutorial [Music]

Channel: Daily Tuition

Views: 265,497

Keywords: Advanced Shopping Cart Tutorial With Php and MySqli Database, php shopping cart tutorial, shopping cart php, how to create php shopping cart, make php shopping cart, php advance shopping cart, advance shopping cart, shopping, cart, mysqli, php mysqli database, php tutorial, how to create, shopping cart, php, tutorial

Id: eAK8uYtNTy4

Length: 82min 54sec (4974 seconds)

Published: Fri Jun 14 2019