Tutorial Laravel untuk Pemula

Apa itu Laravel?

LARAVEL adalah kerangka kerja MVC web sumber terbuka untuk PHP. Laravel adalah kerangka kerja tangguh yang menyediakan kemudahan pengembangan aplikasi web PHP dengan fitur seperti sistem pengemasan modular dengan manajer ketergantungan khusus, akses ke database relasional, dan utilitas lain untuk penerapan dan pemeliharaan aplikasi.

Laravel diciptakan oleh Taylor Otwell. Sejak pertama kali dirilis pada bulan Juni 2011 (versi 1), ia semakin populer di sektor kerangka PHP dalam industri pengembangan web. Sebagian besar popularitas ini dapat dikaitkan dengan banyaknya fitur yang mengutamakan pengembang yang disertakan dengan stok.

Kenapa Laravel?

Sekitar tahun 2000, sebagian besar kode PHP bersifat prosedural dan dapat ditemukan dalam bentuk "skrip" yang memiliki kode spageti yang berantakan. Bahkan halaman yang paling sederhana pun tidak memilikinya pemisahan masalah, dan dengan demikian cukup mudah bagi sebuah aplikasi untuk dengan cepat berkembang menjadi mimpi buruk pemeliharaan. Dunia membutuhkan sesuatu yang lebih baik…Masukkan PHP versi 5 dan berbagai kerangka kerja PHP yang berupaya memberikan resolusi yang sangat dibutuhkan dan solusi yang lebih baik untuk berbagai masalah aplikasi web.

Sejak itu kita telah melihat banyak kerangka kerja dirilis yang akan membuka jalan bagi kerangka kerja populer yang ada dan digunakan saat ini. Saat ini, tiga teratas (menurut kami) adalah Zend Framework, Symfony dan tentu saja Laravel. Meskipun masing-masing kerangka kerja ini didasarkan pada prinsip-prinsip serupa dan diarahkan untuk menyelesaikan (pada dasarnya) permasalahan umum yang sama, perbedaan utamanya terletak pada implementasinya. Masing-masing dari mereka mempunyai cara tersendiri dalam memecahkan masalah. Ketika Anda melihat kode yang dihasilkan oleh masing-masingnya, Anda akan melihat bahwa ada garis yang cukup solid yang memisahkan mereka satu sama lain. Menurut pendapat kami, kerangka Laravel adalah yang terbaik.

Pelajari lebih lanjut tentang Perbedaan Laravel dan CodeIgniter

Cara Download dan Install Laravel dengan Composer

CATATAN Diasumsikan bahwa Anda sudah memiliki salinan PHP yang terinstal di sistem lokal Anda. Jika belum, Anda bisa membaca cara menginstalnya di sini

Komposer adalah manajer paket dan ketergantungan. Untuk menginstalnya, buka terminal dan cd ke direktori baru. Jalankan perintah ini:

curl -Ss getcomposer.org/installer | php

Hasil dari perintah ini akan terlihat seperti ini:

Note Untuk instruksi lebih lengkap tentang pengaturan Laravel, lihat dokumentasi Laravel di sini.

Anda akan melihatnya mengunduh dan mengkompilasi skrip composer.phar, yang kami gunakan untuk menginstal Laravel. Meskipun ada banyak cara untuk menyiapkan aplikasi Laravel baru, kami akan melakukannya melalui skrip komposer Laravel. Untuk menginstal skrip ini, jalankan:

composer global require laravel/installer

Yang akan terlihat seperti ini:

Ini akan mengunduh dan memasang semua berkas kerangka kerja itu sendiri beserta semua dependensi yang diperlukannya. Paket-paket akan disimpan di dalam direktori vendor. Setelah diunduh dan dipasang, semudah mengeluarkan perintah berikut:

laravel new uploadApp

Anda akan melihat keluaran seperti berikut:

Komposer sedang menginstal semua paket yang dibutuhkan Laravel agar dapat dijalankan. Ini mungkin memakan waktu beberapa menit jadi bersabarlah. Setelah selesai, jalankan perintah ls -al untuk melihat apa yang telah diinstal.

Berikut ini rincian singkat direktori dalam aplikasi Laravel umum:

