Começando com Slim (PHP) - Tutorial ensinando o essencial

[ghost]

Se você precisa utilizar o Slim em algum projeto, e precisa de um tutorial alternativo ao texto da documentação oficial, então está lendo o artigo ideal para você neste momento.

Publicado originalmente em: Começando com Slim (PHP) - Tutorial ensinando o essencial

No final deste artigo você será capaz de utilizar o essencial do Slim e terá conhecimento suficiente para avançar na documentação deste micro-framework confortavelmente.

Você perceberá no decorrer deste tutorial, caso leia os códigos com atenção, que a documentação do Slim apresenta códigos com falhas conforme comento no artigo 3 dicas para escrever uma documentação melhor, e que os códigos apresentados neste tutorial já estão com estas falhas corrigidas.

Além disto, os códigos deste tutorial funcionam tanto no Linux quanto no Windows, outro diferencial em relação aos códigos da documentação oficial do Slim. E caso você utilize este tutorial como referência, ao lado da documentação oficial, poderá ter fluência neste micro-framework rapidamente.

E antes de iniciarmos o tutorial gostaria de ressaltar que o formato deste tutorial está inspirado no artigo Getting Started with React - An Overview and Walkthrough Tutorial. A inspiração neste tutorial ocorre porque o meu maior enfoque profissional, atualmente, é em Javascript e tecnologias conexas.

Pré-requisitos

• Noções sobre HTML, CSS, e Javascript.
  

• Noções sobre API.
  

• Noções sobre PHP ou sobre ExpressJS.
  

• Noções sobre Composer ou NPM.
  

Objetivos

• Aprendermos sobre os conceitos essenciais do Slim.
  

• Desenvolvermos um site simples utilizando o Slim (versão 3) para gerenciar rotas, e o conteúdo do site.
  

O que é o Slim?

O Slim é um micro-framework semelhante ao ExpressJS que consegue gerenciar rotas conforme os métodos HTTP (GET, POST, DELETE, PUT, ...), middlewares, requests e responses.

Sendo uma boa opção para o desenvolvimento rápido de APIs, pequenos aplicativos ou websites.
Configuração e Instalação do Composer e do Slim

Iremos instalar e configurar o Composer e o Slim, e iniciarmos o projeto.

Composer

O Composer é um gerenciador de dependências enfocado no PHP, e funciona de forma semelhante ao NPM com NodeJS. No Composer ao invés do package.json temos o composer.json, e ao invés de node_modules temos a pasta vendor.

Iremos instalar o Composer localmente (no diretório do nosso projeto), mas você pode instalar ele globalmente e utilizar em qualquer diretório do seu ambiente.

Use o Terminal ou o PowerShell para acessar a pasta em que desenvolverá o projeto e execute os seguintes comandos para instalar o Composer localmente:

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"

php -r "if (hash_file('sha384', 'composer-setup.php') === 'e0012edf3e80b6978849f5eff0d4b4e4c79ff1609dd1e613307e16318854d24ae64f26d17af3ef0bf7cfb710ca74755a') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"

php composer-setup.php

php -r "unlink('composer-setup.php');"

A pasta do projeto antes de executar os comandos:

-TutorialSlim/

A pasta do projeto após executar todos os comandos:

--TutorialSlim/
---composer.phar

Instalando o Slim via Composer

Agora utilizaremos o Composer para instalar o Slim na versão 3 na pasta do projeto.

Execute o seguinte comando para fazer a instalação do Slim:

php composer.phar require slim/slim:3.*

Veja a pasta do projeto após a execução do comando:

--TutorialSlim/
---composer.phar
---composer.json
---composer.lock
---Vendor/
------autoload.php
------Slim/
------PSR/
------Composer/
------Pimple/
------Nikic/

Rotas

Agora iremos configurar a nossa primeira rota do website que corresponderá à index.

Para isto precisamos criar uma pasta em que colocaremos os arquivos públicos do servidor, o que incluí os arquivos estáticos do nosso website (public assets). E dentro desta pasta criaremos o arquivo index.php e o arquivo .htaccess. Chamaremos esta pasta de public.

No arquivo .htaccess iremos colar o seguinte texto:

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule . index.php [L]

No arquivo index.php iremos colar o seguinte texto:

<?php
use \Psr\Http\Message\ServerRequestInterface as Request;
use \Psr\Http\Message\ResponseInterface as Response;


require __DIR__ . '/../vendor/autoload.php';


$app = new \Slim\App;

$app->get('/hello/{name}', function (Request $request, Response $response, array $args) {
    
    $name = $args['name'];
    $response->getBody()->write("Hello, $name");


    return $response;

});
$app->run();

A pasta do nosso projeto atualmente está assim:

--TutorialSlim/
---composer.phar
---composer.json
---composer.lock
---Public/
------index.php
------.htaccess
---Vendor/
------autoload.php
------Slim/
------PSR/
------Composer/
------Pimple/
------Nikic/

Disponibilizando o website no localhost

No Terminal acesse a pasta public e execute o comando:

php -S localhost:8080

Agora, no seu browser, acesse localhost:8080 e você verá uma mensagem de Page Not Found, agora acesse localhost:8080/hello/World e a sua página deve estar funcionando e exibindo o texto "Hello World".

