Made withSymfonyTutorial

Building a Symfony 3 App - Part 1

T

Traversy Media

Creator on the Symfony channel

Watch on YouTube ↗

247K viewsJan 25, 201618:10 runtime

Learn to build a PHP application from scratch with the Symfony 3 framework. This practical tutorial guides you through creating a simple to-do list with full CRUD functionality. You'll start by setting up your local development environment, including installing the Symfony…

Chapters

#symfony#tutorial#frameworks

Project Overview

This video series walks through building a simple CRUD (Create, Read, Update, Delete) to-do list application using the Symfony 3 PHP framework.

Environment Setup

Symfony Installer: The project is bootstrapped using the official Symfony installer, which is downloaded and executed via a PHP command.
Windows PATH Variable: A common setup issue on Windows is the php command not being recognized. To fix this, add the path to your PHP executable (e.g., C:\xampp\php) to the system's Path environment variable.

Important
A system reboot is often required for the new Path variable to take effect in all command prompts.

Project Creation: Once the installer is set up, a new application skeleton is generated with the command php symphony new <project-name>.

Local Development Server

The public entry point for a Symfony application is the /web directory.
For development, it's best to configure a virtual host to provide a clean URL.

Edit httpd-vhosts.conf: In your Apache configuration, create a <VirtualHost> block.
Set DocumentRoot: Point the DocumentRoot to your project's /web directory (e.g., C:/xampp/htdocs/todolist/web).
Set ServerName: Assign a local domain name (e.g., todolist).
Edit hosts file: In your system's hosts file, map the ServerName to the loopback IP: 127.0.0.1 todolist.
Restart Apache: Apply the changes by restarting your Apache server.

Symfony Architecture

app/: Contains application configuration (config/), resources like views (resources/views/), and caching.
src/: Your PHP source code, organized into Bundles.
Bundles: Reusable, isolated packages of code. The project starts with a default AppBundle where we'll place our controllers.
web/: The public document root containing the front controllers (app.php for production, app_dev.php for development).

Controllers & Routing

Controllers: Classes that handle HTTP requests and return responses. They typically extend Symfony's base Controller class.
Actions: Public methods within a controller that correspond to specific pages or endpoints.

Annotation-Based Routing: Instead of a central routing file, routes are defined directly above action methods using @Route annotations.

use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;

/**
 * @Route("/todos/edit/{id}", name="todo_edit")
 */
public function editAction($id)
{
    // ...
}

Tip
Route parameters like {id} are defined in the annotation and can be passed directly as arguments to the action method.

Views & Templating

Symfony uses the Twig template engine by default.
Views are standard HTML files with Twig syntax, stored in app/resources/views/.
It's a best practice to organize views into sub-directories named after their corresponding controller (e.g., views/todo/).
Render a view from a controller using $this->render('todo/index.html.twig');.

Introduction to Symfony & the Project

Hey guys, in this project we're going to be looking at the Symfony framework, which is a PHP model-view-controller framework. And it is comparable to, in my opinion, the Zend framework. It's a little bit more difficult than, let's say, CodeIgniter or CakePHP, and it's used more on an enterprise level than than those frameworks as well. All right, so what we're going to do is we're going to be using Symphony 3 because I haven't seen too many tutorials or videos on Symphony 3. They're mostly, um, 2.8. So we're going to be doing that, and we're going to build a to-do list with CRUD functionality. All right, so we'll be able to create, read, update, and delete to-dos. So it's going to be really simple. Um, I haven't planned out the application, so we're just going to kind of wing it, just like I do in a lot of my PHP videos. Um, but yeah, so let's go ahead and get started.

Installing the Symfony CLI & Fixing the PATH

This is the Symphony website. This is where you can find all the documentation. Uh, we're going to click on this big download button here and you can see that we're going to have to use the Symfony installer. All right, and first thing we have to do is is install that. All right, so there's commands for Linux and Mac. I'm on Windows so I'm going to grab this PHP command here. All right, and I'm going to go ahead and open up my command line as an administrator.

