Up & Running With Symfony 4

[Music] hey guys in this video or the series of videos we're gonna jump headfirst into the symphony for PHP framework which is

an incredibly powerful framework and it actually starts off as a micro framework and then you can scale it as as you see fit so you can use it as you can use it for microservices api's monolithic web

apps console apps backends for like JavaScript applications whether it's react or angular vanilla JavaScript weather whatever it may be so we're gonna go ahead and build a crud app

which is a that can create read update and delete a resource in our case articles and we're gonna use MySQL we're gonna use the doctrine om to interact with our database and we're going to use

the twig template engine for our views alright so I encourage you guys to follow along with me because there's quite a bit of code and there's there's quite a bit of just concepts and I think

that you'll get the best experience by doing it along with me rather than just watching it and you should be able to take what you've learned and apply it to build your own stuff alright now if you

ask me which PHP framework you should learn it's gonna be either laravel or symphony and laravel is actually built part of it's built off of symfony components laravel is much easier to

learn in my opinion but it also abstracts a lot of things out ok so what that means is that you know you can type in commands and it'll just do stuff behind the scenes that you need to be

done and you you could it's great for rapid development but a lot of times you really don't understand what's what actually is happening with Symphony it's a more difficult framework but it

teaches you more and not just about Symphony about just just PHP about just coding in general about application structure things like that so it's a really good framework to learn

so what we'll be doing is building this right here which is just like I said a crud application for articles will be using bootstrap to make it look nice and you can see I have a just a table of

article titles and this is coming from MySQL and we can show we can go to a route where it'll show the single article we can edit the articles so if I put an exclamation here and update we

can edit it we can delete them and of course we can add them I'll just say test article alright so we can create them as well so very simple application the application itself is not nothing

special but it's the the the fundamentals and the things that you're gonna learn that will allow you to continue on and build your own stuff alright so that's what we'll be doing

guys I hope you enjoy it and hopefully you can follow along alright so let's get started alright guys so we're gonna take a couple minutes to do some setup we're gonna be using composer which is a

dependency manager for PHP that's what we're gonna use to setup Symphony that's what we're gonna use to install packages it's basically your NPM for for PHP now if you're on Windows you can just

download the Installer that's what I did I already have it installed go ahead and run that if you're on Mac you can use homebrew if you're on Linux you can use your package manager so get that set up

and then as far as my environment I'm using xampp which has an Apache server PHP MySQL we will be using MySQL there is a dev server that comes with with Symphony but you're gonna need to have

my Askew all installed if you want to follow along so I think xampp or just a native lamp stack is the best option here so once you get those set up we're going to go to the server which in xampp

is the htdocs folder so I'm on Windows so it's gonna be in my C Drive xampp and then htdocs and we're going to generate the application here so rather than go into the folder I'm going to

open it up in a terminal which I'm using git bash okay I'm using Windows and I wouldn't suggest using the regular Windows command line get bash is are really easy to use tool that gives you a

bash terminal you could also use the Linux subsystem or commander or any of the other options let me make this bigger so if you have composer installed correctly you should be able to run

composer and see a screen like this where it gives you all the different commands so what we want to do is generate our symphony application and we can do that by saying composer create

project or create - project specify that this is a symphony application it's a skeleton application and then we want to name it and I'm just going to call this synth art okay for Symphony articles and

we're gonna run that and that will actually create the symp art folder inside of our htdocs okay and it'll generate all of the symphony folders and files which isn't much to begin with

like I said it starts as a micro framework so there's really not a lot to it and but you can build on to it and you can scale it all right so now that's all setup and you can see there is a dev

server that you can run but we're not going to do that since we're using xampp next thing we want to do is we want to set up a virtual host so we want to set up a server name because right now

you'll see if I go to HTTP localhost which is my xampp server and I go to what I call it simp art we're just going to get a directory listing the actual front-facing

application is in public so if I go to public then we'll be able to see the app now of course we don't want to go to this so I'm gonna just create a virtual host with a server name or a domain name

so to do that we just go to our Apache folder which if you're using xampp it's in the xampp folder apache then we want to go to con extra and then the v host file right here and i'm just gonna open

