[PHP/HTML/SQL] How to make a basic login and register script

[HappyFace01010]

How to make a basic login and register script​

Introduction
Seeing as this section is dead, I'm going to try revive this. I'm not a professional but I can do most basic - medium PHP scripting so please don't rage at me if there is a mistake . I know quite a few coding languages personally such as PHP, HTML, AJAX, JAVA, PAWN (Probably most fluent) and some C#. Hopefully these guides will encourage some people to start coding because it can be useful and fun when you are bored . For this tutorial, we need phpMyAdmin for the MySQL database. If you are going to do this on your computer, download Wamp Server because it is one of the most useful debugging programs that you can get for windows for websites etc. All codes will be uploaded at My website. I am going to be doing all of the web coding in Notepad so you don't need to download any additional software. This guide will show you how to make a page that you can only access once registered. My future guides will add onto this guide. There will be some HTML but only a few lines per page.

Functions
This is the section where I will be posting all the coding functions that will be used in the tutorial. In this tutorial, there is heaps of them and they will be just a brief comment on what they do. For more information visit w3schools.

• Title tags - <title></title> - Setting a title
• Heading tags - <h1></h1> - Making a heading
• PHP tags - <?php ?> - Allows you to use PHP
• New Paragraph - <p> - Makes a paragraph space
• New break - <br> - Makes a new break space
• Linking - <a></a> - Makes a link
• Form tags - <form></form> - Making a new form
• Input tags - <input> - Making a input box such as a text box
• MySQL Connect function - mysql_connect() - Connect to a MySQL server
• MySQL select DB function - mysql_select_db() - Selects a MySQL DB
• Variables - $var - Makes a PHP variable
• Post variable - $_POST[''] - Gets a post result from the previous page
• IF statement - if() - Checks if a statement is true
• Else statment - else - Used if the IF statement is false
• Echoing - echo "" - Echo any text from PHP to HTML
• Commenting - // - Make a comment in PHP
• Number of MySQL rows - mysql_num_rows - Checks how many rows are in the returned result
• MySQL Quering - mysql_query() - Queries the MySQL server
• Session cookies - $_SESSION[''] - Makes a session cookie
• Starting a session - session_start() - Starts a session

The First Step
The first step is going to be setting WAMP up (Skip this step if you are using a Webserver). Visit the Wamp Server Website. There is no pictures needed for this because all you do is press install and install the wamp server to your hard drive. Make sure that your firewall isn't blocking it or any other program like Comodo. After it has installed and you have run WAMPserver, make sure you left click and click on the option 'Put online'.

The Second Step
This is where it starts to get fun. We now need to set up the database in PhpMyAdmin which is our MySQL database manager. Visit http://localhost/phpmyadmin/ or your web phpmyadmin if you are using a external host. If localhost doesn't work, restart your computer and make sure that your host file isn't making it go somewhere else (PM me for help). Now, we need to firstly create a database. Find the box named "MySQL localhost" with the Create new database in it. Make a database called "My First Database".



Now that we have created the new database, we must create a table. A table is where the information is saved into rows and columns, just like in Microsoft Excel. We are going to make a new table called userdata (case sensitive) with 3 fields.



We now are going to chose what the fields do. There is a few things that you should know before I continue. A INTeger is any value that is going to be all numbers, no dots or any alphabetic characters. A VARCHAR is a variable with characters such as alphabetic characters, dots or any other characters you can think of. Now to make the table, we need to fill in the fields. Here is a quick outline on what the fields each do:

1. Field - The name of the field variable.
2. Type - The type of the field (Numeric or alpha + Numeric).
3. Length / Values - The amount of characters allowed in that field.
4. Defult - The defult for that field, normally just leave as none.
5. Collation - It's pretty much like a font so you can use other languages characters.
6. Attributes - Not fully sure what it is used for but it won't be needed at a basic level.
7. Null - If you want the field to have no value.
8. Index - I never use it
9. A_I - It stands for Auto Increment which Automatically gives the field a value according to the previous entry
10. Comments - Comments on the field

Below is the information on what each field should be and below it a image if you get confused. I am only going to be using Int's and Varchar's even though it's better to use the other ones, I'm trying to go as basic as possible. All of the following must be case sensitive.

1. username - VARCHAR - 50 - Leave the rest of it.
2. uid - INT - 5 - Tick A_I - Leave the rest of it.
3. pasword - VARCHAR - 50 - Leave the rest of it.

The Third Step (index.php)
The first page of any site is called the index. We are making this index in PHP hence the index.php. It's now time to start coding in notepad. If you don't have notepad, there is a serious issue and just open anything that can save a document. Firstly we are going to save a black file just to show you how we save a .php file. Open a black notepad document and press Ctrl S or just go File -> Save As. We need to change the option from saving it from a text file to all files. You are going to save it in your Wamp WWW folder located on your main drive -> Wamp -> WWW and make a new folder called firstproject. Save the black file in this location. Make sure that it looks the same as the image below.



