Laravel: Erklären Sie die Grundkonzepte. Zweiter Teil: Üben

Hallo allerseits! Wir setzen die Reihe der urheberrechtlichen Veröffentlichungen im Vorgriff auf den Beginn des Kurses „Framework Laravel“ fort . In einem früheren Artikel haben wir uns mit den theoretischen Grundlagen von Laravel befasst. Die Theorie eines Frameworks kann jedoch lange studiert werden und versteht nichts, bis Sie etwas in der Praxis schreiben.



Schreiben wir daher eine Anwendung, in der sich jeder Benutzer anmelden, neue Alben erstellen und dort Fotos hochladen kann. Wenn Sie noch nicht wissen, was MVC ist, lesen Sie dies , bald müssen Sie es in der Praxis verwenden .

Anleitungen dieser Art beginnen mit einer Erklärung zum Einrichten Ihrer Umgebung usw. Das Problem ist, dass es auf jeder Plattform anders ist, aber ich möchte, dass der Artikel für alle interessant ist. Ich werde nur Links zu den notwendigen geben, und Sie werden versuchen, es selbst zu installieren und zu konfigurieren.

Also brauchen wir:



Komponist Für diejenigen im Tank ist Composer ein Paketmanager für PHP (ja, wie npm für JavaScript). Sie können es hier herunterladen.

Laravel selbst. Hier gibt es einige der beliebtesten Optionen: Homestead und Valet (und in der Tat viele andere). Letzteres ist jedoch nur für Mac OS geeignet. Technisch kann der Leser jede bevorzugte Baugruppe verwenden, wenn sie nur diese Anforderungen erfüllt.

Und ein subtiles Detail, aber Node.js wird auch benötigt, damit wir npm-Pakete installieren können.

Führen Sie den folgenden Befehl aus: composer global require laravel/installer , um Laravel zu installieren.

Denken Sie daran, das $Home/.composer/vendor/bin (oder das entsprechende $Home/.composer/vendor/bin auf Ihrem Betriebssystem) in Ihre PATH Variable PATH , damit der Befehl Laravel auf Ihrem System funktioniert.

Ein gutes Projekt beginnt also mit einem verständlichen TOR. Versuchen wir, die Grundvoraussetzungen für unsere einfache Anwendung zu formulieren:



Der Benutzer hat die Möglichkeit, Fotos in von ihm erstellten Alben auf die Website hochzuladen. Er kann sich registrieren und anmelden. Die Datenbank ist MySQL. Das Framework, das zur Vereinfachung des Layoutprozesses verwendet wird, ist Bootstrap, das am häufigsten verwendete Layout-Framework.

Die erste Aktion, die Sie unmittelbar nach der Erstellung ausführen, ist das Verbinden der Datenbank. Wenn Sie immer noch nicht verstehen, wie Sie Ihre Datenbank installieren und ausführen, verwenden Sie vorgefertigte Desktop-Lösungen der Evil Corporation: hier und hier . Dies wird zunächst ausreichen.

Also ist alles fertig. Wir gehen in Ihr Lieblingsverzeichnis und starten das Projekt mit

 laravel new gallery 

Als nächstes müssen Sie unsere Datenbank verbinden. Gehen Sie dazu durch den MySQL-Zweig und erstellen Sie eine neue Galeriedatenbank (vergessen Sie nicht, den Zeichensatz auf utf-8 und ationollation auf utf_general_ci zu utf_general_ci , um Probleme mit der russischen Sprache zu vermeiden).



.ENV Nächstes zur .ENV Datei und konfigurieren Sie eine ähnliche Verbindung. .ENV daran, die Variablen in Ihren Benutzernamen und Ihr Kennwort zu ändern:

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

Danach können wir unsere Datenbanken migrieren.

 php artisan migrate 

Wenn Sie Ihre Verbindung in .ENV richtig .ENV haben, sollte alles für Sie funktionieren.

Wie wir uns auf t / z geeinigt haben, haben wir einen Autorisierungs- und Registrierungsprozess, und der Benutzer hat auch die Möglichkeit, dort Alben zu erstellen und Fotos hochzuladen. Um alles zu implementieren, benötigen wir die entsprechenden Tabellen in der Datenbank.

Erstellen Sie die Albumtabelle

Wo beginnt das Backend? Vom Erstellen einer Tabelle in unserer Datenbank. Dieser Befehl im Terminal bietet uns die Möglichkeit, in die Datenbank zu migrieren:

 php artisan make:migration CreateAlbumsTable 