aplikasi/ : Ini adalah folder sumber tempat kode aplikasi kita berada. Semua pengontrol, kebijakan, dan model ada di dalam folder ini
tali sepatu/ : Menyimpan skrip startup aplikasi dan beberapa file peta kelas
konfigurasi/ : Menyimpan file konfigurasi aplikasi. Ini biasanya tidak diubah secara langsung melainkan bergantung pada nilai yang diatur dalam file .env (lingkungan) di root aplikasi
basis data/ : Menyimpan file database termasuk migrasi, seed, dan pabrik pengujian
publik/ : Folder yang dapat diakses publik menyimpan aset yang dikompilasi dan tentu saja file index.php
sumber daya/ : Berisi aset front-end seperti file javascript, file bahasa, file CSS/SASS dan semua template yang digunakan dalam aplikasi (disebut template blade)
rute/ : Semua rute dalam aplikasi ada di dalam sini. Ada beberapa “cakupan” rute yang berbeda tetapi yang akan kita fokuskan adalah file web.php
penyimpanan/ : Semua file cache sementara yang digunakan oleh aplikasi, file sesi, skrip tampilan yang dikompilasi, dan file log
tes/ : Berisi file pengujian untuk aplikasi seperti pengujian unit dan pengujian fungsional.
penjual/ : Semua paket ketergantungan diinstal dengan composer

Sekarang, mari kita buat aplikasi lainnya dan jalankan dengan perintah artisan khusus (untuk menghindari kerumitan menginstal dan mengkonfigurasi server web seperti Apache atau nginx). File .env berisi semua nilai konfigurasi yang digunakan file di direktori /config untuk mengonfigurasi aplikasi. Di dalamnya, Anda akan melihat nilai konfigurasi untuk berbagai parameter yang digunakan oleh internal aplikasi.

Desain aplikasi: Ikhtisar singkat tentang persyaratan kami

Dalam tutorial Laravel online ini, kita akan membangun aplikasi yang sangat sederhana yang hanya melakukan dua hal:

menangani unggahan file dari formulir web
menampilkan file yang diunggah sebelumnya di halaman berbeda.

Untuk proyek ini, aplikasi kita bersifat write-only, artinya pengguna hanya dapat menulis file dan melihat daftar file yang telah mereka unggah. Aplikasi ini sangat mendasar namun dapat menjadi praktik yang baik bagi Anda untuk mulai membangun keterampilan dan pengetahuan Laravel Anda. Perhatikan bahwa agar singkatnya, saya telah mengecualikan pemodelan database, migrasi, dan autentikasi apa pun, namun, dalam aplikasi dunia nyata, ini adalah hal-hal tambahan yang ingin Anda pertimbangkan.

Berikut adalah daftar komponen yang kita perlukan agar aplikasi berfungsi seperti yang diharapkan:

A rute yang akan memungkinkan dunia luar (internet) untuk menggunakan aplikasi serta menentukan titik akhir yang akan menunjuk ke tempat logika untuk menyimpan file yang diunggah berada
A pengawas yang menangani permintaan ke aliran respons
A Template yang akan digunakan untuk menampilkan daftar file yang diunggah sebelumnya dan formulir unggahan sebenarnya
A permintaan yang akan digunakan pengontrol untuk memvalidasi data yang dikirimkan dari formulir web

Apa itu Rute?

Rute di Laravel pada dasarnya adalah titik akhir yang ditentukan oleh URI yang bertindak sebagai “penunjuk” ke beberapa fungsi yang ditawarkan oleh aplikasi. Umumnya, rute hanya menunjuk ke suatu metode pada pengontrol dan juga menentukan metode HTTP mana yang dapat mencapai URI tersebut. Rute juga tidak selalu berarti metode pengontrol; itu hanya bisa meneruskan eksekusi aplikasi ke fungsi Penutupan atau anonim yang ditentukan juga.

Mengapa menggunakan Rute?

Rute disimpan di dalam berkas di bawah folder /routes di dalam direktori akar proyek. Secara default, ada beberapa berkas berbeda yang sesuai dengan "sisi" aplikasi yang berbeda ("sisi" berasal dari metodologi arsitektur heksagonal). Berikut ini adalah beberapa berkas:

