Halo semuanya! Kami melanjutkan serangkaian publikasi hak cipta untuk mengantisipasi dimulainya kursus
"Framework Laravel" . Dalam
artikel sebelumnya
, kami melihat fondasi teoritis Laravel. Namun, teori kerangka kerja apa pun dapat dipelajari untuk waktu yang lama dan tidak memahami apa pun sampai Anda menulis apa pun dalam praktik.
Karena itu, mari kita menulis aplikasi di mana setiap pengguna dapat login, membuat album baru dan mengunggah foto di sana.
Jika Anda belum tahu apa itu MVC, baca ini , segera Anda harus menggunakannya dalam praktek .
Panduan semacam ini mulai dengan penjelasan tentang cara mengatur lingkungan Anda, dll. Masalahnya adalah bahwa pada setiap platform berbeda, tetapi saya ingin artikel tersebut menarik bagi semua orang. Saya hanya akan memberikan tautan ke yang diperlukan, dan Anda akan mencoba menginstal dan mengkonfigurasinya sendiri.
Jadi kita membutuhkan:
Komposer Bagi mereka yang ada di dalam tangki, Komposer adalah pengelola paket untuk PHP (ya, seperti npm untuk JavaScript). Anda dapat mengunduhnya di
sini .
Laravel sendiri. Ada beberapa opsi paling populer di sini: Homestead dan Valet (dan sebenarnya, banyak lainnya). Namun, yang terakhir ini hanya cocok untuk Mac OS. Secara teknis, pembaca dapat menggunakan rakitan favorit apa saja, jika hanya memenuhi persyaratan
ini .
Dan detail yang halus, tetapi
Node.js juga akan diperlukan bagi kita untuk menginstal paket npm.
Jalankan perintah:
composer global require laravel/installer untuk menginstal Laravel.
Ingatlah untuk meletakkan
$Home/.composer/vendor/bin (atau yang setara pada OS Anda) ke dalam variabel
PATH Anda sehingga perintah Laravel bekerja pada sistem Anda.
Jadi, proyek yang bagus dimulai dengan TOR yang bisa dimengerti.
Mari kita coba merumuskan persyaratan dasar untuk aplikasi sederhana kita:
Pengguna memiliki kesempatan untuk mengunggah foto ke situs dalam album yang dibuat olehnya. Dia bisa mendaftar, dan bisa masuk. Basis datanya adalah MySQL. Kerangka kerja yang digunakan untuk menyederhanakan proses tata letak adalah Bootstrap, sebagai kerangka kerja tata letak yang paling umum.
Tindakan pertama yang Anda ambil segera setelah pembuatan adalah menghubungkan database. Jika Anda masih tidak mengerti cara menginstal dan menjalankan database Anda, gunakan solusi desktop yang sudah jadi dari Evil Corporation: di
sini dan di
sini . Ini akan cukup pada awalnya.
Jadi semuanya sudah siap. Kami pergi ke direktori favorit Anda dan memulai proyek dengan
laravel new gallery
Selanjutnya Anda perlu menghubungkan basis data kami. Untuk melakukan ini, buka Cabang MySQL dan buat database
galeri baru (jangan lupa untuk mengatur Set Karakter ke utf-8, dan ollation ke
utf_general_ci untuk menghindari masalah dengan bahasa Rusia).
Selanjutnya, buka file
.ENV dan konfigurasikan koneksi serupa, ingat untuk mengubah variabel ke nama pengguna dan kata sandi Anda:
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=gallery DB_USERNAME=pavel DB_PASSWORD=
Setelah itu, kami akan dapat memigrasi basis data kami.
php artisan migrate
Jika Anda mengonfigurasi koneksi Anda di
.ENV dengan benar, maka semuanya akan bekerja untuk Anda.
Saat kami menyetujui t / z, kami akan memiliki proses otorisasi, pendaftaran, dan juga pengguna akan memiliki kesempatan untuk membuat album dan mengunggah foto di sana. Untuk mengimplementasikan semua yang kita butuhkan tabel yang sesuai dalam database.
Buat tabel album
Jadi di mana backend mulai? Dari membuat tabel di basis data kami. Perintah ini di terminal akan menciptakan peluang bagi kita untuk bermigrasi ke database:
php artisan make:migration CreateAlbumsTable
Jadi, kita perlu menentukan kolom mana yang harus ada di tabel kita. Ini harus dilakukan dalam file yang Anda buat karena migrasi terakhir. Itu terletak di proyek Anda di folder
gallery/database/migrations dan namanya dikaitkan dengan waktu pembuatannya. Itu harus diedit sebagai berikut:
<?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');
Jangan lupa lakukan
php artisan migrate
Sekarang tab dari database Anda di Cabang MySQL harus mengambil bentuk berikut:
Jadi, kami membuat basis data kami, sekarang kami harus menghubungkan basis data kami dengan model
Eloquen , yang akan berinteraksi dengan basis data kami.
Buat Model Album
Sekarang kita perlu membuat model ORM Eloquent. Jika Anda tidak mengerti bagaimana kami bergerak begitu cepat dari satu ke yang lain, Anda harus membaca
ini. Kami akan menggunakan pembantu Artisan yang sama untuk menghasilkan template model:
php artisan make: model Album
Selanjutnya, kita pergi ke
gallery/app/Album.php dan mengeditnya:
<?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'); } }
Tabel gambar
Wow! Model album kami sudah siap, sekarang Anda dapat melakukan gambar kami. Di sini prosesnya akan diulangi lagi:
php artisan make:migration CreateImagesTable
Kami akan mengedit migrasi kami:
<?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'); } }
Dan lagi kami melakukan migrasi:
php artisan migrate
Saya harap migrasi Anda berhasil! Namun, kami perlu menjelaskan satu hal lagi yang akan terlalu lama untuk dituliskan di komentar: kami menggunakan kunci
foreign untuk bergabung dengan dua tabel
Album dan
Gambar . Setiap album memiliki gambarnya sendiri, dan jika Anda ingin menghapus beberapa jenis album, Anda mungkin berpikir bahwa foto-foto itu juga akan dihapus.
Model Gambar
Saatnya membuat model yang akan bekerja dengan tabel
gambar . Saya harap Anda sudah menebak apa yang harus dilakukan:
php artisan make:model Image
Templat dibuat, pergi ke
gallery/app/Image.php untuk mengeditnya.
Di sini juga, semuanya harus jelas:
class Image extends Model { protected $table = 'images'; // , protected $fillable = array('album_id','description','image'); // }
Model
gambar kami siap. Sekarang kita membutuhkan pengontrol untuk membuat album di basis data kita.
Pembuatan album
Untuk menyimpan, menampilkan, dan menghapus di album kami, kami memerlukan beberapa fungsi di controller kami. Tetapi pertama-tama Anda perlu controller itu sendiri:
php artisan make:controller AlbumsController
Pergi ke
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'); } }
Maka kita harus mendefinisikan kembali jalan kita. Bagi mereka yang tidak tahu, perutean sedang menyiapkan jalur yang ditampilkan kepada pengguna di browser dan tindakan yang harus dilakukan aplikasi kita. Kami pergi ke file
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 Agar aplikasi kita menghasilkan uang, kita perlu memastikan bahwa kita memiliki tautan yang diperlukan ke label (alias) dari kelas yang kita butuhkan di akhir file gallery/config/app.php . Ini hanya pengaturan teknis:
'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 )
Hebat! Sekarang kita perlu mendefinisikan ide-ide kita! Buka folder
gallery/resources/views . Anda dapat menghapus
welcome.blade.php , Anda dapat pergi, itu tidak masalah. Buat
index.blade.php dan
includes subfolder untuk menambahkan bagian tampilan yang berulang. Jadi,
index.blade.php kami harus mengambil bentuk berikut:
@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>
Konten 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>
Konten 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>
Itu saja untuk hari ini! Ini, tentu saja, hanya bagian pertama dari aplikasi kita. Terima kasih atas perhatian Anda, pada bagian selanjutnya kami akan melengkapi
view kami dan mendiskusikan masalah validasi gambar.
Tautan yang bermanfaat:Dokumentasi dalam bahasa RusiaPanduan bermanfaat dalam bahasa Inggris yang lebih baik daripada dokumentasi menjelaskan cara kerja warisan dan ekstensi templat BladeBanyak informasi yang berguna dan contoh-contoh praktis untuk membuat aplikasi