Up & Running With Symfony 4 – Part 3: Create, Update & Delete

alright guys so in the last video we went ahead and set up our database with doctrine when we're able to list our articles were able to go to the show

page now what I want to do is create a form to add an article so we're actually gonna go down to the terminal here and we're gonna use composer to install or require form alright so that should

install and then in our controller we won't basically want to take some components from this form extension so let's go up here and let's say use symphony component

slash form slash extension extension slash core slash type slash ok so basically just like a text type or an input field and then what I'm gonna do is just copy this two more times and

the second one is going to be a text area type and then this third one is going to be a submit type okay so we need those in order to use these fields so let's go back down here and let's

create a new row so basically we want we want a row that's going to be it's going to be a get route and a post row it's going to display the form it's also going to handle the processing of the

form so let's say route and it's gonna be article or slash article / knew and I'm also gonna give it a name of new underscore article okay we also want to add a method so method is gonna

be get as well as post and the function I keep forgetting public so public function new and this is gonna take in a request with a variable of request and request is something that I don't think

I brought in so we have to actually bring that into so I'm going to go right here and say use symphony slash bundle not bundle component this is all in the documentation if you get confused I know

that bringing this stuff in can be a little confusing so its component HTTP foundation same as the response slash request yeah and I guess I guess we could bring that whoops didn't mean to

do that I guess we could bring that up below the response yeah we'll put it right there alright so now let's go back down to our new function or a new method and we want

to create our form okay first of all we have to create a variable called article and set it to new article and then we're going to create our form variable and set that to this and we want create form

builder and then pass an article so we want to create a form for our article and we're gonna put in here add she'll put this on a new line alright yeah you should be able to do that so add title

and this is going to take in a second parameter of the type which is going to be text type remember we brought that in above we're gonna say text type class and then pass in an array of options now

bootstrap need that the inputs they need a class of form control so I want to pass in attribute our attr and then set that to an array and you can put an array of attributes and basically all I

want is a class of form control okay and then we want to again add the body and that's going to be text area type class pass an array and now this is where we can actually everything is

going to be required by default and if you for instance don't want the the body to be required you could set required to false and then we also want the attribute actually I'll just copy this

attribute just grab that and we can go like that and that should be all we need for the body now let's do the Save button so we're going to do yeah add save and save this is gonna be the

submit type that we brought in so submit type class and let's pass in array and we're gonna add a label of let's say create and then we will also want attributes

so attributes is an array and I just want to add a class or a couple classes we want BTN BTN primary let's do margin top three just to move it down a little alright and then the last thing we need

to add on here is just get form like that so that creates our form now we should be able to render it if we go right under it and let's say return this render and we're gonna have a view

inside articles called new dot HTML dot twig and then we pass along array and inside here we want to pass in form and we want to set that to that form variable we created and then a method

called create view so it's gonna actually create the view for us so let's save that now if I were to go to if I were to click on this link because we already have it set to article new let's

see what happens okay so impossible to access an attribute title on a null variable wait a second new dot html' I don't know why it's trying to load show actually I

do know why it's trying to load show because it's it's looking at our new right here as an ID okay so if when you use this parameter here this should go the order actually matters so we're

gonna move this down below this one this route and this function so that should be at the bottom so we'll save that and reload and it's just gonna tell us that I can't find the view because we haven't

created it so let's go to templates articles create a new file called new dot HTML dot twig and now if I reload it just gives us a blank page now all we have to do since we basically generated

the form view from within our controller we just have to first of all extend our base so I'll just copy what we have in show and put that into new and let's change the title we'll say new article

well one thing in the show instead for the title we can actually put the article title like this and go like that for the title and then in new I just want a new article for the title and

then everything in the body we can get rid of and we can use we can say form underscore start and then just pass in that form variable and then let's copy this down twice so we have form start

and then we have form widget so I believe form start is like the opening form tag with the attributes it needs and then form widget is the actual form and then form end is like the end

tag and that should create it for us so let's save it and reload and there we go there's our form so again to reiterate we're creating the form here with all the attributes the classes everything

like that and then we're passing form create view in AZ form and then we can use these these placeholders here to create everything okay now when you use the create form it's gonna if we look at

let's actually take a look at the source code it's just a post request to the same URL to the same route okay the same route that it that the get request comes from which is this route here so that's

why we're gonna also make the post request to the same route because that's what this form does and you'll see this is required the title the body is not though you see how that just submits to

