Laravel + AngularJS – Upload de Arquivos

Laravel e AngularJS são frameworks poderosos para PHP e JavaScript respectivamente. Aqui no Clube dos Geeks já vimos alguns posts sobre eles, mais recentemente esses dois:

Hoje faremos um exemplo simples de como fazer upload de arquivos usando AngularJS e Laravel. Usaremos também o Bootstrap para o layout

Nossa API

Faremos uma API simples para cadastrar, fazer upload, listar e apagar imagens, utilizando os métodos HTTP GET, POST e DELETE.

Instalando o Laravel

Você pode usar o instalador do Larvel, executando o seguinte comando no bash:

$ composer global require “laravel/installer”

O Laravel será instalado de forma global. Depois você pode iniciar um aplicativo Laravel com o seguinte comando:

$ laravel new exemplo

Lembrando que exemplo será o nome da pasta de sua aplicação.

Criando projeto com composer

Você pode usar o comando create-project  do composer, que é a alternativa mais indicada para usuários Windows. Veja como fazer:

$ composer create-project laravel/laravel exemplo --prefer-dist

Será criada a pasta exemplo e dentro dela uma série de pastas e arquivos do Laravel. As principais pastas que iremos usar serão app config.

Configurando o Virtual Host

Você precisa configurar um virtual host para apontar para a pasta da sua aplicação de exemplo. Farei este exemplo usando WAMP instalado obviamente em um computador com sistema operacional Windows.

Arquivos hosts

Primeiro abra o arquivo hosts do Windows, que está em C:\Windows\System32\drivers\etc e adicione o seguinte no final:

127.0.0.1    laravel.exemplo

laravel.exemplo será o domínio para acessar nossa api.

Virtual host

Se você estiver usando Windows e WAMP o arquivo de virtual hosts estará emC:\wamp\bin\apache\apache2.4.17\conf\extra, tenha atenção à versão do apache.

Adicione o seguinte no arquivo:

Você deve colocar o caminho da sua API apontando para a pasta public, por exemplo:C:/wamp/www/exemplo/public

Acesse o endereço laravel.exemplo no seu navegador. Você verá a tela de demonstração do Laravel.

Lembrando a configuração do Virtual Hosts pode ser diferente em determinados sistemas operacionais.

Banco de dados

Crie um banco de dados chamado api para que possamos usar no nosso exemplo.

Configuração

Abra o arquivo database.php que está dentro da pasta config da sua aplicação Laravel, e você verá um vetor com diversas chaves, uma delas será a connections onde você vai encontrar exemplos de conexões de bancos de dados SQLite, MySQL e PostgreSQL. Usaremos MySQL, então modifique as configurações para o seguinte:

O Laravel conta com uma classe pronta para execução de queries e comandos no banco de dados. Em breve veremos mais sobre.

Criando tabela

O Laravel conta com uma interface de linha de comandos chamada Artisan, que serve para ajudar na criação de controllers, migração de banco de dados, etc. Você pode ter mais detalhes na documentação oficial.

Usaremos o Artisan para criar nossa tabela. Volte para o bash ou prompt de comando e execute o seguinte comando dentro da pasta raiz da aplicação laravel criada.

$ php artisan make:migration table_imagens

Será criado um arquivo dentro da pasta database/migrations/ o nome dele será composto pela data e hora atual mais o termo informado table_imagens e ele terá extensão .php.

Abra esse arquivo e veja que ele é basicamente uma classe que conta com dois métodos (up down) sem conteúdo algum dentro deles.

Adicionaremos o seguinte código dentro do método up():

E no método down() adicionaremos o seguinte:

Você pode apagar os demais arquivos dentro da pasta migrations se desejar.

Agora execute o seguinte comando no bash:

$ php artisan migrate

Você verá que será criada a tabela pessoas no seu banco de dados.

Criando Controller

Usando o prompt de comando execute o seguinte comando:

$ php artisan make:controller Imagens

Dentro da pasta app/Http/Controllers você encontrará o arquivo Imagens.php com o seguinte conteúdo:

Nós iremos edita-lo, para que fique assim:

Note na linha 9 que importamos a classe Input, para que possamos ter acesso a dados enviados via HTTP como o $_FILES e outros.

Veja na linha 11 que evocamos a classe DB para usar o banco de dados;

Rotas

Para usar os métodos do Controller temos que usar rotas, que usam as requisições HTTP e direcionam para os controllers e métodos corretos.

No Laravel as rotas estão no arquivo app/Http/routes.php, adicione as seguintes rotas nele:

A API está pronta, agora partiremos para o desenvolvimento do lado da aplicação AngularJS.

Nossa aplicação

Se você é novo em AngularJS, sugiro que veja alguns posts presentes no site Awesome-br.

Instalando dependências

Pelo bash ou prompt de comando acesse a pasta de sua aplicação Laravel e depois a pasta public usando o comando cd. (Ex.: cd aplicacao/public).

Execute o seguinte comando para instalar as dependências por meio do NPM:

$ npm install angular bootstrap jquery@1.9.1

A pasta node_modules  será criada dentro da pasta public e dentro dela estarão as dependências.

Criando view

Na pasta resources/views crie um arquivo com o nome index.php. Esta será a página principal da nossa aplicação. Este arquivo terá o seguinte conteúdo:

Note na linha 14 que chamamos o arquivo app.js que deve ser criado na pasta public.

Na linha 21 usamos um input do tipo file e no evento onchange chamamos o método que está no controller do AngularJS.

app.js

Dentro da pasta public crie uma pasta chamada app e dentro dela um arquivo app.js. Nele estará o nosso aplicativo AngularJS.

Neste único arquivo criamos o service e o controller.

A função chunk serve para pegar um array e dividir em partes de tamanhos definidos ao chamar a função.

Concluindo

Para testar basta acessar o endereço laravel.exemplo no seu navegador. Quaisquer erros, problemas ou sugestões deixe um comentário.

Você pode ter acesso ao código fonte deste exemplo no Git Hub. E ver mais sobre AngularJS ou Angular 2 aqui no Clube dos Geeks.

Curta nossa página no Facebook e acompanhe nosso post.

Sobre o autor:

Graduado em Análise e Desenvolvimento de Sistemas - FLS; Desenvolvedor Full-stack na UniLeão; Revisor de conteúdo do site Clube dos Geeks, católico, gosto de ler e escrever.

Postagens relacionadas:

Deixe uma resposta

Seu e-mail não será publicado.