it with sublime text and then go to the bottom here and you can see we have these virtual host examples we're just gonna copy one of these and we're gonna get rid of the comments here and then

all we need inside here is the document root and the server name so i'm going to get rid of everything else and then just uncomment these and the document root is gonna be in the htdocs and it's gonna be

in the simp art and then we want the public folder and then for the server name we're gonna call it sim fart dot test like that and save okay now there's one other file we need to edit and

that's the host file send some on windows what i need to do is open up notepad as an administrator if you don't run it as administrator you won't be able to save the host file so you want

to go to file open and then just navigate if you're on Windows it'll be in your windows system32 driver's Etsy or et Cie and then just choose to see all files and open the host file alright

and then we just want to put in an entry so one two seven zero zero one and then simp art dot test okay we'll save that and close it up and then in order for that to take effect

you need to restart Apache so with xampp we can just go down to the little panel here and just go to a patchy stop I'll have to verify it and then just go back and start it up again alright so now I

should be able to go to http synth art dot test and there we go so there's our application now I'm going to open this application in vs codes so I'm going to CD into simp arts and let's go ahead and

just run code dot which will open it up in vs code and you don't have to use vs code you can use whatever editor you want I love to go upgrade this later and our application is now over here on the

side you can see it's very small like I said it starts as a micro framework we have just a controller folder with nothing in it we have a VAR our vendors config so it's it's very small to begin

with now since I'm using xampp we need to actually add a dot htaccess file into the public folder so I'm going to say new file dot htaccess and this is the only thing that I'm actually just going

to copy and paste in and you can get this from the code in the description you just grab this real quick and it's just a general htaccess file it's not it okay so just a general htaccess file

where we're seeing if the mod rewrite module is there if it is we want the rewrite engine on so we can rewrite URLs and we just have a couple different rewrites here and you can see there's

some comments you don't need these comments but it just tells you tells you what each thing does so it's pretty generalized so I'm going to save that and close that up all right so next

thing we want to do is we want to create a controller okay so remember this is this is going to be a crud application for articles so we're gonna create article controller dot PHP okay and then

of course we want our PHP tags and we want a namespace of app slash controller all right and let me just show you the documentation cuz you may want to follow along with that especially if you get

stuck and the documentation is really good there's just a lot of it so right now if we go to let's see routing or setup okay we already did that this is to run the dev server using gits what do

I want here routing so right here here's no it's not it either getting started yeah so right here is an example of a controller this is a lucky

controller for generating a number just a random number but you can see that there's a namespace we also want to bring in the response package so that we can just return a response to the

browser all right so let's go ahead and do that so we'll say use symfony back slash components our component slash HTTP foundation slash response so we're just bringing in different parts

of the framework that can use for certain things this needs a semicolon so now what we want to do is create a class for our controller so let's say class article controller and

we're going to create a public function so we're gonna create a what's called a method a method is just a function inside of a class and we're gonna call it index and then from here let's just

go ahead and return a new response return new response and we can put anything in here we can put HTML tags so go ahead and do that and we can put a body tag and this is just to give you an

example I'm not gonna keep this and we'll just say hello okay now in order for us to see this we need to set up a route and there's a couple ways to set up routes with symfony one

is to go to the config and then the route CMO file this YAML file and there's already an example route in here I'm just gonna uncomment so this is the route name index this is the path which

is the homepage or the landing page and then it's basically saying it's is what it's looking at the default controller and then it's looking at the index method well we don't want the default

controller we want the article controller and the index method and if we save that let's let's put this over here and let's see let's go back here and reload and now we just see hello so

you can see that this has linked that route to the home route to this function all right so that is one way to do it but I wouldn't suggest that I would suggest using annotations it makes

things much easier and much more condensed so I'm going to just comment this route back out and if I do that and I reload it's going to reload the default page again now to use

annotations we need to install it with hoser so I'm gonna open up my terminal my integrated terminal and say composer require annotations and while that's going on we can go up here and we need

to bring it in so let's say use a symphony slash component slash routing slash annotation slash route okay so that will allow us to use annotations now we also want to be able to specify

