As you can see, I don't write that much about PHP anymore because I lost motivation. I used PHP and Symfony, in particular, for a long time.

With Go, I found it so refreshing and motivated me. I need to learn new things because otherwise, everything gets boring.

I've built first website using Nuxt.js and Golang as backend and wrote crawler/scraper in Go.
Why Go?

1. Firstly, I want to mention that I learned Golang back in 2016 but never used it back then in a real project, and it was kinda immature and not so popular then. So I dropped it.
2. Last year, I saw that Job market is getting bigger with Golang, and the language is much better in 2023/24, so I decided to give it a GO.
3. Learning new Go is pretty straightforward and easy, especially for someone who knows multiple languages already.
4. You don't really need complicated frameworks to build things. Go Standard Library is excellent.
5. Deploying applications is much easier than PHP
6. Statically typed
7. Compiled high-level programmed language

I learned it pretty quickly and then jumped right into a building project. My main advice is to build something if you want to learn something. It can be anything: side project, SaaS, API, or parser.
You will learn so much.

As you can see, I don't write that much about PHP anymore because I lost motivation.

In my blog, I will write more about Golang and how I build SaaS and Side projects here. Stay tuned. And, of course, technical-related stuff.

Well recently I needed to set CORS headers for my side project, at first I used Nginx to send additional headers for static files, but then I needed something more configurable.
And I decided to use NelmioCorsBundle, but to my surprise, I couldn't run it. This is something I hate about Symfony in general, and I guess that's why so many people choose Laravel over Symfony for its simplicity. But well I spent some time digging into configuration.
Actually, it was pretty simple to change, but again as I said, Symfony bundle configuration is evil ^_-  sometimes.

So I ran the command

composer req cors

Symfony configured everything for me with default values:

nelmio_cors:
    defaults:
        origin_regex: true
        allow_origin: ['*']
        allow_methods: ['GET', 'OPTIONS', 'POST', 'PUT', 'PATCH', 'DELETE']
        allow_headers: ['Content-Type', 'Authorization']
        expose_headers: ['Link']
        max_age: 3600
    paths:
        '^/': null

#    %env(CORS_ALLOW_ORIGIN)%

I added /api endpoint to test everything

        '^/api':
            allow_origin: ['myhost.com']
            allow_headers: ['*']
            allow_methods: ['GET', 'OPTIONS', 'POST', 'PUT', 'PATCH', 'DELETE']
            max_age: 3600

And I tried to run some endpoints from the allowed origin, but it did not work. Then I changed this line: allow_origin to ["*"] and it still does not work.

Well, what do you think? it was origin_regex: true(If you don't use regex of course). I removed it and everything went well, so remember kids to RTFM :).

If origin_regex is set, allow_origin must be a list of regular expressions matching allowed origins. Remember to use ^ and $ to clearly define the boundaries of the regex.

In this part, I will set up Vue 3 and Vuex store and a JWT authentication bundle.
First of all, I need to install the Webpack encore bundle(plus MakerBundle):

composer require symfony/webpack-encore-bundle
composer require --dev symfony/maker-bundle
npm install
yarn install

Suppose you have it, cool. Now let's add Vue, Vuex store, and Vue Router.

npm install vue@next
npm install vue-router@next --save
npm install -D @vue/compiler-sfc
npm install -g @vue/cli
vue upgrade --next
npm install vuex@next --save
yarn add vue-loader@^16.1.0 --dev

Also, you can install chrome dev tools for VUE(it helps with debugging).

Now I need one more bundle for JWT authentication

composer require "lexik/jwt-authentication-bundle"

After installation, I need to generate SSL keys:

bin/console lexik:jwt:generate-keypair

And update security.YAML file with the following:

        login:
            pattern: ^/api/login
            stateless: true
            json_login:
                check_path: /api/login_check # or api_login_check as defined in config/routes.yaml
                success_handler: lexik_jwt_authentication.handler.authentication_success
                failure_handler: lexik_jwt_authentication.handler.authentication_failure
        api:
            pattern: ^/api
            stateless: true

I don't have a User Entity yet. Well, I can use FOSUserBundle, but it's too much for this kind of project. So I am going to create a simple user entity:

./bin/console make:user

Next run migration:

php bin/console make:migration
$ php bin/console doctrine:migrations:migrate

At first, I wanted to use foundation, but when I saw that it uses jquery, I changed my mind and decided to go with the tailwind(strange? - maybe, but it is what it is).
Install Tailwind CSS

npm i tailwindcss postcss-loader autoprefixer

create postcss.config.js in the main folder:

let tailwindcss = require('tailwindcss');

module.exports = {
        plugins: [
            tailwindcss('./tailwind.config.js'),
            require('autoprefixer'),
            require('postcss-import')
        ]
}

Create tailwind.css file in /assets/styles/tailwind.css

@tailwind base;

@tailwind components;

@tailwind utilities;

update Webpack configuration with new tailwind CSS, add these lines:

    Encore
    //.......
    .enableVueLoader()
    .addStyleEntry('tailwind', './assets/styles/tailwind.css')
    // enable post css loader
    .enablePostCssLoader((options) => {
        options.postcssOptions = {
            config: './postcss.config.js'
        };
    })

Don't forget to update your base.html.twig file, add this:

        {% block stylesheets %}
            {{ encore_entry_link_tags('tailwind') }}
        {% endblock %}

Lets build our first component.

Now let's create a basic Vue project structure.

Please create the following folders and files in your assets/js folder:

main.js - our entry js file.

import '../styles/app.css';
import {createApp} from 'vue';
import App from './App';
import router from './router/router';
import store from './store/index';


createApp(App)
    .use(router)
    .use(store)
    .mount('#app')

App.vue - the main component, for now, it's a pretty simple file:

<template>
  <div>
    <router-view>
      <home />
    </router-view>
  </div>
</template>

<script>
import Home from "./components/Home.vue";
export default {
  name: "App",
  components: {
    Home
  }
};
</script>

/router/router.js - contains our routes; I created only one route but will add more later.

import Home from '../components/Home.vue'
import {createRouter, createWebHistory} from 'vue-router'

export default createRouter({
    history: createWebHistory(),
    routes: [
        {
            name: 'home',
            path: '/',
            component: Home
        }
    ]
})

store/index.js - Vuex store. Nothing special, I will show what we are going to do with this in the next chapter.

import {createStore} from 'vuex'

export default createStore({
    state() {
        return {
            data: 1
        }
    }
})

And of course our first component - Home.vue

<template>
  <div>
    Home controller
  </div>
</template>

<script>
export default {
  name: "Home"
};
</script>

One more thing, update your FrontendController Index action:

    #[Route('/', name: 'frontend')]
    #[Route('/{route}', name: 'vue', requirements: ['route' => '^.+'])]
    public function index(): Response

yarn encode dev --watch

Voila, and we are done!

In the next chapter, I will build a login/sign-up form with basic authentication.

Back to Part 2

Hi, this is a series of tutorials. On how to build a Symfony 6 application from scratch. Symfony 6 project setup and configuration.

Docker configuration

Let's start with the docker image. Let's create a Dockerfile

FROM php:8.0-fpm

# Copy composer.lock and composer.json
COPY composer.json /var/www/

# Set working directory
WORKDIR /var/www

# Install dependencies
RUN apt-get update && apt-get install -y \
    build-essential \
    libssl-dev \
    acl \
    locales \
    zip \
    vim \
    git \
    curl \
    nodejs \
    npm

RUN apt-get install -y libicu-dev \
    && docker-php-ext-configure intl

RUN npm install -g yarn

# Install extensions
RUN docker-php-ext-install pdo_mysql exif pcntl intl

# Install composer
RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer

# Add user
RUN groupadd -g 1000 www
RUN useradd -u 1000 -ms /bin/bash -g www www

# Copy existing application directory contents
COPY . /var/www

# Copy existing application directory permissions
COPY --chown=www:www . /var/www

# Change current user to www
USER www

# Expose port 9000 and start php-fpm server
EXPOSE 9000
CMD ["php-fpm"]

Now let's make a docker-compose.yml file in the root directory. It should look like this.

version: '3'
services:

  #PHP Service
  application:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: application
    tty: true
    environment:
      SERVICE_NAME: application
      SERVICE_TAGS: dev
    working_dir: /var/www
    volumes:
      - ./:/var/www
      - ./docker/php/local.ini:/usr/local/etc/php/conf.d/local.ini
    networks:
      - app-network

  #Nginx Service
  nginx:
    image: nginx:alpine
    container_name: nginx
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./:/var/www/
      - ./docker/nginx/conf.d/:/etc/nginx/conf.d
      - ./docker/nginx/ssl/:/etc/ssl
    networks:
      - app-network

  #MySQL Service
  database:
    image: mysql:5.7.22
    container_name: database
    restart: unless-stopped
    tty: true
    ports:
      - "3306:3306"
    environment:
      MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}
      MYSQL_DATABASE: ${DB_DATABASE}
      MYSQL_USER: ${DB_USERNAME}
      MYSQL_PASSWORD: ${DB_PASSWORD}
    volumes:
      - dbdata:/var/lib/mysql
      - ./docker/mysql/my.cnf:/etc/mysql/my.cnf
      - ./docker/tmp/database:/tmp/database
    command: mysqld --init-file="/tmp/database/init.sql"
    networks:
      - app-network

