server lokal dengan hp

Siap! Berikut ini adalah langkah-langkah lengkap menjalankan website localhost di laptop kamu (tanpa internet) untuk menampilkan materi HTML seperti ruang belajar otomotif.

---

🎯 Tujuan:

Menjalankan file index.html + style.css secara offline, tampil di browser lokal seperti http://localhost.

---

✅ LANGKAH 1: Siapkan File Materi

1. Buat folder baru, misalnya:

   D:\otomotif-belajar\
   

2. Simpan dua file berikut di dalam folder itu:

index.html

(Sudah saya berikan di atas)

style.css

(Sudah saya berikan juga)

---

✅ LANGKAH 2: Gunakan Web Server Lokal

Kamu bisa pilih 2 cara termudah sesuai yang kamu punya:

---

🔵 Cara A: Menggunakan Live Server (VS Code) ✅ Paling simpel

1. Install Visual Studio Code

• Download dari: https://code.visualstudio.com
• Install di laptop kamu.

2. Buka folder otomotif-belajar di VS Code

Klik menu File > Open Folder > pilih folder tadi.

3. Install Ekstensi "Live Server"

• Buka tab Extensions (ikon kotak di sidebar kiri)
• Cari: Live Server
• Klik Install

4. Jalankan index.html via Live Server

• Klik kanan file index.html > pilih Open with Live Server
• Browser akan terbuka otomatis di alamat seperti:

  http://127.0.0.1:5500/
  

• ✅ Halaman materi otomotif kamu tampil!

---

🟢 Cara B: Menggunakan XAMPP

Cocok kalau kamu mau simulasi website PHP atau multi file.

1. Download dan Install XAMPP

• https://www.apachefriends.org/download.html

2. Buka folder htdocs

• Lokasinya biasanya di:

  C:\xampp\htdocs\
  

3. Copy folder otomotif-belajar ke sana

Contoh:

C:\xampp\htdocs\otomotif-belajar\

4. Jalankan XAMPP → Start Apache

• Buka aplikasi XAMPP Control Panel
• Klik tombol Start di bagian Apache

5. Akses dari browser:

http://localhost/otomotif-belajar/

✅ Halaman ruang belajar otomotif kamu tampil tanpa internet.

---

🔒 Penting:

• Tidak perlu kuota internet sama sekali
• Bisa diakses offline dari browser laptop
• Bisa dibagikan via flashdisk ke siswa

---

🚀 Selanjutnya:

Kalau kamu sudah bisa tampilkan index.html, kita bisa lanjut menambahkan:

• 🔘 Navigasi antar bab
• ✅ Soal pilihan ganda interaktif
• 🎨 Gambar atau animasi

Mau saya bantu buatkan fitur kuis interaktif juga?

Keren! Kalau kamu ingin siswa bisa mengakses materi dengan HP tanpa kuota internet, maka kamu bisa membuat server lokal dari laptop dengan WiFi lokal atau hotspot lokal, seperti ini:

---

🎯 Tujuan:

Siswa cukup sambung ke WiFi lokal dari laptop kamu → lalu buka http://192.168.xx.xx di browser HP → langsung akses materi belajar.

---

✅ SYARAT:

Laptop punya WiFi (built-in)

Tidak perlu koneksi internet

File HTML/CSS sudah jadi

Bisa pakai XAMPP atau Live Server

---

🛠️ LANGKAH-LANGKAH (versi mudah)

📦 1. Siapkan File Belajar

Simpan index.html dan style.css dalam satu folder, misalnya:

D:\otomotif-belajar\

---

🌐 2. Aktifkan Hotspot dari Laptop (Windows 10/11)

1. Buka Settings > Network & Internet > Mobile hotspot

2. Aktifkan Mobile hotspot

3. Atur nama dan password hotspot, misalnya:

SSID: SMK-Belajar

Password: 12345678

---

🖥️ 3. Jalankan Web Server di Laptop

Opsi A – Pakai VS Code + Live Server

1. Buka folder otomotif-belajar di VS Code

2. Klik kanan index.html > pilih Open with Live Server

3. Akan muncul di browser kamu, misalnya:

http://127.0.0.1:5500/

> Tapi alamat ini tidak bisa diakses HP, jadi lanjut ke langkah 4.

---

📱 4. Cek Alamat IP Laptop

1. Buka Command Prompt (cmd)

2. Ketik:

ipconfig

3. Cari bagian: Wireless LAN adapter

Lihat alamat IP, misalnya:

IPv4 Address. . . . . . : 192.168.137.1

---

📲 5. Akses dari HP Siswa

Siswa sambung ke hotspot dari laptop (SSID: SMK-Belajar)

Buka browser di HP

Akses alamat:

http://192.168.137.1:5500/

✅ Maka tampilan belajar akan muncul di HP tanpa internet

---

🧠 BONUS: Buat QR Code untuk Alamat IP

Agar siswa tidak perlu ketik manual, buatkan QR Code dari alamat tadi:

Contoh:

http://192.168.137.1:5500/

Gunakan website https://www.qr-code-generator.com/

Cetak atau tampilkan QR tersebut → siswa tinggal scan, akses, belajar!

---

📌 Kesimpulan

Komponen Keterangan

Laptop + Hotspot Jadi server lokal & WiFi

File HTML Disimpan di laptop

Siswa Akses dari HP via WiFi lokal

Tanpa Kuota? ✅ Iya, 100% offline

Tanpa Internet? ✅ Iya

Bisa pakai QR? ✅ Iya, untuk mempercepat akses

---

Kalau kamu mau, saya bisa:

🔹 

Siapkan ZIP file materinya

🔹 Buat QR code dari IP laptop kamu

🔹 Tambah soal interaktif HTML ringan

Cukup bilang: "Buatkan ZIP dan QR-nya" ya!