Laravel - Manajemen-Cerdas-Informasi/materi-oprec-2022 GitHub Wiki

Apa itu Laravel?

Laravel adalah sebuah framework PHP. Untuk bisa memahami ini maka kita harus membahas terlebih dahulu apa yang dimaksud dengan framework. Secara sederhana, framework adalah kumpulan kode program siap pakai dengan aturan penulisan tertentu yang bertujuan untuk memudahkan serta mempercepat pembuatan aplikasi. Lebih spesifik lagi, PHP framework adalah framework yang dibuat menggunakan bahasa pemrograman PHP.

Tujuan utama kenapa menggunakan framework adalah untuk mempercepat pembuatan aplikasi, karena di dalam framework sudah tersedia berbagai fitur siap pakai. Kita tinggal menggunakan fitur ini tanpa perlu membuat semuanya dari nol. Selain itu aturan penulisan di framework akan memaksa kita menggunakan cara penulisan yang baik (mengikuti standar best practice). Dengan menggunakan framework, ibaratnya kita memanfaatkan keahlian ribuan programmer yang sudah lebih dahulu memikirkan apa yang harus dibuat dan bagaimana cara terbaik untuk membuatnya.

Framework PHP selain Laravel: Code Igniter, Symfony, Yii, Zend

Instalasi Laravel

Beberapa requirement yang dibutuhkan untuk instalasi Laravel:

  • XAMPP

Karena di sini memakai Laravel 8, maka XAMPP yang digunakan harus versi 7.3 ke atas.

  • Composer

Composer adalah aplikasi package manager untuk menginstall berbagai file PHP, terutama library dan framework PHP. Kita dapat mengambil file installer dari web resminya di getcomposer.org.

Arsitektur Laravel

Perlu diketahui Laravel memakai arsitektur MVC (Model-View-Controller) sebagai basisnya. MVC adalah sebuah arsitektur perancangan kode program yang tujuannya untuk memecah kode program utama menjadi 3 komponen terpisah dengan tugas yang spesifik. Ketiga komponen tersebut adalah:

  1. Pengaksesan database, disebut sebagai Model
  2. Tampilan design (user interface), disebut sebagai View
  3. Alur logika program, disebut sebagai Controller
  • Panah 1: setiap interaksi yang dilakukan user akan ditangani oleh Controller
  • Panah 2: pengambilan data dari database (jika diperlukan), Controller akan memanggil Model
  • Panah 3: setelah data dari Model diterima kembali oleh Controller, Controller meneruskan ke View
  • Panah 4: pemrosesan data sebagai kode HTML & CSS di dalam View

Folder Instalasi Laravel

Kalian bisa masuk pada folder xampp -> htdocs. Kemudian buat folder baru berisi project Laravel dengan menggunakan command berikut:

composer create-project --prefer-dist laravel/laravel="^8.0" coba01

Untuk penamaan folder bisa diganti sesuka hati.

Di folder project Laravel nanti akan ada beberapa sub-folder lagi, yaitu:

  1. App: berisi berbagai file untuk aplikasi yang akan di bangun. Dalam folder inilah nantinya kita membuat Controller dan Model.
  2. Bootstrap: berisi file app.php yang berfungsi sebagai bootstrap atau file pengaturan awal dari Laravel. Selain itu terdapat juga folder cache untuk meningkatkan performa aplikasi. Sebagai info tambahan, nama folder ini tidak ada kaitannya dengan framework CSS Bootstrap.
  3. Config: berisi berbagai file konfigurasi Laravel. Folder ini cukup sering kita akses karena di sinilah berbagai pengaturan Laravel tersimpan.
  4. Database: berisi folder dan file yang 'mengurusi' database seperti migrations, factories, dan seeds.
  5. Public: berisi file index.php sebagai file awal dari semua request ke aplikasi Laravel. File index.php inilah yang nanti memanggil berbagai file-file lain. Namun kita tidak akan meng-edit file index.php ini secara langsung.
  6. Resource: berisi file resource 'mentah' seperti file CSS dan JavaScript. Di sini juga nantinya kita membuat view.
  7. Routes: berisi file yang akan menangani proses routing.
  8. Storage: berisi tempat penyimpanan file yang di generate oleh Laraval, seperti file log. Jika kita membuat form upload, file tersebut juga bisa disimpan di sini.
  9. Test: berisi file untuk proses testing seperti PHPUnit.
  10. Vendor: berisi berbagai file internal framework Laravel. Di sinilah semua library dependency Laravel berada.

A. View

