2. Konsep MVC (Model View Controllers) pada Laravel - Algoritma-dan-Pemrograman-ITS/camin-2023 GitHub Wiki
Setiap kali aplikasi mengirimkan response kepada pengakses, maka response tersebut juga akan mengirimkan sebuah kode status HTTP yang menandakan status request yang sebelumnya dikirim. Beberapa contoh dari HTTP status code yang sering dilihat adalah 404 Not Found, 400 Bad Request, 403 Forbidden, dan 500 Internal Server Error,.
- Respon Informasi (100โ199)
- Respon Sukses (200-299)
- Pesan redirection (300-399)
- Respon error pada sisi klien (400-499)
- Respon error pada sisi server (500-599)
Request berhasil.
Request berhasil dan sebuah resource baru berhasil dibuat. Umumnya merupakan response pada request yang menggunakan HTTP method POST ataupun PUT.
Server tidak dapat memproses request karena ada error dii sisi klien (format request yang tidak tepat, dll).
Klien tidak dapat memperoleh respons karena belum terautentikasi.
Klien tidak dapat memperoleh respons karena klien tidak memiliki hak akses terhadap resource yang ingin diakses.
Server tidak menemukan resource yang diminta melalui request.
Server mengalami error / situasi yang tidak dapat ditangani server.
Berikut ini adalah dokumentasi terkait HTTP codes https://developer.mozilla.org/en-US/docs/Web/HTTP/Status.
Unique Resource Identifier, yang disingkat menjadi URI, adalah sebuah kalimat unik yang menjadi tanda pengenal untuk sebuah resource pada aplikasi web. Jika terdapat sebuah Uniform Resource Identifier (URI) yang bernama http://example.org/wiki/main-page, maka URL dari URI tersebut adalah http://example.org, sedangkan Uniform Resource Name (URN) nya adalah /wiki/main-page. URN tersebut menjadi tanda pengenal untuk sebuah laman pada URL http://example.org. URI tidak dapat mengandung tanda spasi. Pada URI, pemisah antar kata yang umum digunakan adalah simbol -.
Pada penentuan URN dalam pengembangan aplikasi CRUD web/API, terdapat sebuah pola penamaan yang disebut RESTful routing. Pola ini bertujuan untuk menentukan penamaan rute (URN) yang efisien. Pola ini juga menekankan penggunaan HTTP verb sebagai sarana untuk mengkomunikasikan aksi yang diinginkan.
Berikut ini adalah contoh penerapan RESTful routing untuk beberapa endpoint pada modul photos:
Tulisan {photo} melambangkan id dari sebuah foto.
Pada Laravel, terdapat sebuah tipe controller yang menerapkan RESTful routing secara default. Controller ini bernama resource controller. Berikut ini dokumentasi terkait resource controller tersebut https://laravel.com/docs/9.x/controllers#resource-controllers.
Konsep MVC (Model-View-Controller) merupakan suatu konsep yang memisahkan kode suatu aplikasi menjadi 3 bagian yaitu model, view, dan controller.
- Model : untuk mengatur dan menyimpan data
- view : untuk menampilkan data/informasi
- controller : untuk mengatur interaksi antara model dan view. Menyimpan logika aplikasi
MVC itu Pola arsitektur pada perancangan perangkat lunak berorientasi objek โ web programming unpas
- Kode terorganisir dan terstruktur
- Proses pengembangan aplikasi menjadi lebih efisien
- Penulisan kode menjadi lebih rapi
- Dapat melakukan testing dengan lebih mudah
- Perbaikan bug atau error lebih cepat untuk diselesaikan
- Mempermudah pemeliharaan
- Digunakan oleh banyak web application framework
Bahasa | Framework |
---|---|
PHP | Codeigniter, laravel, Yii, dll |
Java | Spring MVC, JSF, Strutrs, dll |
Python | Django, CherryPy, dll |
Ruby | Ruby on Rails, Sinatra, dll |
Javascript | AngularJS, React, dll |
-
Memastikan ada PHP dan Composer
Sebelum membuat project laravel, pastikan bahwa di lokal mesin kamu sudah terinstall PHP dan Composer.
-
Cek apakah sudah ada PHP dengan cara menulis command (di terminal) :
php -v
kalau sudah terinstall, maka akan keluar versi php nya
-
Kalau belum, silakan install PHP. kamu bisa install melalui menginstall xampp [https://www.apachefriends.org/download.html](https://www.apachefriends.org/download.html) (download minimal php 8.1 supaya compatible di laravel 10). kalau pakai macOS, PHP dan composer dapat diinstall di [[Homebrew](https://brew.sh/)](https://brew.sh/).
- **Cek** apakah ada **composer** dengan cara tulis command `composer` di terminal.
Apabila belum ada, silakan download di [http://getcomposer.org/](http://getcomposer.org/)
-
Buat project menggunakan composer
Setelah kamu menginstall PHP dan Composer, kamu bisa membuat sebuah projek laravel baru melalui Composer dengan command
create-project
:composer create-project laravel/laravel camin-alpro-2023
Atau, kamu bisa membuat project baru laravel dengan dengan menginstall Laravel installer via Composer:
composer global require laravel/installer
laravel new camin-alpro-2023
Setelah project telah dibuat, start local development server Laravel menggunakan command Artisan CLI serve
Laravel:
cd camin-alpro-2023
php artisan serve
Setelah Anda memulai server pengembangan Artisan, aplikasi Anda akan dapat diakses di browser web Anda di http://localhost:8000/
Ada beberapa folder yang perlu kita perhatikan yang berkaitan dengan konsep MVC:
app/model
โ menyimpan model
resources/views
โ menyimpan views
app/Http/Controller
โ menyimpan Controller
routes/web
โ untuk mengatur routing
public
โ folder public
Sebelum masuk ke dalam MVC, kita harus mengetahui konsep routing. Setiap request alamat yang kita masukkan ke browser, akan direspon oleh server sesuai dengan response yang telah kita buat di dalam routing. Dalam laravel (secara default), routing web akan berada di file routes/web.php
Kita dapat me-return apapun untuk meresponse dari request URI yang diminta. Contohnya adalah gambar di atas yang akan me-return welcome view saat kita melakukan request dengan URI /
. Dia akan mencari file welcome
pada folder resources/views
, dan menampilk
Kita juga dapat me-return string, untuk itu, cobalah copy syntax berikut dan letakkan di bawah routing /
di file web.php
kita dan hasilnya adalah sebagai berikut.
Kita juga dapat me-return string, untuk itu, cobalah copy syntax berikut dan letakkan di bawah routing /
di file web.php
kita dan hasilnya adalah sebagai berikut.
Route::get('/test', function () {
return "Testing routing";
});
Lalu, bukalah browser dan arahkan ke URI http://127.0.0.1:8000/test
Kita dapat melakukan request dengan method-method di bawah ini:
Route::get($uri, $callback);
Route::post($uri, $callback);
Route::put($uri, $callback);
Route::patch($uri, $callback);
Route::delete($uri, $callback);
Route::options($uri, $callback);
View adalah bagian yang bertugas untuk menampilkan informasi dalam bentuk Graphical User Interface (GUI). Secara sederhana, view adalah source code yang akan ditampilkan dalam bentuk html di browser. Dalam Laravel, setiap file view akan terletak di dalam folder resources/views
dengan ekstensi file ~.blade.php
.
Dalam laravel, view yang digunakan disebut dengan blade templating engine. Secara sederhana, dengan menggunakan sistem templating dari laravel ini, kita dapat melakukan hal yang tidak bisa file dengan ekstensi html biasa lakukan.
Dengan menggunakan templating ini, kita bisa membuat sistem komponen untuk sebuah elemen yang akan kita gunakan secara terus menerus. Kita juga dapat melakukan beberapa operasi yang mempermudah dalam mengolah data yang diberikan ke view menggunakan templating engine ini.
Salah satu yang paling sering digunakan adalah layouting
. Untuk dapat lebih mengerti, buatlah sebuah file bernama layout.blade.php
di dalam folder resources/views/components/
File ini akan kita jadikan sebagai template awal yang berisi berbagai macam meta data, title page, dan dependency yang akan kita perlukan dalama pembuatan web kita. Sebagai contoh, kita akan menggunakan bootstrap CDN sebagai dependency yang akan kita pakai dalam modul ini.
Langkah pertama adalah copy html berikut ke dalam file layout.blade.php
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Camin Alpro 2023</title>
</head>
<body>
<h1>Ini dari layout</h1>
@yield('content')
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
</script>
</body>
</html>
Lalu buatlah file camin.blade.php
pada folder resources/views
. Dan copy baris berikut.
@extends('components/layout')
@section('content')
<h1>Daftar Camin Alpro 2023</h1>
@endsection
Selanjutnya tambahkan code berikut di file web.php
kita
Route::get('/camin', function () {
return view('camin');
});
Maka akan terlihat seperti dibawah ini
Selanjutnya, buka URI http://127.0.0.1:8000/camin
dan hasilnya adalah sebagai berikut
Bisa kita lihat, text dan style yang ditampilkan berasal dari file layout.blade.php
yang telah kita buat. Sedangkan terdapat juga text Daftar Camin Alpro 2022 yang didapatkan dari file camin.blade.php
yang menggunakan layout yang telah kita tetapkan.
Kalian bisa membuat banyak @yield(...)
untuk berbagai macam style layout berbeda di file layout.blade.php
kalian dan menggunakan @section(...)
untuk berbagai macam style yang ingin kalian aplikasikan di page view kalian.
Untuk dokumentasi lebih lengkap mengenai blade templating engine dan operasi apa saja yang dapat dilakukan, dapat dilihat [di link berikut](https://laravel.com/docs/8.x/blade#main-content).
Mari buat isi dari page camin. kita ingin buat seperti ini
Maka, pada camin.blade.php
kita tulis :
@extends('components/layout')
@section('content')
<section>
<div class="container-xl">
<h1 class="text-center">Daftar Camin Alpro 2023</h1>
<div class="row mt-4" style="">
@foreach ($data as $camin)
<div class="card col-3 mx-auto">
<div class="card-body">
<h5 class="card-title">
{{ $camin["nama"] }}
</h5>
<p class="card-text">Nrp : {{ $camin["nrp"] }}</p>
<p class="card-text">Angkatan : {{ $camin["angkatan"] }}</p>
</div>
</div>
@endforeach
</div>
</div>
</section>
@endsection
Datanya kita kirim dari route (di web.php)
Route::get('/camin', function() {
return view('camin',[
"data" => [
[
"id" => 1,
"nama" => "luthfi",
"nrp" => "5025201090",
"angkatan" => "2020"
],
[
"id" => 2,
"nama" => "bagas",
"nrp" => "5025201120",
"angkatan" => "2020"
],
]
]);
);
Controller adalah bagian yang bertugas untuk menghubungkan serta mengatur model dan view agar dapat saling terhubung. Secara sederhana, controller adalah sebuah elemen yang mengatur jalur URI yang telah kita tetapkan di routing yang ada.
Apa perbedaan controller dan routing yang ada di web.php? Kenapa tidak pakai web.php saja?
Sejauh ini, kita telah belajar bagaimana request dari URI yang kita buat, akan diatur di dalam file web.php
sebagai pengatur routing utama dalam laravel.
Sekarang bayangkan kalau website yang kita buat semakin kompleks, dan memerlukan banyak logic yang sangat rumit dan kita letakkan itu semua di dalam file web.php
kita. Sehingga sebagai gambaran sebagai berikut
Bisa dilihat, penambahan 2 function yang sangat rumit saja sudah menghabiskan banyak line code kita di file web.php
. Oleh karena itu, dibuatlah controller.
Controller akan berfungsi sebagai sebuah container dari logic yang kita buat sebagai response dari request URI kita. Sebagai contoh, kita akan membuat sebuah controller bernama Camin. Jalankan perintah berikut di terminal kalian
php artisan make:controller CaminController
Setelah selesai, kalian bisa melihat controller yang baru saja kalian buat di folder app/Http/controller/
.
Controller camin ini, akan kita gunakan sebagai container dari method-method yang akan berhubungan mengenai camin. Contohnya kita bisa membuat method yang mengembalikan view camin ketika kita melakukan request ke URI /camin
.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class CaminController extends Controller
{
public function index()
{
return view('camin',[
"data" => [
[
"id" => 1,
"nama" => "luthfi",
"nrp" => "5025201090",
"angkatan" => "2020"
],
[
"id" => 2,
"nama" => "bagas",
"nrp" => "5025201120",
"angkatan" => "2020"
],
]
]);
}
}
Lalu , di file web.php
kita, ganti syntax yang mengembalikan view camin kita dengan code berikut
Route::get('/camin', [CaminController::class, "index"]);
Jangan lupa untuk mengimport controller yang diperlukan
use App\Http\Controllers\CaminController;
Sehingga file web.php
kita akan terlihat sebagai berikut
Secara sederhana, syntax pada routing diatas seperti berikut. Untuk URI /camin
panggil class CaminController
dengan method index
untuk menampilkan view camin.
Dengan adanya CaminController
ini, kita bisa membuat logic yang rumit kita di dalam method file tersebut dan memanggil method yang dibutuhkan berdasarkan URI yang diminta di filer web.php
. Dengan melakukan hal tersebut, separasi logic file akan jadi lebih baik dan meningkatkan readability dari source code yang kita buat.
Untuk dokumentasi lebih lengkap mengenai controller dapat dilihat di [link dokumentasi berikut](https://laravel.com/docs/8.x/controllers#main-content).
Model adalah bagian yang bertugas untuk menyiapkan, mengatur, memanipulasi, dan mengorganisasikan data yang ada di database. Secara sederhana, model adalah sebuah elemen yang akan berinteraksi langsung dengan database.
Pada Laravel, sebuah model merupakan representasi dari sebuah table di dalam database.
Sebagai contoh kita akan membuat sebuah model Camin yang akan merepresentasikan table Camin di dalam database. Untuk membuat model, jalankan perintah berikut di terminal
php artisan make:model Camin
Setelah selesai, model yang sudah kalian buat, akan berada di folder app/Models/
.
Karena kita belum membahas mengenai database, kita akan membuat data statis. Data ini akan berisi mengenai data diri camin alpro 2023. Jika sudah terhubung dengan database, model Camin ini akan merepresentasikan table Camin di database. Sehingga kita bisa mengakses table Camin melalui model ini. Namun, untuk sekarang mari gunakan data statis berikut.
Lalu kita akan membuat method static untuk mengakses data pada model Camin ini. Copy code di bawah ini ke file model Camin.php.
public static function getAllDataCamin()
{
return self::$dataCamin;
}
Langkah selanjutnya adalah kita ingin menampilkan data yang ada di model tersebut pada view camin. Maka kita memerlukan controller yang kita telah buat tadi untuk mengakses model Camin yang telah kita buat ini.
Pada file CaminController.php
, kita akan panggil static method getAllDataCamin()
dan memberikan data camin ke view Camin. Copy code berikut dan untuk menggantikan isi method index
pada CaminController.php
.
public function index()
{
$data = Camin::getAllDataCamin();
return view("camin", ["data" => $data]);
}
Jangan lupa untuk mengimport file model Camin
use App\Models\Camin;
Sehingga file CaminController.php
kita akan terlihat sebagai berikut
Untuk melihat isi dari variable $data
apakah kita sudah berhasil mengambil data Camin dari model dapat menggunakan perintah dd(...)
pada CaminController.php
sebelum me-return view camin.
dd($data)
Maka akan menampilkan sebagai berikut
Setelah memastikan isi variable $data
, hapus dd($data)
dari code dan kita akan menampilkan data camin di dalam view.
Nah, apakah beda tampilannya? oh jelassโฆ engga. tapi tapi, sekarang kita sudah memakai controller dan model untuk memisahkan code nya.
Source:
https://github.com/AlproITS/camin-2022/wiki/3.-Implementasi-MVC-Menggunakan--Laravel
https://youtube.com/playlist?list=PLFIM0718LjIWiihbBIq-SWPU6b6x21Q_2