2. Konsep MVC (Model View Controllers) pada Laravel - Algoritma-dan-Pemrograman-ITS/camin-2023 GitHub Wiki

MVC

HTTP Status Codes

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,.

HTTP Status Codes dapat digolongkan menjadi lima bagian, yaitu:

  1. Respon Informasi (100–199)
  2. Respon Sukses (200-299)
  3. Pesan redirection (300-399)
  4. Respon error pada sisi klien (400-499)
  5. Respon error pada sisi server (500-599)
Berikut ini adalah beberapa HTTP Status Codes yang sering digunakan dalam pembuatan aplikasi:

1. 200 OK

Request berhasil.

2. 201 Created

Request berhasil dan sebuah resource baru berhasil dibuat. Umumnya merupakan response pada request yang menggunakan HTTP method POST ataupun PUT.

3. 400 Bad Request

Server tidak dapat memproses request karena ada error dii sisi klien (format request yang tidak tepat, dll).

4. 401 Unauthorized

Klien tidak dapat memperoleh respons karena belum terautentikasi.

5. 403 Forbidden

Klien tidak dapat memperoleh respons karena klien tidak memiliki hak akses terhadap resource yang ingin diakses.

6. 404 Not Found

Server tidak menemukan resource yang diminta melalui request.

7. 500 Internal Server Error

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 (URI)

image

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: image

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)

gambar mvc

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

Kenapa MVC?

  • 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

Framework MVC

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

Implementasi MVC menggunakan Laravel

Inisiasi Project Laravel

  • 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

modul-ensure php

    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/

Struktur Folder

stuktur folder

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

Routing

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

image

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

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.

image

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/

image

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/[email protected]/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/[email protected]/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

image

Selanjutnya, buka URI http://127.0.0.1:8000/camin dan hasilnya adalah sebagai berikut Screenshot (92)

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 Screenshot (93)

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

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

Screenshot (94)

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/.

https://user-images.githubusercontent.com/36375676/156925589-cc3d41e3-62f8-41f0-b797-77b637834b3d.png

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

https://user-images.githubusercontent.com/36375676/156925841-1fa513d6-7e1e-49cd-aa24-85756fb29e89.png

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

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/.

https://user-images.githubusercontent.com/36375676/156926833-6eaa5d7e-a887-4ddd-8b1c-65564b281c94.png

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.

Screenshot (95)

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

https://user-images.githubusercontent.com/36375676/156927982-1084ee78-1d6a-468d-b2eb-776c7c0c9d7f.png

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

https://user-images.githubusercontent.com/36375676/156927698-d7e0bc75-945d-430f-b38d-e87f350383d4.png

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

⚠️ **GitHub.com Fallback** ⚠️