Olá pessoal! Continuamos a série de publicações de direitos autorais em antecipação ao início do curso
“Framework Laravel” . Em um
artigo anterior
, analisamos os fundamentos teóricos do Laravel. No entanto, a teoria de qualquer estrutura pode ser estudada por um longo período de tempo e você não entende nada até escrever algo na prática.
Portanto, vamos escrever um aplicativo no qual cada usuário possa fazer login, criar novos álbuns e enviar fotos para lá.
Se você ainda não sabe o que é o MVC, leia isso , em breve precisará usá-lo na prática .
Guias desse tipo começam com uma explicação de como configurar seu ambiente etc. O problema é que em cada plataforma é diferente, mas quero que o artigo seja interessante para todos. Vou apenas dar links para o necessário, e você tentará instalar e configurar você mesmo.
Então precisamos:
Compositor Para quem está no tanque, o Composer é um gerenciador de pacotes para PHP (sim, como npm para JavaScript). Você pode baixá-lo
aqui .
O próprio
Laravel . Existem algumas das opções mais populares aqui: Homestead e Valet (e na verdade muitas outras). No entanto, este último é adequado apenas para Mac OS. Tecnicamente, o leitor pode usar qualquer montagem favorita, se ela atender a
esses requisitos.
E um detalhe sutil, mas o
Node.js também será necessário para instalarmos os pacotes npm.
Execute o comando: o
composer global require laravel/installer para instalar o Laravel.
Lembre-se de colocar o
$Home/.composer/vendor/bin (ou seu equivalente no sistema operacional) na variável
PATH para que o comando Laravel funcione no seu sistema.
Portanto, um bom projeto começa com um TOR compreensível.
Vamos tentar formular os requisitos básicos para nossa aplicação simples:
O usuário tem a oportunidade de fazer upload de fotos para o site em álbuns criados por ele. Ele pode se registrar e fazer login. O banco de dados é MySQL. A estrutura usada para simplificar o processo de layout é o Bootstrap, como a estrutura de layout mais comum.
A primeira ação que você executa imediatamente após a criação é conectar o banco de dados. Se você ainda não entender como instalar e executar seu banco de dados, use soluções de desktop prontas da Evil Corporation:
aqui e
aqui . Isso será suficiente no começo.
Então, está tudo pronto. Vamos ao seu diretório favorito e iniciamos o projeto com
laravel new gallery
Em seguida, você precisa conectar nosso banco de dados. Para fazer isso, vá para o MySQL Branch e crie um novo banco de dados da
galeria (não esqueça de definir o Conjunto de Caracteres para utf-8 e a Coleção para
utf_general_ci para evitar problemas com o idioma russo).
Em seguida, vá para o arquivo
.ENV e configure uma conexão semelhante, lembrando de alterar as variáveis para seu nome de usuário e senha:
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=gallery DB_USERNAME=pavel DB_PASSWORD=
Depois disso, poderemos migrar nossos bancos de dados.
php artisan migrate
Se você configurou sua conexão em
.ENV corretamente, tudo deverá funcionar para você.
Conforme concordamos em t / z, teremos um processo de autorização, registro e também o usuário terá a oportunidade de criar álbuns e enviar fotos para lá. Para implementar tudo, precisamos das tabelas apropriadas no banco de dados.
Crie a tabela de álbuns
Então, onde começa o back-end? Desde a criação de uma tabela em nosso banco de dados. Este comando no terminal criará uma oportunidade para migrarmos para o banco de dados:
php artisan make:migration CreateAlbumsTable
Portanto, precisamos determinar quais colunas devem estar em nossa tabela. Isso deve ser feito no arquivo que você criou devido à última migração. Ele está localizado no seu projeto na pasta
gallery/database/migrations e seu nome está associado ao horário da sua criação. Ele deve ser editado da seguinte maneira:
<?php use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema; class CreateAlbumsTable extends Migration { public function up() { Schema::create('albums', function(Blueprint $table) { $table->increments('id')->unsigned(); $table->string('name');
Não se esqueça de fazer
php artisan migrate
Agora, a guia do seu banco de dados no MySQL Branch deve ter o seguinte formato:
Então, criamos nosso banco de dados, agora precisamos conectar nosso banco de dados ao modelo
Eloquen , que irá interagir com nosso banco de dados.
Crie um modelo de álbum
Agora precisamos criar um modelo Eloquent ORM. Se você não entende como nos movemos tão rapidamente de um para o outro, leia
isso. Usaremos o mesmo auxiliar Artisan para gerar o modelo de modelo:
php artisan make: modelo Álbum
Em seguida, vamos para
gallery/app/Album.php e editamos:
<?php namespace App; use Illuminate\Database\Eloquent\Model; class Album extends Model { protected $table = 'albums'; protected $fillable = array('name','description','cover_image'); public function Photos(){ return $this->hasMany('App\Image'); } }
Tabela de imagens
Uau! Nosso modelo de álbum está pronto, agora você pode fazer nossas imagens. Aqui o processo será repetido novamente:
php artisan make:migration CreateImagesTable
Vamos editar nossa migração:
<?php use Illuminate\Support\Facades\Schema; use Illuminate\Database\Schema\Blueprint; use Illuminate\Database\Migrations\Migration; class CreateImagesTable extends Migration { public function up() { Schema::create('images', function (Blueprint $table) { $table->increments('id'); $table->integer('album_id')->unsigned(); $table->string('image'); $table->string('description'); $table->foreign('album_id')->references('id')->on('albums')->onDelete('CASCADE')->onUpdate('CASCADE'); $table->timestamps(); }); } public function down() { Schema::dropIfExists('images'); } }
E novamente fazemos a migração:
php artisan migrate
Espero que sua migração seja um sucesso! No entanto, precisamos explicar mais uma coisa que teria sido muito demorada para ser anotada nos comentários: usamos a chave
foreign para juntar as duas tabelas
Álbuns e
Imagens . Cada álbum tem suas próprias imagens e, se você deseja excluir algum tipo de álbum, provavelmente acha que as fotos também serão excluídas.
Modelo de imagem
É hora de criar um modelo que funcione com a tabela de
imagens . Espero que você já adivinhe o que fazer:
php artisan make:model Image
O modelo é criado, vá para
gallery/app/Image.php para editá-lo.
Aqui também tudo deve ficar claro:
class Image extends Model { protected $table = 'images'; // , protected $fillable = array('album_id','description','image'); // }
Nosso modelo de imagem está pronto. Agora precisamos de um controlador para criar álbuns em nosso banco de dados.
Criação de álbum
Para salvar, mostrar e excluir em nosso álbum, precisamos de algumas funções em nosso controlador. Mas primeiro você precisa do próprio controlador:
php artisan make:controller AlbumsController
Vá para a
gallery/app/Http/Controllers/AlbumsController.php <?php namespace App\Http\Controllers; use Illuminate\Http\Request; use Illuminate\Support\MessageBag; use Validator; use App\Album; class AlbumsController extends Controller { public function getList() // { $albums = Album::with('Photos')->get(); return view('index')->with('albums',$albums); } public function getAlbum($id) { $album = Album::with('Photos')->find($id); $albums = Album::with('Photos')->get(); return view('album', ['album'=>$album, 'albums'=>$albums]); } public function getForm() { return view('createalbum'); // } public function postCreate(Request $request) { $rules = ['name' => 'required', 'cover_image'=>'required|image']; // $input = ['name' => null]; // $validator = Validator::make($request->all(), $rules); if($validator->fails()){ return redirect()->route('create_album_form')->withErrors($validator)->withInput(); } $file = $request->file('cover_image'); $random_name = str_random(8); $destinationPath = 'albums/'; $extension = $file->getClientOriginalExtension(); $filename=$random_name.'_cover.'.$extension; $uploadSuccess = $request->file('cover_image')->move($destinationPath, $filename); $album = Album::create(array( 'name' => $request->get('name'), 'description' => $request->get('description'), 'cover_image' => $filename, )); return redirect()->route('show_album',['id'=>$album->id]); } public function getDelete($id) // { $album = Album::find($id); $album->delete(); return Redirect::route('index'); } }
Então temos que redefinir nossos caminhos. Para quem não sabe, o roteamento está configurando os caminhos que são exibidos para o usuário no navegador e as ações que nosso aplicativo deve executar. Vamos para o arquivo
web.php :
<?php // Route::get('/', array('as' => 'index','uses' => 'AlbumsController@getList')); // Route::get('/createalbum', array('as' => 'create_album_form','uses' => 'AlbumsController@getForm')); // Route::post('/createalbum', array('as' => 'create_album','uses' => 'AlbumsController@postCreate')); // Route::get('/deletealbum/{id}', array('as' => 'delete_album','uses' => 'AlbumsController@getDelete')); // Route::get('/album/{id}', array('as' => 'show_album','uses' => 'AlbumsController@getAlbum')); // // Route::get('/addimage/{id}', array('as' => 'add_image','uses' => 'ImageController@getForm')); // Route::post('/addimage', array('as' => 'add_image_to_album','uses' => 'ImageController@postAdd')); // Route::get('/deleteimage/{id}', array('as' => 'delete_image','uses' => 'ImageController@getDelete')); // Route::post('/moveimage', array('as' => 'move_image', 'uses' => 'ImageController@postMove'));
Uau. Para que nosso aplicativo funcione com certeza, antes de definir a exibição, precisamos ter os links necessários para o alias das classes que precisamos no final do gallery/config/app.php . Estas são apenas configurações técnicas:
'aliases' => [ 'App' => Illuminate\Support\Facades\App::class, 'Artisan' => Illuminate\Support\Facades\Artisan::class, 'Auth' => Illuminate\Support\Facades\Auth::class, 'Blade' => Illuminate\Support\Facades\Blade::class, 'Broadcast' => Illuminate\Support\Facades\Broadcast::class, 'Bus' => Illuminate\Support\Facades\Bus::class, 'Cache' => Illuminate\Support\Facades\Cache::class, 'Config' => Illuminate\Support\Facades\Config::class, 'Cookie' => Illuminate\Support\Facades\Cookie::class, 'Crypt' => Illuminate\Support\Facades\Crypt::class, 'DB' => Illuminate\Support\Facades\DB::class, 'Eloquent' => Illuminate\Database\Eloquent\Model::class, 'Event' => Illuminate\Support\Facades\Event::class, 'File' => Illuminate\Support\Facades\File::class, 'Gate' => Illuminate\Support\Facades\Gate::class, 'Hash' => Illuminate\Support\Facades\Hash::class, 'Lang' => Illuminate\Support\Facades\Lang::class, 'Log' => Illuminate\Support\Facades\Log::class, 'Mail' => Illuminate\Support\Facades\Mail::class, 'Notification' => Illuminate\Support\Facades\Notification::class, 'Password' => Illuminate\Support\Facades\Password::class, 'Queue' => Illuminate\Support\Facades\Queue::class, 'Redirect' => Illuminate\Support\Facades\Redirect::class, 'Redis' => Illuminate\Support\Facades\Redis::class, 'Request' => Illuminate\Support\Facades\Request::class, 'Response' => Illuminate\Support\Facades\Response::class, 'Route' => Illuminate\Support\Facades\Route::class, 'Schema' => Illuminate\Support\Facades\Schema::class, 'Session' => Illuminate\Support\Facades\Session::class, 'Storage' => Illuminate\Support\Facades\Storage::class, 'URL' => Illuminate\Support\Facades\URL::class, 'Validator' => Illuminate\Support\Facades\Validator::class, 'View' => Illuminate\Support\Facades\View::class, 'Form' => Collective\Html\FormFacade::class, 'Html' => Collective\Html\HtmlFacade::class, ], // FORM )
Ótimo! Agora precisamos definir nossas idéias! Vá para a pasta
gallery/resources/views . Você pode excluir
welcome.blade.php , você pode sair, não importa. Crie
index.blade.php e
includes subpasta para adicionar as partes repetidas da
view . Portanto, nosso
index.blade.php deve assumir o seguinte formato:
@include('includes.header') <body> @include('includes.nav') <div class="container"> <div class="starter-template"> <div class="row"> @foreach($albums as $album) <div class="col-lg-3"> <div class="thumbnail" style="min-height: 514px;"> <img alt="{{$album->name}}" src="/albums/{{$album->cover_image}}"> <div class="caption"> <h3>{{$album->name}}</h3> <p>{{$album->description}}</p> <p>{{count($album->Photos)}} image(s).</p> <p>Created date: {{ date("d FY",strtotime($album->created_at)) }} at {{date("g:ha",strtotime($album->created_at)) }}</p> <p><a href="{{route('show_album', ['id'=>$album->id])}}" class="btn btn-big btn-default"> </a></p> </div> </div> </div> @endforeach </div> </div><!-- /.container --> </div> </body> </html>
O conteúdo includes/header.blade.php :
<!doctype html> <html lang="ru"> <head> <meta charset="UTF-8"> <title> </title> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" rel="stylesheet"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script> <style> body { padding-top: 50px; } .starter-template { padding: 40px 15px; text-align: center; } </style> </head>
O conteúdo includes/nav.blade.php :
<div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <button type="button" class="navbar-toggle"data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/"> </a> <div class="nav-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="{{URL::route('create_album_form')}}"> </a></li> </ul> </div><!--/.nav-collapse --> </div> </div>
Isso é tudo por hoje! Obviamente, essa é apenas a primeira parte do nosso aplicativo. Obrigado a todos pela atenção. Na próxima parte, suplementaremos nossa
view e discutiremos a questão da validação de imagens.
Links úteis:Documentação em russoUm guia útil em inglês que, melhor que a documentação, explica como a herança e a extensão dos modelos Blade funcionamMuitas informações úteis e exemplos práticos de criação de aplicativos