WEBVTT 00:05.690 --> 00:13.440 In this video you're going to get introduced to the back end and understand how to become a web developer. 00:13.460 --> 00:20.330 Now if you are comfortable with ACMA LCROSS and JavaScript you must be able to create static web pages 00:20.660 --> 00:23.330 and save them from a server. 00:23.330 --> 00:31.370 So this is how it works at the moment so your users will Type A you RL in their browser and then they 00:31.370 --> 00:35.760 will send a request through that you RL to a server. 00:35.840 --> 00:43.550 Now depending on your file you will have a few requests which are gonna be sent to the server including 00:43.580 --> 00:53.690 your e-mail file your CSX file any JavaScript files any pictures and so on. 00:53.720 --> 01:01.220 So all these files are going to be served as static contents from the server then your browser is going 01:01.220 --> 01:07.340 to combine those files and display the web page for you. 01:07.340 --> 01:11.270 So this is how it works for static contents. 01:11.330 --> 01:17.430 So what you see in the left hand side is what we call the front end that is the client side. 01:17.780 --> 01:24.170 And that's basically your clients or your user sitting in front of a computer and having access to a 01:24.230 --> 01:24.680 browser. 01:25.010 --> 01:26.690 So that's the front end. 01:26.690 --> 01:31.240 Now on the right hand side that's the server side or the back end. 01:31.740 --> 01:39.770 Now if you work only with a sham LCROSS and JavaScript and create a static web pages then all your work 01:39.950 --> 01:47.690 will contribute to the front end because you are building those HMAS Success and JavaScript files which 01:47.690 --> 01:56.030 are needed by the browser to display a web page and your work at the moments is very limited on the 01:56.060 --> 01:56.830 back end. 01:56.990 --> 02:03.500 And all you have to do at the moment is upload those files to the back end without having to write any 02:03.560 --> 02:05.780 code on the back end. 02:05.780 --> 02:12.570 So in this case you can work as a front end web developer and create a static web pages. 02:12.590 --> 02:19.220 Now if you want to work as a bike and a web developer as well and become a full stack web developer 02:19.250 --> 02:26.270 meaning that you must master both the front end and the back end you need to be able to write code on 02:26.270 --> 02:31.070 the server side and create dynamic web pages. 02:31.070 --> 02:36.860 Now to understand the difference between a dynamic web page and a static web page let's have a look 02:36.890 --> 02:40.160 at these two YouTube videos. 02:40.160 --> 02:46.370 Now if you check the web pages of these two videos you will see that they are actually both following 02:46.370 --> 02:50.400 the same templates and what YouTube is doing. 02:50.400 --> 02:56.120 It's actually feeling that template using the details of each video. 02:56.120 --> 03:03.110 So those details include things like the title of the video the number of use the likes dislikes the 03:03.110 --> 03:10.160 user the number of subscribers for that user the description of the video and so on. 03:10.160 --> 03:13.170 So basically we are using these same templates. 03:13.610 --> 03:22.490 Now if you check the You Are URLs of each video you'll see that they are actually using the same you 03:22.540 --> 03:31.760 RL But the only thing that changes is what we call a query which is coming up soon after the question 03:31.760 --> 03:39.940 mark to that query is specifying the value of a parameter V. 03:39.940 --> 03:46.480 So YouTube gave each of its videos a parameter V to identify that video. 03:47.170 --> 03:56.540 So if you type any your URL starting with this chunk and followed by V equals something like that then 03:56.750 --> 04:03.920 YouTube is going to look for the correct video matching that value and he's going to fill this templates 04:03.920 --> 04:08.480 for you using the details of the video. 04:08.600 --> 04:11.860 It could find in the database. 04:11.970 --> 04:15.160 So this is a good example of a dynamic web page. 04:15.160 --> 04:21.920 Now let's go back to the static case where users type A U.R.L. and get a static web page. 04:21.930 --> 04:31.920 Now let's go through a simple analogy representing the static web page or the static web page process. 04:32.070 --> 04:39.930 Now if you go to a P.C. shop and you ask if you can have a laptop that you can see right there on the 04:39.930 --> 04:44.480 shelf then that is your requests. 04:44.640 --> 04:47.210 And as a response you get. 04:47.220 --> 04:47.750 Yes sure. 04:47.760 --> 04:50.300 You can have that laptop right now. 04:50.340 --> 05:00.360 So basically before asking for this laptop you actually knew exactly what you wanted and you knew the 05:00.420 --> 05:02.060 location of that laptop. 05:03.210 --> 05:12.860 So when you are requesting a static web page you'd know exactly the U.R.L. of that web page. 05:12.880 --> 05:16.350 And if you miss type Liwa l it's not going to work. 05:16.390 --> 05:24.340 So you know where the web page is located on the server because you've got the right you are out and 05:24.340 --> 05:33.650 also all the server has got to do is hand the web page to you without having to do too much work. 05:33.670 --> 05:41.560 So the front end in this example is yourself behind the till and the back end is the shop or the shop 05:42.050 --> 05:44.070 didn't have to do too much work. 05:44.380 --> 05:51.340 It's very minimal work here because all they had to do is hand the laptop to you. 05:51.430 --> 05:57.450 Now let's compare this example with an example where the back end has got more work to do. 05:58.240 --> 06:04.890 So let's say that you want to buy a laptop but this time you want a customized laptop. 06:05.560 --> 06:12.460 So let's say that you want a laptop fulfilling certain conditions like the disk size memory color etc. 06:13.180 --> 06:19.630 So let's keep it simple for now and say that you want a customized laptop but you can't buy off the 06:19.630 --> 06:21.370 shelf. 06:21.370 --> 06:30.390 So you're not going to go to that shop to buy that laptop because you simply won't find it. 06:31.080 --> 06:38.310 So let's say that you are going to send a request to the assembly line and a good example of this is 06:38.640 --> 06:46.590 the company Bell who creates or can make customized laptops for you depending on the specifications 06:46.590 --> 06:49.090 that you provide when placing your order. 06:49.110 --> 06:54.410 Now the assembly line is where you've got all the machines assembling computers. 06:54.510 --> 06:58.350 Now this will need something else to operate. 06:58.350 --> 07:04.740 It needs the P.C. components which are normally stored inside a warehouse. 07:04.830 --> 07:15.230 Now the assembly line will send a query to the warehouse asking for the necessary components in order 07:15.260 --> 07:16.790 for them to build your laptop. 07:17.810 --> 07:24.610 So once they get those components from the warehouse then now they are ready to build your laptop. 07:24.860 --> 07:30.870 So once they assemble your laptop they're going to ship it to you. 07:30.920 --> 07:36.770 Now let's go back to our world and understand how this analogy works. 07:36.800 --> 07:42.540 So on the left hand side we had a client ordering a customized laptop. 07:42.620 --> 07:43.010 Right. 07:43.970 --> 07:51.230 So when talking about dynamic web pages we're going to have the front end where the user types a You 07:51.230 --> 07:54.710 are all asking for a dynamic web page. 07:54.710 --> 07:57.290 So that's why he's asking for a customized laptop. 07:57.290 --> 08:04.270 And that's when he's asking actually for a customized ásgeir web page. 08:04.290 --> 08:11.720 Now the assembly line is going to be represented by the server and then up inside the server. 08:11.750 --> 08:12.950 So what does it mean. 08:12.950 --> 08:23.570 So in YouTube's case YouTube has gotten up inside its server which builds a web page for you every time 08:23.570 --> 08:25.700 you ask for a video. 08:25.700 --> 08:34.040 So that's up is going to populate that templates and display a nice video web page for you. 08:34.280 --> 08:41.380 And then we've got a database which is the equivalent of the warehouse. 08:41.480 --> 08:50.060 Now in order for YouTube to build the webpage for you it needs to retrieve the video details which are 08:50.060 --> 08:52.910 stored inside a database. 08:52.910 --> 09:01.090 And he's going to use those video details to build the templates or populate the template for you. 09:01.150 --> 09:03.320 And that's basically how it works. 09:04.620 --> 09:09.810 First of all the user is going to send a request to the server through a U.R.L.. 09:10.230 --> 09:15.870 And by the way the URL is going to be generated by the Web site. 09:15.870 --> 09:24.060 Once you click on the search button so you don't have to type the URL manually as you know so in this 09:24.060 --> 09:30.510 case we want a customized Web page showing properties not further than five kilometres from Cambridge 09:30.950 --> 09:33.630 where they rent between 500 and 1000 pounds. 09:33.870 --> 09:40.750 And a number of bedrooms between two and three so all these promises are going to be included in the 09:40.750 --> 09:41.160 euro. 09:41.560 --> 09:44.450 And then we're going to send a request to the server. 09:44.620 --> 09:54.330 Now once the server receives our request the up inside the server is going to transform our request 09:55.100 --> 10:00.590 or our query inside the URL to a javascript object which looks like this. 10:00.610 --> 10:03.740 So you've got a location a max distance. 10:03.750 --> 10:12.550 Rents mean rents Marx etc. and then the OP is going to do some further work and now is going to realize 10:12.760 --> 10:19.450 that it needs to query these details inside the database of properties. 10:19.450 --> 10:28.020 So you're going to have a query running in the database which looks like this so you will find a table 10:28.020 --> 10:31.800 inside the database looking like this. 10:32.040 --> 10:38.610 So this is gonna be for example the properties table and for each property you're going to have certain 10:38.610 --> 10:46.440 details like the idea of the property its location the rent number of bedrooms etc.. 10:46.470 --> 10:51.200 So once you run this query if any properties are found. 10:51.240 --> 10:57.030 So in this example let's say that that property fulfills the conditions of the search since the rent 10:57.660 --> 10:59.850 is between 500 and 1000. 10:59.880 --> 11:03.280 And also we are fulfilling the other conditions. 11:03.450 --> 11:13.530 So once you find these properties then the database is going to send a response to our up like this 11:14.220 --> 11:20.010 and then our job is gonna start working again and he's going to use the details of those properties 11:20.010 --> 11:28.750 we found to build the customized ACA email web page which is going to be served to the user by these 11:28.750 --> 11:36.890 seven and then the browser is going to display that customized HMO web page hopefully this gave you 11:36.890 --> 11:40.280 a good understanding of how the back end works. 11:40.340 --> 11:48.410 Now the AAP that is inside the server and which does all the work from receiving the request from the 11:48.440 --> 11:55.340 client to sending the query to the database to receiving the response from the database and building 11:55.550 --> 11:57.670 the customized webpage. 11:58.040 --> 12:07.370 That's what you need to build inside your server when building a bike and websites or a dynamic web 12:07.370 --> 12:07.730 site. 12:08.330 --> 12:15.230 So in order for you to do that you need to learn the right technology which is supported by your server 12:15.980 --> 12:24.320 then use that technology to write code which can execute on the service site. 12:24.380 --> 12:27.440 There are many technologies which you can learn for this purpose. 12:27.440 --> 12:32.960 This includes no J.S. BHP Python Ruby and many others. 12:32.960 --> 12:38.310 Now the most popular one at the moments is no James. 12:38.520 --> 12:44.000 Thus is the technology or platform you are going to learn later on in this module. 12:44.000 --> 12:50.210 Before we continue to further examples I'd like to mention something important when you make a request 12:50.210 --> 12:56.830 to a server through a U.R.L. and the server needs information from a database. 12:56.930 --> 13:03.620 Sometimes the database is not going to be located on the same server so your server or your app is going 13:03.620 --> 13:14.150 to query a database located inside another server and then is going to receive a response and then your 13:14.150 --> 13:17.550 app is going to respond to the user. 13:17.840 --> 13:23.460 To illustrate this you can have a look at any websites using Facebook comments. 13:23.510 --> 13:31.190 So when you load this web page for example the comments that you see there are retrieved from Facebook 13:31.250 --> 13:32.510 database. 13:32.510 --> 13:37.480 They are not retrieved from this website's database. 13:37.580 --> 13:45.320 So this is a really good example showing that your app can actually communicate with a database outside 13:45.380 --> 13:51.350 your server and retrieve any data it needs to be delivered to your end users. 13:51.350 --> 13:55.960 Now let's go through some further examples and explore what's happening behind the scenes. 13:56.030 --> 13:58.760 So we're going to go back to our YouTube example. 13:58.760 --> 14:01.220 So here is the video web page. 14:01.250 --> 14:07.160 As we said earlier YouTube will populate this template using details of this video. 14:07.880 --> 14:11.600 So to retrieve those details YouTube will need to use. 14:11.600 --> 14:14.470 That's a value that you find in the world. 14:14.570 --> 14:16.420 So here is how it works. 14:16.580 --> 14:24.380 The end user are the front end is going to type this you url or the URL is going to be generated somehow 14:24.560 --> 14:27.410 for example from the search results. 14:27.410 --> 14:31.320 So a request is going to be sent to the YouTube server. 14:31.340 --> 14:37.160 This request is going to be received by the app which is hosted on this server. 14:37.160 --> 14:45.080 Now this app will need to communicate with a database and ask for details about the video which has 14:45.080 --> 14:48.090 got this value in the database. 14:48.110 --> 14:49.860 So this is how it looks like. 14:50.060 --> 14:59.320 So the videos table in YouTube which is gonna be inside a database will contain details like these ones. 14:59.330 --> 15:06.620 So the value we talked about earlier the title of the video the user I.D. This corresponds to the user 15:06.620 --> 15:15.410 who uploaded the video the number of used likes dislikes and so on so we are interested now in the video 15:15.770 --> 15:20.380 with the V value which is equal to that value. 15:20.720 --> 15:30.100 So inside the database we're going to look for that video and once we find that value then that's the 15:30.160 --> 15:31.540 row we are looking for. 15:32.470 --> 15:39.220 So what's gonna happen now is we're going to get all the details of that row and that corresponds to 15:39.220 --> 15:41.910 the details of our video. 15:41.920 --> 15:48.940 Now if you check the video page you'll see that there are some details about the user corresponding 15:48.940 --> 15:50.110 to that video. 15:50.110 --> 15:54.530 So this includes their user name the number of subscribers. 15:54.850 --> 16:01.900 So to retrieve those details the app will need to run another query to another table and that's the 16:01.900 --> 16:03.410 user's table. 16:03.490 --> 16:09.910 So he's going to use the user I.D. we had there to find details about that specific user. 16:10.120 --> 16:13.810 So this includes their user name number of subscribers and so. 16:14.590 --> 16:19.280 So the query here is going to be selects all the rows with that user I.D.. 16:19.450 --> 16:28.360 And here we go once we find that row we just get the details of that row and then we use those details 16:28.570 --> 16:31.020 to populate our templates. 16:31.030 --> 16:36.450 Now let's take another example where you search a certain keyword in YouTube. 16:36.700 --> 16:41.040 So the results will be a web page like this. 16:41.310 --> 16:48.340 So again this is a template and it's filled with the results which are retrieved from a database. 16:48.420 --> 16:50.610 So let's understand how this works. 16:50.640 --> 16:58.110 So the user is going to send a request using this you URL to the server and in the request you will 16:58.170 --> 17:05.780 see that there is a query and there is a value that search query which is said to nature. 17:05.940 --> 17:08.110 So it does happening ask the front end. 17:08.250 --> 17:16.980 Now once the server receives the request with that you URL then is going to break down the query and 17:16.980 --> 17:25.920 he's going to communicate with the videos database looking for all videos with a title containing variants 17:25.950 --> 17:27.780 of the keyword nature. 17:27.840 --> 17:33.300 So if the title contains nature then that's going to be included in the results if it contains a word 17:33.300 --> 17:34.980 like natural for example. 17:34.980 --> 17:41.710 Then it's also going to be included in the results because Nate natural is a variant of nature. 17:41.790 --> 17:43.840 So here's how it works. 17:43.860 --> 17:52.110 So that's our videos table inside the database so we're looking at this column title. 17:52.510 --> 17:59.560 So the query to run is selecting all the rows with a title including variance of nature. 17:59.560 --> 18:09.630 So once we find matches the database is going to send those matches back to the app. 18:09.730 --> 18:15.820 And then the app is going to build the web page using those matches and then the web page is going to 18:15.820 --> 18:19.240 be sent back to the front end in the next video. 18:19.260 --> 18:20.770 We will check some other examples.