All right, and let me make this a little bigger. Properties, cursor font size 24. All right. So let's go to, I'm using Zamp or XAMPP, uh, which is a local Apache server. So I'm going to go to Zamp and htdocs. All right, I'm going to go ahead and paste that in. Oh, okay, I got to add PHP to my environment variables. All right, so if you're getting this, just go ahead and let's go to Control Panel and System and Security, System, Advanced system settings, and then Environment Variables. And wow, I don't even have a path variable. Okay, so if you don't see path here, uh, if you do see it, click it and edit. If not, I'm going to say New, Path, and what we want to put in here is the uh, PHP installation. So mine is in C, uh, zamp/php. That should do it. So let's say okay, and okay. And I don't know if we might have to restart, but let's see if we can do this. Okay, so I think I'm going to have to restart my system. So, um, I will be right back.

Creating a New Symfony 3 Project

All right guys, I went ahead and rebooted, so let's try this again. So I'm going to grab this, and hopefully this works. Okay, so now let me just check that folder real quick. Um, let's see, C drive, zamp, htdocs and we have, you can see we have Symphony right there. All right, so now we can continue here and say, make this a little smaller, let's do symphony new and then our project name. Let's just call it todolist. Symphony is... oh, okay, so we got to do php symphony. Okay, finally. So that's going to go ahead and generate a new symphony project for us.

All right, so now Symphony should be set up. Uh, if you're using an Apache server like I am, you could ignore this um, Port 8000 thing. Uh, what you want to do is if we just go to localhost/ uh, what was this, todolist, you should just have a listing of files and folders here. The public, um, URL that you want to go to is localhost/todolist and then we want to go to web, and that should show you this start page.

Configuring an Apache Virtual Host

All right. Now you could use this if you want, this /web, uh, but what I like to do is set up a virtual host file so that we can just, you know, we can add our own domain here. So what I'm going to do is go to my zamp folder, then Apache, conf, and let's see, extra, and then the vhost file here. All right, and then what I'm going to do is, let's see, I'll copy this. This is from the FuelPHP videos, and I'm just going to change this to htdocs/todolist/web. Actually, you know what we want to do is /web/app_dev.php. Let me just make sure that works. Yeah, okay. So that's what we want to do. Since we're in development, you want to use that. And then for the server name, let's just say todolist. All right, so I'm going to save that and make sure that you have this line right here uncommented. Okay, get rid of any number sign you see in front of it. Okay, so we'll save that and then I'm just going to open up Notepad as an administrator because we need to edit the hosts file, and if you don't open as administrator, you won't be able to save it. Okay, so we're going to say open and then you want to go to, if you're in Windows, C drive, Windows, system32, drivers, and etc. And then we're going to view all files and we want to open hosts. All right, and then I'm just going to add an entry here for our loopback address, and then we just want to put in todolist or whatever you put in in the vhost file. Okay, so we'll save that. Now I just need to restart Apache.

Okay, so we'll say stop and start. Okay, so now I should just be able to go to http://todolist. All right, so there we go. So that's where our project will live for the time being. Obviously, when you're done and you're ready to deploy, you can upload it to your cPanel host or whatever you're going to do with it for production.

A Tour of the Symfony Directory Structure

All right, so now what I'm going to do is I'm going to add the project to my text editor. So we're going to want htdocs and todolist. Okay, so this is the structure over here of a default Symphony application. And just to just briefly go through this, we have the app folder, and if we open that up, that's where our configs are going to go. All right, so our database parameters will go in the parameters file. We have our main config. And then under that, we have a resources folder. That's where the views folder is. All right, and you can see we have a folder called default for basically what you're looking at here, and that's the index. And then we also have this base.html.twig file. And this is the layout. This is what surrounds your views. All right, so your views will pop out right here. And then you have your head tags, body tags, stuff like that.

Now, Twig is the uh, the template engine that Symfony uses by default. It allows us to use this syntax. Okay, we have the curly braces and then the percent symbols. Um, we can create blocks and uh, different things like that. And that's how we'll include our variables as well. All right. So we also have, um, we're not going to be working in the bin directory really. The Source or SRC folder, if we open that, you'll see a folder called AppBundle. All right. Now Symfony has what's called bundles, and they're basically just uh, isolated bits of code. So, uh, they can also be looked at as like plugins, um, reusable code, things like that. Now, you could create your own bundle, uh, but what we're going to do, since this is such a small application, we're just going to use this AppBundle. And you can see that it already has a controller folder with the DefaultController. All right, so if we look at this, we have our class DefaultController extends Controller and our index action. All right, so every action is going to be prefixed with the word action. All right. We can pass in a request object and here all it's doing is rendering the index template. All right. I'm actually going to make this wider. All right. So that's where we'll put our controllers. We'll also put our model entities in here. We'll be creating a folder for those. Um, and then that's pretty much it. The web folder, that's the the front end part of the of the application. Um, but yeah, so that's that's all I'm going to do for explaining the structure here. That's all we really need to know.

