Hello everyone! Page 1. Your folder should look like this. To start with Run your XAMPP app and start your Apache and MySQL.

Transcription

1 Hello everyone! Welcome to our PHP + MySQL (Easy to learn) E.T.L. free online course Hope you have installed your XAMPP? And you have created your forms inside the studio file in the htdocs folder using bootstrap? Your folder should look like this 1 To start with Run your XAMPP app and start your Apache and MySQL.

2 Run your text editor and open your studio folder in your htdocs. Display of my index.php 2 Now, let me explain two important features that we will be working with in the forms. Figure 1: Display of the form layout (line 24-35) of our login-form.php

3 <form action="" method="get"> line 24 The Action Attribute The action attribute defines the action to be performed when the form is submitted. Normally, the form data is sent to the web page on the server when the user clicks on the submit button. In the example above, the form data is not sent to any page on the server it is processed in this same file that is why action= (i.e. it is blank). 3 The Method Attribute The method attribute specifies the HTTP method (GET or POST) to be used when submitting the form data: DIFFERENCE BETWEEN GET AND POST For a GET request, whatever you input in the form is shown in the URL (top of the browser), then, the server picks it from there and uses it to fetch/process information required. It uses the global GET variable ($_GET). Open your login-form.php in your preferred browser by typing localhost/studio/login-form.php as URL, then input any and password of your choice as shown in the image below. Figure 2: Example of global GET variable($_get) The details are moved to the URL on clicking the submit button for GET method

4 Now, change the form to post method as shown on line 29 in the image below and add these new lines of codes (line 1 to line 7) as shown in the image below to view what we posted. It uses the global POST variable ($_POST); Figure 3: Changing to post method in my text editor (Example of POST) 4

5 Figure 4: Result in my browser after clicking the login button 5

6 CODE EXPLANATION The input value of the and password is what is displayed in Fig. 4. If you look at the form layout in Figure 3, every input as a name= name (Fig. 3, line 32, 36 and 38) property added to it, the name is what the form attach to any information one inputs in the form entry. Another important php function is the conditional statement. In PHP we have the following conditional statements: if statement - executes some codes if one condition is true if...else statement - executes some codes if a condition is true and another code if the condition is false if...elseif...else statement - executes different codes for more than two conditions switch statement - selects one of many blocks of code to be executed If statement Syntax if (condition) { code to be executed if condition is true; } if...else statement Syntax if (condition) { code to be executed if condition is true; } else { code to be executed if condition is false; } if...elseif...else statement Syntax if (condition) { code to be executed if this condition is true; } elseif (condition) { code to be executed if this condition is true; } else { code to be executed if all conditions are false; } 6 Switch statement Syntax switch (n) { case label1: code to be executed if n=label1; break; case label2: code to be executed if n=label2; break;... default: code to be executed if n is different from all labels;

7 } LASTLY is the php isset function (Fig. 3 line 2) it is used to determine if a variable is set and not NULL, here it is used to determine if the button Login is posted. NOW LETS MOVE INTO OUR PROJECT PROPERLY Step 1: Type the lines circled in red as shown in the image below in your index.php to make everyone login before viewing our website. Figure 5: PLEASE NOTE THAT I JUST MINIMIZED THE CODES, EVERYTHING IS STILL INTACT. Just add the new lines of codes 7

8 Figure 6: Type localhost/studio" it takes you to the login form 8 CODE EXPLANATION The conditional statement (line 59 fig. 5) checks if a user is login else it will automatically redirects users to login page and can also sign-up using the click here to Register in the login area. The header function on line 161 fig. 5 inside the else statement is used to redirect them to login page. SIGN-UP PAGE FORM PROCESSING. Step 1: Capture the user details. We do that using the method we had already discussed above in fig.3 and 4. Type the following lines of code (line 1-11) in your signup-form.php

9 Sign-up 1 9 Below is how the echo on line 8 in the image above will be displayed: If you fill the form and click the register button Your inputs are: (Note: <br> tag is what takes it to another line) Username: Input name Input Password: Input password

