Belajar Web Development

Persiapan: Setup Tools Development

Sebelum mulai belajar web development, kita perlu menyiapkan beberapa tools di komputer kamu. Tenang, semuanya gratis dan mudah diinstall!

Apa Saja yang Dibutuhkan?

ToolFungsiDownload
Laravel HerdServer PHP + MySQL lokalherd.laravel.com
VS CodeEditor kodecode.visualstudio.com
BrowserMenampilkan websiteChrome / Firefox / Edge

1. Install Laravel Herd

Laravel Herd adalah cara paling mudah untuk menjalankan PHP dan MySQL di Mac atau Windows. Tidak perlu konfigurasi ribet — tinggal install dan langsung jalan!

Langkah Install:

  1. Buka herd.laravel.com di browser
  2. Klik tombol Download
  3. Buka file yang sudah didownload
  4. Ikuti petunjuk instalasi di layar
  5. Setelah selesai, Herd akan muncul di menu bar (Mac) atau system tray (Windows)

Verifikasi Instalasi

Buka Terminal (Mac) atau Command Prompt (Windows) dan ketik:

php --version

Kalau muncul versi PHP seperti ini, berarti instalasi berhasil:

PHP 8.3.x (cli) (built: ...)

Fitur Penting Laravel Herd

Kenapa Laravel Herd?
  • Zero config — Langsung jalan tanpa setting apapun
  • PHP included — Tidak perlu install PHP terpisah
  • MySQL included — Database sudah tersedia (Herd Pro)
  • Domain .test — Setiap project otomatis punya domain lokal, misal http://belajar.test :::

Setup Directory

Laravel Herd secara otomatis membuat folder ~/Herd di komputer kamu. Semua project yang kamu taruh di folder ini akan otomatis bisa diakses lewat browser.

~/Herd/
  ├── belajar-html/     → http://belajar-html.test
  ├── belajar-css/      → http://belajar-css.test
  └── belajar-php/      → http://belajar-php.test

2. Install Visual Studio Code

VS Code adalah editor kode yang paling populer untuk web development. Gratis, ringan, dan punya banyak extension yang membantu.

Langkah Install:

  1. Buka code.visualstudio.com
  2. Klik tombol Download
  3. Install seperti biasa

Extension yang Direkomendasikan

Setelah install VS Code, pasang extension berikut:

ExtensionFungsi
PHP IntelephenseAutocomplete dan error checking untuk PHP
Live ServerPreview HTML langsung di browser
Auto Rename TagOtomatis rename tag HTML pembuka/penutup
PrettierFormat kode otomatis

Cara install extension:

  1. Buka VS Code
  2. Klik icon Extensions di sidebar kiri (atau tekan Ctrl+Shift+X)
  3. Cari nama extension
  4. Klik Install

3. Browser

Kamu bisa pakai browser apapun, tapi Google Chrome atau Firefox direkomendasikan karena punya Developer Tools yang bagus.

Membuka Developer Tools

Developer Tools sangat penting untuk belajar web development. Cara membukanya:

  • Chrome/Edge: Klik kanan di halaman → Inspect (atau tekan F12)
  • Firefox: Klik kanan di halaman → Inspect Element (atau tekan F12)

Di Developer Tools kamu bisa:

  • Melihat dan mengedit HTML secara langsung
  • Melihat dan mengubah CSS
  • Melihat error JavaScript di Console
  • Mengecek request dan response dari server

4. Membuat File Pertama

Sekarang mari kita buat file HTML pertama untuk memastikan semuanya berjalan!

Langkah-langkah:

  1. Buka folder ~/Herd di VS Code
  2. Buat folder baru bernama belajar
  3. Di dalam folder belajar, buat file baru bernama index.html
  4. Ketik kode berikut:
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Halaman Pertamaku</title>
</head>
<body>
    <h1>Halo Dunia! 🎉</h1>
    <p>Ini adalah halaman web pertamaku.</p>
    <p>Selamat, kamu sudah berhasil membuat website!</p>
</body>
</html>
  1. Simpan file (Ctrl+S atau Cmd+S)
  2. Buka browser dan ketik: http://belajar.test

:::tip Berhasil! Kalau kamu melihat tulisan "Halo Dunia! 🎉" di browser, selamat! Kamu sudah siap untuk mulai belajar web development! 🚀

Selanjutnya

Sekarang tools sudah siap, mari kita mulai belajar Dasar HTML →