methods like get or post or put so we can limit the type of methods that that the functions are that the routes can take or accept so for that we're gonna say use whoops use and then it's Senseo

slash bundle slash framework extra bundle / configuration slash method okay so that will allow us to specify or restrict certain methods so let's go to our index right here our index function

and to set up an annotation we want to put it in a comment like this and then we want to do an @ symbol and then route and then specify the route we want which is just slash alright so that should

actually work let's save it and let's reload and there we go so now instead of putting it in a separate routes file we can simply specify the route right above the method okay right above the function

now if we want to specify like this this shooter this route should only take get requests then we can say method and we can pass in here get okay if we wanted to except get and post we could

do get post like that put delete whatever it is we want but this should just take a get request so if I save that that should still work all right now obviously this we don't want to just

send a response with with inline HTML like this we want to load a template okay so we're gonna use the twig template engine so let's go down here and it's doing this again I hate when it

does this I can't clear this out we just open up a new terminal so we're gonna say composer require twig okay and that will set up the twig template engine and then what we want to do is bring that in

so let's go up here and let's say use Senseo slash bundle slash framework bundle slash or I'm sorry framework that's right and then controller slash controller and

we need to actually now take our article controller and extend the base controller so we want to say extends controller like that ok and now we should be able to render a twig template

so I'm just gonna comment this out and we'll go down here and we want to now return let's say return this render and then we want to pass in the the template we want to render which I'm going to put

inside of a folder called articles and then it's going to be called index dot HTML dot twig okay that's the file the file name extension is you're going to want

dot html' dot twig so let's save that and now let's go over here into templates you can see there's already a base twig template here which is like our layout and I'll show you how we can

extend that in a second but let's create a folder and templates called articles and inside articles we're going to create a file called index dot HTML dot twig and in here let's just put in an h1

and we'll say articles so save it and now if I go and reload something's wrong attempted to load class controller from namespace let's see let's have a some kind of typo here framework bundle

controller oh this shouldn't be simp Senseo this should be symphony there we go so now you can see it's loading that that twig template now if we look at the source code here you'll

see it's just an h1 we're not it's not using the the layout there's no HTML and body tags or anything like that so what we want to do is extend this base layout right here so you can see that it has a

blah it has blocks so it has one for the title the style sheets the body and Java scripts so we can extend those blocks in our templates so that's what we're gonna do so let's go ahead and first of all at

the top here we're gonna use our twig tag so this is gonna be some curly braces and percent signs and we're gonna say extends and then the Ted the layout we want to extend which is base DML dot

twig and then if we want to have a title for this particular page we can go ahead and use the title block so we'll say block title and then we just want to do n block and in here we can put a title

so we'll just say simp art articles so that'll be the title and then we want the body so we can just say block body and let's wrap this h1 and say n block like that and we'll just

tab this over and save let's reload and now you can see that we have the title up here and if we look at the source we have the head the HTML the head tags the doctype all that stuff it's being

extended from the base template so let's add bootstrap to this so we have our base template let's let's grab the bootstrap CDN except I'm going to use something called boots watch if you guys

have never used this before if you go to boots watch comm they actually have different themes different bootstrap themes you can use I'm gonna grab let's see I'm gonna grab the Cosmo so if I

just hit download it'll take us to that to the actual generated CSS which you could copy and you could put in at your own file but I'm just gonna grab the URL and go ahead and use that so I'll go

rights C will go right below the title here and let's put in a link and paste in that that link there alright and then I also want the JavaScript that bootstrap needs so if I go to get

bootstrap comm get started we're gonna grab the three JavaScript dependencies we're gonna put that right here bring that over all right so now if I go back to our application and reload now

it's using bootstrap okay so so now that we did that let's create a navbar so I'm gonna go to my templates and the nav I want on every single page so I'm gonna create a new folder here called Inc four

includes because I want anything that that should be included inside of another template sure going here so let's create a file called navbar dot HTML dot Twigg and let's just go ahead

and create a navbar so it'll have a class of nav bar will say navbar expand - SM nav bar dark and let's do BG - primary and let's do mb3 which is just a margin bottom class okay so inside here

