Laravel adalah framework PHP paling populer di dunia. Artikel ini ditulis untuk kamu yang benar-benar mulai dari nol. Di akhir artikel, kamu akan punya halaman web pertama yang berjalan di browser — semuanya dikerjakan dari VS Code.

Apa itu Laravel?

Bayangkan membangun rumah. Kamu bisa mulai dari nol — cetak batu bata sendiri, buat pondasi dari tanah — atau beli rumah setengah jadi yang fondasinya sudah kokoh. Laravel adalah "rumah setengah jadi" untuk aplikasi web. Sistem routing, keamanan, koneksi database, validasi form — semua sudah tersedia. Kamu tinggal fokus membangun fitur.

Laravel menggunakan pola MVC untuk mengorganisir kode supaya rapi:

Bagian File Ada di Tugasnya
Modelapp/Models/Ambil & simpan data ke database
Viewresources/views/Tampilan HTML yang dilihat user
Controllerapp/Http/Controllers/Logika — terima request, olah, kirim ke View

📋 Progress Belajarmu

Centang tiap langkah yang sudah selesai. Progress tersimpan otomatis di browser!

① Setup VS Code

VS Code (Visual Studio Code) adalah code editor gratis dari Microsoft yang digunakan mayoritas developer web profesional. Kita akan pakai VS Code sebagai pusat kerja — menulis kode, menjalankan server, dan mengelola file semuanya dari satu tempat.

Langkah Setup VS Code:

1. Install VS Code

Buka browser → buka code.visualstudio.com → klik Download → pilih sesuai OS → install seperti aplikasi biasa.

2. Install Extension: PHP Intelephense

🐘

PHP Intelephense

oleh Ben Mewburn · 30 juta+ install

Autocomplete cerdas, deteksi error real-time, go-to-definition untuk PHP. Wajib untuk PHP developer.

📌 Cara install: Tekan Ctrl+Shift+X di VS Code → cari "PHP Intelephense" → klik Install.

3. Install Extension: Laravel Blade Snippets

🍃

Laravel Blade Snippets

oleh Winnie Lin

Syntax highlighting warna dan shortcut snippet untuk file .blade.php — kode jadi lebih mudah dibaca dan ditulis.

📌 Cari "Laravel Blade Snippets" di Extensions panel → Install.

4. Cara Buka Terminal di VS Code

Tekan Ctrl + ` (backtick — tombol di sebelah kiri angka 1) ATAU klik menu Terminal → New Terminal. Terminal muncul di bawah editor dan otomatis berada di folder project yang sedang dibuka — tidak perlu cd manual.

② Install PHP dan Composer

Sebelum bisa membuat project Laravel, dua tools ini harus ada di komputermu.

Install PHP

Pilih instruksi sesuai OS kamu:

Download dan install XAMPP dari apachefriends.org. XAMPP adalah paket yang sudah include PHP di dalamnya — install seperti aplikasi biasa, tidak perlu konfigurasi tambahan.

Setelah install XAMPP, coba restart VS Code lalu cek di terminal: php -v

Mac biasanya sudah ada PHP bawaan. Cek dulu:

php -v

Jika perlu versi terbaru, install via Homebrew: install Homebrew dulu dari brew.sh, lalu brew install php

Buka terminal VS Code dan jalankan:

sudo apt update
sudo apt install php php-cli php-mbstring php-xml php-curl php-zip

Install Composer

Composer adalah package manager PHP — alat untuk download dan mengelola library/package termasuk Laravel itu sendiri.

Download Composer-Setup.exe dari getcomposer.org → klik "Download" → jalankan installer → ikuti langkah-langkahnya. Installer akan otomatis menemukan PHP dari XAMPP.

curl -sS https://getcomposer.org/installer | php
sudo mv composer.phar /usr/local/bin/composer
curl -sS https://getcomposer.org/installer | php
sudo mv composer.phar /usr/local/bin/composer

Cek Instalasi

Buka terminal di VS Code (Ctrl+`) lalu ketik:

php -v

Harus muncul: PHP 8.x.x (cli) ...

composer -V

Harus muncul: Composer version 2.x.x ...

Kalau muncul "command not found" atau "not recognized" — coba tutup dan buka ulang VS Code. Kalau masih belum, restart komputer.

③ Buat Project Laravel

Di terminal VS Code, pindah ke folder tempat kamu mau simpan project (misal Documents):

cd Documents

cd = Change Directory — "pindah ke folder ini". Lalu buat project:

composer create-project laravel/laravel belajar-laravel

Banyak teks akan berjalan di terminal — Composer sedang mendownload semua file yang dibutuhkan. Butuh 1–3 menit tergantung internet. Tunggu sampai kursor siap input lagi.

④ Buka Project di VS Code

Masuk ke folder project lalu buka langsung di VS Code:

cd belajar-laravel
code .
Penjelasan:

cd belajar-laravel — masuk ke dalam folder project.
code . — buka folder ini di VS Code. Titik (.) artinya "folder saat ini". VS Code akan terbuka dengan project di sidebar kiri.
⚠️ Kalau code . tidak bekerja di Mac:
Buka VS Code → tekan Cmd+Shift+P → ketik "Shell Command" → pilih Install 'code' command in PATH → coba lagi.

