Create an online booking system (login/registration) Purchase the full package of GCSE/A Level resources at www.teachingcomputing.com *contributed by Joss Bleach HTML/PHP/SQL Creating an online (web based) login system Users can register their details Storage in a SQL database Coding in PHP Login using the same registration details – display Welcome page.
Want to be the next Mark Zuckerberg? Well, you may want to start by learning HTML, JavaScript and most importantly PHP. (the TeachingComputing series has tutorials that teach you the fundametnals) and w3schools.com is also very useful) Watch the video on the right to see what you will be creating in this session: Exciting!
The first steps in creating a Facebook type app 1. A user enters registration information such as Name, Last name and Password. 2. This information is stored in a database and retrieved when a user logs in. And that’s what you are going to do. 1. Create a Registration Screen. 2. Store this data 3. Let users log in!
Steps involved in creating this system Set Up Purchase free web space (www.000webhost.com). Create a MySQL Database, storing the user’s details. Coding Create a registration form using PHP and HTML. Connect to the MySQL Database and manipulate it using PHP’s MySQL commands. Create a log in form using PHP and HTML. Respond to the user’s inputs correctly, either displaying their subject choices or an incorrect log in page.
HTML 5 HTML 5 a Hyper Text Markup Language used for structuring and presenting content for the World Wide Web. It uses markers such as <head>, <h1>, <audio> and <video> to display content.
PHP PHP is a server-side scripting language designed for web development. It is usually mixed with HTML using the PHP tags: *contributed by Joss Bleach
Set up: Task 1 For this tutorial you’ll have to purchase free web space that supports PHP and MySQL use. We have used www.000webhost.com in this tutorial. Visit the website and follow the steps to create a website. Once you’ve activated your account via email, you must click “refresh status” once logged in until the status changes from building to active. If you haven’t registered a domain name, decide what you want to call your website and write it here.
Set up: Task 1 This is what we are calling our site – decide on something equally interesting or do it exactly as shown to be on the safe side!
Set up: Task 2 Once you’ve created your website and logged in on the www.000webhost.com website, locate the cPanel and from there MySQL (in the software/services box). We’re going to create a database in here. Call your database subject, your MySQL username root and set your MySQL password to tutorial1. Once you’re finished, click Create database. This will bring you to another page that will allow you to go back to the cPanel. Once there, locate phpMyAdmin (in the software/services box).
Set up: Task 3 Once you’ve located phpMyAdmin and opened it, create a table called userdata with 8 fields. Copy the information below into your database. Once you’ve finished, click save. phpMyAdmin is a GUI for MySQL, making it easier to create databases (MySQL is usually a command line interface).
Coding Task 1 Declaring variables assigned to the values of the host name, MySQL username, MySQL password and Database name. Open up Dreamweaver and create a PHP file called index.php. We’re going to begin our document by declaring the variables needed for database connection later. Copy in the code below: This section of code simply houses variables assigned to the values needed for connection later on, just making code more maintainable. Your username prefix will be different, so replace a8794820 with your MySQL username/database name, found in MySQL on the cPanel. <?php $dbhost = 'mysql5.000webhost.com'; $dbusername = 'a8794820_root'; $dbpassword = 'tutorial1'; $dbname = 'a8794820_subject'; ?> In php, variables are created by writing $, proceeded by the identifier and then the value it’s equal to. Variables must begin with a letter or an underscore, they cannot begin with a number. E.g. $myname = dave.
Coding Task 2 Next we’re going to create an html heading for our form. Copy in the code below: <html> <head> <title>Register | Subject Choices</title> </head> <body> <h1>Register Below:</h1> <p>Already have an account? <a href="login.php">Log in here</a>.</p> Text in between the h1 tags <h1></h1> will be displayed as a large heading. Text in between the paragraph tags <p></p> becomes a new paragraph. The browser adds space between each tag. The <a href=> tag gives a hyperlink that will later be used to connect to the login page.
Coding Task 3 Next we will be creating the HTML form within our PHP document. Copy in the code below: if (!isset($_POST['submit'])) { This can be broken down into three parts: If – basic if statement, contains a block of code that will only be executed if a condition has been met. !isset – isset() is an inbuilt function that checks whether a variable has been set or not. The ! Means that the if statement will only be executed if the variable has not been set. ($_POST[‘submit’] – If the user has not clicked the submit button then the form below will be displayed. <?php if(!isset($_POST['submit'])){ ?> <form action="<?=$_SERVER['PHP_SELF']?>" method="post"> Username: <input type="text" name="username" /> <br /> Password: <input type="password" name="password" /> <br /> First Name: <input type="text" name="first_name" /> <br /> Last Name: <input type="text" name="last_name" /> <br /> Subject Choice 1: <input type="text" name="subject1" /> <br /> Subject Choice 2: <input type="text" name="subject2" /> <br /> Subject Choice 3: <input type="text" name="subject3" /> <br /> <input type="submit" name="submit" value="Register" /> </form>
Coding Task 4 Next we will begin the code that will be executed once the submit button has been pressed. Copy the code below underneath what we previously added: Creating a variable called mysqli. Under this variable we’re creating a new connection to the database using the variables we created earlier. <?php }else{ $mysqli = new MySQLi($dbhost, $dbusername, $dbpassword, $dbname); if ($mysqli->connect_errno) { echo "<p>MySQL error no {$mysqli->connect_errno} : {$mysqli->connect_error}</p>"; exit(); } The echo function outputs one or more strings to the user. Displaying the error code to the user.
EXAMPLE: $email = $_POST[‘email’]; Coding Task 5 Now we’ll create variables for each of the input fields in our form so we can match the user’s input with what’s in the database. Copy the code below underneath what we previously added. EXAMPLE: $email = $_POST[‘email’]; Here we’re creating a variable called email that we can later use to correspond to a field in the database. There are two functions that allow PHP to collect user input from a form: $_POST and $_GET. $_POST is a better method to use when sending sensitive information so we’re using it here. [‘email’] states the field in the form that we are taking the information from. $username = $_POST['username']; $password = $_POST['password']; $first_name = $_POST['first_name']; $last_name = $_POST['last_name']; $subject1 = $_POST['subject1']; $subject2 = $_POST['subject2']; $subject3 = $_POST['subject3'];
Coding Task 6 Next we need to insert the input information into the database. Copy the code below underneath what we previously added: The variables that we created previously that stored the user’s input information are now being inserted into the corresponding fields in the database. The userID field has a corresponding value of NULL as the value of the previous entry will be taken and incremented. $insert = "INSERT INTO `userdata` (`id`, `username`, `password`, `first_name`, `last_name`, `subject1`, `subject2`, `subject3`) VALUES (NULL, '{$username}', '{$password}', '{$first_name}', '{$last_name}', '{$subject1}', '{$subject2}', '{$subject3}')";
Coding Task 7 We now have to code in a query so if the data cannot be written to the database, an error message is displayed. Copy the code below underneath what we previously added: The mysqli->query() function queries the database. The variable we’re querying against the database is the $insert variable that houses the information we want to input. if ($mysqli->query($insert)){ echo "<p>Account created successfully</p>"; }else{ echo "<p>ERROR: {mysqli->errno} : {mysqli->}</p>"; exit(); } ?> Mysqli contains functions which display error code to the user. This means that the user knows why the information cannot be sent to the database.
Congratulations! Congratulations! You’ve now created the registration form in php which inserts the user’s input data into a MySQL database. We must now create a log in form so that the user can log into an account if of course they have already created one.
Creating the Log in Page
Make sure that the login file is in the same folder as the index file. Coding Task 1 Create a new file called login.php. We’re going to begin our document by again declaring the variables needed for database connection later. Copy in the code below: Make sure that the login file is in the same folder as the index file. Declaring variables assigned to the values of the host name, MySQL username, MySQL password and Database name. <?php $HOST = "mysql5.000webhost.com"; $USER = 'a8794820_root'; $PASS = 'tutorial1'; $NAME = 'a8794820_subject'; ?>
This hyperlink directs us to index.php where the user can register. Coding Task 2 Next we’re going to create an html heading for our form. Copy in the code below: <html> <head> <title>Log In | Subject Choice</title> </head> <body> <h1>Log In Below:</h1> <p>If you don't have an account <a href="index.php">create one here</a>.</p> This hyperlink directs us to index.php where the user can register.
The echo function outputs errors to the user. Coding Task 3 Next we will begin the code that will be executed once the submit button has been pressed. Copy the code below underneath what we previously added: This section of code connects the page to the database in the same way it did in the registration page. <?php } else { $mysqli = new mysqli($HOST, $USER, $PASS, $NAME); if ($mysqli->connect_errno) { echo "<p>MySQL error no {$mysqli->connect_errno} : {$mysqli->connect_error}</p>"; exit(); } The echo function outputs errors to the user.
Coding Task 4 Next we’ll create variables for each of the input fields in our form so we can match the user’s input with what’s in the database. Copy the code below underneath what we previously added. $username = $_POST['username']; $password = $_POST['password']; Here we’re creating variables we can use later on when comparing the entered data with the database information.
Coding Task 5 Next we need to insert the input information into the database. Copy the code below underneath what we previously added: This bit of code uses the $sql variable to find the row in the database where the stored username and password is equal to the entered data. LIMIT 1 means that the first instance in which this information is found will be the output information. $sql = "SELECT * from userdata WHERE username LIKE '{$username}' AND password LIKE '{$password}' LIMIT 1";
Coding Task 6 We need to now say what will happen once the database has been searched. Copy the code below underneath what we previously added: Here we’re querying the database in the same way that we did in the registration code. $result = $mysqli->query($sql); if (!$result->num_rows == 1) { echo "<p>Incorrect Username/Password.</p>"; } else { echo "<p>Logged in successfully</p>"; This piece of code says that if no rows contain the input data, a message will be output saying that the username and password don’t belong to an account.
Coding Task 7 We now have to output the user's subject choices if their account information is correct. Copy the code below underneath what we previously added: $sql = "SELECT subject1, subject2, subject3 FROM userdata WHERE username LIKE '{$username}'"; This piece of code will be used to query the database. It says to select the subject choices where the input username is the same as the database username.
Coding Task 8 We now have to output the user's subject choices if their account information is correct. Copy the code below underneath what we previously added: A while statement is used to search through each row in the database. if ($result->num_rows > 0) { while($row = $result->fetch_assoc()) { echo "<b>First Subject Choice: </b>" . $row["subject1"]. "<br><b>Second Subject Choice: </b>" . $row["subject2"]. "<br><b>Third Subject Choice </b>" . $row["subject3"]. "<br>"; } This piece of code echoes the subject choices from the database.
Coding Task 9 We now have to output the user's subject choices if their account information is correct. Copy the code below underneath what we previously added: If there was an error, the program would output that no results have been found. } else { echo "0 results"; } ?> </body> </html> Closing the program.
Nearly there! Uploading the files to the server Go back to the cPanel on 000webhost. Locate the File Manager. One in the file manager, log in with the account password and upload your files into the public html folder.
Congratulations! You’ve now created a registration and login system in php! If you insert the domain you created at the start into the URL bar, you can view your webpage!. For an example of what your website should look like, visit http://sixthformsubjectchoices.comuf.com/. * *This link may or may not be live when you try it. Please see video at the start of this powerpoint for a demo of what it should look like