WEBVTT

00:00:06.950 --> 00:00:13.020
In this video we're going to start writing code in the difference files we built earlier in order to

00:00:13.050 --> 00:00:16.280
build the functionalities of our new management system.

00:00:16.290 --> 00:00:22.400
So the first functionality we're going to build is loading the nodes once the new page is loaded.

00:00:22.860 --> 00:00:29.060
So to do this we're going to need to write an AJAX call in our jackscrews file.

00:00:29.280 --> 00:00:34.070
So that call is going to go to the load notes file.

00:00:34.170 --> 00:00:37.750
So going to need to write some code inside that's fine.

00:00:38.200 --> 00:00:38.680
OK.

00:00:38.940 --> 00:00:49.110
So before we go ahead we don't need to add some dummy data inside our notes table to make it easy for

00:00:49.110 --> 00:00:50.410
us to test our code.

00:00:50.630 --> 00:00:55.720
OK so let's write something inside the first record.

00:00:55.890 --> 00:01:02.060
So we're going to use the user id 3 for the content.

00:01:02.070 --> 00:01:03.570
Let's say this is a

00:01:06.600 --> 00:01:07.590
to me.

00:01:07.620 --> 00:01:11.490
1 for time it goes something like this.

00:01:11.490 --> 00:01:11.870
So

00:01:15.230 --> 00:01:16.650
OK.

00:01:17.330 --> 00:01:19.870
So that's our first record.

00:01:19.920 --> 00:01:22.380
Let's insert another record

00:01:24.780 --> 00:01:29.620
.

00:01:29.700 --> 00:01:31.410
Is a dummy.

00:01:31.590 --> 00:01:38.690
It's two and four times.

00:01:42.000 --> 00:01:42.640
OK.

00:01:43.100 --> 00:01:49.560
So now if we click on the notes table you can see the records there.

00:01:49.800 --> 00:01:50.300
OK.

00:01:50.610 --> 00:01:58.910
So now let's go to our javascript's file right now.

00:01:58.920 --> 00:01:59.550
AJAX call.

00:01:59.550 --> 00:02:02.850
So the AJAX call is going to be as following.

00:02:03.030 --> 00:02:07.660
So the seats I see is dollar sign those ADX.

00:02:07.820 --> 00:02:08.470
OK.

00:02:08.850 --> 00:02:09.510
And then

00:02:12.600 --> 00:02:16.900
between parents is we going to have curly brackets inside the curly brackets.

00:02:17.010 --> 00:02:20.010
We going to write the different barometers of our AJAX call.

00:02:20.100 --> 00:02:26.070
So the first part I would say is going to be the U R L and in our case it's going to go to the lower

00:02:26.080 --> 00:02:26.600
notes.

00:02:26.640 --> 00:02:27.990
Those pieces we found.

00:02:28.420 --> 00:02:40.160
Well OK then over the next barometer is going to be the success barometer.

00:02:40.200 --> 00:02:45.870
So we're going to write a function here to be executed if the AJAX call is successful.

00:02:45.870 --> 00:02:49.710
So the function is going to be as always.

00:02:49.710 --> 00:02:56.070
So we're going to give each one barometer let's call it data.

00:02:56.130 --> 00:03:02.090
So this is going to be was ever returned by our 8 8 just call if it's successful.

00:03:02.220 --> 00:03:02.840
OK.

00:03:03.090 --> 00:03:07.040
So we're going to do with that data.

00:03:07.110 --> 00:03:10.530
So if you remember in our notes page

00:03:14.670 --> 00:03:17.510
we had a div with an ID notes.

00:03:17.640 --> 00:03:18.260
OK.

00:03:18.450 --> 00:03:21.260
This is the notes Dave.

00:03:21.570 --> 00:03:22.090
OK.

00:03:22.290 --> 00:03:26.150
And we're going to use the age of school to fill.

00:03:26.200 --> 00:03:27.050
That's Dave.

00:03:27.140 --> 00:03:27.710
OK.

00:03:27.720 --> 00:03:31.380
Using our barometer data.

00:03:31.410 --> 00:03:31.930
All right.

00:03:32.070 --> 00:03:41.570
So let's go ahead and do this so we're going to select a div using its ID which is no it's

00:03:44.350 --> 00:03:44.940
OK.

00:03:45.060 --> 00:03:46.110
And then we're going to change.

00:03:46.110 --> 00:03:55.560
It's a shame I'll consent to the contents of the variable data.

00:03:55.930 --> 00:04:02.200
OK so let's save this right.

00:04:02.760 --> 00:04:08.810
So to start let's just go to the page file and just echo anything in there.

00:04:09.360 --> 00:04:09.820
OK.

00:04:09.850 --> 00:04:12.090
Make sure that our code is working.

