Before coding, we need to set up the working environment and make sure that everything is working well.
Requirements
- PHP 7.2.5+
- Composer
- Symfony CLI
- Docker & Docker compose
Setting up the Project
Creating the project
Create a new Symfony project using the Symfony CLI tool:
$ symfony new happy-shop
Launching the Local Web Server
From the project directory, start the web server in the background:
$ cd happy-shop
$ symfony server:start -d
The server started on the port 8000. Open the website http://localhost:8000 in a browser.
Installing dependencies
We will need some dependencies for our project. To install these packages, we will use the Symfony CLI:
$ symfony composer req form validator annotations orm twig
- Form: we will need to build forms for the shopping cart,
- Validator: it will allow us to validate the data models,
- Annotations: we will use the annotations format for the configuration of the project,
- ORM: known as Doctrine, it will help us to persist entities in a database,
- Twig: all templates will be created using Twig.
Dependencies for developing
The following components will be installed only for developing the project:
$ symfony composer req profiler maker orm-fixtures phpunit browser-kit dama/doctrine-test-bundle --dev
- Profiler: useful to debug and see details of all requests we will execute,
- Maker: it helps you to generate a lot of different classes. We will use it all the time during the project,
- Fixtures: it will be used to load fake products to help us developing the shopping cart,
- PHPUnit: essential for writing tests,
- BrowserKit: to test with a Client service that simulates a browser,
- DoctrineTestBundle: provides a listener to reset the database between tests.
Setting up the Database
We will need to persist entities in permanent storage. We will use the MySQL database.
Adding MySQL to Docker Compose
From the project directory, create a docker-compose.yaml
file:
# docker-compose.yaml
version: '3'
services:
database:
image: library/mysql:8.0
environment:
MYSQL_ROOT_PASSWORD: happy
MYSQL_DATABASE: happy_shop
ports:
- 3306:3306
This will install the MySQL server at version 8.0 and configure some environment variables that control the database name and credentials. The exposed port will help us access the database from Symfony.
Starting Docker Compose
Start Docker Compose in the background:
$ docker-compose up -d
Changing the Environment Variable
Set up the default DATABASE_URL value to use MySQL:
# .env
###> doctrine/doctrine-bundle ###
DATABASE_URL="mysql://root:happy@127.0.0.1:3306/happy_shop?serverVersion=8.0"
###< doctrine/doctrine-bundle ###
Creating the Database
To create the database, run the following command:
$ bin/console doctrine:database:create --if-not-exists
Creating the Home Page
Creating the Home Controller
Create the HomeController
controller via the Maker:
$ symfony console make:controller HomeController
The command creates a HomeController
class under the src/Controller/
directory and a template file to templates/home/index.html.twig
.
In the HomeController
class, define a route to make it match the homepage:
<?php
namespace App\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
class HomeController extends AbstractController
{
/**
* @Route("/", name="home")
*/
public function index(): Response
{
return $this->render('home/index.html.twig', [
'controller_name' => 'HomeController',
]);
}
}
You already can go to the homepage http://localhost:8000. Try it!
Updating the base Layout
All templates will be depending on the base layout to share common elements, like the meta, title, header, and more.
We will use Bootstrap for designing the pages of the project but please note that the design is not the goal of this project so we will just make it functional.
{# templates/base.html.twig #}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>{% block title %}Happy Shop{% endblock %}</title>
{% block stylesheets %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous">
{% endblock %}
</head>
<body>
{% block header %}
<nav class="navbar navbar-dark bg-dark sticky-top">
<a href="{{ path('home') }}" class="navbar-brand">
Happy Shop
</a>
</nav>
{% endblock %}
{% block body %}{% endblock %}
</body>
</html>
This template defines the base HTML skeleton. We've defined the title, header, and body blocks. We also set the viewport to make the app responsive.
To see the result, let's go back to the homepage http://localhost:8000:
We are ready! Let's manage products to the next step.
Top comments (0)