1 00:00:00,060 --> 00:00:05,700 So this is not to do off a jungle cruise, so like in the previous tutorials, I showed you how you 2 00:00:05,700 --> 00:00:10,710 can create a jungle project, how you can work with it, how you can ensure the jungle and how you can 3 00:00:10,980 --> 00:00:12,820 work with the question is part. 4 00:00:13,140 --> 00:00:16,980 So if you have any doubts to go into that tutorial, you have missed anyone. 5 00:00:17,160 --> 00:00:19,580 So you can refer to my previous tutorial. 6 00:00:19,980 --> 00:00:22,290 So I again welcome you all to programming knowledge. 7 00:00:22,480 --> 00:00:30,060 So like in addition to the tutorial, we are going to basically work with templates now and then we 8 00:00:30,060 --> 00:00:37,740 are going to work with templates and well, basically, I told you, the Django is based on MBT Patane 9 00:00:38,070 --> 00:00:39,810 model view and templates. 10 00:00:40,140 --> 00:00:45,900 So models are built with your database and views are based on your business logic. 11 00:00:45,900 --> 00:00:50,400 POC and templates are based on unfranked. 12 00:00:50,460 --> 00:00:56,210 Some models are based on a database used on business logic and templates for function part. 13 00:00:56,610 --> 00:00:57,740 So what you can. 14 00:00:58,050 --> 00:01:03,030 I want to tell you that for the French part, basically we are going to use bootstrap. 15 00:01:03,390 --> 00:01:12,750 So bootstrap is how is the world's most popular framework for building the mobile phone site. 16 00:01:13,200 --> 00:01:18,540 So I will show you the responsive nature of bootstrap as well, because if you are making a Web application 17 00:01:18,540 --> 00:01:21,140 and what you want, do you want to target an audience? 18 00:01:21,390 --> 00:01:27,630 So what you want to do is that if someone is using a Web application or desktop, then another day like 19 00:01:27,630 --> 00:01:29,880 someone it might use on a laptop as well. 20 00:01:30,000 --> 00:01:31,680 Tablet, mobile phone. 21 00:01:32,520 --> 00:01:39,420 And like there are various insiders who you want to application to adopt that screen size to show that 22 00:01:40,050 --> 00:01:42,060 that screen size bootstrap is used. 23 00:01:42,270 --> 00:01:49,020 So this would make your content responsive in nature and adapt to the particular inside of the user. 24 00:01:49,030 --> 00:01:52,930 And this would help you to follow foster development as well. 25 00:01:53,280 --> 00:02:00,030 So it has all the predefined HTML JavaScript libraries and you'll be using these templates and I will 26 00:02:00,030 --> 00:02:06,990 show you how you can use how you can use chrome developer tools to edit your pages. 27 00:02:06,990 --> 00:02:12,100 And you can you can be sure about how you can create your pages as well. 28 00:02:12,540 --> 00:02:20,220 So the first thing you need to do, like the first thing you need to do like this, this is I mentioned 29 00:02:20,250 --> 00:02:24,570 how you can go with the repository and the same thing you said. 30 00:02:24,600 --> 00:02:28,590 The second thing you need to do, you need to move into a setting should be my file. 31 00:02:29,190 --> 00:02:35,220 And before this, you need to create a two folder, one with the name template, another with the name 32 00:02:35,220 --> 00:02:40,310 static, so complex and stacking the two folders you need to do. 33 00:02:40,770 --> 00:02:44,460 So first I would move to the my project. 34 00:02:44,710 --> 00:02:46,880 So this directory schematic repository. 35 00:02:47,430 --> 00:02:49,290 So I would create a new folder. 36 00:02:50,950 --> 00:02:53,380 Name them place. 37 00:02:55,350 --> 00:02:59,350 But this is the first full throated created templates and the second one which I'm going to create is 38 00:02:59,350 --> 00:03:00,060 the static. 39 00:03:00,480 --> 00:03:05,380 So static basically is working with the static file. 40 00:03:05,400 --> 00:03:06,530 It could be any citified. 41 00:03:06,580 --> 00:03:12,300 So basically, just for an example, you have an image which is an image and you need to use it multiple 42 00:03:12,300 --> 00:03:14,820 times so you can imagine your static folder. 43 00:03:15,240 --> 00:03:23,100 So in order to display in your page as well, so do folder templates will be having your files and starting 44 00:03:23,100 --> 00:03:27,120 is going to have your raw files and it could be in any form. 45 00:03:27,630 --> 00:03:35,050 So after creating these two folders, what you need to do is to add them in your directory. 46 00:03:35,340 --> 00:03:37,620 So the first thing you need to do is. 47 00:03:38,570 --> 00:03:46,730 You need to move to a certain profile and one shortcut, I would show you that inside a school you can 48 00:03:46,730 --> 00:03:51,740 type control to speak and move to any physical time to move to this. 49 00:03:51,740 --> 00:03:53,470 You want to start a model. 50 00:03:53,480 --> 00:03:56,170 Should be more if I let this be fine. 51 00:03:56,480 --> 00:04:04,760 So I would type models and it would give me some recommendation about I would click on it and I would 52 00:04:04,760 --> 00:04:05,580 move to this file. 53 00:04:05,780 --> 00:04:08,110 So in this I came back to you. 54 00:04:08,120 --> 00:04:10,240 I find that this is a very interesting shortcut. 55 00:04:11,030 --> 00:04:12,440 So I'm installed store. 56 00:04:12,680 --> 00:04:13,880 I mentioned my app. 57 00:04:15,360 --> 00:04:25,350 And under the very Chris Templar's, what I need to do, I have to mention my current spot, we might 58 00:04:25,920 --> 00:04:26,270 sold. 59 00:04:26,290 --> 00:04:31,110 We got this all this list is basically associated with the template directory. 60 00:04:31,440 --> 00:04:34,470 So I would type W dot, but. 61 00:04:35,820 --> 00:04:37,140 Don't join. 62 00:04:40,240 --> 00:04:44,050 Basically, Gomaa Templar's. 63 00:04:47,300 --> 00:04:55,670 So this would join my folder that I'm telling that it could be any boys and women, I would join this 64 00:04:55,670 --> 00:04:57,620 firm based charity to the Templars. 65 00:04:57,650 --> 00:05:00,410 So this would connect with this folder. 66 00:05:00,440 --> 00:05:02,810 So my project is not connected with this folder. 67 00:05:03,440 --> 00:05:08,380 The second thing I need to do is the same thing I need to do for the static files. 68 00:05:08,390 --> 00:05:09,940 But this is a little different. 69 00:05:10,070 --> 00:05:13,880 So I have to first mention the less static. 70 00:05:16,110 --> 00:05:19,650 Files underscored by Chris. 71 00:05:21,950 --> 00:05:29,050 So this is the list I would be using this so you can see these are almost same thing, always on point 72 00:05:29,060 --> 00:05:36,800 or join are going to school campus and others don't join based Kohima study. 73 00:05:37,460 --> 00:05:43,970 So what I can do is with sorry, with Dr. Park. 74 00:05:45,000 --> 00:05:46,080 Doug, join. 75 00:05:47,810 --> 00:05:48,760 This the. 76 00:05:50,170 --> 00:05:53,450 Come up, stay OK. 77 00:05:53,740 --> 00:06:02,590 This looks good, so I will run my server, so in the time I will show you one thing, that the servers 78 00:06:02,590 --> 00:06:07,690 are working fine and I can make some URLs like in the previous to do that, I showed you how you can 79 00:06:07,690 --> 00:06:09,810 make the request and the response spot. 80 00:06:10,090 --> 00:06:20,500 So, like, just for just for to be sure about this, I would move to localhost horse an eight thousand. 81 00:06:22,760 --> 00:06:29,510 OK, so it says HelloWallet and I showed you, like, you can create an Yarl's as well. 82 00:06:29,660 --> 00:06:32,020 So, like in this we are going to create a model. 83 00:06:32,560 --> 00:06:35,910 So first thing you need to do is move to your template folder. 84 00:06:36,500 --> 00:06:39,400 So these are the two folders which I made and static. 85 00:06:39,860 --> 00:06:43,130 So inside your template for the unit, you will create a new file. 86 00:06:44,410 --> 00:06:55,870 And name it index DOT, HDMI, and you can you make this file and open this file and what you are going 87 00:06:55,870 --> 00:07:04,960 to do this inside the index index or estimate file, you are basing your first official page on what 88 00:07:04,960 --> 00:07:13,630 you are going to do is you will move the bootstrap website and you would go to the getting started that 89 00:07:13,630 --> 00:07:15,760 introduction and start an introduction. 90 00:07:15,860 --> 00:07:21,450 And now you would first pick the starter template because this would be very helpful. 91 00:07:21,520 --> 00:07:22,990 You can copy this. 92 00:07:24,700 --> 00:07:26,620 And paste this inside an index. 93 00:07:27,820 --> 00:07:35,350 So, like you can see that it has the whole structure and it has all the JavaScript libraries defined, 94 00:07:35,770 --> 00:07:36,850 as well as the C. 95 00:07:36,850 --> 00:07:38,410 S libraries as well. 96 00:07:38,740 --> 00:07:45,280 And you can know one, that these files, as well as the JavaScript files has been kept online. 97 00:07:45,550 --> 00:07:51,910 So anyone can use this of the services and JavaScript files because these are predefined in bootstrap 98 00:07:51,910 --> 00:07:55,270 and anyone can use bootstrap to make that application responsive. 99 00:07:55,780 --> 00:07:57,850 OK, I would change the status. 100 00:07:59,540 --> 00:08:00,620 To learn. 101 00:08:03,530 --> 00:08:04,100 Jungle. 102 00:08:06,000 --> 00:08:12,450 And basically, I will save this file and basically the title is this what you can see above here, 103 00:08:12,840 --> 00:08:19,800 the introduction bootstrap GitHub dashboard software that this is your title, so. 104 00:08:21,000 --> 00:08:23,850 Learn Jango and I will say this. 105 00:08:23,920 --> 00:08:24,660 Hello. 106 00:08:27,110 --> 00:08:27,710 Jianguo. 107 00:08:28,640 --> 00:08:38,810 Project like, OK, so what you can do is you can move to you are you are to start people file. 108 00:08:39,750 --> 00:08:47,280 And you can define your to render your pitch, so just for example, I would define what? 109 00:08:48,230 --> 00:08:49,190 My first. 110 00:08:50,400 --> 00:08:50,910 Paige. 111 00:08:53,150 --> 00:08:55,250 And I would call Newstalk. 112 00:08:56,450 --> 00:08:57,710 My first name. 113 00:08:59,060 --> 00:09:00,290 So in my first page. 114 00:09:02,330 --> 00:09:05,030 And I would give this a name. 115 00:09:07,550 --> 00:09:08,450 My first. 116 00:09:11,100 --> 00:09:11,610 Paige. 117 00:09:13,640 --> 00:09:20,420 So I have to pick it apart, call my first page, you and I would call the function my first page from 118 00:09:20,420 --> 00:09:25,410 used, and I have this given a short name to this URL as my first page. 119 00:09:25,430 --> 00:09:26,350 So this is going on. 120 00:09:26,420 --> 00:09:28,400 And why is it that I have it? 121 00:09:28,400 --> 00:09:32,750 Not if I in my first page function inside the views. 122 00:09:32,750 --> 00:09:35,210 So I will move to my views or profile. 123 00:09:37,610 --> 00:09:38,090 So. 124 00:09:40,470 --> 00:09:42,150 The my first. 125 00:09:46,000 --> 00:09:48,070 It is taking a request as a barometer. 126 00:09:49,320 --> 00:09:57,350 And this time, 52 tools, I showed you that they can be various types of responses to respond just 127 00:09:57,360 --> 00:10:02,620 on response, but this time I'm like, I'm going to render a page. 128 00:10:02,640 --> 00:10:04,530 So I would say they're done. 129 00:10:04,770 --> 00:10:06,630 They're done, rendered. 130 00:10:08,400 --> 00:10:09,120 Request. 131 00:10:11,440 --> 00:10:14,220 Go up in next door, XHTML. 132 00:10:16,270 --> 00:10:16,840 So. 133 00:10:17,900 --> 00:10:24,670 So this will render the page and when I will move to this new order, so this will show me that page, 134 00:10:25,250 --> 00:10:30,290 so I'm inside my localhost and I would slash my first. 135 00:10:32,420 --> 00:10:32,870 Paige. 136 00:10:35,660 --> 00:10:41,090 OK, so, yeah, so what you can see that it has rendered the first page. 137 00:10:41,550 --> 00:10:44,320 Now I'm showing you two shortcuts. 138 00:10:44,330 --> 00:10:50,120 The first one is Control Gosu, so this will show me the whole front, end quote. 139 00:10:50,150 --> 00:10:52,340 So this is the full circle you can use. 140 00:10:52,820 --> 00:10:54,650 I control plus you. 141 00:10:55,130 --> 00:10:55,570 OK? 142 00:10:55,910 --> 00:11:01,210 And the second one is you can use inspect element, OK. 143 00:11:01,610 --> 00:11:04,370 And you can see now the responsive nature of this. 144 00:11:04,370 --> 00:11:09,980 I can show you that this is like chrome developer tool and you can use this to work with the front end 145 00:11:10,010 --> 00:11:11,260 part of your project. 146 00:11:11,570 --> 00:11:12,330 It is very good. 147 00:11:12,700 --> 00:11:15,740 OK, Galaxy S5 iPhone five. 148 00:11:16,200 --> 00:11:20,030 OK, this is part of the nature laptop, laptop screen. 149 00:11:20,030 --> 00:11:28,100 So this will be the one I can do is move to Galaxias file and I would expect this. 150 00:11:28,960 --> 00:11:34,580 And I would eliminate or else I would change color is equal to red. 151 00:11:34,810 --> 00:11:37,240 So this changes the color of this heading to red. 152 00:11:37,690 --> 00:11:44,610 But this is to only to have a view of your project as soon as I reflected it, because this is temporary. 153 00:11:44,620 --> 00:11:50,200 You do this, you can do some can change to have a look just as soon as I refresh this page. 154 00:11:51,810 --> 00:12:01,440 This is this is banished so and so you can use the tools to have a look at the front and back, so I 155 00:12:01,440 --> 00:12:06,730 will continue with the lecture and I will tell you how you can work with the backend logic and integrate 156 00:12:06,730 --> 00:12:07,990 it into the printed part of it. 157 00:12:08,400 --> 00:12:09,590 So thank you, everyone. 158 00:12:09,810 --> 00:12:10,350 So thank you.