Symfony 4: Generating URLs

Video loading...

  • 0:03
    Symfony 4: Generating URLs with Ryan Weaver
  • 0:07
    Most of these links don’t go anywhere yet.
  • 0:10
    Whatever. No problem.
  • 0:12
    We’re going to fill them in, as we continue.
  • 0:15
    Besides, most of our users
  • 0:17
    will be in hypersleep for at least a few more decades.
  • 0:21
    But we can hook up some of these,
  • 0:25
    like The Space Bar logo text.
  • 0:28
    That should go to the homepage.
  • 0:31
    Open template/base.html.twig and search for The Space Bar.
  • 0:37
    OK. Let’s point this link to the homepage.
  • 0:41
    And yep, we could just say href=/,
  • 0:46
    but there’s a better way.
  • 0:49
    Instead, we’re going to generate a URL to the route.
  • 0:55
    Yep, we’re going to ask Symfony to give us the URL
  • 0:59
    to the route that’s above our homepage action.
  • 1:03
    Why?
  • 1:04
    Because if we ever decided to change this route’s URL,
  • 1:08
    like to /news,
  • 1:11
    if we generate the URL instead of hard-coding it,
  • 1:15
    all the links will automatically update.
  • 1:18
    Magic.
  • 1:20
    So, how can we do this?
  • 1:22
    First, find your terminal and run
  • 1:25
    ./bin/console debug:router.
  • 1:28
    This is an awesome little tool that shows you a list
  • 1:31
    of all of the routes in your app.
  • 1:34
    You can see our 2 routes
  • 1:37
    and a bunch of routes that help the Profiler and web debug toolbar.
  • 1:42
    There’s 1 thing about routes that we haven’t really talked about yet.
  • 1:47
    Each route has an internal name.
  • 1:50
    This is never shown to the user.
  • 1:52
    It only exists, so that we can refer to that route in our code.
  • 1:58
    For annotation routes, by default,
  • 2:00
    that name is created for us.
  • 2:04
    This means, to generate a URL to the homepage,
  • 2:07
    copy the route name, go back to base.html.twig, add {{ path }}
  • 2:14
    and paste the route name.
  • 2:16
    That’s it.
  • 2:19
    Refresh.
  • 2:21
    Click it.
  • 2:22
    Yes! We’re back on the homepage.
  • 2:25
    But actually I don’t like to rely on auto-created route names,
  • 2:31
    because they could change, if we renamed certain parts of our code.
  • 2:36
    Instead, as soon as I want to generate a URL to a route,
  • 2:41
    I add a name option.
  • 2:42
    name =”app_homepage”
  • 2:47
    Run debug:router again.
  • 2:50
    The only thing that changed is the name of the route.
  • 2:55
    Now, go back to base.html.twig and use the new route name here.
  • 3:02
    It still works exactly like before,
  • 3:05
    but we’re in complete control of the route name.
  • 3:09
    We now have a link to our homepage,
  • 3:12
    but I don’t know why you’d want to go here.
  • 3:15
    It’s super ugly.
  • 3:17
    So let’s render a template.
  • 3:19
    In ArticleController, instead of returning a response,
  • 3:23
    return_$this->render, with article/homepage.html.twig.
  • 3:30
    For now, don’t pass any variables to the template.
  • 3:33
    This template does not exist yet,
  • 3:36
    but if you look again in the tutorial directory, from the code download,
  • 3:41
    I’ve created a homepage template for us.
  • 3:44
    Sweet.
  • 3:46
    Copy that and paste it into templates/article.
  • 3:51
    It’s nothing special.
  • 3:52
    Just a bunch of hard-coded information and fascinating
  • 3:56
    space articles.
  • 3:59
    It does make for a pretty cool looking homepage.
  • 4:02
    And yeah, we’ll make this all dynamic once we have a database.
  • 4:07
    One of the hard-coded articles is the one we’ve been playing with,
  • 4:11
    “Why Asteroids Taste Like Bacon?”
  • 4:14
    The link doesn’t go anywhere yet.
  • 4:17
    So, let’s fix that, by generating a URL to our article showpage.
  • 4:23
    Step 1. Now that we want to link to this route, give it a name,
  • 4:28
    article_show.
  • 4:30
    Step 2. Inside homepage.html.twig,
  • 4:34
    find the article
  • 4:37
    and for the href use path('article_show').
  • 4:44
    That should work. Right?
  • 4:46
    Refresh.
  • 4:49
    No! It’s a huge, horrible error.
  • 4:53
    Some mandatory parameters are missing,
  • 4:56
    ("slug") to generate a URL for “article_show”.
  • 5:00
    That totally makes sense.
  • 5:03
    This route has a wildcard, so we can’t just generate a URL to it.
  • 5:08
    Nope.
  • 5:09
    We need to also tell Symfony what value it should use for the {slug} part.
  • 5:17
    How? Add a second argument to path. {},
  • 5:23
    that’s the syntax for an associative array, when you’re inside Twig.
  • 5:28
    It’s similar to JavaScript.
  • 5:30
    Give this a slug key set to 'why-asteroids-taste-like-bacon'.
  • 5:38
    Try it.
  • 5:39
    Refresh.
  • 5:41
    Error gone and check this out,
  • 5:44
    the link goes to our showpage.
  • 5:47
    Next, let’s add some JavaScript in an API
  • 5:50
    endpoint to bring this little heart icon to life.

Stellar Development with Symfony 4

Loading ...

Symfony 4: Generating URLs

Loading...
6 minutes // HDCC //

In this tutorial, we'll learn how to generate URLs to routes and we'll fix up the links in our app in the process.

Downloads: 
Log in or sign up to download companion files.

Additional resources:
There are no resources for this video. If you believe there should be, please contact us.

Share