Untuk mempermudah perawatan suatu aplikasi, biasanya terdapat pemisahan terhadap bagian logika bisnis dan juga bagian presentasi atau bagian yang ditampilkan ke pengguna. Pada Laravel, untuk bagian presentasi ini ditangani oleh View. Sebenarnya kita bisa saja langsung menuliskan kode HTML pada route ataupun controller, namun hal ini akan membuat perawatan aplikasi menjadi semakin sulit. View pada Laravel ini biasanya disimpan di folder resource/views, dan biasanya berisi kode HTML.

Laravel merupakan kerangka kerja berbasis MVC, dimana dalam V dalam MVC tersebut merupakan kependekan dari View. View ini adalah data yang akan ditampilkan kepada pengguna pada browser mereka dan pengguna juga dapat berinteraksi dengan View ini. Pada tutorial di bawah akan dijelaskan cara membuat, menampilkan, dan memberikan data ke dalam View.

Langkah pertama yaitu membuat view. Untuk membuat view, kita dapat langsung membuat file pada folder resource/views. Nama yang diberikan harus diakhiri dengan .blade.php untuk dapat menggunakan templating engine Laravel yaitu Blade.

Setelah membuat file view, selanjutnya kita bisa mulai mengisi file tersebut dengan kode HTML dan merender view tersebut dengan menggunakan global view helper atau juga dapat menggunakan View facade.

Isi dari view yang kita tampilkan bisa saja berubah sesuai dengan data yang diinginkan. Kita dapat memberikan data ke dalam view yang dapat ditampilkan dengan bantuan templating engine Blade. Untuk mengirimkan data ke view, dapat digunakan beberapa cara :

  • Menggunakan Associative Array
Route::get('/penulis', function () {
    $authors = [
        [
            "name" => "Joanne Rowling",
            "penname" => "J. K. Rowling or Robert Galbraith",
            "born" => "Gloucestershire, 31 July 1965", 
        ],

        [
            "name" => "Pramoedya Ananta Toer",
            "penname" => "Pramoedya Ananta Toer",
            "born" => "Blora, 6 February 1925",
        ]
    ];

    return view('penulis', [
        "title" => "Penulis",
        "authors" => $authors
    ]);
});
  • Menggunakan fungsi with milik view helper
Route::get('/', function () {
    $daftar_buku = [
        [
            "judul" => "Harry Potter and the Philosopher's Stone",
            "slug" => "harry-potter-pilosopher-stone",
            "penulis" => "J.K. Rowling",
            "penerbit" => "Bloomsbury",
            "tahun_terbit" => "1997",
            "isbn" => "0-7475-3269-9",
        ],

        [
            "judul" => "Bumi Manusia",
            "slug" => "bumi-manusia",
            "penulis" => "Pramoedya Ananta Toer",
            "penerbit" => "Hasta Mitra",
            "tahun_terbit" => "1980",
            "isbn" => "9799731232",    
        ],
    ];

    return View::make('daftarbuku')
                ->with('title', 'Daftar Buku')
                ->with('books', $daftar_buku);
});
  • Menggunakan fungsi compact PHP

Fungsi ini membuat array yang mengandung variabel dan nilai dari variabel itu.

Route::get('lists/{slug}', function($slug) {
    $daftar_buku = [
        [
            "judul" => "Harry Potter and the Philosopher's Stone",
            "slug" => "harry-potter-pilosopher-stone",
            "penulis" => "J.K. Rowling",
            "penerbit" => "Bloomsbury",
            "tahun_terbit" => "1997",
            "isbn" => "0-7475-3269-9",
        ],

        [
            "judul" => "Bumi Manusia",
            "slug" => "bumi-manusia",
            "penulis" => "Pramoedya Ananta Toer",
            "penerbit" => "Hasta Mitra",
            "tahun_terbit" => "1980",
            "isbn" => "9799731232",
        ],
    ];

    $store_book = [];
    
    foreach($daftar_buku as $b) {
        if ($b["slug"] == $slug) {
            $store_book = $b;
        }
    }

    $title = "Detail Buku";
    $book = $store_book;
    
    return view('book.detail', compact('title', 'book'));
});

B. Blade Component

Blade adalah fitur yang disediakan Laravel untuk proses templating sederhana. Fitur ini sangat bermanfaat dalam proses pengembangan tampilan halaman web. Tidak seperti fitur templating PHP populer lainnya, Blade tidak membatasi pemrogram untuk menggunakan kode PHP biasa dalam membuat kode untuk tampilan. Semua tampilan Blade dikompilasi ke dalam kode PHP biasa dan kemudian disimpan dalam cache hingga diubah, yang berarti Blade pada dasarnya tidak menambahkan beban atau overhead pada saat aplikasi dijalankan. File tampilan blade menggunakan ekstensi file .blade.php dan biasanya disimpan di direktori resources/views.