Setelah VS Code terbuka, kamu akan melihat struktur folder di sidebar kiri. Untuk pemula, fokus pada tiga folder ini dulu:

📁 BELAJAR-LARAVEL
├── 📁 routes/
│   └── web.php              ← DAFTAR URL website kamu
├── 📁 resources/
│   └── 📁 views/            ← FILE HTML tampilan
│       └── welcome.blade.php
└── 📁 app/
    └── 📁 Http/
        └── 📁 Controllers/  ← LOGIKA program (nanti)

Dari VS Code ini, buka terminal internal dengan Ctrl+`. Terminal langsung berada di dalam folder project.

⑤ Jalankan Server

Di terminal VS Code, ketik:

php artisan serve

Output yang muncul:

   INFO  Server running on [http://127.0.0.1:8000].

   Press Ctrl+C to stop the server
⚠️ Jangan tutup terminal ini!
Server berjalan selama terminal terbuka. Kalau perlu mengetik command lain, buka terminal baru di VS Code dengan klik tombol + di panel terminal bawah, atau tekan Ctrl+Shift+`.

⑥ Buka di Browser

Buka browser dan ketik di address bar:

http://localhost:8000
Apa itu localhost?
localhost adalah nama untuk komputermu sendiri. Website ini berjalan di komputermu saja — belum bisa diakses orang lain. Nanti setelah selesai development, baru di-deploy ke server online.

⑦ Buat Halaman Pertama

Di VS Code, klik file routes/web.php di sidebar kiri. Isinya kurang lebih:

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

Artinya: "Kalau user buka halaman utama (/), tampilkan file view bernama welcome."

Tambahkan route baru di bawahnya:

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

// Tambahkan ini:
Route::get('/halo', function () {
    return 'Halo Dunia! Ini halaman pertamaku.';
});

Simpan dengan Ctrl+S. Buka http://localhost:8000/halo di browser — teks langsung tampil. Tidak perlu restart server.

Buat File View (Tampilan HTML)

Di VS Code sidebar, buka folder resources/views/. Klik kanan → New File → beri nama halaman-saya.blade.php.

Kenapa .blade.php?
Blade adalah sistem template bawaan Laravel. File .blade.php bisa mengandung HTML biasa plus sintaks khusus Blade seperti {{ }} dan @foreach. VS Code dengan extension Laravel Blade Snippets akan mewarnai sintaks ini dengan benar.

Isi file tersebut dengan kode berikut:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Halaman Pertamaku</title>
    <style>
        body { font-family: sans-serif; max-width: 600px; margin: 60px auto; padding: 0 20px; }
        h1   { color: #0f766e; }
        p    { color: #475569; line-height: 1.7; }
    </style>
</head>
<body>
    <h1>Halo dari Laravel!</h1>
    <p>Ini halaman pertamaku yang dibuat dengan framework Laravel.</p>
</body>
</html>

Update route /halo di routes/web.php untuk menggunakan view ini:

Route::get('/halo', function () {
    return view('halaman-saya');
    // Laravel otomatis cari: resources/views/halaman-saya.blade.php
});

Simpan, refresh browser — halaman HTML dengan judul hijau muncul!

⑧ Tampilkan Data Dinamis

Ini yang membuat framework "hidup" — kirim data PHP dan tampilkan di HTML. Update route:

Route::get('/halo', function () {
    return view('halaman-saya', [
        'nama' => 'Budi Santoso',
        'kota' => 'Jakarta',
        'hobi' => ['Coding', 'Baca buku', 'Gaming'],
    ]);
});

Update halaman-saya.blade.php:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Profil {{ $nama }}</title>
    <style>
        body { font-family: sans-serif; max-width: 600px; margin: 60px auto; padding: 0 20px; }
        h1   { color: #0f766e; }
        li   { line-height: 2; }
    </style>
</head>
<body>
    <h1>Halo, {{ $nama }}!</h1>
    <p>Kota asal: {{ $kota }}</p>
    <h3>Hobi:</h3>
    <ul>
        @foreach ($hobi as $item)
            <li>{{ $item }}</li>
        @endforeach
    </ul>
</body>
</html>
Sintaks Blade yang perlu diingat:

{{ $nama }} — tampilkan variabel (otomatis aman dari XSS)
@foreach ($hobi as $item) — ulangi untuk setiap item di array
@endforeach — penutup loop

Ringkasan Alur Kerja Laravel

  1. User buka URL di browser → http://localhost:8000/halo
  2. Laravel cek routes/web.php — ada tidak route untuk /halo?
  3. Kalau ada, jalankan fungsi yang terdaftar
  4. Fungsi kirim data ke View (file blade)
  5. View render HTML dan kirim ke browser

Langkah Selanjutnya

  1. Controller — pisahkan logika dari route ke file terpisah
  2. Database & Migration — simpan dan ambil data dari database
  3. Eloquent ORM — cara Laravel berinteraksi dengan database
  4. Form & Validasi — terima dan validasi input dari user
  5. Authentication — sistem login siap pakai bawaan Laravel
Kalau Ada Error

Jangan panik. Laravel memberikan pesan error yang sangat detail di browser — baca pesannya, biasanya langsung ketahuan masalahnya. Kalau belum paham, copy pesan error ke Google atau tanya ke ChatGPT. Hampir semua error yang kamu temui sudah pernah dialami orang lain.