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

23. Creating a base layout

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

If you're new to Twig, let's look at how we can create a base layout so all of our pages

00:04

follow the same structure and we can reuse something like a navigation. So we'll look at includes as well. OK, so at the moment we've just got a bunch of plain HTML on the page which doesn't have any real structure to it. Let's go over to our views directory and create another directory called layouts and then we'll define either one or multiple layouts for our application.

00:26

So I'm just going to create a standard app.twig layout which will be enough for the majority of what we're doing but then you could create different layouts perhaps for a user dashboard or any other sections. So in here I'm going to go ahead and define out a basic HTML structure. We'll get to the title a little bit later but for now let's just call this no framework and basically

00:47

what we want to do is inside of the body inject a block of content so we can reuse this entire template. Now to do that we define this out with block and we give it a name so let's just call this content and as with most other things in Twig we want to end that block just here. So now how do we use this template and inject the content from home directly into here? Well let's open up our

01:12

home.twig file and at the top of here let's extend that layout we've just created. So we're going to say extends and we're going to give the full path to that layout so layout slash app dot twig and we're nearly done. Now we want to define all of this as the content so in here we use block again and define out this content and sure enough down at the bottom we end that block. So what's going

01:41

to happen now is all of this content in here is going to be injected into this content just here within our base layout. Let's go over and give this a refresh and you can see that the title's changed and we now have a proper structure to our app. You can see that via the html that's returned. What we can also do is take this one step further so we could create out some sort of main wrapper

02:06

inside of here for our content but we could also create a global nav at the top and we could include a partial. So for this under layouts we could create out either a new directory or just a new file called navigation. In fact let's create out a directory for this so we'll call this partials and inside of here let's create a new file called navigation dot twig and this will be the global

02:30

navigation for our app. So let's say ul and we can even put the nav tag inside of here but it doesn't matter and we could create out an anchor that goes through to our home page which goes through to slash and now we can include that within our base layout. So inside of here let's go and include with the include syntax that layouts and partials and navigation dot twig file. Now if

02:58

we come over you can see that the nav exists at the top of every single page. So if we create out a new page and over in that page that we create we just define out the block. I'm actually going to pull that indentation in. All we need to do now is extend this base layout. Any content in here is going to be visible here but we're always going to have our navigation and this is going to start to

03:21

build up what we're building. We'll create a link to go through to the login page register page. We'll change around the state of the navigation as we implement authentication to show if the user's logged in. We can greet them by name but at least now we have a much better structure to our layout.

Episode summary

In this episode, we dive into how to set up a base layout in Twig so all your pages share a common structure. We start by making a new "layouts" directory in the views folder, and create an app.twig file. This acts as our main layout, with a basic HTML structure. The key part is adding a {% block content %} placeholder, so different pages can inject their own content into this shared layout.

Next, we see how to use this base layout in a real page. We update our home.twig file to extend the new layout by using {% extends "layouts/app.twig" %}. Inside home.twig, we wrap all the page-specific HTML in a {% block content %} so it slots perfectly into the layout.

To keep things modular, we create a "partials" folder and add a navigation.twig file, which holds our site’s main navigation. By including this partial in our base layout with {% include "layouts/partials/navigation.twig" %}, the navigation bar now appears automatically on every page.

From here, we talk about how you can reuse this structure for new pages by just extending the layout and defining their content blocks. This not only keeps the site DRY, but also sets us up to easily add dynamic features to the navigation, like login/logout states. By the end of this episode, you’ll have a reusable, organized page structure with consistent navigation throughout your app.

Episode discussion

No comments, yet. Be the first!