Creating A To-do App Using Symfony 3.1

by Shahroze Nawaz  June 22, 2016

In the previous installment of this series, I gave a brief introduction of Symfony 3.1.

Symfony 3.1 Todo App

Now this is the time to code a simple Todo app, as we talked about earlier. Let’s start by looking at the directory structure, so after creating the application you can see number of directories and files in your project folder.

1

This is the typical directory structure of Symfony project. Below are the details of what these folders contain.

app/config/ Contains configuration files for dev and prod environment
app/Resources/ Contains the views for templating
src/AppBundle/ Contains the main code files like Routers,Controllers and Doctrine entities
var/cache/ Contains the cache data of application
var/logs/ Contains the log files of application
var/sessions Contains the session files of application
vendor/ Composer install the dependency files here
web/ Contains frontend files like javascript stylesheets and images

Step 1: Database Configuration

First we add our database configuration in app/config/ folder. Composer auto generates config file which is parameters.yml you just need to edit the code below according to your database name, port and host. In my case it looks like below.

Step 2: Create First Controller

As we discussed in the directory structure, all our controllers lie in src/AppBundle/Controller so move in that folder and create new controller with name “TodoController.php”. We will code all our URL calls in this file. Now go to DefaultController.php and remove  the code between class block. Coming back to our TodoController.php file, add the following namespace and dependency URLs

Now make a class for TodoController which extends the global Controller library

We will use form for adding and editing Todos. For this purpose we have also added form dependency URLs in the code above. Let it be noted that all the routing and actions will be made in this class

Step 3: Create Database Entity with Doctrine

Doctrine is a whole new concept which comes integrated with Symfony. We know we are making a crud Todo app and obviously we need to alter our database tables doctrine, which makes it much easier for us. Basically it operates on command line and generates an entity in AppBundle folder which automatically gets and sets fields from database.

Let’s see how doctrine works for us.

Open your SSH terminal from Cloudways server page login with username and password. Now move to your application folder in my case it is “todolist” and run the below command.

Screenshot_4

You will now see the doctrine message. Now enter the entity name “AppBundle:Todo” hit enter, and after that don’t enter any configuration format, just press enter. It will now ask for your database fields. Add fields like below and every time hit enter to go to another line.

Screenshot_5

Now to create the table and its schema, run the following command.

Screenshot_6

Now open your cloud database from the Application’s  page by launching database manager.

Screenshot_7

There you should see a database table “Todo” enter one or two records in it.

Screenshot_8

Step 4: Add Bootstrap to Base Template

So we have set our database,Controller and parameters file. Now it’s time to edit our base template file. For frontend, we are going to use Bootstrap Library. This base template will be extend by all other templates. Move to app/Resources/views and open base.html.twig file. Replace all the existing code with below.

So this is our base template including bootstrap libraries, headers and flash messages which will be called in all template files. We will see how we can extend this using Symfony extend code block.

You can notice the block and endblock statements. Actually, Symfony defines a unique structure to define block variables and values. It simply uses {} and % sign to define statements.

Step 5: Create New Templates in Views

Since we need to add, edit, delete and show details of our todos, for this we have to make some more templates. You can connect by FTP using Filezilla and create files. Go to app/Resource/views and create a new folder “Todos” in it. Open todos folder and create four templates as mentioned below.

  1. Index.html.twig
  2. Create.html.twig
  3. Details.html.twig
  4. Edit.html.twig

We also need to create Routers in our Controller file for each template. That means we need to create separate and specific route calls for each template file.

Conclusion

So now we have setup all of the necessary environment for our Todo app and made a parent controller to implement. That’s all for this tutorial.

In the next installment of this series, I will continue the discussion on the Symfony 3.1 powered to-do app. Here is a short introduction and list of major topics in this Symfony 3.1 series. Until then, you can setup this app by signing up on Cloudways.

If you have any questions regarding this tutorial you can ask it in comments below.

Start Creating Web Apps on Managed Cloud Servers Now!

Easy Web App Deployment for Agencies, Developers and E-Commerce Industry

About Shahroze Nawaz

Shahroze is a PHP Community Manager at Cloudways - A Managed PHP Hosting Platform. He’s always in search of new frameworks and methods to implement them. Besides his coding life, he loves movies and playing soccer with friends. You can email him at shahroze.nawaz@cloudways.com

Stay Connected:

You Might Also Like...