Belajar Mengenal Views Pada Framework Laravel 11 Sebagai Pemula

Name: Belajar Mengenal Views Pada Framework Laravel 11 Sebagai Pemula
Brand: BuildWithAngga
Rating: 4.8 (9567 reviews)

December 22, 2024

•

Backend Development

Belajar Mengenal Views Pada Framework Laravel 11 Sebagai Pemula

MVC adalah singkatan dari Model-View-Controller, sebuah pola arsitektur yang memisahkan logika aplikasi menjadi tiga bagian utama: Model untuk logika data, View untuk antarmuka pengguna, dan Controller untuk mengatur alur aplikasi.

Dalam artikel ini, kita akan membahas bagian View, yaitu komponen yang berfungsi menampilkan data kepada pengguna. Semua elemen antarmuka seperti halaman HTML, layout, atau komponen front-end dikelola melalui View.

Membuat Proyek Laravel 11

Sebelum belajar lebih jauh tentang View, langkah pertama adalah membuat proyek Laravel 11 terbaru. Pastikan Anda sudah memiliki Composer di komputer Anda, karena ini adalah alat utama untuk menginstal framework Laravel.

Untuk memulai, buka terminal atau command prompt dan gunakan perintah berikut:

composer create-project laravel/laravel nama-proyek-anda

Setelah instalasi selesai, pindah ke folder proyek dengan perintah:

cd nama-proyek-anda

Jalankan server bawaan Laravel dengan perintah:

php artisan serve

Jika server berhasil berjalan, Anda bisa membuka URL proyek di browser, biasanya http://127.0.0.1:8000.

Struktur Folder View

Di Laravel, file View disimpasn di dalam folder resources/views. Folder ini adalah tempat semua file Blade template diletakkan. Blade adalah templating engine Laravel yang menyediakan sintaks sederhana untuk mengelola View.

Sebagai contoh, untuk membuat file View baru, Anda bisa membuat file welcome.blade.php di dalam folder resources/views. Isi file tersebut dengan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Selamat Datang</title>
</head>
<body>
    <h1>Halo, Selamat Datang di Laravel 11!</h1>
    <p>Ini adalah halaman view pertama Anda.</p>
</body>
</html>

Untuk menampilkan View ini, buka file routes/web.php dan ubah kode defaultnya menjadi:

use Illuminate\\Support\\Facades\\Route;

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

Setelah itu, buka kembali URL proyek Anda di browser, dan Anda akan melihat halaman View yang telah dibuat.

Apa Itu Blade Directive?

Blade directive adalah fitur bawaan dari templating engine Laravel yang menyediakan sintaks sederhana untuk mempermudah pembuatan tampilan pada file View. Dengan menggunakan Blade directives, developer dapaat menulis logika PHP di dalam file View tanpa harus menuliskan kode PHP mentah secara langsung, sehingga membuat kode lebih bersih, terstruktur, dan mudah dipahami.

Blade directives membantu developer untuk menangani berbagai tugas umum seperti perulangan, pengkondisian, dan rendering data dengan cara yang efisien. Dengan kemampuannya ini, Blade sangat membantu dalam pengembangan proyek web, termasuk proyek kompleks seperti website apotek online.

Contoh Penggunaan Blade Directive pada Website Apotek Online

Menampilkan Daftar Obat

Pada sebuah apotek online, Anda bisa menggunakan Blade directive @foreach untuk menampilkan daftar obat dari database.

// Controller
use App\\Models\\Medicine;

public function index() {
    $medicines = Medicine::all();
    return view('medicines.index', compact('medicines'));
}

<!-- View: resources/views/medicines/index.blade.php -->
<h1>Daftar Obat</h1>
<ul>
    @foreach ($medicines as $medicine)
        <li>{{ $medicine->name }} - {{ $medicine->price }} IDR</li>
    @endforeach
</ul>

Menampilkan Pesan Error atau Sukses

Blade directive @if digunakan untuk memerikasa dan menampilkan pesan tertentu berdasarkan kondisi, seperti ketika transaksi berhasil atau gagal.

