Find the full write up here : https://www.codereviewvideos.com/course/symfony-4-beginners-tutorial/video/symfony-make-controller
Towards the end of the previous video we had created a single route which, when accessed, would render out the contents of our template (e.g. the hello_page.html.twig), and return that as the body of the Response.
Whilst we didn't need to create our own Controller class, or controller method (in prior Symfony versions most often called an Action) to make this work, we did use a Symfony provided Controller (TemplateController) and Action (templateAction) behind the scenes.
I also mentioned that in 99% of cases, you would likely not work in this way, in the real world.
Still, it is interesting to know of this feature, and also it saved us from having to do anything more than we otherwise had to, in order to get started.
Lets now create our own Controller class, and in that controller we will create our very first controller Method.
Show More Show Less View Video Transcript
0:00
Hello YouTube, I'm Chris from CodreviewVios.com
0:03
Before watching this video, I'd like to let you know that I have over 500 similar videos available on my site, codreviewvios
0:10
If you love Symphony, then you'll feel right at home here. I'll show you how to build both websites and JSON APIs, and then we're going to talk to those JSON APIs using React and Redux
0:20
There's courses on Docker and Ansible, as well as loads on deployment and test-driven development and behavior-driven development
0:27
If you enjoy this video, please like and subscribe, and as ever, thanks for watching
0:31
Hi, I'm Christophercodeviewvios.com, and in this video, we're continuing on with our introduction to Symphony 4
0:37
So towards the end of the previous video, we created a single route which, when accessed, would render out the contents of our template, which was the Hello Page template, and return that as the body of our response
0:48
So we could see, if we refresh now on the slash, we're seeing our output
0:52
And again, you can see the output of the debug router command shows that we have Hello page set up
0:57
And we saw that whilst we didn't need to create our own controller class, we were still using both the controller class, the template controller
1:04
and also a controller method, the template action, in order to make this work
1:09
Now this structure called template action, this was in Symphony 2 and Symphony 3
1:14
the typical name that we would name our controller methods. Now in Symphony 4, this would more likely just be template
1:20
and we'll see this again momentarily. Now I also mentioned that whilst this is quite interesting
1:25
it's quite nerdy to know about. In the real world, it's very unlikely
1:29
that you're going to go down this route too often. Typically, you would create your own controller class
1:34
and your own controller methods, and so that's what we're going to get onto in this video
1:39
So I'm just going to start by clearing that off with a Control L, and then we'll do a PHP bin console
1:45
and we'll put in just make. You can see the command make itself is not defined
1:50
but in the make namespace, there's a bunch of different things that we can use this console
1:55
command line helper to help make. Of course, the one that we're interested in at this point in time
1:59
is the controller, but you can see there are other things that we can make along the way
2:04
So I'm just going to hit the up arrow and I'm going to make a new controller. So it's asking me to choose a name for my controller class. I'm just going to call it the welcome
2:11
controller. So it says it's created our new controller class in source controller, welcome controller
2:17
open up your controller class and add some pages. So let's have a look under source controller
2:22
We've now got our welcome controller. It's created as the, this index controller method, and it's going to be available using routing annotations on
2:30
slash welcome. So immediately, before we do anything else, let's just control all that, do a bin console
2:36
debug router to see if we can see this new route. And we can, and it's right at the top
2:41
So the ones that we create in YAML are at the bottom, and the ones that we create using
2:45
annotations will be at the top. Not entirely sure of why that is. I'm guessing it's the order in which the parsed
2:51
Just as a heads up, though, you're at the top here. So slash welcome should be immediately available to us
2:55
as long as your web server is still up and running. You can see you've just generated a new controller
2:59
We've not had to create this template. That's been done for us. So let's jump back into our code and see why that is
3:06
So we can see that the view or the template in this instance
3:09
actually lives in this maker bundle. And the maker bundle is provided as one of the dependencies
3:14
when we've installed the website skeleton. So this at symbol before tells it to look at a bundle
3:20
And we can command click on a Mac. It's going to take us there. I've clicked on the bundle name rather than the demo page
3:25
But if we click on the demo page, we can see this is the contents of that page
3:29
It's got some style built in. And then it's got that you just generated a new controller text
3:33
And as you can see, it lives inside the Maker Bundle, which is in the vendor directory
3:38
which means it's code that we've pulled in. It's not code that we directly control
3:42
So I'm just going to get rid of that for the moment. And before we go ahead and get rid of this and recreate it using our own logic
3:47
I want to just firstly expand out this use block. So we can see it's come with our routing annotation, which we're using here
3:53
and we're also extends controller so we're using that one. It's come with this third one, which we're not using
3:59
So if we hover over it in PHP Storm, it's going to say this import is never used. It's quite unusual
4:04
It's been generated, but we're not using it. So symphony controller methods always have to return a response and we see this in a sec and this is the response object that we must return now this render if we control and click on that or command and click on it
4:18
is a convenience method provided to us by the controller trait and we'll look at that in a moment which does two things
4:25
it takes our twig template and converts it or renders it from twig into usable HTML in our case
4:31
and then it sets it as the response body, as you can see, the response set content call
4:37
and then it returns that response object. So whatever we do from a controller action
4:42
we have to return a response. Symphony is all about the journey from request to response
4:47
That means from a very high level, your request or your visitor's request comes in for a page
4:52
stuff happens, and then that page is created as HTML or whatever
4:57
and then we send it back, and that's the response. Symphony's really just a structure around that process
5:01
So if we get rid of these two lines and we go back and we try and visit our welcome page
5:07
we're going to get a nice error that says, controller must return a response, but null was given
5:12
Did you forget to add a return statement somewhere in your controller? Yes, we did. We just deleted it
5:16
So what we can do is we can take this unused response and we can actually use it
5:21
We could say return a new response. And if we command them P inside there, we can see that the first argument must be a string, some content
5:29
This can be a bit of HTML or it can just. be raw text or whatever. Second argument needs to be some status code and then we could set
5:36
some headers as the third argument. So to begin with, I'll just return a raw string, which will just
5:41
be hello. And I'll do the sort of the naive thing there and just return an integer as a status
5:47
code, which is 200, which should be HTTP OK, or in other words, a good status code. So we refresh and we
5:53
see our hello text, but the web debug toolbar has gone. So let's try and get the web debug toolbar
5:59
our back. So in order to do that, we have to have some basic HTML. So I'm just going to set up
6:03
a HTML wrapper, put something in the body, and just make sure to close off that HTML tag
6:09
And then rather than using a direct integer, one of the nice things about the response object
6:15
is that it comes with a bunch of defined constants. And we can just click through and have a
6:20
look at what they are, all the different status codes that you might want to use. So the one that I'm
6:24
after is HTTP OK. Now, of course, using an integer is no different really than using
6:29
the defined constant, but the defined constant does explain what that status code actually is
6:33
So let's just try and refresh that now. And we could see that the web debug toolbar comes back for us
6:39
and that's because that's injected for us behind the scenes, but it needs to rely on that closing body tag
6:44
So we'll see in a sec when we get to it, that when we render out our twig templates
6:48
if we forget to render out any of the expected HTML, so just the HTML and the body wrapper
6:53
then we'll still miss out on that web debug toolbar injection. Now if I get rid of that and I do a return of this render like we had before
7:02
then you may be wondering where render comes from. And I kind of alluded to this when we control clicked and we saw that it was available to us
7:09
and it's available on the controller trait. But where is the controller trait being used
7:14
So controller trait is just something provided by symphony. It's in this controller directory
7:19
But where we get access to it is because we extends controller. So if we click on that and we can see that we extends controller
7:25
and controller is just an abstract class from that same name space that we've just been looking at where our controller trait lived
7:31
We could see that because we extends controller and controller uses the controller trait, that's how we get access to this render
7:39
Now again, just like when we created this and we got this unwanted use statement, so we just get rid of that for the moment
7:45
the way in which our controller classes are created is a little bit unusual too, because instead of extends controller, it's actually preferable inside the best practices
7:55
to extends abstract controller instead. So we'll just change this up. They both live in the same namespace
8:01
So again, we can just click through to that. We can see everything's still inside this controller directory
8:07
We now extends abstract controller instead of before we just extends controller
8:11
They're largely similar. It's just abstract controller is actually a little bit more restrictive
8:15
It stops you from accessing the container directly It instead expects you to inject any necessary dependence So this is getting a little bit more advanced We don need to know too much about that at the moment We going to cover that a little later in this course
8:29
but just know that it's better to Extends Abstract Controller, so if you're going to generate
8:33
then first delete that unwanted or unused use statement and also then change up to be Extends Abstract Controller
8:39
And again, that's what gives us access to all these convenience methods
8:43
such as being able to redirect and easily add flash messages and stuff
8:48
and again we'll get on to all of that a little bit later in this course. I'm going to get rid of that response object as well
8:53
And next I'm going to define my own. And I'm going to start by defining a new template
8:58
So under templates, just get rid of that vendor directory. It's taking up a lot of space. I was going to create a new directory under here
9:03
which I'm going to call welcome, simply because this is the welcome controller. And it matches up, so it's easy to figure out where stuff is in the future
9:12
Go in lowercase, it's convention. And I've got the index controller method
9:16
So I'm going to name this the index html.twig template. Again, it just helps tie up your templates to your controller methods and so on
9:26
As your project grows, that is helpful. So I've got a template already
9:30
This is using Bootstrap 4. It's a pretty straightforward thing that I've just basically stolen directly from Bootstrap
9:36
I made a couple of little tweaks. It should have a little bit of a nav bar going on, which has our home link in there
9:42
The H-RF is not correct at the moment. And also we've got this Hello page, which should
9:46
is what we created over there before. So I'm just going to set this to be slash hello in line with what's in the template
9:52
And I'm going to make my welcome controller just be the site route
9:56
So whenever I hit the site route, I should hit the welcome controller. And specifically, if I go to slash hello, I should see this earlier page that we created
10:04
So let's go ahead and render this out now. So we've got our return this render call inside our index controller method
10:10
And this is now inside the welcome directory under index. So I'm just going to render out welcome index
10:16
Okay, so we're on slash. Just bring that back up to make sure that everything's looking okay
10:22
So now things have swapped round. We've got welcome on slash and hello page on slash hello
10:28
So I'm just going to go to the site route. And we can see our basic page
10:33
It'd be nice maybe to push this text down a bit. And to do that, we're going to need a custom style sheet
10:38
Now there's a couple of ways you can do this. I'm going to show you the easiest way. But Symphony 4 is pushing Webpack Encore, which is a little bit more advanced
10:46
than what we're going to need here. In a real world project when building a real website
10:50
you may have heard of Webpack, and you may also have heard how complicated webpack is to set up
10:56
Well, Symphony's Webpack Encore is all about simplifying Webpack. It also changes the way that you work with your assets
11:03
so, for example, your CSS and your JavaScript, and any other stuff like SCSS or anything like that
11:08
inside a standard symphony project. And if we go into that, that's like kind of another rabbit hole that we go down
11:14
and it also involves you having Node installed on your machine, which you may already do, you may not
11:19
But to keep things as simple as possible, I'm just going to go with a more basic approach
11:23
And if you look inside the write-up for this video, you'll find a link to Webpack Encore
11:28
And there's a nice little sort of do-it-yourself. Try adding that in, as it is very useful
11:32
but it's just a little bit outside the scope of what we can cover in this particular video
11:36
So because we're not using Webpack Encore, we're going to need to do things a little bit more manually
11:41
So in previous versions of Symphony, you had the web directory. and the web directory was anything that was publicly available
11:48
In Symphony 4, we have the public directory, which is basically exactly the same thing
11:52
So because our style needs to be publicly available, I'm going to create myself a new directory under here called CSS
11:58
and in here I'm just going to call this my style.cass. Okay, so if we look inside our index HTML
12:05
the content that we want to push down is in the main block, and it has a class of container and a class of main
12:12
So I'm just going to use that class of main, I'm going to define a little style that says margin top, push down by 20 pixels
12:19
Okay, style's not my all-time favorite thing, honestly, but that should be good enough
12:24
Now in order to use this, I can get rid of that, confusing myself, get rid of that as well
12:29
go back to our index We need a way to call that style sheet from our HTML So I going to put this after the bootstrap style And the reason I would suggest doing this is because firstly all the bootstrap stuff all the bootstrap CSS should I say is going to be processed
12:44
And then we want our CSS to be able to easily override the bootstrap styles if needed
12:49
We don't need to in this particular case. But ordering does matter with styles. So ours should come later
12:54
It just stops you from having to put exclamation mark important behind all your styles
12:58
If you've ever got into that situation, you'll know what I mean. And so we'll need to add in a new link tag
13:03
We'll call it rel and style sheet. And then the H-RF, you might think is just slash CSS
13:11
And then our style, I think is just called my style. So like CSS, my style
13:16
CSS like that. And that would work, but it's also problematic. Depending on the hierarchy that you have set up with twig
13:23
that may not work depending on where you are in that hierarchy. A much better way is to use the asset function
13:29
which is a twig extension function, which is provided by the website skeleton
13:34
but if you're not using the website skeleton, you would need to do a composer require asset
13:38
to get access to this function. So I'll say asset, and then we just pass in the path
13:43
so it's just CSS, my style, if I can spell my style.cels
13:48
And this delegates the hard work of figuring out where we are in the hierarchy to the asset function
13:53
and then that should mitigate any circumstances where our paths break when we're nested
13:58
If you don't understand any of that, don't worry about it. I would just suggest always using the asset function
14:03
Anyway, as you can see, our style has been properly applied. Now, there's one other thing that I want to cover before we finish up in this video
14:10
and this is something that I think is really cool as part of Symphony. It's not actually new in Symphony 4, but all the same, this is a really useful feature
14:16
that I've not seen in other frameworks that I've used in other languages as well
14:20
So if we go back into our template, I said that we have this home path, which is not quite set
14:25
So maybe it should be slash. That makes sense. and we know that our other route slash hello is also slash hello
14:31
Okay, so now if we go back to our page and we refresh, we should be able to hit hello page
14:36
which comes with its own set of problems, and we're going to address this in the next video. And if we go back, then our home should be working as well, because that should just be a slash
14:45
Now, the thing is, we can change these paths. We already have seen this throughout this series
14:48
We could go back in and change this to hello slash page or hello dash page or some other nested path
14:54
and we could even change the route if we were so included. So what Symphony does is it provides us with another one of these helper functions called Path
15:03
So instead of just using a hard-coded route, we can use the root name
15:08
So again, if we go back to our controller, we can see that the root name for the site route is actually welcome
15:13
So if we use the path of welcome, now when we go and change that actual path, anywhere that's referencing path welcome, will automatically update
15:22
Likewise, we should do the same here. and I think this was just path of hello page
15:27
Okay, so if you've got the symphony plugin for PHP Storm, it's going to provide you with the auto-complete on some of this stuff
15:33
so highly worth getting. Got a video on that on the site as well. Okay, so we should be able to go back, give that
15:39
not try and save the page. If we refresh, then we should see that these links still work
15:45
That's all good. And to illustrate this point, what I'm going to do now is I'm going to go and change the hello page path to be something different
15:52
So under our roots yamil, if we go and change this to be hello, something different
15:57
and then just go back and refresh this. We didn't need to change it inside Twig, but it's already picked it up
16:02
as you can see at the very bottom of your screen. We can browse to that, and the path's updated, but we didn't need to change anything in a template
16:09
Whilst that's really useful, when you've got a template that's quite simple, like what we've got here
16:13
becomes even more useful the more that you have these links dotted around your site
16:17
which on a real site is probably going to be in more than one place. So just as a big heads up, don't hide code, use the path, or if it's an asset, use the asset
16:26
Now, as I mentioned, we've got all this nice style setting here, and yet if we go to the hello page, then we've lost all that style
16:33
Now, the last thing that we want to do is have to copy, paste all of this stuff into multiple different templates
16:39
There is a better solution to that, and we're going to get onto that in the very next video
#Programming
#Computer Education
