Layout and UI

Goal

This snapshot advances Keystone Gazette by teaching you to render Twig pages with Bootstrap 5.

Every numbered folder is a complete app. Run this stage independently, then compare it with the previous folder.

Prerequisites

Use PHP 8.2+, Composer, and Docker for MySQL stages.

Port 8002 must be free. Copy .env.example before starting database stages.

• PHP 8.2+ and Composer
• A code editor and terminal
• Docker from part 4 onward

Concepts

Twig escapes values by default. Shared base layouts keep navigation consistent.

Keep controllers thin: forms accept input, Doctrine entities enforce rules, and Twig escapes output by default.

Walkthrough

Render home with sample posts.

Read the example, then open the matching snapshot. The repository includes the surrounding setup and error handling.

return $this->render('home.html.twig', ['posts' => $sample]);

Run and verify

Enter 03-Layout-And-UI, install Composer deps, copy .env.example, and start the Symfony server on port 8002.

Open http://127.0.0.1:8002. Watch the terminal for validation and database errors.

git clone https://github.com/michaeldunga1/fcc-symfony-blog.git
cd fcc-symfony-blog/03-Layout-And-UI
composer install
cp .env.example .env
symfony server:start --port=8002 --no-tls
# or: php -S 127.0.0.1:8002 -t public

Troubleshooting

TemplateNotFound means the templates path is wrong.

For database failures, confirm Docker and the keystone_NN name when applicable. Never commit .env or vendor.

• Read the first error first
• Restart after environment changes
• Never commit secrets

Try this

Render a friendly empty state when posts is empty.

Test a happy path and one invalid or unauthorized request.

• Make one small change
• Test it in the browser
• Compare with the next snapshot only after it works