Build Your Own PHP Framework

Sign in Get started

This episode is for members only

Sign up to access "Build Your Own PHP Framework" right now.

Already a member? Sign in to continue

Playing

20. Installing Twig

Episodes

0%

Your progress

Total: 4h 45m
Played: 0m
Remaining: 4h 45m

Join or sign in to track your progress

01. Setting up

01. Introduction

02. Composer and PSR-4 Autoloading

03. Bootstrapping and structure

04. Error reporting with Ignition

02. Container

05. Using a container

06. Adding service providers

07. Autowiring with reflection

08. Refactoring to a singleton

03. Application config

09. Building the Config class

10. Reading and merging config files

11. Registering service providers through config

12. Using env files

04. Routing and controllers

13. Everything starts with requests

14. Adding routing

15. Responding in routes

16. Cleaning up responding

17. Defining routes in a separate file

18. Creating a controller

19. Using services inside controllers

05. Views

20. Installing Twig

21. Rendering a view

22. Debugging in Twig

23. Creating a base layout

24. Page titles in Twig

25. Creating a Twig config helper

06. Database

26. Setting up and querying the database

27. Working with models

28. Creating an example user profile page

07. Authentication

29. Setting up Sentinel

30. Creating the registration flow

31. Registering and authenticating a user

32. Showing authenticated state

34. Logging out

08. CSRF Protection

35. Protecting routes with CSRF

36. Adding tokens to forms

09. Flashing messages

37. Basic session flashing

38. Creating a Twig helper and flashing globally

10. Validation

39. Validating the login form

40. Manually adding validation errors

41. Validating the registration form

42. Custom validation rules

11. Middleware

43. How middleware works

44. Adding auth middleware and grouping routes

45. Persisting old form data

12. Exception handling

46. Creating an exception handler

47. Custom 404 (and other error) views

48. Rendering views for CSRF errors

13. Pagination

49. Paginating with Eloquent

50. Building a pagination view with Twig

14. Global helpers

51. Registering functions with PSR-4

52. Container resolution helper

53. View and config helpers

54. Route generator helper

Transcript

00:00

So we can respond to requests within our application now, but there's a little problem. If we want to output anything more than just some basic HTML, we're going to need a way to construct

00:12

a full view in a completely separate file. So as an example, you wouldn't want to go ahead and start to create out any kind of real HTML structure within write. Doing something like this is absolutely fine, but of course, as a long-term solution, it's just not going to work. So for that, we're going to reach for a templating engine and we're going to use Twig here. Now you

00:36

can substitute this out for any templating engine you want. The general lifecycle of our application in terms of rendering a view, returning it to the user will be exactly the same. But for now, we'll go ahead and use Twig. Okay, so we want to go ahead and get this installed. So let's find out where we can install this and we will start to add this to our container. Okay, let's pull in the

00:59

composer require command to pull this in and let's install Twig. Okay, so we're going to add this to our container and the reason that we're going to add it to our container is because we want to eventually do something like this. We'll maybe have a view class that we'll create out to handle rendering. We'll have this inside of here and then inside of write, rather than construct the HTML

01:22

ourselves, we'll say this view and render. We'll choose a template file that will exist within our framework structure and we'll say something like home.twig and then we can even pass through any additional options here like the name of the application which we can use to render on this view. Now if you've not worked with Twig or views before, don't worry, we're going to go through it

01:49

step by step. Okay, so for now let's get rid of write and just write an empty string and let's go ahead and create a service provider to house our view functionality. So again we'll just create out a view service provider in here and we'll just paste in the app service provider and get rid of anything we don't need. Change the name over to view service provider and not forgetting over in config

02:13

an app to register this here as well. So let's pull that directly into here. Great! Okay, so now let's look at in our view service provider registering this on the container. Now what we want to do here is when we register this, we want this to be our own class. So we're going to say get container and we don't want to add this as something like the default Twig environment, so we have to reference

02:38

this when we pull it in. So why don't we just create out a really simple directory called views and we'll create out a php class in here called view and this will be what we add to our container. We'll fill this in in a minute. So let's say view class and in here we just do a little bit of setup with Twig to get this installed. Before we do anything let's not forget to add this to our

03:05

services like so and let's get Twig set up. So the first thing that we need to do is work out where our view files are actually coming from. So let's go and create out in the root here a directory called resources and then in here let's create another directory called views and while we're here we might as well just create a home.twig file with home in and this now can contain anything

03:32

Twig syntax, plain html and we can put as much as we want in here and now it's nicely separated away from our controller and we don't have to manually return a bunch of html. Okay so let's first of all grab where our files exist. So we're going to go and print out a new file system loader which is from Twig and we just need to point to the directory of our views, the top level directory.

03:57

So let's grab the current directory that we're in, let's go back into our main directory, go into resources and go into views. So now we know where these views exist and we can have sub directories inside of our views as well it doesn't matter. Next is creating a Twig instance itself. So again we're going to create out a new environment which is why we did create out our own view class because

04:22

we don't want to reference this by environment everywhere. Into here we pass in the loader so this knows where to load files from and then we just have a bunch of options that we can define. So for example we can choose to cache this. I'm going to set this explicitly to false just for now but this is either false or the location of where you want your views to be cached. We'll probably

04:44

cover that a little bit later. We can also go ahead and set whether we want debugging to be enabled or not. We're going to set that to true just for now and then we can use our config to change that up later. So there's a bunch of other stuff that we can do down here like registering extensions and we'll be doing that later when we create some helper functions for our Twig templates

05:06

but for now we just want to return a new view class which is that own class that we created and we want to pass Twig in that we've created here as a dependency to this so we can render stuff out. Okay let's go over to our home controller and let's take a look at accessing this. So we already pulled that in as an example let's now import app views and view and then just

05:30

before we do anything here let's kill the page and let's just var dump on this out of our container just to make sure everything is working. So let's just say this view and let's have a look. Okay let's go over and view service provider not found so let's just check this out and make sure that we did everything correctly and we didn't so let's go ahead and rename this to view service

05:56

provider and again just go over to our config and app just to make sure that this is registered properly and my editors changed that for me. Okay refresh and there we go we have our view instance. So now that Twig is installed let's go over to the next episode and look at how we can use this now to render out the contents of that Twig home.twig file and see it on the page.

Episode summary

In this episode, we're tackling the common problem in web apps—how to keep our HTML tidy and maintainable. Up until now, we've just been echoing out simple strings directly in our controller, but we all know that's going to get messy fast. So, it's time to bring in a templating engine: Twig.

We'll walk through the process of installing Twig using Composer, and I'll show you why using a templating engine is a massive upgrade for separating your logic from presentation. While Twig is our choice here, you could go with pretty much any templating engine, and the general flow for the application stays the same.

Once installed, we start prepping our folder structure, creating a place for all our Twig templates. We set up a custom View class that will serve as the glue between our controllers and these templates, handling all interactions with Twig. We'll wire up everything using our application's container and service providers, ensuring that rendering views is simple, decoupled, and easy to manage in the future.

By the end of this episode, you’ll have Twig installed, a clean view system scaffolded, and everything in place to render real templates instead of messy inline HTML. Next up, we'll actually use this new setup to display content from a Twig template in the browser!

Episode discussion

No comments, yet. Be the first!