 Hello friends. Myself, yes, I'm going to be the instructor for this project. So friends, in this project, I'm going to teach you how to create an authentication system and how to insert the data in the database, how to extract the data from the database, and how to authenticate your data, giving data on the front-end interface with the back-end interface. So let's go through what I'm going to teach you. So friends, as you can see, this button, as you can see, localhost. Here's my admin, localhost. Wait a second. Here we'll write something, register. Okay. This will go. Database name is front-end back-end. Admin. Admin is a table name. Here, if I will give the username, ditto and password 1, 2, 3. Just leave it here. Ditto. Okay. Password 1, 2, 3. And click on login. It will redirect you to the main page where we are going to fetch the image and the username. This is the image. We have inserted into database and username. Okay. This way we have fetched the image and username. Now we will insert the data. Okay. The username, we will give you something around yesh. Password 1, 2, 3. Choose a file, something. I'll choose the same image. Okay. And register. The account has been registered successfully. Okay. And how, in this video, I'm going to teach you how if we are giving a wrong credential to the front-end, it will give a pop-up message that how it is a wrong inverted username or password. For example this. Okay. So you can see an inverted username and password. So these are all things we are going to teach you in this project. So, stay tuned for this project. Thank you. Hello, Jamers. Welcome to Technical Hoda. In this tutorial, I'm going to teach you how to create a front-end, back-end project. So friend, many people get confused on a topic that what is front-end back-end. I'll give you one example. Facebook. You have an interface on which you can give your email password. And if you will click on login, it will redirect you to the next page. So friend, Facebook is the page we designed, is the front-end. And the password where it gets stored is called database. Facebook has its own database. So in this way, they have created the front-end back-end system. So the software required for front-end back-end is Notepad++, Google Chrome, and VAM server. These three softwares are required for us. So I'll show you from where you can download. So friends, the name is download.senate.com from here. You can download the VAM server. Depending upon the PC requirement, you should download whether it is 64-bit or 32-bit. So Notepad++, you can use any good text reader. I'm using Notepad++. You can use any browser. I'm using Google Chrome. Friends, let's start the front-end back-end project. So friends, I'll divide this project into four parts. I'll make it sure that you will get it as soon as possible. So let's start friends. We'll see. No. We'll see. HTML. Okay. HTML. Now, the whole content of a page is between HTML tags and title. Whichever title you want to give, you can give it. I'll give it login. Okay. Now we'll design the body part. So friends, in the first part, I'll show you only the designing part of the login page. First, save it. Friends, make sure that you should save this project whenever you download VAM server. You should save this project in VAM64. The automatically created folder is VAM64. In that www folder and create a folder new folder and give it a name login front end back end. Just give the name index.php and save the file. Okay. Now you will see that the color of the text has been changed. So let's type the things now. Okay. Now we will create a new file and let's save this file going back. HREF CSS is the folder name style.css Okay. Background virtual city.jpg jpg is the image. I have this image. Okay. City image I am showing you the file location. Just copy this image and go to a www folder and front end, back end and just paste it. Okay. City.jpg Now division id list main wrapper. Then let's create a form method. This is for database loading thing. method. dnc type What type of data you are expecting? What type of data you are expecting? What type of data you are expecting? Accepting multi part slash form data slash form dab line Okay. style color color means the text inside that table will be white. Okay. And with all the table I will give you something around 365 px position relative. From top I wanted to do something around center 200 px border border style list style position I am doing this just because to save time if you are creating more and more things so that the time will be less required for your project and you can create as soon as possible fast left from life 50 these are the standard dimensions I am giving respectable for table background color hash 1d 224 standard color I will show you I will give you a link from where you can get color codes the link should be given into the description of the video okay from center I am just at center h3 center okay just give it here okay slash okay okay we have created the first row and now second row center in this section email or username username now give input text input tag type is text name placeholder type username username these names we are using for the database section php coding similarly copy this similarly copy this and give it the name so here we will create a row str td slash td here we will write type is password password and here one center tag input type is equal to sub submit type button name sign in value login login value will be displayed as a button background color hash 42729b okay semicolon white this is the text color in the button something around 100 pixels chight height 40 pixel position relative something around 5 pixels this is this much is enough okay slash cen okay this is for the login button now we will create the register button td slash td center tag we used input type is button name we will give here registration register simple name value register okay now we will come on the styling part style equals to background color okay hash e d e 613 okay colon color same as we had a login button white with 150 pixels chight height 40 pixels position relative 5 pixels now we will just put the height for this table height something around 200 pixels these are all standard things which I have given here control s and now we will open our browser we have started localhost frontend backend okay this is the final output okay of this video we will type some username yeah it's typing up password it is in encrypted form as you can see so let's see the next video thank you dammers welcome to technicalhood so friends in last video we started the frontend project and we have completed up to the login page in this video I am going to start with how to connect the database connectivity part and how to create a register page okay so let's start the project so friends first we will start our VAM server yeah it is green now we can start open your notepad so here where we last time so friends open a new file and now I will write the database connectivity code in PHP format here we are using mysqli database download con equals to mysqli underscore connect okay so localhost host localhost see friends when I am starting google chrome let's say yeah when I am typing localhost only localhost clicking enter so this type of page will come click on phpmyadmin just type it root so friends there is no password for this localhost server so click on go so now this type of page will get open so here should create a new database okay write any name of database I will write something front end end okay and click on create database get created okay table name here we will require only one table so write admin we will require username password and picture of the user so here we will require three columns okay click on go yeah username here I will give it as text okay password text and image img okay and click on create let's add one more column serial number form let it give integer value up to 10 and it is auto-intimented primary key yeah and click on save okay the table has been created you can browse the table so at this stage there is no data entered in the table so let's go and to the code so $con mysqli li let's go connect localhost and here in this section we will write the username of our database root comma password section is not given so we will not write the password die if database is unable to connect we use this type of sentence sentence unable to connect okay now mysqli underscore select underscore db here the variable name $con comma now here in this section we will write the database name so what is the database name frontend backend end create a new folder type in database in that folder config.php okay and click on save so in this way this is the code of connecting the database with our frontend so friends now go here and just click here okay enter php require now you have stored backend database in database folder config file now just give the path database slash config.php okay in this way you connect yourself with the database okay now we will do something for register page okay create a new file just select the login index page Ctrl A, Ctrl C and paste it here and save this page register dot php okay save it just give it here register register username password we don't require sign in button so cut it here from here okay here we will require a submit type of button submit okay one more row we will require in which we will upload the image td center td image slash now td is equals to this is an image file so the type we have given is here file not a text okay name for that we will change the image name let's download one image from google background images yep this is perfect this is perfect save this image in that folder on front end back end and now just see what happens localhost for a time we don't require this this whole Ctrl S wait a second front end back end register yep here is a register button here is a file to be chosen okay now coming on to the part of connectivity how to create a login okay so one sec here is some space and this in this way and now we will code for this login button okay start php coding login okay one sec here is some space and this in this way and now we will code for this login button start php coding php if set $ underscore post there are two types of method post and get post means we are sending a request we are responding to some and get means we are requesting the database for some data so this other difference there is a two method post request there are three three methods post request and get is for request method post is to redirect something okay now this name sign will be here I have told in last video that we are going to use this names sign $ user name is equals to $ as I said when we are creating the form tag here form method post we are taking input from the user okay and what input you are taking username of this in text is username just scroll here and type it username $ password password $ underscore post SSWRD similar now here we are going to start a query $ query one equals to select from data from the database what is the database name here we are given database name database name table name is select star form admin where table name is admin where username equals to $ single quotes $ username this name you have to put it here password equals to $ SSWRD $ run we have to run this query query one equals to mysq align underscore query so what is the variable name that we are given to this database $ $ comma $ query one okay similar if now if mysq align underscore num underscore rose query one is greater than zero here after when we start this query the query will check our table if it found the row if it found a row so if it is greater than zero then header location main page.php okay yeah now else echo now we will want to give a pop-up message to the user that if it is an invalid password s-c-r-i-p-t script invalid username password okay with this we have completed our signup button part here for registration button we will give a link the register page which we have created it will redirect you to register page register.php okay go here save it open index page localhost front-end index okay what it gives error very 44th line unexpected run 3d here we are done mistake mysqli s now refresh the page mysqli connect line second in which database connectivity so there is problem in database connectivity let's do it mysqli oh he is not s that's missing separate here s now refresh it okay now we will go to database section admin structure let's insert some data okay value admin password 1 2 3 image duty.jpg let's give anything go yeah username is admin password is 1 2 3 okay let's create a new page here we have given a location main page.php so when we login by clicking the login button we will redirect it to the main page.php so let's save this page as main page.php okay main page.php save it okay now let's type the username admin 1 2 3 as okay as mentioned in the database if this all things match then this will redirect you to the main page okay see the main page here you can see in the url localhost frontend main page.php okay going back if I give a wrong password it should show me a popup yeah valid username and password so friends thank you for watching the part 2 of the frontend backend if you like please like by clicking like comment please do subscribe my channel and please hit the bell icon thank you hello friends welcome to technical hooda so friends as we study in last video we have created a connected to the database and we have put it the login button so now we have to code the register button using php so let's move on to the project okay here we will require to copy this database connectivity file copy paste it here now section okay now what are the things you have to register username password image so let's do php coding php okay if set dollar if set means if anyone click on this register button okay post what is the name of register button register okay dollar username equals to dollar underscore post so now here user what name we have given here username username dollar password equals to dollar underscore post password okay now dollar underscore img is equals to dollar underscore if i this is a file type files okay what is the name image img1 and now just give it to temporary name as name okay dollar term underscore name is equals to dollar dollar f file img1 whatever images we are storing the database is stored into a particular folder okay tmp underscore name okay now what is the file path dollar file path equals to admin slash dollar img dollar img move upload file upload it to file to dollar m underscore name comma dollar file path okay now here we will start to insert into admin here we will write username password image what is the name we have given in database columns username password img img okay here we will give dollar username comma dollar password dollar img okay just take it into more single inverted codes okay there is a query dollar run query true okay my sqli underscore query our query database variable dollar con dollar query our query true okay here we have done with a part if when we get registered it will give a pop up message that we have registered okay run query query true query true okay just put it here dollar run okay run okay when the query gets run we will get a message echo c-r-i-p-t script upload cc count let's be register save it and let's open the register page let's give it any name drto password first of all wait a second create one folder www front and back end what code you have written it where you are doing it admin just create new folder admin now put any image I am going to put this okay let's click on register yeah the count has been registered okay now let's see the database the new entry that is my admin 123 okay let's refresh it so you can see that the new entry has arrived in the database automatically this is the register page so friends thank you for watching the part 3 video of front and back end project if you like please like and comment on this project please do subscribe my channel and please hit the bell icon thank you hello guys welcome to technical hoda this is the fourth part of our project front and back end so guys in previous videos we have gone through something around how to create a front end we have created the front end and we have connected the login page with the database, registration page with the database and in this video I am going to tell you how to extract the data from the database and put the data into the front end just like for example if you will see facebook when we authenticate with facebook with our email id and password it redirects us to the profile page so it extracts the data from the database our profile it extracts from the database, facebook database okay let's start so we will just go through this we will copy this part from here copy and paste it here just type here something like this we have to create a session so dollar dollar underscore essi when session is equals to session user name equals to dollar user name comma this type here see this is our session underscore stop function and we also type se ion session underscore okay now go on to the body part yep now friends our session got started we have linked the database with our main page now we have to go we have to just put an if condition here we will put an if condition if dollar underscore se ion session user name then echo welcome now in else part we will write if it is not set then echo just put it here some space here dollar where is it? it's not set and echo session user name okay this part we have linked now we have to fetch the data here we have to write if there is no need of this we can write here also we will put one query dollar query one three is equals to select char from what is our database let me see go through our database let me start yes and our browser local host vam server phpmyadmin it's taking some time so here we are front and back end what is our table name? admin select star from admin where user name is equals to one sec dollar user name is equals to dollar underscore session user name okay so the user name which has logged in is stored in this variable and this variable will be using in the query okay so dollar user name and just put dollar run query one three is equals to mysqli li dollar query dollar query okay as we have done in this previous thing we have just run the query in this way same manner we will run in this and now dollar row query query mysqli underscore dollar row data is equals to mysqli underscore fetch array dollar run query one three okay and semicolon okay now dollar user name is equals to dollar user name is equals to um dollar row data name okay dollar image is equals to dollar row data img as we will see so what information we want is we go in admin we want user name and image we will just extract user name and image just for an example okay now div just take a table tab le table tab le table tr slash tr td slash td okay just put dollar img td dollar user name okay and we will save this okay now save this let's see what happens localhost end back type it here admin password one two three put login here is one error we got in 26 line echo 26 line echo okay yeah here we are not dole save and just refresh it 32 line 32 line okay echo here and dole s okay okay problem in session we will just go for this and copy this and just close this dole x control v save it so friends we have done somewhere mistake and yeah here is spelling mistake of session control s and let's with index page localhost index page we will give you ditto and username ditto and password one two three okay dito ditto password one two three okay one two three and just login okay in the image we are not getting here properly wait a second yeah wait a second img src equals to just go to the folder front and back end admin in admin folder you have okay so type admin slash dole img just put it here control s and again load it here localhost front and back end index dito one two three yeah so here you can see my image here my username here just we will give you some specified thing td slash td okay image image slash tr okay tr so yeah here was one tr td slash td and here username okay control s and now we will see it again okay close the session localhost dito password one two three login okay image is this username is dito so this for the front end this is all for the front end back end project friends and we have completed our project on front end back end so friends thank you for watching this video please do subscribe my channel technical hoda and please hit the bell icon for the latest updates of the video thank you for watching friends