Lesson Weekend

So far we have learned how to create a Silex app and use PHPUnit to follow good BDD practices when developing our methods. Now we are going to make websites that can use any method that we write. Let's make a website that can use our makeTitleCase method.

We already have a title_case project folder and now all we need to do is add Silex and Twig into our composer.json file, and add app and views folders to our project folder. Here is what your composer.json file should look like now. Don't forget to run $ composer update after you are done adding Silex and Twig.

composer.json
{
    "require": {
        "phpunit/phpunit": "4.5.*",
        "silex/silex": "~1.1",
        "twig/twig":"~1.0"
    }
}

Now we will create an index.php file inside of the web folder with the following code in it. Don't forget to start your server!

web/index.php
<?php
    $website = require_once __DIR__.'/../app/app.php';
    $website->run();
?>

Our routes are ready to be set, so create a file called app.php inside of the app folder and type this into it:

app/app.php
<?php
    require_once __DIR__."/../vendor/autoload.php";
    require_once __DIR__."/../src/TitleCaseGenerator.php";

    $app = new Silex\Application();

    $app->register(new Silex\Provider\TwigServiceProvider(), array(
        'twig.path' => __DIR__.'/../views'
    ));

    $app->get("/", function() use ($app) {
        return $app['twig']->render('form.html.twig');
    });

    $app->get("/view_title_case", function() use($app) {
        $my_title_case_generator = new TitleCaseGenerator;
        $title_cased_phrase = $my_title_case_generator->makeTitleCase($_GET['phrase']);
        return $app['twig']->render('title_cased.html.twig', array('result' => $title_cased_phrase));
    });

    return $app;
?>

In this bit of code, we have required our TitleCaseGenerator.php file at the top, connected Twig to our views folder, and created two routes. The first route get("/"...) will render a file called form.html.twig, which we will create soon. The second route get("/view_title_case"...) will render a file called title_cased.html.twig. We have passed in the $title_cased_phrase as a variable called result, so we will have access to it in our template.

Let's make the form.html.twig view:

views/form.html.twig
<!DOCTYPE html>
<html>
<head>
    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'>
    <title>Convert to Title Case!</title>
</head>
<body>
    <div class='container'>
        <h1>Title Case Translator</h1>
        <p>Enter the phrase you would like translated into title case</p>
        <form action='/view_title_case'>
            <div class='form-group'>
              <label for='phrase'>Phrase:</label>
              <input id='phrase' name='phrase' class='form-control' type='text'>
            </div>
            <button type='submit' class='btn-success'>Translate</button>
        </form>
    </div>
</body>
</html>

And now we need to make a view to display the result of our method:

views/title_cased.html.twig
<!DOCTYPE html>
<html>
<head>
    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'>
    <title>Convert to Title Case!</title>
</head>
<body>
    <div class="container">
        <h1>Your phrase in title case:</h1>
        <h4>{{ result }}</h4>
    </div>
</body>
</html>

Let's navigate to localhost:8000 and see our app in action!

To make a website using our tested methods and classes, add Silex and Twig to the composer.json file.

composer.json
{
    "require": {
        "phpunit/phpunit": "4.5.*",
        "silex/silex": "~1.1",
        "twig/twig":"~1.0"
    }
}

Now run $ composer update to add in those new dependencies.

Create an index.php file inside of the web folder:

web/index.php
<?php
    $website = require_once __DIR__.'/../app/app.php';
    $website->run();
?>

Routes are put into the app.php file in the app folder. You need to require the autoload feature of the vendor folder, and the class(es) you will be using in this file, in addition to "creating" a new Silex application and connecting it to Twig:

app/app.php
<?php
    require_once __DIR__."/../vendor/autoload.php";
    require_once __DIR__."/../src/TitleCaseGenerator.php";

    $app = new Silex\Application();

    $app->register(new Silex\Provider\TwigServiceProvider(), array(
        'twig.path' => __DIR__.'/../views'
    ));

Routes are used to display certain files or run certain methods when a user navigates to a particular webpage. The app.php file is like a directory or roadmap for your browser and server. Here is an example route:

$app->get("/view_title_case", function() use($app) {
    $my_TitleCaseGenerator = new TitleCaseGenerator;
    $title_cased_phrase = $my_TitleCaseGenerator->makeTitleCase($_GET['phrase']);
    return $app['twig']->render('title_cased.html.twig', array('result' => $title_cased_phrase));
});

You need to return the application at the very end of your app.php file with the line return $app;.