Understanding Annotation-Based Routing

Um, oh, routing. That's that's a pretty important aspect of Symphony. So if we go to config and then we go to routing, you'll see there's not much in this file. Um, basically what we're saying is that for the controllers in the AppBundle, we're going to be using annotations for, um, our routing. All right, so basically we don't have to put anything in this file. If we go to our controller, uh, which is in source and DefaultController, this right here is an annotation, and this is what is going to be looked at by the system to determine the routes. All right. So, um, the slash will go to index action, and you can also give it a name of homepage. That way we can access it internally pretty easily. All right. So this is what we'll be using for our routes, okay, which is uh, kind of a change from a lot of the other frameworks, but um, I actually like this structure because you can see right away, you know, that the slash is going to go to the index action.

Creating the TodoController & Initial Views

So from here, what I want to do is just create another controller for our to-dos. All right, so let's go to our controller folder, say new file, and I'm going to save it as TodoController.php. All right, this takes a second. All right, so we're going to copy the entire structure from the DefaultController and just paste it in here. And then we're just doing our inclusions up here, things we need. Let's change this to TodoController. Okay, then we'll have our index. And for the route, we're going to have this go to /todos. And for the name, let's say todo_list. All right, and then let's see, let's just test it out. So we'll just say die('todo'). And then we'll pass in 'todo'. All right, so if we save that and then go to /todos, okay, so we get our string here that we passed in.

All right, so creating routes and controllers and actions is as easy as that really. And we can name this whatever we want. Um, I'm actually going to change it to listAction. All right, and this should still work. Okay, so we can change that. And what we're going to want to do is load up a view. All right, so let's get rid of that die statement. All right, and then down here, let's change this to todo/index. Actually, yeah, we'll keep that. That's fine. And then we don't need this right here. This is how we can pass in values. All right, so we're just passing in the base directory as a as a variable here, but um, I'm going to get rid of that for now. Okay, so we should, that should be fine.

All right, so now we need to create our view. So let's go to app, resources, and let's create a new folder in the views, and we're just going to call this todo. Okay, and then in there, we're going to create a new file and save it as index.html.twig. Okay, so now in here, let's just do <h1>Todo Index</h1>. Save that. And now we're loading that view. So I'm just going to create a couple more files in the todo view folder. Okay, so this one will be called create.html.twig. And we'll create another one and let's save that as edit.html.twig. And then we'll create one called, uh, let's call it details.html.twig. Okay, so there's our views.

Defining and Testing CRUD Routes & Actions

And back to the controller, what we'll do is copy this whole thing here. And this one is going to be to create. So it's going to be /todo/create, and we'll call this... actually you know, let's call it todo_create. All right, and then we're going to change that to createAction, and we want to render todo/create, just like that. All right, we'll do the same for the other ones. We have edit. Now the edit and the details are going to take in an ID as well, because we need to know which one to edit. All right, so to do that, we can say /edit/{id}. All right, let's call this todo_edit, and we're going to change that to editAction, and this is going to take in an ID here as well. All right, um, we don't need the request here in list. And then down here, this is going to be /todo/details/{id}. Excuse me. And we'll call this todo_details. And then this will be detailsAction. And let's see, we need an ID but we don't need the request, so we're just going to pass an ID and then here, details. All right, so those are our main actions.

And then just to make sure that they're linked to the views, let's say Todo Create. That's the create view. And we'll have edit and details. So now if we go to /todo/create, okay, that's correct. If we go to /edit/1, okay, and then... oops, wait a minute. Edit... to-do... index. Huh, editAction... Oh, I didn't change this. There we go. And then we'll do /details/1. All right, so we know all of our actions are now linked to our views. So in the next video, what we'll do is we're going to implement a layout and we're going to use Bootstrap for our layout just to give us something that's quick, that's clean. Um, not not really concerned on how it looks and and the, you know, the design of it. Um, you know, we're looking at the functionality. So we'll go ahead and do that in the next video.