[ Part 5 ]- The controller and the view

Symfony 3 Jobeet tutorial - In this part, we will generate controller and view for data we've just put into our database

Posted by Lukasz D. Tulikowski on February 10, 2017

 

Table of content


    Let’s generate JobController and Twig views!

    We already have some data in our database, but now it’s time to use some magic which allow us to see it in the browser. Let’s run command

    $ bin/console doctrine:generate:crud --entity=AppBundle:Job --route-prefix=job --with-write --format=annotation
    

    After running this command, you will be asked several questions. Because we passed answers to this questions as arguments only thing you need to do is press Enter/Return button, to confirm options we’ve already chosen.

    Why we use annotation routing and how about its alternative

    In some tutorials and some projects, you may want to use YAML as preferred routing option. The reason why it happens is the same as choosing YAML relation model upon annotations. It’s easier to read and in general more user-friendly. But it has its drawbacks. It generates additional files (what in this particular case can be desirable in some bigger projects but it’s not a necessity), and it makes your application slower. Although there is a little bit sophisticated solution to avoid performance loss which uses Cache Pools and for example Redis database. If you are inquisitive person, you can read more about it here

    Auto-generated files and it purpose

    Our command generated following files.

      created ./src/AppBundle/Controller/JobController.php
      created ./app/Resources/views/job/index.html.twig
      created ./app/Resources/views/job/show.html.twig
      created ./app/Resources/views/job/new.html.twig
      created ./app/Resources/views/job/edit.html.twig
      created ./src/AppBundle/Tests/Controller//JobControllerTest.php
      created ./src/AppBundle/Form/JobType.php
    

    In Symfony 3 views are by default saved under ./app/Resources/views. Although there is nothing wrong in keep it there, it’s better to keep it in the bundle folder. That’s because if for example, you want to create Bundle with will be a dependency like ‘Faker’ we’ve already used or FOSUserBundle we will be using in the future. Your views should be placed in Bundle namespace. So let’s move ./app/Resources/views to ./src/AppBundle/Resources/views.

    But controller we genereted will be still looking for views under ./app/Resources/views, that’s why we need to make a little changes in each CRUD action.

    Open ./src/AppBundle/Controller/JobController.php and in each action which render a view look for job.

        
    <?php
    ...
            return $this->render('job/index.html.twig', array(
                'jobs' => $jobs,
            ));
    ...
        
    

    Replace job/ with AppBundle:job: and now our controller actions will render views we keep in our ./src/AppBundle/Resources/views. directory.

    Becase every job view, extends base view, we need to make a little change in each twig file under ./src/AppBundle/Resources/views/job directory. Let’s start with ./src/AppBundle/Resources/views/job/index.html.twig

    {% extends 'base.html.twig' %}
    
    {% block body %}
        <h1>Jobs list</h1>
    
        <table>
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Type</th>
                    <th>Company</th>
                    <th>Logo</th>
                    <th>Url</th>
                    <th>Position</th>
                    <th>Location</th>
                    <th>Description</th>
                    ...
    

    We need to change line

    {% extends 'base.html.twig' %}`
    

    to

     {% extends 'AppBundle::base.html.twig' %}
    

    and repeat it in every file under mentioned ./src/AppBundle/Resources/views/job directory.

    Let’s see the result

    Remember that symfony has build-in built-in web server and don’t forget to start it! If it’s running simply go to http://127.0.0.1:8000/job/ and you see something like this

    jobeet job list

    In some cases you will need to clear the cache running

    $ bin/console cache:clear --env=prod
    $ bin/console cache:clear --env=dev
    

    Nice! Isn’t it? You’re right - it completly unstyled and plain, but still stop here for a while and check how much you can do!

    • You see a list of jobs
    • You can see details of choosen job
    • You can edit a job
    • You can add new job
    • You can delete a job

    Github project repository

    At this point I’ll create Github repository for our project, so you will be able to see/copy (clone) code of the Jobeet application.

    You can find sources here.

    In case you want to use them and skip some previous parts of Jobbet tutorial. Here is how to do it.

    Fist of all you need have git installed on your machine. Then run following via ssh

    $ git clone git@github.com:tulik/symfony-3-jobeet.git App
    

    or via https

    $ https://github.com/tulik/symfony-3-jobeet.git App
    

    Now go into App directory and run

    $ php composer.phar install
    

    That’s all! Since now every change will be written to repository, so you can follow it here.