10 You can view the display in my browser below 10 Step 2: Save the information. To do this we need a database. What is a database? A database is a collection of data that is made of tables where each table stores similar information. A table is made up of rows and columns. We use relational database management systems (RDBMS) to store and manage huge volume of data. This is called relational database because all the data is stored into different tables and relations are established using primary keys or other keys known as foreign keys. With PHP, you can connect to and manipulate databases. MySQL is the most popular database system used with PHP. From the link below we will see that MySQL is widely used by top web apps in the world today e.g. Twitter, Yahoo, Facebook, Wikipedia, WordPress etc. What is MySQL? MySQL is an open source relational database management system (RDBMS) based on Structured Query Language (SQL). Some of the Most Important SQL Commands SELECT - extracts data from a database UPDATE - updates data in a database DELETE - deletes data from a database INSERT INTO - inserts new data into a database CREATE DATABASE - creates a new database

11 ALTER DATABASE - modifies a database CREATE TABLE - creates a new table ALTER TABLE - modifies a table DROP TABLE - deletes a table CREATE INDEX - creates an index (search key) DROP INDEX - deletes an index N.B: when writing MySQL statements we write MySQL command/syntax in uppercase and the user syntax in lower case. For example CREATE DATABASE studio; This command creates a database in the local server and name the database studio ; 11 There are two ways to work with the MySQL server 1. Using phpmyadmin from XAMPP Click on the Admin has circled in the image below to access MySQL phpmyadmin portal 2. Using PHP. N.B: In this project we will be using php with MySQL to connect to and query the database Now let us connect to the XAMPP server Comment out or remove the previous codes in your signup-form.php from lines 3 9 as shown in the image Sign-up 1 above, then Type the following codes from line 3 to 23 in your signup-form.php as shown in the image Sign-up 2 below.

12 Sign-up 2 12

13 If you get the echo message displayed then your connection is successful else the code on line 12, the die ( ) function will kill the page and display an error page. 13 CODE EXPLANATION: The php function mysqli_connect ( ) (line 8) is responsible for the connection. It takes three parameters server name, server username and server password. If the connection is successful then you get the phrase echo Connected successfully. The default server name is localhost, username is root and password is (empty). N.B: The MySQL Database Server username and password is different from the one the user entered. This is the entry to the MySQL Database Server that allows user to store different information. Now let s create our first database; Type the following lines (16-22) but first comment out line (11-14) in your signup-form.php

14 Sign-up 3 14 Display in my browser:

15 Display in my localhost/phpmyadmin when I created my database studio. 15 Now let s create our first MySQL table. What is a MySQL table? A table is made up of columns and rows. Columns are like categories with each column containing specific category/detail. A row is an entry in the table. For example: COLUMNS ROWS The example above has 6-columns and 5-rows.

