Materi Pertemuan 1

Persiapan Lingkungan Kerja

1. Tujuan Pembelajaran

Setelah mengikuti pertemuan ini, siswa mampu:

  • Menjelaskan konsep dasar localhost, web server, dan website sederhana.

  • Menginstal XAMPP sebagai web server lokal.

  • Menginstal dan menggunakan Visual Studio Code sebagai editor kode.

  • Membuat website sederhana di localhost dan mengaksesnya melalui browser.

2. Konsep Dasar

🔹 Localhost

  • Localhost adalah alamat standar (127.0.0.1) untuk mengakses komputer sendiri sebagai server.

  • Dengan localhost, kita bisa menjalankan website tanpa harus terhubung ke internet.

🔹 Web Server (XAMPP)

  • XAMPP adalah paket aplikasi yang berisi Apache (web server), MySQL (database), PHP, dan Perl.

  • XAMPP memudahkan kita menjalankan website berbasis PHP & database di komputer lokal.

🔹 Editor Kode (Visual Studio Code)

  • VSCode digunakan untuk menulis dan mengedit kode website (HTML, CSS, PHP, dll).

  • Memiliki banyak ekstensi yang memudahkan dalam coding.

3. Langkah Praktik

A. Instalasi XAMPP

  1. Download XAMPP dari: https://www.apachefriends.org.

  2. Instal dengan opsi default.

  3. Jalankan XAMPP Control Panel.

  4. Aktifkan service Apache dan MySQL.

  5. Uji coba di browser → ketik http://localhost/, jika muncul halaman XAMPP berarti berhasil.

B. Instalasi Visual Studio Code

  1. Download VSCode dari: https://code.visualstudio.com.

  2. Instal dengan opsi default.

  3. Tambahkan ekstensi seperti: PHP Server, Live Server, Prettier.

C. Membuat Website Pertama

  1. Buka folder C:\xampp\htdocs\.

  2. Buat folder baru, misalnya projek1.

  3. Di dalamnya buat file index.html dengan isi sederhana:

<!DOCTYPE html>
<html>
<head>
    <title>Website Pertama Saya</title>
</head>
<body>
    <h1>Halo, ini website pertama saya di localhost!</h1>
    <p>Dibuat menggunakan XAMPP & VSCode</p>
</body>
</html>

  1. Simpan file, lalu buka browser → akses http://localhost/projek1.

  2. Jika tampil halaman HTML, berarti website sudah berjalan di localhost.