00:04:12.240 --> 00:04:15.210
So let's go for example

00:04:18.090 --> 00:04:18.960
a div

00:04:24.900 --> 00:04:29.600
with some content saying this is dangerous.

00:04:30.350 --> 00:04:45.300
So if we save and refresh decode the page again so we can see our div right that our code is working

00:04:45.300 --> 00:04:45.700
for now.

00:04:45.780 --> 00:04:47.020
OK.

00:04:48.330 --> 00:04:51.200
Now let's try something a little bit more complicated.

00:04:51.210 --> 00:04:51.840
OK.

00:04:52.080 --> 00:04:57.020
So we're going to create a node just like this.

00:04:57.210 --> 00:04:58.930
So we're going to keep the div

00:05:03.130 --> 00:05:04.390
.

00:05:05.090 --> 00:05:05.400
And

00:05:09.000 --> 00:05:11.560
this plays a couple of divs inside this Dave.

00:05:11.790 --> 00:05:14.740
So first was going to be for the contents of our notes.

00:05:14.750 --> 00:05:17.400
And the second was very tight and tight.

00:05:17.400 --> 00:05:19.260
So let's go for the first Dave

00:05:26.020 --> 00:05:28.120
the second.

00:05:29.850 --> 00:05:39.660
So in the first they've destroyed something like this they do it in the second one

00:05:44.810 --> 00:05:51.160
.

00:05:52.800 --> 00:05:53.040
OK

00:05:55.950 --> 00:05:59.630
let's save and refresh.

00:06:00.990 --> 00:06:01.710
OK.

00:06:02.010 --> 00:06:06.450
Now we need to add some styling to get something similar to this.

00:06:06.450 --> 00:06:06.680
OK.

00:06:06.690 --> 00:06:11.880
So we're going to do we're going to give the first div a class OK.

00:06:12.150 --> 00:06:18.520
So let's call this note or text.

00:06:18.850 --> 00:06:21.370
Ok for the content of what is it on.

00:06:21.410 --> 00:06:28.260
Let's give it another clause or a reasonable time text

00:06:32.040 --> 00:06:35.320
to give this nice background to both of us.

00:06:35.400 --> 00:06:40.080
We can give a class to the containing div to its name its

00:06:45.180 --> 00:06:46.990
notes header for example.

00:06:47.360 --> 00:07:01.140
OK so now we can go back to our notes page and some CSSA styling in the head elements.

00:07:01.490 --> 00:07:04.530
OK.

00:07:06.480 --> 00:07:07.920
So let's start with

00:07:10.440 --> 00:07:12.880
the notes header.

00:07:13.310 --> 00:07:19.790
So we're looking at the notes had a class.

00:07:23.190 --> 00:07:25.040
OK.

00:07:26.000 --> 00:07:28.390
So let's start with the border.

00:07:28.560 --> 00:07:29.070
OK.

00:07:29.370 --> 00:07:32.880
So order property.

00:07:32.940 --> 00:07:49.520
So let's give it for example with of one pixel and let's go for a solid soil and Agricole OK save fresh

00:07:49.560 --> 00:07:50.890
.

00:07:52.350 --> 00:07:53.330
OK.

00:07:53.390 --> 00:07:55.980
Now let's add some border radius

00:07:58.480 --> 00:08:00.220
.

00:08:00.690 --> 00:08:08.100
So let's go for to big cells for example.

00:08:08.500 --> 00:08:09.360
Right.

00:08:09.570 --> 00:08:11.300
That looks better.

00:08:11.430 --> 00:08:19.720
And if we echo a couple of days we can see how much margin we need between the two divs.

00:08:19.760 --> 00:08:28.460
So let's try this eco that one then echo another one.

00:08:30.620 --> 00:08:37.320
OK so let's add some margin bottom and see how it works

00:08:37.320 --> 00:08:44.670
.

00:08:45.770 --> 00:08:48.630
Let's go with episodes.

00:08:50.260 --> 00:08:51.230
OK.

00:08:51.260 --> 00:08:53.640
All right.

00:08:53.640 --> 00:09:03.830
Also you will notice that when we hover or the notes the cursor does a pointer.

00:09:04.040 --> 00:09:11.640
So that's property as well as a

00:09:14.460 --> 00:09:17.730
pointer.

00:09:19.950 --> 00:09:22.410
Save it.

00:09:23.160 --> 00:09:26.750
OK that's works.

00:09:26.890 --> 00:09:27.240
All right.

00:09:27.240 --> 00:09:30.020
Now let's add some padding to our Dave.

00:09:30.060 --> 00:09:34.580
So we want somebody on the left hand side and right hand side of the Dave.

00:09:34.660 --> 00:09:35.150
OK.