Pronto, instalamos o Slim e o Composer! Estamos prontos para desenvolver a rota da nossa rota index.

Para isto cole o seguinte código no seu arquivo index.php:

$app->get('/', function (Request $request, Response $response, array $args) {


    $response->
    getBody()->
    write("Our index page! (Home page)");

) !");


    return $response;
});

O código do arquivo index.php ficará assim:

<?php
use \Psr\Http\Message\ServerRequestInterface as Request;
use \Psr\Http\Message\ResponseInterface as Response;


require __DIR__ . '/../vendor/autoload.php';


$app = new \Slim\App;


$app->get('/', function (Request $request, Response $response, array $args) {


    $response->
    getBody()->
    write("Our index page! (Home page)");


    return $response;
});


$app->get('/hello/{name}', function (Request $request, Response $response, array $args) {
    $name = $args['name'];
    $response->getBody()->write("Hello, $name");


    return $response;
});

$app->run();

Acesse localhost:8080 e veja a página funcionando!

Twig-view e Templates

Vamos instalar o Twig no nosso projeto via Composer para facilitar a geração dinâmica do conteúdo das nossas páginas.

Na pasta TutorialSlim execute o comando a seguir:

php composer.phar require slim/twig-view:2.*

Após a instalação do Twig-view vamos registrá-lo no Slim. O primeiro passo para fazer isto é criar a pasta em que os templates estarão salvos, para isto vamos criar uma pasta chamada templates.

A pasta do projeto deve estar assim após a criação da pasta templates:

--TutorialSlim/
---composer.phar
---composer.json
---composer.lock
---Public/
------index.php
------.htaccess
---Templates/
---Vendor/
------autoload.php
------Slim/
------PSR/
------Composer/
------Pimple/
------Nikic/

Agora vamos criar um template dentro da nossa pasta templates, iremos nomear o arquivo deste template como: ContactForm.twig .

Agora a pasta do projeto deve estar assim:

--TutorialSlim/
---composer.phar
---composer.json
---composer.lock
---Public/
------index.php
------.htaccess
---Templates/
------ContactForm.twig
---Vendor/
------autoload.php
------Slim/
------PSR/
------Composer/
------Pimple/
------Nikic/

No arquivo ContactForm.twig escreva o seguinte código HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Contact Form</title>
</head>



<body>




<form method="POST" action="/result">



<p>
    <label for="name">Name:</label>
    <input type="text" name="name" id="name" />
</p>



<p>
    <label for="email">Email:</label>
    <input type="email" name="email" id="email" />
</p>



<p>
    <label for="message">Message:</label>
    <textarea id="message" name="message"></textarea>
</p>



<button type="submit">Send Message</button>



</form>




</body>



</html>

Agora, de volta ao arquivo index.php enfim registraremos o Twig para ser utilizado pelo Slim.

Cole o seguinte código no arquivo index.php (após a linha em que a variável $app é declarada e antes da declaração da primeira rota):

$container = $app->getContainer();


$container['view'] = function ($container) {
 
   $view = new \Slim\Views\Twig(__DIR__ . '/../templates', [
        'cache' => false
    ]);


    // Instantiate and add Slim specific extension

    $router = $container->get('router');

    $uri = \Slim\Http\Uri::createFromEnvironment(new \Slim\Http\Environment($_SERVER));

    $view->addExtension(new \Slim\Views\TwigExtension($router, $uri));


    return $view;

};

E substitua a declaração da rota da primeira rota pelo código abaixo:

$app->get('/', function (Request $request, Response $response, array $args) {

    return $this->view->render($response, 'ContactForm.twig',[]);


});

Agora acesse localhost:8080 e veja o Twig e o Slim funcionando juntos!
Recebendo o POST do nosso formulário

Agora iremos criar a nossa primeira rota post para receber os dados do nosso formulário e apresentá-los em um template.

Insira o seguinte código no arquivo index.php:

$app->post('/result', function (Request $request, Response $response, array $args) {


    return $this->view->render($response, 'ContactTable.twig',['data'=>$request->getParsedBody()]);



});

Crie um arquivo chamado ContactTable.twig na pasta templates com o seguinte código:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Contact Result</title>
</head>



<body>




<table>
    <thead>
        <tr>
            <td>Name:</td>
            <td>Email</td>
            <td>Message:</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>{{data.name}}</td>
            <td>{{data.email}}</td>
            <td>{{data.message}}</td>
        </tr>
    </tbody>
</table>


<br /><br />


<img src="cat.jpg" />



</body>



</html>

Adicione uma imagem na pasta public, no formato jpg, e com o nome cat (cat.jpg).

Preencha e envie o formulário da nossa index e veja o resultado.

Conclusão

Caso este tutorial tenha ajudado a sua trajetória com Slim ou como profissional então aguardo o seu feedback, tanto para incentivar a produção de mais artigos quanto para a melhoria dos códigos.

Gostaria também de acrescentar que você pode consultar o projeto completo no repositório: https://github.com/mateuscorreademesquita/TutorialSlim

Caso você tenha dúvidas sobre o Slim, e eu possa ajudar, ficarei feliz em ajudar, basta comentar a dúvida.