16 Type the following lines of code (25-39) to create your table in your signup-form.php file, comment out line 11-23; include line 6 and line 9 Sign-up 4 N.B: line 6 and 9 (inclusion of $DBname) 16 CODE EXPLANATION To create a table in MySQL we need to name the column(s) and the properties of each column. To create a table, the first thing is to select the database (line 6 and 9). We do that by adding variable DBname = studio and include it in our connection. Run the SQL as shown on line Line is to make sure that the table was created else we will get an error. The table has Six(6) columns which are 1) user_id(for serial numbers of users), 2) username(to store the username a user inputs), 3) (for user s), 4) password(for user password), 5) reg_date(to capture the registration date), 6) login_status(to check if user is login or not); THE SQL EXPLANATION: The columns require data-type and length INT (11): Use to denote that the column will store only integers (Numeric value) and the length is 11 digits. VARCHAR (30): For column to store variables and character upto length of 30. Varchar can contain letters, numbers and symbols. TIMESTAMP: for column to store info in date and time format BOOLEAN: for data in the column to be stored using True or False. 1 for True and 0 for False. Don t forget to save and make sure you comment out (add // in front of all other codes) as shown above then

17 refresh your browser. Result in my browser: The echo message on line 36 is displayed if no error 17 Display in my localhost/phpmyadmin when I created the table registration.

18 NOW we can INSERT user s information to the database using the MySQL insert statement; Uncomment lines then type lines as shown below in the image Sign-up 5 Sign-up 5 18 CODE EXPLANATION: To insert inside the database table that we created earlier we need to make sure that we are connected to the server and we are also inserting into the database and the table name tallies with that on our database. Line 22 is the SQL syntax for inserting inside our database and if you check the values ($user, $ and $pword) you will observe that it is the information that the user input. Line is to confirm if the information entered were stored in the database table and it displays the echoed message else we will get an error. IMPORTANT NOTE : Press the register button only once (to avoid uploading empty data).

19 19 Display in my localhost/phpmyadmin when I inserted the first record Now let s view the details we input in the database using php function. Add these lines of codes (16-31) to the signup-form.php, comment out line (33-47) using // as shown in the image Sign-up 6 below.

20 Sign-up 6 20

21 CODE EXPLANATION: the outputs were explained in the following steps 1. We created connection to server (line 2-9) as explained earlier 2. Check the connection using the conditional statement on line We use MySQL passed through a $sql and php function mysqli_query to capture all the users information on the database. 4. Using the mysqli_num_row function, If the sql query return some result that means there is a user on the database table. 5. We declared an empty $datas array (line 22) to store all the information the query generates using while loop on line (24-27) 6. We used the $datas [ ] to capture the info inside the loop and add it to the empty $datas array that we declared on line Line was used to output all the information using print_r() function and the <pre></pre> tag for nice outputs as shown below 21

22 Now let s apply some validation to avoid repetitions and upload of empty forms. Let us add these lines of codes (line in our signup-form.php ) (make sure you comment out line as shown in the image sign-up 7 below) Sign-up 7 22 CODE EXPLANATION: The trim ( ) function (line34 and line 36) is used to wipe off empty space and the conditional statement (line 39-52) is used to check if the $user for username and $pword for password is not empty. If it is, it will alert a message as stated on line 51 in the image above. Alert is a JavaScript function for pop-up. Figure 7: If the form is EMPTY Figure 8: If the forms were filled correctly

23 Now let s add some restrictions to avoid repetition of name and/or . Replace the codes after the line if (!empty($user && $pword) { (that is line 39) as shown in the image (sign-up 7 above) with the lines of codes (line 37 to 70) as shown in the image below(sign-up 8): Sign-up 8 23 CODE EXPLANATION: line is used to check if the user name or exists? First we query the database to check if the input username or is in the database using $sql and mysqli_query function (line 39 and 40)? We use line 44 to check If the query return result. If num_rows is greater than 0, it means the information already exist so we echo an alert. Line is what is used to check if it is the input username or the . Also note the closing curly braces on line 66.

24 CHALLENGE (10MINS) ADD validation to the Login page: I believe we can now connect to the database (server) connection, capture users input and perform query. You can follow the following step to achieve that. 1. Create connection to server 2. Check the connection 3. Use isset function to capture the information the user inputs in the login form 4. Perform sql query to check if that input data (username and password) is on the database table 5. Use conditional statement to a. Update the login status to true using update sql query, if the information is on the database table and b. redirect the user to the index page or login page if information is not correct with a display message 24 SOLUTION How was the challenge? Below is my solution Type the lines of code (line 1 to 62) as in shown in the image below (Login 1) in your login-form.php to add validation to the file. Login 1

25 25

26 26 Figure 9: Display in my browser when i logged in with correct and password CODE EXPLANATION: The header ( location: index.php?user={$row_check[ username ]} ) on line 42 is to add the url of the display page. We use the question mark? as a $_GET request to the url. It is similar to sending a form with method= GET. Then, we pick the information from there and use it for other purpose. Display in my localhost/phpmyadmin Note: The login_status is now 1 ;

27 27

28 FINALLY let s add logout form and restriction to this page and make sure the user is logged in and not manipulating the url. Now go to the index.php and add the log-out form and the restriction. Kindly enter the following lines from line 59 to 116, then lines 186 to 194, 213 to 217 as shown in the image below 28

29 29 We use the following steps to achieve that Create connection to server(database){line 59-62} Check the connection(kill the page if not server not found) {line 68-70} Use isset ($_GET function) to capture the information that was loaded from the login page in the URL to check if a user is logged in. Else redirect to login page. {line 73-91, ending part } Echo the Logged in user name in our display website {line 192} Create a form {line inside our header div} Perform sql query to update user login status to false if user logout {line } Use conditional statement to redirect the user to the login page and display some error message if there is any error. {line }

30 The image below depicts how our website is after a user has logged in 30 Display in my localhost/phpmyadmin when I log out Note: The login_status is now 0 ;

31 Dear Programmers, It has been an honour as well as a privilege to walk you through this tutorial. In the next class we will be learning PHP/MySQL + AJAX where we would make changes occur without leaving a page. Kindly go through all the note from the beginning to the end. Try to understand any part you are having difficulty with. Thank you very much for your time. All-Tech Systems & Co. Excellence, Satisfaction, Integrity & Simplicity...! 31