WEBVTT 00:00:06.670 --> 00:00:14.010 In this video we're going to start writing code which will enable our users to change their user settings 00:00:14.030 --> 00:00:14.130 . 00:00:14.220 --> 00:00:18.900 So this includes that user name email address and password. 00:00:18.930 --> 00:00:19.330 OK. 00:00:19.470 --> 00:00:23.820 So let's go back to our notes page so to get to our profile page. 00:00:23.820 --> 00:00:27.530 All we need to do is click on the profile link at the moment. 00:00:27.540 --> 00:00:28.450 It doesn't work. 00:00:28.530 --> 00:00:36.710 And the reason why is because we haven't written any thing in the link in the profile. 00:00:36.810 --> 00:00:47.790 OK so all you need to do is go to the ATF anti-abuse and odd profile of those PSAP that because we want 00:00:47.790 --> 00:00:52.570 to be redirected to profile those BHB. 00:00:52.800 --> 00:00:54.430 OK. 00:00:54.750 --> 00:01:01.700 All right now let's save and refresh our page try again. 00:01:02.420 --> 00:01:02.860 OK. 00:01:03.090 --> 00:01:05.130 So now we are in the profile page. 00:01:05.250 --> 00:01:05.760 OK. 00:01:05.970 --> 00:01:10.420 So the file responsible for this page is profile those BHB. 00:01:10.440 --> 00:01:14.030 So it open this file from five c.p 00:01:14.030 --> 00:01:20.570 . 00:01:20.730 --> 00:01:22.860 All right. 00:01:23.910 --> 00:01:29.660 So before we continue we're going to make a couple of changes. 00:01:29.790 --> 00:01:30.430 OK. 00:01:30.570 --> 00:01:37.900 So the first one is you see does the profile link is not active at the moment. 00:01:38.050 --> 00:01:38.430 OK. 00:01:38.640 --> 00:01:42.060 So to make it actually we're going to go to the code in that site. 00:01:42.090 --> 00:01:46.230 Our profile those PSP file and 00:01:54.420 --> 00:01:58.250 instead of having my it's active. 00:01:58.810 --> 00:01:59.040 OK. 00:01:59.070 --> 00:02:10.440 As you see right now you're going to remove the active class from that list item and updates to the 00:02:10.440 --> 00:02:13.160 profile list item. 00:02:13.860 --> 00:02:14.630 OK. 00:02:14.940 --> 00:02:22.330 Like that's known it's save and refresh the page. 00:02:22.590 --> 00:02:23.050 OK. 00:02:23.400 --> 00:02:31.380 So the second point we need to change here is when you click on my notes you want to be directed to 00:02:31.380 --> 00:02:32.700 the minute speech. 00:02:32.820 --> 00:02:33.600 OK. 00:02:33.600 --> 00:02:34.890 So let's go ahead and we'll that's 00:02:59.460 --> 00:03:04.420 on the page is main page locked in. 00:03:06.670 --> 00:03:12.430 So I say and make sure it's working. 00:03:13.860 --> 00:03:19.040 And Perfect's grates on it right now. 00:03:19.050 --> 00:03:20.690 It starts with the username. 00:03:20.940 --> 00:03:27.720 So if the user wants to change their username they will click on this table. 00:03:28.050 --> 00:03:33.160 And then they will be asked to fill this form. 00:03:33.420 --> 00:03:35.840 So all they need to provide is then you use any. 00:03:35.970 --> 00:03:36.440 OK. 00:03:36.600 --> 00:03:42.030 So once they click on the submit button we're going to send an aide ex-school to APRC file which will 00:03:42.150 --> 00:03:48.980 run a query and change the user name in the Users table. 00:03:49.320 --> 00:03:49.860 OK. 00:03:50.280 --> 00:03:57.130 So all Ajax schools are going to be written in a javascript file that we will link to our profile most 00:03:57.140 --> 00:03:58.150 BHB file. 00:03:58.230 --> 00:04:03.990 So let's go ahead and create this font. 00:04:04.080 --> 00:04:05.220 So let's call its 00:04:08.580 --> 00:04:10.670 profile those days. 00:04:11.460 --> 00:04:15.800 OK. 00:04:18.960 --> 00:04:21.600 And let's open it using brackets 00:04:21.600 --> 00:04:27.060 . 00:04:27.240 --> 00:04:34.380 So here it stands we're going to have our first AJAX call to a PSP file responsible for updating the 00:04:34.380 --> 00:04:35.050 user name. 00:04:35.280 --> 00:04:44.680 So AJAX call to update user name DOS BHB. 00:04:45.150 --> 00:04:48.200 So that's how we're going to name our PSP file. 00:04:48.310 --> 00:04:49.530 So this creates this file 00:04:59.390 --> 00:04:59.660 okay 00:05:04.730 --> 00:05:06.560 and open is using brackets 00:05:11.930 --> 00:05:22.930 rights of this AJAX call we're going to have another school this time for updating the password. 00:05:23.090 --> 00:05:27.960 OK so we're going to create another BHB file update password. 00:05:28.010 --> 00:05:29.650 Those BHB. 00:05:30.990 --> 00:05:32.180 OK. 00:05:32.570 --> 00:05:37.340 I'm going to create those BHB file 00:05:39.230 --> 00:05:41.620 . 00:05:43.700 --> 00:05:44.220 OK. 00:05:44.300 --> 00:05:50.070 And it's open it's using rockets as well. 00:05:54.170 --> 00:05:55.610 And finally we're going to have another one 00:06:01.070 --> 00:06:04.080 update e-mail. 00:06:04.970 --> 00:06:05.630 Most BHB 00:06:28.200 --> 00:06:31.370 OK. 00:06:32.120 --> 00:06:35.860 So let's start with a base user named those BHB. 00:06:36.560 --> 00:06:41.140 So as usual we're going to be doing at the beginning. 00:06:43.100 --> 00:06:47.050 We will start a session and connected the database. 00:06:47.640 --> 00:06:49.510 OK. 00:06:51.740 --> 00:06:55.870 Then to update the user name in our table 00:06:58.610 --> 00:07:02.800 we will need the ID of that user before we run the query. 00:07:02.930 --> 00:07:06.590 OK so we going to guess the ID of that specific user. 00:07:07.130 --> 00:07:13.370 And then there's going to be our condition in the query and then we get to look for that specific user 00:07:13.400 --> 00:07:14.540 with that ID. 00:07:14.630 --> 00:07:17.130 And then we're going to change their use any. 00:07:17.840 --> 00:07:18.230 So 00:07:21.260 --> 00:07:21.800 we will 00:07:25.310 --> 00:07:31.650 get the user id OK so we can get this from the session array. 00:07:32.390 --> 00:07:38.420 And then we're going to get the new user name which will get through the AJAX call. 00:07:39.710 --> 00:07:42.230 OK. 00:07:44.240 --> 00:07:47.150 And then we can then run our query 00:07:50.420 --> 00:07:53.230 and updates the user. 00:07:54.050 --> 00:07:56.560 All right. 00:07:58.820 --> 00:08:03.890 All right so let's go back to our jobs file and write our first AJAX call. 00:08:03.890 --> 00:08:12.050 So to save Zaim we're going to copy and he just called as we created earlier so we can copy one from 00:08:14.450 --> 00:08:15.710 my notes to stress 00:08:37.940 --> 00:08:39.870 or to make it even easier. 00:08:39.890 --> 00:08:48.280 We can go to index the day is to get an AJAX cool mess we created for a form submission. 00:08:48.500 --> 00:08:49.040 OK. 00:08:49.220 --> 00:08:52.950 So I'm going to open in there snow day. 00:08:53.060 --> 00:08:58.080 We're going to change the name of this file later on I'm going to show you why. 00:08:58.660 --> 00:09:01.550 So it's open this one 00:09:07.700 --> 00:09:08.000 and 00:09:12.110 --> 00:09:17.780 let's copy the first one. 00:09:22.600 --> 00:09:24.230 OK. 00:09:24.350 --> 00:09:31.190 So first of all we are going to select the form and thus we said missing something so basically we're 00:09:31.190 --> 00:09:33.300 looking at the user name form. 00:09:33.350 --> 00:09:44.420 So in the profile most PSAP file the ID of the form is updates 00:09:48.880 --> 00:09:52.230 use a name form. 00:09:53.570 --> 00:09:55.560 OK. 00:09:57.290 --> 00:10:05.990 So selecting that form using its ID and then we're going to store the data that we would like to send 00:10:05.990 --> 00:10:11.560 through Ajax in a variable using the serialise array method. 00:10:11.720 --> 00:10:14.570 And then after that we're going to send our age to school. 00:10:14.630 --> 00:10:17.270 So we're going to send the call to 00:10:20.530 --> 00:10:23.310 update using the last page. 00:10:24.000 --> 00:10:25.150 All right. 00:10:25.250 --> 00:10:29.870 So the R is a base whose name must be AS-P. 00:10:30.020 --> 00:10:31.690 We're going to use the post method. 00:10:31.950 --> 00:10:33.050 OK. 00:10:33.620 --> 00:10:46.310 So data I suppose is going to go inside our promiser data and then if the school is successful we're 00:10:46.320 --> 00:10:53.180 going to see if this file is going to return something so if everything goes fine and the query runs 00:10:53.210 --> 00:10:58.650 ok and the username gets updated this file is not going to return anything. 00:10:59.000 --> 00:11:03.140 It's going to send out something only if something wrong happens. 00:11:03.140 --> 00:11:11.390 So in that case we're going to store whatever is returned by our file people inside the data very well 00:11:11.400 --> 00:11:11.680 . 00:11:11.990 --> 00:11:19.750 So if data then we're going to show an error message inside the error. 00:11:19.800 --> 00:11:26.810 Dave So if you remember the error Dave for this form 00:11:31.460 --> 00:11:32.480 was placed 00:11:37.800 --> 00:11:43.530 right the right after is using name. 00:11:46.910 --> 00:11:48.030 So here it is. 00:11:48.170 --> 00:11:48.680 OK. 00:11:48.950 --> 00:11:54.780 So actually instead of logging message we're going to say something else. 00:11:54.830 --> 00:12:00.250 It's a logging because it was a copy paste that we made earlier. 00:12:00.320 --> 00:12:05.460 So I'm going to call this update using a message. 00:12:06.450 --> 00:12:07.840 OK. 00:12:08.090 --> 00:12:11.140 And that's the message we're going to get from our PSP file. 00:12:11.150 --> 00:12:19.100 If something goes wrong so the ID let's give us an ID updates username message 00:12:23.330 --> 00:12:25.050 using the message. 00:12:25.090 --> 00:12:30.440 OK so let's save. 00:12:30.440 --> 00:12:39.960 So basically the date to select is updates using the message. 00:12:40.950 --> 00:12:43.860 OK. 00:12:44.390 --> 00:12:51.440 Now if everything goes fine and the query is successful the user name is going to get updated inside 00:12:51.620 --> 00:12:53.060 our users table. 00:12:53.060 --> 00:12:58.170 All right but we're not going to see anything happening here on our page. 00:12:58.190 --> 00:13:05.870 So to see the change we want to see the user name which is displayed right there changing to the new 00:13:05.870 --> 00:13:06.710 value. 00:13:07.160 --> 00:13:10.910 So you do this all we can do is reload the page. 00:13:10.940 --> 00:13:11.510 OK. 00:13:11.660 --> 00:13:26.130 So if data were going to execute statements else we're going to reload the page. 00:13:28.520 --> 00:13:33.330 So to do this it's location don't reload. 00:13:34.150 --> 00:13:35.730 All right. 00:13:35.990 --> 00:13:43.790 Now if something goes wrong and the AJAX call itself is not successful then we're going to display an 00:13:43.790 --> 00:13:47.750 error message saying that there was an error with the 8 x goal. 00:13:48.170 --> 00:13:56.130 So the idea of the div we're going to display that message is the same as this one. 00:13:56.720 --> 00:14:00.440 OK. 00:14:00.440 --> 00:14:08.900 All right so let's save this and then let's go to our HP file and write some code. 00:14:08.960 --> 00:14:10.330 So first to start the session. 00:14:10.340 --> 00:14:14.900 It's going to be session and the school starts. 00:14:15.230 --> 00:14:16.440 OK. 00:14:17.270 --> 00:14:19.940 And then two connects we're going to include our connection file 00:14:25.220 --> 00:14:26.090 which is 00:14:29.510 --> 00:14:30.010 connection. 00:14:30.050 --> 00:14:31.730 Those BHB. 00:14:31.970 --> 00:14:32.260 OK 00:14:32.800 --> 00:14:39.280 . 00:14:42.730 --> 00:14:44.720 Right now let's get our user ID 00:14:49.460 --> 00:14:58.290 so we going to source inside a variable ID and I'm going to use the session array. 00:15:00.700 --> 00:15:01.160 OK. 00:15:01.550 --> 00:15:06.050 And the key here is user id 00:15:09.310 --> 00:15:10.230 just a quick reminder. 00:15:10.250 --> 00:15:16.230 This is where we stored the user id in the logging those BHB File right after logging the user. 00:15:16.620 --> 00:15:20.050 OK so now let's get our user name. 00:15:20.540 --> 00:15:24.480 So you going to store the user name inside a variable username. 00:15:24.730 --> 00:15:25.900 OK. 00:15:27.020 --> 00:15:32.140 So we can get the username from the boasts array. 00:15:32.690 --> 00:15:35.360 OK. 00:15:36.110 --> 00:15:39.510 We use the post method with the AJAX call. 00:15:40.010 --> 00:15:47.200 So to get the key Let's have a look at our user name field. 00:15:47.600 --> 00:15:50.820 So the name of that field is using. 00:15:51.190 --> 00:15:52.240 All right. 00:15:52.340 --> 00:15:54.220 Just a quick change here. 00:15:54.290 --> 00:15:57.800 The label goes for username not logging email. 00:15:57.890 --> 00:15:59.750 That was a quick copy paste. 00:15:59.780 --> 00:16:00.050 So 00:16:03.350 --> 00:16:04.100 here we go. 00:16:04.370 --> 00:16:10.840 And finally we're going to run or we're going to create our query so it's stored inside a variable as 00:16:10.980 --> 00:16:12.150 well. 00:16:12.380 --> 00:16:20.490 So the syntax for our query is going to be updates. 00:16:20.930 --> 00:16:24.790 Our table which is uses 00:16:27.930 --> 00:16:35.220 and we're going to set the user name to the new value. 00:16:38.660 --> 00:16:49.280 OK so we're going to use the variable a name for that and the condition is where user ID matches that 00:16:49.360 --> 00:16:50.320 ID. 00:16:50.970 --> 00:16:55.320 OK. 00:16:56.330 --> 00:16:57.530 All right. 00:16:57.530 --> 00:17:05.570 Now let's sort the results in a result variable. 00:17:05.570 --> 00:17:15.260 So we're going to run the query using the query function which will take a couple of images again our 00:17:15.260 --> 00:17:21.780 link variable where we saw the connection and our query. 00:17:22.130 --> 00:17:28.340 All right now we're going to check if the query has been successful. 00:17:28.340 --> 00:17:36.860 So if opposites of results Okay which means results returns false 00:17:41.150 --> 00:17:45.950 then we're going to echo the error message. 00:17:45.990 --> 00:17:46.980 All right. 00:17:47.250 --> 00:17:49.100 So let's echo something like 00:18:00.950 --> 00:18:05.060 there was an error updating the 00:18:08.900 --> 00:18:16.200 storing then your username in the database. 00:18:17.750 --> 00:18:18.560 OK. 00:18:18.560 --> 00:18:21.110 So let's give our div a couple of classes 00:18:24.500 --> 00:18:28.030 alerts and alerts. 00:18:30.860 --> 00:18:36.780 All right let's add a semi going on there and close our PSP. 00:18:38.290 --> 00:18:43.610 OK.