Difference between revisions of "PHP-and-MySQL/C4/User-Login-Part-1/English-timed"
From Script | Spoken-Tutorial
(Created page with '{| border=1 !Time !Narration |- |0:00 |Welcome to the tutorial on user login and sessions. |- |0:03 |This tutorial will give a few aspects of php that will focus on how an html …') |
|||
| Line 1: | Line 1: | ||
{| border=1 | {| border=1 | ||
| − | + | |'''Time''' | |
| − | + | |'''Narration''' | |
|- | |- | ||
| − | | | + | |00:00 |
|Welcome to the tutorial on user login and sessions. | |Welcome to the tutorial on user login and sessions. | ||
|- | |- | ||
| − | | | + | |00:03 |
|This tutorial will give a few aspects of php that will focus on how an html form can be submitted and how to check for user name and password. | |This tutorial will give a few aspects of php that will focus on how an html form can be submitted and how to check for user name and password. | ||
|- | |- | ||
| − | | | + | |00:14 |
|The entered values will be checked against a database. | |The entered values will be checked against a database. | ||
|- | |- | ||
| − | | | + | |00:16 |
|I'll show you how to set-up a database with your user name and password, how to connect to a database and also to process a logout function. | |I'll show you how to set-up a database with your user name and password, how to connect to a database and also to process a logout function. | ||
|- | |- | ||
| − | | | + | |00:25 |
|Since we're using sessions, the user will remain logged-in until they press the logout button. | |Since we're using sessions, the user will remain logged-in until they press the logout button. | ||
|- | |- | ||
| − | | | + | |00:32 |
|To start with I'll create an html form. | |To start with I'll create an html form. | ||
|- | |- | ||
| − | | | + | |00:35 |
|I'll take you through some of the mySQL features that we will set up. | |I'll take you through some of the mySQL features that we will set up. | ||
|- | |- | ||
| − | | | + | |00:42 |
|In our html form, we have the action going to a page called "login dot php". | |In our html form, we have the action going to a page called "login dot php". | ||
|- | |- | ||
| − | | | + | |00:47 |
|We'll keep separate pages to keep it simple. | |We'll keep separate pages to keep it simple. | ||
|- | |- | ||
| − | | | + | |00:49 |
|Our method is going to be POST. | |Our method is going to be POST. | ||
|- | |- | ||
| − | | | + | |00:50 |
|Lets end our form here. | |Lets end our form here. | ||
|- | |- | ||
| − | | | + | |00:54 |
|I'll start creating our input type which will be "text" and the name will be "username". | |I'll start creating our input type which will be "text" and the name will be "username". | ||
|- | |- | ||
| − | | | + | |01:06 |
|A line break here. | |A line break here. | ||
|- | |- | ||
| − | | | + | |01:09 |
|Copy-paste this line and change "text" to "password". | |Copy-paste this line and change "text" to "password". | ||
|- | |- | ||
| − | | | + | |01:15 |
| And its called "password". Depending on which operating system we are using, this will appear as stars or circles. | | And its called "password". Depending on which operating system we are using, this will appear as stars or circles. | ||
|- | |- | ||
| − | | | + | |01:24 |
|And finally we'll create a "submit" button and its value will be "Log in". | |And finally we'll create a "submit" button and its value will be "Log in". | ||
|- | |- | ||
| − | | | + | |01:31 |
| Let's try this. Refresh and we have a page here. | | Let's try this. Refresh and we have a page here. | ||
|- | |- | ||
| − | | | + | |01:36 |
|"index dot php" with a user name and password. | |"index dot php" with a user name and password. | ||
|- | |- | ||
| − | | | + | |01:39 |
|I'll log in and it goes to a page that doesn't exist. | |I'll log in and it goes to a page that doesn't exist. | ||
|- | |- | ||
| − | | | + | |01:43 |
|Now let's make it a bit more user friendly and type out labels here. | |Now let's make it a bit more user friendly and type out labels here. | ||
|- | |- | ||
| − | | | + | |01:54 |
|Refresh and there we are. | |Refresh and there we are. | ||
|- | |- | ||
| − | | | + | |01:59 |
|Now let us create our "login dot php" file. | |Now let us create our "login dot php" file. | ||
|- | |- | ||
| − | | | + | |02:01 |
|First I will open "php my admin". | |First I will open "php my admin". | ||
|- | |- | ||
| − | | | + | |02:04 |
|If you are using "xampp" then it will be installed by default using the local host for "php my admin". | |If you are using "xampp" then it will be installed by default using the local host for "php my admin". | ||
|- | |- | ||
| − | | | + | |02:11 |
|If it isn't installed yet, I would suggest you google it and install a copy on the local host directory and start using it. | |If it isn't installed yet, I would suggest you google it and install a copy on the local host directory and start using it. | ||
|- | |- | ||
| − | | | + | |02:21 |
|Now, we'll create a new database. | |Now, we'll create a new database. | ||
|- | |- | ||
| − | | | + | |02:25 |
|So here, create new database called "php login" and click create. | |So here, create new database called "php login" and click create. | ||
|- | |- | ||
| − | | | + | |02:40 |
|We can see it appears here and we can now create tables. | |We can see it appears here and we can now create tables. | ||
|- | |- | ||
| − | | | + | |02:46 |
|In case you're not familiar with sql, let me brief you. | |In case you're not familiar with sql, let me brief you. | ||
|- | |- | ||
| − | | | + | |02:50 |
|A basic structure is a database which stores tables and tables store rows and rows store values. | |A basic structure is a database which stores tables and tables store rows and rows store values. | ||
|- | |- | ||
| − | | | + | |03:00 |
|Lets name it "users" and click on OK. | |Lets name it "users" and click on OK. | ||
|- | |- | ||
| − | | | + | |03:06 |
|An error - the number of fields! | |An error - the number of fields! | ||
|- | |- | ||
| − | | | + | |03:10 |
|When I create a new database, I open up a notepad or a context editor and note down all the fields that I'll use. | |When I create a new database, I open up a notepad or a context editor and note down all the fields that I'll use. | ||
|- | |- | ||
| − | | | + | |03:20 |
|I'll use "id" for start, next "user name" and lastly "password". That's all we want at the moment. | |I'll use "id" for start, next "user name" and lastly "password". That's all we want at the moment. | ||
|- | |- | ||
| − | | | + | |03:28 |
|We can also add the "first name", "date of birth" etc. depending on your program. | |We can also add the "first name", "date of birth" etc. depending on your program. | ||
|- | |- | ||
| − | | | + | |03:36 |
|But for now we're using these 3 fields making it a total of 3 fields. | |But for now we're using these 3 fields making it a total of 3 fields. | ||
|- | |- | ||
| − | | | + | |03:42 |
|Let's go back here. So, three fields and that will create that first. | |Let's go back here. So, three fields and that will create that first. | ||
|- | |- | ||
| − | | | + | |03:49 |
|Now we proceed with typing in the the field names. | |Now we proceed with typing in the the field names. | ||
|- | |- | ||
| − | | | + | |03:53 |
|We type "id" and we will make this an integer. | |We type "id" and we will make this an integer. | ||
|- | |- | ||
| − | | | + | |03:57 |
|This is the primary key and we want it to make auto increment. | |This is the primary key and we want it to make auto increment. | ||
|- | |- | ||
| − | | | + | |04:02 |
|Now, every-time a new record is created the id values will increment by one. | |Now, every-time a new record is created the id values will increment by one. | ||
|- | |- | ||
| − | | | + | |04:07 |
|So, for example, the first user who registers will have an id of one, the second user who registers will have an id of two and so on and so forth. | |So, for example, the first user who registers will have an id of one, the second user who registers will have an id of two and so on and so forth. | ||
|- | |- | ||
| − | | | + | |04:15 |
|Okay, next one will be the user name and last one is going to be the password. | |Okay, next one will be the user name and last one is going to be the password. | ||
|- | |- | ||
| − | | | + | |04:23 |
|Next we'll set them as VARCHARs and I'll set this as 25 characters and the password as 25 characters, as well. | |Next we'll set them as VARCHARs and I'll set this as 25 characters and the password as 25 characters, as well. | ||
|- | |- | ||
| − | | | + | |04:31 |
|There is nothing else that we need to set for these. | |There is nothing else that we need to set for these. | ||
|- | |- | ||
| − | | | + | |04:34 |
|Let us scroll down and lets click on SAVE. | |Let us scroll down and lets click on SAVE. | ||
|- | |- | ||
| − | | | + | |04:40 |
|Okay so once I save here, we can come down and see this here. | |Okay so once I save here, we can come down and see this here. | ||
|- | |- | ||
| − | | | + | |04:44 |
|And you can insert values in them. | |And you can insert values in them. | ||
|- | |- | ||
| − | | | + | |04:48 |
|We'll do it because we're testing. | |We'll do it because we're testing. | ||
|- | |- | ||
| − | | | + | |04:50 |
|I have created some tutorials on how to make a user registration form. We can discuss this further there. | |I have created some tutorials on how to make a user registration form. We can discuss this further there. | ||
|- | |- | ||
| − | | | + | |05:01 |
|The value of "id" will be auto-incremented, so we don't have to put anything. | |The value of "id" will be auto-incremented, so we don't have to put anything. | ||
|- | |- | ||
| − | | | + | |05:05 |
|It'll go to 1 straight away. | |It'll go to 1 straight away. | ||
|- | |- | ||
| − | | | + | |05:07 |
|In user name, I'll say "Alex". | |In user name, I'll say "Alex". | ||
|- | |- | ||
| − | | | + | |05:10 |
|My password will be "abc". I would recommend you a better password, though. | |My password will be "abc". I would recommend you a better password, though. | ||
|- | |- | ||
| − | | | + | |05:16 |
|Okay so user name is "Alex" and password is "abc" - easy to remember. That's what has been stored. | |Okay so user name is "Alex" and password is "abc" - easy to remember. That's what has been stored. | ||
|- | |- | ||
| − | | | + | |05:26 |
|To browse, just click the browse tab. | |To browse, just click the browse tab. | ||
|- | |- | ||
| − | | | + | |05:28 |
|Let's scroll down. We have user name and password as "Alex" and "abc" and the id has already been set to 1. | |Let's scroll down. We have user name and password as "Alex" and "abc" and the id has already been set to 1. | ||
|- | |- | ||
| − | | | + | |05:37 |
|Now, we'll create the "login dot php" page. | |Now, we'll create the "login dot php" page. | ||
|- | |- | ||
| − | | | + | |05:46 |
|Lets save this quickly - "Login dot php". | |Lets save this quickly - "Login dot php". | ||
|- | |- | ||
| − | | | + | |05:51 |
|Let us see how to create our php tags. | |Let us see how to create our php tags. | ||
|- | |- | ||
| − | | | + | |05:55 |
|I'll take into account some POST variables now. | |I'll take into account some POST variables now. | ||
|- | |- | ||
| − | | | + | |05:59 |
|In "index dot php", we used the method as POST. | |In "index dot php", we used the method as POST. | ||
|- | |- | ||
| − | | | + | |06:01 |
|We'll set user name as dollar sign underscore POST and rename the variable which is "username". | |We'll set user name as dollar sign underscore POST and rename the variable which is "username". | ||
|- | |- | ||
| − | | | + | |06:11 |
|It is found here and.... password will equal a POST value and that will be "password". | |It is found here and.... password will equal a POST value and that will be "password". | ||
|- | |- | ||
| − | | | + | |06:25 |
|First of all, we will check whether both the user name and the password were entered. | |First of all, we will check whether both the user name and the password were entered. | ||
|- | |- | ||
| − | | | + | |06:30 |
|We won't start validating the form. Its unnecessary to do so since we know the user has entered both these fields. | |We won't start validating the form. Its unnecessary to do so since we know the user has entered both these fields. | ||
|- | |- | ||
| − | | | + | |06:38 |
|Now, I will type my "if" statement. | |Now, I will type my "if" statement. | ||
|- | |- | ||
| − | | | + | |06:40 |
|This will be a big block because all the code that I require after I check this will go in here. | |This will be a big block because all the code that I require after I check this will go in here. | ||
|- | |- | ||
| − | | | + | |06:45 |
|So here I'll say if "username" which means if "username" has a value, it will return TRUE and I'll say "password". | |So here I'll say if "username" which means if "username" has a value, it will return TRUE and I'll say "password". | ||
|- | |- | ||
| − | | | + | |06:56 |
|So this requires the "username" and "password" for this to be TRUE and to execute this block of code here. | |So this requires the "username" and "password" for this to be TRUE and to execute this block of code here. | ||
|- | |- | ||
| − | | | + | |07:04 |
|What should we write here? We need to connect to our database. | |What should we write here? We need to connect to our database. | ||
|- | |- | ||
| − | | | + | |07:08 |
|To do this we create a variable called "connect" equal to "mysql_connect". | |To do this we create a variable called "connect" equal to "mysql_connect". | ||
|- | |- | ||
| − | | | + | |07:20 |
|And inside this the first parameter will be a "host" which is "localhost" for me. | |And inside this the first parameter will be a "host" which is "localhost" for me. | ||
|- | |- | ||
| − | | | + | |07:28 |
|The second one will be "username" and I'll use "root". | |The second one will be "username" and I'll use "root". | ||
|- | |- | ||
| − | | | + | |07:31 |
|The third one is the "password" which I believe I don't have. We'll check on that. | |The third one is the "password" which I believe I don't have. We'll check on that. | ||
|- | |- | ||
| − | | | + | |07:37 |
|After this we can say "or die" and give an error message. | |After this we can say "or die" and give an error message. | ||
|- | |- | ||
| − | | | + | |07:39 |
|So, for example, we can say "Couldn't connect". | |So, for example, we can say "Couldn't connect". | ||
|- | |- | ||
| − | | | + | |07:44 |
|I am not sure about my password. I think its something else. | |I am not sure about my password. I think its something else. | ||
|- | |- | ||
| − | | | + | |07:48 |
|We'll try something then it will say "Couldn't connect". | |We'll try something then it will say "Couldn't connect". | ||
|- | |- | ||
| − | | | + | |07:51 |
|Now we need to select our table, sorry our database. | |Now we need to select our table, sorry our database. | ||
|- | |- | ||
| − | | | + | |07:58 |
|We'll say "mysql select db" which is another built-in function when you have the php module installed. | |We'll say "mysql select db" which is another built-in function when you have the php module installed. | ||
|- | |- | ||
| − | | | + | |08:06 |
|It also comes with XAMPP. | |It also comes with XAMPP. | ||
|- | |- | ||
| − | | | + | |08:11 |
|Here I'll put a double quote and say "phplogin" | |Here I'll put a double quote and say "phplogin" | ||
|- | |- | ||
| − | | | + | |08:19 |
|So assuming that everything is okay, I can add my error message here "Couldn't find db". Okay?. | |So assuming that everything is okay, I can add my error message here "Couldn't find db". Okay?. | ||
|- | |- | ||
| − | | | + | |08:30 |
|Refresh page. Click login. Nothing happened. | |Refresh page. Click login. Nothing happened. | ||
|- | |- | ||
| − | | | + | |08:37 |
|Let's edit our "if" statement and say "else" echo or instead the best function is "die". | |Let's edit our "if" statement and say "else" echo or instead the best function is "die". | ||
|- | |- | ||
| − | | | + | |08:47 |
|Here it will just stop executing anything after this point, after this function is called. | |Here it will just stop executing anything after this point, after this function is called. | ||
|- | |- | ||
| − | | | + | |08:54 |
|And it'll also pass a message of your choice. | |And it'll also pass a message of your choice. | ||
|- | |- | ||
| − | | | + | |08:58 |
|So here I'll say "Please enter a user name and a password". | |So here I'll say "Please enter a user name and a password". | ||
|- | |- | ||
| − | | | + | |09:08 |
|Refresh this. Resend the data and we get this error message. | |Refresh this. Resend the data and we get this error message. | ||
|- | |- | ||
| − | | | + | |09:13 |
|Next I'll type "Alex" and "123", sorry "abc" and click log in. | |Next I'll type "Alex" and "123", sorry "abc" and click log in. | ||
|- | |- | ||
| − | | | + | |09:18 |
|No error message, which means we are connected to the database. | |No error message, which means we are connected to the database. | ||
|- | |- | ||
| − | | | + | |09:25 |
|That's the end of this part. In the next one I will show how to connect to our database and check for the user name and password. | |That's the end of this part. In the next one I will show how to connect to our database and check for the user name and password. | ||
|- | |- | ||
| − | | | + | |09:34 |
|Thanks for joining us. This is Royston dubbing for the Spoken Tutorial Project. Bye. | |Thanks for joining us. This is Royston dubbing for the Spoken Tutorial Project. Bye. | ||
Revision as of 13:05, 10 July 2014
| Time | Narration |
| 00:00 | Welcome to the tutorial on user login and sessions. |
| 00:03 | This tutorial will give a few aspects of php that will focus on how an html form can be submitted and how to check for user name and password. |
| 00:14 | The entered values will be checked against a database. |
| 00:16 | I'll show you how to set-up a database with your user name and password, how to connect to a database and also to process a logout function. |
| 00:25 | Since we're using sessions, the user will remain logged-in until they press the logout button. |
| 00:32 | To start with I'll create an html form. |
| 00:35 | I'll take you through some of the mySQL features that we will set up. |
| 00:42 | In our html form, we have the action going to a page called "login dot php". |
| 00:47 | We'll keep separate pages to keep it simple. |
| 00:49 | Our method is going to be POST. |
| 00:50 | Lets end our form here. |
| 00:54 | I'll start creating our input type which will be "text" and the name will be "username". |
| 01:06 | A line break here. |
| 01:09 | Copy-paste this line and change "text" to "password". |
| 01:15 | And its called "password". Depending on which operating system we are using, this will appear as stars or circles. |
| 01:24 | And finally we'll create a "submit" button and its value will be "Log in". |
| 01:31 | Let's try this. Refresh and we have a page here. |
| 01:36 | "index dot php" with a user name and password. |
| 01:39 | I'll log in and it goes to a page that doesn't exist. |
| 01:43 | Now let's make it a bit more user friendly and type out labels here. |
| 01:54 | Refresh and there we are. |
| 01:59 | Now let us create our "login dot php" file. |
| 02:01 | First I will open "php my admin". |
| 02:04 | If you are using "xampp" then it will be installed by default using the local host for "php my admin". |
| 02:11 | If it isn't installed yet, I would suggest you google it and install a copy on the local host directory and start using it. |
| 02:21 | Now, we'll create a new database. |
| 02:25 | So here, create new database called "php login" and click create. |
| 02:40 | We can see it appears here and we can now create tables. |
| 02:46 | In case you're not familiar with sql, let me brief you. |
| 02:50 | A basic structure is a database which stores tables and tables store rows and rows store values. |
| 03:00 | Lets name it "users" and click on OK. |
| 03:06 | An error - the number of fields! |
| 03:10 | When I create a new database, I open up a notepad or a context editor and note down all the fields that I'll use. |
| 03:20 | I'll use "id" for start, next "user name" and lastly "password". That's all we want at the moment. |
| 03:28 | We can also add the "first name", "date of birth" etc. depending on your program. |
| 03:36 | But for now we're using these 3 fields making it a total of 3 fields. |
| 03:42 | Let's go back here. So, three fields and that will create that first. |
| 03:49 | Now we proceed with typing in the the field names. |
| 03:53 | We type "id" and we will make this an integer. |
| 03:57 | This is the primary key and we want it to make auto increment. |
| 04:02 | Now, every-time a new record is created the id values will increment by one. |
| 04:07 | So, for example, the first user who registers will have an id of one, the second user who registers will have an id of two and so on and so forth. |
| 04:15 | Okay, next one will be the user name and last one is going to be the password. |
| 04:23 | Next we'll set them as VARCHARs and I'll set this as 25 characters and the password as 25 characters, as well. |
| 04:31 | There is nothing else that we need to set for these. |
| 04:34 | Let us scroll down and lets click on SAVE. |
| 04:40 | Okay so once I save here, we can come down and see this here. |
| 04:44 | And you can insert values in them. |
| 04:48 | We'll do it because we're testing. |
| 04:50 | I have created some tutorials on how to make a user registration form. We can discuss this further there. |
| 05:01 | The value of "id" will be auto-incremented, so we don't have to put anything. |
| 05:05 | It'll go to 1 straight away. |
| 05:07 | In user name, I'll say "Alex". |
| 05:10 | My password will be "abc". I would recommend you a better password, though. |
| 05:16 | Okay so user name is "Alex" and password is "abc" - easy to remember. That's what has been stored. |
| 05:26 | To browse, just click the browse tab. |
| 05:28 | Let's scroll down. We have user name and password as "Alex" and "abc" and the id has already been set to 1. |
| 05:37 | Now, we'll create the "login dot php" page. |
| 05:46 | Lets save this quickly - "Login dot php". |
| 05:51 | Let us see how to create our php tags. |
| 05:55 | I'll take into account some POST variables now. |
| 05:59 | In "index dot php", we used the method as POST. |
| 06:01 | We'll set user name as dollar sign underscore POST and rename the variable which is "username". |
| 06:11 | It is found here and.... password will equal a POST value and that will be "password". |
| 06:25 | First of all, we will check whether both the user name and the password were entered. |
| 06:30 | We won't start validating the form. Its unnecessary to do so since we know the user has entered both these fields. |
| 06:38 | Now, I will type my "if" statement. |
| 06:40 | This will be a big block because all the code that I require after I check this will go in here. |
| 06:45 | So here I'll say if "username" which means if "username" has a value, it will return TRUE and I'll say "password". |
| 06:56 | So this requires the "username" and "password" for this to be TRUE and to execute this block of code here. |
| 07:04 | What should we write here? We need to connect to our database. |
| 07:08 | To do this we create a variable called "connect" equal to "mysql_connect". |
| 07:20 | And inside this the first parameter will be a "host" which is "localhost" for me. |
| 07:28 | The second one will be "username" and I'll use "root". |
| 07:31 | The third one is the "password" which I believe I don't have. We'll check on that. |
| 07:37 | After this we can say "or die" and give an error message. |
| 07:39 | So, for example, we can say "Couldn't connect". |
| 07:44 | I am not sure about my password. I think its something else. |
| 07:48 | We'll try something then it will say "Couldn't connect". |
| 07:51 | Now we need to select our table, sorry our database. |
| 07:58 | We'll say "mysql select db" which is another built-in function when you have the php module installed. |
| 08:06 | It also comes with XAMPP. |
| 08:11 | Here I'll put a double quote and say "phplogin" |
| 08:19 | So assuming that everything is okay, I can add my error message here "Couldn't find db". Okay?. |
| 08:30 | Refresh page. Click login. Nothing happened. |
| 08:37 | Let's edit our "if" statement and say "else" echo or instead the best function is "die". |
| 08:47 | Here it will just stop executing anything after this point, after this function is called. |
| 08:54 | And it'll also pass a message of your choice. |
| 08:58 | So here I'll say "Please enter a user name and a password". |
| 09:08 | Refresh this. Resend the data and we get this error message. |
| 09:13 | Next I'll type "Alex" and "123", sorry "abc" and click log in. |
| 09:18 | No error message, which means we are connected to the database. |
| 09:25 | That's the end of this part. In the next one I will show how to connect to our database and check for the user name and password. |
| 09:34 | Thanks for joining us. This is Royston dubbing for the Spoken Tutorial Project. Bye. |
