WEBVTT 00:00:07.190 --> 00:00:13.650 In this video we're going to create our news table as well as the difference files behind the functionalities 00:00:13.650 --> 00:00:15.530 of how notes management system. 00:00:15.540 --> 00:00:17.400 So let's start with the news table. 00:00:17.430 --> 00:00:22.080 So if you go to your application database OK. 00:00:22.440 --> 00:00:25.450 And then creates a table there. 00:00:25.560 --> 00:00:27.880 So just choose a name for our table. 00:00:27.920 --> 00:00:30.270 I'm going to call it notes. 00:00:30.440 --> 00:00:34.400 It's going to have four columns. 00:00:34.470 --> 00:00:34.710 All right. 00:00:34.710 --> 00:00:40.210 So the first column is going to be the ID of the notes. 00:00:40.350 --> 00:00:41.660 So it's going to be an integer. 00:00:41.820 --> 00:00:45.300 And let's go for a length of four characters. 00:00:45.620 --> 00:00:46.190 OK. 00:00:46.530 --> 00:00:52.130 And we're going to check the auto increment box. 00:00:52.410 --> 00:00:55.590 Now the next one is going to be the user ID. 00:00:55.590 --> 00:01:01.930 So this corresponds to the ID of the user who created the note. 00:01:02.460 --> 00:01:09.050 And again we are going to go for an integer of four characters maximum. 00:01:09.060 --> 00:01:12.100 Then we get to have the content of our news. 00:01:12.210 --> 00:01:13.630 We can call it notes. 00:01:14.220 --> 00:01:14.740 OK. 00:01:14.880 --> 00:01:21.760 So there's going to be some text and we don't have to specify any length. 00:01:22.320 --> 00:01:26.310 And finally we're going to have the time column. 00:01:26.610 --> 00:01:30.290 So this corresponds to when the Notes was created. 00:01:30.470 --> 00:01:30.970 OK. 00:01:31.230 --> 00:01:34.350 And it's formatted as a Unix timestamp. 00:01:34.830 --> 00:01:41.010 So it's going to be an integer and we're going to go for a maximum length of 10 characters. 00:01:41.520 --> 00:01:43.040 So let's save. 00:01:43.650 --> 00:01:46.070 OK. 00:01:47.100 --> 00:01:49.810 So our table is now created. 00:01:49.830 --> 00:01:57.720 Now let's go to our FY FCP and create the difference files we need to manage our innards. 00:01:57.750 --> 00:02:00.810 So the first file is going to be the javascript's file. 00:02:00.810 --> 00:02:03.250 Where are we going to write all the AJAX calls. 00:02:03.380 --> 00:02:03.980 OK. 00:02:04.470 --> 00:02:14.910 So this creates a file and call it for example my notes latte's. 00:02:15.200 --> 00:02:22.980 OK so inside this file will place all the AJAX calls and also the functionalities of the difference 00:02:22.980 --> 00:02:32.370 buttons in our notes page or writes the next file We're going to create is a PSP file which will use 00:02:32.370 --> 00:02:33.740 to load the notes. 00:02:33.780 --> 00:02:36.020 OK. 00:02:37.110 --> 00:02:38.660 So let's call it load. 00:02:38.670 --> 00:02:43.270 No it's not the PSP. 00:02:43.320 --> 00:02:53.630 Also we're going to have a file called create notes which we all used to create 8 new nodes. 00:02:56.940 --> 00:03:01.450 Then we're going to have another one of data nodes. 00:03:02.550 --> 00:03:08.850 So this file is going to be used when writing in the text area. 00:03:10.110 --> 00:03:10.510 OK. 00:03:10.620 --> 00:03:15.560 So again any character and Hickox here we are right there. 00:03:16.150 --> 00:03:19.770 Is going to be triggering an AJAX call. 00:03:19.890 --> 00:03:20.570 OK. 00:03:20.580 --> 00:03:24.060 To this file it updates the news in question. 00:03:24.060 --> 00:03:27.260 And finally we're going to have a file delete notes. 00:03:27.710 --> 00:03:32.400 So this file is going to delete specific notes. 00:03:32.970 --> 00:03:34.640 OK. 00:03:36.540 --> 00:03:41.800 Now let's open all these files in brackets and go through their structure. 00:03:42.030 --> 00:03:48.030 So here we can see the difference files we created as well as our notes page and the connection file 00:03:48.210 --> 00:03:51.960 which will need to include in different files later on. 00:03:51.960 --> 00:03:59.160 So it starts by linking our notes page to the javascript file where we can write the different AJAX 00:03:59.160 --> 00:03:59.690 calls. 00:03:59.790 --> 00:04:00.360 OK. 00:04:00.510 --> 00:04:08.420 So we're going to go to our notes page and go to the bottom of the page and odd a script. 00:04:08.420 --> 00:04:11.390 OK. 00:04:14.440 --> 00:04:15.080 OK. 00:04:15.090 --> 00:04:23.240 With a source going to our javascript file which is my notes. 00:04:23.300 --> 00:04:25.100 JS OK. 00:04:25.350 --> 00:04:33.070 So now we linked the notes page to the javascript file where we're going to write our AJAX calls. 00:04:33.180 --> 00:04:33.450 All right. 00:04:33.450 --> 00:04:36.980 Now let's go through the structure of our job is Chris file. 00:04:36.990 --> 00:04:41.190 So first of all we're going to be writing some query code inside this file. 00:04:41.390 --> 00:04:49.520 So to make sure that the code is executed once the page is fully loaded We're going to use the D'Qwell 00:04:49.680 --> 00:04:54.250 load function so we can write all the code inside this function. 00:04:54.420 --> 00:04:56.060 OK. 00:04:57.120 --> 00:05:01.540 So if you remember this is the syntax of the function. 00:05:01.850 --> 00:05:02.470 OK. 00:05:02.820 --> 00:05:05.820 So inside the function. 00:05:05.820 --> 00:05:11.290 First of all we going to define a couple of variables so we can use these variables 00:05:14.050 --> 00:05:22.460 for a couple of things so if you remember when we want to update a certain notes we'll need to send 00:05:22.450 --> 00:05:25.340 the ID of the notes through the AJAX call. 00:05:25.630 --> 00:05:30.310 And we said earlier that we need to store that ID in a session variable. 00:05:30.470 --> 00:05:32.450 So that's the first use of variables. 00:05:32.500 --> 00:05:38.920 The second use is going to be when we click on the Edie's person we're going to want to go to the Edie's 00:05:38.930 --> 00:05:39.560 mode. 00:05:39.850 --> 00:05:40.360 OK. 00:05:40.630 --> 00:05:44.560 So that's the Edie's mode. 00:05:44.600 --> 00:05:45.290 OK. 00:05:45.440 --> 00:05:49.040 So that's going to correspond to another variable. 00:05:49.050 --> 00:05:49.750 All right. 00:05:50.090 --> 00:05:50.330 All right. 00:05:50.320 --> 00:05:55.780 So next we're going to write some code to load notes. 00:05:55.810 --> 00:06:09.760 OK on page on page load so to load notes we're going to sent an AJAX call to our load notes file. 00:06:10.370 --> 00:06:10.640 Ok 00:06:14.840 --> 00:06:19.900 then we going to write some code for creating and unit. 00:06:19.900 --> 00:06:22.970 So once you click on that wasn't going to create and you know it. 00:06:23.020 --> 00:06:23.600 OK. 00:06:23.930 --> 00:06:35.570 So that's going to be an unit and that's going to be an AJAX call to another file which is create notes 00:06:35.720 --> 00:06:37.190 those BHB. 00:06:38.300 --> 00:06:47.740 And next we're going also to write some javascript code for typing inside the text area. 00:06:47.750 --> 00:06:48.340 OK. 00:06:48.620 --> 00:06:50.430 So that's for typing and is 00:06:53.540 --> 00:06:58.670 this tiny AJAX call is going to go to the file a basement. 00:07:01.040 --> 00:07:02.310 OK. 00:07:02.990 --> 00:07:07.410 And we're going to have a few other things like clicking on all. 00:07:07.430 --> 00:07:08.650 No it wasn't. 00:07:09.310 --> 00:07:14.580 OK. 00:07:14.690 --> 00:07:21.900 All this is going to be doing is loading the notes again like once. 00:07:22.190 --> 00:07:32.280 Also once you have edited the notes why deleting the ones you don't want if you click on the Dunbarton 00:07:33.050 --> 00:07:38.640 OK you want to do something else. 00:07:39.020 --> 00:07:39.650 OK. 00:07:39.680 --> 00:07:46.880 Well basically you're going to also be loading the notes again and you'll be using some previous code 00:07:46.940 --> 00:07:48.200 you created. 00:07:48.400 --> 00:08:00.230 And also if you click on edits you'll need to do a couple of things as well. 00:08:00.230 --> 00:08:11.570 So basically you're going to go to the Edie's married OK and you're going to show these Muslims. 00:08:15.880 --> 00:08:19.150 And also you can reduce the width of the nose and so on. 00:08:19.610 --> 00:08:20.710 OK. 00:08:21.520 --> 00:08:28.280 Also we are going to write some functions so these functions are going to take care of certain things 00:08:28.270 --> 00:08:30.790 like when you click on a notes. 00:08:31.640 --> 00:08:32.740 OK. 00:08:32.810 --> 00:08:35.230 You want to show the text area. 00:08:35.770 --> 00:08:41.690 Also when you click on the delete button 00:08:45.190 --> 00:08:47.090 we're going to use a function for that. 00:08:47.110 --> 00:08:55.870 So the reason why we're going to use functions for this is because you really need to refresh the functionality 00:08:56.210 --> 00:09:00.140 of clicking on a note or clicking on a delete button. 00:09:00.560 --> 00:09:04.670 And that's because again if you create it you know it. 00:09:05.000 --> 00:09:05.860 OK. 00:09:06.320 --> 00:09:11.950 And then you relo you reload the notes. 00:09:12.110 --> 00:09:16.290 There would be a new a shemale component in there. 00:09:16.370 --> 00:09:22.670 The functionality of clicking on the notes or on the delete button which is hidden inside but new notes 00:09:23.840 --> 00:09:29.210 is most there yet it's going to be there for all the old notes but not for the new one. 00:09:29.200 --> 00:09:37.420 So we're going to write the code of clicking on the notes and clicking on the delete button inside a 00:09:37.450 --> 00:09:45.130 function so that we can run the function again whenever we create and you know it's OK and we reload 00:09:45.120 --> 00:09:45.820 in notes. 00:09:46.100 --> 00:09:49.820 So this is going to make more sense in a bit. 00:09:50.030 --> 00:09:52.700 So we're going to have functions. 00:09:52.690 --> 00:09:56.380 So the first one is for clicking on the nodes. 00:09:56.600 --> 00:10:01.540 The other one is for clicking on the delete button. 00:10:01.630 --> 00:10:08.560 And finally we're going to have a function which will help us hide and show certain elements. 00:10:08.570 --> 00:10:09.490 OK. 00:10:10.070 --> 00:10:15.070 And this function is going to be the show height function. 00:10:15.660 --> 00:10:16.140 OK. 00:10:16.340 --> 00:10:19.570 So that's it for our javascript file. 00:10:19.580 --> 00:10:22.200 All right so now let's move to the PSP files. 00:10:22.310 --> 00:10:26.410 So we're going to start with the load notes file. 00:10:26.440 --> 00:10:34.930 All right so first of all we are going to start a session because we're going to need some session variables 00:10:35.060 --> 00:10:37.090 OK in the code. 00:10:37.360 --> 00:10:45.010 So it's going to be sessions stars as usual and then we're going to connect to the database. 00:10:45.370 --> 00:10:45.700 Why. 00:10:45.700 --> 00:10:53.090 Including our connection file as we did before. 00:10:56.360 --> 00:11:03.010 And then the first thing we're going to do here is get the user id OK because we're going to need the 00:11:03.010 --> 00:11:10.770 user ID to get all the notes corresponding to that specific use. 00:11:11.340 --> 00:11:16.550 OK. 00:11:19.000 --> 00:11:27.690 So first of all get the user id you're going to get the user id using the session variables. 00:11:27.700 --> 00:11:28.230 OK. 00:11:28.540 --> 00:11:35.130 So when the user logs in we store the user id in the session array. 00:11:35.530 --> 00:11:35.810 All right. 00:11:35.860 --> 00:11:43.590 And then we go into deletes any notes which have no content. 00:11:43.900 --> 00:11:44.490 OK. 00:11:44.920 --> 00:11:52.410 So we're going to go through all the notes now and if you find one we that was content will delete it 00:11:52.420 --> 00:11:53.290 . 00:11:53.590 --> 00:11:58.520 So you can run a query for this to delete EMPTY notes 00:12:02.170 --> 00:12:10.020 and once we've done that we're going to look for all nodes corresponding to our user ID. 00:12:10.330 --> 00:12:10.970 OK. 00:12:11.200 --> 00:12:12.520 So we're going to run another query 00:12:15.850 --> 00:12:17.170 to look for nodes 00:12:19.660 --> 00:12:20.380 corresponding 00:12:23.310 --> 00:12:27.510 or user ID. 00:12:30.190 --> 00:12:40.690 And once we find those then we're going to show them on our notes page if we don't find any. 00:12:40.690 --> 00:12:45.410 We just show an alert message saying something like you have not created any notes yet. 00:12:45.580 --> 00:12:46.400 OK. 00:12:47.020 --> 00:12:52.540 So show notes or alerts message. 00:12:54.070 --> 00:12:59.230 We'll also make sure that if there are any errors any queries will show an error message. 00:12:59.230 --> 00:13:03.640 OK so that's it for our low notes file. 00:13:03.640 --> 00:13:05.910 Now let's move to the next one. 00:13:05.920 --> 00:13:12.340 So first of all we're going to start a session as we did in the previous one and then connect to the 00:13:12.340 --> 00:13:13.740 database. 00:13:14.840 --> 00:13:27.100 And then after that as we are going to get the user id OK because we need to know which user has created 00:13:27.490 --> 00:13:34.210 the notes and also are going to get the time or the current time. 00:13:35.810 --> 00:13:36.170 OK. 00:13:36.200 --> 00:13:44.830 And we're going to do this using the time function and then after that we're going to run a query which 00:13:45.340 --> 00:13:46.930 will create. 00:13:47.080 --> 00:13:48.370 Oh and you know it's 00:13:52.090 --> 00:13:54.200 all right. 00:13:57.160 --> 00:14:01.490 If anything goes wrong we just going to return an error to the AJAX call. 00:14:01.870 --> 00:14:02.820 OK. 00:14:03.230 --> 00:14:03.610 All right. 00:14:03.610 --> 00:14:09.640 Now let's move to the next one. 00:14:09.700 --> 00:14:17.470 Again we're going to start with a we're starting a session then connecting to the database learn to 00:14:17.560 --> 00:14:18.610 update the notes. 00:14:18.610 --> 00:14:21.420 First of all we need to know the id of the notes. 00:14:21.650 --> 00:14:26.000 And basically this is going to be sent through the AJAX call. 00:14:26.080 --> 00:14:26.680 OK. 00:14:26.980 --> 00:14:36.730 So we're going to get the ID of the notes using the AJAX call or sense through data. 00:14:36.740 --> 00:14:41.340 Cool. 00:14:41.350 --> 00:14:42.850 So now of course the ID. 00:14:42.910 --> 00:14:49.010 Now we need to know the contents all the new contents of the note of the notes. 00:14:49.570 --> 00:14:54.230 But again it's also going to be sent through Ajax. 00:14:55.480 --> 00:15:03.680 And finally we need to know the time OK where the note was updated. 00:15:03.730 --> 00:15:11.790 So at that time as well so using or using all these elements are we going to run a query to updating 00:15:11.810 --> 00:15:12.940 that. 00:15:13.910 --> 00:15:15.080 OK. 00:15:15.790 --> 00:15:18.400 OK so now let's move to the next one. 00:15:18.500 --> 00:15:19.660 Deleting notes. 00:15:19.690 --> 00:15:24.670 So again we're going to start with session starts and connecting to the database. 00:15:24.670 --> 00:15:26.490 OK. 00:15:27.580 --> 00:15:36.610 So to delete the notes we need to know the id of the notes so gets the ID of the nodes through Ajax 00:15:36.620 --> 00:15:37.820 . 00:15:38.980 --> 00:15:40.170 OK. 00:15:40.450 --> 00:15:49.390 And once we get the ID of the notes we are going to run a query to delete the notes from the new table 00:15:49.410 --> 00:15:50.960 . 00:15:52.540 --> 00:15:53.400 OK. 00:15:53.940 --> 00:16:00.800 And again if anything goes wrong we are going to return an error to the AJAX call. 00:16:00.850 --> 00:16:06.780 All right so the next video we're going to start translating all these steps into javascript's a BHP 00:16:06.790 --> 00:16:10.750 code and build all the functionalities of our new management system