Laravel: شرح المفاهيم الأساسية. الجزء الثاني: الممارسة

مرحبا بالجميع! نواصل سلسلة منشورات حقوق النشر تحسبا لبدء دورة "Framework Laravel" . في مقال سابق ، نظرنا إلى الأسس النظرية لارافيل. ومع ذلك ، يمكن دراسة نظرية أي إطار لفترة طويلة ولن تفهم أي شيء حتى تكتب أي شيء في الممارسة.



لذلك ، دعونا نكتب تطبيقًا يمكن لكل مستخدم تسجيل الدخول إليه وإنشاء ألبومات جديدة وتحميل الصور هناك. إذا كنت لا تعرف بعد ما هو MVC ، فاقرأ هذا ، وسيتعين عليك استخدامه في الممارسة العملية قريبًا .

تبدأ الأدلة من هذا النوع بشرح لكيفية إعداد البيئة الخاصة بك ، إلخ. المشكلة هي أنه في كل منصة مختلفة ، لكنني أريد أن تكون المقالة مثيرة للاهتمام للجميع. سأقدم فقط روابط لما ستحتاج إليه ، وستحاول تثبيته وتكوينه بنفسك.

لذلك نحن بحاجة:



الملحن. بالنسبة لأولئك في الخزان ، يعد Composer مديرًا لحزم PHP (نعم ، مثل npm لـ JavaScript). يمكنك تنزيله من هنا .

لارافيل نفسه. هناك بعض الخيارات الأكثر شعبية هنا: Homestead and Valet (وفي الواقع ، العديد من الخيارات الأخرى). ومع ذلك ، فإن هذا الأخير مناسب فقط لنظام التشغيل Mac OS. من الناحية الفنية ، يمكن للقارئ استخدام أي مجموعة مفضلة ، إذا كان يفي فقط بهذه المتطلبات.

وتفاصيل دقيقة ، ولكن Node.js ستكون مطلوبة أيضًا لتثبيت حزم npm.

قم بتشغيل الأمر: composer global require laravel/installer لتثبيت Laravel.

تذكر وضع دليل $Home/.composer/vendor/bin (أو ما يعادله على نظام التشغيل الخاص بك) في متغير PATH الخاص بك بحيث يعمل أمر Laravel على نظامك.

لذلك ، يبدأ مشروع جيد مع TOR مفهومة. دعنا نحاول صياغة المتطلبات الأساسية لتطبيقنا البسيط:



لدى المستخدم الفرصة لتحميل الصور إلى الموقع في ألبومات أنشأها. يمكنه التسجيل ، ويمكنه تسجيل الدخول. قاعدة البيانات هي الخلية. إطار العمل المستخدم لتبسيط عملية التخطيط هو Bootstrap ، باعتباره إطار التخطيط الأكثر شيوعًا.

الإجراء الأول الذي تقوم به مباشرة بعد الإنشاء هو ربط قاعدة البيانات. إذا كنت لا تزال لا تفهم كيفية تثبيت قاعدة البيانات وتشغيلها ، فاستخدم حلول سطح المكتب الجاهزة من شركة Evil Corporation: هنا وهنا . هذا سيكون كافيا في البداية.

لذلك ، كل شيء جاهز. نذهب إلى الدليل المفضل لديك وبدء المشروع مع

 laravel new gallery 

القادمة تحتاج إلى ربط قاعدة البيانات الخاصة بنا. للقيام بذلك ، انتقل إلى MySQL Branch وقم بإنشاء قاعدة بيانات جديدة للمعرض (لا تنسَ تعيين "مجموعة الأحرف" على utf-8 ، و ollation إلى utf_general_ci لتجنب حدوث مشاكل في اللغة الروسية).



بعد ذلك ، انتقل إلى ملف .ENV وقم بتكوين اتصال مماثل ، مع تذكر تغيير المتغيرات إلى اسم المستخدم وكلمة المرور الخاصة بك:

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

بعد ذلك ، سنكون قادرين على ترحيل قواعد البيانات الخاصة بنا.

 php artisan migrate 

إذا قمت بتكوين اتصالك في .ENV بشكل صحيح ، فيجب أن يعمل كل شيء من أجلك.

كما اتفقنا على t / z ، سيكون لدينا عملية ترخيص وتسجيل ، وكذلك ستتاح للمستخدم الفرصة لإنشاء ألبومات وتحميل الصور هناك. لتنفيذ كل ما نحتاج إليه الجداول المناسبة في قاعدة البيانات.

إنشاء جدول ألبومات

فأين تبدأ الواجهة الخلفية؟ من إنشاء جدول في قاعدة البيانات الخاصة بنا. سيخلق هذا الأمر في المحطة فرصة لنا للانتقال إلى قاعدة البيانات:

 php artisan make:migration CreateAlbumsTable 