<!-- View -->
@if (session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
@endif

@if (session('error'))
    <div class="alert alert-danger">
        {{ session('error') }}
    </div>
@endif

Menyembunyikan Konten Berdasarkan Peran Pengguna

Dengan Blade directive @can, Anda bisa membatasi akses ke fitur tertentu berdasarkan peran pengguna, seperti hanya admin yang bisa menambahkan obat.

<!-- View -->
@can('add-medicine')
    <a href="{{ route('medicines.create') }}" class="btn btn-primary">Tambah Obat</a>
@endcan

Menampilkan Formulir Pemesanan Obat

Blade directive @csrf memastikan keamanan formulair dengan menambahkan token CSRF secara otomatis.

<!-- View -->
<form action="{{ route('orders.store') }}" method="POST">
    @csrf
    <label for="medicine">Pilih Obat:</label>
    <select name="medicine" id="medicine">
        @foreach ($medicines as $medicine)
            <option value="{{ $medicine->id }}">{{ $medicine->name }}</option>
        @endforeach
    </select>
    <button type="submit">Pesan</button>
</form>

Menampilkan Data dalam Tabel

Blade directive @empty digunakan untuk memeriksa apakaah data kosong dan menampilkan pesan alternatif jika data tidak tersedia.

<!-- View -->
<table>
    <thead>
        <tr>
            <th>Nama Obat</th>
            <th>Harga</th>
        </tr>
    </thead>
    <tbody>
        @forelse ($medicines as $medicine)
            <tr>
                <td>{{ $medicine->name }}</td>
                <td>{{ $medicine->price }} IDR</td>
            </tr>
        @empty
            <tr>
                <td colspan="2">Tidak ada obat tersedia saat ini.</td>
            </tr>
        @endforelse
    </tbody>
</table>

Blade directives sanagat membantu developrer dalam menulis logika View dengan lebih rapi dan efisien. Dengan penggunaannya, Anda dapat menghemat waktu dan tenaga dalam membangun fitur-fitur kompleks pada aplikasi, seperti sistem apotek online.

Pastikan untuk terus mengeksplorasi dokumentasi Laravel untuk memahami lebih banyak Blade directives yang bisa digunakan.

Bagian Layout pada Laravel

Dalam Laravel, layout digunakan untuk mengatur kerangka dasar halaman sehingga kode yang berulang, seperti header, footer, dan navigasi, tidak perlu ditulis berulang kali di setiap file View. Layout disimpan dalam folder resources/views dan biasanya menggunakan file Blade.

Misalnya, layout utama untuk website apotek online dapat disimpan di file resources/views/layouts/app.blade.php dan berisi struktur HTML dasar:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title')</title>
</head>
<body>
    <header>
        <h1>Apotek Online</h1>
        @include('partials.navbar')
    </header>
    <main>
        @yield('content')
    </main>
    <footer>
        <p>&copy; 2024 Apotek Online</p>
    </footer>
</body>
</html>

File layout ini kemudian dapat digunakan oleh View lainnya dengan Blade directive @extends.

Passing Data ke View

Data dari controller dikirimkan ke View menggunakan metode with atau compact. Misalnya, Anda ingin mengirim daftar obat ke halaman:

// Controller
use App\\Models\\Medicine;

public function index() {
    $medicines = Medicine::all();
    return view('medicines.index', compact('medicines'));
}

Data medicines kemudian dapat diakses di file View:

@extends('layouts.app')

@section('title', 'Daftar Obat')

@section('content')
    <h2>Daftar Obat</h2>
    <ul>
        @foreach ($medicines as $medicine)
            <li>{{ $medicine->name }} - {{ $medicine->price }} IDR</li>
        @endforeach
    </ul>
@endsection

Menggunakan @include

Blade directive @include memungkinkan Anda untuyk menyisipkan file View lainnya ke dalam sebuah halaman. Ini berguna untuk komponen yang sering digunakan, seperti navbar atau formulir.

Misalnya, buat file resources/views/partials/navbar.blade.php:

<nav>
    <ul>
        <li><a href="/">Beranda</a></li>
        <li><a href="/medicines">Obat</a></li>
        <li><a href="/contact">Kontak</a></li>
    </ul>
</nav>

File ini bisa dimasukkan ke dalam layout utama atau View lainnya:

@include('partials.navbar')

Proses Debugging

Untuk mempermudah debugging, Laravel menyediakan fungsi dd() (dump and die) dan @dump untuk menampilkan data atau variabel secara jelas.

Misalnya, jika Anda ingin memeriksa data yang dikirim ke View:

// Controller
public function index() {
    $medicines = Medicine::all();
    dd($medicines);
}

Atau gunakan @dump di View:

@extends('layouts.app')

@section('content')
    @dump($medicines)
@endsection

Contoh Penggunaan pada Website Apotek Online

Layout Halaman Detail Obat

@extends('layouts.app')

@section('title', 'Detail Obat')

@section('content')
    <h2>{{ $medicine->name }}</h2>
    <p>Harga: {{ $medicine->price }} IDR</p>
    <p>Deskripsi: {{ $medicine->description }}</p>
@endsection

Formulir Pembelian Obat dengan @include

Buat file formulir di resources/views/partials/order-form.blade.php:

<form action="{{ route('orders.store') }}" method="POST">
    @csrf
    <input type="hidden" name="medicine_id" value="{{ $medicine->id }}">
    <button type="submit">Pesan Sekarang</button>
</form>

Sisipkan formulir ini di halaman detail obat:

@extends('layouts.app')

@section('content')
    <h2>{{ $medicine->name }}</h2>
    @include('partials.order-form')
@endsection

Menampilkan Pesan Flash dengan Passing Data

// Controller
public function store(Request $request) {
    // Logika penyimpanan pesanan
    return redirect()->route('orders.index')->with('success', 'Pesanan berhasil dibuat!');
}

@if (session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
@endif

Tabel Obat dengan Layout

@extends('layouts.app')

@section('content')
    <table>
        <thead>
            <tr>
                <th>Nama Obat</th>
                <th>Harga</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($medicines as $medicine)
                <tr>
                    <td>{{ $medicine->name }}</td>
                    <td>{{ $medicine->price }}</td>
                </tr>
            @endforeach
        </tbody>
    </table>
@endsection

Debugging Data dengan @dump

@extends('layouts.app')

@section('content')
    @dump($medicines)
@endsection

Dengan memanfaatkan fitur layout, passing data, @include, dan proses debugging, Laravel membuat pengembangan aplikasi web seperti apotek online menjadi lebih cepat dan efisien. Semua fitur ini mendukung struktur kode yang rapi dan mudah dipelihara.

Blade Components pada Laravel

Blade components adalah fiture yang memungkinkan Anda membuat elemen UI yang dapat digunakan kembali, sehingga mempercepat pengembangan dan memastikan konsistensi desain. Dalam proyek website apotek online, Blade componentes sangat cocok untuk elemen-elemen seperti kartu produk, tombol, atau komponen formulir yang sering digunakan.

Membuat Kartu Produk untuk Menampilkan Informasi Obat

Buat file Blade component dengan menjalankan perintah berikut di terminal:

php artisan make:component MedicineCard

Laravel akan membuat dua file:

app/View/Components/MedicineCard.php untuk logika komponen.
resources/views/components/medicine-card.blade.php untuk tampilan komponen.

Isi file MedicineCard.php dengan logika data yang dibutuhkan:

<?php

namespace App\\View\\Components;

use Illuminate\\View\\Component;

class MedicineCard extends Component
{
    public $medicine;

    public function __construct($medicine)
    {
        $this->medicine = $medicine;
    }

    public function render()
    {
        return view('components.medicine-card');
    }
}

Edit file Blade di resources/views/components/medicine-card.blade.php untuk mendefinisikan tampilan kartu obat:

<div class="medicine-card">
    <h3>{{ $medicine->name }}</h3>
    <p>Harga: {{ $medicine->price }} IDR</p>
    <p>Stok: {{ $medicine->stock }}</p>
    <a href="/medicines/{{ $medicine->id }}" class="btn btn-primary">Detail</a>
</div>

Gunakan komponen ini di file View utama, misalnya pada halaman daftar obat:

@extends('layouts.app')

@section('content')
    <h1>Daftar Obat</h1>
    <div class="medicine-list">
        @foreach ($medicines as $medicine)
            <x-medicine-card :medicine="$medicine" />
        @endforeach
    </div>
@endsection

Membuat Tombol dengan Gaya Konsisten

Buat component tombol untuk memastikan gaya konsisten di seluruh aplikasi. Jalankan perintah berikut:

php artisan make:component Button

Edit file app/View/Components/Button.php untuk menerima parameter teks tombol dan tautan:

<?php

namespace App\\View\\Components;

use Illuminate\\View\\Component;

class Button extends Component
{
    public $text;
    public $link;

    public function __construct($text, $link = '#')
    {
        $this->text = $text;
        $this->link = $link;
    }

    public function render()
    {
        return view('components.button');
    }
}

Edit file resources/views/components/button.blade.php untuk mendefinisikan tampilan tombol:

<a href="{{ $link }}" class="btn btn-primary">
    {{ $text }}
</a>

Gunakan komponen tombol ini di View lain. Misalnya, tambahkan tombol "Tambah Obat" di halaman admin:

@extends('layouts.app')

@section('content')
    <h1>Manajemen Obat</h1>
    <x-button text="Tambah Obat" link="/medicines/create" />
@endsection

Penyesuaian Tambahan

Blade components mendukung slot, atribut dinamis, dan default values. Anda bisa menambahkan logika tambahan seperti slot untuk fleksibilitas konten tombol:

<a href="{{ $link }}" class="btn btn-primary {{ $attributes->get('class') }}">
    {{ $slot ?? $text }}
</a>

Penggunaan di View:

<x-button link="/medicines/create" class="btn-large">
    <strong>Tambah Obat</strong>
</x-button>

Hasil ini membuat komponen Blade lebih fleksibel dan modular, sehingga sangat membantu dalam membangun aplikasi besar seperti website apotek online.

Kesimpulan

Laravel menyediakan berbagai fitur canggih seperti Blade components yang sangat membantu developer dalam menciptakan elemen UI yang modular, efisien, dan konsisten. Dengan memahami dan menerapkan konsep ini, pengembangan aplikasi web seperti website apotek online menjadi lebih terstruktur dan cepat.

Selain itu, Laravel juga mendukung pengembangan komponen lain seperti validasi, routing, dan autentikasi, sehingga sangat cocok untuk proyek skala kecil hingga besar.

Saran untuk Web Developer Pemula

Bagi web developer pemula yang ingin mempersiapkan karir lebih baik di dunia web development, belajar bersama mentor expert adalah langkah yang sangat direkomendasikan. Platform seperti BuildWithAngga menawarkan:

Akses Materi Seumur Hidup: Anda bisa mempelajari semua kursus kapan saja tanpa batas waktu.
Portfolio Berkualitas: Dalam kursus, Anda akan dibimbing untuk menghasilkan portfolio yang menarik dan relevan dengan kebutuhan industri.
Konsultasi Karir: Selain belajar, Anda juga bisa mendapatkan arahan karir yang sesuai dengan tujuan Anda melalui sesi konsultasi dengan mentor expert.
a

Dengan belajar bersama mentor, Anda tidak hanya akan memahami teknik coding yang baik tetapi juga mempersiapkan diri untuk menghadapi tantangan dunia kerja dengan percaya diri. Tingkatkan skill Anda, hasilkan karya yang membanggakan, dan mulai bangun karir yang lebih baik di dunia web development!

Pelajari Selengkapnya

Full-Stack Laravel 11 React TypeScript: Web Book Home Service

(26)

Full-Stack Next JS Laravel 11: Web Langganan Catering

(18)

Full-Stack Laravel 11 Next JS 14: Web Rent House

(399)

Career Preparation

Bangun Karir Impian.
Dibantu Expert, Gratis 🤩

Stop buang waktu browsing sana-sini karena
di BuildWithAngga sudah tersedia arahan pasti

Chat ke CS Karir HandBook

Content Editor

Angga Risky S

Angga Risky S, an expert content writer at BuildWithAngga, continually acquires valuable knowledge in web technology, UI UX design, SEO, and business. This knowledge is shared freely with the extensive community in Indonesia.