Modul 1

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

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.

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

Konsep MVC (Model - View - Controller)

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

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

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.

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

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

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

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.

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

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly