Skip to content

BahasKoding/Laravel-Basic

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
Readme.md
Readme.md
 
 

Repository files navigation

📘 Belajar Laravel: Framework PHP Modern untuk Pemula

🏁 Pendahuluan

Laravel adalah framework PHP berbasis Model–View–Controller (MVC) yang dirancang untuk membantu developer membuat aplikasi web dengan cepat, aman, dan efisien.

Dalam dokumentasi ini, kamu akan belajar dasar Laravel mulai dari instalasi, struktur proyek, hingga membuat CRUD sederhana dengan SQLite dan integrasi Bootstrap.

👨‍🏫 Tentang Pemateri

Nama: Rai Rakhmat Syarifudin
Peran: Web Developer & Content Creator
Instagram: @bahaskoding
Fokus: Pengembangan aplikasi web menggunakan Laravel dan integrasi Boostraps untuk efisiensi belajar.

🎯 Tujuan Pembelajaran

Setelah mengikuti tutorial ini, kamu akan dapat:

  • Memahami konsep MVC di Laravel.
  • Menginstal dan men-setup Laravel dengan database SQLite.
  • Membuat aplikasi CRUD sederhana.
  • Menggunakan Blade Template Engine untuk tampilan dinamis.
  • Mengintegrasikan Bootstrap untuk desain antarmuka yang lebih menarik.

⚙️ Prasyarat

Sebelum mulai, pastikan kamu sudah menginstal:

  • PHP ≥ 8.2 (untuk Laravel 12)
  • Composer (Dependency Manager untuk PHP)
  • Visual Studio Code atau editor lain
  • Git (opsional, untuk version control)

🔍 Cara Cek Versi PHP

Buka terminal dan jalankan:

php -v

Jika versi PHP kamu masih di bawah 8.2, silakan update terlebih dahulu.

🔍 Cara Cek Composer

Untuk memastikan Composer sudah terpasang, jalankan:

composer -V

Jika muncul versi Composer seperti:

Composer version 2.x.x 2025-xx-xx

berarti Composer sudah terpasang.

Jika belum terpasang, kamu bisa unduh dan install melalui situs resmi: 👉 https://getcomposer.org/

🚀 Instalasi Laravel

  1. Install Laravel via Composer

    composer create-project laravel/laravel belajar-laravel

  2. Masuk ke Folder Proyek

    cd belajar-laravel

  3. Jalankan Server Development

    php artisan serve

  4. Buka Browser Akses: http://localhost:8000

Jika halaman “Welcome to Laravel” muncul, berarti instalasi berhasil ✅

🗂️ Struktur Folder Laravel

belajar-laravel/
├── app/
│   ├── Http/
│   │   ├── Controllers/     # Controller (Logika aplikasi)
│   │   └── Middleware/      # Middleware untuk filter request
│   ├── Models/              # Model (Interaksi dengan database)
│   └── Providers/           # Service Provider
├── bootstrap/               # File bootstrap framework
├── config/                  # File konfigurasi aplikasi
├── database/
│   ├── migrations/          # File migrasi database
│   ├── seeders/             # File untuk seed data dummy
│   └── database.sqlite      # File database SQLite (dibuat manual)
├── public/                  # Folder public (index.php, assets)
├── resources/
│   └── views/               # View (Tampilan Blade Template)
├── routes/
│   ├── web.php              # Route untuk web (yang kita fokuskan)
│   ├── api.php              # Route untuk API
│   └── console.php          # Route untuk command line
├── storage/                 # File cache, logs, uploads
├── tests/                   # File testing
├── .env                     # Konfigurasi environment
├── artisan                  # CLI Laravel
└── composer.json            # Dependency PHP

Penjelasan Singkat MVC

User Request → Route (web.php) → Controller → Model → Database
                                      ↓
                                    View (Blade)
                                      ↓
                                  Response ke User
  • Model: Berinteraksi dengan database (Eloquent ORM)
  • View: Tampilan yang dilihat user (Blade Template)
  • Controller: Logika bisnis yang menghubungkan Model dan View

🧩 Konfigurasi Database SQLite

Laravel mendukung berbagai database. Untuk pembelajaran, kita gunakan SQLite karena ringan dan tidak perlu setup server database.

  1. Edit File .env

    DB_CONNECTION=sqlite
# DB_HOST=127.0.0.1
# DB_PORT=3306
# DB_DATABASE=laravel
# DB_USERNAME=root
# DB_PASSWORD=

  2. Buat File Database SQLite

    touch database/database.sqlite

    Untuk Windows (PowerShell):

    New-Item database/database.sqlite

  3. Jalankan Migrasi Default

    php artisan migrate

Output:

Migration table created successfully.
Migrating: 0001_01_01_000000_create_users_table
Migrated:  0001_01_01_000000_create_users_table (XX.XXms)

Database SQLite sekarang siap digunakan! ✅

🔀 Routing & Controller

Routing adalah jalur URL yang menghubungkan request user dengan logika aplikasi. Semua route web ada di routes/web.php.

  1. Route Dasar

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