#Docker Networks
networks:
  app-network:
    driver: bridge
#Volumes
volumes:
  dbdata:
    driver: local

With docker-compose, I can build multiple containers and configure a database and a web server along with PHP. Also, you need to create additional folders in your root directory. The tree should look like this:

Now, I need to configure each container.

MySQL configuration

Create a docker folder in a root directory and MySQL directory, and my.cnf file.
Inside my.cnf you can add additional MySQL configuration; in my case, it's just an empty file. Also, create tmp/database/init.sql. This is just a SQL file with predefined commands to create a user and database. Here is what it looks like:

CREATE DATABASE mydatabase;
CREATE USER 'user'@'%' IDENTIFIED BY 'password';
GRANT ALL PRIVILEGES ON *.* TO 'user'@'%';
FLUSH PRIVILEGES;

If you want, you can change your password and username. Also, you can grant privileges to a single database. But for the dev environment, it's okay.

PHP

Next, php/local.ini add whatever PHP configuration you need, for example

upload_max_filesize=20M
post_max_size=20M

Webserver

Now we need to configure our web server, Nginx. I use NGINX because it's faster than apache, and it serves static files and data without PHP. Why would you use something else? So, create the main Nginx folder and two child folders - conf.d and certs.

Inside conf.d create app.conf and copy-paste this code:

server {
    listen 80;
    listen 443 ssl;
    ssl_certificate /etc/ssl/certs/nginx-selfsigned.crt;
    ssl_certificate_key /etc/ssl/private/nginx-selfsigned.key;
    index index.php index.html;
    error_log  /var/log/nginx/error.log;
    access_log /var/log/nginx/access.log;
    root /var/www/public;
    location ~ \.php$ {
        try_files $uri =404;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass application:9000;
        client_body_timeout 3000;
        fastcgi_read_timeout 3000;
        client_max_body_size 32m;
        fastcgi_buffers 8 128k;
        fastcgi_buffer_size 128k;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME 	   $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
    }
    location / {
        try_files $uri $uri/ /index.php?$query_string;
        gzip_static on;
    }
}

I want to access my website via HTTPS. Thus I need to add certificates. You can simply generate them. I am not going to explain in detail how to generate them. But there is a great blog post on Digitalocean - how to create self-signed certificates. Take a look. And generate those certificates in the Nginx/SSL folder.

Run containers

Ok, now we are ready to start our containers. Run this command from the terminal.

docker-compose up -d

You should see something like this:

Symfony set up

Symfony is not installed yet. Now it's time to install the project. Let's connect to our application container via ssh.

docker exec -it application bash

Run this command.