00:09:35.150 --> 00:09:40.090
So to do this we're going to use two values for the putting property.

00:09:40.170 --> 00:09:40.700
All right.

00:09:40.770 --> 00:09:41.340
So

00:09:45.840 --> 00:09:47.660
the first one is going to be 0.

00:09:47.790 --> 00:09:48.440
OK.

00:09:48.440 --> 00:09:56.360
We don't want any top wasn't battings what we want to big sales for example for the left and right hand

00:09:56.370 --> 00:09:57.400
side bindings.

00:09:57.600 --> 00:10:00.880
OK so we save and refresh our.

00:10:01.850 --> 00:10:04.550
OK.

00:10:05.370 --> 00:10:09.300
All right now let's add this nice background to our Dave.

00:10:09.410 --> 00:10:11.340
So going to use the background property.

00:10:11.540 --> 00:10:12.430
OK.

00:10:12.440 --> 00:10:16.170
And then we're going to use linear gradients.

00:10:17.150 --> 00:10:26.250
So the syntax is linear gradients and we're going to go for two callers.

00:10:26.330 --> 00:10:34.750
OK so let's have a look using our color because we're going to use the color pick an eye dropper.

00:10:34.960 --> 00:10:36.000
OK.

00:10:36.120 --> 00:10:37.470
So the first

00:10:40.230 --> 00:10:43.020
color OK let's try again

00:10:46.630 --> 00:10:52.090
the first caller is going to be white.

00:10:52.150 --> 00:10:52.400
OK

00:11:03.240 --> 00:11:03.540
and

00:11:08.490 --> 00:11:13.360
the second top is going to be this great color

00:11:16.080 --> 00:11:18.060
so it could be that

00:11:21.300 --> 00:11:22.130
right.

00:11:22.500 --> 00:11:26.940
So let's save and refresh the page.

00:11:28.570 --> 00:11:33.660
All right now let's style the device inside our notes Hedda.

00:11:33.890 --> 00:11:34.470
OK.

00:11:34.640 --> 00:11:38.540
So we of course the nose contents and the date and time.

00:11:38.550 --> 00:11:40.180
So let's start with the news content.

00:11:40.350 --> 00:11:46.810
So if you remember we gave this one a class that we called text.

00:11:46.970 --> 00:11:47.670
OK.

00:11:47.940 --> 00:11:50.280
So let's dial this glance

00:11:54.100 --> 00:11:58.190
.

00:11:59.040 --> 00:12:03.710
OK so first of all are we going to change the font size.

00:12:03.720 --> 00:12:09.720
OK so let's increase it to 20 pixels

00:12:15.080 --> 00:12:16.290
pay

00:12:20.090 --> 00:12:21.600
at the expense.

00:12:21.990 --> 00:12:34.150
And also if we get a big notes like this one OK with some content beyond one line we won't just type

00:12:34.200 --> 00:12:40.380
these notes in a way that only the first line appears with three dots at the end.

00:12:40.500 --> 00:12:43.580
OK so what are we going to do.

00:12:43.590 --> 00:12:46.640
We're going to add a few properties.

00:12:46.710 --> 00:12:52.330
So the first one is going to be the overflow property thus we're going to say to hit it.

00:12:52.640 --> 00:12:53.330
OK.

00:12:53.850 --> 00:13:00.090
So to test this list make the contents of our first notes longer.

00:13:00.170 --> 00:13:00.670
OK.

00:13:00.840 --> 00:13:07.220
So we're going to go back to our BHB file and change this

00:13:12.570 --> 00:13:14.730
to something longer like this.

00:13:14.790 --> 00:13:18.750
So let's save and refresh.

00:13:19.830 --> 00:13:26.520
OK so other movements the content of our note is a rubbed inside the containing div so to avoid this

00:13:26.660 --> 00:13:30.810
we're going to add another property to our CNN signing.

00:13:30.960 --> 00:13:32.910
And that's going to be whitespace.

00:13:32.900 --> 00:13:33.990
OK.

00:13:34.440 --> 00:13:39.260
So if you remember all this has been covered already in this has a chapter.

00:13:39.260 --> 00:13:40.140
So as a reminder.

00:13:40.130 --> 00:13:45.940
So this is going to be said to know wrap like this.

00:13:46.230 --> 00:13:46.830
OK.

00:13:46.830 --> 00:13:53.030
So if we save and refresh we can see that our notes now is not corrupt.

00:13:53.190 --> 00:14:00.330
But to get something like this with three dots are the end all we need to do is add another property

00:14:00.330 --> 00:14:06.130
which is teks overflow that's going to set to ellipses.

00:14:06.450 --> 00:14:07.500
OK.

00:14:07.500 --> 00:14:12.310
Now if you say refresh this is what you get.

