1 00:00:00,360 --> 00:00:08,520 Now we come to the last and most important part of the coding process, disabling that same page. 2 00:00:09,450 --> 00:00:16,680 The sender chair malfunction is responsible for generating our page whenever that ISP first to obtain 3 00:00:16,930 --> 00:00:19,890 gets a request from our client. 4 00:00:22,040 --> 00:00:31,850 It merely concatenate a and called into a big string and returns to the server that function we discussed 5 00:00:31,850 --> 00:00:32,330 earlier. 6 00:00:33,670 --> 00:00:40,390 The function takes status of LEDs as a parameter, dynamically generate the stream and content. 7 00:00:41,500 --> 00:00:45,880 The first text you should always send is the doc type declaration. 8 00:00:47,050 --> 00:00:51,820 This look type declaration indicates that we are sending a similar code. 9 00:00:52,570 --> 00:00:57,340 So let's start by initializing this method down here. 10 00:00:58,060 --> 00:01:03,360 It will return string so it won't be void string sent to Yemen. 11 00:01:05,170 --> 00:01:08,530 Now this method will take. 12 00:01:11,340 --> 00:01:16,080 Two parameters, the first one will be that integer. 13 00:01:21,190 --> 00:01:23,590 LED one status. 14 00:01:29,370 --> 00:01:32,100 And tech led to state. 15 00:01:36,420 --> 00:01:41,010 As you can see here and here, now we need to identify a pointer. 16 00:01:42,360 --> 00:01:49,240 So inside it, the first one will be String Peter, which is the fixed point. 17 00:01:49,270 --> 00:01:51,540 All of the string point out that we're going to use. 18 00:01:52,310 --> 00:01:58,290 And the first thing that we are going to pass is the dog type. 19 00:02:03,090 --> 00:02:06,450 Estimable Doug. 20 00:02:08,090 --> 00:02:14,360 And if you often we know that Shyamalan, you know that this is something you have to do, you can't 21 00:02:14,360 --> 00:02:16,580 ignore it and you can't leave it. 22 00:02:16,880 --> 00:02:22,640 You have to tell the browser that this is an issue of code using this line. 23 00:02:24,050 --> 00:02:26,570 Now, the solution here means new line. 24 00:02:27,080 --> 00:02:36,260 So the first thing that will be written on our Astrium page is this and it won't be written to be hidden 25 00:02:37,340 --> 00:02:42,170 and the slush and will move to the next line so that we can like more things. 26 00:02:42,680 --> 00:02:50,630 Next, we are going to drive a meta viewport element that makes the whole page responsive in any web 27 00:02:50,630 --> 00:02:53,040 browser while title tags. 28 00:02:53,120 --> 00:02:55,220 It's the title of the page. 29 00:02:55,430 --> 00:03:02,480 So let's do them one by one, and you'll notice that whenever I write this, I write plus equal plus 30 00:03:02,480 --> 00:03:06,990 equal means take this and add whatever I wrote in here to it. 31 00:03:07,580 --> 00:03:10,250 Don't replace it concatenated. 32 00:03:10,640 --> 00:03:16,430 So the first thing, plus the second string, plus the third string and so on. 33 00:03:16,970 --> 00:03:19,670 So we are going to write a long line here. 34 00:03:20,420 --> 00:03:29,160 This line will make that page hit us or head, and we are going to drive the meta tags. 35 00:03:31,700 --> 00:03:37,430 And you can simply drive them down or copy them from our code. 36 00:03:38,000 --> 00:03:40,970 I will provide the source code for this project. 37 00:03:43,830 --> 00:03:49,770 Now, a lot of viewport, let's slash another. 38 00:03:51,260 --> 00:03:57,980 Mark, the last content, but equal and rights again. 39 00:03:59,470 --> 00:03:59,920 Then. 40 00:04:01,470 --> 00:04:05,220 And another sign right with. 41 00:04:08,430 --> 00:04:18,120 Equals device with this will make our Web page responsive, and it will change depending on our device 42 00:04:18,120 --> 00:04:18,510 with. 43 00:04:20,280 --> 00:04:23,820 Next, what you need to do is initial scale. 44 00:04:26,480 --> 00:04:34,290 The coma, right, initial skill and one point zero. 45 00:04:34,350 --> 00:04:37,080 We don't want it to scale up or down. 46 00:04:37,590 --> 00:04:40,980 Now the use of scalable equal, no. 47 00:04:42,960 --> 00:04:50,280 Don't allow the use of to scare our national afterward, it will adjust to the browser of settings once 48 00:04:50,280 --> 00:04:50,850 you are done. 49 00:04:52,020 --> 00:05:03,390 You can simply close the tag that meet the target and the right slash and and another mark of all this. 50 00:05:03,660 --> 00:05:04,050 OK. 51 00:05:04,950 --> 00:05:06,480 I know that this is a long line. 52 00:05:07,680 --> 00:05:14,190 This is basically the header page and well, I think meta tags to make sure that our old page will be 53 00:05:14,190 --> 00:05:14,940 responsive. 54 00:05:15,180 --> 00:05:16,970 I don't recommend writing it down. 55 00:05:17,010 --> 00:05:19,560 Just copy and paste this code from our code. 56 00:05:20,480 --> 00:05:28,920 Now the next step will be writing or setting the title of our page right BTR plus equal. 57 00:05:31,020 --> 00:05:33,750 And you can't simply by Typekit. 58 00:05:36,980 --> 00:05:46,250 This is the title Thug, and I totally again now between these two, you'll collide, the thug, get 59 00:05:46,250 --> 00:05:47,090 control. 60 00:05:48,950 --> 00:05:53,720 Yes, P32, this will be the title of our award page. 61 00:05:55,050 --> 00:06:03,780 Now, add a splash on here to make sure that you have a new line now for styling the old beige. 62 00:06:04,320 --> 00:06:14,370 We can add sees us, which is basically a way to color everything on your page and to control the background, 63 00:06:14,850 --> 00:06:17,610 the width of the strokes and other things. 64 00:06:18,150 --> 00:06:25,230 And we are going to add some see as a styling to our estimate will bear to make it look more beautiful. 65 00:06:25,890 --> 00:06:29,510 And to do that, you'll have to choose the font type. 66 00:06:30,890 --> 00:06:36,080 The margins and other stuff, if you are not familiar with this, just copy and paste what we have done 67 00:06:36,350 --> 00:06:40,550 and do some edits and you will notice the difference now, right? 68 00:06:41,570 --> 00:06:41,840 Are. 69 00:06:43,980 --> 00:06:44,760 Plus equal. 70 00:06:46,710 --> 00:06:57,420 And two signs their lifestyle, right, still inside that you can now choose the font family. 71 00:07:02,160 --> 00:07:05,580 You kind of area or any other type. 72 00:07:06,300 --> 00:07:08,010 And you cannot display. 73 00:07:10,180 --> 00:07:11,410 To be in line, look. 74 00:07:15,780 --> 00:07:17,730 Then you can't change the model. 75 00:07:20,010 --> 00:07:22,410 I would add zero pixel to the model. 76 00:07:25,160 --> 00:07:25,700 Now. 77 00:07:27,510 --> 00:07:30,630 After the zero Brexit, you can add water now, 78 00:07:34,410 --> 00:07:37,350 we can also send the text a line. 79 00:07:40,610 --> 00:07:41,510 To be senator. 80 00:07:45,320 --> 00:07:55,880 After you do all of this, just add a new line to make sure that you have moved to the next line to 81 00:07:55,880 --> 00:07:58,040 keep writing your estimable court. 82 00:07:58,940 --> 00:08:04,670 Now this is the CSA starting and this is the title of our page. 83 00:08:04,700 --> 00:08:05,570 This is the header. 84 00:08:07,380 --> 00:08:08,370 Now, let's move on. 85 00:08:12,280 --> 00:08:12,790 Now. 86 00:08:16,700 --> 00:08:21,500 Now you can simply follow our ride the following code. 87 00:08:21,830 --> 00:08:30,260 These two lines, these two lines will help set the color, font and model around the tags. 88 00:08:30,620 --> 00:08:34,250 That's one ish three and Pete tags, as you can see. 89 00:08:35,030 --> 00:08:36,800 This will set the font size. 90 00:08:36,830 --> 00:08:39,870 This will set the color for the Doug. 91 00:08:40,700 --> 00:08:42,170 And this will set the model. 92 00:08:42,980 --> 00:08:43,730 Same here. 93 00:08:44,330 --> 00:08:45,680 This is for each one. 94 00:08:46,120 --> 00:08:47,200 And this is for us. 95 00:08:47,210 --> 00:08:47,600 Three. 96 00:08:48,380 --> 00:08:51,560 You can simply copy and paste these lines from our code. 97 00:08:53,090 --> 00:09:00,170 Some styling is applied to the buttons as well, with properties like cut off size, margin, etc. The 98 00:09:00,170 --> 00:09:03,140 on and off button has a different background color. 99 00:09:03,860 --> 00:09:12,920 We can suit different background color by using the active selector for buttons to ensure button click 100 00:09:12,920 --> 00:09:13,460 effect. 101 00:09:14,450 --> 00:09:21,920 Now I can drive down the whole code later bilateral, but I will paste it here and explain it to you. 102 00:09:25,890 --> 00:09:30,580 Now, as you can see here now, our codes for the battle here. 103 00:09:30,600 --> 00:09:34,140 We said the width and the background color. 104 00:09:35,020 --> 00:09:42,910 For that button, and we are stating that won't have any borders, that color will be white. 105 00:09:43,100 --> 00:09:43,900 The bad thing. 106 00:09:44,900 --> 00:09:53,000 Would it be 13 Pixel, three pixel from left, right up and down that text declaration, there will 107 00:09:53,000 --> 00:09:54,290 be no text decoration. 108 00:09:54,680 --> 00:09:56,930 The font size will be 25. 109 00:09:57,440 --> 00:09:59,780 And these are the other possibilities. 110 00:10:01,690 --> 00:10:07,990 Sam, for the background color, you can see the tears and you can see the background color when active, 111 00:10:08,110 --> 00:10:12,340 when the button is pressed for to see another color. 112 00:10:13,060 --> 00:10:19,780 Same here for the off button, the background color will be this and when it's active, when someone 113 00:10:19,780 --> 00:10:22,120 clicks it, it will change to this color. 114 00:10:22,720 --> 00:10:27,670 This will have a nice effect on the button and will be more in the active button. 115 00:10:29,080 --> 00:10:30,820 We can also star the heading. 116 00:10:33,530 --> 00:10:35,870 You can simply fly pretty hard. 117 00:10:38,420 --> 00:10:40,040 For each one, it's three. 118 00:10:41,550 --> 00:10:42,510 These two lines. 119 00:10:43,950 --> 00:10:45,840 Will change the heading of the old page. 120 00:10:46,320 --> 00:10:54,570 You can simply change the text inside these H1 and H3 tags to anything that suits your application. 121 00:10:55,230 --> 00:11:01,620 But in our case, I have written SB 30 to webserver and using Access Point mode. 122 00:11:03,250 --> 00:11:11,050 Now to start the the batons and corresponding state to dynamically generate the batons and instead we 123 00:11:11,050 --> 00:11:12,220 use if statements. 124 00:11:12,640 --> 00:11:21,790 So depending upon the status of general purpose input output pins on or off button are displayed. 125 00:11:24,350 --> 00:11:29,660 Now, let's try this if statement here, do you need to write if. 126 00:11:33,830 --> 00:11:35,210 And you need to write else. 127 00:11:39,180 --> 00:11:46,200 Now inside, though, if we are going to I led one state and one state. 128 00:11:49,830 --> 00:11:50,220 Is. 129 00:11:51,700 --> 00:11:54,310 On, we are going to ride this line. 130 00:12:01,520 --> 00:12:06,500 Let me explain to you what's happening here now we are going to add to Sham Sham. 131 00:12:07,310 --> 00:12:09,980 This this line let one state is on. 132 00:12:11,800 --> 00:12:19,090 And we are going to choose this glass for baton while baton off. 133 00:12:20,790 --> 00:12:25,320 And let one off and were right off inside the button. 134 00:12:25,650 --> 00:12:27,720 So this line will create a new baton. 135 00:12:31,150 --> 00:12:31,690 And. 136 00:12:33,380 --> 00:12:37,860 The next case, if the lid state is off. 137 00:12:39,770 --> 00:12:42,390 We are going to try the very same line, but sort of on. 138 00:12:42,410 --> 00:12:43,730 We are going to write off. 139 00:12:43,940 --> 00:12:44,240 Yes. 140 00:12:45,500 --> 00:12:53,510 Sam for the second if statement, which has led to state we are going to have the very same lines. 141 00:12:55,900 --> 00:13:02,830 Down here, as you can see it, toasted on led two states off and depending on the lid state, it will 142 00:13:02,830 --> 00:13:07,960 add this line to our estimate called all this line for the lead one. 143 00:13:08,350 --> 00:13:11,710 And for the total of this line or this line. 144 00:13:12,640 --> 00:13:14,680 Now once we write all of this. 145 00:13:15,750 --> 00:13:20,940 The next step will be returning the string, so I've end of this method. 146 00:13:21,360 --> 00:13:24,540 We are going to close the tags. 147 00:13:29,260 --> 00:13:32,650 OK, look, we're not sure that everything is set fault. 148 00:13:33,670 --> 00:13:41,320 OK, now before we end this, we need to write BTR Plus equal. 149 00:13:43,060 --> 00:13:45,700 And here we are going to close the Bundestag. 150 00:13:51,220 --> 00:13:52,750 And slash on. 151 00:13:55,970 --> 00:13:59,360 And then we are going to close the stem altered. 152 00:14:02,660 --> 00:14:03,970 And then and. 153 00:14:06,710 --> 00:14:16,910 After that, let's try to return, Peter, which would attend this thing when this method is called, 154 00:14:17,270 --> 00:14:21,980 and once this thing is returned, it will be sent and displayed on our web browser. 155 00:14:23,170 --> 00:14:26,390 Now that said, this is the whole process. 156 00:14:26,780 --> 00:14:27,410 That's Jamal. 157 00:14:27,410 --> 00:14:31,280 Coding can be done automatically. 158 00:14:31,490 --> 00:14:33,230 You can simply go. 159 00:14:34,460 --> 00:14:40,430 Now you can simply if you want to write your honesty and code, you can simply go here and. 160 00:14:42,560 --> 00:14:50,780 Go there, Sam Al.5, editor All right, on Google online, a shame editor and using any of these editors, 161 00:14:50,780 --> 00:14:54,410 you can simply write an extension cord easily. 162 00:14:55,500 --> 00:14:58,560 Now you can start by lighting LED. 163 00:15:00,580 --> 00:15:05,770 On and you can start adding different items. 164 00:15:07,070 --> 00:15:09,080 Kind of clean the code as fancy. 165 00:15:10,260 --> 00:15:18,810 And you can add a link or just click on add your hyperlink to this. 166 00:15:19,470 --> 00:15:25,920 And once you are done with the recording process or writing your web page or how you want your page 167 00:15:25,980 --> 00:15:29,270 or page to be, you can simply copy these lines. 168 00:15:30,460 --> 00:15:31,630 But you need to add. 169 00:15:32,880 --> 00:15:35,280 Once you cover these lines, I will show you how to do it. 170 00:15:36,060 --> 00:15:36,510 It's also. 171 00:15:38,690 --> 00:15:45,680 Once you are done and satisfied with your code, you can simply press these lines until you can do the 172 00:15:45,680 --> 00:15:50,900 following right BTR plus equal for each of these lines. 173 00:15:54,800 --> 00:15:58,940 And at the end and this. 174 00:16:00,600 --> 00:16:01,590 And slash and. 175 00:16:05,940 --> 00:16:10,590 A single column, you can't simply copy this list here, here and here. 176 00:16:11,340 --> 00:16:13,950 At the beginning, we need this text sign. 177 00:16:16,010 --> 00:16:16,550 That's it. 178 00:16:16,790 --> 00:16:22,610 Then you can simply copy the squad and based it on your Padrino on a software. 179 00:16:24,040 --> 00:16:27,250 This will be a much easier way for you to create your own page. 180 00:16:28,610 --> 00:16:35,030 The buttons that you wanted to play, but there are a lot of methods that you can do this well that 181 00:16:35,030 --> 00:16:44,690 are more visual editorials or software that can HDMI cords, but I prefer coating them and the Arduino 182 00:16:44,690 --> 00:16:45,290 IEEE. 183 00:16:46,230 --> 00:16:47,630 And this is my code. 184 00:16:47,870 --> 00:16:55,490 Now what you need to do if you felt overwhelmed with ACM Alcalde, you can simply copy my code and base 185 00:16:55,490 --> 00:16:59,900 it on yours, and you can adjust it depending on your needs. 186 00:17:00,560 --> 00:17:04,220 Edit your home your page name using this line. 187 00:17:06,080 --> 00:17:12,530 Let controller speak to all to edit the headers, added the coloring, the buttons add more buttons 188 00:17:13,010 --> 00:17:14,390 depending on your needs. 189 00:17:14,780 --> 00:17:21,350 You can't do anything you want with this code and the next lesson we are going to distort this code 190 00:17:21,620 --> 00:17:25,970 and connect our Wi-Fi network and run the ISP server. 191 00:17:26,480 --> 00:17:27,590 That's it for this lesson. 192 00:17:27,800 --> 00:17:28,470 Thanks for watching. 193 00:17:28,490 --> 00:17:30,860 This is Asha from educational engineering team.