Slim Framework
Slim Framework
Slim Framework
Daniel Schmitz
Esse livro está à venda em http://leanpub.com/livro-slim
This is a Leanpub book. Leanpub empowers authors and publishers with the Lean Publishing
process. Lean Publishing is the act of publishing an in-progress ebook using lightweight tools and
many iterations to get reader feedback, pivot until you have the right book and build traction once
you do.
Capítulo 1 - Introdução . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Código fonte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
O que é Slim Framework? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Conhecendo um pouco o RESTfull . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Tecnologias empregadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Capítulo 2 - Instalação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Apache no Linux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Instalando o PHP no Linux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Instalando o MySql no Linux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
MySql Workbench para linux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Instalando o Composer no linux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Testando o Slim no Linux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Instalando o Apache/php/MySql no Windows . . . . . . . . . . . . . . . . . . . . . . . . . 12
Instalando o MySql Workbench no Windows . . . . . . . . . . . . . . . . . . . . . . . . . 13
Instalando o Composer no Windows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Testando o Slim no Windows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Postman . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Código fonte
Todo o código fonte utilizado nesta obra está no github¹. Fique a vontade em consultar o código
mas lembre-se que apenas copiar/colar não vai lhe ajudar no aprendizado. Digite você mesmo o seu
código para ter a exata noção do que está escrevendo. Somente assim você aprenderá de verdade o
que esta obra tem a lhe ensinar.
A figura a seguir ilustra exatamente o porquê do RESTful existir. Com ela (e com o slim), provemos
um serviço de dados para qualquer tipo de aplicação, seja ela web, desktop ou mobile.
Nesta imagem, temos o ciclo completo de uma aplicação RESTful. Em ‘1’, temos o cliente realizando
uma requisição HTTP ao servidor. Todo ciclo começa desta forma, com o cliente requisitando algo.
Isso é realizado através de uma requisição http ‘normal’, da mesma forma que um site requisita
informações a um host.
Quando o servidor recebe essa requisição, ele a processa e identifica qual api deve chamar e executar.
Nesse ponto, o cliente não mais sabe o que está sendo processado, ele apenas esta aguardando
a resposta do servidor. Após o processamento, o servidor responde ao cliente em um formato
conhecido, como o json. Então, o que temos aqui é o cliente realizando uma consulta ao servidor em
um formato conhecido (http) e o servidor respondendo em json.
Desta forma, conseguimos garantir uma importância muito significativa entre servidor e cliente.
Ambos não se conhecem, mas sabem se comunicar entre si. Assim, tanto faz o cliente ser um
navegador web ou um dispositivo mobile. Ou tanto faz o servidor ser PHP ou Java, pois a forma
de conversa entre elas é a mesma.
Tecnologias empregadas
Nesta obra abordaremos diversas tecnologias que são necessárias para que o Slim Framework
funcione perfeitamente.
Capítulo 1 - Introdução 3
Apache no Linux
Utilizando a distribuição Ubuntu, na versão 14.04, iremos instalar o Apache através do gerenciador
de pacotes apt-get, muito conhecido nesta distribuição. Para que possamos instalar o apache, abra
um console (ou terminal, chame como quiser) e digite o seguinte comando:
Este comando irá instalar o Apache no seu sistema, e é fundamental que você conheça um pouco de
Linux para seguir em frente. Após a instalação, o servidor estará funcionando e você poderá testar o
apache ao apontar o seu navegador para o endereço http://localhost, tendo a seguinte resposta:
Contas no Linux
Você que usa o Linux no dia a dia sabe que existe uma conta de usuário no sistema, e você trabalha
em seus projetos nessa conta. Nesta obra estaremos repetindo esse processo, ou seja, utilizaremos
a conta linux que está localizada no diretório /home para fornecer informações sobre configuração
e acesso.
No nosso caso em específico, estaremos utilizando o caminho /home/user, mas lembre-se de trocar
esse caminho para o nome da sua conta.
.
No Apache temos uma configuração chamada HomeDir. Ela funciona da seguinte forma: ao acessar
http://localhost/∼user o apache irá apontar para /home/user/public_html. Desta forma, esta-
remos criando código HTML/PHP dentro do diretório pessoal da conta e não no diretório do sistema
/var/www. Para habilitar esta configuração, deve-se realizar os seguintes procedimentos:
1 $ cd /etc/apache2/mods-enabled
2 $ sudo ln -s ../mods-available/userdir.conf userdir.conf
3 $ sudo ln -s ../mods-available/userdir.load userdir.load
4 $ sudo /etc/init.d/apache2 restart
Após executar estes comandos, e reiniciar o Apache, crie um diretório chamado public_html na sua
conta (em /home/user/) e crie uma página index.html com um simples Hello World nela. Aponte
o seu navegador para http://localhost/∼user e veja a página entrar em ação.
Para terminar de configurar o Apache, precisamos habilitar um recurso chamado Rewrite que
será muito importante no Slim Framework. Basicamente, o Rewrite permite que urls como
www.site.com/user/1 sejam convertidas em algo como www.site.com/index.php?item1=user&item2=1.
Ou seja, ele faz uma reescrita da URL (daí o nome Rewrite). Configurar este recurso é muito fácil,
bastando apenas executar os seguintes comandos:
Isso fará com que o módulo do php5 seja instalado no apache, além de instalar o php5 no sistema.
É necessário realizar uma configuração extra no Apache para que o php funcione no diretório
public_html, que consiste em editar o arquivo /etc/apache2/mods-available/php5.conf através
do seguinte comando:
Neste caso, gedit é um editor de textos simples para o ubuntu. No arquivo que abre, deve-se
encontrar a linha php_admin_flag engine Off e comentá-la, deixando o código da seguinte forma:
Esta linha não permite que scripts php sejam executadas em diretórios do usuário, o que melhora a
segurança do server. Mas como queremos juntamente o contrário, pois estaremos em um ambiente
de testes, devemos comentá-la para permitir executar scripts php no nosso public_html.
Durante a instalação, surgirá uma tela requisitando uma senha para o administrador do banco,
o usuário root. Deixe-a em branco, pois estamos criando um banco de testes somente. Após a
instalação do MySql, podemos testá-lo através do seguinte comando:
Capítulo 2 - Instalação 7
1 $ mysql -u root
Após digitar este comando, você irá logar no console do mysql e digitar comandos em sql para
acessar tabelas e dados. Por exemplo, o seguinte comando:
1 +--------------------+
2 | Database |
3 +--------------------+
4 | information_schema |
5 | mysql |
6 | performance_schema |
7 +--------------------+
8 4 rows in set (0.02 sec)
O Workbench pode ser aberto na interface gráfica do Ubuntu, conforme a figura a seguir:
Capítulo 2 - Instalação 8
Após instalar o curl, podemos instalar o composer no diretório onde criamos o nosso primeiro projeto
Slim, que será em /home/user/public_html/helloworld. Lembre-se que user é o seu usuário.
Capítulo 2 - Instalação 9
1 $ mkdir /home/user/public_html/helloworld
2 $ cd /home/user/public_html/helloworld
3 $ curl -s https://getcomposer.org/installer | php
Neste momento será criado um arquivo composer.phar no diretório helloworld. Este arquivo é
uma espécie de executável do composer. Com o composer instalado, vamos configurá-lo para que
possamos instalar o slim framework. Isso é feito através da criação do arquivo composer.json,
conforme o código a seguir
/home/user/public_html/helloworld/composer.json
1 {
2 "require": {
3 "slim/slim": "2.*"
4 }
5 }
Este arquivo no formato json contém as bibliotecas que o composer deve instalar e manter. Pode-se
adicionar mais bibliotecas ao longo do projeto, bastando editar este arquivo e executando o update.
Após criar o arquivo, instalamos o slim da seguinte forma:
Após executar o composer, o Slim é instalado na pasta vendor, possuindo uma estrutura semelhante
a seguir.
Capítulo 2 - Instalação 10
1 |-helloworld
2 |---composer.phar
3 |---composer.json
4 |---vendor
5 |---composer
6 |---slim
1 $ cd /home/user/public_html/helloworld/vendor/slim/slim/
2 $ cp .htaccess /home/user/public_html/helloworld/
Com o arquivo .htaccess copiado para a raiz do projeto, podemos editá-lo de forma a ativar o rewrite
do Apache no diretório. No linux, precisamos informar uma diretiva chamada RewriteBase, da
seguinte forma:
1 RewriteEngine On
2
3 # Some hosts may require you to use the `RewriteBase` directive.
4 # If you need to use the `RewriteBase` directive, it should be the
5 # absolute physical path to the directory that contains this htaccess file.
6 #
7 RewriteBase /~user/helloworld
8
9 RewriteCond %{REQUEST_FILENAME} !-f
10 RewriteRule ^ index.php [QSA,L]
Lembre-se que, ao invés de user, coloque o seu usuário do Linux. Após a configuração do rewrite, po-
demos certificar que, quando um endereço url do tipo http://localhost/∼user/helloworld/user
será convertido para http://localhost/∼user/helloworld/index.php?user.
Para testarmos se está tudo ok até este momento, basta apontar o seu navegador para o endereço
http://localhost/∼user/helloworld/ e encontrar a mensagem de erro Not Found - The requested
URL /∼user/helloworld/index.php was not found on this server.
Agora vamos criar o arquivo index.php que é o arquivo principal do nosso sistema de teste. Ele
conterá o Slim e será sempre o arquivo inicial acessado, independente da URL. Chamamos isso de
entry point da aplicação.
Capítulo 2 - Instalação 11
/home/user/public_html/helloworld/index.php
1 <?php
2 include "vendor/autoload.php";
3
4 $app = new \Slim\Slim();
5
6 $app->get('/', function () {
7 echo "Hello world!!";
8 });
9
10
11 $app->get('/:name', function ($name) {
12 echo "Hello, $name";
13 });
14
15 $app->run();
16 ?>
Neste código, na linha 2, incluímos o autoload.php gerado pelo Composer. Ele irá se encarregar de
adicionar o necessário para que o Slim funcione, assim como qualquer outra biblioteca.
Na linha 4 criamos a variável $app que representa a classe Slim. Na linha 6, criamos uma entrada
HTTP com o método GET. Esta entrada possui dois parâmetros. O primeiro é o caminho que o Slim
deve comparar com o caminho digitado no navegador. Neste caso, usamos somente uma barra /
indicando que é o caminho raiz, ou seja, http://localhost/helloworld/. O segundo parâmetro é
o método que será executado caso esta entrada GET seja válida. Neste método, fazemos um simples
Hello World através do comando php echo. Na linha 11 usamos outra entrada GET, mas desta vez
usamos uma variável através do uso de : indicando que podemos inserir qualquer informação na
url. Ou seja, usarmos a url http://localhost/helloworld/usuario, o texto usuário será atribuído
a variável $nome, que será usada na linha 12 em Hello, $name.
Na linha 15 a aplicação Slim é executada. A forma como uma url pode ser executada neste arquivo
está ligada ao rewrite do arquivo .htaccess.
Após criar o arquivo, vamos testar o Slim framework acessando os seguintes endereços URL:
1 http://localhost/~user/helloworld/
2 Resposta: Hello world!!
3
4 http://localhost/~user/helloworld/fulano
5 Resposta: Hello, fulano
Se tudo correu bem até aqui, estamos preparados para o próximo capítulo. Se desejar, continue nesse
tópico para ver a instalação de tudo que precisa no Windows.
Capítulo 2 - Instalação 12
Caso a url não esteja acessível, não esqueça de iniciar o serviço do Wamp Server, executando o
arquivo c:\wamp\wampmanager.exe.
.
Essa configuração é necessária para que o Slim possa funcionar. Basicamente, o Rewrite permite que
urls como www.site.com/user/1 sejam convertidas em algo como www.site.com/index.php?item1=user&item2=1.
Ou seja, ele faz uma reescrita da URL (daí o nome Rewrite).
1 c:\wamp\bin\php\php5.X.X\php.ini
2 c:\wamp\bin\apache\Apache2.X.X\bin\php.ini
³http://www.mysql.com/products/workbench/
Capítulo 2 - Instalação 14
1 ;extension=php_openssl.dll
1 extension=php_openssl.dll
Após esta alteração, reinicie o Wamp Server, pelo seu ícone na bandeja do windows, acessando o
item Restart All Services.
Para instalar o composer no Windows, acesse https://getcomposer.org/download/⁴ e faça o download
do Composer-Setup.exe na seção Windows Installer. Durante a instalação, escolha o item ´Install
Shell Menus´ de acordo com a figura a seguir.
Na próxima tela, o instalador do Composer lhe pede o caminho do arquivo php.exe, que está em
c:\wamp\bin\php\php5.4.3
⁴https://getcomposer.org/download/
Capítulo 2 - Instalação 15
Após finalizar a instalação, o composer deve estar pronto para uso. Como selecionamos a opção
“Install Shell Menus”, ela deve estar disponível no menu de contexto do Explorer. Para realizarmos
um teste, crie uma pasta qualquer e, dentro da pasta, crie o arquivo composer.json. Este arquivo
conterá a descrição dos pacotes que serão instalados na pasta, neste caso, o Slim Framework.
O arquivo composer.json deve ter o seguinte texto:
1 {
2 "require": {
3 "slim/slim": "2.*"
4 }
5 }
Após criar o arquivo, abra o explorer e na pasta de teste que criamos, clique com o botão direito do
mouse e escolha o item Composer Options > Install Prefer dist. Uma janela do DOS abre com
a instalação do pacote. Na pasta que criamos, é criado uma estrutura com o Slim Framework, onde
ele está instalado na pasta vendor, conforme a figura a seguir.
Capítulo 2 - Instalação 16
1 {
2 "require": {
3 "slim/slim": "2.*"
4 }
5 }
Após criar o arquivo, é hora de usar o composer para instalar o Slim Framework. Com o botão
direito do mouse na pasta helloworld, escolha a opção Composer Options > Install Prefer dist
e aguarde a pasta vendor ser criada, juntamente com o slim dentro dela.
Depois de instalar o Slim, precisamos criar um arquivo que irá ativar o rewrite das urls do apache
para o nosso exemplo. Resumindo, ele vai transformar o nosso http://localhost/helloworld/user
para http://localhost/helloworld/index.php?user. Essa configuração é feita copiando o arquivo
helloworld\vendor\slim\slim\.htaccess para a pasta raiz helloworld.
Após copiar o arquivo .htaccess, é hora de criar o arquivo index.php que conterá o código Slim.
Crie o arquivo helloworld\index.php com o seguinte código:
Capítulo 2 - Instalação 17
c:/wamp/www/helloworld/index.php
1 <?php
2 include "vendor/autoload.php";
3
4 $app = new \Slim\Slim();
5
6 $app->get('/', function () {
7 echo "Hello world!!";
8 });
9
10
11 $app->get('/:name', function ($name) {
12 echo "Hello, $name";
13 });
14
15 $app->run();
16 ?>
Neste código, na linha 2, incluímos o autoload.php gerado pelo Composer. Ele irá se encarregar de
adicionar o necessário para que o Slim funcione, assim como qualquer outra biblioteca.
Na linha 4 criamos a variável $app que representa a classe Slim. Na linha 6, criamos uma entrada
HTTP com o método GET. Esta entrada possui dois parâmetros. O primeiro é o caminho que o Slim
deve comparar com o caminho digitado no navegador. Neste caso, usamos somente uma barra /
indicando que é o caminho raiz, ou seja, http://localhost/helloworld/. O segundo parâmetro é
o método que será executado caso esta entrada GET seja válida. Neste método, fazemos um simples
Hello World através do comando php echo. O resultado deste código é semelhante a figura a seguir.
Na linha 11 usamos outra entrada GET, mas desta vez usamos uma variável através do uso de : indi-
cando que podemos inserir qualquer informação na url. Ou seja, usarmos a url http://localhost/helloworld/usuar
o texto usuário será atribuído a variável $nome, que será usada na linha 12 em Hello, $name.
Na linha 15 a aplicação Slim é executada. A forma como uma url pode ser executada neste arquivo
está ligada ao rewrite do arquivo .htaccess.
Capítulo 2 - Instalação 18
Postman
O Postman é um addon para o Goggle Chrome, para que possa ser realizado chamadas HTTP ao
servidor. Para instalá-lo, você precisa ter o navegador Google Chrome e acessar a seguinte URL:
[https://chrome.google.com/webstore/detail/postman-rest-client/fdmmgilgnpjigdojojpjoooidkmcomcm](https://ch
rest-client/fdmmgilgnpjigdojojpjoooidkmcomcm “”)
Após instalar o PostMan, pode-se acessá-lo através dos aplicativos dentro do navegador Google
Chrome.
Capítulo 3 - Conhecendo o Slim
Framework
Agora que testamos uma aplicação simples utilizando o Slim Framework, vamos através deste
capítulo discutir um pouco sobre o mínimo de conhecimento teórico que você necessita para
entender como o Slim funciona. É muito importante que você leia com calma este capítulo para
compreender os conceitos principais desta tecnologia.
A instância Slim
Todo o framework Slim é configurado através de sua instância, definido através do código a seguir,
onde criamos a variável ‘$app’ e nela definimos uma instância para a classe ‘Slim()’.
Geralmente este é o primeiro comando que escrevemos para iniciar a configuração do framework.
Caso tenha a impressão que irá precisar utilizar este comando em todos os arquivos PHP do projeto,
fique tranquilo. Lembre que estamos utilizando o ‘rewrite’ e que todas as urls do projeto estão sendo
redirecionadas para o arquivo index.php, que é o “coração” do nosso sistema.
Pode-se alterar o nome da variável “$app” caso deseja, mas nesta obra manteremos conforme o
padrão da documentação oficial do Slim Framework.
Onde temos URI, podemos configurar qual será a URI de entrada que irá “casar” com o método GET.
Por exemplo, se você deseja criar uma função para exibir todos os dados de uma tabela “clientes”,
pode-se criar a seguinte URI: ‘/clientes/showAll’ ou então somente ‘/clientes’. Lembre-se que é você
que configura a URI da forma que achar melhor.
Repassando parâmetros
Pode-se repassar parâmetros através da URI. No caso de dados relacionados a tabela “clientes”,
poderíamos supor os seguintes exemplos:
Neste exemplo criamos uma variável chamada ‘$id’, e ela deverá “casar” com a seguinte URI:
‘/clientes/show/1’. Quando acessamos esta URI, o valor ‘1’ será atribuído a variável ‘$id’ que poderá
ser utilizada no código do método.
Pode-se inclusive adicionar mais parâmetros a sua lista, como no exemplo a seguir:
Uma URI que casaria com o método acima seria: ‘/produtos/1/vendasPorAno/2012’, onde a variável
‘$id’ e ‘$ano’ seriam atribuídas aos valores ‘1’ e ‘2012’, respectivamente.
Parâmetros opcionais
1 $app->get('/produtos/:id/vendas/:ano(/:mes)', function ($id,$ano,$mes=null) {
2 //Exibir a quantidade de vendas do produto $id no ano $ano
3 // e se o mes for informado, no mes informado
4 });
Neste código, alteramos o nome “vendasPorAno” para apenas “vendas” e criamos a convenção de
adicionar o ano e, se necessário, o mês. Se o mês não for informado o valor null será atribuído à
variável $mes.
Capítulo 3 - Conhecendo o Slim Framework 21
1 $app->post('/clientes/add', function () {
2 //Adicionar dados do cliente
3 });
É extremamente útil montar uma tabela de acesso ao seu sistema, de forma que possa repassar esta
informação aos desenvolvedores no lado do cliente.
1 $app->post('/cliente', function () {
2 $request = \Slim\Slim::getInstance()->request()->getBody();
3 var_dump($request);
4 });
Neste código, usamos o método getInstance() para obter a instância do framework Slim, e a partir
dele obtemos os dados da requisição através do método request()->getBody(). Através do var_-
dump(), iremos verificar o que foi repassado pelo cliente, que poderá ter diversos formatos. Caso o
método getInstance não lhe agrade, pode-se usar uma outra forma, conforme o código a seguir:
Adriano Gualberto Chagas A diferença principal está no uso explicito da variável $app, através do
comando use após a criação da função anônima. An analisarmos a chamada do código anterior no
Postman, temos o seguinte resultado:
Capítulo 3 - Conhecendo o Slim Framework 23
Adri-
ano Gualberto Chagas Ou seja, ao enviarmos a informação no formato “json” para o servidor, este
respondeu de acordo com o var_dump($request) criado. Pode-se perceber que a função getBody()
retorna um texto comum, e não um JSON. Como veremos ao longo da obra, estaremos criando um
padrão de troca de dados entre cliente e servidor, e este padrão será sempre o JSON. Para isso, é
necessário que tanto o cliente passe a enviar dados em JSON para o servidor quanto o servidor
responder em JSON.
JSON
Como já abordamos nesta abra, o JSON será o nosso padrão de dados para que o cliente possa se
comunicar com o servidor. Este formato é mais simples e enxuto do que XML, e pode ser descrito
através do exemplo a seguir:
Capítulo 3 - Conhecendo o Slim Framework 24
1 {
2 "nome" : "Daniel",
3 "id" : 1,
4 "telefones" : [ 111222, 333444]
5 }
Neste exemplo, temos a criação de um objeto genérico contendo três propriedades: nome, id e
telefones. A propriedade telefones é um array que contém dois itens. Uma das vantagens do JSON
é que podemos encadear vários objetos um no outro, e formar uma estrutura complexa, mesmo com
uma notação simples.
Supondo que enviaríamos esta estrutura para um método POST do servidor, temos:
O que é perfeitamente normal, dado que a String de dados que a requisição contém não está
devidamente formatada para JSON. Para resolver esse problema, devemos tratar a String de dados
que chega da requisição, e isso é realizado através do método nativo do php json_decode, conforme
o exemplo a seguir:
1 object(stdClass)#35 (3) {
2 ["nome"]=>
3 string(6) "Daniel"
4 ["id"]=>
5 int(1)
6 ["telefones"]=>
7 array(2) {
8 [0]=>
9 int(111222)
10 [1]=>
11 int(333444)
12 }
13 }
Capítulo 3 - Conhecendo o Slim Framework 25
Veja que, ao utilizar o método json_decode, o texto no formato JSON é convertido em um objeto do
PHP, no qual pode ser utilizado normalmente. Da mesma forma ocorre o inverso, ou seja, quando o
servidor responde um texto ao cliente, no formato JSON, o cliente deve obter este texto e convertê-lo
para um objeto.
Cookies
Um cookie é uma informação que corresponde a uma conjunto chave/valor no qual o dado é
armazenado no navegador do cliente. O conceito de cookies no framework Slim é o mesmo do PHP.
Para criar um cookie, use o comando setCookie , conforme o código a seguir.
Neste exemplo, criamos um cookie que irá expirar no navegador do cliente em 2 dias.
Para se obter um cookie, basta usar getCookie() passando a chave que representa o valor que deseja-
se obter. Para apagar um cookie, use deleteCookie().
Sessões
Uma sessão é um valor armazenado no servidor e não no cliente. Sessões armazenadas no servidor
fazem parte de um conceito controverso na definição RESTful, pois um serviço RESTful em sua
teoria não deve manter o seu estado entre suas requisições. Ou seja, RESTfull é o que chamamos de
stateless, e manter o estado seria uma tarefa do cliente.
Tudo isso converge para o login (autentication) do usuário. Muitas das requisições que fazemos
no servidor requerem que um usuário esteja autenticado. Em teoria, o cliente iria guardar essa
informação e cuidar disso para que o servidor recebesse apenas uma chave de autenticação, mas
na prática quebrar esta regra não é um problema grave.
Quando utilizamos o framework Slim usamos as chamadas nativas do PHP para o controle da sessão.
Se você já programou em PHP sabe que usamos a sessão através da variável $_SESSION e faremos
desta mesma forma.
Para isso, precisamos iniciar o gerenciamento de sessão do PHP, através do seguinte código:
1 session_cache_limiter(false);
2 session_start();
1 $_SESSION["user_id"] = 1;
Tratando erros
Erros acontecem, todo o tempo. Pode ser um erro de sintaxe que o programador não verificou,
pode ser um erro de lógica do código em si. De qualquer forma, um erro deve ser tratado para que
a resposta do servidor ao cliente seja informada. Nesta obra, estaremos tratando erros através de
exceções e tratando-as devidamente através do slim.
Primeiro, devemos utilizar o método $app->error para criar uma função especial que irá tratar
qualquer erro na aplicação. O código a seguir ilustra esta situação:
Isso significa que, sempre quando um erro acontecer, o método especial do slim error será evocado
e a exceção será repassada. No código, poderemos fazer algo do tipo:
1 if ($quantidade<0)
2 throw new Exception("Quantidade de itens deve ser maior que zero");
Independente de onde este código estiver, o throw irá disparar a exceção e o Slim irá se encarregar
de tratá-lo adequadamente. Veremos mais detalhes no exemplo do próximo capítulo.
Capítulo 4 - Criando uma API RESTful
Neste capítulo iremos criar um crud simples, mas que servirá de base para outros sistemas. Como
esta obra é sobre o Slim Framework, estaremos focados somente no lado do servidor (API) e não no
cliente, pelo menos neste capítulo. Usaremos o Postman para realizar todos os acessos ao servidor, e
assim poder testar cada item de nossa API.
No próximo capítulo iremos criar uma aplicação cliente simples com jQuery, para mostrar o
funcionamento da API.
Criando o projeto
Inicialmente crie a pasta “api” no diretório web que configuramos no capítulo 2. No sistema
operacional Windows, teríamos c:\wamp\www\livro-slim\api e no sistema operacional Linux
teríamos /home/seu_usuario/public_html/livro-slim/api. Lembre-se que os caminhos variam
de acordo com as suas especificações, então tome cuidado para não errar quando for fazer referências
a eles. Outro detalhe a ser observado, principalmente para usuários do Linux, é sobre case sensitive,
ou seja, o Linux diferencia letras maiúsculas e minúsculas. Mesmo utilizando Windows, é viável
diferenciar maiúsculas e minúsculas para que possamos futuramente exportar o projeto para algum
servidor Linux.
A criação da pasta “api” segue a lógica que o Slim Framework é uma camada do seu sistema,
que vai expor um conjunto de métodos que o cliente possa usar. Por exemplo, se o seu sistema
se chama “XYZsystens”, e o seu site é “www.xyzsystens.com.br”, podemos ter como url para
acesso aos métodos REStfull da sua aplicação algo como “www.xyzsystens.com.br/api” ou então
“api.xyzsystens.com.br”. É por esse motivo que o nosso projeto se chama “api” e não outro nome.
Após criar a pasta api, vamos criar o arquivo composer.json que vai instalar a estrutura do Slim
Framework no projeto. Este arquivo contém a seguinte configuração:
1 {
2 "require": {
3 "slim/slim": "2.*"
4 }
5 }
Para instalar o composer no projeto, caso ele ainda não exista, execute o seguinte comando no
ambiente Linux:
Capítulo 4 - Criando uma API RESTful 28
O Slim será instalado pelo composer. Se estiver utilizando Windows, lembre-se de usar o menu
do Composer criado pela instalação, bastando clicar com o botão direito do mouse na pasta api e
navegar até Composer Options > Install Prefer dist .
Ao invés de exibir todo o arquivo a seguir, vamos mostrá-lo por partes, para que possamos identificar
cada parte relacionada a lista que criamos. Inicialmente, abrimos a tag característica do php e
iniciamos a sua sessão. Após a sessão ser iniciada, adicionamos dois arquivos do projeto. O primeiro é
o arquivo config.php que contém inicialmente as definições de acesso ao banco de dados. O segundo
arquivo é o DB.php, que é um arquivo para realizar instruções SQL através de uma interface mais
simples, conhecida como PDO, que é nativa do PHP.
api/index.php
1 session_start();
Após iniciar a sessão, incluímos os arquivos config.php e DB.php, que ficam responsáveis pelo acesso
ao banco de dados.
Capítulo 4 - Criando uma API RESTful 29
api/index.php
1 //incuindo os arquivos de configuração e acesso a banco
2 include "config.php";
3 include "DB.php";
Agora incluímos o arquivo criado pelo composer para adicionar o framework Slim.
api/index.php
1 // incluindo as bibliotecas do composer
2 require 'vendor/autoload.php';
Neste momento, temos todas as bibliotecas adicionadas ao index.php, então pode-se criar a variável
que representará a instância ao Slim Framework. Essa variável pode ter qualquer nome, vamos
chamá-la de $app.
api/index.php
1 //Instanciando $app como uma classe Slim
2 $app = new \Slim\Slim(array(
3 'debug' => false //debug é false para renderizar erros corretamente
4 ));
Criamos a instância $app através da classe Slim, e repassamos o parâmetro 'debug'=>false para
simular o comportamento do Slim em ambiente de produção. Isso é necessário porque quando existe
um erro no código do sistema, iremos tratá-lo de forma a retornar uma mensagem amigável para o
cliente. Este tratamento é feito a seguir:
api/index.php
1 //Caso ocorra algum erro na aplicação (Excepyion),
2 // essa função será executada e um erro padrão em JSON
3 // será retornado ao cliente
4 $app->error(function ( Exception $e = null) use ($app) {
5 echo '{"error":{"text":"'. $e->getMessage() .'"}}';
6 });
Neste código, usamos o método error() para definir um tratamento diferenciado do Slim em caso
de erros no código. Entendemos como um erro no código algo como uma falha ao conectar no banco
de dados, ou um regra de negócio. Por exemplo, se estamos inserindo um usuário no banco de dados
cujo o email já existe, devemos exibir uma mensagem de erro ao cliente, de forma que ele possa
entender e tratar.
Analisando o corpo do método error(), temos o uso do comando echo e a criação de uma saída em
JSON no formato texto, contendo o objeto error e a proriedade error.text. Isso significa que, se
tivermos alguma exceção no código da seguinte forma:
Capítulo 4 - Criando uma API RESTful 30
1 {"error":{"text":"Erro de teste"}}
Além disso, o método error() do Slim também altera o código de retorno da requisição para 500,
de acordo com a figura a seguir:
Após criarmos o método que gerencia os erros de uma aplicação, vamos criar o método que será
responsável em gerenciar as chamadas GET. Para isso, usamos o método get() do Slim Framework,
conforme o código a seguir:
api/index.php
Existe muita informação importante neste código, então vamos explicá-lo passo a passo. Primeiro,
usamos a instância do Slim ($app) para chamar o método get(). Este método já foi discutido
Capítulo 4 - Criando uma API RESTful 31
anteriormente, e ele especifica que qualquer requisição GET feita ao arquivo index.php será tratado
nela.
O método get possui dois parâmetros. O primeiro é a expressão regular que deve bater com a
url para que o método seja chamado. Nesse caso, usamos /:controller/:action(/:parameter)
que determina um padrão semelhante a sistemas MVC, onde repassamos o nome do controller e
da action. Além destes dois parâmetros, temos um terceiro, que chamamos de parameter, que é
opicional.
O segundo parâmetero é a própria função anônima que será executada caso a URL esteja de acordo
com a expressão do primeiro parâmetro. Nesta função, temos três parâmetros que são os parâmetros
correspondentes a expressão: $controller , $action, $parameter
No corpo da função anônima, temos o include relativo ao controller chamado. Esta é apenas uma
sugestão para o nosso projeto, e você pode mudar o local de onde as classes do projeto estarão. Por
exemplo, ao usar a URL /produtos/listar, a variável $controller assumirá o valor de produtos
e o arquivo classes/produtos.php será incluído. Após incluir o arquivo, é realizada a instanciação
do mesmo. Esta instância é armazenada na variável $classe e, devido ao PHP ser uma linguagem
interpretada, podemos chamar qualquer classe dinamicamente.
Até este momento temos a classe do controller que foi repassada na URL, e podemos chamar qualquer
método dessa classe. Mas qual método chamar? Isso também é definido na URL, na qual chamamos
de action. No exemplo da URL /produtos/listar a variável $action terá o valor listar.
Revendo o código, temos:
api/index.php
Esta linha é importante porque ela “chama” o método do controller, mas com uma diferença basante
sutil. Se estamos realizando uma chamada GET através da URL /produtos/listar, já sabemos que
a classe Produtos está instanciada, mas o método chamado não será listar e sim get_listar,
conforme especificado na função nativa do php call_user_func_array. Esta é uma convensão usada
na obra para que possamos melhorar a segurança da classe em questão, não permitindo que qualquer
método da mesma seja chamado. Isto é, se temos um método chamado get_listar em uma classe, já
sabemos que aquele método poderá ser chamado através de uma URL. Se temos um método chamado
exibeSenha, sem nenhum prefixo, sabemos que ele não poderá ser chamado de forma alguma pela
URL. Esta é uma parte importante que deverá ser compreendida para que possamos continuar.
O método nativo do php call_user_func_array é responsável em chamar dinamicamente um
método de uma classe, no qual repassamos como parâmetro o nome da classe e no nome do método.
Toda esta chamada é retornada a variável retorno, na qual é exibida na próxima linha:
echo ‘{“result”:’ . json_encode($retorno) . ‘}’;
Capítulo 4 - Criando uma API RESTful 32
Desta forma, o que o método da classe retornar é convertido através do json_encode e retornado ao
cliente.
Por exemplo, supondo que temos a classe Produto e o método get_teste, da seguinte forma:
api/classes/Produto.php
1 class Produto{
2
3 public function get_teste(){
4 return true;
5 }
6
7 public function get_teste_error(){
8 throw new Exception("Erro de teste");
9 }
10
11 }
1 {"result":true}
Repare que também criamos o método get_teste_error, que ao invés de retornar um valor, dispara
uma exceção. Desta forma, ao acessarmos http://localhost/∼daniel/livro-slim/api/produto/teste_-
error , teríamos a seguinte saída:
1 {"error":{"text":"Erro de teste"}}
Agora que revemos mais a fundo o método $app->get(), podemos analisar o $app->post(), de
acordo com o código a seguir:
Capítulo 4 - Criando uma API RESTful 33
A forma como o método post funciona é semelhante ao get, com algumas sutis diferenças.
Primeiro, ao invés de pegarmos uma variável diretamente na URL, nós pegamos na requisição da
chamada HTTP. Isso é necessário porque no método Post são repassados muitos dados, geralmente
provenientes de um formulário. Estes dados não devem ser repassados pela URL, mas sim pela
requisição. Os dados devem estar codificados no formato JSON. O código para este método é:
api/classes/Produto.php
1 class Produto{
2
3 public function post_teste($produto)
4 {
5 return $produto->nome;
6 }
7 }
Perceba que o código Json que é repassado pela requisição POST é convertido em um objeto e
repassado novamente para a variável $produto, que pode ser utilizada pelo método.
Para finalizar, os métodos PUT e DELETE possuem o mesmo código do POST, conforme o código a
seguir:
11
12 $app->delete('/:controller/:action', function ($controller, $action) use ($app) {
13
14 $request = json_decode(\Slim\Slim::getInstance()->request()->getBody\
15 ());
16 include_once "classes/{$controller}.php";
17 $classe = new $controller();
18 $retorno = call_user_func_array(array($classe, "delete_" . $action),\
19 array($request));
20 echo '{"result":' . json_encode($retorno) . '}';
21 });
Veja que, como mudança, temos apenas o prefixo do método a ser chamado pela classe. Para finalizar,
na última linha do arquivo index.php, temos o método run() do Slim que irá, de fato, executar o
Slim.
1 $app->run();
1 $ mysql -u
2 mysql> create database teste;
3 mysql> use teste;
4 mysql> CREATE TABLE Produtos (id INT NOT NULL AUTO_INCREMENT PRIMARY KEY, nome V\
5 ARCHAR(100));
Neste exemplo, criamos um banco de dados chamado teste e, nele, criamos uma tabela chamada
Produtos, com dois campos: id e nome.
Capítulo 4 - Criando uma API RESTful 35
GET /produtos/listar
Lista todos os produtos
GET /produtos/listar/10
Lista o produto cujo id é 10
POST /produtos/novo
Incluir um novo produto. Deve haver um JSON com o campo nome preenchido
PUT /produtos/editar
Alterar um produto. Deve haver um JSON com o id do produto a ser editado, e com o campo
nome.
DELETE /produtos/deletar
Deletar um produto. Deve haver um JSON com o id do produto a ser deletado.
Criando um produto
Vamos implementar primeiro o método novo. Como definido, ele é um POST que deve conter a
informação do nome do produto. Quando configuramos o Postman, devemos criar algo do tipo:
De acordo com o que convencionamos, temos que criar um método chamado post_novo na classe
Produto. Este método deverá analisar se o nome do produto já existe no banco de dados, e caso não
existir, realizar o cadastro. O código para esta operação está listado a seguir:
Capítulo 4 - Criando uma API RESTful 36
Temos muitos detalhes para analisar neste código. Inicialmente, veja que o método post_novo possui
um parâmetro chamado $produto. Este parêmtro é formado pelo JSON enviado no Request da
requisição. Ou seja, o seguinte JSON:
1 {
2 "nome" : "Xbox 360"
3 }
Será decodificado em um objeto php e atribuído a variável $produto. Após a criação do método,
temos a primeira verificação de código, que é analisando se a propriedade nome está vazia.
Entendemos como vazia se o valor existe ou se o valor é nulo. Caso seja verdadeiro, disparamos
uma exceção informando que o referido campo não pode ser nulo.
A seguir testamos esta condição, repassando o campo nome como nulo:
Capítulo 4 - Criando uma API RESTful 37
Todas as consultas ao banco de dados serão realizadas através de SQL comum. Neste caso, estamos
realizando um SELECT e buscando exatamente pelo nome do produto. A classe DB, adicionada
no arquivo index.php, se encarrega de encapsular os comandos do PDO para algo mais familiar.
Um detalhe importante é o comando bindValue, que irá ligar o :nome do SQL a propriedade
$produto->nome repassado pelo Request. Após montar a SQL e referenciar o valor do nome do
Capítulo 4 - Criando uma API RESTful 38
produto, usamos o método execute() para executar a SQL, e o comando fecth() para obter
os dados da SQL executada, se houver. Caso haja um produto, ele será atribuído a variável
$produtoEncontrado, e devemos disparar uma exceção informado que o mesmo não pode ser
cadastrado novamente.
Após estas duas verificações partimos para o cadastro do produto, visto a seguir:
1 //Inserir produto
2 $sql= "INSERT INTO Produtos (nome) VALUES (:nome)";
3 $stmt = DB::prepare($sql);
4 $stmt->bindParam("nome", $produto->nome);
5 $stmt->execute();
6 $produto->id = DB::lastInsertId();
7 return $produto;
Usamos novamente a classe DB para inserir o registro na tabela Produtos. Através do comando
lastInsertId() obtemos o id do registro adicionado e incluímos ele na propriedade id do objeto
produto e, finalmente, retornamos o objeto $produto para o cliente. Este retorno confirma que o
registro foi selecionado, pois agora ele possui um ID.
Neste código, criamos um SQL simples e usamos o método fectAll() para retornar todos os
resultados da tabela Produtos. O resultado deste método, ao acessá-lo pelo navegador, é:
Capítulo 4 - Criando uma API RESTful 39
Exibido um produto
Podemos alterar o método listar para que exiba somente um produto. Neste caso, adicionamos
uma propriedade que pode ser chamada de $id no método da classe, e caso ela esteja preenchida,
alteramos a SQL incluindo o referido id, veja:
Aumentamos o código do método listar para incluir a opção de obter apenas um único produto. É
válido lembrar que não devemos incluir a variável $id diretamente na SQL da variável $sql, como
por exemplo:
Isso pode trazer problemas de segurança, principalmente com sql injection. Ao acessarmos, por
exemplo, a URL “produto/listar/1” temos a seguinte resposta:
1 {"result":[{"id":"1","nome":"Xbox 360"}]}
Capítulo 4 - Criando uma API RESTful 40
Editando um produto
Ao editar um produto, usamos a requisição do tipo put e repassamos o objeto que deve ser atualizado.
A edição é condicionada ao ID do objeto, então o ID deve ser usado apenas para referenciá-lo, e não
alterá-lo. Resumindo, não se altera o ID (chave primária) do objeto. O código para alterar o produto
é listado a seguir:
36 return $produto;
37
38 }
No código para editar o produto, inserimos algumas verificações com o objetivo de validar os dados
que são repassados pela requisição. Espera-se, neste caso, que a requisição contenha um objeto
contendo as propriedades ‘nome’ e ‘id’. As verificações que falharem sempre disparam exceções,
deixando o código limpo no tratamento de erros (sem usar aqueles ifs intermináveis).
Após todas as verificações ocorrerem, é realizada a alteração do registro na tabela ‘Produtos’,
lembrando que somente o campo nome é alterado.
Removendo um registro
Para remover algum produto da tabela, criamos o método ‘delete_remover’. Como o prefixo indica,
temos que enviar uma requisição DELETE contendo um objeto que tenha o id do produto a ser
removido. O código para este método é descrito a seguir:
Capítulo 5 - Testando a API com
jQuery
Neste capítulo iremos construir uma aplicação simples que irá consumir a API criada no capítulo
anterior. Esta aplicação será desenvolvida utilizando html, javascript e jQuery. Iremos criar uma
página simples, com as operações de incluir, editar e excluir produtos.
Esta aplicação pode ser encontrada np github⁵ onde temos 3 arquivos, sendo eles:
index-base.html É um arquivo base que você pode usar em seus projetos, contendo o básico do
bootstrap para que todos os componentes do Twitter Bootstrap e do jQuery possam ser carregados
index.html É a página que contém as informações sobre produtos, na qual estará consultando a API
para obter e editar dados
client.js É o arquivo javascript que contém os códigos necessários para manipular os dados da página.
É neste arquivo que realizamos as requisições AJAX a API, e atualizamos o HTML de acordo com
estas informações.
Caso queira testar a aplicação, acesse este link⁶ e use a ferramenta de inspeção do Google Chrome
(F12) para verificar as chamadas ajax do cliente html ao servidor Slim, na aba Network, conforme o
exemplo da figura a seguir:
⁵https://github.com/danielps/livro-slim/tree/master/client-api
⁶https://demo-project-c9-danielschmitz.c9.io/php/livro-slim/client-api/index.html
Capítulo 5 - Testando a API com jQuery 43
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <title>Client API</title>
8 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/cs\
9 s/bootstrap.min.css">
10 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/cs\
11 s/bootstrap-theme.min.css">
12
13
14 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media quer\
15 ies -->
16 <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
17 <!--[if lt IE 9]>
18 <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></scrip\
19 t>
20 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
21 <![endif]-->
22 </head>
23 <body>
24
25 <!-- CONTEUDO -->
26
27 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
28 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"\
29 ></script>
30 <!-- Include all compiled plugins (below), or include individual files as neede\
31 d -->
32 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.j\
33 s"></script>
34 <!-- Arquivo que contém os códigos Javascript de manipulação da página -->
35 <script src="client.js"></script>
36 </body>
37 </html>
1 <div class="container">
2
3 <h1>Produtos</h1>
4
5 <button type="button" id="buttonNovo" class="btn btn-default pull-right">No\
6 vo</button>
7
8 <table id="produtos" class="table table-striped">
9 <thead>
10 <th width="10%">ID</th>
11 <th>Nome</th>
12 </thead>
13 <tbody>
14
15 </tbody>
16 </table>
17
18 <hr/>
19
20 <form role="form" id="formProduto" class="form-inline">
21 <input type="hidden" id="inputId">
22 <div class="form-group">
23 <label for="inputNome">Nome:</label>
24 <input type="text" class="form-control" id="inputNome" placeholder="Nome do pr\
25 oduto">
26 </div>
27 <input id="salvar" type="submit" class="btn btn-default" value="Salvar" />
28 </form>
29
30
31 </div><!-- /.container -->
Esta é a parte mais interessante. Ela começa com um div que possui a classe container, que é uma
particularidade do Twitter Bootstrap. Logo em seguida criamos um botão chamado “Novo”, que irá
através do jQuery preparar o formulário para a entrada de um novo produto. Depois criamos uma
tabela, que a princípio está vazia e possui apenas as informações de cabeçalho dos campos. Os dados
da tabela serão preenchidos assim que a página carregar, e este código está no arquivo javascript
que veremos mais a seguir.
Após criar a tabela, criamos o formulário, no qual será possível editar ou criar um novo produto. O
formulário possui dois campos, o id que corresponde ao id do produto e o campo nome do produto.
Capítulo 5 - Testando a API com jQuery 46
Na primeira linha temos a definição da URL de acesso a API. Neste caso, como estamos utilizando
um servidor web, o endereço é um pouco mais complicado do que quando usamos um servidor no
próprio computador. Se você está utilizando um servidor em sua própria máquina, esta URL seria
algo como http://localhost/livro-slim/api.
Na próxima linha temos o método ready que é nativo do jQuery, utilizado quando queremos executar
algum código javascript tendo a certeza de que tudo está devidamente carregado, veja:
1 $( document ).ready(function() {
2 listarProdutos();
3 });
1 function listarProdutos(){
2
3 //remove todos os TRs da table
4 $("#produtos").find("tbody tr").remove();
5
6 //Adiciona uma mensagem que a tabela está carregando
7 $("#produtos").find("tbody").append('<tr><td colspan=10><div class="alert alert\
8 -success">Carregando...</div></td></tr>');
9
10 //Realizando o Ajax chamando a API
11 $.ajax({
12 type: "get", //Aqui entra o método: get,post,put,delete
13 url: serverURL + "produto/listar", //a url
14 dataType: "json", //o tipo de dados que será trafegado
15 success: function(data) { //a funcao que será executada caso de tudo certo
16
17 //remover o carregando
Capítulo 5 - Testando a API com jQuery 47
18 $("#produtos").find("tbody tr").remove();
19
20 //pegando os dados que vieram do servidor
21 // Os dados vieram em JSON, e o jQuery já o transforma em Array
22 // Perceba que data.result é o {result:....} que veio do servidor
23 data.result.forEach(function(produto) {
24
25 var row = "<tr>"
26 + "<td>" + produto.id
27 + "</td><td><a id='edit' href='#' data-id='" + pro
28 .nome + "</a>"
29
30 + "</td></tr>";
31 $("#produtos > tbody:last").append(row);
32 });
33
34 },
35 error: function(data){
36 showError(data);
37 }
38 });
39 }
Como podemos ver, o código é extenso e demanda uma atenção especial. Inicialmente, usamos
jQuery para remover todas as linhas da tabela. Isso é necessário para que possamos reescrever a
tabela html, caso ela tenha alguma informação que já esteja antiga. O código para esta limpeza é:
1 $("#produtos").find("tbody tr").remove();
Se você não compreendeu o código acima, vamos a uma rápida explicação. O comando $("#produtos")
é um seletor do jQuery. Ele vai encontrar qualquer elemento HTML que contenha o id produtos.
No nosso caso, ele vai encontrar a tabela, já que a criamos com o seguinte código html: <table
id="produtos". O outro comando find irá encontrar todos os <tr> que estão inseridos no elemento
tbody. Após encontrá-los, o comando remove() irá apagar todos os <tr> da tabela. Perceba que,
como o cabeçalho da tabela está no elemento <thead>, este não será apagado.
Após remover os <tr> adicioamos uma mensagem ao usuário que estamos recarregando a tabela.
Esta mensagem é configurada pelo código a seguir:
A classe alert alert-success é uma classe especial do Twitter Bootstrap. O efeito dessa barra de
mensagem pode ser percebido no link que passamos no início deste capítulo.
Chega-se então o momento de realizar a chamada a nossa API. Ela é feita pelo jQuery utilizando
ajax. É muito simples fazer essa chamada pelo jQuery, veja:
1 $.ajax({
2 type: "get", //Aqui entra o método: get,post,put,delete
3 url: serverURL + "produto/listar", //a url
4 dataType: "json", //o tipo de dados que será trafegado
5 success: function(data) { .................
A chamada ajax pelo jQuery começa com $.ajax onde temos que repassar alguns parâmetros. O
primeiro dele é o type que indica o tipo de chamada que o ajax fará ao servidor e neste caso podemos
usar get, post, put ou delete. Como desejamos acessar o método get_listar da classe de produtos,
usamos get.
o segundo parâmetro é a URL de acesso. Neste caso, usamos a variável serverURL que criamos
no início do arquivo javascript, e a concatenamos com produto/listar, resultando em algo como
url/api/produto/listar. O terceiro parâmetro é a configuração do dataType da conexão, ou seja,
especificamos que a forma de troca de dados entre cliente e servidor é através do formato JSON.
O próximo parâmetro, success, define uma função anônima. Quando o servidor retorna com os
dados, este método é chamado e a função anônima é evocada. O parâmetro data é preenchido com
o JSON que o servidor retorna, assim como vimos nos testes da API com o Postman. É nesse momento
que iremos criar as linhas da tabela com os dados do servidor, veja:
1 $("#produtos").find("tbody tr").remove();
2
3 data.result.forEach(function(produto) {
4 var row = "<tr>"
5 + "<td>" + produto.id
6 + "</td><td><a id='edit' href='#' data-id='" + produto.id + "'>" + produt\
7 o.nome + "</a>"
8 + "</td></tr>";
9 $("#produtos > tbody:last").append(row);
10 });
Primeiro, removemos aquela linha onde a mensagem “carregando” estava sendo exibida. Estão
fazemos um loop nos dados através do comando data.result.forEach, onde cada registro da tabela
fará parte do loop. Neste loop, criamos uma variável chamada row e adicionamos uma linha html
contendo informações do produto, sendo elas o id e o nome. Perceba que na coluna que definimos o
nome do produto, adicionamos um link e criamos um parâmetro chamado data-id para referenciar
Capítulo 5 - Testando a API com jQuery 49
o id do produto. Na última linha do forEach adicionamos a linha tr que foi criada à tabela existente.
Isso é feito para todos os produtos cadastrados no banco de dados.
Quando a requisição ao servidor resulta em erro, a função anônima da propriedade error é
executada. Neste caso, temos:
1 error: function(data){
2 showError(data);
3 }
1 function showError(data){
2 var errorMessage = data.responseJSON.error.text;
3 alert("Error: " + errorMessage);
4 }
O método para listar os produtos é o mais complexo do código, por isso foi escolhido para ter
um detalhamento melhor em relação ao resto do código. Como nossa obra é sobre Slim e jQuery,
deixaremos a cargo do leitor ler o restante do código e compreender as chamadas à API do jQuery
ao Slim. Caso haja dúvidas, fique a vontade em entrar em contato conosco!
Conclusão
Nesta obra vimos o básico do Slim Framework, seu funcionamento e sua aplicação a um caso real.
Pode-se observar que a API que criamos no servidor responde a qualquer chamada de qualquer
cliente, bastando apenas esta chamada ser uma requisição HTTP e possuir um padrão dos dados
trafegados, que neste caso é o JSON.
A partir desta obra pode-se partir para outros estudos mais aprofundados, como jQuery e sobre como
integrar o Slim Framework a outro, como o Zend.
Estamos na busca para a criação de mais conteúdo, de diversas tecnologias ligadas ao desenvolvi-
mento de sistemas. Se você tem alguma ideia, ou necessidade, entre em contato conosco.