1. Food Order Website with PHP and MySQL (Start Project and Create Database)

hello everyone i am busy tapa and welcome to my channel today i'm back with a new course where you will learn to create a complete food ordering website using php program language and mysql database using this website visitors will be able to browse through all the categories and food items in this website and they can easily order the food from this website as well whereas the admin will be able to manage all the categories and foods like they can add update and delete categories and foods similarly they will also be able to manage and track food order as well as delivery and to create the system will be using core or procedural psp so the course may be a little bit longer but you will be learning phd programming language in depth so without further ado let's start our [Music] course so first thing first let's open our xampp and start apache and mysql server so i have already started here you can see then let's go to our browser and let's check it so i'll go to my browser and here i'll just type localhost phpmy admin so ps my admin is the database section if you are learning php then you already know so here we will be creating a database so this verifies that we have successfully started our apache and mysql server now we can minimize it and the next thing we will do is uh we will download the template our website design that we will be working on which is food ordering website and the website and the template our website we have already designed on a previous course where we designed a website for our student so if you want to learn how to design a website using html and css then i'll put the link in the description if you don't want to learn designing part but want to learn php only then you can download this file of the project and we can move together and those we have already watched the course also please uh download this uh project because i have added multiple pages uh in that course in that web design course we designed home page only but later i added like a food page food service page category foods page categories page and order page so you will also need to download this file then we can work together so i'll add the link in the description so that you can download these files for free and continue uh learning php and make our website dynamic and fully functional so just go to the link and click in code and here you can download as zip zips or click on download as zip download zip and it will download zip and the file is not that big so it will download quickly so i'll open the folder so here is our folder so i will cut it ctrl n x and i'll put it in this desktop so that we can access it easily so ctrl and v so here it is now i will extract it right click and extract where it's extract here so let it go so here is our file so this was the design we created in previous web design course uh so i'll open the index.html file on page so this was our homepage design later i added like categories page when clicking category it will design it will display all the categories but for now this is static design we have not uh like retribe or we have not obtained these categories from database and food you can see all the foods and you can search the food but we have not added that functionality will be adding those all of those functionality on this course and if even if you click on order so this will be our order form and we will work on this so that's it now we need to add this project to our php project so let's create a php project so this downloaded file is in desktop now to create a pc php project we need to go to the location where our jump is installed uh in my case i have installed jam on local dixie so i'll go to my pc and go to local dixie and go to xampp and htdocs where is htdocs so htdocs and here we need to create a project so i will click right click and create a new folder so our project name will be food dash order so you can rename the folder as this but do not add any blank space between food and order you can use either minus iphone minus or hyphen sign or underscore or you can make it a single word as well but i prefer this way for dash order and inside this we will add all the content of our downloaded project so this is our food order project inside sd docs and we will put or we'll drag all the content from our downloaded file so this is our downloaded file and this is our actual project so i will copy all of this i will select all of these we don't need redmi dot md for now so css and all our css images and all of the pages so and i'll drag in our main folder okay so that's it access can record because folder files it is open in another program is it try again i will cancel where it is open is it open i don't think it's open but it assumes oh we have upon in our this so we need to close that window so i just closed it now i will move it now we can move it okay so that's it so it was our file was opened on browser so that's why it was not moving to our main folder so now we can delete this so i will delete this downloaded resources we do not have anything inside so i'll just delete this downloaded resources and this is our main project which is food order inside a jam inside htdocs okay so don't be confused so if you are confused uh please go back and watch the part where we moved our resources from downloaded folder to our main project folder or please comment below i hope this is not that complicated so we have our project inside jam hdx and food order so we'll be working on this so let's access this file so to access this file we need to go to browser and here we need to type localhost and here we need to type our project folder name which is food dash order so press enter and here is our home page so our project is showing successfully that means we have successfully transferred our file from downloaded resources to our home page so these are all our pages so that's is it everything is fine till now now let's minimize and now we will have to move to another section which is creating our database for this project so let's go to our phpmyadmin and let's design database for this project so let's open our browser and let's uh go to our phd my admin here i have already opened psja my admin if you haven't opened then uh in url type localhost that's ps my psp my admin and you can see uh your database management section so here we will uh create database and create tables for our website so i will create a database first so to create a database just click on new and here we can give like food dash or underscore you can type anything for this order and here i will select utf-8 general ci and that will allow us to utf-8 search for general underscore ci general underscore ci so this will allow us to add data in on the other languages as well so i prefer to select this one so utf-8 underscore general underscore ci and database name is food dash order so click on create so our database is created for dash order now we need to create a database table and so how do we design a database for any website or web application development project i will show you uh some trick or i will try to make you understand in simplest way possible so the trick is if you look at the homepage or main design of this website what we have is we have categories so these are categories and the categories can be more like we we may need to add other categories or update the existing categories or delete the existing or delete the existing categories similarly we will have many food items under those category so for this project we will need one is category table another is food table so they are the most they are the primary tables that this project requires and apart from that and to manage this category and products we will also need admins so we will have another table which is tbl admin and similarly when we click on order it goes to order page and to manage all of this order and to track the delivery we also need to save the data of these order details in our database so we need another table which is tbl order so for this website we will have minimum of four different table first one is tbr admin we will be managing everything like category food and order and then we will have tvl category to manage categories of our food and then we will have tvl food to manage uh every food in our restaurant and then last but not least it is tbl order and this database is designed for simplicity for beginners so we can if we if we want if we want to make more complex then we can make more complex as well but this website won't require visitors or users to create any account so visitors will not need to create an account to order uh food they can just select the food and order by filling their details so this makes our database design easy so this is the simplest database design for us for now and we will design the database based on this okay so let's design our database so the first database i will design is tvl admin so let's go to rps in my admin and let's create a table so its name will be tbl underscore admin and let's create and go don't worry about the columns you can always add our or remove the number of columns so tvl admin click and go and here i will look at the column so we have id full name username and password so let's go so first one is id second one is full name full underscore name and then another one is user name another one is password password that's it now we need to specify the data type as well so id will be integer data type so we don't need to change full name will be let's say valkyr and let's say the length hundred so we are giving 100 length so here we need to specify length we do we do not need to specify uh length for integer uh by default it will take 10 as its length and username will also be of bearcat data by data type and its length will be 100 and for password we'll let's select worker and since we will be encrypting password uh the encrypted password will be longer so i'll give its length as 255 which is maximum and here we need to make the id as primary and auto increment so auto increment will always increase the id by one and here we need to make other changes which is attribute and here we need to select unsigned so what this will do is it will only allow a positive integer value to be inserted so it will uh help in memory and space optimization since we have already specified that this column will only be holding a positive and integer value so let's specify that and here we will select primaries because this is a primary key and click on go and here this is a underscore i mean auto increment so here we need to check it so it will make it auto increment and then we can click on save and our first table is created so id primary key and auto increment full name username and password now similarly we need to create another table under table will be tbl category and then we will create tvl food so first we'll create tvl category so let's go to psm admin i'll click on new and its name table name will be tbl underscore table category and here first one will be id and what will be the second one id title and image name we'll also need to upload the image so this is category title and here we will have image name and what do we have another is i will put it here so edit our image name feature and active so featured and we need to add another column so just select the number of columns and click and go it will add another column so it will be active so what this feature and active are is i will show you in our design so uh this is option like published or not published so this is active or not active if it's active its value is yes if it is yes then it will be shown in our website if active is yes then it will be shown on home page as well as on category space if active is no then it won't be shown in our website but if active is yes then it will be shown in our website but if the featured feature is yes then it means it will be displayed on home page as well if featured is yes then it will be displayed on home page but if featured is no then it won't be displayed in home page but it will be displayed on categories page okay so that's the difference between featured and active and it will be more clear when we uh create all the content management system or admin panel and display the data in our this home section our front end section from database so for now just be clear that feature active is turning on on and off feature is displaying on home page or not okay this is displaying on home page or not this is turning completely on or completely off that's it now let's see the data type for title title will be bearcat and let's give its length as 100 i think it sounded right it sounded and image name so let's give image name as valkyr and let's length is 255 so let's give it as 255 feature is very care its length will be i think 10 that's fine because its value will be either yes or no so yes means three and no is two so this is enough so this will also be velcro and length will be 10 and as earlier uh id needs to be unsigned and it needs to be primary and it also needs to be auto increment so check out increment and click on save so here we have tvl category now we need to create another table for tvl food okay so it will be tbl underscore food and first one will be id and what will be the second one id title description so let's go to id then title and then description after description what do we have id title description then price and imagine so let's go here price and then we need to add another column i will add four columns price and then what do we have after price we have image name and then category id image name and then we need to select category as well category id and we will save category id and after category id what do we have after category id we have pictured and active so let's and featured and then active active that's it so title will be vertical and its length will be let's say 100 description will be text and we do not need to specify length for text price will be decimal okay let's select decimal and we need to give uh the length and decimal point so we will be selecting two decimal point uh so that's why we need to add 10 comma 2 10 is length of the integer value and then comma and then 2 okay so this is comma 10 comma 2 image name will be vector [Music] two five five category ifg will be integer and feature will be backer 10 american 10 and then active will be it's very and 10 that's it now we need to assign id as unsigned and this is primary key okay and it is auto increment and here in category id as well we need to change its attribute to unsigned because category id will only be positive and integer value so that's it now let's go to down and click on save and here we have our tvl food id title description price image name category id featured and active now we will create our last table which is tbl order so tpl underscore order and id first one is obviously id and second one will be food price quantity so food price quantity and we need to add other columns as well so i'll select five and food price quantity and then total and order date total order date date and then total order date and then status and then customer name and then customer contact contact and we need to add two more columns uh customer contact and then customer email and customer address so customer email and then address that's it and this database for tvl order is not normalized uh since uh this course is for beginners i have not uh i have made the database design as simple as possible so i have not normalized tvl order if this course was for advanced uh user then i would obviously normalize this table order and add relationship add relationship with tvl admin and tvl food and if we have added relationship with tvl food then we would not add like food and price instead i would only add food under underscore id and its primary key will be foreign would be foreign key here and all the details like food name and price would be obtained from this but for simplicity i have not normalized the tbl order and i have added all the details in single table okay so that's if you want more advanced course on database design then please let me know in the comment below and i will try to make more advanced uh database design course in mysql either on mysql or ms sql server and also if you want to learn uh basic of the database design like if you want to know beginner label query like insert update delete aggregate query like average some account etc then i have already i already have a course i'll put the link in the description so that you can check that and learn basic of database design now let's go back to our tvl order and let's add the uh data type for all so food will be very care length will be i think 100 150 255 okay 150 and then what do we have i have not changed price so price is not factor price is always decimal so it needs the price needs to be very decimal decimal and 10 comma 2 because sometimes price is like 5.45 6.20 that's why we need to add decimal point so 10 is length of the integer or length of the number and then point comma 2 means we'll we will be taking uh two decimal point so 10 comma two quantity we don't need to give because it is an integer and total is also a decimal and we need to give our decimal point so 10 comma 2 and then order date it will be date time you can either choose date or date time but for this time i will use date time because there will be many order and if we select only date then we don't know at what time the order was made so i will prefer to choose date time and then status will be backer and its length will be i think what's this length let's check length our status is 10 10 is not enough so we need to at least make it 50. the status value will be like ordered and then uh on delivery and delivered so there will three status ordered on delivery and delivered i think 50 uh length will be okay and customer name will be wirecast so let's give it 150 i think 150 will be okay uh customer namely i will give uh 150 and then customer contact where care 20 and then customer email wear care 150 i do not think email will be more than 150 character length customer address let's give it as weaker 255 that will be enough and as always we need to specify id as unsigned and primary go and auto increment that's it now click on save so that's it guys we have successfully designed database for our restorate our food order website and we have three different tables tbr admin tvl category tvl food and table order and i have tried to make you understand about the basics of database design in simplest way possible but if you still have any confusion or if you want more advanced database design course then please let me know in the comment below and i will try to make the course as soon as possible so that was our database design part now we will move to another section which is designing our admin section so to design our admin section uh let's open our project in our kodi editor so i'll be using visual studio code open your favorite code editor which might be sublime text or atom or visual studio so i'll click on open folder and we need to select our project folder which is inside local dixie xampp and htdocs and our project folder is food order so i will select food order and here is our project so here we have css images and all the pages and this is the front-end part now we need to create admin section or content management section so i will create a new folder so i will click on this folder icon and new folder and i will call it admin okay so this is our admin and inside this admin i will create a home page for our admin so it will be index.php so let's create a new file inside our admin folder so it will be index dot psp that's it now we will work with this admin section we won't be looking at front end section once we complete admin section like managing admins managing category and managing food then we will come back to our front-end section so this is our back-end section or content management section or admin panel you can call it whatever you want either add-in panel or content management system or back-end you can call whatever you want so this is our uh home page so index.php so i will open the angle bracket and then question my psp and this is how we write psp and i will echo hello admin so this is how we print in php so you need to write to write the php code you need to open with angle bracket question mark and php and then question mark php and between you can write php code so echo prints out the value so i'll save it and let's go to our browser and here i'll close this database design and this is our front end part so this is our fronted part now we need to access our backend so localhost yellow localhost slash food order and slash we have admin so admin will be our content manager system or admin panel or backend so here is our homepage of admin panel so here you can see hello admin so now here we will design uh a simple content management system or admin panel so let's get into work so i will close it and then i will open html so this is inside our admin panel index.psp and at the top we will add title and title will be food order website home page and sorry we need to add head at first so head and inside the head we have title so i'll cut it cut ctrl nx and paste it here and i will add it tab so indentation is really important for better visibility and after head we will need to create body so body and here this is this will be our body part so as one we can see admin panel so that's it so i'll save it and i will go to browser and refresh so here we have added panel here we have our title footer website home page so this is our simple uh structure for our html piece now i will try to make as beautiful as possible and as simple as possible content management system so i will add a menu or navigation bar at the top and we'll have main content section at the middle and at the last we will have footer okay so here i will separate the different section as i taught you in web design section or web design course if you haven't checked i will put the link i have put the link the disk in the description so please uh if you are interested in web design please go through that link so i have already taught about breaking or dividing the complete webpage into different section uh in the same way i will break uh our uh home page of our admin panel into three different section which will be menu section main content section and footer section so i will add a comment and this will be menu section starts and i will copy it ctrl c ctrl v and section ins and the ends this is a comment this is how we write comment in html comment i will copy both and go down and this is a main main content content section this is also main country section ends main content section section ends and the last one is footer so this will be footer section starts footer section ends and between this we will create a division i will create a div sorry div and i will give it class as class is equals to uh this is menu so i'll call it menu i will type just type menu goes here and i will copy it and i'll paste it here this is not menu this will be main content and that's see man content goes here and last one will be footer so it will be footer and we can call it footer goes here that's it so let's save it let's go to our browser and let's refresh our admin panel so here you can see menu goes here main content goes here and footer goes here now let's add css and let's design our this section so to add the design we need to go to the head section and here we need to add link and css link real is equals to stylesheet and hrf is equals to we need to give the location of our css so i will for now delete it and here's in our css folder i will create a new css file so call it new file and it will be admin dot css and we will link this admin.css inside our admin index.psp so to link our admin.css file we need to get out of this admin folder because index.php file is inside our admin folder so let's get out of admin dot admin folder so to uh to get out just add to uh fully stuff or two dot and then backslash and then css and then let's say admin dot css so this will link our admin.css file so will i will open install.css and i want to check font family so our font family is arial helvetica and cent serif so let's go to our admin.css i will close style.css here i can add a comment so this is how you add comment on css and here i will give author will be my name and your name you can give yours and theme theme is food order website admin and version will be version 1.0 that's it and let's change the default margin padding and font family so i'll add asterisk and then margin 0 and then padding zero and then i will add font family font family uh aerial helvetica and sun serif so this is our phone family so i'll press ctrl n s save it and i will go back to our browser and let's i will refresh if the css is applied correctly then our menu should be changed or our text should be changed i'll refresh it and the font family is sent merging is gone padding is gone so our css is applied correctly now i will create a wrapper class so here i will create wrapper and i will give its border as one pixel solid a b realistic black and if you don't know about this wrapper then please check out my web design course i have explained everything in that course if i uh again try to explain each and everything of designing part then the course will be longer two times and in this course i want to focus more on development part not on designing parts so if you are curious please go to my web design course which is completely free okay so i will apply wrapper now so i will go here and i'll create another div div and it will be class is equals to wrapper and i will put this text inside our wrapper class let's save it and let's see the changes so if i refresh it now you can see the border top and bottom add menu goes here so this is what our apple class is doing it is adding one pixel solid black border on our main title and we will be applying this wrapper on all the section so wrapper and then we will also add padding of one percent on all side i will replace save and refresh now it is adding padding of one person on all side and i want its width to be eighty percent only so i'll give its width width is uh eighty percent let's save it and let's refresh it with eighty percent but i want it to be i want uh this empty space in both side so i will manage it with margin margin 0 auto it will bring it in center and add space on left and right so it is adding space on left and right but center is this and we need to add this wrapper on all of our section so i will copy this wrapper copy ctrl and shift d class wrapper and i will paste over here this is sorry we need to tap this is not meant this is main content content and this is i'll paste it here as well and the footer wrapper and this is footer and save it and let's refresh it so we have three different section this is menu this is main content and this is footer so let's design our footer first so this won't have much so we'll just add paragraph and it will be like uh 2020 2020 all rights reserved all that reserved to let's say some rest student rdst you add a nt and also add developed by and our name this is my name you can add yours just save it and refresh it so here you can see 2020 always results some restaurant this is restaurant name you can add the restaurant name and visit upper and you can also give the link so i will add anchor tag anchor tab as we have dummy link so i will uh cut it and at the end similarly we can also add link on our website name or i will just leave it as it is and i will refresh it now i have given the link on our like anchor tag and i want this footer to be in the center so i will create a class called text center so here i will give class is equals to t xd text center and we need to create this class so i will go to admin.css and here i will create a class text the center and here we will align the text like tax it takes online text align center and this should work so i'll save it and go to our browser refresh it now our text is align center and this is perfect for us okay and i want to match the theme of our front end and here if we go our primary color is red so i want to add this color in our background of footer so i think i will need to go to color material or flat vehicle i think i have used flat ui callers and we need to go to the website this website gift beautiful color palettes and here i think i have gone with which one which one which one and i think i have gone with chinese palette sorry okay so this was the color we have used on our front end so i will use the same color palette so i will select watermelon and i'll use that color in our footer so this is our footer so let's go to our uh footer this is our footer section so we need to add background so i will create a css for footer now so now here i will get i have created a comment so i'll call it css for footer so for it is for better visibility you need to while you are beginning in any programming language or any designing so please make a habit of writing or comment because it will be helpful when you come back uh to your code after some month or when you have error and you need to fix it it will be helpful to find the bug as well so it's a better practice using comment and also indentation indentation and using a comment is must have a skill for beginners okay now here we need to create css for our footer and background color is the color we have selected i have just selected the color from here this is our color and i will save it ctrl n s and let's refresh now you can see the color is applied on the background but the font looks lit little bit off so i will add the i will add the font color as white so i will call it uh color white save and refresh and that looks better okay this is fine for now and we will also change the color of this uh anchor tag as well now let's design our menu so i'll go to the menu section so let's go to index.psp and in our menu inside the wrapper let's remove this and here uh i will create ul tag and inside that ul i will create a light tag and inside that ally i will tap create anchor tag and the first one is dummy and this will be home home and then i will copy this link copy ctrl c ctrl v ctrl v ctrl v so what we will have is we need to have admin manager and then category uh we can call this category only we do not in manager so this is admin category food and the last one will be order so we will have four different uh five discipline menus first menu will uh just take uh us to our homepage second will uh take us to admin manager page third one will take us to category manager first one will take us to food manager and fourth one will take us to order manager page so let's save it and then go back and let's refresh the page so we have our five menu in our menu section but they are vertical we need it as horizontal ones so let's do that so let's go to our visual studio code and we need to go back to our css okay and as uh we have created comment for footer i will create comment for menu as well so comment css for menu and here we need to target our uh uel ally so uel first we will go with ul so i'll go select menu uel sorry menu uel and its list itself list style type will be non sorry none and let's save it and let's refresh and you will see the changes if i refresh it its list tile type is gone from dot to none and similarly we need to target our ally so uh dot uh menu sorry menu uvl i and this display inline so display inline will bring our menu into horizontal lines i'll refresh it now our menu is on horizontal line but uh i want this menu to be in center and i also want spaces among them so let's try to add space in our menu url allies so padding i will add padding of one percent and save and refresh so we have space between our menu now let's move our menu in center so at the top i will select menu only and i will align all the text in our text align as center and save it and refresh and our menu is in center you can either do uh either work this way or we can always reuse our text center css we have already created a css to align our text center so we can also use this css so i have removed uh text center from menu and i will use this css i'll go to index.php and in menu along with menu here you can call for our text center css and let's save it and if you refresh it will remain in center so we have reused our text center css so this is the purpose of creating separate text center now we can use anywhere we want and we don't need to [Music] add this code in another part or another section or another css so this is code reusability so this is why you need to create custom class so this is our reusability and we followed our dry pattern which is don't repeat yourself okay so now we have like uh made a menu like this but i want to make menu uh like this one so i want to change the color and over color as well and i want to make them little bit bolder okay so let's go to our css now we need to target our anchor tag okay menu uel ally so menu here is we have menu and then uel ally now we need to target anchor tag okay so now menu uel ally anchor tag and first i will remove is text decoration test decryption will be known so here we have our text declaration as underline so i will remove this one first so text equation known let's save it and let's refresh our underline is gone now let's make our font a little bit bolder so i'll call it font as weight as bold save it and refresh it now it is little bit bold now let's change the color so we will use this one color and this will be our over color so color will be this one let's save it and let's refresh now color is changed as well now i want to add a hover color so let's go and select this color this is our regular color for anchor and this is our hover color so i'll copy it and let's create a color for hover so menu uel ally a hobo and caller paste it save and refresh now now you can see a little bit changes call a little bit change in color whenever we hover over our menu so this is our main section now main section is also done now we need to design our i think this main content section is designed pretty well as well but let's design a little bit better so now add css for main content here i will add css for main content so css for main content and dot main dash main content we have css as main content so this is our main content and this must be same as main content here so main content and i want to add margin at top and bottom margin uh one percent top and bottom zero on left and right so this is top and bottom this is left and right so when we apply this css uh we will have space uh at the top and bottom of this mains content section okay let's save it and let's refresh and here we have space at the top and at the bottom so i think that's it for now now let's remove the border of our wrapper so i'll remove the border of the wrapper for this wrapper so i'll remove the border one pixel save it and refresh now our border is gone but uh this and this section looks same so i will add a bottom border add menu section so let's go to our menu section menu so we'll create dot menu and i will add border bottom border that bottom one pixel solid i want to add gray not black so let's refresh and we have a nice bottom border so that separate menu section from main content section so that's it for now i think uh i think let's design dashboard for our main content section as well so i want to add a rectangular shape dashboard where we will show the summary of our admin section so let's create those section okay so here in main content section i want to add its background color as little bit grace we can go with this color so i will select this color and i want to make uh the background color of main contents as that color so let's go to our main content where is main content here is main content i will add let's change this background color background color and paste it ctrl v and save it and refresh so the color is little bit uh grace color so this is our main content section and i think we do not need margin at top and bottom so let's remove the margin this looks a little bit odd because there will be a white uh background after the main section and after photo section so i'll remove the margin now and refresh okay it looks good this is not white this is a little bit base color now let's add a dashboard so let's go to index.psp and this has been content and here i will add strong and i will call it dashboard and save it and refresh so this calls a dashboard so that's night and under that below that will create small square boxes uh four boxes would be fine so i'll create four boxes so here let's place another div dave and then i will call it class as uh class is equals to called as codes 4 because we will have four different boxes in our row so this will be called s4 and inside that box we will have let's say h1 tag that's one and that's when we'll be like uh five and then below that we will have um that gory's and let's save it and let's replace and here we have five and categories but this should be inside uh square box so let's design that square box so the class is called as full so let's add the css for that called s4 this is inside main content section and code is 4 and let's give it width first so width will be that's the 20 percent i will get 20 percent for now and let's give it back ground color and let's give its background color as white let's save it and let's refresh now we have you can see a subtle white color this is white color and this is grey so let's design furthermore i want margin at all side margin two percent so this adds space on all side but i don't want that much i will add just one percent i will add then padding padding of two percent let's save it and let's refresh it that looks nice now we have padding uh we have space and what we can do is uh let's bring this should we bring this text in center so let's bring that text in center so let's go to our index.php and here along with call4 let's add text center let's save it and let's refresh it now it's on center so we have five different categories and after five let's add a break i will add b as save it and it will add a space between five and categories now let's create uh other three boxes so i'll just copy this one and paste below it and again paste again paste again paste so that's it and let's save it and let's refresh uh we have one two three four five five different boxes we only need four so i will remove one and we want these boxes on horizontal line not vertical so we need to add float so let's go to admin css and on cold s4 let's add let's add float float lift so that's it let's save and let's refresh and we have floated our boxes on horizontal line but our footer is going up now we need a clear fix so let's create a clear fix css here i will create clear fix and its float will be known and clear will be both that's it and we will is use this clear fix to fix that float so after the last div we need to add deep clear fix so it will fix our design error so let's refresh it now our clear fix is also gone okay and here instead of this song let's add it inside as one and yes as dashboard let's save it and let's refresh so here we have our dashboard and here we have four different boxes but uh the last one is below so we need to decrease the size of the box so let's decrease the size of the box so let's go to cole4 so let's decrease to 18 percent width and let's refresh and now the fit on our horizontal line so it looks fine for now i think so i think we need to add uh more padding on top and bottom of our main content section so let's add padding for top and bottom only to three percent and left and right zero so let's save it let's refresh it now we have nice space at top and bottom and we have four different boxes so this is our dashboard and we need to create other four pages one two three four one two three four places as well this is the home page now we need to create admin page category page food order food page and order management page for this uh for that uh let's create our another page which is categories which is admin page first we need to create admin page so inside the admin folder let's create a file i will call it manage does admin dot psp so this is managed that's adventurous php so i will copy everything from index page control control c and we can paste it inside manage that manage admin.psp and save it and let's go to our url and here we are new pages manage dash admin dot psp and let's refresh so this is also manage admin uh does manage admin php we don't have any error that mean that means we have copied our home page code from homepage to our manage admin dash dot psd page but we need to change uh the content main content so let's go to our main content we do not need all of these columns so i will refresh i remove and refresh so all the all the boxes are gone and here we will have manage admin refresh so this is our manage admin page so let's look at our home page again local slash four daughters slash admin so this is our home page and this is our manage admin page if you look at these two pages everything remains same like the menu section the whole menu section and the whole footer section is same whole menu and whole footer is same only the different is only the content changing or only the different is this main content section so this main content section so uh to follow our dry pattern which is do not repeat yourself what we will do is we will break this different section like menu and footer into a reusable part and then we will include those part in all of our pages okay so hope you understand what i am trying to say if you do not understand you will understand after uh we uh break this section into different reusable part and use it again so let's go to our visual studio and this is our home page and inside the admin page let's create a new folder so this is our admin folder inside that admin i will create a new folder called partials and this is the same way if you understand this flow then it will be much easier when you learn uh other program language frameworks like laravel or coding nighter or python django all all the frameworks uh implement similar pattern they uh like they break the repeating part into different reusable parts and use that so we will break those parts into different sections okay so the repeating part are menu and footer so we will break those parts so we'll break menu and we'll break footer okay so let's go to our visual studio and inside the parcels we need to create another file and it will be menu dot php so this will be menu.psp and all the menu we will store inside it so let's go to index.psp and where is our menu section so here is our menu section so this is menu section ends so from menu section ends and above everything we will cut from here ctrl and x to cut and save it inside our menu dot php so here we have our menu.psp and here we will just call that menu.php file inside that parcel so here we will open our psp code and just call that file so to call that file what we'll do is include and then here we will call the name of that page and we are on index.php file but our menu.php file is inside our parcels okay so we need to go inside our parcels and menu dot php that's it so let's save it and let's go to our browser and let's refresh our home page so where is it so this is our home page so if i refresh uh this should remain as it is and our page should work and our page is working perfectly we do not have any error so this is how we will break the whole website into different part okay so this is our menu now similarly let's create our footer part as well so i'll create a new file and this will be footer.php and here we will just got the footer section so go to the footer and from footer section starts from footer section starts and all down cut all everything cut everything from protoss section starts and down up to html end got everything ctrl and x and paste it inside footer.php control and paste ctrl v to paste save it ctrl ns menu save it ctrl n s and here we will call that file so php open psp close and here we need to add include and here we will go inside our partials folder and our parcel is footer.psp that's it so let's save it and let's go back to our page and let's refresh and we do not have error so that means our footer section is also working perfectly and we need to do the same for our what for our manage dash add-on page so here we have already created menu and footer now we don't need to create another menu and footer we just need to remove our menu section from here remove main section just include our partials include and p r t i a l as partial slash menu.php save it and then refresh it so here is our manage admin refresh is our menu is working perfectly and similarly i will also remove footer section footer section starts and all the way down remove everything just uh the content of main content section will stay here because this is the part that is changing everything else like menu and footer is same for all pages so we'll just call them from our parcels okay php include partials footer.psp and save it and refresh and it our footer works perfectly footer is working perfectly and now see at the length of the code it's now much clearer and smaller as well because we have like separated the menu and footer into different file and it feels like magic we just call the file they are the repeating part so we just call the file and our changing part will only remain in our page everything we will be calling from our parcels file okay hope you understand if you do not understand please comment below i will try to make you understand uh as easily as possible and another uh one benefit of doing this is following dry pattern which is do not repeat yourself so we are not repeating we are not writing same code again again if we have not created this partial then we need to write this same code for all the pages like manage page ad admin page update admin page and like manage food add food update food etc so we need we would be repeating everything but following these partials or breaking this repeating section into a different section means uh we are not repeating our same code anymore and another uh benefit is if we uh want to make change on this part like if if i want to add this is not some restaurant so this is i want to call it as a food house if i want to call it food house i will just go to footer and i will just change from some resident to food house food house and save it and i have changed on one file which is footer.php and the change will applied on every pages if i refresh it it is food house if i go to uh home page and refresh it it is changed to food house so this becomes easier because sometimes we need to change link to our menu if we haven't like separated the menu file into a separate file then we would have to change on every different page where our menu is included okay so here i will add link to our homepage which is index.php and here i will add link to our manage admin page yummy energy manage does admin dost php and save it and refresh it now i will close one of this and i have refreshed it so this is dashboard if i click on admin now our menu is working as well so if i have if we had not like like separated this menu page then we would need to add link on every page we create now our uh breaking the different section into parcels makes our work more easier so this is the professional way if you follow any if you learn any framework or if you learn uh further advanced programming language then you have to follow this pattern as well okay so i have tried my best to make you understand in ads easy way as possible but if you still have any confusion please please please comment below i'd be more than happy to explain furthermore okay so now we have created our admin manage admin page now let's create other pages like manage category manage food and manage order okay so i'll just i will minimize our parcels and along with index now i will close menu.php and footer.php as well so along with index.php let's create another file do not create inside parcels okay now we need to uh create along with index.php and manage admin i will create new file and it will be called manage dash category dot php and here what we will do is we will just add uh open psp and then include footer for not footer first one is menu menu dot php i will save it and let's open the parcels and inside menu i will add a link here i will call it manage dash menu dot php and not menu managers category category similarly i will call it as manage dash foot.psp and i will call another as manage dash order dot psp okay and let's save it let's uh we have what we have created we have created manage this category page and uh we have uh added the link to the file as manage category manage food and manage order now we need to create this file as well but first let's work on manage category because we have already created this file so manage category and in manage category page i have just included menu so i will go to category i'll just reload the page now click on category sorry we forgot uh to add parcels so let's go to menu so this is inside our partials parcels and save it and let's refresh it now you can see menu because we have encrypted menu we can see menu page now let's add our footer as well include partial slash footer.psp and save it and refresh now you can see footer as well so this is how easy it is uh to add our menu and footer in our different sections or in our different pages now we will create another page another part which is main part or which is the repeating part so this will be div sorry and this is class is equals to mendes content and inside that we have s1 this is this is managed manage category let's save it and let's refresh it so this is uh manage categories i think i have messed up something so i will look at our manage admin page so what we have is i have forgot to add a wrapper so that's why it is on left it is not on here so let's add wrapper so before s1 we need to add div and its class is wrapper and inside the wrapper we will add this s1 tag save it push it inside sorry push it inside save it and refresh it now it's inside our boundary so that's it so hope you understand about breaking the content into different section so we have created admin and category so similarly let's create our food and order page as well so i will go to uh our admin inside admin do not go inside parcels and create manage that food dot psp and for now i'll just copy everything from manage category page so this is manage category page ctrl c manage food and ctrl v and this will be manage food and similarly i will i will save it first i'll save it and i'll go back to our url i'll refresh it and we have create manage food so manage food now let's create the last page which is manage order manage for manage category manage admin manage category i'll close this as well so here we need to create another file so this is manage this order dot php and here i'll paste again and this will be manage order and save it and let's refresh it and click on order so we have manage order manage food manage category manage admin home so our menu and our footer remain same but only the changing part is our main content part and breaking these uh sections into different part and reusing it also uh makes our website faster because it it it is already loaded and it do not need to load again and again whenever we go to different pages so this also speeds up our website okay so this is it so hope you understand uh breaking the different sections into different parcels now we'll go to the next section which is like adding updating and deleting admin so i will start with admin section first because uh we need to create login or authentication system as well so first thing we need to do is work on admin admin section or admin model and then after completing the admin model we will add login or authentication authentication system and then we will work on category module and then we will work on food module and then we will display all the data in our uh this front-end part so this uh that the all of these data will be uh generated or we will display all of this data from database and then we will also manage order and delivery so let's go to our next section which is admin module

Channel: Vijay Thapa

Views: 887,108

Keywords: vijay thapa, web development, programming courses, free courses, php, mysql, php tutorial, php tutorial for beginners, php mysql tutorial, php project tutorial, php project step by step, food order website, food order website with php, online food ordering system in php, php food ordering system, food order system project, online food ordering system, how to create a restaurant website, how to create food ordering website, how to create food ordering system, learn php

Id: ZBgTzx46B8s

Length: 80min 26sec (4826 seconds)

Published: Sat Nov 07 2020