PHP+MYSQL: HOW TO CREATE USER LOGIN
In the last post we had seen, how to install XAMPP and how to enable the services offered by it. In today's post we will see how to exactly develop and use the functionality offered by it.
So today, we will see how to develop a simple form of user login and password in html, style it using css and then connect it to database using MySQL+PHP.
There are main 3 tasks here:
1.To create a html form.
2.To create a database.
3.To connect the form and Database.
If you have not installed XAMPP server, i strongly recommend you do it as soon as possible, for that you may refer to this site :http://tinkerbellwithtools.blogspot.in/2017/08/xamppthe-complete-guide-for.html It will guide you and help you remove many errors that you might face.
We also need to validate our form, but let's keep that section for another day.Today we will only concentrate on creating a form and connecting to database.
The 1st TASK: Creation of form in html
We need our form to be very simple, with three basic utilities, "username", "password" and a "submit" or "register" button.
Step1. Open up a text editor like notepad or notepad++. I myself prefer notepad++, as it helps to document your code efficiently.
Step 2.Write your html code. Save it with the extension .html.
Step 3.Open the saved .html file in your browser.
Step2.//code explained:
This is the basic code for coding a html login form :
The basic html tag is opened up for indicating that whatever document is coded is, html code. In the body we open the <form> tag. This will enable the browser to know that a form is created.
The 2 needed fields : USERNAME and PASSWORD are coded using basic label and text elements.
A register button is added, for the final click,
For the USERNAME and PASSWORD to be aligned right under each other, but leave some space for ensuring neatness, we have used the PRE tag. Html by itself, doesnt take into account the effect of the return carriage( ENTER) key, for that we need to use the PRE tag. All the data enclosed in the PRE tag, takes into consideration the effect of the ENTER key.
In here, we have added no style element, thereby a simple form is coded.
The ouptput would be:
This is the code that follows:
Here we have just added some styling elements, in detail to know how to use them, we shall see in other posts.
When we create a basic form, it gives no feel to the website.On adding the correct styling elements we can style it and present the website in a fashionable manner.
Once styled, the simple form looks something like this:
SO our main task 1 is completed. Now we move on to the second part of it,ie
It is extremely important that you have your XAMPP server installed and all the services enabled, with no errors in it. For that please refer the site mentioned at the beginning of the post.
Assuming you have the XAMPP installed and running, we will proceed.
Step 1: Open XAMPP Control Panel. START the MySQL service.
Step 2: Open your browser. In the address bar type "localhost"., if you have modified the XAMPP to run on a different port, then type "localhost:xyz" where xyz is the modified port number,
I have modified my localhost to run on port 8080, so i will type "localhost:8080".It should direct you to the database functionality page. Click on phpMyAdmin on the top extreme right corner.
Step 3:A databse functionality page has opened up.
Step 4: Click on the NEW option that you see in the leftmost column.It will take you to another page, where it will ask you to create a Database, give a specificed name, like says CONNECT.
Step 5:Now create a table by providing a table name, "FORM", and specify the number of columns, we will need two columns, user and password. So we will specify the number as "2". If required you may add, or delete a column later on. Click on "GO".
Step 6: Here now I realise the need for having an auto-incremented sequence number. Which i take as "id". So i add a column by clicking on Add column --> Go which is at the top of the panel.
Now i add attributes and their data types, to create a rough skeleton for my DataBase.
Step 7:Once you click save it will redirect you to the next page, where a sql Structure would be shown to you.For our skeleton, the structure would be as follows:
Step 8: Now add the values in the database. Click on Insert in the menu bar. A new page will open up. Insert the username and password and click Go.
Step 9: No click on Browse in the menu bar. If you have successfully entered data in the database, it will show one entry as follows.
With this we complete our second main task, And move on to third task of connecting this Database and our html form using php code.
Step 3: Once you code in php, modify the html form.
Change the <form> in your html code to <form action= "Login.php" method="POST"> . And save it with the extension .php.
Step 4: Now save both the files, form.php and login.php in XAMPP/htdocs folder. If you don't save the files in htdocs folder of XAMPP, your php code wont run.
Step 5: Now run the file in the browser address bar as : localhost:8080/ABC.php
(I have saved my file in html as ABC.php) Provide the same username and password that you had provided in Step 8 of main task 2. ie the username and password that you had inserted as column values in the Insert section of the phpMyAdmin's MySql service.
Step 6: If you enter the correct the username and password, you would be redirected to a screen which says "LOGIN SUCCESsFUL, WELCOME USER" . You can change the display message as you wish.
With this we have completed creating a working Login form, by using html,php and Mysql provided by the XAMPP server.
If you have any doubts, please comment in the comment section, I will get back to them as and when possible.
So today, we will see how to develop a simple form of user login and password in html, style it using css and then connect it to database using MySQL+PHP.
There are main 3 tasks here:
1.To create a html form.
2.To create a database.
3.To connect the form and Database.
To create html form:
For the 1. task you can use any simple editor.That is the beauty of html,its simplicity. For creation of database we will use MySql, you can use any database like apache etc. But for our convenience we will use MySql service provided by XAMPP.If you have not installed XAMPP server, i strongly recommend you do it as soon as possible, for that you may refer to this site :http://tinkerbellwithtools.blogspot.in/2017/08/xamppthe-complete-guide-for.html It will guide you and help you remove many errors that you might face.
We also need to validate our form, but let's keep that section for another day.Today we will only concentrate on creating a form and connecting to database.
The 1st TASK: Creation of form in html
We need our form to be very simple, with three basic utilities, "username", "password" and a "submit" or "register" button.
Step1. Open up a text editor like notepad or notepad++. I myself prefer notepad++, as it helps to document your code efficiently.
Step 2.Write your html code. Save it with the extension .html.
Step 3.Open the saved .html file in your browser.
Step2.//code explained:
This is the basic code for coding a html login form :
The basic html tag is opened up for indicating that whatever document is coded is, html code. In the body we open the <form> tag. This will enable the browser to know that a form is created.
The 2 needed fields : USERNAME and PASSWORD are coded using basic label and text elements.
A register button is added, for the final click,
For the USERNAME and PASSWORD to be aligned right under each other, but leave some space for ensuring neatness, we have used the PRE tag. Html by itself, doesnt take into account the effect of the return carriage( ENTER) key, for that we need to use the PRE tag. All the data enclosed in the PRE tag, takes into consideration the effect of the ENTER key.
In here, we have added no style element, thereby a simple form is coded.
The ouptput would be:
To add style to it:
This is the code that follows:
Here we have just added some styling elements, in detail to know how to use them, we shall see in other posts.
When we create a basic form, it gives no feel to the website.On adding the correct styling elements we can style it and present the website in a fashionable manner.
Once styled, the simple form looks something like this:
SO our main task 1 is completed. Now we move on to the second part of it,ie
Create a database in MySql using XAMPP server.
It is extremely important that you have your XAMPP server installed and all the services enabled, with no errors in it. For that please refer the site mentioned at the beginning of the post.
Assuming you have the XAMPP installed and running, we will proceed.
Step 1: Open XAMPP Control Panel. START the MySQL service.
Step 2: Open your browser. In the address bar type "localhost"., if you have modified the XAMPP to run on a different port, then type "localhost:xyz" where xyz is the modified port number,
I have modified my localhost to run on port 8080, so i will type "localhost:8080".It should direct you to the database functionality page. Click on phpMyAdmin on the top extreme right corner.
Step 3:A databse functionality page has opened up.
Step 4: Click on the NEW option that you see in the leftmost column.It will take you to another page, where it will ask you to create a Database, give a specificed name, like says CONNECT.
Step 5:Now create a table by providing a table name, "FORM", and specify the number of columns, we will need two columns, user and password. So we will specify the number as "2". If required you may add, or delete a column later on. Click on "GO".
Step 6: Here now I realise the need for having an auto-incremented sequence number. Which i take as "id". So i add a column by clicking on Add column --> Go which is at the top of the panel.
Now i add attributes and their data types, to create a rough skeleton for my DataBase.
Step 7:Once you click save it will redirect you to the next page, where a sql Structure would be shown to you.For our skeleton, the structure would be as follows:
Step 8: Now add the values in the database. Click on Insert in the menu bar. A new page will open up. Insert the username and password and click Go.
Step 9: No click on Browse in the menu bar. If you have successfully entered data in the database, it will show one entry as follows.
With this we complete our second main task, And move on to third task of connecting this Database and our html form using php code.
To connect using PHP
Step 1: Open any notepad editor. Write the code, Save it with .php extension, like suppose "login.php".
Step 2: Code for connecting.//
Step 3: Once you code in php, modify the html form.
Change the <form> in your html code to <form action= "Login.php" method="POST"> . And save it with the extension .php.
Step 4: Now save both the files, form.php and login.php in XAMPP/htdocs folder. If you don't save the files in htdocs folder of XAMPP, your php code wont run.
Step 5: Now run the file in the browser address bar as : localhost:8080/ABC.php
(I have saved my file in html as ABC.php) Provide the same username and password that you had provided in Step 8 of main task 2. ie the username and password that you had inserted as column values in the Insert section of the phpMyAdmin's MySql service.
Step 6: If you enter the correct the username and password, you would be redirected to a screen which says "LOGIN SUCCESsFUL, WELCOME USER" . You can change the display message as you wish.
If you have any doubts, please comment in the comment section, I will get back to them as and when possible.
Comments
Post a Comment