00:14:13.230 --> 00:14:15.220
OK.

00:14:15.220 --> 00:14:19.850
Now again the same styling to the date and time section.

00:14:20.120 --> 00:14:26.230
So the corresponding clause for that is time text.

00:14:26.490 --> 00:14:34.000
Ok we can just copy paste these properties in.

00:14:34.440 --> 00:14:34.630
OK

00:14:34.800 --> 00:14:41.550
.

00:14:47.650 --> 00:14:50.920
OK so at the moment we don't see any effects because we've got plenty of space.

00:14:50.990 --> 00:14:51.660
OK.

00:14:51.840 --> 00:14:59.390
But just in case the device is too small then you will see the effects just like the effects we've seen

00:14:59.390 --> 00:15:01.660
for the contents of the note.

00:15:01.860 --> 00:15:09.600
All right now we happy with our styling so we can go back to our PSP file and load notes straight from

00:15:09.620 --> 00:15:11.010
our New table.

00:15:11.140 --> 00:15:11.850
OK.

00:15:11.880 --> 00:15:14.280
So first of all let's have a quick look.

00:15:14.600 --> 00:15:16.550
As the user ID.

00:15:16.620 --> 00:15:16.980
OK

00:15:21.120 --> 00:15:30.980
so our user other moments has caused a user id 11 so I'm going to go to the news table and change the

00:15:30.990 --> 00:15:31.840
user IDs.

00:15:31.910 --> 00:15:32.280
OK.

00:15:32.280 --> 00:15:33.570
In the bomi content

00:15:37.050 --> 00:15:37.830
to 11

00:15:37.850 --> 00:15:43.760
.

00:15:49.800 --> 00:15:52.890
OK.

00:15:52.880 --> 00:15:53.540
All right.

00:15:53.630 --> 00:15:57.380
So let's go back to the PSP file.

00:15:57.380 --> 00:16:00.660
So first of all we need to get the user ID.

00:16:00.660 --> 00:16:08.910
OK so the user ID if you remember when we lock the user and we store their user ID in the session variable

00:16:09.250 --> 00:16:09.850
OK.

00:16:10.130 --> 00:16:17.660
So to get the user id so that its source inside a variable user id like this.

00:16:17.690 --> 00:16:21.690
So you get to go to the session array.

00:16:21.900 --> 00:16:23.190
OK.

00:16:23.340 --> 00:16:26.280
And the user id

00:16:30.960 --> 00:16:37.940
is going to be corresponding to the user id key inside the as a creative array.

00:16:38.140 --> 00:16:38.640
OK.

00:16:38.750 --> 00:16:40.190
So thats our user ID.

00:16:40.350 --> 00:16:40.600
OK.

00:16:40.620 --> 00:16:47.620
Now we can run the query to delete EMPTY nodes.

00:16:47.630 --> 00:16:55.050
So the reason why we do this is because if you create a new node like this despite clicking on other

00:16:55.050 --> 00:17:05.470
nodes at this moment in time actually a new record has been added to the nodes table.

00:17:05.550 --> 00:17:09.680
OK and thats in the final application actually.

00:17:09.680 --> 00:17:16.530
So if you go back to all notes without writing anything there we need to ignore that new record because

00:17:16.740 --> 00:17:17.770
its empty.

00:17:18.120 --> 00:17:24.960
So to do this we are going to run this query to delete all empty notes.

00:17:25.120 --> 00:17:25.730
Right.

00:17:25.970 --> 00:17:34.000
So first of all we need to write a query and source in the variable.

00:17:33.990 --> 00:17:42.510
Q Well so the query is going to be simply delete from our table notes.

00:17:42.740 --> 00:17:50.420
OK where we have no content so no context means no its equals

00:17:56.720 --> 00:17:58.060
an empty string like this.

00:17:58.260 --> 00:18:03.700
OK so now we need to execute our query.

00:18:03.870 --> 00:18:11.480
So we are going to store the result inside a variable results and execute the query we're going to use

00:18:11.690 --> 00:18:18.070
the most will query function which will take a couple of promises.

00:18:18.100 --> 00:18:23.600
Our link variable where we start our connection inside the connection file.

00:18:24.140 --> 00:18:25.450
OK.

00:18:25.590 --> 00:18:30.940
And the second barometer is going to be our query like this.

00:18:31.220 --> 00:18:34.310
OK.

00:18:34.320 --> 00:18:34.650
All right.

00:18:34.640 --> 00:18:41.240
In the next video we're going to check if there are any errors or if there were any errors while running

00:18:41.240 --> 00:18:42.540
this query.

00:18:43.020 --> 00:18:48.700
And then if everything is OK we're going to move to the next step which is looking for news corresponding

00:18:48.830 --> 00:18:49.380
to this user