لذلك ، نحن بحاجة إلى تحديد الأعمدة التي يجب أن تكون في جدولنا. يجب أن يتم ذلك في الملف الذي قمت بإنشائه بسبب الترحيل الأخير. إنه موجود في مشروعك في مجلد gallery/database/migrations ويرتبط اسمه بوقت إنشائه. يجب تحريرها على النحو التالي:

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

لا تنس أن تفعل

  php artisan migrate 

الآن يجب أن تأخذ علامة تبويب قاعدة البيانات في فرع MySQL النموذج التالي:



لذلك ، أنشأنا قاعدة البيانات الخاصة بنا ، والآن نحن بحاجة إلى ربط قاعدة البيانات الخاصة بنا مع نموذج Eloquen ، والذي سيتفاعل مع قاعدة البيانات الخاصة بنا.

إنشاء نموذج الألبوم

الآن نحن بحاجة إلى إنشاء نموذج ORM البليغ. إذا كنت لا تفهم كيف انتقلنا بسرعة من واحدة إلى أخرى ، يجب عليك قراءة هذا. سنستخدم نفس المساعد الحرفي لإنشاء قالب النموذج:


جعل الحرفيين php: نموذج الألبوم

بعد ذلك ، نذهب إلى 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'); } } 

جدول الصور

عظيم! نموذج الألبوم لدينا جاهز ، والآن يمكنك عمل صورنا. هنا تتكرر العملية مرة أخرى:

 php artisan make:migration CreateImagesTable 

سنقوم بتحرير ترحيلنا:

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

ومرة أخرى نقوم بالهجرة:

 php artisan migrate 

آمل أن تكون هجرتك ناجحة! ومع ذلك ، نحتاج إلى توضيح شيء آخر أطول من أن يكتبه في التعليقات: استخدمنا المفتاح foreign للانضمام إلى الجدولين ألبومات وصور . يحتوي كل ألبوم على صوره الخاصة ، وإذا كنت ترغب في حذف نوع ما من الألبوم ، فمن المحتمل أن تعتقد أنه سيتم حذف الصور أيضًا.

نموذج الصورة

حان الوقت لإنشاء نموذج سيعمل مع جدول الصور . أتمنى أن تخمن ما يجب فعله:

 php artisan make:model Image 

تم إنشاء القالب ، انتقل إلى gallery/app/Image.php لتحريره.
هنا ، أيضًا ، يجب أن يكون كل شيء واضحًا:

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

نموذج الصور لدينا جاهز. نحتاج الآن إلى وحدة تحكم لإنشاء ألبومات في قاعدة البيانات الخاصة بنا.

إنشاء الألبوم

من أجل الحفظ والإظهار والحذف في ألبومنا ، نحتاج إلى بعض الوظائف في جهاز التحكم لدينا. لكن أولاً تحتاج إلى وحدة التحكم نفسها:

 php artisan make:controller AlbumsController 

انتقل إلى 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'); } } 

ثم يتعين علينا إعادة تحديد مساراتنا. بالنسبة لأولئك الذين لا يعرفون ، يقوم التوجيه بإعداد المسارات التي يتم عرضها للمستخدم في المتصفح والإجراءات التي يجب أن يؤديها تطبيقنا. نذهب إلى ملف 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')); 

نجاح باهر. من أجل أن يكسب تطبيقنا الأموال ، نحتاج إلى التأكد من أن لدينا الروابط اللازمة للتسميات (الاسم المستعار) للفئات التي نحتاجها في نهاية ملف gallery/config/app.php . هذه هي الإعدادات الفنية فقط:

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

! ممتاز الآن نحن بحاجة إلى تحديد أفكارنا! انتقل إلى gallery/resources/views المجلد. يمكنك حذف welcome.blade.php ، يمكنك المغادرة ، لا يهم. إنشاء index.blade.php includes مجلد فرعي لإضافة الأجزاء المكررة view . لذلك ، يجب أن يأخذ index.blade.php النموذج التالي:

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

includes/header.blade.php المحتوى 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> 

includes/nav.blade.php المحتوى 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> 

هذا كل شيء لهذا اليوم! هذا ، بالطبع ، هو فقط الجزء الأول من طلبنا. شكرا لكم جميعا على اهتمامكم ، في الجزء التالي سنكمل view نظرنا ونناقش مسألة التحقق من صحة الصورة.

روابط مفيدة:

الوثائق باللغة الروسية
دليل مفيد باللغة الإنجليزية أفضل من الوثائق يوضح كيفية عمل الوراثة وتوسيع قوالب Blade
الكثير من المعلومات المفيدة والأمثلة العملية لإنشاء التطبيقات