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 e 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:
<VirtualHost *:80>
DocumentRoot "CAMINHO_PARA_PASTA_DA_API"
ServerName laravel.exemplo
</VirtualHost>
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.
CREATE DATABASE api;
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:
'mysql' => [
'driver' => 'mysql',
'host' => 'localhost',
'database' => 'api',
'username' => 'root',
'password' => '',
'charset' => 'utf8',
'collation' => 'utf8_unicode_ci',
'prefix' => '',
],
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 e down) sem conteúdo algum dentro deles.
Adicionaremos o seguinte código dentro do método up():
Schema::create('imagens', function (Blueprint $table) {
$table->increments('id');
$table->string('arquivo');
$table->timestamps();
});
E no método down() adicionaremos o seguinte:
Schema::drop('imagens');
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:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
class Imagens extends Controller
{
//
}
Nós iremos edita-lo, para que fique assim:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
use Illuminate\Support\Facades\Input;
use DB;
class Imagens extends Controller
{
public function lista()
{
return DB::table('imagens') -> get();
}
public function nova(){
$file = Input::file('file');
$path = "img";
$ext = $file->getClientOriginalExtension();
$fileName = rand(1111,9999) .'.'.$ext;
$file->move($path, $fileName);
$id = DB::table('imagens')->insertGetId(['arquivo'=>$fileName]);
return ['id'=>$id];
}
public function delete($id){
return DB::table('imagens')
-> where('id',$id)
-> delete();
}
}
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:
Route::get('/', function () {
return view('index');
});
Route::get('imagens', "Imagens@lista");
Route::post('imagens',"Imagens@nova");
Route::delete('imagens/{id}',"Imagens@delete");
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:
<!DOCTYPE html>
<html ng-app="cdg">
<head>
<title>Cadastro de Pessoas</title>
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.css">
<script type="text/javascript" src="node_modules/jquery/jquery.js"></script>
<script type="text/javascript" src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
<!-- Angular -->
<script type="text/javascript" src="node_modules/angular/angular.js"></script>
<!-- App -->
<script type="text/javascript" src="app/app.js"></script>
</head>
<body ng-controller="imagensController">
<div class="container" ng-init="listar()">
<h2>Upload de Imagens</h2>
<div class="row">
<div class="col-md-12">
<input type="file" name="file" onchange="angular.element(this).scope().upload(this.files)" accept="image/*"/>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-12">
<div class="row" ng-repeat="row in rows">
<div class="col-md-3" ng-repeat="imagem in row">
<div class="thumbnail">
<img src="img/{{imagem.arquivo}}" class="img-responsive">
<p>
<button class="btn btn-danger btn-xs" ng-click="excluir(imagem)">×</button>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
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.
'use strict';
var app = angular.module('cdg',[]);
app.factory('imagensService',function($http){
return{
get: function(){
return $http.get('imagens');
},
post: function(data){
return $http.post('imagens',data,{
withCredentials: true,
headers: {"Content-type":undefined},
transformRequest: angular.identity
});
},
delete: function(id){
return $http.delete('imagens/'+id);
}
}
});
app.controller('imagensController', function($scope, imagensService){
$scope.listar = function(){
imagensService.get().success(function(res){
$scope.rows = chunk(res,4);
});
}
$scope.upload = function(files){
var fd = new FormData();
fd.append('file',files[0]);
imagensService.post(fd).success(function(res){
$scope.listar();
});
}
$scope.excluir = function(imagem){
imagensService.delete(imagem.id).success(function(res){
$scope.listar();
});
}
function chunk(arr, size) {
var newArr = [];
for (var i=0; i<arr.length; i+=size) {
newArr.push(arr.slice(i, i+size));
}
return newArr;
}
});
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.
