 Hello, this is Christian. Welcome back. In this episode, we're going to do some really simple CRUD operations on our dataset here. So this is the site we've been building. I want to make a few changes in here. I don't like the name title. I'm going to change that to say just name because it's a little bit confusing with the title of the page in here. And also had a typo here. I want to change it to description. All right. We're going to also add a button somewhere here to say add a new project. I'm going to add another column over here, say something like actions. And we're going to perform the edit and the delete links as well. Okay. So again, refer to this site here to use any of these validation rules. If you want to do a little bit deeper into the validation, I'm not going to do much other than just requiring the fields and maybe adding the URL to the URL link tab just to make sure it's a valid URL. That is all I'm going to do. Okay. So let's go back to our Visual Studio Code IDE and make some changes. So again, make sure your app is running. So first thing, let's go to the view first and let's change the portfolio. The title should be name. And then I'm also going to change the project title to let's say title by project name. Okay. We'll make the change it in. So we'll leave this open for now. Now go to the route under the data files and the data file here. So we're going to change all the title here to name. So the easy way to do that is basically you select that, press Ctrl D a few times. As you can see it moves down until you find all the fields you want to change and then just type in the name and all of it will be changed instantly for you. Very cool. All right. And then last but not least, I also want to pass this data to a session. So the projects need to be in a session because when we navigate away from the project site from page to page, we want to retain the state. Right. So if you don't do that, you're not going to be able to do retain the state. Later on what we do with databases, which is your permanent data store, then we'll have to worry about the session. But for now, we do want to do that. So here I'm just going to put here a session, pass into the session array, projects, the same name and assign it with the projects. Okay. So that's good. And we can close this now. Then over here, this is good. We can close that. And then in the web page, we're going to go and change one thing here. We need to load into the page every time when we load data. So in the portfolio here, we notice we used the projects here is coming from that product projects page. But this time I'm going to use a session as opposed to this, you want to retain the session. So in here, I want to do something like this. So project is equal to the session. And the session key is really just call projects. So you want to load a session every time, of course, you can check it to see if session exists. First, if we do that, but that's, that's, that's fine. So you don't, you could, you don't do that. I mean, let's do that. Okay, just to be safe, we want to make sure it's actually there. So I want to check it so that project is indeed exists. And I'll keep the project as is. Otherwise, if it's, if the session exists, you can say if the session of the projects just exists, that's true. Then go ahead and replace the project with that. Instead, otherwise, we'll keep the default. Okay. So now I think that should do it. And let's give it a spin and let's see what happens. Refresh the page. Okay, so for, okay, at least, well, when I need to change that, the ID name is not shown, but let's fix that first. Probably something I missed in the cope. Let's go back to ID here. Let's go back to the portfolio. I'm going to change this to say description. Okay. And a project ID, project name that was not visible. So that means in our projects here, um, somehow it was not set. Session projects. And we load the data already and it should be set. Okay. I want to clear my cache and see what happens. All right. So I'm going to go to storage and frameworks under sessions and clear both of these from the list here. Okay. So start from fresh and load our page and see what happens. All right. It's still not showing. Let's figure out why that's not showing up. And my guess is probably I did not update the data correctly. So let's go back here. This looks good. I mean, as far as session is concerned, we already imported. So that's fine. Let's look at the data again, probably missing something here and close the session for now. And in here, we got the name. Okay. So maybe the project, we haven't changed it. Let's go to the app folder and go to the models and project. Yeah. And here we need to change this as well, right? We don't call it title anymore. Call it name. So again, just make sure you change that control D three times and the name. All right. So that's where it was. Okay. You can close that change that it should be fixed now. If you go back and refresh it again. Okay, it's not going. Let's try cash one more time and come back. Okay. So there it is. Perfect. So now let's add a button right here. And the two columns I mentioned earlier. Okay. So back in here in the portfolio page right above here, the tide table, maybe right below next to this one here. What we're going to add is a table button. Maybe a link. Okay. That points to a link called add. We're not taking the ID there. And we just put here add new project. So I'm there. Okay. So I'm going to use the bootstrap. Let's just tell this. Give it a class called BTN and maybe BTN primary, just the blue button. And let's see what that looks like. Okay. Okay. Looks good. So as you can see, if I click it, it goes here. I'm going to add the form right in here. All right. So give me a little bit of room, maybe some margin at the bottom. And then add a column on the right side. Okay. So let's put a margin. It can be M-4. Usually it'll be M-2. It's all around. If you want a bottom, you put an MB bottom. That's for margin all around. And so I think that's, yeah, that's good. And then the column is going to be duplicated. I'm going to press the Alt shift down. And we'll call this one here, actions. And then we'll add a new row down here, another TD. So in here, we have two links. One is going to be going to the edit page. So take an ID field. In this case, it's going to be the same ID as this one here. So we're going to copy this right to this link here. We want to delete or edit this particular ID. And then we'll put here the same edit here. Duplicate this line. Control Alt down again. And this will be going to the delete. We're going to delete one record at a time. So we need ID as well and delete. All right. So I think that should be it for this one. And space here. You can format it with CSS and things like that. If you want to, it's fine. So let's see what it looks like. Refresh. Perfect. So again, you can make it into button type. Looks like this. If you want that, I think that might be a little bit better. So I like to do clean stuff. Sorry, guys. So let's go ahead and add a class. Just like the one above. Tn. Maybe Tn small. I think like things like that. And then we'll put here Tn. Put primary. Call it secondary. The gray one. I'll copy this and put it right to the next one here. Let me close this. And we'll call this is the delete. So let's use the danger for red. Support margin here. Maybe just a tiny margin again to see what happens. And refresh. Okay. Yeah, I'm not going to play with it. You can make some changes if you want. But it's good enough for now. I'll fix it later. But I just want to make sure it's functional. So again, we'll do a delete. It's going to go to the delete tab and get ID here. And then the same thing for the edit as well. Okay. All right. And now let's go and do the add here. It's quite simple. And we use the same form as the contact. And we're going to just make some changes here, right? So let's go to the code again. And now I'm going to duplicate the contact form right here. Copy and paste. And we will name it to add that blade that PHP in here. I'll keep this as is the title be that one there. This is the name. It would not be full name, but we'll just say project name or just name should be understood because we're dealing with project. Here will be the description. And then this is the description will be a text area as opposed to a input. And then down here is the actual URL. So we'll move this around. Okay, so I'm going to copy and paste this around just to make sure it's easier to type. And then this is the not message, but this is the description. And the name is good. So we are good to go. All right. And let's see what that looks like. Also, the form should be going to the ad. Okay. The same link as the post. All right. So that's good. Let's go and review the page. Folio add and snap out. Okay. That's good. I did not create the URL yet, but let's go into the web and then add a new form over here. So it's just a get. I'm going to go up here and we'll use just one of these. This one will be fine. And just a very simple view. So let's put here. This is the ad. Yeah. So this is for the get only. And we also want to do a post. So I'm going to copy this one here. Or maybe maybe this one here. This one here looks good. Looks very similar to this contact. And I'll put right in here. This is for the ad. All right. Coming back from the form. So we've got the name. This is going to be the description. And this is the URL. So this is going to be required. And you put here type symbol URL. So it's a URL. And these are just both just required. All right. And again, we'll do some variation here just a minute. So I'll make sure the contact, the ad one works. So add will be go to add and say add no project should be the ad. Okay. And then down here, just to make sure we go today. I will do that later for now. All right. So let's go and see if the form loads refresh title. Yeah, I didn't include that. Let's see the title for the ad. Yeah, we can include here. Not actually title wrong place. All right. That should do it. Okay. So here we go. And when you click the ad submit, it's going to go and then has some errors. We would get that. That's good. And his thing about the URL. So the email is valid. If you do that, it's all invalid. The email. So the URL had to be like HTTP. I mean, just like that, very simple. It will take it if you just include that. Okay. So let's go back and process some data. Now, when the data comes back, as opposed to the ad route, we're going to validate the data just like we do here. And then we just all pass the validation. We're going to create a new object and pass it to the new or the current object, right? And then we're going to send data to the user back to the view, which is the portfolio. So I'm going to do a redirect to the portfolio. That is the return statement. Okay. So when we add, we just need to do a new object. And then we'll create a new object and we'll pass that to the URL. Okay. So I'll do something very simple. You can create name fields, if you want to, I guess, let's say it's easier. Name is equal to, you know, what Ashley is already inside the data object here. I'll just do very simple here. I'm going to push it to the project. But first, you want to get it from the session just to make sure that you are using the correct project object. So you load it from the session first at the current state. And then we're going to update this project. Okay. All right. You're going to push it. All right. A new project. The project here is the project class that comes from the project class we didn't include here. It will look very similar to the data file. Exactly this. I'm going to copy this. Make sure we import that in here at the very top. And it's fine. And then if you look at the bottom, how we do this, exactly same as this. So basically, exactly this one, I'm going to copy this and put it right in here where we create a new project. Okay. And here's I use the data because it's the same variable name. So as you can see, this is the name description and so forth. Only thing is that we do not have the ID. So when we create a project, you can include the ID field. But for my example, I'm just going to randomize the ID. So before I do this, I'm going to add an ID variable here. You can do that here or just add it right in here. It's fine. Okay. I'm going to use the random function brand and any ID between let's say, I don't know, a thousand up to 99999. Okay. So in a random variable for the ID. And that should be good. So once you push that to the new project, the project, we then also need to set this session again. Right. So we need to update the session of the project to this new updated project. Okay. And then we redirect to the portfolio page. And okay. So that should do it. Let's save and see if this works. All right. So I'm going to go and just stop fresh. And no project. Give here site one. It shouldn't say email. It should say a description. I'll fix that. It's a simple website. Link is http site one.com. Okay. Submit it. All is good. Now you can see that it's been added to the list here. If I navigate out of that and come back, it is now retained because again, the session is extremely important. All right. So let's change this to a description as opposed to email and then we're done with this add. So it would say description. Okay. Perfect. So that wasn't too bad. Now, the next one is going to be the edit. This is a little bit challenging. But it was very similar to the ad form here. All right. Because when you do an edit, you want to pre-field the form. So I'm going to use the same form as an ad. Copy that and duplicate it. And then we name it to say edit blade. Now it's exactly the same form. What we're going to do is we need to populate these with the information. All right. So in here, I'm going to include the value equal to and then I'm going to pass an invariable called project. There's a single project and we pass it the ID. I mean the name into this particular field. Okay. So the same for the other ones. The text area, it needs to go right in between the text here and not in the value. This would be the discussion. And then we'll do one more for the URL down here. That should be it. Of course, what if you don't have the correct information, right? So you want to show only this if it's valid, right? If there's no data in this particular project, then you shouldn't be showing anything at all. So on the very top here, you can put another if directive, say something like if there is a project, if the project does exist just like that. If so, you can go ahead and run this form and collapse this, show the form. Otherwise, down here, right? Otherwise, and then you put a message here, P, just say invalid ID or something. Okay. And we'll put a CSS here. Text, danger. Or you can put alert. I think alert danger is alert danger. It has a button type. All right. So say this one for now. And then let's go to the web and let's create our edit. Now the edit will be kind of similar to the add. So I'm going to duplicate no, I can't because I'll need to do some processing. So let me copy this right in here. We'll close this just in case. Okay. So when you edit, it's going to be a get. The edit will pass in an ID. We'll make that as required. We need the request. I don't need a request. Actually, I just need the ID of type int. Leave it out. Just ID is fine. I'll leave it in. So I know that I'm requiring an integer. If it's not, then it's going to be rejected. Okay. So we edit. What do we need to do? We need to find the ID in the project list. So again, the first thing is we need to get the session. And you can write a function to do this for you so you don't have to do this every time. But for now, I'll just do this manually. Okay. Again, my project session. And then all I need to do is I'm going to loop through this project and find it. Right? So either I find it or I don't. So I'll set a project variable. Initially, I put like set it to no. And then down here, I'm going to return it to the edit page. So it'll be return, view, the edit template, and the data will be just like the other one. Title is equal to the update project. I'm also going to pass in the project object. Okay. So that's what I need. Now, let's find this project here. I'm going to do a loop. So for each of the projects, project, or just call it P, I'm going to confuse with the project up there. I'm going to find if the P of the ID matches this ID. If that is true, once I found that, then I'm going to set your project to that, right? Set it to P and it will break out of that. So very simple just to find it in the array. And then that's good. So that's going to go to the view and get that. When the data comes back, I'm going to do something similar. So it would be similar to the post right here. I'm going to copy the post and we'll make this as the post for the edit. Okay. So this would say edit. And yeah, we'll keep the same ID as well, just like the other one. And then I need the request. I do now and also need the ID because I need to find it. Right. And we'll update this in a minute. So when the data comes back, I need to validate exactly just like this, which is good. And then load the session of the project. Okay. And then I'm going to, I'm not going to create a new project though because I'm just going to update the existing project right in here. And this will be the same, right? So what I need to do is search for that project again. And I want to do a for each because I need to note the index position. The idea here is to remove, I was to edit, to edit a, yeah, yeah, I guess, yeah, for each is fine. So most find a project, update it. Okay. Yeah. So for each is fine. So for each year, project as project. And then then if project of the ID is equal to the ID ID, then we're going to assign the um, yeah. So the current project name is equal to the data of name. Okay. So you get the idea. Duplicate this. And this is the description. I'll copy this. Make sure I always type my code. Sometimes better this way. Okay. So I updated my data and I'm going to break out a loop. I'm done here. And then I push it back, updated my projects variable. And then I'll be direct back to the user, which is a portfolio. And that's it. It's for editing here. We'll see if this is true. All right. So let's go back to the view and check it out. Let's go here. I'm going to do the edit the bottom here, edit. Okay. So you can see it looks fine. I'm going to change it to a project to and site to and I put here site to just in case submit. And you can see that now has been, as you can see, we did not actually it's an error because we should not add it. It should be just updating to a new project, the current project. So we made a mistake here. And let's see why in the code. It should be a post go to the edit. And what do we do here? See the session. We got that right for each project. And here we matched the ID. Once you matched the ID, update the name, description. And then we set the session back to the projects. And we directed the user. Okay. So the edit here, maybe because we did not include the ID in this field. Let's go back to the edit form here. Yeah, I should, it's going to a wrong place. I forgot to update this one here. Okay. It should say edit. And then we'll pass in the project ID, right? It was going to the wrong place. Okay. Perfect. So let's save this again and go and try one more time. I'm going to go and do the last one edit. And we'll change it to project five and submit. And there you go. Perfect. Okay. So now let's do the delete. It should be really simple. We click a delete. It's going to go into the delete operation. And we don't need a view for this. Just very simple delete. So back to the web here. Delete will be, you can do right above here. It will be similar to the get ID here. I'm going to copy this. I will put right above here. Or delete. Delete. If you would say delete. Okay. We do need the ID here. I don't need the request. I'm not going through the form. So I need to load the session variable and search in the ID. So in this case, I need to know the exact index position so I can splice it. Remember, the project is not a ray of objects, right? So all we need to do is really just find it and then delete it. So therefore I'm not going to use this one. It will be a regular for loop. The index starting from zero is less than the count of the project. And it will just write plus plus. Okay. So in here, if you find a match, if the project projects of I is equal to this ID, I of ID, sorry, equal to the ID, that means you found it. We're going to go ahead and delete that. So we're going to do an array splice. The reason we use the splice is because it will reindex your entire array once it's been removed. So the array name is going to be the project. The position is at the I position. And we just need to delete one record. And then we break out of that. And then once that's done, then again, I'm going to copy this again. Okay. So same thing. We need to copy the session update the session and then redirect back to the user, which is in this case back to the portfolio page. So that is our simple delete. So I actually don't need this project here. We're just basically updating the current project. Okay. So let's go and take a look and see if this works. Go back to portfolio. Go delete the last one. Okay. All right. So something's not right. Oh, I didn't do the delete URL yet. Yeah. So let's do that first. Delete URL. Delete. No, not delete. I'm sorry. Should be just get. We're not using a form, by the way. If you are using the form, then you do need to go to the delete. Okay. So there's a difference there, especially if you have not a form, but using like a, you know, Ajax call. Okay. We'll create the API maybe later. But when I'm just a simple get request, and we're going to match the ID and then do the processing. Okay. So that should fix it. Let's refresh the page. Okay. Delete. And it should take us right back to the page here. You can see it's been removed here. So if we delete all of them. Okay. So it looks just fine. And what happens when I delete all of them? Okay. So it comes back again. For some reason, everything comes back. And that should, that shouldn't be the case, right? So if that's the case, then, you know, once it's all deleted, whenever you move that from the URL, I mean to clear the list. So we want to say something like in the portfolio here, if the project exists, then we show this otherwise like before, if there's no project, check it again. If objects, then go ahead and show the table. Otherwise, we're going to have to pre-message again the class of alert. Just call it maybe primary, just blue. And they will put you, you know what, maybe not the alert anymore, just plain text, just text primary. And they will put here no data. No projects to show. Okay. So say this now. And let's try it one more time. So portfolio. And let's see home contact project. Okay. Let's do a delete. And somehow that's not working. So something is not right there. Let's check it out and see why. So back in our code. I'm thinking maybe because it just didn't clear the cache or something. Yeah, let's clear our cache and just make sure it's working. I couldn't figure out anything in my code. That's not correct. So let's again clear the cache. And let's do it again. So let's start from fresh, polio, delete. Okay. So there we go. And once we delete all of them, we get the message. Yeah. Somebody still is still loading because once we load the message, if we go back to the portfolio page, it actually we updated the actual data. So that's why it's not being deleted, which I think is fine. But let's see. Okay. Let's look at one last time and then we will close this video. So when we load the portfolio down here, and this is what happens because we used, we used a project here, right? So we the session actually destroyed, but then we already used this default project. That's why it's always loaded in this case. So now I'm going to just remove this. Okay. So the project will be empty and in here. And instead of doing this way, I'm going to go up here and put project as no. It's either no or has something, right? And now that should fix the error. If I'm not mistaken, let's give it a try. So we can refresh, remove all the projects. And now we should say the message is now gone. Okay. So perfect. And that's all for this video. And the next video, we're going to go look at the controller and maybe some do some database design as well. Thanks for watching. I'll see you in the next video.