WEBVTT 00:05.230 --> 00:08.760 In this video you're going to get introduced to the different files. 00:08.800 --> 00:14.690 We're going to be building later on to create different functionalities behind our Web sites. 00:14.980 --> 00:18.840 So let's start with adding a trip. 00:18.880 --> 00:28.530 So you've created so far the model OK responsible for creating a new trick. 00:28.720 --> 00:34.240 So the next step is to create an AJAX call inside our jobs because file. 00:34.600 --> 00:41.830 So the call is going to be sent to a place file that we're going to call trips those BHB that's great. 00:41.850 --> 00:48.760 That's while. 00:49.140 --> 00:55.110 So this file is going to receive data from that form. 00:55.150 --> 00:58.270 It's going to process the data and everything is OK. 00:58.390 --> 01:04.960 It's going to add a new trip to our database on our table. 01:04.960 --> 01:08.280 So we're looking here at the CarShare trips table. 01:08.450 --> 01:09.170 OK. 01:09.550 --> 01:13.460 So we come back to this table in a bid to understand its structure. 01:13.650 --> 01:14.850 Okay. 01:15.010 --> 01:22.780 All right so the next thing we're going to need to have is the Edie's functionality so if we click on 01:22.780 --> 01:29.140 the Edie's button inside any of the chips that we have created previously then we'll be able to amend 01:29.320 --> 01:32.080 any of the details of that specific trip. 01:32.080 --> 01:32.590 All right. 01:32.770 --> 01:35.690 So we can have another ADX call in sight. 01:35.710 --> 01:42.520 Our job is because finally and that's cool is going to be sent to another file that we're going to call 01:43.870 --> 01:47.500 update Tripps those BHB 01:59.800 --> 02:00.600 Okay. 02:01.090 --> 02:06.790 Next we're going to have another call to make. 02:06.790 --> 02:14.080 When we click on the delete button right there again you're going to write some javascript code right 02:14.080 --> 02:20.060 there and we're going to send an eight us call to another file that we're going to call delete. 02:20.120 --> 02:20.510 TRIPP 02:29.540 --> 02:30.210 OK. 02:36.540 --> 02:37.200 All right. 02:37.330 --> 02:43.550 Now when we load the page the Tripps page we want to see all these trips. 02:43.570 --> 02:44.520 All right. 02:44.530 --> 02:50.390 So the way this works is by sending another AJAX call. 02:50.440 --> 02:58.190 So when we load the page with certain age just call to a file which will retrieve all the trips ok inside 02:59.100 --> 03:03.650 all the chips does that specific user has created in the past. 03:03.650 --> 03:04.100 All right. 03:04.270 --> 03:11.200 So again we can do this by sending an AJAX school to a file that we're going to call get Tripps those 03:11.210 --> 03:17.250 BHB. 03:17.850 --> 03:18.900 OK. 03:19.170 --> 03:20.240 So it's pretty simple. 03:20.240 --> 03:26.870 This file only is going to do it's going to look for all Tripps belonging to that specific user by running 03:26.870 --> 03:27.580 a query. 03:27.750 --> 03:32.360 And if everything is ok is going to short trips if something happens then it's going to show an error 03:32.360 --> 03:33.380 message. 03:33.380 --> 03:34.420 OK. 03:34.910 --> 03:38.890 Now the last thing to do is to go to the search page. 03:39.070 --> 03:39.680 OK. 03:40.010 --> 03:43.670 And build the search functionality. 03:43.760 --> 03:45.670 So the search function functionality 03:52.160 --> 03:53.420 works the following way. 03:53.420 --> 03:56.990 So when we click on the search button there will be an AJAX call. 03:57.200 --> 03:57.860 OK. 03:58.100 --> 04:04.880 So that call is going to be sent to another PSAP file which I'm going to call socialist BHB. 04:05.090 --> 04:12.770 So you get to write the AJAX call inside the jobs case file linked to the index file. 04:13.120 --> 04:13.520 OK. 04:13.590 --> 04:18.010 And then the call is going to be sent to a new file. 04:18.050 --> 04:20.780 We're going to call search that BHB 04:27.360 --> 04:28.110 right. 04:28.280 --> 04:32.360 Right now let's dive into a little bit more details. 04:32.490 --> 04:38.420 So let's start with creating a trip. 04:38.610 --> 04:45.910 So when we click on the Achebe's whatever we're going to need to fill the form and once we feel the 04:45.910 --> 04:53.750 form we need to send all the data that we see here usually we use the the method serialize array. 04:53.940 --> 04:54.480 OK. 04:54.500 --> 04:56.860 To get all the data from the form. 04:57.080 --> 05:06.260 But if you look at the structure of the CarShare craps table you can see that we've got some extra details 05:06.260 --> 05:09.570 that we still need to send to the PHS people. 05:10.010 --> 05:10.370 OK. 05:10.370 --> 05:13.340 So what we see here is the trip ID. 05:13.550 --> 05:14.720 OK. 05:15.160 --> 05:23.540 Well he's going to be auto incrementing as we see also the user ID that's the user related to this trip. 05:23.570 --> 05:23.860 OK. 05:23.870 --> 05:25.680 Or the user who created this trip. 05:25.680 --> 05:33.170 And then you're going to see details about the departure and destination of departure is whatever is 05:33.230 --> 05:42.500 right that the destination is whatever is right that but will see here something called the Patia coordinates 05:42.720 --> 05:44.540 and destination coordinates. 05:44.570 --> 05:49.390 So we're going to need to find these coordinates and send them to the page before. 05:49.730 --> 05:50.440 OK. 05:50.840 --> 05:53.940 Even before processing any PSAP data. 05:54.380 --> 06:01.780 So all the javascript site we got need to look for these coordinates the longitude and latitude of the 06:01.790 --> 06:08.060 departure as well as the longitude and latitude of the destination. 06:08.390 --> 06:09.550 OK. 06:10.820 --> 06:19.710 So to make things easier and avoid having to deal with one field containing both the longitude and latitude 06:19.730 --> 06:23.680 of our departure we can actually use two columns for this. 06:23.780 --> 06:24.290 OK. 06:24.360 --> 06:28.590 And just send each volume to one of those columns. 06:28.610 --> 06:37.090 So what they can do right now is change this column OK into two columns. 06:37.230 --> 06:37.650 So 06:41.660 --> 06:54.180 that it's odd and you call them right after departure. 06:54.690 --> 07:00.630 OK call its departure longitude. 07:00.820 --> 07:02.630 It's going to go for a voucher 07:07.540 --> 07:09.990 so the maximum is going to be. 07:11.400 --> 07:19.230 It's just having the floats anyway because the coordinates are the suit is a float. 07:19.390 --> 07:22.080 Anyway so here we go. 07:22.080 --> 07:26.450 So let's save this and let's create another one. 07:31.300 --> 07:35.000 The punch line is used right at the point at longitude 07:42.870 --> 07:43.860 OK. 07:44.190 --> 07:46.030 It's going to be a float to. 07:52.070 --> 07:54.110 Let's do the same thing with the destination 08:16.270 --> 08:18.520 and finally destination latitude 08:33.160 --> 08:34.040 All right. 08:36.130 --> 08:41.560 And now we can get rid of the coordinates column 08:44.840 --> 08:49.940 K and also the destination call then it's called 08:58.200 --> 08:58.700 OK. 08:58.710 --> 09:06.300 So once the form is submitted what's going to happen we're going to send all these values to the page 09:06.370 --> 09:14.070 file and we're going to check if the trip is regular and if everything is OK and we have no errors then 09:14.460 --> 09:21.300 we're going to store values inside the different fields on different columns of our table. 09:21.480 --> 09:25.120 So let's say that the trip is irregular. 09:25.340 --> 09:26.290 OK go. 09:26.320 --> 09:30.060 Every Monday Tuesday at 10:00 for example for example. 09:30.060 --> 09:32.470 So what's going to happen. 09:32.550 --> 09:33.600 We're going to go to 09:36.370 --> 09:40.810 all these fields are going to feel the departure departure longitude latitude. 09:40.900 --> 09:45.280 So we're going to use a Google GOOG code to do this I'm going to show you how to do all this. 09:45.290 --> 09:46.940 We're going to do the same thing for this nation. 09:46.990 --> 09:52.610 So we're going to get the lassitude on the javascript side before sending it to the phone. 09:53.080 --> 09:59.040 We're going to store the price the number of seats available and here when we come to regular We're 09:59.040 --> 10:01.890 going to store the value of Garrigan. 10:02.050 --> 10:06.450 So if you remember the value of this one was. 10:06.580 --> 10:06.910 Yes. 10:06.920 --> 10:08.030 Of the money that one was. 10:08.050 --> 10:08.920 No. 10:08.920 --> 10:15.810 So if it's regular then the value going to be soaring inside the regular field is going to be yes. 10:15.820 --> 10:16.370 OK. 10:16.690 --> 10:22.320 So we can have no dates and we're going to store the time there. 10:22.680 --> 10:23.110 OK. 10:23.110 --> 10:25.270 So that's why you saw it right there. 10:26.050 --> 10:28.110 And then we call on you Monday Tuesday. 10:28.190 --> 10:30.770 And the value of each of these fields was one. 10:30.870 --> 10:36.630 So since we've got that one checked on that one checked then we're going to store one right there on 10:36.640 --> 10:37.360 one right. 10:37.390 --> 10:39.790 We're going to leave all the others blank. 10:40.090 --> 10:40.300 OK. 10:40.300 --> 10:42.210 So that's how we're going to. 10:42.400 --> 10:44.630 A trip to the database. 10:44.920 --> 10:48.420 The edit function is going to be very similar. 10:48.720 --> 10:49.910 OK. 10:50.200 --> 10:54.530 So basically the only thing that's going to change is the query. 10:54.850 --> 10:56.450 Everything else is going to run the same. 10:56.440 --> 11:00.690 We're going to get the coordinates of the departure and the summation. 11:00.800 --> 11:01.530 OK. 11:01.570 --> 11:08.140 And then we're going to store the new values or just update the values based on the new values submitted 11:08.140 --> 11:10.030 by the user. 11:10.200 --> 11:12.160 OK. 11:12.670 --> 11:20.310 Now the question to ask is how do we know which trip we're going to open. 11:20.580 --> 11:22.540 If we click on any of these responses. 11:22.560 --> 11:29.430 So if I click on that one how do we know that we are talking about the battery when we click on that 11:29.430 --> 11:29.860 button. 11:30.000 --> 11:30.450 OK. 11:30.480 --> 11:33.880 In other words when you click on the edits. 11:34.020 --> 11:35.440 How am I going to feel. 11:35.460 --> 11:36.870 Fill the details. 11:36.980 --> 11:37.290 OK. 11:37.290 --> 11:43.950 Inside the form using that specific trip Well the there are many ways of doing this. 11:43.950 --> 11:49.560 Easiest way is by storing something inside this mustn't. 11:49.570 --> 11:55.050 So you can use a data attribute where we can store the ID of that specific trip. 11:55.200 --> 12:06.120 So when we retrieve the trips using the day space before we go in just to incite this Edie's button 12:06.810 --> 12:10.770 a data attributes referring to the ID of that trip. 12:10.770 --> 12:15.290 So when I click on this I'm going to send an AJAX call to another file. 12:15.450 --> 12:17.710 Ok I'm going to be using data on here. 12:17.980 --> 12:29.010 So we're going to retrieve details about the trip of ID whatever is stored inside but it doesn't. 12:29.270 --> 12:30.050 OK. 12:30.420 --> 12:31.830 So that's how we're going to do this. 12:31.830 --> 12:32.500 All right. 12:32.910 --> 12:37.550 So now we covered a trip it is a trip to lease a trip. 12:37.560 --> 12:39.510 We're going to use again that's ID. 12:39.690 --> 12:40.610 OK. 12:40.650 --> 12:48.110 Which is to say that MUSSEN to create a query which will just delete that strip from the table. 12:48.120 --> 12:49.290 All right. 12:49.890 --> 12:53.000 OK so best regarding Tripps management. 12:53.240 --> 12:56.080 OK. 12:56.280 --> 13:02.550 The next think on the final thing we're going to do is the search algorithm so the search algorithm 13:02.550 --> 13:06.600 is going to be a little bit more advanced than everything else. 13:06.840 --> 13:15.540 So the reason why is because we're going to need to find a way to look for Tripps not going from exactly 13:15.540 --> 13:21.510 to the departure to exactly the destination but we're going to need to look for our troops going from 13:22.020 --> 13:27.830 anywhere within a 10 miles radius from Bedford for example our departure to anywhere within 10 miles 13:27.840 --> 13:29.350 radius from London. 13:29.460 --> 13:29.860 OK. 13:30.060 --> 13:35.040 So if we were going just from Betfair to London I'm looking for exactly four trips going exactly from 13:35.040 --> 13:35.770 there to there. 13:35.850 --> 13:38.020 That would be a simple query to run. 13:38.070 --> 13:39.420 Now we need to do something else. 13:39.410 --> 13:43.830 We don't need to use the coordinates inside the database. 13:44.040 --> 13:44.730 OK. 13:44.730 --> 13:47.160 And look for all 13:49.720 --> 13:50.750 locations. 13:50.970 --> 13:51.780 OK. 13:51.860 --> 13:59.830 In the departure which are not far far away or less than 10 miles away from the departure submitted 13:59.830 --> 14:02.370 by the user and the same thing for the assassination. 14:02.380 --> 14:12.430 OK so we need to think about a proper algorithm to run ok and have some proper results. 14:12.430 --> 14:17.930 All right so in the next video we're going to start with the odd trip sea. 14:18.430 --> 14:20.320 And we're going to ride the Ajax goal. 14:20.470 --> 14:21.520 OK. 14:21.520 --> 14:26.290 Get the coordinates of both the departure and destination and then we're going to send all the data 14:26.410 --> 14:31.710 to the page file which is Tripps those BHP. 14:31.840 --> 14:32.260 Okay. 14:32.290 --> 14:36.820 And then we're going to see all the details inside our table.