Web Development Laravel & VS Code
Ilustrasi: Web Development Laravel & VS Code

Membangun Aplikasi Web Profesional dengan Laravel: Tahapan RPL, Perancangan Data, dan Implementasi di VS Code

Kategori: Tutorial · Subkategori: Pemrograman / Web Development

Penulis: Teknologi Nalar ID · Tanggal: 2025-11-23

1. Penyusunan RPL (Rencana Pengembangan Sistem)

RPL adalah dokumen awal yang menjadi panduan selama proses pengembangan. Di bagian ini kita menetapkan tujuan, lingkup, aktor, serta kebutuhan fungsional dan non-fungsional.

1.1. Tujuan Sistem

Contoh tujuan: membangun Aplikasi Manajemen Konten (CMS) sederhana untuk pengelolaan artikel, user, dan kategori—dilakukan dengan Laravel.

1.2. Kebutuhan Fungsional (Contoh)

  • Pengguna dapat mendaftar dan login.
  • Admin dapat membuat, mengedit, menghapus artikel.
  • Pengguna dapat melihat daftar artikel dan membaca konten.
  • Admin melihat laporan statistik sederhana.

1.3. Kebutuhan Non-Fungsional

  • Respon halaman kurang dari 2 detik pada skenario beban ringan.
  • Autentikasi aman (hashed password, HTTPS di lingkungan produksi).
  • UI responsif, dapat diakses di perangkat mobile.

2. Pengenalan Visual Studio Code (VS Code)

VS Code adalah editor IDE ringan yang populer — menyediakan terminal bawaan, integrasi Git, serta ekosistem ekstensi yang kaya. Untuk Laravel, pasang extension seperti PHP Intelephense, Laravel Artisan, Laravel Blade Snippets, dan Prettier.

Gunakan terminal VS Code untuk menjalankan perintah Composer, Artisan, dan Git — ini mempercepat workflow development.

3. Pengenalan Laravel & Instalasi

Laravel adalah framework PHP yang menerapkan pola arsitektur MVC (Model-View-Controller). Keunggulannya termasuk Eloquent ORM, Blade templating, migration, dan ekosistem paket yang kaya.

3.1. Persyaratan Sistem

Pastikan terpasang: PHP >= 8.x, Composer, ekstensi PHP yang umum (mbstring, pdo, xml), dan database (MySQL/MariaDB atau PostgreSQL).

3.2. Membuat Project Baru

Perintah
composer create-project laravel/laravel myapp
cd myapp
php artisan serve

Setelah menjalankan php artisan serve, buka http://127.0.0.1:8000 untuk melihat halaman awal Laravel.

4. Data Flow Diagram (DFD)

DFD menggambarkan aliran data antar proses dan entitas. Di bawah ini contoh DFD sederhana (context → level 1) untuk aplikasi CMS.

5. Entity Relationship Diagram (ERD)

ERD memodelkan entitas dan relasi antar tabel pada database. Untuk CMS sederhana, entitas inti: users, posts, categories.

6. Penentuan Tabel & Normalisasi

Setelah ERD disetujui, tentukan struktur tabel dan validasi normalisasi. Contoh tabel inti beserta kolom:

users

  • id: BIGINT (PK, auto increment)
  • name: VARCHAR(255)
  • email: VARCHAR(255) UNIQUE
  • password: VARCHAR(255)
  • timestamps

posts

  • id: BIGINT (PK)
  • user_id: BIGINT (FK → users.id)
  • category_id: BIGINT (FK → categories.id)
  • title: VARCHAR(255)
  • slug: VARCHAR(255) UNIQUE
  • content: TEXT
  • timestamps

categories

  • id: BIGINT (PK)
  • name: VARCHAR(100)
  • timestamps

7. Migration & Seeder

Laravel migration memudahkan versi skema database dan reproducible deployments.

Contoh Migration Posts
<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreatePostsTable extends Migration
{
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->foreignId('user_id')->constrained()->onDelete('cascade');
            $table->foreignId('category_id')->constrained()->onDelete('set null')->nullable();
            $table->string('title');
            $table->string('slug')->unique();
            $table->text('content');
            $table->timestamps();
        });
    }

    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

Jalankan migration:

Perintah
php artisan migrate
php artisan db:seed --class=CategorySeeder

8. Routing, Controller & Model

Berikut alur singkat:

  1. Route menerima request & memanggil Controller.
  2. Controller memanggil Model (Eloquent) untuk mengambil/menyimpan data.
  3. Controller me-return View (Blade) dengan data.
routes/web.php
use App\Http\Controllers\PostController;

Route::get('/', [PostController::class, 'index'])->name('home');
Route::resource('posts', PostController::class);
PostController (ringkas)
namespace App\Http\Controllers;

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

class PostController extends Controller
{
    public function index()
    {
        $posts = Post::with('user','category')->latest()->paginate(10);
        return view('posts.index', compact('posts'));
    }

    public function show(Post $post)
    {
        return view('posts.show', compact('post'));
    }
}

Model Eloquent diset pada app/Models/Post.php dengan relasi user() dan category().

9. Blade Template & Menampilkan Web (Rata Kiri - Kanan)

Blade adalah templating engine Laravel. Untuk style teks rata kiri-kanan (justify), tambahkan CSS berikut di layout utama.

resources/views/layouts/app.blade.php (head)
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>@yield('title', 'MyApp')</title>
  <link rel="stylesheet" href="<!-- your css -->">
  <style>
    body { font-family: Arial, sans-serif; line-height:1.7; color:#222; }
    .content { text-align: justify; margin: 20px; }
  </style>
</head>
<body>
  <nav>...</nav>
  <main class="content">
    @yield('content')
  </main>
</body>
</html>

Contoh view untuk daftar posts:

resources/views/posts/index.blade.php
@extends('layouts.app')

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

@section('content')
  <h1>Daftar Artikel</h1>
  @foreach($posts as $post)
    <article>
      <h2><a href="{{ route('posts.show', $post) }}">{{ $post->title }}</a></h2>
      <p>{{ Str::limit(strip_tags($post->content), 200) }}</p>
    </article>
  @endforeach

  <!-- pagination -->
  {{ $posts->links() }}
@endsection

Dengan CSS .content { text-align: justify }, seluruh paragraf di dalam layout akan tampil rata kiri-kanan.

10. Pengujian & Deployment Lokal

Pengujian dasar yang perlu dilakukan:

  • Unit test untuk Model & Business Logic (php artisan test).
  • Browser test (Laravel Dusk) untuk alur UI.
  • Uji beban (stress test) pada endpoint kritis.

Deployment lokal untuk pengujian produksi dapat menggunakan Docker atau layanan PaaS (Laravel Vapor untuk AWS, atau provisioning manual di VPS).

Perintah dasar migration & seed
php artisan migrate --seed
php artisan serve --port=8000

11. Referensi & Bacaan Lanjutan

  1. Laravel Documentation — Official
  2. Visual Studio Code Documentation
  3. Composer — Dependency Manager for PHP
  4. MDN — CSS text-align: justify
  5. Laracasts — Video Tutorials Laravel (recommended)