Component di blade pada laravel bermanfaat untuk membuat satu grup tampilan yang sering muncul di banyak halaman atau muncul beberapa kali di satu halaman. Component bagus digunakan untuk membangun sebuah view pada laravel dikarenakan kita bisa melakukan pengehematan waktu dan tenaga untuk tidak menulisakan code yang berulang-ulang. Selain itu, component bermanfaat agar kualitas code yang kita buat menjadi mudah dipahami dan menjadi lebih rapi.

Saat membuat tampilan web, biasanya kita melakukan pembuatan card yang berulang-ulang pada sebuah view blade, misalnya kita akan membuat menu daftar editor pada sebuah web penyedia buku bacaan.

@extends('layout')

@section('container')
    <div class="card mt-3">
        <div class="card-body">
            <div class="h3">Daftar Editor</div>
            <br>
            <div class="justify-content-center mt-4 card">
                <div class="card-body">
                    Nama1
                </div>
            </div>
            <div class="justify-content-center mt-4 card">
                <div class="card-body">
                    Nama2
                </div>
            </div>
        </div>
    </div>
@endsection

Pada view editor.blade.php, akan menggunakan card untuk menampilkan masing-masing data editor. Apabila kita menerapkan contoh kode di atas, tentu akan cukup merepotkan bila kita melakukan hal yang sama terus menerus, maka untuk mengatasi masalah tersebut kita akan memanfaatkan salah satu fitur laravel yaitu menggunakan blade component.

Creating Component

Pertama, mengetikkan perintah berikut pada terminal untuk membuat component.

php artisan make:component card

Setelah berhasil menjalankan perintah tersebut, kita akan mendapatkan dua file baru pada project laravel kita yaitu pada direktori App\View\Components\card.php untuk Kelasnya dan pada direktori resources/views/components/card.blade.php untuk tampilannya atau blade filenya.

Selanjutnya, memodifikasi code pada file card.blade.php pada direktori resources/views/components/card.blade.php menjadi sebagai berikut:

<div class="justify-content-center mt-4 card">
    <div class="card-body">
        {{ $slot }}
    </div>
</div>

Terkadang kita membutuhkan konten yang berbeda untuk ditampilkan pada component yang telah dibuat, maka untuk mengatasinya kita dapat menggunakan $slot variable. Melalui variable ini kita dapat menambahkan konten pada component kita melalui variable $slot.

Setelah selesai melakukan modifikasi file tersebut, kita dapat memanggil component tersebut pada semua view yang kita miliki.

Passing Data ke Component

Saat melakukan passing data, terkadang kita menghendaki value yang dinamis dimana content akan berubah-ubah tergantung value pada variabel tersebut. Kita perlu menambahkan route berikut pada file web.php agar valuenya bisa dinamis.

Route::get('/editor', function() {
    $title = 'Editor';
    $editors = array('Nama1', 'Nama2');
    return view('editor', compact('title', 'editors'));
});

Selanjutnya, kita perlu memodifikasi file card.php pada direktori App\View\Components\card.php. Jika kita perhatikan, pada code di file tersebut terdapat fungsi __contruct() yang dapat kita gunakan untuk passing data sedangkan fungsi render() untuk memanggil atau menampilkan file view yang telah dibuatkan laravel tadi.