composer create-project symfony/website-skeleton ./project && cp -r ./project/* ./ && rm -rf ./project/

What it does is create a website skeleton. Then it copies the contents to our current folder and removes the project folder. This magic is needed because you only can install the project into an empty folder.

Let's init git repository here:

git init

Don't forget to change /etc/hosts and add your hostname. In my case, it's a 127.0.0.1 tracker.local.com

restart nginx - docker exec nginx nginx -s reload

Now, update the database URL in .env file in the root directory.

DATABASE_URL=mysql://user:password@database:3306/mydatabase?serverVersion=5.7.22

Since I will write frontend in the same project, I need to manage CSS/js files. For this, we need to install the Symfony Encore bundle. It will help manage all the Symfony assets.

Run these commands:

composer require symfony/webpack-encore-bundle

A few more things.

Run yarn install command. And create a first controller. You should run this command from the application container docker exec -it application bash .

./bin/console make:controller FrontendController

Open up your browser, and you will see this page:

Congratulations, your Symfony project is now set up. We can move on.

Let's move to the third part of the tutorial — front-end development. In the next chapter, I will build a simple vue.js application in a Symfony project. I think I will break it into several parts. The first part - login/signup with JWT authentication. I will configure the JWT bundle for this case. The next part would be a CRUD for tracking actions.

Read next - Frontend setup and configuration.

Back to Part 1

Last updated: 14/09/2023

Hello, my dear guest. In this tutorial, I will explain how to build a website with Symfony 6 and some JavaScript. I assume that you have basic Symfony knowledge and you know how to install your project. If not, you can check my tutorial on setting up the Symfony project from scratch.

Motivation

Why did I start writing this tutorial? The motivation behind this is to show how to build a single project from scratch using Symfony and Vue.js. There are a lot of tutorials on how to write to-do apps or something like that. Yet, it does not show how to build something more significant. I want to create something from a simple mockup to the deployed project. This project will be published online, and I will post the source code to GitHub.

Table of contents

I will build this project in parts:

1. In this part, you will see a big-picture, project overview.
2. The second part will be dedicated to project setup and configuration.
3. Essential frontend part built with Vue.js.
4. Backend API configuration and implementation(Symfony 6 and PHP 8).
5. Deployment to Digitalocean/AWS

What da hell is this?

I want to build an app to track all my progress in any area of my life(well, almost). So let's assume that I need to track my progress in the gym. So I need to add my exercises on any day and add weights/time between workouts and comments. So I can compare how I am doing relative to previous days. One more example would be my progress in losing weight. I want to write down calories(just a number). And distribution of fats, proteins, and carbs, my weight(also additional metrics - e.g., waist circumference).

How it should look like

I want to build as simple an interface as possible. I am a big fan of drawing sketches with pen and paper. I strongly suggest envisioning your project on paper before you start coding. Let's see what we got here.

• This is a login and sign-up page. I will use a simple email and password login on a signup page for now. (Possibly add google sign up option)

• Dashboard page - on this page, you can choose the type of your action.

• If you click on Gym activity, you will see the list of exercises.

• When you click on Add new activity, you will be redirected to the details page.

• You can add actions and options(these would be different for each type of action). Also, you will see a list of all activities.
• Later on, I am going to show statistics, but for now, that's it.

Indeed not the best drawing, but think of it as a short sketch.

Technologies

In this project, I will write the backend with Symfony 6 and PHP 8. I will do the frontend part with Vue.js. Also, I will use docker and MYSQL database. And I am going to deploy my code to the Digitalocean server.

Read next - Symfony project configuration.

Updated: 13.07.2023

If you want to automatically fix the code style in Phpstorm using php-cs-fixer, create a configuration file inside your project folder, name it - .php-cs-fixer.dist.php

Then, copy and paste this code:

<?php
$finder = (new PhpCsFixer\Finder())
    ->in(__DIR__)
    ->exclude('var')
;

return (new PhpCsFixer\Config())
    ->setRules([
        '@PER' => true,
        '@Symfony' => true,
// other rules
    ])
    ->setFinder($finder)
;

As you can see, there is a list of rules: @PER, @Symfony, etc. You can add more rules, here you can find a list of rules

Next, in PhpStorm go to: File -> Settings -> Tools -> External Tools

click - Add new

And fill these lines:

• Program: /path-to-php-cs-fixer/bin/php-cs-fixer
• Arguments: --verbose .php-cs-fixer.dist.php fix "$FileDir$/$FileName$"
• Working directory: $ProjectFileDir$

One more thing, you need to add a key binding for a new command. Go to File -> Settings -> Keymap: (Search by the name of your external tool). In my case, it's a csfixer.

If you are using PHP 8.2+ and you see an error like this:

PHP needs to be a minimum version of PHP 7.4.0 and maximum version of PHP 8.1.*.

Do this:
create a new file in ./bin directory of your project name it cs-fixer and copy and paste this code:

#!/usr/bin/env php
<?php

putenv('PHP_CS_FIXER_IGNORE_ENV=1');
include __DIR__ . '/../vendor/bin/php-cs-fixer';

And go to File -> Settings -> Tools -> External Tools , select your external tool, and replace Program to your-project-path/bin/cs-fixer

That's it; now you can use it.

Open any PHP file and use your key binding - it will fix your code according to your configuration.

With CURL you can send a request using the PEM file, but in Java/Kotlin, it's not that easy. You need some magic.

To send a request using CURL you just need to use this option:

CURLOPT_SSLCERT => "path/to/pem/file"

Well, if you want to send a CURL request from Java/Kotlin you can do something like this.

But I want to use HTTP Client to send request. So I need something else.

To send an HTTP request with SSL Certificate in Kotlin, we need to use a Keystore and we need certificates.

To export certificates from your PEM file, you have to run these commands:

# Extract key
openssl pkey -in foo.pem -out foo-key.pem

# Extract all the certs
openssl crl2pkcs7 -nocrl -certfile file.pem |
  openssl pkcs7 -print_certs -out file-certs.pem

Then follow this tutorial to generate a keystore.ks file.

When you have keystore.ks file(and password for this file), you can use it to create an SSL Context and use it in the request.

Here you can find a function that creates an HTTP Client. You can use this Client to send an HTTP request with SSL Certificate.

    fun buildClient(): HttpClient {
        //locate keystore file with password to that file
        val keystore = "path/to/keystore.ks"
        val keystorePass = "password"
        
        val ks = KeyStore.getInstance("pkcs12")
        val kmf = KeyManagerFactory.getInstance("SunX509")
        //create new ssl context
        val sslContext = SSLContext.getInstance("SSL")
        //load your file to keystore
        ks.load(FileInputStream(keystore), keystorePass.toCharArray())
        kmf.init(ks, keystorePass.toCharArray())
		//set global system properties
        System.setProperty("java.protocol.handler.pkgs", "com.sun.net.ssl.internal.www.protocol")
        System.setProperty("javax.net.ssl.keyStoreType", "pkcs12")
        System.setProperty("javax.net.ssl.keyStore", keystore)
        System.setProperty("javax.net.ssl.keyStorePassword", keystorePass)

		//initialize sslContext
        sslContext.init(kmf.keyManagers, getTrustAllCert(), null)

        val client = java.net.http.HttpClient.newBuilder()
                .connectTimeout(Duration.ofSeconds(10))
                .sslContext(sslContext)

                .build()
		//you can send request with your ssl certificate
        return client
    }
    
       private fun getTrustAllCert(): Array<TrustManager> {

        return arrayOf(object : X509TrustManager {
            override fun getAcceptedIssuers(): Array<X509Certificate>? = null
            override fun checkClientTrusted(certs: Array<X509Certificate>, authType: String) {}
            override fun checkServerTrusted(certs: Array<X509Certificate>, authType: String) {}
        })
    }

However, if you don't want to use all these tricks,  you can parse the PEM file directly in your code.

See the example below:

fun buildClient(): HttpClient {
       val trustAllCerts = arrayOf<TrustManager>(object : X509TrustManager {
        override fun getAcceptedIssuers(): Array<X509Certificate>? = null
        override fun checkClientTrusted(certs: Array<X509Certificate>, authType: String) {}
        override fun checkServerTrusted(certs: Array<X509Certificate>, authType: String) {}
    })


    val context = SSLContext.getInstance("TLS")
    val certAndKey = Files.readAllBytes(Paths.get("/path/to/file.pem"))
    
    //get cert and key
    val certBytes = parseDERFromPEM(certAndKey, "-----BEGIN CERTIFICATE-----", "-----END CERTIFICATE-----")
    val keyBytes = parseDERFromPEM(certAndKey, "-----BEGIN PRIVATE KEY-----", "-----END PRIVATE KEY-----")
    val cert = generateCertificateFromDER(certBytes)
    val key = generatePrivateKeyFromDER(keyBytes)
    val keystore = KeyStore.getInstance("JKS")
    
    keystore.load(null)
    keystore.setCertificateEntry("alias", cert)
    keystore.setKeyEntry("alias", key, "password".toCharArray(), arrayOf<Certificate>(cert))
    //save certificate to keyManager
    val kmf = KeyManagerFactory.getInstance("SunX509")
    kmf.init(keystore, "password".toCharArray())
    
    context.init(kmf.keyManagers, trustAllCerts, null)
    
    val client = java.net.http.HttpClient.newBuilder()
            .connectTimeout(Duration.ofSeconds(10))
            .sslContext(context)

            .build()

    return client
   
}


private fun parseDERFromPEM(pem: ByteArray, beginDelimiter: String, endDelimiter: String): ByteArray {
    val data = String(pem)
    var tokens = data.split(beginDelimiter).toTypedArray()
    tokens = tokens[1].split(endDelimiter).toTypedArray()
    
    return DatatypeConverter.parseBase64Binary(tokens[0])
}

@Throws(InvalidKeySpecException::class, NoSuchAlgorithmException::class)
private fun generatePrivateKeyFromDER(keyBytes: ByteArray): RSAPrivateKey {
    val spec = PKCS8EncodedKeySpec(keyBytes)
    val factory = KeyFactory.getInstance("RSA")
    
    return factory.generatePrivate(spec) as RSAPrivateKey
}

@Throws(CertificateException::class)
private fun generateCertificateFromDER(certBytes: ByteArray): X509Certificate {
    val factory = CertificateFactory.getInstance("X.509")

    return factory.generateCertificate(ByteArrayInputStream(certBytes)) as X509Certificate
}

I was a bit shocked that I need to write so many lines of code to achieve this in Kotlin/Java. Although using CURL it is so easy to do.

Last updated: 20/08/2022

Hey there.

In this tutorial, you will learn how to create a basic Symfony application. When you finish this tutorial, you will know how to create a simple CRUD application. And you will get familiar with controllers, templates, entities, routes, and so on.

The source code is available on GitHub.

Requirements

I assume that you have basic knowledge of these things:

1. Basic PHP/MySQL knowledge
2. HTML/CSS knowledge
3. You should know how to use the terminal(console)

And you have installed:

1. PHP 7+
2. MySQL 5.6+ or MariaDB
3. You are using macOS or Linux(Ubuntu, Mint .. whatever)
4. If you are on Windows, you will need a XAMMP or better install Linux on Windows with WSL 2.
5. Text editor - PhpStorm or Visual Studio Code or any other you like.
6. Also, I recommend installing Symfony plugin for PhpStorm or VSCode

Let's start.

Installation

Download the Symfony installer. Go to https://symfony.com/download and download it.

In macOS you can install it with this line:

curl -sS https://get.symfony.com/cli/installer | bash

After installation you should be able to write commands like this one:

symfony help

Symfony CLI application has a lot of built-in features. We will use them a lot.

I am going to build a simple blog, so let's create a new Symfony project.

symfony new --full blog

This command will create a skeleton of the app.

To run our website, we need a web server. There are two most popular web servers for PHP: Apache2 and Nginx. But in this tutorial, I will use a simple built-in PHP webserver.

To run a web server, open up a new terminal window and write the next line in your project directory.

symfony server:start

Or you can use this one:

php -S 127.0.0.1:8000

Now you have a web server up and running.

Open that link in the browser and you should see a welcome page.

First page

To create a page you need to create a route and a controller.
Let's start with the controller.
First, I'll make a home page for my blog to show a list of blog posts.
Create an  MainController.php under  src/Controller folder:

<?php

namespace App\Controller;

class MainController
{

    public function index()
    {
        return 'test';
    }
}

Now you need to create a route(actual path) for this action. We will use Symfony Annotations to add routes.

<?php

namespace App\Controller;

use Symfony\Component\Routing\Annotation\Route;
use Symfony\Component\HttpFoundation\Response;

class MainController
{
    /**
     * @Route("/", name="index")
     */
    public function index()
    {
        return new Response('test');
    }
}

