Laravel: expliquer les concepts de base. Deuxième partie: pratique

Bonjour à tous! Nous poursuivons la série de publications sur le droit d'auteur en prévision du début du cours «Framework Laravel» . Dans un article précédent , nous avons examiné les fondements théoriques de Laravel. Cependant, la théorie de tout cadre peut être étudiée pendant longtemps et ne comprend rien tant que vous n’écrivez rien dans la pratique.



Par conséquent, écrivons une application dans laquelle chaque utilisateur peut se connecter, créer de nouveaux albums et y télécharger des photos. Si vous ne savez pas encore ce qu'est MVC, lisez ceci , vous devrez bientôt l'utiliser dans la pratique .

Les guides de ce type commencent par une explication de la configuration de votre environnement, etc. Le problème est que sur chaque plateforme, c'est différent, mais je veux que l'article soit intéressant pour tout le monde. Je vais juste donner des liens vers le nécessaire, et vous essayerez de l'installer et de le configurer vous-même.

Il nous faut donc:



Compositeur Pour ceux qui sont dans le tank, Composer est un gestionnaire de packages pour PHP (oui, comme npm pour JavaScript). Vous pouvez le télécharger ici .

Laravel lui-même. Il existe certaines des options les plus populaires ici: Homestead et Valet (et en fait, beaucoup d'autres). Cependant, ce dernier ne convient que pour Mac OS. Techniquement, le lecteur peut utiliser n'importe quel assemblage préféré, à condition qu'il réponde à ces exigences.

Et un détail subtil, mais Node.js nous sera également nécessaire pour installer les packages npm.

Exécutez la commande: composer global require laravel/installer pour installer Laravel.

N'oubliez pas de placer le $Home/.composer/vendor/bin (ou son équivalent sur votre système d'exploitation) dans votre variable PATH pour que la commande Laravel fonctionne sur votre système.

Ainsi, un bon projet commence par un TOR compréhensible. Essayons de formuler les exigences de base pour notre application simple:



L'utilisateur a la possibilité de télécharger des photos sur le site dans des albums créés par lui. Il peut s'inscrire et se connecter. La base de données est MySQL. Le framework utilisé pour simplifier le processus de mise en page est Bootstrap, en tant que framework de mise en page le plus courant.

La première action que vous effectuez immédiatement après la création est de connecter la base de données. Si vous ne comprenez toujours pas comment installer et exécuter votre base de données, utilisez des solutions de bureau toutes faites d'Evil Corporation: ici et ici . Ce sera suffisant au début.

Donc, tout est prêt. Nous allons dans votre répertoire préféré et commençons le projet avec

 laravel new gallery 