the same route which we're not doing anything yet but the body is not required because we put required false right here now up to this point we're just loading the form we haven't taken

care of actually submitting it and we want to we want to use this same route we want to use the same exact function so what we can do is we can test to see if it's actually been submitted but the

first thing we need to do is just say form handle request and then pass in that request variable okay and then once we do that we can just check to see if it's been submitted

and we can say if form is submitted and form is valid then this is basically whatever we want to do when we submit it and what do we want to do we want to add the data to the database right so we're

gonna say article equals the form data or form get data and then we're going to create our entity manager by saying this get doctrine and then get manager it's kind of a strange syntax but once you

get used to it it's it's not bad and then we just want to persist the data just like we did above or just like we did in that save method that I created so persist we want to persist the

article and then we want to flush because right now it's it's just getting ready to save it didn't actually execute so let's say entity manager flush and then let's just redirect so we'll

say return this and we can do redirect to route and we can pass in a route name now I want it to go to the home page which has a name I believe it's article underscore list let me just check that

so the index yeah article list so that should just redirect us back and it should create the new record so let's save that and let's just reload and let's say article 3 this is article

number 3 and let's create and there we go it gets added and it redirects us back to the home page alright so we can now create and read our articles now all we have left to do is update and delete

so let's do our delete next now I want to use a delete request so we're going to use a little bit of Ajax or we're actually going to use the fetch API the JavaScript fetch API but let's first of

all create a button to delete so we'll go to our view which is our index and let's create let's see we'll go right under I'll just copy the show it close this up so we'll copy the show and this

will be delete and the href is just gonna be nothing just gonna be a hash the class I'm going to change to danger because I want it to be red and I'm also gonna give this a

class of delete – article and I'm gonna give it a data – ID attribute and I'm going to pass in the ID of the article that way we can access it in the JavaScript all right so let's save that

and reload and then what we'll do is create inside of our public folder a new folder called j/s and let's create a new file called mange a s and we want to include this let's just do an alert say

alert one and then to include this I don't want to include it on every single page so I'm not going to put it in the base I'm gonna put it just in the index because that's where we need it because

that's where the delete button is so remember in the base we have the JavaScript block right here block JavaScript so what we can do is in index we'll go down to the bottom here and

let's define a block JavaScript and in here we're just going to include a script of J s main dot J s and let's save and reload and we get our alert so we know that that javascript file is

loading alright so back to the JavaScript file what I'm gonna do is create a variable called articles and set it to document dot get element by ID and I don't think I have an articles ID

so we're gonna have to add it I'm gonna add it to the table so right here I D equals table and we're using some event delegation here since there's more than one delete button we need to use event

delegation meaning we have to target a parent object or a parent element like the table and then cert and then do an if statement to search for the delete button we want so in here let's first of

all check to see if there is an articles so if articles then we're gonna create an event listener so we're gonna listen for a click event and then we'll have a function I'm just going to use an arrow

function and we're gonna pass in an event parameter here and we basically want it chiming right now if I were to like if I were to say alert oops I'll say alert to and save if I click

anywhere in the table well wait a minute if articles get element by T what I do did I save this oh I gave it an idea of table what you guys say anything should be articles

so if I click anywhere in the table it runs and I don't want that I want to target the delete button right so what we have to do is an if statement and we're gonna say if e dot target meaning

the button we click class name so if it has a class whoops if it has a class that is equal to BTN it has to be exact so we want to include these as well and then delete article all right so we're

targeting if we look at the index we're targeting this this link or this button right here because it has that class that's what we're looking for then we want to do

whatever it is we want to do so I'll test it with the alert of alert too and now if I click anywhere in the table it doesn't doesn't do anything but if I click any of these delete buttons you'll

see it will go ahead and run all right now what we want to do is just do a simple confirm because it is a delete so we want the user to be sure so we'll say if confirm and we'll just say are you

sure so if they confirm then let's get the ID so we're going to create a variable called ID and what we want to target now is this the data ID because that's an

actual attribute on the link so to get that we can take a dot target dot get attribute and we want to talk we want to grab the attribute of data – ID all right so now if I I'll just alert I was

gonna console.log but whatever so now we'll alert the ID so now this should be one this has the idea of – this has the ID of three so now we're getting that ID now we want to make our

fetch request to the backend okay so let's say fetch and here we're gonna have I'm actually gonna use back ticks so that we can use a template string and we're gonna say article / delete slash

and then the ID okay so that's gonna be the row we haven't created that yet on the back end now we need to add a second parameter of an object because we need to specify that this is going to be a