web.php Publik menghadapi rute berbasis “browser”. Ini adalah yang paling umum dan yang terkena oleh browser web. Mereka dijalankan melalui grup middleware web dan juga berisi fasilitas untuk perlindungan csrf (yang membantu mempertahankan diri dari serangan dan peretasan jahat berbasis formulir) dan umumnya mengandung tingkat “status” (maksud saya, mereka menggunakan sesi)
api.php Rute yang sesuai dengan grup API dan dengan demikian middleware API diaktifkan secara default. Rute-rute ini tidak memiliki kewarganegaraan dan tidak memiliki sesi atau memori permintaan silang (satu permintaan tidak berbagi data atau memori dengan permintaan lainnya–masing-masing permintaan dienkapsulasi sendiri).
console.php Rute ini sesuai dengan perintah artisan khusus yang Anda buat untuk aplikasi Anda
channels.php Mendaftarkan rute untuk penyiaran acara

File kunci yang perlu diperhatikan saat ini adalah file khusus browser, web.php . Sudah ada satu rute yang ditentukan secara default, yaitu rute yang Anda tekan saat menavigasi ke root web aplikasi Anda (root web ada di direktori publik). Kita memerlukan tiga rute berbeda agar aplikasi pengunggahan kita dapat berfungsi:

/upload Ini akan menjadi URI halaman utama yang menampilkan formulir web kita untuk mengunggah file.
/process Di sinilah formulir yang terletak di /upload URI memposting data formulir yang dikirimkan ke ("tindakan") formulir
/list Ini akan mencantumkan semua file yang diunggah ke situs

mencatat Titik akhir /list mungkin tidak diperlukan jika kami ingin meletakkan semua logika untuk menampilkan formulir unggahan dan daftar file dalam satu halaman, namun, kami memisahkannya untuk saat ini untuk menambah lebih banyak materi pada subjek yang ada .