Berikut hasil modifikasi pada kelas card.php pada direktori App\View\Components\card.php:

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class card extends Component
{
    public $title;
    public $editors;

    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct($title, $editors)
    {
        //
        $this->title = $title;
        $this->editors = $editors;
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\Contracts\View\View|\Closure|string
     */
    public function render()
    {
        return view('components.card');
    }
}

Untuk passing data ke component dapat kita lakukan melalui fungsi __contruct(). Pada contoh kali ini kita melakukan passing data dengan variabel $title dan $editors yang valuenya kita ambil dari route. Hal penting yang harus diperhatikan adalah hak akses yang kita berikan harus public agar dapat diakses oleh kelas lain.

Rendering Component

Untuk menampilkan conponent yang telah kita buat, kita cukup memanggilnya pada file view yang memerlukan component tersebut dengan menggunakan syntax <x-componentname>. Kita akan mencoba memanggil component card tersebut pada view editor.blade.php, maka kita cukup memanggil dengan <x-card>.

@extends('layout')

@section('container')
    <div class="card mt-3">
        <div class="card-body">
            <div class="h3">Daftar Editor</div>
            <br>
            @foreach($editors as $editor)
                <x-card type='error' :title="$title" :editors="$editors">
                    {{ $editor }}
                </x-card>
            @endforeach
        </div>
    </div>
@endsection

Tidak lupa pula, untuk menampilkan data yang telah di passing dengan menggunakan syntax :propertyname. Pada kode tersebut, data title dan editors dapat dinamis, tergantung value pada variabel tersebut yang sebelumnya telah di-setting pada route.

C. Controller

Controller adalah tempat dimana kita akan banyak menghabiskan waktu dalam penulisan kode program, karena di sinilah alur logika program dibuat. Controller berada di pusat MVC. Pada saat user mengetik sebuah alamat di web browser, route akan membaca alamat tersebut dan (idealnya) memanggil controller yang sesuai. Apabila butuh mengambil data dari database, controller akan mengakses model. Hasil dari model dikembalikan ke controller yang bisa diolah lebih lanjut untuk kemudian dikirim ke view. Sesampainya di view, data tinggal ditampilkan ke web browser. Di bawah ini contoh akses controller menggunakan anonymous function untuk mengembalikan fungsi view() pada routes/web.php.

Route::get('/', function () {
    return view('welcome');
});

Kita juga bisa memanggil controller dengan format berikut.

Route::get('/', [PageController::class,'index']);

Dengan penulisan ini, maka ketika alamat http://localhost:8000/ diakses, route akan menjalankan method index() milik PageController.

Di dalam folder App/Http/Controllers sudah ada 1 file bernama Controller.php. File Controller.php merupakan file induk dari semua controller yang akan dibuat. Berikut isi dari file ini:

<?php
    namespace App\Http\Controllers;
    use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
    use Illuminate\Foundation\Bus\DispatchesJobs;
    use Illuminate\Foundation\Validation\ValidatesRequests;
    use Illuminate\Routing\Controller as BaseController;
    
    class Controller extends BaseController
    {
        use AuthorizesRequests, DispatchesJobs, ValidatesRequests;
    }

Di baris 3 terdapat deklarasi namespace, yang artinya file Controller.php berada di dalam namespace App\Http\Controllers. Di baris 5 – 8 berisi pemanggilan 4 class menggunakan keyword use. Lanjut ke baris 10 – 13, terdapat kode untuk membuat class Controller yang di-extends dari class BaseController.

Kita bisa membuat Controller secara manual ataupun menggunakan fitur php artisan.

php artisan make:controller UserController

D. Query Builder

Query builder adalah interface khusus yang disediakan Laravel untuk mengakses database. Berbeda dengan raw query ketika kita menulis langsung perintah query SQL, di dalam query builder perintah SQL ini diakses menggunakan method. Artinya, kita tidak menulis langsung perintah SQL, tapi hanya memanggil method-method saja. Sebagai contoh fungsi insert pada MahasiswaController:

<?php
    namespace App\Http\Controllers;
    use Illuminate\Http\Request;
    use Illuminate\Support\Facades\DB;

    class MahasiswaController extends Controller
    {
        public function insert() {
            $result = DB::table('mahasiswas')->insert(
                [
                    'nim' => '19003036',
                    'nama' => 'Sari Citra Lestari',
                    'tanggal_lahir' => '2001-12-31',
                    'ipk' => 3.5,
                    'created_at' => now(),
                    'updated_at' => now(),
                ]
            );

           dump($result);
    }
}

Selain untuk menginput data, Query Builder juga dapat digunakan untuk meng-update data, menghapus data, dan menampilkan data.

E. Model Eloquent

Eloquent ORM adalah cara pengaksesan database ketika setiap baris tabel dianggap sebagai sebuah object. Kata ORM sendiri merupakan singkatan dari Object-Relational Mapping, yakni sebuah teknik programming untuk mengkonversi data ke dalam bentuk object. Eloquent ORM memerlukan Model untuk proses konversi data tabel menjadi object. Object inilah yang nantinya akan kita akses dari dalam Controller. Sama seperti pembuatan berbagai file di Laravel, tersedia perintah php artisan untuk membuat Model. Berikut format dasar perintah yang digunakan:

php artisan make:model Mahasiswa

Sebelumnya, kita perlu untuk membuat tabel mahasiswas pada bagian migration.

Schema::create('mahasiswas', function (Blueprint $table) {
    $table->id();
    $table->char('nim', 8)->unique();
    $table->string('nama');
    $table->date('tanggal_lahir');
    $table->decimal('ipk', 3,2)->default(1.00);
    $table->timestamps();
});

Perlu diingat nama model harus berpasangan dengan nama tabel namun dalam bentuk tunggal (singular). Misalnya, jika kita membuat tabel mahasiswa, maka nama modelnya adalah Mahasiswa. Kemudian, berikut isi dari file model Mahasiswa.php yang di-generate Laravel:

<?
    namespace App\Models;

    use Illuminate\Database\Eloquent\Factories\HasFactory;
    use Illuminate\Database\Eloquent\Model;

    class Mahasiswa extends Model
    {
        use HasFactory;
    }
⚠️ **GitHub.com Fallback** ⚠️