 Hello, this is Christian. This episode, we're going to look at model. This model, I will break into two parts. This part one here, we're just going to focus on the RAM data, nothing from database or any text files or anything like that. In a separate video in the future, we're going to create some databases so we do the other part. So models are really just data. It can be anything, right? Any from a text file, RAM, and so forth. Now, data are stored usually stored in the models folder. So here, if you expand the app folder and there it should be a models directory. And in here, you see there's a user.php file. This is, again, provided by a larval by default. So we're going to create something similar to this. We're going to create a class called maybe project and then we'll add some data to that, OK? So before we begin, I want to also navigate to my repository over here. I have a data files directory inside here. I have a data.php and it has some really simple, just simple data in here, OK? So I'm going to copy this data store here, just about for project data. And we're going to add it to our project. So in here, I'm going to close this now and I'm going to create inside the routes folder here. I'll create another directory here. We call it data file just like down there. And inside here, I'm going to create a new file called data.php. And then I'm going to dump right in here, OK? So this is our data store for now. And I'm going to make sure it's PHP. So I'm not going to load this object or this array to the view. I'm going to create a class for it and then we're going to create an instance of each of its object as a class object, OK? So before we do that, though, notice that in the models class folder, you can create a model in here yourself manually if you want to. You can just copy this and make some changes. But I'm going to show you how we can do that automatically. Well, not everything, but using the interface down here, OK? So go to the command terminal, control J, takes you there. Again, make sure you inside the application here. And run this command. So PHP artisan make colon model. And then space to give it a name of the model. The name here is the name of the class, also the name of your file. So for me, I'm going to call it project singular because the classes are usually singular and just hit Enter, right? So what that would happen is that if you look at the models folder over here, you see that it created a project.php file. If you go in that file, let me minimize this for a second now. You see that it added some stuff in here for us already ready to go, OK? It created a project class. The caveat is that your class name should be the same name as your file when you use it in this context, OK? Otherwise, you're going to have some problem issues later on. So usually use the same class as the same file. Kind of follow Java's convention of naming your classes and files. Although in PHP, it doesn't want to be quite that. But in this case, it does matter. I just want to point that out, all right? So in here, this class here is going to store the data fields of these data. So we have four of them, right? The ID, title, description, and URL. I'm just going to create a really simple class of key, whatever it provides here. And then we just add to that the data fields and things like that, OK? So I'm going to add a, I'll make everything public for now. Just make it simple on the ID field, public, title, description, and then the URL, right? So that's good. And I'll create another constructor here just so that I can use it. And it's called under, under construct. This is the constructor. The data fields would be the same as those title, description, and URL. OK, so in here, I'm going to just update them. This title equal to title, actually, ID, I'll switch those. Try to make it look nice. Description is equal to description, and then this, that URL is equal to URL. OK, so that is my class template. And usually you create, you know, using private, then you create gathers and setters for this. But for now, this is good enough, right? So use this model to create data. Notice that it uses a name space called app slash models. Now, this name space is important because we're going to use this name space so we can access this class called project and our code. So now I'm going to go over to the data file. And over here is where we're going to use that name space. So on the very top here, I'm going to use, use app slash model. And once you use the name space, then I have access to that. But then what is the exact class called? It's called project, which is, again, the same name as my project file. So app models and then here slash project. OK, and again, the same name, right? So use that, use that rule. And then down here at the bottom, I'm going to create a for loop to create an object of these four records, right? It takes the ID and title and so forth. And here for, I used the for each just to make it really quicker. Each of the data is a constant in this case, as we'll call it D. Just make it short. Let's see. Well, project data, project data as, let me ask you guys, fine. OK, and then I'm going to create a variable called project plural. So array is going to be assigned with a new project. And I pass in here the ID, which is going to be coming from the data of ID. The second is the data title. And then. In a description, one more data of URL. OK, so in the rule of PHP, when you create an object, you pass it to an array. You don't really have to push it to that. You could use the push function if you want to do that. But this is a quick way to do that. And it will automatically append to the end of that array, right? Very nice, very beautifully in PHP. Now, so I should have now created a project called projects has a full content. Now, the next thing is I'm not going to import this in. We include it into the web route over here. And I'll do that at the very top here. You can do the inside here if you want to where we want to. But I'll make it in the space up here. So it's available everywhere in this file. I usually include it's coming from the data files. And it's called data that PHP. And because my variable is really just a regular variable, not a constant. I don't have to import it. I don't have to create use and things like that, right? Otherwise, we would have to use it. But that is enough. So basically, I'm exposing everything there to this place and makes some code really nice. Now, I'm going to pass this data over to the portfolio over here. As you can see, we created a very simple portfolio here. And if you go to the view, let's open that portfolio view right in here. This is the one that we created earlier. OK, so it has nothing here yet. Before we do that, let's go and run the application. For example, let's do a PHP artist on serve again for number 8000. As you can see, there are no errors. If there are any errors, they will throw an error right here. I should have done it earlier, but as far as I go, there's no error at this point. And go ahead and launch the site just to make sure that it actually loads. Here we go. All right. And here in the portfolio, as you can see, we had, OK, we probably didn't have the URL correctly here, but it's just not found. We'll figure out why. But I should load this URL here, OK? All right, so let's go back into the code again. And I'm going to close this for now. And then in my web file, oh, yeah, because we were playing with this data here, right? So I'm going to delete these IDs. I don't need the ID here for now, because we're just testing earlier on. And then here, the title will keep going to remove this information. And in their place, we're going to create a variable called Projects. And that should point to the Projects variable we created inside the data PHP file. Now, this is the one that's going to be passed over. But you will see that it's not recognized, because if you mouse over that, it would say it's not verified. It's not available. Then when you do this, because your variable is created outside here, you need to include that inside your function. If you don't do this, you could also move this and put it inside here like this. So once you do that, as you can see, it resolves the problem, right? But if you want to use it somewhere else, then you have to keep doing that, right? So instead of doing that way, leave it as it was. And then this function here, you can use a directive function called Use. And then you pass to the Use function, then they want the variable you want to pass to it. So in this case, it's Projects. And because it's in the global space here, PHP has a really strict rule that in order to use a global variable, you must either use the global's super global keyword or the global keyword to make it local to that particular function. And this is a callback function, so it's really tricky to do that. And so in this way, the best way is to use the Use function to pass any variable to that. And so now it should be local to this function now. And then once you pass this data over to the portfolio, now we have access to that information, OK? And so over here, we are then going to use a loop to loop through all the four projects and show them here just so that it works. We can quickly just see how that works in here. So I will use here the for each again. OK, so you can see it has really nice syntax to help us already. The collection is called Projects. And each item would be since we're just going to, you know, interested in the actual project itself. And so I'll just keep the item as item, OK? Or actually, you can call it Projects. Maybe it makes more sense. And I'm going to type Project here. Project as Projects. So for each project, we're going to do something. Again, make sure you don't have too many n% in the front. And for now, I'm just going to print the project title, OK? So you can use the arrow now because these are data fields. I'm just going to print that. And you should see four of them in here. I'll make a PR just to see that actually working safe. Now go back to the browser and refresh this page. And here we go. We see the four projects here. Pretty good. OK, so now let's go ahead and create a table and make it a little bit nice. And I went ahead and already googled for the table and bootstrap. So we're going to modify this a little bit to make it a little bit nice. So on the table here on the bootstrap, you can search for it. I want to use, this is fine, maybe something like a little bit more interactive. This one's good, too. Yeah, this is fine, too. The straight one. Or let's see. Oh, the black one's pretty cool. Oh, this is pretty good, too. Let's go with the stripe. OK, I like the stripe. It looks kind of nice. So basically, I'm going to copy the table here. And let's see. This is for everything here for now. Copy the whole table here and go back to your code. And we're going to put, for now, right in here. We need to split where and where. So this is the repeating part. That means that the T-body goes in there, right? So this part here will go to the top. I'm going to move that to the top right before the loop. And then the loop takes place. Actually, the T-body also needs to go above here. And then this is the repeating part from here to here. I don't need these guys. I'm just going to close it right here, T-body. All right, so this part will go inside the loop right in here. And again, just right-click in format. Make it a little bit nice. Perfect. Now, Hang is definitely four fields. Perfect. Here, I will put the ID for the project ID. This is the project title. See description. And then this is the link of the URL. OK. And here, this is going to be the project ID. And I'll copy this. And I'll paste it right down here. This will be placed with the other ones. This is the title, description. Then this is the URL. Although, I want to have a link. I want to go to a links OK, which wrap is going to go to that URL. And it's going to come right here. Target is going to be blank. Is that again, just self-ictitious sites? OK, not real sites. And I'm going to copy this again to display the URL to the table. OK. Yeah, that looks good. Now, because this is bootstrap, it's not going to work until we actually load the bootstrap library. But for now, I just want to see that it does work on the browser first. Let's go back here and load the page again. And you can see, they're all here, very nice. Now, let's go ahead and load bootstrap into our application. So we have to go back over to the bootstrap page. I believe you go to the very top. One more thing before I go. I like the blackheading here for this table. So I'm going to put here table dark. I think that's what it is, table dark for the heading. Let me see. Yeah, table dark. Yes, let's try that. Table dark and to the T-head section, OK? T-head, add a class called table dark. We'll see. All right, so now let's go back and add a bootstrap. If you go to the get started and these are the things that you need to add. So just copy this link right here. Go to the application and go into the master file, right? And the views, master layout right here. We're going to add right above our CSS. And then we're going to also include the JavaScript to make it work. So down here, again, just click a little copy here. Copy to the clipboard, go back, and then put. I'm going to put it right below down here just in case. Make sure it loads everything correctly. And save this file, right? And then you can close that. Now if you go to the browser and review your page, it should now load bootstrap. OK, so there we go. Perfect, right? Cutter nice here. I lost the photo navigation down here, or link is too low. We're going to fix that a little bit. But so far, so good. Yeah, and maybe I'll put another message right below the project here. OK, so let's fix the footer and maybe add some room a little bit to our navigation here. Otherwise, I think so far, it's pretty good. So let's go over here. In the CSS, I think that's what we're going to fix. The CSS here, not inside the public directory. So the footer, it was kind of low. Let's turn off the height here. Probably don't need to set it anymore. Again, just control enter. And the control question mark will give you the comment. Let's turn that off. The main, we'll keep the main, the navigation. I don't have the nav. Let's see again. CF12, this is what it looks like, the navigation. That's fine. Yeah, I don't have a nav tab. I just want to add some margin. Let's see, maybe the top margin, the 10 pixel, didn't make it somehow. Yeah, I'm going to do that. The footer area, we're going to also move that added. So if you move the height, it should be fine. So here we go, we updated the footer already. And navigation, I think that's OK. But you can add a little bit more padding if you want to. But not only that, it's a little bit short. I want to make it a little bit wider. And right now, I think it's set to 50 pixels. I'm going to modify that just one quick magnification here when you're 50%. I'll make it like 80% here. The navigation, I'm going to add a new one here for the nav. I didn't have that one here. But I'm going to just add it so that has a margin top. Maybe, I don't know, 10 pixel. I think that should have some room to the top. And I think that's pretty good. So let's save that and load one more time. And there you go, perfect. All right, I think that's good enough. Again, if you want to add another one, maybe this one has nothing to do with that. I mean, I want to add another data right below here to say, you can use a caption or, I don't know, I'll use an h3 for now. Like following some projects. Something like that, OK. Yeah, so basically, that's it. For this video, and again, very simple, how we pass data model to the site here. And using loop, I'm able to display information just very easy like that using objects. OK, so in the next video, the future video, we're going to add some data kind of similar to this, but we will be coming directly from a database system. So thanks for watching. Any questions? Please let me know.