1 00:00:01,710 --> 00:00:02,800 Welcome back, ladies and gentlemen. 2 00:00:02,820 --> 00:00:07,720 Today, we're going to talk about a little bit of architecture, what we will use in this project. 3 00:00:07,740 --> 00:00:13,950 Now, I'm going to say that the architecture is one of the most important aspects of any project. 4 00:00:13,950 --> 00:00:19,590 So you should think about what type of architecture you going to implement in your projects? 5 00:00:19,800 --> 00:00:23,420 What are you going to choose and how are you going to do it? 6 00:00:23,430 --> 00:00:23,730 Right. 7 00:00:23,910 --> 00:00:24,680 So there are different. 8 00:00:24,690 --> 00:00:28,740 So you can choose something, but you may not be able to do it as you shoot. 9 00:00:28,920 --> 00:00:36,840 So before a application, when we do the application for the burning galleries, we did have a module 10 00:00:36,840 --> 00:00:39,630 patterned application architecture. 11 00:00:39,630 --> 00:00:45,120 But here we will use your six modules and we will use MVC. 12 00:00:45,390 --> 00:00:49,320 This stands for my model view controller. 13 00:00:49,680 --> 00:00:55,170 Now, these architecture can be implemented in different ways, but we're going to choose the best way 14 00:00:55,170 --> 00:00:56,730 for this project now. 15 00:00:57,330 --> 00:01:01,830 Model models, views and controllers pretty much everywhere. 16 00:01:01,860 --> 00:01:08,960 Now, this is a very famous so I really like how the lab will have done it and how these so laramie's 17 00:01:09,390 --> 00:01:11,850 be one of the best frameworks. 18 00:01:12,180 --> 00:01:13,590 And yeah. 19 00:01:13,600 --> 00:01:18,760 So that is why I just love how they implemented this model view controller. 20 00:01:19,080 --> 00:01:24,000 Now like let's talk about the controllers now. 21 00:01:24,000 --> 00:01:29,580 The controller will be in our case, will we one file that that will have multiple controllers. 22 00:01:29,580 --> 00:01:29,880 Right. 23 00:01:29,880 --> 00:01:32,840 It will control our application in a model. 24 00:01:32,850 --> 00:01:40,640 We're going to we're going to write all of the methods that we then that will be exported to the controller. 25 00:01:40,800 --> 00:01:44,100 So the methods here will be exported to the controller. 26 00:01:44,280 --> 00:01:47,490 And you can see that I have never connected these two together. 27 00:01:47,670 --> 00:01:47,940 Why? 28 00:01:47,940 --> 00:01:52,380 Because the controller will be the hub and they will communicate through the controller. 29 00:01:52,380 --> 00:01:57,960 Right now, that is pretty much it view views as simply. 30 00:01:58,200 --> 00:02:01,390 So I'm going to explain this as simple as I can. 31 00:02:01,770 --> 00:02:05,070 So don't worry about if you don't understand these terms at the moment. 32 00:02:05,070 --> 00:02:10,100 But views are something simply the graphical representation of what we are. 33 00:02:10,140 --> 00:02:11,830 What is the user going to see? 34 00:02:12,120 --> 00:02:18,090 So here we are going to write the functions that will deal with rendering the data back to the graphical 35 00:02:18,090 --> 00:02:18,900 user interface. 36 00:02:19,200 --> 00:02:23,700 Now, the methods in use will be just for the users, right? 37 00:02:23,990 --> 00:02:27,790 The controller is the hub here that will connect both views and controllers. 38 00:02:28,110 --> 00:02:33,360 So this is very good architecture because everything is going to be separated. 39 00:02:33,630 --> 00:02:40,590 Now, the model view controller, the decouples the presentation logic from application logic. 40 00:02:40,590 --> 00:02:40,890 Right. 41 00:02:41,070 --> 00:02:47,300 So that is why this architecture is something that you should understand now. 42 00:02:48,420 --> 00:02:56,700 So what I'm going to show you next is that we need to continue with using imports and exports. 43 00:02:56,940 --> 00:02:57,450 Right. 44 00:02:57,460 --> 00:03:02,700 And that will be our will be connected with six modules. 45 00:03:02,940 --> 00:03:09,660 Now, how are we going to use the six modules in how to use names named and default exports and imports? 46 00:03:09,870 --> 00:03:13,100 That will be something else that we need to look today. 47 00:03:13,180 --> 00:03:13,440 Right. 48 00:03:13,610 --> 00:03:17,190 So open up your project. 49 00:03:17,760 --> 00:03:24,350 Going to the source in this is delete everything from here and say that this is a main controller, 50 00:03:25,980 --> 00:03:27,090 main controller 51 00:03:30,120 --> 00:03:30,770 like this. 52 00:03:30,930 --> 00:03:32,220 Save it now. 53 00:03:32,460 --> 00:03:34,860 The module we don't need this JS file. 54 00:03:34,860 --> 00:03:37,530 You can simply delete it right now. 55 00:03:37,530 --> 00:03:47,790 Create a new folder called Use Here, Not With Capital and create an additional folder called Models. 56 00:03:49,080 --> 00:03:54,830 Now here we will store the view, the views files, and here we will store the models files. 57 00:03:54,840 --> 00:03:56,070 And this is the main controller. 58 00:03:56,070 --> 00:03:56,360 Right. 59 00:03:56,390 --> 00:03:58,390 So I'm just going to close this for four quick. 60 00:03:58,620 --> 00:04:05,580 Now, if you go back here, you will see that in a model we will use movie search like in Karkh model, 61 00:04:06,060 --> 00:04:13,300 and these will have the same same exact name just with the smaller movie View Search View. 62 00:04:13,440 --> 00:04:19,320 So you can name it like this because later on you will be able to distinguish between them and inside 63 00:04:19,320 --> 00:04:20,030 the controller. 64 00:04:20,040 --> 00:04:23,810 We will do have movie controller, search controller, everything that we doing here. 65 00:04:23,850 --> 00:04:26,430 So this is nicely separated, right? 66 00:04:27,270 --> 00:04:29,400 OK, so I'm done with this lecture now. 67 00:04:29,430 --> 00:04:31,740 Are we going to do a little bit of imports and exports? 68 00:04:32,040 --> 00:04:33,150 So first things first. 69 00:04:33,300 --> 00:04:43,950 I'm just going to create a file here called Search View J.S. So this will be just everything from now 70 00:04:43,950 --> 00:04:46,310 on will be JavaScript files, right? 71 00:04:46,540 --> 00:04:47,160 Search view. 72 00:04:47,190 --> 00:04:48,520 So look at the naming convention. 73 00:04:48,520 --> 00:04:55,660 So I'm using smaller start with smaller small lettering and the next one I'm doing with capital. 74 00:04:55,680 --> 00:04:59,880 Now the models will be so create a new file in the model. 75 00:05:00,210 --> 00:05:07,320 In the models, the convention is to start with a capital letter A. Should they should be most likely 76 00:05:07,320 --> 00:05:12,200 singler like search, not searches. 77 00:05:12,390 --> 00:05:15,060 Right, or movie, not movies. 78 00:05:15,420 --> 00:05:16,830 That's why I'm trying to say so. 79 00:05:16,860 --> 00:05:18,430 That is pretty much the convention. 80 00:05:18,480 --> 00:05:22,140 OK, so how are we going to conduct this search in search of you? 81 00:05:22,140 --> 00:05:22,530 Right. 82 00:05:22,920 --> 00:05:27,420 Make sure that you do have these two folders inside the Jesus folder. 83 00:05:27,450 --> 00:05:27,830 Right. 84 00:05:28,350 --> 00:05:28,680 Good. 85 00:05:28,800 --> 00:05:30,320 So how are we going to connect these two? 86 00:05:30,730 --> 00:05:35,580 OK, let's first write something in the search. 87 00:05:37,650 --> 00:05:38,530 So what are we going to do? 88 00:05:38,550 --> 00:05:42,650 We're going to export we're going to create something here that we can export. 89 00:05:42,870 --> 00:05:46,310 So the best way that we can start is by creating a stream. 90 00:05:46,530 --> 00:05:51,600 And I'm going to say I'm going to start with exporting the default because we have name and default 91 00:05:51,600 --> 00:05:52,950 exports and imports. 92 00:05:53,220 --> 00:05:56,150 These named in default ghost for this two as well. 93 00:05:56,580 --> 00:05:56,940 Right. 94 00:05:57,660 --> 00:06:02,310 So I'm going to say export here then the key word default here. 95 00:06:02,310 --> 00:06:04,410 I'm just going to export the normal string. 96 00:06:04,650 --> 00:06:12,890 For example, these these is coming from the search model. 97 00:06:12,900 --> 00:06:14,400 I'm not sure why I'm Jewish. 98 00:06:14,670 --> 00:06:15,930 Type Double M here. 99 00:06:16,620 --> 00:06:17,330 Not here. 100 00:06:17,610 --> 00:06:20,570 OK, so this is how we write the export. 101 00:06:20,760 --> 00:06:27,390 So we are exporting this from the search model, but where are we going to import. 102 00:06:27,570 --> 00:06:30,950 That is the main question, as I told you that everything here. 103 00:06:31,170 --> 00:06:33,060 So this is just an example. 104 00:06:33,060 --> 00:06:34,860 You don't have to worry because we're going to do this. 105 00:06:35,070 --> 00:06:37,050 So if you want, you can sit back and watch it. 106 00:06:37,470 --> 00:06:37,820 Right. 107 00:06:37,890 --> 00:06:41,430 This is nothing connected still with the actual application. 108 00:06:41,430 --> 00:06:45,830 But I want to explain you this and you need to understand it now. 109 00:06:46,350 --> 00:06:52,770 This index that Jezebel will be our main controller right in here, we will import and how we import. 110 00:06:52,770 --> 00:06:54,060 So I'm going to say import. 111 00:06:55,320 --> 00:07:00,180 And here we are going to define a variable name and that will be output. 112 00:07:00,180 --> 00:07:03,420 For example, you can put any name you want. 113 00:07:03,690 --> 00:07:08,450 Now, from we already have done this a little bit right in the previous lecture. 114 00:07:08,610 --> 00:07:15,360 So now I'm going to go to the current level, then I'm going to the models, because this search is 115 00:07:15,370 --> 00:07:16,470 located in the models. 116 00:07:16,470 --> 00:07:16,770 Right. 117 00:07:16,980 --> 00:07:18,710 And inside we have the search. 118 00:07:19,170 --> 00:07:28,410 So don't you don't need that Geass extension, by the way, right now here, the value is stored. 119 00:07:28,770 --> 00:07:35,940 Everything that we are grabbing from the search model, it will be stored back to this variable here 120 00:07:36,330 --> 00:07:36,960 output. 121 00:07:37,200 --> 00:07:44,260 Right now, if we are exporting multiple things from search, then we can use the name export. 122 00:07:44,280 --> 00:07:47,700 This is the default export right now. 123 00:07:47,700 --> 00:07:51,810 If you have multiple things here that we need to be exported, then we're going to use something else. 124 00:07:52,020 --> 00:07:54,510 We're going to use this this guy here, the named one. 125 00:07:54,540 --> 00:07:54,930 Right. 126 00:07:55,680 --> 00:07:57,390 And let's do the second way. 127 00:07:57,390 --> 00:08:03,600 But let's close this search and I'm going to the search for you in here in the search view. 128 00:08:03,600 --> 00:08:07,650 I'm going to do a couple of I'm going to write a couple of simple functions. 129 00:08:07,800 --> 00:08:16,920 So let's write some code here and let's say export and const some I'm going to export, not default 130 00:08:17,130 --> 00:08:17,730 named. 131 00:08:17,850 --> 00:08:18,270 Right. 132 00:08:18,540 --> 00:08:20,460 There's a difference in here. 133 00:08:20,460 --> 00:08:23,910 I'm going to give a name, render details. 134 00:08:24,180 --> 00:08:26,930 This name can be anything you want right here. 135 00:08:26,940 --> 00:08:32,640 I will put name last name Qu. 136 00:08:32,970 --> 00:08:35,670 And this is by the way, erro function. 137 00:08:35,670 --> 00:08:37,500 You should know it by now. 138 00:08:37,710 --> 00:08:50,880 And let's say here the name oops the name is and we can just say its name comma and last name is and 139 00:08:50,880 --> 00:08:51,570 we can say. 140 00:08:54,870 --> 00:08:55,600 Last night. 141 00:08:55,710 --> 00:08:56,620 So that's pretty much it. 142 00:08:56,640 --> 00:08:58,520 Make sure that you have semicolon at the end. 143 00:08:58,990 --> 00:09:02,900 Now we are exploring this function. 144 00:09:03,270 --> 00:09:04,480 That's our function. 145 00:09:04,830 --> 00:09:06,310 Let's explore something else. 146 00:09:06,360 --> 00:09:07,740 Let's explore multiple things. 147 00:09:07,890 --> 00:09:11,370 Explore const orender. 148 00:09:11,490 --> 00:09:12,830 How old. 149 00:09:12,840 --> 00:09:14,010 So this will return. 150 00:09:14,040 --> 00:09:15,720 By the way, how old we are. 151 00:09:15,960 --> 00:09:22,080 And I'm going to say it will take two parameters here in our current age, which we haven't created 152 00:09:22,080 --> 00:09:22,390 yet. 153 00:09:22,680 --> 00:09:23,460 Don't worry about it. 154 00:09:23,730 --> 00:09:26,660 And it will be here minus H. 155 00:09:27,150 --> 00:09:28,720 So I'm going to return this now. 156 00:09:29,520 --> 00:09:37,500 The thing was with the arrow functions that we because we have only one line of code, we can just return 157 00:09:37,500 --> 00:09:40,170 it without brackets, without those curly brackets. 158 00:09:40,170 --> 00:09:40,410 Right. 159 00:09:40,450 --> 00:09:41,350 Do you remember this? 160 00:09:41,670 --> 00:09:43,270 That's why I'm returning it like this. 161 00:09:43,530 --> 00:09:50,550 Now I have two functions here that will return the current age and it will return my name and or whatever 162 00:09:50,550 --> 00:09:58,020 name in last name we're going to put right now what else we need here or else we can explore one more 163 00:09:58,020 --> 00:10:04,860 thing, explore const H and that will be equal to thirty three. 164 00:10:05,430 --> 00:10:08,370 So we are just exploring this constants here. 165 00:10:08,370 --> 00:10:08,680 Right. 166 00:10:09,630 --> 00:10:12,740 OK, now it's enough for the search view. 167 00:10:12,960 --> 00:10:19,500 Now we need to find a way how we can import because by now we only import one thing from the search 168 00:10:19,500 --> 00:10:19,970 model. 169 00:10:20,280 --> 00:10:23,130 Now we can import multiple things from the search view. 170 00:10:23,280 --> 00:10:23,630 Right. 171 00:10:24,600 --> 00:10:27,840 OK, and how are we going to do this now? 172 00:10:27,870 --> 00:10:29,970 We need to write this in a curly bracket. 173 00:10:29,970 --> 00:10:32,340 So I'm going to import it here. 174 00:10:32,490 --> 00:10:35,220 We need to specify why. 175 00:10:35,220 --> 00:10:36,740 I just close it now. 176 00:10:36,900 --> 00:10:42,180 I have to show you I'm not sure if I've shown you before, so how you can go through from one file to 177 00:10:42,180 --> 00:10:45,510 another without looking too into the file name. 178 00:10:45,520 --> 00:10:47,880 So if you know them, control P. 179 00:10:48,240 --> 00:10:50,130 This is supposed to be a scope, right? 180 00:10:50,370 --> 00:10:57,300 If you can start typing, for example, you want to go to Bacquet Jason Bay and it will give you everything 181 00:10:57,300 --> 00:10:59,150 that is connected with being right. 182 00:10:59,370 --> 00:11:04,070 So if you're going to search view, for example, it will go there. 183 00:11:04,200 --> 00:11:07,020 So if you want to go to the index, right. 184 00:11:07,470 --> 00:11:09,660 This will go there, bundled those gas. 185 00:11:10,650 --> 00:11:12,210 It will just give you that. 186 00:11:12,210 --> 00:11:17,790 And you click here and you can work on that file instead of going through the directories folders and 187 00:11:17,790 --> 00:11:18,410 look that one. 188 00:11:18,420 --> 00:11:19,590 So I have an error here. 189 00:11:19,800 --> 00:11:22,080 You seeing that I do have something. 190 00:11:22,080 --> 00:11:29,730 Now, remember that when we are doing these type of named imports, we need to take care of this. 191 00:11:30,240 --> 00:11:32,640 The names, their names, the function names. 192 00:11:32,640 --> 00:11:32,960 Right. 193 00:11:33,990 --> 00:11:35,970 So I need to copy the exact same thing. 194 00:11:36,180 --> 00:11:37,890 So I'm going to say render details. 195 00:11:38,190 --> 00:11:40,230 Then the other one was the renderer. 196 00:11:40,230 --> 00:11:42,960 How old in the last one was H. 197 00:11:43,230 --> 00:11:43,590 Good. 198 00:11:43,890 --> 00:11:47,490 Now we still need to specify from where we grabbing this one. 199 00:11:47,640 --> 00:11:48,120 Right. 200 00:11:48,330 --> 00:11:49,170 Current folder. 201 00:11:49,170 --> 00:11:50,160 Current directory. 202 00:11:50,160 --> 00:11:53,790 Then we go to the views and then we're going to go to the search view. 203 00:11:54,240 --> 00:11:54,600 Good. 204 00:11:55,020 --> 00:11:57,690 Now let's write something to the console. 205 00:11:57,870 --> 00:12:00,390 Let's print this output and we will test it out. 206 00:12:00,390 --> 00:12:03,860 So Canterlot, so how we do it. 207 00:12:03,880 --> 00:12:07,020 Same using template literals. 208 00:12:07,020 --> 00:12:07,470 Right. 209 00:12:07,950 --> 00:12:10,260 This is imported 210 00:12:12,660 --> 00:12:15,870 from models and views. 211 00:12:15,900 --> 00:12:16,260 Right. 212 00:12:16,440 --> 00:12:21,450 And I'm just going to import here, render details and I'm going to pass here Tom. 213 00:12:21,930 --> 00:12:22,260 Right. 214 00:12:22,260 --> 00:12:25,080 Because render details, the two parameters here. 215 00:12:25,080 --> 00:12:30,420 And after that it's printing what it's printing like Dom and the last name will be Kroos. 216 00:12:31,590 --> 00:12:38,130 Then I'm just going to say comma here, I'm going to hit enter and I'm going to go into a new line because 217 00:12:38,130 --> 00:12:40,620 the template literals allow us to do this. 218 00:12:40,620 --> 00:12:40,890 Right. 219 00:12:41,130 --> 00:12:50,880 And the second function for how old is how are we going to say, OK, Renderer, how old are we going 220 00:12:50,880 --> 00:12:54,300 to say twenty, twenty and I'm going to pass my ear. 221 00:12:54,360 --> 00:12:54,780 Right. 222 00:12:55,680 --> 00:12:56,880 Thirty three over here. 223 00:12:56,880 --> 00:12:58,370 We can just grab the H. 224 00:12:59,700 --> 00:13:00,450 Don't worry about it. 225 00:13:00,450 --> 00:13:10,650 I will show you second function for how old it is now, what else we have here and and the last will 226 00:13:10,650 --> 00:13:15,450 be the age that I have. 227 00:13:15,450 --> 00:13:15,780 Right. 228 00:13:17,190 --> 00:13:17,730 That's it. 229 00:13:18,390 --> 00:13:19,670 So I'm going to save it. 230 00:13:19,690 --> 00:13:21,270 We're not going to be able to see it. 231 00:13:21,270 --> 00:13:23,250 We need to go back to the terminal. 232 00:13:23,430 --> 00:13:27,760 And what we need to do is npm run it. 233 00:13:27,930 --> 00:13:28,980 We need to call this. 234 00:13:30,030 --> 00:13:31,950 Wait, so back it, Jason. 235 00:13:32,250 --> 00:13:34,320 So we need to call this line here. 236 00:13:34,710 --> 00:13:36,450 It will start to Bebek server. 237 00:13:36,600 --> 00:13:40,200 It will go to the mode development and open up the browser for us. 238 00:13:40,530 --> 00:13:41,400 So hit enter. 239 00:13:41,580 --> 00:13:48,540 And if everything is OK, you should be able to see the green thing here, green lines of success. 240 00:13:48,930 --> 00:13:51,210 And also we should be able to open up the. 241 00:13:51,570 --> 00:13:52,200 It's taken to. 242 00:13:52,300 --> 00:13:58,420 A little bit nice, come on, wait until the bundle was finished. 243 00:13:58,540 --> 00:14:00,880 Did you see that so expected here? 244 00:14:01,210 --> 00:14:04,800 I'm going to the council and voila, we are having everything. 245 00:14:04,990 --> 00:14:07,130 This is important from models and views. 246 00:14:07,150 --> 00:14:08,540 Actually, let me spell this one. 247 00:14:08,710 --> 00:14:10,510 The name is Tom and the last name is Cruise. 248 00:14:10,720 --> 00:14:13,150 The second function for how old is it? 249 00:14:15,490 --> 00:14:17,110 Second function for when it's born. 250 00:14:17,110 --> 00:14:18,870 Should be sorry. 251 00:14:19,480 --> 00:14:25,300 Let's fix that one second function for when? 252 00:14:26,740 --> 00:14:30,340 For, let's say, a year of birth year. 253 00:14:33,450 --> 00:14:40,530 Birth is I'm going to save it now, I don't have to reload anything here, and it will give us that 254 00:14:40,530 --> 00:14:40,770 one. 255 00:14:40,770 --> 00:14:42,240 Let's fix this one. 256 00:14:44,860 --> 00:14:49,420 Beuse save it, it will be there, see it refreshing now. 257 00:14:49,450 --> 00:14:50,030 That's good. 258 00:14:50,680 --> 00:14:53,930 So that is pretty much it, what we want with these imports. 259 00:14:54,160 --> 00:15:01,330 Now, there is another way how we can do this so we can shorten up these names here, because we don't 260 00:15:01,330 --> 00:15:12,790 want sometimes we don't want these big lengthy names so we can do with as our deals that will be short 261 00:15:12,790 --> 00:15:21,910 for rendering details so we can say as render H in this will be a for example. 262 00:15:22,180 --> 00:15:24,070 But now it's not going to work here. 263 00:15:24,070 --> 00:15:24,400 Why? 264 00:15:24,610 --> 00:15:26,160 Because we need to change this as well. 265 00:15:26,320 --> 00:15:31,600 So it should be, Ardino, our H here if h h here only. 266 00:15:31,610 --> 00:15:31,970 Right. 267 00:15:32,200 --> 00:15:37,000 And that will give you the the the output by the way, I'm just control C. 268 00:15:37,150 --> 00:15:38,290 S every time. 269 00:15:38,650 --> 00:15:39,080 Right. 270 00:15:39,400 --> 00:15:41,800 I think there was a plug in for automatically saving. 271 00:15:41,800 --> 00:15:44,750 So you should so you should save it before going here. 272 00:15:44,750 --> 00:15:44,960 Right. 273 00:15:45,010 --> 00:15:50,530 That's why if you don't see it and if you don't see me saving, I'm pressing all of the times comptrollers. 274 00:15:50,830 --> 00:15:51,550 That's a habit. 275 00:15:52,000 --> 00:15:54,270 OK, one more thing. 276 00:15:54,550 --> 00:16:03,700 Now, we do have one more way that we are definitely going to use, and that is when we use the Esoterics 277 00:16:03,700 --> 00:16:05,590 or Starshine. 278 00:16:05,590 --> 00:16:06,530 So how are we going to do this? 279 00:16:06,740 --> 00:16:12,130 Just going to copy the entire thing and I'm going to show it to you now here. 280 00:16:12,130 --> 00:16:14,500 I'm not going to say I'm not going to give details. 281 00:16:14,680 --> 00:16:16,500 I'm just going to say star. 282 00:16:16,540 --> 00:16:21,010 This reminds me of database when I was learning my skill. 283 00:16:21,010 --> 00:16:23,830 When you select everything, so you select which star, right? 284 00:16:24,160 --> 00:16:29,680 So import star and we need to see X and we need to give a meaningful name. 285 00:16:29,800 --> 00:16:32,860 So I'm going to give that name saying same as this one. 286 00:16:32,860 --> 00:16:33,200 Right. 287 00:16:33,430 --> 00:16:34,910 You can choose any name you want. 288 00:16:35,200 --> 00:16:40,420 So a search view from this and I'm going to copy this one here. 289 00:16:40,840 --> 00:16:42,580 I'm going to based it down. 290 00:16:43,060 --> 00:16:44,290 And this is. 291 00:16:47,230 --> 00:16:58,570 Third way or Ford way, third way of grabbing or importing things now, I'm not going to use this already 292 00:16:58,570 --> 00:17:03,460 now because it's not going to work, but I need to use the search view whenever we put it here. 293 00:17:03,460 --> 00:17:03,790 Right. 294 00:17:04,540 --> 00:17:05,560 I'm going to paste it here. 295 00:17:05,560 --> 00:17:10,630 But how I'm going to access those methods here or variables doesn't matter. 296 00:17:10,660 --> 00:17:12,010 So you're going to access with a dot. 297 00:17:12,220 --> 00:17:17,570 So dot and remember, you need to know the name and it will give you the options. 298 00:17:17,800 --> 00:17:19,090 So search for you again. 299 00:17:19,780 --> 00:17:22,300 Dot Renderer, how old? 300 00:17:22,870 --> 00:17:27,130 And here will be search for you that age. 301 00:17:28,300 --> 00:17:30,290 So now we should have something here. 302 00:17:30,490 --> 00:17:30,930 Here it is. 303 00:17:30,940 --> 00:17:32,860 This is the third way of important things. 304 00:17:33,190 --> 00:17:33,930 The name is. 305 00:17:33,940 --> 00:17:36,890 And after that pretty much will be that also. 306 00:17:37,870 --> 00:17:47,740 Let's bring out the data from the model because we never output this one. 307 00:17:47,740 --> 00:17:48,150 Right. 308 00:17:49,330 --> 00:17:50,470 And let's test it out. 309 00:17:50,470 --> 00:17:52,690 And that's pretty much we are done for today. 310 00:17:53,080 --> 00:17:55,540 And the output in here should be the output. 311 00:17:56,020 --> 00:17:58,450 This is coming from the search model, right. 312 00:17:58,720 --> 00:18:04,020 Because that was in the search that just this is coming from the search model. 313 00:18:04,270 --> 00:18:09,070 So you can change it, only saying search. 314 00:18:11,740 --> 00:18:15,380 Come on, model like that here. 315 00:18:15,470 --> 00:18:15,990 Here it is. 316 00:18:17,050 --> 00:18:17,440 Nice. 317 00:18:17,770 --> 00:18:20,800 So now you know how to do imports and exports. 318 00:18:21,430 --> 00:18:25,420 Now you know how to use this name and default imports and exports. 319 00:18:26,200 --> 00:18:30,280 You know about the model view controller that we're going to use through our application. 320 00:18:30,640 --> 00:18:33,120 We created two folders here. 321 00:18:33,640 --> 00:18:38,590 And by the way, we're not going to need those things anymore because this was just for showing, right? 322 00:18:38,650 --> 00:18:40,570 Remember I told you so. 323 00:18:40,570 --> 00:18:44,750 I'm just going to delete this everything here and you don't need it. 324 00:18:44,770 --> 00:18:50,650 This is for practice only to show you how we can import things and how we can use them back to the controller. 325 00:18:50,800 --> 00:18:51,050 Right. 326 00:18:51,280 --> 00:19:00,720 Because I tell you that this is very good when we want to hide the data from any other files. 327 00:19:00,720 --> 00:19:07,240 So only the index will have access to the search actually to the models or only index controller will 328 00:19:07,240 --> 00:19:08,710 have access to the views. 329 00:19:08,860 --> 00:19:09,250 Right. 330 00:19:09,820 --> 00:19:11,740 And that is pretty much it now. 331 00:19:11,740 --> 00:19:12,910 I'll see you in the next lecture. 332 00:19:12,910 --> 00:19:13,990 I hope you enjoyed this one. 333 00:19:14,210 --> 00:19:15,090 And stay safe.