As you can see we added a new annotation directive @Route . It's a special annotation that tells the framework to use index method to process our main route.

Reload your page, you should see the word test in your browser.

Congratulations, you have created your first action.

Database Schema, Entity

Before we move forward, let`s create a database schema for our blog(you can run native SQL queries if you want, but it's not recommended). I will go with something simple. Our blog will have next fields:

1. title
2. short_description
3. body
4. image

I hope that you have the MySQL client installed on your local machine. If not, you can install HeidiSQL or MySQL Workbench or use the native mysql command-line client.

The Symfony framework uses Doctrine ORM to interact with the database. It’s an abstraction layer between the application and the database. I will not go into details here, because it's a big topic, you can read about it here.

If I want to save something to the database, I need to create a specific class called - Entity(PHP object).

So let's create our first entity. To do so, write the next command in your terminal:

php bin/console make:entity

You will see an interactive window. Follow the steps I described below.

1. Name it Blog.
2. Now you need to add properties:
   2.1 title, type string, length 40, nullable - no
   2.2 short_description, type string, length 40, nullable - no
   2.3 body, type text, nullable - no
   2.4 image, type string, length 100, nullable yes

Now you should see two files that were created:

1. src/Entity/Blog.php
2. src/Repository/BlogRepository.php

If you messed up with something, don't worry. You can delete those files and do it again. If you still struggle, check this link. It's a full project, so you can find those files.

Ok great, we have our entity in place, but before we move on we need to create an actual database schema.

Create a new MySQL database:

mysql -u {USER} -p{PASSWORD}

create database blog;

exit;

Replace {USER} with your MySQL user name, and {PASSWORD} with your user password.

Change your .env file(located in the root directory of the project).

DATABASE_URL=mysql://db_user:db_password@127.0.0.1:3306/db_name?serverVersion=5.7

Change db_user to your mysql userand db_password to your database password, db_name to blog

After that, populate the schema by running the next command:

php bin/console doctrine:schema:create

Ok, we have created schema and entity. Now it's time to populate the database with fake data(fake blog information).

For this purpose, there is a Symfony library called - FixtureBundle

Open up a terminal window and run the next command:

composer require --dev orm-fixtures

This command will install the extra library and will create a file App\DataFixtures\AppFixtures

Open that file - src/DataFixtures/AppFixtures.php and let's create a few blog posts.

<?php

namespace App\DataFixtures;

use App\Entity\Blog;
use Doctrine\Bundle\FixturesBundle\Fixture;
use Doctrine\Common\Persistence\ObjectManager;

class AppFixtures extends Fixture
{
    public function load(ObjectManager $manager)
    {
        for ($i = 0; $i < 4; ++$i) {
            $blog = new Blog();
            $blog->setTitle('Lorem ipsum');
            $blog->setBody('Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
              Proin sodales, arcu non commodo vulputate, neque lectus luctus metus, 
              ac hendrerit mi erat eu ante. Nullam blandit arcu erat,
              vitae pretium neque suscipit vitae. 
              Pellentesque sit amet lacus in metus placerat posuere. Aliquam hendrerit risus elit, non commodo nulla cursus id. 
              Vivamus tristique felis leo, vitae laoreet sapien eleifend vitae. Etiam varius sollicitudin tincidunt');
            $blog->setShortDescription('Lorem ipsum description');
        }

        $manager->flush();
    }
}

As you can see, we created four blog posts. ObjectManager is a main public interface.

In the example above we used persist and flush methods. Persist tells ObjectManager that we want to save our object to a database table.
And flush saves changes into a database(MySQL in our case).

To generate fixtures, simply run this command from the console:

php bin/console doctrine:fixtures:load

Cool, now let's create a base view with a list of our blogs.

Index action extended

Symfony uses a template engine called Twig.

I strongly recommend reading more about twig in the documentation.

To display an HTML page from a controller you need to create a template.

There is a base.html.twig file that you can use as a base template.

Go to the root directory of the project and find a template folder. Create a new file called list.html.twig and copy/paste the next code.

{% extends 'base.html.twig' %}

{% block body %}
<h1>Blogs</h1>
{% endblock %}

This line means that we extend a base twig template and I overwrote a body block with a Blogs heading.

So let's change our controller's index action. Go to your MainController and extend it:

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\Routing\Annotation\Route;
use Symfony\Component\HttpFoundation\Response;

class MainController extends AbstractController

We need to extend AbstractController because we want to use additional methods from that controller.

Now, modify your index function:

return $this->render('list.html.twig');

Reload your page:

Before moving on to the next section and actually displaying all blogs. Let's add bootstrap CSS to our code. Add this code to the <head> section of base.html.twig file.

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Blog List

It's time to show the list of blogs on your index page.

To do so we need to fetch these blogs from the database. So, we need to inject a BlogRepository into our method.

    /**
     * @Route("/")
     *
     * @param BlogRepository $blogRepository
     *
     * @return Response
     */
    public function index(BlogRepository $blogRepository)
    {
        return $this->render('list.html.twig');
    }

What is BlogRepository?  This is a special Doctrine ORM class. If you want to write database queries, this is where you should do it.

In order to fetch all the blogs that we have, use a fetchAll method. Let's modify our index action.

    public function index(BlogRepository $blogRepository)
    {
        return $this->render('list.html.twig', ['blogs' => $blogRepository->findAll()]);
    }

And change list.html.twig file, add this line under h1 tag:

{{ dump(blogs) }}

This command is useful when you want to dump data into a readable format to debug it. If you run it, you will see something like this:

Let's bring it to a normal view. I will create a table to display a blog list.

{% extends 'base.html.twig' %}
{% block stylesheets %}
    <style>
        .align-center {
            margin: 0 auto;
        }
    </style>
{% endblock %}
{% block body %}
    <div class="row">
        <div class="col-lg-8 align-center">
            <h1>Blogs</h1>
            <table class="table table-striped ">
                <thead class="thead-dark">

                <tr>
                    <th>Title</th>
                    <th>Short description</th>
                    <th>Actions</th>
                </tr>
                </thead>
                <tbody>
                {% for blog in blogs %}
                    <tr>
                        <td>{{ blog.title }}</td>
                        <td>{{ blog.shortDescription }}</td>
                        <td>
                            <button class="btn btn-primary">Edit</button>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>

        </div>
    </div>


{% endblock %}

As you can see I used a FOR loop and displayed titles and short descriptions.

You can reload your page and you should see the list of blogs with edit action shown in the image below.

Try to add an extra button, DELETE action for each blog post.

Ok, we have a list of blogs in place, now we need a way to create a single blog post.

Create action

To create a new blog, we need to create a new action in our controller. Let's name it createBlog.

 use Symfony\Component\HttpFoundation\Request;
 
 ........
 
    /**
     * @param Request $request
     *
     * @return Response
     */
    public function createBlog(Request $request)
    {
        
        return $this->render('create.html.twig');
    }

Create a new template create.html.twig

{% extends 'base.html.twig' %}

{% block body %}
<div class="row">
    <div class="col-lg-8 align-center">
        <h1>Create Blog</h1>

    </div>
</div>
{% block %}

To create a form in Symfony you need to create a FormType. Symfony has powerful Form features. You don't have to worry about things like validation, form field rendering, and more. I recommend reading official documentation and getting familiar with forms.

So let's create our form type. Create a file called BlogFormType.php inside ./src/Form/Type folder:

<?php

namespace App\Form\Type;

use App\Entity\Blog;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\FileType;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;

class BlogFormType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder->add('title', TextType::class, ['attr' => ['class' => 'form-control']]);
        $builder->add('shortDescription', TextType::class, ['attr' => ['class' => 'form-control']]);
        $builder->add('body', TextType::class, ['attr' => ['class' => 'form-control']]);
        $builder->add('imageFile', FileType::class, [
            'attr'     => ['class' => 'form-control',],
            'mapped' => false,
        ]);
    }

    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults(
            [
                'data_class' => Blog::class,
            ]
        );
    }
}

buildForm - method is used to describe form fields, and form types. We added one unmapped field, which means that we do not save this imageFile in the database, instead, we gonna save imageName .

We set a Blog class as a data class of our form. Thus, Symfony will know that it works with a Blog entity.

Now, let's render it, update the code in create.html.twig file:

    <div class="row">
        <div class="col-lg-8 align-center">
            <h1>Create Blog</h1>
            {{ form_start(form) }}

            {{ form_rest(form) }}
            <input type="submit" class="btn btn-primary"/>
        
            {{ form_end(form) }}
        </div>
    </div>

and createBlog action inside MainController.php:

    /**
     * @Route("/create")
     *
     * @param Request $request
     *
     * @return Response
     */
    public function createBlog(Request $request)
    {
        $form = $this->createForm(BlogFormType::class, new Blog());

        return $this->render('create.html.twig', [
            'form' => $form->createView()
        ]);
    }

As you can see, we created a form. We passed a new Blog entity object to this form, created a form view, and passed it to our twig template.

Reload your page, you should see your form:

Let's update our form style. If you want to know how to customize forms and how to render them consider reading this documentation.

Update create.html.twig file.

        <div class="col-lg-8 align-center">
            <h1>Create new blog entry.</h1>

            {{ form_start(form) }}

            <div class="form-group">
                {{ form_widget(form.title) }}
            </div>
            <div class="form-group">
                {{ form_widget(form.shortDescription) }}
            </div>
            <div class="form-group">
                {{ form_widget(form.imageFile) }}
            </div>
            <div class="form-group">
                {{ form_widget(form.body) }}
            </div>

            <input type="submit" class="btn btn-primary"/>

            {{ form_end(form) }}
        </div>

Now it looks much prettier. Let's update our create action method to process our form submission:

        $form->handleRequest($request);
        if ($form->isSubmitted() && $form->isValid()) {
            $blog = $form->getData();
            $entityManager->persist($blog);
            $entityManager->flush();
            $this->addFlash('success', 'Blog was created!');
        }

And add this code to create.html.twig under <h1> tag:

            {% for label, messages in app.flashes %}
                {% for message in messages %}
                    <div class="flash-{{ label }}">
                        {{ message }}
                    </div>
                {% endfor %}
            {% endfor %}

So what have we done? In our controller, we added form validation and persisted our Blog post into a database.
In our template, we displayed a success message.

At this point, you can try to create a blog.

But what about the image? Yes, right we need to save the image somewhere on our computer. Let's update createBlog action.

        if ($form->isSubmitted() && $form->isValid()) {
            $blog = $form->getData();
            $imageFile = $form->get('image')->getData();
            if ($imageFile) {
                $originalFilename = pathinfo($imageFile->getClientOriginalName(), PATHINFO_FILENAME);
                $safeFilename = $slugger->slug($originalFilename);
                $newFilename = $safeFilename.'-'.uniqid().'.'.$imageFile->guessExtension();

                try {
                    $imageFile->move(
                        $this->getParameter('image_directory'),
                        $newFilename
                    );
                } catch (FileException $e) {
                    $this->addFlash('error', 'Image cannot be saved.');
                }
                $blog->setImage($newFilename);
            }

            $entityManager->persist($blog);
            $entityManager->flush();
            $this->addFlash('success', 'Blog was created!');
        }

We have added image processing. We check if the image exists in the request. If so, we change its name and move it to the image_directory and then save the image filename.

I forgot to mention that you have to add image_directory parameter in

/config/services.yaml under parameters section:

parameters:
    image_directory: '%kernel.project_dir%/public'

Try it out, you should be able to upload the image. You should see a newly created image under the public directory.

Validation

Before we move on to edit action, we need to add validation to our form.

Why?

Ask yourself these questions:

• What if a user will upload a 100 megabytes pdf file?
• What if I inject HTML code into a title?

We have to handle such cases. For this purpose, Symfony has in-built Validation Constraints. I will show you how to use them.

We can add validation constraints with annotations. Let's edit our /Entity/Blog.php class.

use Symfony\Component\Validator\Constraints as Assert;

.......

    /**
     * @ORM\Column(type="string", length=40)
     * @Assert\NotBlank(message="Title cannot be empty.")
     * @Assert\Length(max=40)
     */
    private $title;

    /**
     * @ORM\Column(type="string", length=40)
     * @Assert\NotBlank()
     * @Assert\Length(max=40)
     */
    private $short_description;

    /**
     * @ORM\Column(type="text")
     * @Assert\NotBlank()
     */
    private $body;

    /**
     * @ORM\Column(type="string", length=100, nullable=true)
     * @Assert\Image()
     */
    private $image;

We added assertations here. Our fields cannot be blank, and we asserted that the image should be an actual image. There are many more options for Image validation, but this is out of the scope of this tutorial. You can read about the options and try them here.

Now you can try to create a blog. And try to upload some files (not images), you should see the error.

Improvements

So far, we created a list and createBlog actions. We need to add one more thing. We need a create button on this page. Find a list.html.twig file and copy-paste this code(at the bottom of the body block):

    <div class="row">
        <div class="col-lg-8  align-center">
            <a href="{{ path('app_main_createblog') }}" class="btn btn-primary">Create blog</a>
        </div>
    </div>

Path - is a special function, that you can use in a twig to generate routes. To find a route, use this command:

php /bin/console debug:route

It will show every route you have in your project and its name. I recommend installing Symfony plugin in your IDE of choice. I use PHPStorm, but if you are using VisualStudioCode or something else, search for the Symfony plugin. With a plugin, you don’t need to debug the route. Route autocomplete will be available for you.

You can add a name to your route explicitly, like this(in this case you don't have to debug routes - recommended):

@Route("/", name="app_index")

Lastly, I want to redirect the user to the list page after creating the blog. Change this line in createBlog action.

            $this->addFlash('success', 'Blog was created!');

            return $this->redirectToRoute('app_main_index');

And update list.html.twig, insert this code under <h1> tag:

            {% for label, messages in app.flashes %}
                {% for message in messages %}
                    <div class="flash-{{ label }}">
                        {{ message }}
                    </div>
                {% endfor %}
            {% endfor %}

Ok, we're good.

Edit action

Edit blog is pretty similar to create action. We need to fetch the blog by id and populate the form with existing data from the database.

Create a new method in the controller called editBlog

    /**
     * @Route("/edit/{id}")
     *
     * @ParamConverter("blog", class="App:Blog")
     *
     * @return Response
     */
    public function editBlog(Blog $blog, Request $request, EntityManagerInterface $entityManager, SluggerInterface $slugger)
    {
        $blog->setImage(new File(sprintf('%s/%s', $this->getParameter('image_directory'), $blog->getImage())));
        $form = $this->createForm(BlogFormType::class, $blog);

        $form->handleRequest($request);
        if ($form->isSubmitted() && $form->isValid()) {
            $blog      = $form->getData();
            $imageFile = $form->get('imageFile')->getData();
            if ($imageFile) {
                $originalFilename = pathinfo($imageFile->getClientOriginalName(), PATHINFO_FILENAME);

                $safeFilename = $slugger->slug($originalFilename);
                $newFilename  = $safeFilename.'-'.uniqid().'.'.$imageFile->guessExtension();

                try {
                    $imageFile->move(
                            $this->getParameter('image_directory'),
                            $newFilename
                        );
                } catch (FileException $e) {
                    $this->addFlash('error', 'Image cannot be saved.');
                }
                $blog->setImage($newFilename);
            }

            $entityManager->persist($blog);
            $entityManager->flush();
            $this->addFlash('success', 'Blog was edited!');
        }

        return $this->render('create.html.twig', [
            'form' => $form->createView(),
        ]);
    }

As you can see this method is almost the same as createAction.

     * @Route("/edit/{id}")
     *
     * @ParamConverter("blog", class="App:Blog")

{id} is a wildcard, it's a blog id, @ParamConverter annotation converts id into an Object, in our case, it's a Blog. Basically you can do it on your own using the repository method - find.

Additionally, we need to update our BlogFormType to avoid file processing(in case there is no file present). Add a required => false here:

        $builder->add('imageFile', FileType::class, [
            'attr'     => ['class' => 'form-control',],
            'mapped' => false,
            'required' => false
        ]);

And one finishing touch, change edit button URL to existing edit action. You have to update list.html.twig file:

<td>
    <a href="{{ path('app_main_editblog', {id: blog.id}) }}" class="btn btn-primary">Edit</a>
</td>

Try it out, you should be able to click on the edit button and it will redirect you to the edit form.

Let's move on and build a delete action.

Delete blog

We need to add one more action to our MainController:

    /**
     * @Route("/delete/{id}", name="app_blog_delete")
     *
     * @param Blog                   $blog
     * @param EntityManagerInterface $em
     *
     * @return RedirectResponse
     */
    public function deleteBlog(Blog $blog, EntityManagerInterface $em): RedirectResponse
    {
        $em->remove($blog);
        $em->flush();
        $this->addFlash('success', 'Blog was edited!');

        return $this->redirectToRoute('app_main_index');
    }

It's pretty simple, we remove the blog with entityManager and then we add a success message and redirect the user to the main page.

If you have not added the delete button yet, let's do it now. Go to list.html.twig and add the delete button, under the edit button.

<a href="{{ path('app_blog_delete', {id: blog.id}) }}" onclick="return confirm('Are you sure?');" class="btn btn-danger">DELETE</a>

That's it.

Conclusion

In this tutorial, you have learned how to create a simple CRUD application. From this point, I suggest learning more about doctrine, and Symfony forms.

If you want to see the full project, you can find it here on GitHub.

Thank you.

Update

If you are interested, I wrote a new Symfony advanced tutorial, check it out.

Bored with your main project or a job? Sick of people telling you what to do? Feel empty or stuck in your career? Great, these are the reasons why you should work on a side project.

Side project - is a great way to start a business. If you always wanted to start something new, this is a great time to do it now. In the era of the internet, we have tremendous opportunities no matter where you live. Software developers have an advantage, you can code. You could make something that people want, and as a reward, you will get money and the freedom to work on your own terms. Although, you can start a side project even if you don't want to build a business. Do it to learn something new and gain experience.

Ask yourself these questions:

• Do I want to learn something new?
• Does it help me in my career or future opportunities?
• Can I make money on it?

When you decide what you want to get out of this project, you can move on and think about what can you do.

Side project ideas:

1. Online course.

If you are an experienced developer, you already have a lot of knowledge on a subject so that you can make a small online course about your favorite framework or language. Although it can be something new, interesting for you. You can either sell a course on platforms like Udemy or your website(blog). Using platforms has its advantage -  you don't have to have an audience, they do it for you(bring audience). However, if you already have a blog and an audience, it would be better to sell it on your website.

2. Time tracker.

Time trackers are being used more and more, because more and more people are starting to work remotely, and the trends of digital nomads are growing. Working on such a project, you will learn how to track and record processes on a computer, how to track the time spent on specific applications. Create an application for Mac, PC or Linux. This project can be distributed as freemium, so you can add some extra features to get paid.

3. Web scraper.

This type of project is my favorite. By scraping, you can get a lot of potentially interesting data. For example: jump over e-commerce competitors to compare prices and be ahead of them. There are a lot of frameworks and libraries to scrape a website. There are two things you can do here.

 1. Build your own scraper if you want to learn something new.

 2. Take some existing framework and learn how to scrape data for your needs. For example, I like to check projects on a Producthunt, so I can build a scraper to send me the weekly email update of the top 10 products. And then parse scraped data to see what product categories are most popular.

4. Chatbot.

Chatbots are so popular nowadays; there are plenty of platforms on top of each you can build a chatbot. You can create a Telegram bot that will ask general user questions and answer with predefined phrases. Or create something more sophisticated with NLP libraries.

5. Personal finance calculator.

Pick a new programming language or a framework you always wanted to learn and build a simple finance calculator to track your expenses.

6. Fitness tracker app.

If you are a gym addict as I am, you may know that keeping track of  your weight is difficult, especially if you keep all your information in your head. Instead, you can create a fitness tracker app using a modern frameworks such as Flutter or React Native, or others at your discretion.

7. Calorie tracker app.

Like a fitness tracker, this app will allow you to count calories. You can even combine the Fitness tracker app and calorie tracker into one great app. I hate counting calories. If you have ever tried to count calories by yourself, you know how difficult it is.

8. Domain name generator and domain name checker.

It’s hard to come up with a great domain name, why not help people create unusual names for their companies. To do this, you will need something more than a simple word generator. You need to think about the different aspects of word generation. In addition to this name generator, you can add another function - domain name-checking.

9. Instagram/Facebook schedule application.

Managing Instagram accounts with a huge number of subscribers is difficult; especially if you need to post regularly. But what if you need to post in the middle of the night? Well, you can wake up and do it. However, you can do this with your application. There are plenty of such applications on the internet. But most of them are complex and has a lot of features. So instead, create something simple to solve one problem. A scheduled message.

10. A simple game for kids(iOs/Android/Web).

Kids love simple games like puzzles, racing, and others. You can build a pretty simple game using Unity. If you don't want to develop an app, you can create a web version, using javascript.

11. Freelance monitor tool.

I did a lot of freelancing. And honestly, it is difficult to track all the freelance marketplaces. Especially if you need to track some specific jobs. You can create monitoring tools to track new jobs by phrases or tags and send the results by email to the client. You can monetize such service, there are millions of freelancers out there, and the number of digital nomads is increasing every year.

12. Image auto-tagging platform.

Machine learning and deep learning are now in trends, so I suggest building something in this area if you are already familiar with the principles of ML/DL. Image auto-tagging is a platform where I, as a user, can upload an image and get image tags as output. You can build an API for such a service or create a simple Instagram tag generation application.

13. Brand tracker.

Brands want to be able to respond to specific messages as quickly as possible and know what customers are saying about their product. I want to be able to track what people are saying about me(or my brand) on the internet and want to see it in some structured way. This project is both exciting and technically challenging to implement. You need to track many sources, scrape google and other places to find specific words or keywords.

14. Simple Kanban board.

Pick a new framework or language and create a Kanban board similar to Trello. I suggest making such tools if you are learning a new programming language or framework.

15. Utility for MacOs/Windows/Linux.

Create a simple widget or application for your favorite operating system.

When I search for something in macOS Finder, it searches around the entire disk. I want to perform a search in my current folder, so I would like to create a widget to search the folder in macOS Finder.

Think about something bothering you, some pain, or something you did not like and fix it. No need to build something massive, start with simple things.

16. Wordpress plugin.

Wordpress - the most popular content management system on the web; there are thousands of plugins created by various developers. How to find what to build? Check Wordpress marketplace and find plugins with a large number of downloads, but with bad ratings. Read the comments and find pain points. Then fix it with your new modern library.

17. Shopify plugin.

On the other hand, you can build a Shopify plugin. Shopify, it's an e-commerce platform. To create a plugin, you need to know some basic node.js and next.js. Although you can learn it by completing the tutorial(I strongly recommend it). To find inspiration and ideas, you can visit the Shopify marketplace.

18. Slack app.

Slack is a collaboration platform for teams. There are a huge number of apps available on slack, it is something you can monetize because many companies use slack. Here are some ideas for you:

• SCRUM plan poker game
• Daily log from Trello/Jira (get a list of the things you did yesterday, and publish it as a summary in the morning).

19. Site blocker application.

A simple tool that allows you to block any website for a certain amount of time. This will help you to stay more productive throughout the day, and do more work.

20. SDK library.

I have been working with the Telegram API for a long time. But due to the lack of functionality in this library, I decided to create my own with much more functions and support of my favorite framework.

Open source is a great way to help other people and share your knowledge. You don't have to start writing your own library. Instead, you can contribute to existing projects.

If you like this article, please share it on twitter or facebook.
Thanks.