4. Food Order Website with PHP and MySQL (Login - Authentication and Access Control - Authorization)

hello everyone i'm busy tapa and welcome back to the new episode of our tutorial series on food order website with php and mysql in the previous episode we have successfully added the functionality to delete admin update admin and change password and in this episode we will work on authentication or login system so without further ado let's start our tutorial so let's go to our code editor so i'll open visual studio code and uh let's close these pages we don't need update password add admin or update admin manage admin we do not need these things let our admin.css be open and to add the login functionality we need to create a login page so inside our admin uh like along with index.psp and other pages let's create a new file so i'll click on new file and here i will call it as login dot php and here we won't be importing our uh menu and footer because uh we don't need to display menu in our login page so we will design a simple login page for this so i will start with stml and first thing we need is title so first thing we need to head so inside here we will have title so i will call it as ti title and title is login uh food order system and after head we need to create his body so body section and here we will design our login page and along with our title we also need to link our css i will link css sorry link css style sheet and this will be we are inside our admin folder so we need to get out of this admin folder so get out of this admin folder get inside css and we will link our admin dot css so this will be our admin.css this is linking the css file and here we will design our login page so i will create a deep tag with its class login so deep class is equals to login and here i will create h1 tag as one tag and i will call it login and at the bottom i will create a paragraph and here i will just display uh like powered by or created by so created by and we can add anchor tag and let's add dummy link or i will add my website name like www.vjtapa.com and here i will display my name visit tapa that's it let's save it and between this h1 and paragraph and h1 and paragraph tag we will design a simple login form for now let's save it and let's go back to our browser and let's access our login page so our login page will be uh localhost food order slash admin slash login dot php so i will press enter and here we have our login and created by but i want this to be uh in center around here and also uh somewhat like a box so add let's add css for this and our css is linked correctly so that we can change the uh font uh family so this is a real so our css is linked correctly so let's go to our admin.css and create css for our login so our class name is login and let's go to admin.css and here at the bottom i will create a css for login so c ss for login and here i will target our login class so this is our login class so i'll target this class and here i want its width to be width of let's say 30 percent and let's give border as well so i'll give border border of one pixel solid and i will give grey color and let's save it and let's go back to the browser and let's refresh uh our css is not applied i don't know what's the problem so uh one pixel so let's play uh let's i will right click here and view page source sorry not inspect right click view page source and go to css at the bottom we do not have css for login so this is due to i think cache or temporary file i don't know so if you do not see our css that we have recently added so after footer we have css login but here we cannot see our css so i will go here and refresh it like this and then we can see our css so dot login so if you face the if you face problem like this then always do a view page source and go to your css file and refresh the page and our or your login system or your html file should work perfectly so now we can see the changes in our form our login field let's close this and let's close this now we need to move it to the center so let's move it to the center for that i will use margin imagine uh let's add margin of top and bottom as five percent and left and right for auto and this auto will bring our box to the center so i will save it this is for top and bottom this is for left and right so left and right is auto so it will bring our box to the center so let's replace and here you can see our box is in center okay so i think our box is a little big let's give less width i will decrease it to 20 percent uh let's refresh now it's okay and let's give the padding a little more uh merging on top and bottom so i'll give 10 percent and refresh i think it's okay and let's give the padding as well so i'll give the padding of two percent two percent let's save it and let's refresh now it looks better and let's align this text in the center as well so i'll go to login.php and in s1 tag i'll give class class is equals to and we have already created text that center let's save it and let's refresh now you can see in in the center now let's uh align our footer to center as well so i will copy this class and paste it in our paragraph ctrl v save it ctrl ns refresh now we can see the footer as well as header and between our header and footer we will create a simple form for login so after h1 here we'll create a login form it starts here and i will copy it and paste it down here and this is nc and this ends here and here i will create a form frm form and action will be blank because we'll be processing our form in the same page and we need to give method method is equals to post that's it and i will break uh take the form end at the bottom and here i will give the label as uh we will log in with username and password so first thing we need is user name and we need to give input type input so input and it would be type text and name will be sorry text and name will be name is equals to uh user name let's give the placeholder as well please holder is equals to enter username and enter username and after this we can add password password and another input tab input type will be password and its name will be name is equals to password and placeholder will be place holder is equals to enter password password that's it and after that we will have input type submit for submitting the forms input type will be submit and name will be name is equals to submit and its value will be value value is equals to login so this will be the name of the button and we will also give the color so i'll give the class and this button will be let's say btn dash primary let's save it and let's go back to the browser and let's refresh our form is not aligned perfectly so what i will do is i will break i will add br tag and i will break everything so after the input type after the username i will add one i will add one break tag or br and after input i will add another br and we can add a space between username and password and after password also i will add a break tag sorry and i will add a break tag break and after password input i will add another break that's it let's save it and let's refresh again uh now it looks uh better but i think we need to add a two break tag after input type so after input type let's add br and after input type after input type let's add br and let's save it and let's refresh again now it looks better username password i think we need to align all of this in center as well so what i will do is uh we can add the class in form so class is equals to text dash center and save it let's refresh it now everything is in center i think we need to add uh like one break after our two breaks after login and two breaks after login button so after logging here i will add a br tag and br tag after and button i will add the attack and the attack to be a text save it refresh it so it looks okay now so you can you enter username you can enter password and you can log in so this is this is not the best uh login from design but uh this will this should work so if you are good on css then please try to make it better or you can follow my html css web design course and learn css and apply in our login form for now i think this will be okay uh we need to enter username and enter password and the login so let's work on adding the functionality or backend for login system okay so now first thing we need to do is we need to check whether the submit button is clicked or not for that i will go down and start our php after html php and here uh we will check i'll add a comment check whether the submit button is clicked or not so if is it dollar underscore post submit then what we will do is uh we will then only we will process the form as we have done previously in ad admin my update admin things so here we will process for login so first thing we need to do is uh get the data data from login form so from form we are passing the value using our uh press enter and we are using post method so we need to get with post method as well so here we will get the value so first thing we need to get it username username is equals to dollar underscore post and here it will be username okay that's it and then another thing we need to get a dollar password password is equals to dollar underscore post password that's it so [Music] let's save it and let's check whether we are getting the username and password value from our form or not for that i will use echo and echo and save it and let's go back i refresh the page i will pass some value so username i'll add admin and password i'll ask admin and login so login so here you can see admin and admin so we are successfully getting our username and password value from our login form so uh let's remove the echo uh it verifies that we have successfully passed the value and we are successfully obtaining the value uh from our login form okay now let's create the sql query to check whether the user name and password exist and match or not so check sorry sql to check whether the user with username and password exist uh not so i'll get sql variable and i'll create a sql query so the sql query will be select all from tvl underscore admin where user name is equals to dollar users name and password is equals to dollar password so to uh get the user with username and this username and this password both of the condition must be true so we need to check whether the username and password exist or not if exists that means you can access our admin panel otherwise login fail and you cannot access the login okay so this is sql query now we need to execute the sql query so three execute the query and to execute the query we will create dollar risk variable and mysqli underscore query and we need to pass dollar connection and dollar sql that's it we have a dollar sql but we do not have dollar connection because we have not added constraints uh in previous pages we had constraints.psp in main.php file but we have not included menu here so we do not have constraint.psp so we need to include the constructor psp at the top so at the top i will open psp and include see i'll include uh we need to go inside our config so we are inside our admin folder login is inside admin folder but config construct.psp is inside config folder so to get out of admin folder add to dot and slash and we need to go to uh con fake folder and then constraints dot php and save it let's save it and let's replace the page i will refresh the page like this and we do not have any error yet so that means we have successfully included our constraints.plc file now we can further process for our login authentication so this will execute the query and after executing the query we need to count the rules if the user is available with this username and password then there will be at least one user with same username and password uh if the count is zero or less than one then user does not exist so let's check count rows to check whether the user exists or not so i'll create dollar count is close to my sqli underscore now i'm underscore roots and here i'll pass dollars raise and here let's check whether user exists or not if the user exists if the count is is equals to 1 then that means user exists if the count is 0 then user does not exist and it is recommended practice uh to not make a different user with same username okay so do not make different user with same username okay so create different username for different user and here we will check whether the user exists or not so if dollar count is equal to is equals to j not zero one that means uh there is at least one user and else user not available here users uh by label and we will set the session message uh for success uh login success and login success and login fail so let's set a session let's create a session for login success message so i will create a dollar underscore session login and our message uh we will use our class that we created uh in previous bit uh previous tutorial on displaying a login message or success message in green and displaying error messaging rate so our class is success and here we'll display the message login successful and after the login is successful we need to redirect it to our home page which is dashboard or index.psp so after login is success message redirect to home page or dashboard for that we will use header and then location and here we'll use site url and we need to go to our admin page and then index.php we do not need to give the index.php because uh by default it will uh go to index.php so add the semicolon so that's it now let's add login file message as well so i'll just copy it and i'll go down here and whenever we fail to login then we need to redirect it to login.psp to the same page so this is login.php so if login is failed we will redirect it to login.php and its class will be error and login failed or we can say username or password did not match and let's save it and we can go back to our login page and refresh it so i will try to login with random username and password and login so we have not displayed the login message so that's why we cannot see the login message here so let's go back to login page and let's display login message so after uh s1 tag here let's check whether a login message is set or not if is set dollar under school session login then we will display and onset so echo dollar underscore session login and we need to onset as well once you download underscore session login that's it and we also need to display the login message in our home page or index.php so i'll save it first and i will copy uh this message or i will copy from psp here ctrl c psp start php end and after uh this i will also add vr tag here let's save it and let's go back to index.php and where is our dashboard so after the dashboard let's paste our login message here and we need to indent it inside and let's add br before the message break tag br and after the message also i will add the br tag let's save it and let's go back and refresh our login page and here we can see the message refresh again and here let's add random username random password and login so here login username and password did not match let's align this message in the center as well so i'll go back and go to login.php and in our message so let's go to message so error message so this is the error message in red in login page so in error message uh this is error along with error i'll pass text as enter that's it let's save it let's refresh again and type user random username random password login now we can see the message in center and this is perfect let's reload now uh let's try to log in with correct username and password i think i have forgotten the correct username password so i will create a new admin so here i will add admin and uh you might be wondering that i can access the admin without login we have not as added authorization or access control yet so we can login it we can access to admin page after uh checking the login works or not i will add authorization as well so for now i'll create a admin and if you have also not remembered the admin then you can create the new admin as well so i will remove this admin and create another so i'll go to add admin and i will call it administrator i'll give its username as admin and i will also give the password as admin so my username and password is admin admin okay so i'll go and click on add admin so our admin is uh created so username is admin password is admin okay so i'll go to login i'll refresh again and here i'll give its username is admin and admin that's it and refresh my username or password did not match oh i forgot to mention that our uh password in database so if we look at the database in tvl admin our password is encrypted right and if we go back to our login page and if we see the password our login is not encrypted so here we need to encrypt our password as well and to encrypt we are using md5 okay md5 open uh a small bracket and close the small bracket and save it ctrl and s and let's go back let's refresh the login page and let's add our username admin password is also sorry admin and login now login is successful and we are directed to our homepage so let's refresh and login message is gone now we need to add a log out button as well so let's go back to our code view and let's open our parcels and let's open our menu.php and after the order we need to add logout button so logout menus i'll copy this last ally and paste it down here and i'll call it uh sorry l o g o u t log out and then uh what we need to do is we need to create logout.php file as well so let's create logout.psp let's save it and let's create the logout.psd file along with login let's create logout file so i'll create a new file i'll call it logout.php that's it and here what we will do is uh we will only add a query uh to destroy the session so we will like uh delete all the session because this login system is based on session so we will destroy the session and redirect it to our login page okay so destroy the session and to is redirect to login page okay so that's it so here what i will do is season underscore destroy so this will delete all the session that we have created in our page and then we need to redirect to login page so here for redirection what we'll use is sorry header and then location and here we need a site you site url and then we need to go inside admin and login dot php okay that's it and but we have not included site url or constraints.psp so we need to include constraints.php as well so include constraints.psp for url so here we'll include include we need to get out of this admin folder go to config co and fig slash constraints dot php that's it and semicolon here and let's save it and let's refresh the page and here we have our logout button so whenever i click on logout button it redirects us to login page okay so that's it we have successfully created login and logout system but we can still go back to any pages without login so we i have not logged in i have logged out but we can easily go back to any pages we want okay so and we do not want uh to happen like this we only uh will allow admin uh to access these pages once they log in so next thing we will do is we will work on authorization or access control so let's go back to our login.psp file so for now i'll close log out and i'll also close login or i'll close menu.psp and here in login page let's go to our code part here if in if section where login is success after login is success along with login message we need to create another session to check whether the user is logged in or not so i'll get dollar session and here i'll create a session called user and here i will save its username as a value okay so here we have already obtained username from loginform so i will save this username in our user session okay dollar username so that's it and it won't be on set like login so if we uh go back to index.psp here we have displayed the login message and we have onset but this value uh will not be onset this will remain as it is because we need to check whether user is logged in or not and this value will be on set only on log out okay so this user value these assistant value will be removed or onset you've with this session underscore display okay so i'll add comment here as well uh unseats dollar underscore session and user so this is industry will onset session underscore uh user session and it will log out our system okay so this is to check to check whether the user is logged in or not and and logger logout will unset it okay so that's it let's save it we have created the session but we need to check whether uh user is logged in or not and to check that we will use a simple code and we will add that code in menu.psp we we will add that code in menu.esphp because menu.php is applied in all of these pages like add admin page manage dash admin page etc okay so we can either add on menu.psp or we can add on constraints.plc where is our constraints.php so construct.psp is inside our here but we will not add constant.php because we need to use construct.php on login page as well so we will check the whether the user is uh logged in or not in main.php file okay so here i will create psp and here i will check check whether the user is logged sorry in our not and this is called authorization is it a authorization or access control i think we should create another file and let's include like our constant.php okay so that will be much better so i will minimize power sales and along with uh yes along with this menu let's create a login check login check um file and we can include it here so we are our menu so let's create a new file i will call it as login dash login check and dot psp and we have created that code a here in menu.php i will cut it and i will paste uh in paste in login check so login check is here so login check is inside our parcels okay so here we will check using if if is set dollar underscore session user uh this will check whether a user is set or not so this session is set only if login is success so if the login is success then only this user session is created or this login session is set and in login check this is login check page and here so instead of just checking it what we can do is we can add is not this is exclamation sign and this means is not if login is not set so this means if login is not set so let's add a comment if a user system is not set this means a user is not logged in if user is not logging what we will do is redirect to uh login page with message so let's create a session first so i'll click dollar underscore session and i'll call it as uh login message and it's not login message this is no login message no that's login message is equals to the script div and the iv div and here we'll add class class is equals to error and here what we will do is set a message called please login to access admin panel that's it and we will redirect to to login page so here i will add header and here we'll call it location and dot site url and admin slash login dot php that's it and you might be wondering i have not included a constant.php file here because this will be included inside menu.psp and menu.php file has already constrained.php okay so here we will include uh let's not create another php so i'll bring it down and i will add along with constraint.php i will include include what login dash cssck dot psp okay so that's it uh since uh login check is with menu inside parcels we do not need to get out of this folder so we can just call the file login check that php so if you have if you are confused then please let me know in the comment what i have done is i could have done like i could have uh created this code i could have created this code inside menu.php like this i could have written the code like this but instead of writing code inside menu.psp like this i just got this code and created a new file called login.psp and pasted it here and just included the login dash check the psg file okay so that's it uh if you are confused then please let me know in the comment i will try to make you understand in comment okay so let's check this functionality so before checking the functionality uh let's display this message as well so this message will be displayed in login.php file so let's go to uh let's display this message so i will just copy this session copy and let's go to login.php and at the top where our message is displayed here we need to check whether that session is set or not if uh it said dollar on discussion no login message then we will display the message display dollar underscore session no login that's message and we also onset dollar on discussion no login message okay so that's it let's save it let's go back to browser and i will close it and i will refresh the page and if i try to go inside admin dot psp like ctrl c and ctrl v here and if i try like index.php then it redirects us to a login page and also displays the message so let's display this message in center so i'll go back and go to login check and with error let's call it text center let's save it let's go back and let's refresh it message is gone so if i try to access like manage dash admin dot psp then it redirects us to login page and it also displays the message this means we have successfully added authorization or access control in our food order system okay so now let's login with our credential admin and password is admin and login now we can login successful so only after login is successful we can visit other pages but if we are not login then it will direct us to our login page so that's it guys we have successfully added authentication and authorization which is a login system and access control system in our food ordering website in the next episode we will work on category module in that we will be working with like operating image and managing all the categories like updating adding and deleting the categories so thanks so much for watching if you like this video then don't forget to like share and subscribe and i'll see you a new episode till then stay safe take care see you soon bye

Channel: Vijay Thapa

Views: 28,026

Keywords: vijay thapa, web development, programming courses, php, mysql, php project step by step, php projects for beginners, php for beginners, php and mysql full course, food order website, food ordering system, food order website with php, login system in php, access control in php, authentication with php, food ordering website php, web development full course, login with php mysql database, how to create a login system with php and mysql, learn php, php course

Id: bk_5SAH7Oyk

Length: 44min 24sec (2664 seconds)

Published: Tue Nov 17 2020