1 00:00:00,240 --> 00:00:05,130 In this lesson we will be creating the front end side that will look like this. 2 00:00:05,220 --> 00:00:08,550 This is what I made using Jake where are you mobile. 3 00:00:08,550 --> 00:00:13,280 Let's see what this page will look like when we see it through a smartphone device. 4 00:00:13,590 --> 00:00:19,860 We can change the settings by clicking on the dots on the right corner choose more tools and click on 5 00:00:19,860 --> 00:00:20,960 developer tools. 6 00:00:22,010 --> 00:00:27,670 On the left corner you will see a button showing pixel to excel. 7 00:00:27,740 --> 00:00:31,880 You can change it to other devices like iPhone or iPads. 8 00:00:31,880 --> 00:00:35,940 Now let's go back to the regular screen and get on with the codes. 9 00:00:36,110 --> 00:00:42,950 We will start creating an index HDMI all file first right click on the template directory and choose 10 00:00:42,950 --> 00:00:43,970 new. 11 00:00:44,180 --> 00:00:48,650 Then choose HDMI all file and name the spell index and hit. 12 00:00:48,700 --> 00:00:49,500 OK. 13 00:00:49,760 --> 00:00:54,230 Check the templates folder to see if the index HDMI Alpha has been created. 14 00:00:54,530 --> 00:00:57,390 You will see some codes written in the file already. 15 00:00:57,500 --> 00:00:59,990 These codes will be set as default. 16 00:00:59,990 --> 00:01:03,250 Now we need to invoke this HDMI all from the server. 17 00:01:03,260 --> 00:01:07,430 P Why file before we go to the server P Why file. 18 00:01:07,430 --> 00:01:14,920 Let's check on the config P why you will see that we set templates to drone app slash templates. 19 00:01:15,320 --> 00:01:18,980 Static to drone apps less static. 20 00:01:18,980 --> 00:01:23,740 We also set flask which already has figured out where the templates are. 21 00:01:23,930 --> 00:01:26,940 Now we can go to the server IP rifle. 22 00:01:27,140 --> 00:01:30,380 Here we can easily invoke the HDMI Alpha. 23 00:01:30,440 --> 00:01:35,620 First we need to import from flask import render template. 24 00:01:36,110 --> 00:01:40,320 In our previous lesson we set the site to return Hello World. 25 00:01:40,340 --> 00:01:46,200 Here we can change this to return render template followed by index age TMM. 26 00:01:46,430 --> 00:01:52,910 When you go to the link hello world will no longer show but you will be able to see the things we sent 27 00:01:53,060 --> 00:01:53,980 in the index age. 28 00:01:53,980 --> 00:01:55,010 GM Alpha. 29 00:01:55,310 --> 00:02:01,570 Let's go back to the HDMI M.L. file and start writing as we talked in our previous lesson. 30 00:02:01,610 --> 00:02:03,140 We will be writing based on J. 31 00:02:03,140 --> 00:02:04,620 Query mobile. 32 00:02:04,820 --> 00:02:10,040 For those of you who want to know more details on the J query mobile you can follow their documents 33 00:02:10,040 --> 00:02:10,520 as well. 34 00:02:11,750 --> 00:02:13,430 We'll start the metadata. 35 00:02:13,430 --> 00:02:21,260 Name will be viewport and content will be width equals device width followed by initial skill set to 36 00:02:21,260 --> 00:02:28,340 1 by setting this the site will be stretched out to fit nicely in the mobile screen for the link we 37 00:02:28,340 --> 00:02:30,160 want to invoke the CSX. 38 00:02:30,170 --> 00:02:35,080 So we set the RTL to style sheet now for the H ref. 39 00:02:35,090 --> 00:02:40,690 Remember we set the CSX file from J quarry and the static folder to load this. 40 00:02:40,700 --> 00:02:45,540 We will set slash static slash CSX slash J. 41 00:02:45,550 --> 00:02:54,730 Query dot mobile hyphen one point four point five men dot CSX for the script we need to set the source 42 00:02:54,740 --> 00:03:04,410 to load the javascript first we need static J S query hyphen one point one one point one point Min Doc 43 00:03:04,410 --> 00:03:05,980 J is. 44 00:03:06,090 --> 00:03:07,500 We also need to load the J. 45 00:03:07,500 --> 00:03:14,400 Query Mobile's script as well so let's copy and rewrite the file name to J query mobile one point four 46 00:03:14,400 --> 00:03:17,170 point five. 47 00:03:17,220 --> 00:03:22,470 Let's check on the files open the project tab and go to the static folder. 48 00:03:22,470 --> 00:03:27,160 Click on the J S folder and you will see the two files we set. 49 00:03:27,260 --> 00:03:29,540 Here you can also see the CSX file. 50 00:03:29,540 --> 00:03:32,390 Also under the static folder. 51 00:03:32,530 --> 00:03:38,860 Now let's go on decoding the body the language is set to English if you wish to change. 52 00:03:38,860 --> 00:03:41,800 You can change it to whatever language you desire. 53 00:03:41,800 --> 00:03:44,890 I'll be deleting it so it doesn't confuse you. 54 00:03:45,010 --> 00:03:46,610 Go to the body. 55 00:03:46,660 --> 00:03:49,190 This is the site we are planning on making. 56 00:03:49,270 --> 00:03:52,110 So let's have it on the right side so we can have it. 57 00:03:52,150 --> 00:03:58,160 As an example first we need to set Div 2 data row to page. 58 00:03:58,180 --> 00:04:03,160 This is a Jake worry mobile rule where we need to set the site category. 59 00:04:03,160 --> 00:04:07,660 Once we set this we can go on and write the script on the top. 60 00:04:07,660 --> 00:04:16,860 We'll be div data rule header to set a header a draft will be set to a slash so the top page will be 61 00:04:16,860 --> 00:04:19,710 loaded next. 62 00:04:19,760 --> 00:04:29,180 I want you to set the data icon to home in the J query Mobile C Ss under the image folder. 63 00:04:29,180 --> 00:04:34,640 You can see multiple icons preloaded by setting the data icon to home. 64 00:04:34,640 --> 00:04:39,850 We will be using the home icon from the images once we click on the link. 65 00:04:39,850 --> 00:04:46,080 There is an option to cache the data in this lesson we will set it to false. 66 00:04:46,130 --> 00:04:54,130 Now let's close the tag next we go onto the h1 tag and set the text drawn world. 67 00:04:54,130 --> 00:04:58,140 This will be the text in the header you can see on the site. 68 00:04:58,150 --> 00:05:01,240 Now let's go on to making the site content. 69 00:05:01,300 --> 00:05:05,460 First we need to set Div 2 data roll equals content. 70 00:05:05,530 --> 00:05:07,610 From here we set the contents. 71 00:05:07,900 --> 00:05:12,690 We will align the texts in the center then set a title again. 72 00:05:12,700 --> 00:05:13,490 It could be anything. 73 00:05:13,510 --> 00:05:16,250 Let's say drone world again. 74 00:05:16,780 --> 00:05:22,390 The following image will be set to width 100 percent and the source will be the drone image that we 75 00:05:22,390 --> 00:05:25,840 downloaded earlier which is set in static image. 76 00:05:25,840 --> 00:05:33,340 Drone being below we will set a unordered list U L data roll will be set to list. 77 00:05:33,340 --> 00:05:37,900 View let's use ally tag. 78 00:05:37,950 --> 00:05:43,280 This list is the list here that says controller in the ally tag. 79 00:05:43,290 --> 00:05:45,050 We need to set the links. 80 00:05:45,210 --> 00:05:52,750 We haven't created any links yet so we'll just set a h ref to controller for the actual site. 81 00:05:52,770 --> 00:05:56,550 We want to link to a page where we can control the drone. 82 00:05:56,580 --> 00:06:00,910 So let's set the name controller and we'll come back to set the link later. 83 00:06:00,930 --> 00:06:06,590 Once we create the page up sorry I just realized that I didn't close this row. 84 00:06:08,130 --> 00:06:11,900 Once you complete the script you can go on and run this code. 85 00:06:11,940 --> 00:06:18,780 I'll run this code too and click on this link you can see that the exact same site will show up on the 86 00:06:18,780 --> 00:06:19,710 right side. 87 00:06:19,710 --> 00:06:25,950 Congratulations you've just completed making the top page see you all in the next lesson.