Now to get onto the coding! Firstly we must put the PHP tags onto the document so the webserver recognizes it as PHP.

<?php

?>

Now that we have the PHP tags on we can start adding functions into them. We are going to start with making a page title in HTML. We could have done this outside on the PHP tags but all we need to do to use HTML inside PHP tags is with the function echo. We will also make a heading while we are at it. You also can find more information about basic HTML tags in Suf's sticky in this section. We are going to use <title> for creating a title tags, <h1> tags for creating a heading and a comment tag //COMMENT. You must almost always close a HTML tag. Another fact is you must always put a semi colon ';' after any php functions. You will also have to use opening and closing Parentheses on most functions '(' and ')'. For using multiple lines in a echo, you cannot just press enter for a new line, you must either use <br> (Break), '\n' or <p> (New Paragraph).

<?php
//COMMENT
echo "<title>Index Page</title>"; 
echo "<h1>The Index Page</h1>"; 
?>

You must close almost all tags with the opening tag with a slash in front. Now for the next part, we are going to add two links, login and register. Links are made using the HTML function <a>. We are also going to test out paragraph and line breaks (<p> and <br>).

<?php
//COMMENT
echo "<title>Index Page</title>"; 
echo "<h1>The Index Page</h1>"; 
echo "<p>";
echo "<a href='login.php'>Login Page</a>";
echo "<br>";
echo "<a href='register.php'>Register Page</a>";
?>

Now that we have finished this page we can save it and move onto the next one. This page could have been done fully in HTML without any need of echo functions like this:

<title>Index Page</title>
<h1>The Index Page</h1>
<p>
<a href='login.php'>Login Page</a>
<br>
<a href='register.php'>Register Page</a>

The pages end result should look something like this image:



The Fourth Step (register.php / finished.php / login.php)
This is where we are actually starting to use some PHP functions! We are making the page register.php, finished.php and login.php because they are all similar pages. Both register.php and login.php redirects to finished.php after the submit button is clicked. Both login and register will be using MySQL functions in PHP and the HTML form functions. I will make a tutorial on how to make the register and login one page only instead of using the finished.php with Java later on. This can also be done with just HTML without the tags. Make sure you make a new page and follow the same steps as what you did for the index page (saving it as a php in the right folder). We are going to start with, the register page with HTML forms and boxes.

<?php
echo "<title>Register Here!</title>"; //Page title
echo "<h1>Register Page</h1>"; //Heading
echo "<form action='finished.php' method='post'>"; 
echo "Username: <input type='text' name='usrnme' /><br>";  //Username box
echo "Password: <input type='password' name='pwd' />  <br>"; //Password box
echo "<input type='hidden' name='registerform' value='1'>"; //Hidden Field.
echo "<input type='submit' value='submit'>"; //Submit button.
echo "</form>"; 
?>

In the HTML form function the action variable is for what file you want it to submit to which is finished.php. We are using the post method because it's faster and better for more than one data submission. The Post method is also better than the get method because it doesn't come up with a bunch of variables in your browser and it's invisible. For the input boxes, it is dfiferent to most tags because it doesn't use a closing tag, it just uses '/' at the end of the tag instead. The / isn't actually needed, it will work without it but it creates bad habits and is bad syntax. The <br> tag should be <br /> as well. There are multiple types of boxes but we have used password text, hidden and submit. The password is obviously for the password box and the text is for the username. The name attributes are going to be used later to retrieve the values. We are using the hidden field so that we can show the finished.php that it's the register page and not the login page because they both do different things. Last but not least there must always be a submit button / some sort of button inside the form if you are going to redirect it to another page. The register page should look something like this:



Now that we have finished the register page we can move onto the login page. It's exactly the same as the register page besides the change value of the hidden field. Make sure you create a new file named login.php etc. This page can also just be HTML but it doesn't really matter.

<?php
echo "<title>Login Here!</title>"; //Page title
echo "<h1>Login Page</h1>"; //Heading
echo "<form action='finished.php' method='post'>"; 
echo "Username: <input type='text' name='usrnme' /><br>";  //Username box
echo "Password: <input type='password' name='pwd' />  <br>"; //Password box
echo "<input type='hidden' name='registerform' value='0'>"; //Hidden Field.
echo "<input type='submit' value='submit'>"; //Submit button.
echo "</form>"; 
?>

The login page should look like this:



We can now get onto the main PHP page which is finished.php. This is the page that queries to the database and either returns errors or allows you to register / login. This is probably the most confusing part so make sure you read it closely on what to do.

<?php
mysql_connect("[B]loaclhos[/B]t", "[B]root[/B]", ""); // Server connection
mysql_select_db("[B]myfirstdatabase[/B]"); // Database selection
?>

We first needed to connect and select the database that we are going to pull from. The table isn't selected until we get into the queries. Your login information will be different if you are using a external host but you can modify it if you are.