Route::get('/about', function () {
    return 'Halaman About';
});

  2. Membuat Controller

    php artisan make:controller ProductController

  3. Isi Controller

    public function index()
{
    return view('products.index', [
        'title' => 'Daftar Produk'
    ]);
}

  4. Hubungkan ke Route

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

🎨 Blade Template Engine

Blade adalah template engine bawaan Laravel yang powerful dan mudah digunakan.

  1. Membuat View

    <!DOCTYPE html>
<html lang="id">
	<head>
		<meta charset="UTF-8" />
		<title>{{ $title }}</title>
	</head>
	<body>
		<h1>{{ $title }}</h1>
		<p>Selamat datang di halaman produk!</p>
	</body>
</html>

  2. Sintaks Dasar Blade

    {{ $variable }}
{!! $html !!}
@if($condition)
    ...
@endif
@foreach($items as $item)
    {{ $item }}
@endforeach

🧱 Model & Migration (Eloquent ORM)

  1. Buat Model & Migration

    php artisan make:model Product -m

  2. Edit Migration

    Schema::create('products', function (Blueprint $table) {
    $table->id();
    $table->string('name');
    $table->text('description')->nullable();
    $table->integer('price');
    $table->integer('stock')->default(0);
    $table->timestamps();
});

  3. Jalankan Migration

    php artisan migrate

  4. Edit Model

    protected $fillable = ['name', 'description', 'price', 'stock'];

🧩 Integrasi Bootstrap

  1. CDN (Metode Cepat)

    <link
	href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
	rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

  2. File Lokal (Opsional)

    <link
	rel="stylesheet"
	href="{{ asset('bootstrap/css/bootstrap.min.css') }}"
/>
<script src="{{ asset('bootstrap/js/bootstrap.bundle.min.js') }}"></script>

🧠 Studi Kasus: CRUD Produk Lengkap (SQLite + Bootstrap)

Pada bagian ini, kita akan membuat fitur CRUD (Create, Read, Update, Delete) untuk manajemen produk.
Semua data disimpan di SQLite, dan tampilan sudah menggunakan Bootstrap 5 agar lebih menarik.

🪜 Langkah 1 – Buat Route Manual

Edit file routes/web.php:

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ProductController;

Route::get('/', function () {
    return redirect('/products');
});

// Route CRUD Manual
Route::get('/products', [ProductController::class, 'index'])->name('products.index');
Route::get('/products/create', [ProductController::class, 'create'])->name('products.create');
Route::post('/products', [ProductController::class, 'store'])->name('products.store');
Route::get('/products/{product}', [ProductController::class, 'show'])->name('products.show');
Route::get('/products/{product}/edit', [ProductController::class, 'edit'])->name('products.edit');
Route::put('/products/{product}', [ProductController::class, 'update'])->name('products.update');
Route::delete('/products/{product}', [ProductController::class, 'destroy'])->name('products.destroy');

⚙️ Langkah 2 – Buat Controller CRUD Lengkap

Buat controller:

php artisan make:controller ProductController

Isi file app/Http/Controllers/ProductController.php dengan:

<?php

namespace App\Http\Controllers;

use App\Models\Product;
use Illuminate\Http\Request;

class ProductController extends Controller
{
    public function index()
    {
        $products = Product::latest()->get();
        return view('products.index', compact('products'));
    }

    public function create()
    {
        return view('products.create');
    }

    public function store(Request $request)
    {
        $validated = $request->validate([
            'name' => 'required|max:255',
            'description' => 'nullable',
            'price' => 'required|integer|min:0',
            'stock' => 'required|integer|min:0',
        ]);

        Product::create($validated);
        return redirect()->route('products.index')->with('success', 'Produk berhasil ditambahkan!');
    }

    public function show(Product $product)
    {
        return view('products.show', compact('product'));
    }

    public function edit(Product $product)
    {
        return view('products.edit', compact('product'));
    }

    public function update(Request $request, Product $product)
    {
        $validated = $request->validate([
            'name' => 'required|max:255',
            'description' => 'nullable',
            'price' => 'required|integer|min:0',
            'stock' => 'required|integer|min:0',
        ]);

        $product->update($validated);
        return redirect()->route('products.index')->with('success', 'Produk berhasil diperbarui!');
    }

    public function destroy(Product $product)
    {
        $product->delete();
        return redirect()->route('products.index')->with('success', 'Produk berhasil dihapus!');
    }
}

🧱 Langkah 3 – Buat Views (Blade Templates)

📄 3.1 Layout Utama (resources/views/layouts/app.blade.php)

<!DOCTYPE html>
<html lang="id">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>@yield('title', 'Laravel CRUD')</title>

		<link
			href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
			rel="stylesheet"
		/>
		<link
			rel="stylesheet"
			href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css"
		/>
	</head>
	<body>
		<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
			<div class="container">
				<a class="navbar-brand" href="{{ route('products.index') }}"
					>Laravel CRUD</a
				>
			</div>
		</nav>

		<div class="container mt-4">@yield('content')</div>

		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
	</body>
</html>

📄 3.2 Index (Daftar Produk) – resources/views/products/index.blade.php