let's put a let's put a container and we're gonna want this to be responsive so we want to have a hamburger menu so we're gonna have a button here with the class of nav bar toddler

and let's let's give it a type 'button and we want to give it a data toggle attribute this is just standard bootstrap of collapse and we also want to give it a data target so it knows

what to open when we click it and we're gonna give it an ID of mobile - nav and that could be anything you want inside here in the button we want to have a span with the class of nav bar - toggler

- icon and that's it that will give us that I that icon and then down here we'll have a div with the class of collapse navbar collapse and let's give it an ID of mobile nav okay and that ID

should match whatever is right here whatever the data target and then we can put our links rul so the UL will have a class of nav bar - nav let's also give it a class of ml - auto that will align

it to the right and then we'll put in our links so the Allies have a class of nav item and then the a tags have a class of nav link and this is just gonna go to slash and

this will be home alright so we'll copy this and let's change this one right here to slash article slash new and this isn't going to work yet but I just want to get it in there and we'll say new

article all right so let's save that now that's not going to show up obviously because we need to include it so the way that we do that is let's go to our base HTML twig file because we want this to

show on every single page so what we'll do is go right below the body tag and right above the body block and include it so to do that we want double curly braces and we can simply say include

from the ink folder we want navbar dot HTML dot twig and let's save that and reload and now we have our navbar oh I forgot the the brand or the logo so that should go let's see that should go right

above the button so we'll have an a tag with the class of nav bar brand and we'll just have that go to slash and in here let's just say simp art there we go and then I also want to

container around the main content so in our base where we have our block body let's just wrap that in a container so we'll go ahead and just bring that up alright good so save and reload and now

that moved over so let's see that should do it for our base and the navbar we can close those files up now in our controller where we rendered the the twig template we can pass stuff into the

template from the controller just like with just about any framework and we can do that by sending an array as a second parameter so we can say array and then let's say we wanted a value called name

and we'll set that to Brad all right so now in the view in the index because that's what we're rendering here is the index we could say just as an example I'll say my name is and then double

curly brace name and save and reload and we get my name is Brad so that's how we can pass stuff into the view now we're going to want to pass in our articles to the index because this is going to be an

index of articles now we haven't dealt with the database yet so just to give you kind of just a simple idea of how this works like we could create a variable called articles just set it to

an array will say article 1 article two and then we'll pass that in here so we don't we don't need name will say articles and then we want to pass in that variable all right so now if we go

to our index we basically want to loop through our articles in display table rows right so let's create yeah we'll go ahead and let's first of all do an if statement to see if there are any

articles so with twig we can simply do if articles and we can do an else I really like the twig template engine so else and then we can just do end if all right so if there's no articles so in

the else let's just put a paragraph and say no articles to display and if there are then we want a table let's give it a class of table and a class of table striped let's do a heading so we'll do a

tea head I'll do a tea head with a table row some th's so we'll say article title and then the second th is just going to be our actions which will be the buttons and then the next thing we want to do is

put in our tea body and it's the tea ours then the table row is what we want to iterate for each article so let's put our loop here so we'll say for article in articles

and then we just want to end that so we can say and for and then in here for each article we want to generate a table row and we'll have a TD with the title with the title we can get that with

article alright later on it'll be an object so it'll be like article dot title but right now it's just a regular array okay and then for now I guess we could put in let's just do like just the

show link or the show button so we'll do an a tag with the class of BTN BTN - dark and this will ultimately go to slash article slash and then the ID which will be dynamic but right now I'm

just gonna put a 1 and we'll say show so let's save that see what we get and there we go so it's what it's doing is it's passing in this which is just hard coded data and it's passing it in here

and then we're looping through those two articles and we're outputting table rows for each one and it has the title and it has the show button ok so now I think that I think this is a good place to

stop and in the next video what we'll do is we'll start to get into the database so we're gonna use something called doctrine which allows us to easily interact with the database we'll also

work in the console a little bit to do things like create to create the database and we can also run queries and stuff like that alright so hopefully you guys are enjoying it and I'll see you in

that