Wir müssen also bestimmen, welche Spalten in unserer Tabelle enthalten sein sollen. Dies muss in der Datei erfolgen, die Sie aufgrund der letzten Migration erstellt haben. Es befindet sich in Ihrem Projekt im Ordner gallery/database/migrations und sein Name ist mit dem Zeitpunkt seiner Erstellung verknüpft. Es muss wie folgt bearbeitet werden:

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

Vergiss nicht zu tun

  php artisan migrate 

Nun sollte die Registerkarte Ihrer Datenbank in MySQL Branch die folgende Form annehmen:



Also haben wir unsere Datenbank erstellt. Jetzt müssen wir unsere Datenbank mit dem Eloquen- Modell verbinden, das mit unserer Datenbank interagiert.

Erstellen Sie ein Albummodell

Jetzt müssen wir ein eloquentes ORM-Modell erstellen. Wenn Sie nicht verstehen, wie schnell wir von einem zum anderen gewechselt sind, sollten Sie dies lesen . Wir werden denselben Artisan-Helfer verwenden, um die Modellvorlage zu generieren:


PHP Artisan machen: Modell Album

Als nächstes gehen wir zu gallery/app/Album.php und bearbeiten es:

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

Bildtabelle

Wow! Unser Albummodell ist fertig, jetzt können Sie unsere Bilder machen. Hier wird der Vorgang noch einmal wiederholt:

 php artisan make:migration CreateImagesTable 

Wir werden unsere Migration bearbeiten:

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

Und wieder machen wir die Migration:

 php artisan migrate 

Ich hoffe Ihre Migration ist ein Erfolg! Wir müssen jedoch noch etwas erklären, das zu lang gewesen wäre, um es in den Kommentaren aufzuschreiben: Wir haben den foreign , um die beiden Tabellen Alben und Bilder zu verbinden . Jedes Album hat seine eigenen Bilder. Wenn Sie eine Art Album löschen möchten, denken Sie wahrscheinlich, dass die Fotos auch gelöscht werden.

Bildmodell

Es ist Zeit, ein Modell zu erstellen, das mit der Bildtabelle funktioniert. Ich hoffe, Sie raten bereits, was zu tun ist:

 php artisan make:model Image 

Die Vorlage wird erstellt. Gehen Sie zu gallery/app/Image.php , um sie zu bearbeiten.
Auch hier sollte alles klar sein:

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

Unser Bildmodell ist fertig. Jetzt brauchen wir einen Controller, um Alben in unserer Datenbank zu erstellen.

Albumerstellung

Um in unserem Album zu speichern, anzuzeigen und zu löschen, benötigen wir einige Funktionen in unserem Controller. Aber zuerst brauchen Sie den Controller selbst:

 php artisan make:controller AlbumsController 

Gehen Sie zu 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'); } } 

Dann müssen wir unsere Wege neu definieren. Für diejenigen, die es nicht wissen, umfasst das Routing die Pfade, die dem Benutzer im Browser angezeigt werden, und die Aktionen, die unsere Anwendung ausführen soll. Wir gehen zur Datei 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')); 

Wow. Damit unsere Anwendung Geld verdienen kann, müssen wir sicherstellen, dass wir die erforderlichen Links zu den Bezeichnungen (Alias) der Klassen haben, die wir am Ende der gallery/config/app.php . Dies sind nur technische Einstellungen:

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

Großartig! Jetzt müssen wir unsere Ideen definieren! Wechseln Sie in den Ordner gallery/resources/views . Sie können welcome.blade.php löschen, Sie können gehen, es spielt keine Rolle. Erstellen Sie index.blade.php und includes Unterordner, um die sich wiederholenden Teile der view hinzuzufügen. Unsere index.blade.php sollte also die folgende Form haben:

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

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

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

Das ist alles für heute! Dies ist natürlich nur der erste Teil unserer Bewerbung. Vielen Dank für Ihre Aufmerksamkeit. Im nächsten Teil werden wir unsere view ergänzen und das Thema Bildvalidierung diskutieren.

Nützliche Links:

Dokumentation in russischer Sprache
Eine nützliche Anleitung auf Englisch, die besser als die Dokumentation erklärt, wie die Vererbung und Erweiterung von Blade-Vorlagen funktioniert
Viele nützliche Informationen und praktische Beispiele zum Erstellen von Anwendungen