delete request all right so it's a delete request and fetch will give us a promise back so we use dot then and it'll give us a result but all I want to do is redirect so I'm gonna say window

dot are not redirect reload so window dot location dot reload and that's it all right so now we need to create this route to do the delete so let's go back to our controller and create that route

so let's put in route and the route is gonna be article / delete / and then whatever the ID and we want to specify that the method has to be a delete request okay and then we'll create our

function which will be called delete and this will take in the requests whoops with the variable request and also the ID alright now we just want to use doctrine to first find it by the ID and

then delete it okay I'll remove it so let's actually just copy from the show so this right here we can actually just grab this and put that in there and then we can grab

the entity manager just like we did here so we'll grab these three lines except instead of persisting we're going to remove so we want to just change that to remove all right now we have to send

back a response because fetch it expects a 200 response it says everything's okay so we're gonna say response equals new response and then we're gonna simply do a

response send like that okay and hopefully that works so what should happen is our JavaScript is making a fetch call to that row and it's gonna get a response when it does it's gonna

call the promise the dot then and it's going to reload the page and the should be deleted so let's reload this and let's delete article three so we'll click that are you sure okay and there

it goes now it's deleted alright so the last thing to do is update so let's go back to our controller now this is going to be very very similar to the new function or the new route that we have

so I'm gonna copy that entire thing let me just get rid of this I'm gonna copy this this whole public function new with the with the annotation and then go down here actually make sure that you're

above this this should probably be at the bottom whatever we'll put it right under the new and then change the route to edit and we'll change the name to edit article and let's see we want get

in post so we want to change the function name to edit and it's also going to take in the ID because we're not just creating a new one we're editing an article so let's say we're

gonna say article equals new article we want to get the article with this ID so we'll copy this right here and we'll paste that in here so it's gonna find the article by the ID that's

passed in actually this edit should also have slash ID because we need to know which are which article we're dealing with we're editing so once we get that that article will be found and then

passed into our form builder and it should automatically fill and then down here once it's submitted it's very little we have to edit here once it's submitted we actually don't need this

because it already knows what we're talking about we can get rid of this we can get rid of the persist so all we have is the entity manager and then we call flush and then we redirect now for

the their form I'm gonna render out a template called edit dot html' dot twig and we're still gonna pass in the form like that so let's save and let's create a new template called edit dot HTML dot

twig and let's copy the new and you could actually you could use the new template if you wanted to but I like to have them separate also I want a different title I mean I know that's not

a big deal you could just use the new if you wanted to but whatever it's fine so now let's create the edit button so that's going to be in the index file so I'm just gonna copy the show and

actually we'll put the edit after show change this to article slash edit slash and then the ID will change the class to button light and change this to edit so let's save that reload it should work

okay so now we have an edit and let's click on article to edit and you can see that it's already prefilled now if I change let's change this to the number two actually one thing I want to do is

change the create text so back in the controller inside the edit right here where it says create I'm gonna change it to update and I'll reload now it's update and we'll change it to number to

update and there we go so now it's changed to article and then the number two so we now have a complete crud application all right so I know that that was kind of a lot and you know it's

not a it's nothing special the application but hopefully you learned enough to try and create your own projects with doctrine and using a database using twig templates using the

console using the form help or all these different things that we've looked at alright the routes the annotations and hopefully it gives you a nice start on on learning Symphony for obviously

there's a lot more there's authentication there's stuff like that and there's a lot of other packages and you can make it into a big application there's also creating micro services

maybe we can create a REST API at some point but that's going to be it for this series guys I hope you enjoyed it maybe we'll go ahead and deploy this application but that's gonna be it for

now thanks for watching hey guys if you've been watching my videos for a while and you really like what I do when I've helped you out a lot consider becoming a patron even for one dollar

per month it pushes me to keep bringing you guys the best content I possibly can there's reward tiers for discounts for you to me courses personal support and more so check out the patreon link in

the description below for more info

In this first part of the series we will add the functionality in our controller to create a form programmatically with the form extension and create, update and delete articles.

Code: Github Repo

💖 Become a Patron: Show support & get perks!

Website & Udemy Courses

Follow Traversy Media:


The Developer Hangout: Public Discord Server

    php symfony 4 symfony symfony 4 symfony 4 forms symfony 4 framework symfony doctrine symfony framework symfony mysql symfony php symfony tutorial symphony 4 up and running with symfony