Vous devez ensuite connecter notre base de données. Pour ce faire, accédez à MySQL Branch et créez une nouvelle base de données de galeries (n'oubliez pas de définir le jeu de caractères sur utf-8, et ollation sur utf_general_ci pour éviter les problèmes avec la langue russe).



Ensuite, accédez au fichier .ENV et configurez une connexion similaire, en vous souvenant de changer les variables en votre nom d'utilisateur et votre mot de passe:

 DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=gallery DB_USERNAME=pavel DB_PASSWORD= 

Après cela, nous pourrons migrer nos bases de données.

 php artisan migrate 

Si vous avez correctement configuré votre connexion dans .ENV , tout devrait fonctionner pour vous.

Comme nous nous sommes mis d'accord sur t / z, nous aurons un processus d'autorisation, d'enregistrement, et l'utilisateur aura également la possibilité de créer des albums et d'y télécharger des photos. Pour implémenter tout, nous avons besoin des tables appropriées dans la base de données.

Créer la table des albums

Alors, où commence le backend? De la création d'une table dans notre base de données. Cette commande dans le terminal nous permettra de migrer vers la base de données:

 php artisan make:migration CreateAlbumsTable 

Nous devons donc déterminer quelles colonnes doivent figurer dans notre tableau. Cela doit être fait dans le fichier que vous avez créé en raison de la dernière migration. Il se trouve dans votre projet dans le dossier gallery/database/migrations et son nom est associé à l'heure de sa création. Il doit être modifié comme suit:

 <?php use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema; class CreateAlbumsTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('albums', function(Blueprint $table) { $table->increments('id')->unsigned(); $table->string('name'); //   $table->text('description'); //    $table->string('cover_image'); //   $table->timestamps(); //  .   ,     }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('albums'); } } 

N'oubliez pas de faire

  php artisan migrate 

Maintenant, l'onglet de votre base de données dans MySQL Branch devrait prendre la forme suivante:



Nous avons donc créé notre base de données, nous devons maintenant connecter notre base de données au modèle Eloquen , qui interagira avec notre base de données.

Créer un modèle d' album

Nous devons maintenant créer un modèle ORM Eloquent. Si vous ne comprenez pas comment nous sommes passés si rapidement de l’un à l’autre, vous devriez lire ceci. Nous utiliserons le même assistant Artisan pour générer le modèle de modèle:


php artisan make: Album modèle

Ensuite, nous allons dans gallery/app/Album.php et le gallery/app/Album.php :

 <?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'); } } 

Tableau des images

Ouah! Notre modèle d'album est prêt, vous pouvez maintenant faire nos images. Ici, le processus sera répété à nouveau:

 php artisan make:migration CreateImagesTable 

Nous allons éditer notre migration:

 <?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'); } } 

Et encore une fois, nous faisons la migration:

 php artisan migrate 

J'espère que votre migration est une réussite! Cependant, nous devons expliquer une chose qui aurait été trop longue à écrire dans les commentaires: nous avons utilisé la clé foreign pour joindre les deux tables Albums et Images . Chaque album a ses propres images, et si vous souhaitez supprimer une sorte d'album, vous pensez probablement que les photos seront également supprimées.

Modèle d' image

Il est temps de créer un modèle qui fonctionnera avec la table d' images . J'espère que vous devinez déjà quoi faire:

 php artisan make:model Image 

Le modèle est créé, allez dans gallery/app/Image.php pour le modifier.
Ici aussi, tout doit être clair:

 class Image extends Model { protected $table = 'images'; // ,      protected $fillable = array('album_id','description','image'); // } 

Notre modèle d' image est prêt. Nous avons maintenant besoin d'un contrôleur pour créer des albums dans notre base de données.

Création d'album

Afin de sauvegarder, afficher et supprimer dans notre album, nous avons besoin de certaines fonctions dans notre contrôleur. Mais vous avez d'abord besoin du contrôleur lui-même:

 php artisan make:controller AlbumsController 

Accédez à la 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'); } } 

Ensuite, nous devons redéfinir nos chemins. Pour ceux qui ne le savent pas, le routage configure les chemins qui sont affichés à l'utilisateur dans le navigateur et les actions que notre application doit effectuer. Nous allons dans le fichier 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')); 

Ouah. Pour que notre application gagne de l'argent, nous devons nous assurer que nous avons les liens nécessaires vers les étiquettes (alias) des classes dont nous avons besoin à la fin du gallery/config/app.php . Ce ne sont que des paramètres techniques:

 '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     ) 

Super! Maintenant, nous devons définir nos idées! Accédez au dossier gallery/resources/views . Vous pouvez supprimer welcome.blade.php , vous pouvez partir, peu importe. Créez index.blade.php et includes sous-dossier pour ajouter les parties répétitives de la view . Ainsi, notre index.blade.php devrait prendre la forme suivante:

 @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> 

Le contenu 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> 

Le contenu 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> 

C'est tout pour aujourd'hui! Ceci, bien sûr, n'est que la première partie de notre demande. Merci à tous pour votre attention, dans la prochaine partie nous compléterons notre view et discuterons de la question de la validation des images.

Liens utiles:

Documentation en russe
Un guide utile en anglais mieux que la documentation explique comment l'héritage et l'extension des modèles de lame fonctionnent
Beaucoup d'informations utiles et d'exemples pratiques de création d'applications