@extends('layouts.app')

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

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1>Daftar Produk</h1>
    <a href="{{ route('products.create') }}" class="btn btn-primary">
        <i class="bi bi-plus-circle"></i> Tambah Produk
    </a>
</div>

@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show">
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

@if($products->isEmpty())
    <div class="alert alert-info">Belum ada produk. Tambahkan produk pertama kamu!</div>
@else
    <table class="table table-striped table-hover">
        <thead class="table-dark">
            <tr>
                <th>No</th>
                <th>Nama Produk</th>
                <th>Harga</th>
                <th>Stok</th>
                <th>Aksi</th>
            </tr>
        </thead>
        <tbody>
            @foreach($products as $index => $product)
            <tr>
                <td>{{ $index + 1 }}</td>
                <td>{{ $product->name }}</td>
                <td>Rp {{ number_format($product->price, 0, ',', '.') }}</td>
                <td>{{ $product->stock }}</td>
                <td>
                    <a href="{{ route('products.show', $product->id) }}" class="btn btn-sm btn-info">Detail</a>
                    <a href="{{ route('products.edit', $product->id) }}" class="btn btn-sm btn-warning">Edit</a>
                    <form action="{{ route('products.destroy', $product->id) }}" method="POST" class="d-inline">
                        @csrf
                        @method('DELETE')
                        <button class="btn btn-sm btn-danger" onclick="return confirm('Yakin ingin menghapus?')">Hapus</button>
                    </form>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
@endif
@endsection

📄 3.3 Form Tambah (resources/views/products/create.blade.php)

@extends('layouts.app')

@section('title', 'Tambah Produk')

@section('content')
<h2>Tambah Produk Baru</h2>

<form action="{{ route('products.store') }}" method="POST">
    @csrf
    <div class="mb-3">
        <label for="name" class="form-label">Nama Produk</label>
        <input type="text" name="name" id="name" class="form-control" required>
    </div>

    <div class="mb-3">
        <label for="price" class="form-label">Harga</label>
        <input type="number" name="price" id="price" class="form-control" required>
    </div>

    <div class="mb-3">
        <label for="stock" class="form-label">Stok</label>
        <input type="number" name="stock" id="stock" class="form-control" required>
    </div>

    <button type="submit" class="btn btn-primary">Simpan</button>
    <a href="{{ route('products.index') }}" class="btn btn-secondary">Batal</a>
</form>
@endsection

📄 3.4 Detail Produk (resources/views/products/show.blade.php)

@extends('layouts.app')

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

@section('content')
<h2>Detail Produk</h2>

<table class="table table-bordered">
    <tr>
        <th>Nama Produk</th>
        <td>{{ $product->name }}</td>
    </tr>
    <tr>
        <th>Harga</th>
        <td>Rp {{ number_format($product->price, 0, ',', '.') }}</td>
    </tr>
    <tr>
        <th>Stok</th>
        <td>{{ $product->stock }}</td>
    </tr>
</table>

<a href="{{ route('products.index') }}" class="btn btn-secondary">Kembali</a>
@endsection

📄 3.5 Edit Produk (resources/views/products/edit.blade.php)

@extends('layouts.app')

@section('title', 'Edit Produk')

@section('content')
<h2>Edit Produk</h2>

<form action="{{ route('products.update', $product->id) }}" method="POST">
    @csrf
    @method('PUT')
    <div class="mb-3">
        <label for="name" class="form-label">Nama Produk</label>
        <input type="text" name="name" id="name" value="{{ $product->name }}" class="form-control" required>
    </div>

    <div class="mb-3">
        <label for="price" class="form-label">Harga</label>
        <input type="number" name="price" id="price" value="{{ $product->price }}" class="form-control" required>
    </div>

    <div class="mb-3">
        <label for="stock" class="form-label">Stok</label>
        <input type="number" name="stock" id="stock" value="{{ $product->stock }}" class="form-control" required>
    </div>

    <button type="submit" class="btn btn-primary">Update</button>
    <a href="{{ route('products.index') }}" class="btn btn-secondary">Batal</a>
</form>
@endsection

✅ Langkah 4 – Uji CRUD

  1. Jalankan server:

    php artisan serve

  2. Buka browser: http://localhost:8000/products

  3. Uji semua fitur:

    • 🟢 Tambah produk baru
    • 🔵 Lihat daftar & detail produk
    • 🟠 Edit produk
    • 🔴 Hapus produk

✨ Sekarang aplikasi CRUD Laravel SQLite + Bootstrap kamu sudah berfungsi penuh, tampil elegan, dan siap dikembangkan lebih lanjut!

🏁 Penutup

Kamu telah menyelesaikan dasar-dasar Laravel! Dari instalasi, MVC, routing, Blade, Eloquent, hingga CRUD.

Langkah Selanjutnya:

  • Authentication & Authorization (Laravel Breeze / Jetstream)
  • Eloquent Relationships (hasOne, hasMany, belongsTo, belongsToMany)
  • Database Seeding & Factories
  • File Uploads & Storage
  • API Development (Laravel Sanctum / Passport)

Selamat Koding! 🚀

About

Materi sharing session dalam format dokumentasi berbahasa indonesia

Resources

Readme
Activity

Stars

2 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published