<?php
mysql_connect("[B]loaclhost[/B]", "[B]root[/B]", ""); // Server connection
mysql_select_db("[B]myfirstdatabase[/B]"); // Database selection
$page = $_POST['registerform']; // Setting the page value
$user = $_POST['usrnme']; // Setting the user value
$pass = $_POST['pwd']; // Setting the pass value

if($page == 1)
{
    //This means that the page is the register form so the register form code goes here
}

if($page == 0)
{
    //This means that the page is the login form so the register form code goes here
}
?>

This part adds variables and saves the posted variables from the other page into them. Variables always have a dollar sign in front of them ('$'). The variables are set by using one equals sign ('=') in between the variable being set and what the variable is being set to. This section also uses the if() statement to check which page it was posted from. The if statement checks if the statement was right by using two equals signs ('=='). The variables are being set using the post method (was set on the previous page). The post variables are similar to functions and variables. They use a dollar sign with a '_' as well as using brackets '[' and ']' with values in them. To make a line of code apply to more than one line we need some curly brackets '{' for opening and '}' for closing.

Now that we have finished with that, we can not make the queries to the database. The register will save into the database and the login will query the database to see if the information submitted was real. We also have to start the session cookies to make sure it knows that we are logged in (more explained later).

<?php
session_start();
mysql_connect("localhost", "root", ""); // Server connection
mysql_select_db("myfirstdatabase"); // Database selection
$page = $_POST['registerform']; // Setting the page value
$user = $_POST['usrnme']; // Setting the user value
$pass = $_POST['pwd']; // Setting the pass value

if($page == 1)
{
    //This means that the page is the register form so the register form code goes here
    $query = mysql_query("select * FROM userdata WHERE username = '$user'"); // Queries the Database to check if the user already exists
    if(mysql_num_rows($query) !== 0) // Checks if there is any rows with that user
    {
        echo "THIS USER IS ALREADY TAKEN!"; // Stops there 
    }
    else
    {
        mysql_query("INSERT INTO userdata (username, password) VALUES('$user', '$pass')"); // Inserts into the database.
        echo "REGISTERED! <BR> <a href='login.php'>Go to the login page</a>"; //Link and text to go to the login
    }    
}

if($page == 0)
{
    //This means that the page is the login form so the register form code goes here
    $query = mysql_query("SELECT username FROM userdata WHERE username = '$user'"); // Queries the Database to check if the user doesn't exist
    if(mysql_num_rows($query) == 0) // Checks if there is any rows with that user
    {
        echo "User doesn't exist"; // Stops there 
    }
    $query = mysql_query("SELECT username FROM userdata WHERE username = '$user' AND password = '$pass'");
    if(mysql_num_rows($query) !== 0) // Checks if there is any rows with that user and pass
    {
        echo "LOGGED IN! <BR> <a href='logged.php'>Go to the logged in</a>"; //Link and text to go to the login
        $_SESSION['LOGGEDIN'] = 1;
    }
    
}
?>

The else statement is used to show the opposite of the result of the IF statement. So lets say if I did if(1==1) and used else, it wouldn't return anything in else because it only runs if the IF is false. MySQL query is the default way to query the SQL database. The SQL query selects from the database where it can find the username and it uses the mysql_num_rows function to check how many rows the user is found on. The syntax for selecting a row in the database is

mysql_query(SELECT column_name FROM table_name WHERE column_name = VALUE);

The amount of rows can never be more than one because it wouldn't allow it in the database. The insert into query inserts the information into the database that can be used for later. The INSERT into statment has a layout like this

mysql_query(INSERT INTO table_name (column1, column2, column3...)
VALUES (value1, value2, value3....));

Lastly, it uses the session cookies to tell the site that it is logged in. This can easily be faked but it's not a biggie at this level. These session cookies are like $_post but you set the value of them. If you wanted to be safe, you would make it store the user and pass and check it every member page that you went on, or you could just encrypt them.

Last step (Logged.php)
The last step is logged.php which is just a page that says you are logged in and in the members area. Make sure you create a new file etc.

<?php
session_start(); // Starting session cookies
if($_SESSION['LOGGEDIN'] == 1)  //Checking if they have the session cookie
{
    echo "<title>Members area</title>";
    // Has session cookie
    echo "Welcome to the members area! <br> The secret message is LOLFISH!";

}

else
{
    echo "<title>Error!</title>";
    //Doesn't have session cookie
    echo "YOU ARE NOT LOGGED IN!";
}
?>

Most of that is self explanatory, just using a if statement to check if the session cookie is set. You can add pretty much anything on that page. Make sure you look out for my next guide on how to add more functions to a website. Here is what the page should look like when you are finally logged in:



Conclusion
This is my first scripting tutorial and it is pretty bad. I learn from my mistakes so can you please post what needs improving or anything you don't understand so I can help you. It actually took me quite a few hours to compile this whole thread together so sorry if it got a bit shitty near the end. You can always add me on MSN if you have any questions about anything (In signature).

~HappyFace01010