//inside routes/web.php
Route::get('/upload', 'UploadController@upload')->name('upload');
Route::get('/download, 'UploadController@download)->name(‘download');
Route::post('/process', 'UploadController@process')->name('process');
Route::get('/list', 'UploadController@list')->name('list');

Dalam tutorial framework Laravel ini, untuk setiap rute yang diinginkan, kita akan mencantumkannya secara eksplisit di file rute web.php menggunakan salah satu metode permintaan khusus HTTP yang tersedia (get(), post(), put() , delete(), patch() atau opsi() ). Untuk rincian masing-masingnya, periksa ini keluar. Apa yang dilakukan metode ini adalah menentukan kata kerja HTTP mana yang diizinkan untuk mengakses rute tertentu. Jika Anda memerlukan rute untuk dapat menerima lebih dari satu kata kerja HTTP (yang dapat terjadi jika Anda menggunakan satu halaman untuk menampilkan data awal dan mengirimkan data formulir yang dikirimkan), Anda dapat menggunakan Route::any( ) metode.

Argumen kedua untuk metode Route::get() dan Route::post() (dan metode terkait HTTP-verb lainnya pada fasad Route), adalah nama Controller dan metode spesifik yang termuat di dalam controller tersebut, yang dieksekusi setelah mencapai titik akhir rute dengan permintaan HTTP yang diizinkan (GET, POST, PATCH, dst.). Kami menggunakan UploadController untuk ketiga rute tersebut dan telah menetapkannya dengan cara berikut:

Metode terakhir yang kita panggil pada setiap rute adalah fungsi name(), yang menerima string tunggal sebagai argumen dan digunakan untuk “menandai” rute tertentu dengan nama yang mudah diingat (dalam kasus kami, unggah, proses, dan daftar). Saya menyadari sepertinya fitur ini tidak terlalu bagus untuk memberi nama masing-masing rute ketika URL diberi nama yang sama persis, tetapi ini sangat berguna ketika Anda memiliki rute tertentu seperti /users/profile/dashboard/config, yang akan lebih mudah diingat sebagai profil-admin atau konfigurasi pengguna.

Catatan tentang Fasad:

Fasad menyediakan antarmuka “statis” ke kelas-kelas yang tersedia di wadah layanan aplikasi.”
Mereka menyediakan sintaks yang singkat dan mudah diingat yang memungkinkan Anda menggunakan fitur Laravel tanpa mengingat nama kelas panjang yang harus dimasukkan atau dikonfigurasi secara manual.

Definisi rute di atas dalam tutorial kerangka Laravel ini, kami menggunakan fasad Rute alih-alih membuat instance objek Illuminate/Routing/Router baru secara manual dan memanggil metode yang sesuai pada objek tersebut. Itu hanya pintasan yang menghemat pengetikan. Fasad banyak digunakan di seluruh framework Laravel–Anda bisa dan harus lebih mengenalnya. Dokumen untuk Fasad dapat ditemukan di sini.

Apa itu Pengontrol?

Controller adalah “C” dalam arsitektur “MVC” (Model-View-Controller), yang menjadi dasar Laravel. Tugas controller dapat disederhanakan menjadi definisi sederhana ini: Ia menerima permintaan dari klien dan mengembalikan respons ke klien. Ini adalah definisi sederhana dan juga merupakan persyaratan minimum dari setiap pengontrol tertentu. Apa yang dilakukannya di antara kedua hal tersebut umumnya dianggap sebagai “tindakan” pengontrol (atau “implementasi rute”). Ini bertindak sebagai titik masuk kedua ke aplikasi (yang pertama adalah permintaan) ke klien, yang mengirimkan payload permintaan (yang akan kita bahas selanjutnya) ke aplikasi, mengharapkan beberapa jenis respons (dalam bentuk a halaman sukses, pengalihan, halaman kesalahan, atau jenis respons HTTP lainnya).

Pengontrol (pada dasarnya) melakukan hal yang sama seperti definisi rute dengan fungsi anonim yang ditetapkan sebagai "tindakan" ketika rute tersebut dicapai. Perbedaannya adalah bahwa pengontrol dapat bertahan dengan baik dalam pemisahan masalah sementara rute ditentukan sejalan dengan definisi url sebenarnya, yang pada dasarnya berarti kita menggabungkan URI yang ditetapkan pada rute dengan implementasi rute, atau kode yang dijalankan ketika rute tersebut adalah memukul.

Misalnya, dua potongan kode berikut akan mencapai hal yang sama:

Contoh #1: Definisi & implementasi rute di dalam satu pemanggilan metode (dalam file rute web.php)

//inside routes/web.php
<?php
Route::get('/hello-world', function(Request $request) {
   $name = $request->name;
   return response()->make("<h1>Hello World! This is ".$name, 200);
});

Contoh #2: Definisi rute ada di dalam rute/web.php, namun implementasinya berada di dalam kelas /app/Http/Controllers/HelloWorldController

//inside routes/web.php
<?php

Route::get('/hello-world', 'HelloWorldController@index')->name('hello-world');

------------------------------------------------------------------------------------
//inside app/Http/Controllers/HelloWorldController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;

class HelloWorldController extends Controller
{
   public function index(Request $request)
   {
       $name = $request->name;
       return response()->make("<h1>Hello World! This is ".$name, 200);
   }
}

Meskipun contoh Laravel #2 tampak seperti lebih banyak pekerjaan (padahal sebenarnya tidak – hanya sedikit lebih banyak kode saja), lihatlah manfaat yang kita peroleh dengan menempatkan logika tindakan kita untuk rute “hello-world” yang diberikan di dalam sebuah controller. dengan definisi rute sebagai fungsi panggilan balik:

Logika kami dipisahkan dengan rapi ke dalam kelasnya sendiri (pemisahan kekhawatiran)
Kontroler kami diatur untuk ekstensi nanti jika kami perlu menambahkan kemampuan tambahan ke dalamnya… Katakanlah mungkin kami ingin menambahkan fitur “selamat tinggal dunia”… Dalam kasus ini kami akan mengganti nama kontroler menjadi “HelloController” yang lebih umum lalu mendefinisikan dua metode terpisah, Halo() dan selamat tinggal(). Kita juga perlu mendefinisikan dua rute terpisah yang memetakan /Halo dan / Selamat tinggal URI ke metode yang sesuai pada pengontrol. Hal ini diinginkan dibandingkan dengan menggemukkan file rute dengan implementasi setiap rute yang didefinisikan sebagai fungsi panggilan balik.
Laravel memiliki kemampuan bawaan untuk menyimpan semua definisi rute dalam aplikasi dalam cache sehingga mempercepat waktu yang diperlukan untuk menemukan rute tertentu (meningkatkan kinerja aplikasi); Namun, Anda hanya dapat memanfaatkannya jika semua rute yang Anda tentukan di dalam aplikasi dikonfigurasikan menggunakan pemetaan khusus pengontrol (lihat Contoh #2 di atas)

Mari jalankan perintah ini yang akan menghasilkan pengontrol baru untuk kita.

// ...inside the project's root directory:
php artisan make:controller UploadController

Pada dasarnya, apa yang dilakukan perintah ini adalah menghasilkan stub untuk pengontrol bernama “UploadController” di dalam direktori pengontrol utama di /app/Http/Controllers/UploadController.php. Silakan buka file itu dan lihat. Ini sangat sederhana karena ini hanya versi pengontrol yang sudah di-stub, dengan jalur namespace yang benar dan kelas yang diperlukan dari mana pengontrol tersebut berasal.

Menghasilkan Permintaan

Sebelum kita lanjut ke tutorial PHP Laravel ini dan membuat beberapa perubahan pada stub yang dihasilkan UploadController, saya rasa akan lebih masuk akal untuk membuat kelas permintaan terlebih dahulu. Ini karena metode kontroler yang menangani permintaan harus mengetikkan petunjuk objek permintaan dalam tanda tangannya, yang memungkinkannya untuk secara otomatis memvalidasi data formulir yang masuk (sebagaimana ditentukan dalam metode rules(). Lebih lanjut tentang itu nanti…) Untuk saat ini, mari kita gunakan perintah artisan lagi untuk membuat stub permintaan kita:

php artisan make:request UploadFileRequest

Perintah ini akan menghasilkan file bernama UploadFileRequest di dalam app/Http/Requests/UploadFileRequest. Buka rintisan dan intip… Anda akan menemukannya sangat sederhana, hanya berisi dua metode, otorisasi() dan aturan.

Membuat Logika Validasi

Mari kita modifikasi stub permintaan untuk memenuhi kebutuhan aplikasi kita. Modifikasi file tersebut sehingga tampak seperti ini:

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class UploadFileRequest extends FormRequest
{
   /**
    * Determine if the user is authorized to make this request.
    *
    * @return bool
    */
   public function authorize()
   {
       return true;
   }

   /**
    * Get the validation rules that apply to the request.
    *
    * @return array
    */
   public function rules()
   {
       return [
           'fileName' => 'required|string',
           'userFile' => 'required|file'
       ];
   }
}

Tidak banyak perubahan tetapi perhatikan bahwa metode authorize() sekarang mengembalikan nilai true, bukan false. Metode ini memutuskan apakah permintaan tersebut boleh masuk ke dalam aplikasi atau tidak. Jika disetel ke false, ini menghentikan permintaan memasuki sistem (yang biasanya merupakan metode pada pengontrol). Ini akan menjadi tempat yang sangat berguna untuk melakukan pemeriksaan otorisasi pada pengguna atau logika lain yang dapat memutuskan apakah permintaan dapat diteruskan ke pengontrol. Untuk saat ini, kami hanya mengembalikan true di sini untuk mengizinkan apa pun menggunakan permintaan tersebut.

Metode lainnya, rule() adalah tempat semua keajaiban berperan terkait validasi. Idenya sederhana: mengembalikan array yang berisi seperangkat aturan dalam bentuk:

'formFieldName' => 'constraints this field has separated by pipe characters (|)'

Ada banyak batasan validasi berbeda yang didukung oleh Laravel secara langsung. Untuk daftar lengkapnya, lihat dokumentasi online di sini. Untuk aplikasi unggahan kami, akan ada dua bidang yang diteruskan melalui permintaan POST dari formulir di bagian depan. Parameter fileName harus disertakan di dalam badan formulir (yaitu wajib) dan digunakan sebagai nama file tempat kami akan menyimpan file di penyimpanan (ini dilakukan di pengontrol–kita akan membahasnya nanti). Kami juga menetapkan bahwa nama file harus berupa string dengan menambahkan karakter pipa (|) dan kata 'string'. Batasan selalu dibatasi oleh pipa, yang memungkinkan Anda untuk menetapkan kriteria tambahan apa pun untuk bidang yang diberikan dalam satu baris! Hebat sekali!

Parameter kedua, userFile , adalah file sebenarnya yang diunggah pengguna dari formulir di halaman web. UserFile juga diperlukan dan harus menjadi file. Catatan: Jika kami mengharapkan file yang diunggah berupa gambar, maka kami akan menggunakan batasan gambar, yang akan membatasi jenis file yang diterima menjadi salah satu jenis gambar populer (jpeg, png, bmp, gif, atau svg). Karena kami ingin mengizinkan pengguna mengunggah jenis file apa pun, kami hanya akan tetap menggunakan batasan validasi file.

Hanya itu yang ada pada objek permintaan. Tugas utamanya hanyalah mempertahankan serangkaian kriteria (batasan) yang dapat diterima yang harus dipenuhi oleh parameter isi formulir untuk melanjutkan aplikasi lebih dalam. Hal lain yang perlu diperhatikan adalah kedua field ini (userFile dan nama file) juga harus ditentukan di dalam kode HTML dalam bentuk field input (dengan nama field yang sesuai dengan nama di dalam objek permintaan).

Anda mungkin bertanya: yakin ini mendefinisikan karakteristik isi permintaan formulir, tetapi di mana pemeriksaan sebenarnya terhadap batasan ini dilakukan? Kita akan membahasnya selanjutnya.

Memodifikasi Pengontrol

Buka aplikasi/Http/Controllers/UploadController dan buat perubahan berikut:

<?php

namespace App\Http\Controllers;

use Illuminate\Contracts\Container\BindingResolutionException;
use Illuminate\Http\Request;
use App\Http\Requests\UploadFileRequest; //our new request class
use Illuminate\Support\Facades\Storage; 

class UploadController extends Controller
{
   /**
    * This is the method that will simply list all the files uploaded by name and provide a
    * link to each one so they may be downloaded
    *
    * @param $request : A standard form request object
    * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
    * @throws BindingResolutionException
    */
   public function list(Request $request)
   {
       $uploads = Storage::allFiles('uploads');

       return view('list', ['files' => $uploads]);
   }

   /**
    * @param $file
    * @return \Symfony\Component\HttpFoundation\BinaryFileResponse
    * @throws BindingResolutionException
    */
   public function download($file)
   {
       return response()->download(storage_path('app/'.$file));
   }

   /**
    * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
    * @throws BindingResolutionException
    */
   public function upload()
   {
       return view('upload');
   }

   /**
    * This method will handle the file uploads. Notice that the parameter's typehint
    * is the exact request class we generated in the last step. There is a reason for this!
    *
    * @param $request : The special form request for our upload application
    * @return array|\Illuminate\Http\UploadedFile|\Illuminate\Http\UploadedFile[]|null
    * @throws BindingResolutionException
    */
   public function store(UploadFileRequest $request)
   {
       //At this point, the parameters passed into the $request (from form) are
       //valid--they satisfy each of the conditions inside the rules() method

       $filename = $request->fileName;    //parameters have already been validated
       $file = $request->file('userFile'); //that we don't need any additional isset()

       $extension = $file->getClientOriginalExtension(); //grab the file extension
       $saveAs = $filename . "." . $extension; //filename to save file under

       $file->storeAs('uploads', $saveAs, 'local'); //save the file to local folder

       return response()->json(['success' => true]); //return a success message
   }
}

Jadi ini adalah pendekatan yang cukup mudah untuk menyimpan file yang diunggah ke disk. Berikut rincian metode upload() di atas:

Ketikkan petunjuk kelas permintaan dalam metode pengontrol yang melakukan fungsi 'daging dan kentang' sehingga kita dapat memvalidasi data yang masuk secara otomatis
Ambil file dari objek permintaan (sekarang divalidasi) di dalam metode pengontrol (dalam hal ini kami menamainya upload() tetapi bisa juga diberi nama dengan nama yang lebih standar seperti store()).
Ambil nama file dari permintaan
Hasilkan nama file akhir yang akan digunakan untuk menyimpan file di bawah. Metode getClientOriginalExtension() hanya mengambil ekstensi asli dari file yang diunggah.
Simpan file ke sistem file lokal menggunakan metode storeAs(), dengan meneruskan jalur bernama di dalam direktori /storage sebagai argumen pertama dan nama file untuk menyimpannya sebagai argumen kedua.
Kembalikan respons JSON yang menunjukkan permintaan berhasil

Templat Pisau

Bagian utama terakhir dari teka-teki ini adalah template blade, yang akan menampung semua HTML, CSS, dan javascript untuk aplikasi sederhana kita. Berikut kodenya–Kami akan menjelaskannya nanti.

<body>
   <h1>Upload a file</h1>
   <form id="uploadForm" name="uploadForm" action="{{route('upload')}}" enctype="multipart/form-data">
       @csrf
       <label for="fileName">File Name:</label>
       <input type="text" name="fileName" id="fileName" required /><br />
       <label for="userFile">Select a File</label>
       <input type="file" name="userFile" id="userFile" required />
       <button type="submit" name="submit">Submit</button>
   </form>
   <h2 id="success" style="color:green;display:none">Successfully uploaded file</h2>
   <h2 id="error" style="color:red;display:none">Error Submitting File</h2>
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
   <script>
        $('#uploadForm').on('submit', function(e) {
            e.preventDefault();
            var form = $(this);
            var url = form.attr('action');
            $.ajax({
                url: url,
                type: "POST",
                data: new FormData(this),
                processData: false,
                contentType: false,
                dataType: "JSON",
                success: function(data) {
                    $("#fileName").val("");
                    $("#userFile").val("");
                }
            }).done(function() {
                $('#success').css('display', 'block');
                window.setTimeout(()=>($("#success").css('display', 'none')), 5000);
            }).fail(function() {
                $('#error').css('display', 'block');
                window.setTimeout(()=>($("#error").css('display', 'none')), 5000);
            });
        });
   </script>
</body>
</html>

Inilah yang kami /mengunggah halaman terlihat seperti:

Ini adalah contoh yang sangat umum dari file blade yang berisi formulir HTML dan javascript/jQuery untuk menambahkan fungsionalitas asinkron (jadi halaman tidak menyegarkan). Ada dasar tag tanpa atribut metode (yang akan saya jelaskan sebentar lagi) dan dengan atribut tindakan yang aneh dengan nilai {{route('file.upload')}}. Dalam blade, ini dikenal sebagai Directive. Direktif hanyalah nama mewah untuk fungsi–ini adalah fungsi khusus untuk templat blade yang melakukan operasi berbeda yang umum untuk membuat halaman web dan aplikasi web. Untuk pemahaman yang lebih baik tentang semua hal keren yang bisa dilakukan blade, lihat dokumennya di sini. Dalam kasus di atas, kami menggunakan arahan rute untuk menghasilkan URL untuk pengiriman formulir kami.

Ingatlah bahwa kita telah mendefinisikan rute kita sebelumnya dalam aplikasi di dalam file web.php, menentukan nama yang mudah diingat untuk masing-masing rute. Direktif {{route()}} menerima nama rute, mencarinya di dalam daftar rute yang di-cache secara internal, dan menghasilkan URL lengkap berdasarkan definisi rute tersebut di file web.php. Untuk kasus pertama ini, kami menetapkan bahwa kami ingin formulir mengirimkan data yang dikirimkan ke /proses URL aplikasi kami, yang didefinisikan sebagai POST rute.

Hal aneh berikutnya yang mungkin Anda perhatikan adalah tag @csrf tepat di bawah tag form pembuka. Di blade, tag ini menghasilkan parameter _token pada formulir, yang diperiksa di dalam aplikasi sebelum data formulir diizinkan untuk diproses. Hal ini memastikan bahwa data di dalam formulir berasal dari sumber yang valid dan mencegah serangan pemalsuan permintaan lintas situs. Untuk informasi lebih lanjut mengenai hal ini, lihat docs.

Setelah ini kita mendefinisikan form kita seperti biasa, namun perlu diperhatikan bahwa nama parameter form kita, userFile dan fileName adalah yang sama persis seperti yang didefinisikan di dalam objek permintaan kami. Jika kita lupa memasukkan input untuk parameter tertentu yang ditentukan dalam objek permintaan (atau salah mengejanya), permintaan akan gagal dan kesalahan akan dikembalikan, sehingga permintaan formulir asli tidak dapat mengenai metode pengontrol yang terletak di UploadController@ proses .

Silakan mencobanya dan kirimkan beberapa file ke aplikasi menggunakan formulir ini. Setelah itu, navigasikan ke /daftar halaman untuk melihat isi folder unggahan, dengan file yang Anda unggah tercantum dalam tabel:

The Bigger Picture

Mari kita mundur selangkah dan melihat apa yang telah kita lakukan dalam tutorial Laravel ini.

Diagram ini menggambarkan aplikasi sebagaimana adanya saat ini (detail tingkat tinggi dikecualikan):

Anda harus ingat bahwa objek permintaan yang kita buat di awal tutorial Laravel ini harus memiliki parameter yang sama yang ditentukan dalam metode aturannya seperti pada formulir di templat blade (jika tidak baca kembali bagian “Membuat Logika Validasi”) . Pengguna memasukkan formulir di halaman web yang ditampilkan melalui mesin templat blade (proses ini tentu saja dilakukan secara auto-pilot sehingga kita tidak perlu memikirkannya) dan mengirimkan formulir. Kode jQuery templat di bagian bawah menghentikan pengiriman default (yang secara otomatis akan dialihkan ke halaman terpisah), membuat permintaan ajax, memuat permintaan dengan data formulir dan mengunggah file, dan mengirimkan semuanya ke lapisan pertama kita aplikasi: permintaan.

Objek permintaan diisi dengan mengaitkan parameter di dalam metode rule() dengan parameter formulir yang dikirimkan, lalu memvalidasi data sesuai dengan setiap aturan yang ditentukan. Jika semua aturan dipenuhi, permintaan akan diteruskan ke metode pengontrol apa pun yang sesuai dengan nilai yang ditentukan dalam file rute web.php. Dalam hal ini, metode process() dari UploadController-lah yang melakukan pekerjaannya. Setelah kita menekan pengontrol, kita sudah tahu bahwa permintaan tersebut lolos validasi sehingga kita tidak perlu menguji ulang apakah nama file yang diberikan sebenarnya adalah string atau parameter userFile benar-benar menampung beberapa jenis file… Kita dapat melanjutkan sebagai normal.

Metode pengontrol kemudian mengambil parameter yang divalidasi dari objek permintaan, menghasilkan nama file lengkap dengan menggabungkan parameter fileName yang diteruskan dengan ekstensi asli userFile, menyimpan file di dalam direktori di aplikasi kita, lalu mengembalikan kode JSON sederhana tanggapan memverifikasi bahwa permintaan berhasil. Responsnya diterima oleh logika jQuery, yang melakukan beberapa tugas terkait UI seperti menampilkan pesan sukses (atau kesalahan) selama 5 detik lalu menyembunyikannya serta menghapus entri formulir sebelumnya…ini agar pengguna mengetahuinya yang pasti permintaannya berhasil dan dapat mengunggah file lain, jika diinginkan.

Perhatikan juga diagram di atas, di mana garis ditarik antara klien dan server. Konsep ini sangat penting untuk Anda pahami dan akan membantu Anda memecahkan masalah dan kendala yang mungkin Anda hadapi di masa mendatang saat menangani, misalnya, beberapa permintaan asinkron yang dapat terjadi pada waktu tertentu. Pemisahan ini tepat di batas objek permintaan. Objek permintaan itu sendiri dapat dianggap sebagai "gerbang" ke seluruh aplikasi... Objek ini melakukan validasi awal dan registrasi nilai formulir yang diteruskan dari peramban web. Jika dianggap valid, maka akan berlanjut ke pengontrol. Semua yang ada sebelum itu ada di ujung depan ("klien" secara harfiah berarti "di komputer pengguna"). Respons dikembalikan dari aplikasi ke sisi klien, tempat kode jQuery kita dengan sabar mendengarkan kedatangannya dan melakukan beberapa tugas UI sederhana setelah menerimanya.

Kami telah membahas hampir 90+ pertanyaan penting yang sering ditanyakan Pertanyaan wawancara terkait Laravel dan PHP bagi kandidat baru dan berpengalaman untuk mendapatkan pekerjaan yang tepat.