🚀 Modul 6: Hosting & Publishing

Mengonlinekan Website ke Internet

HTML CSS JavaScript ONLINE

1. 🎯 Tujuan Belajar

Setelah selesai membaca modul ini, adik-adik bisa:

Mengerti perbedaan Hosting dan Domain.
Mengenal platform hosting gratis untuk pemula.
Mengupload website mereka ke internet.
Membagikan link website kepada teman dan keluarga.

2. 🧸 Penjelasan Materi (Bahasa Bayi)

A. Apa itu Hosting?

Ingat website yang sudah kita buat di komputer?

Hosting itu seperti Rumah Sewaan untuk website kita.
Kalau website cuma ada di komputer kita, cuma kita yang bisa lihat.
Kalau mau orang lain lihat, website harus "pindah rumah" ke internet (Hosting).

🏠 Analogi: Komputer Kita = Kamar tidur pribadi (cuma kita yang bisa masuk). Hosting = Toko di mall (semua orang bisa kunjungi).

B. Apa itu Domain?

Domain itu seperti Alamat Rumah website kita.

Contoh: google.com, youtube.com, websiteku.com
Tanpa domain, orang harus hafal angka rumit (IP Address) untuk cari website kita.

📍 Analogi: Domain = Nama jalan dan nomor rumah (Jl. Mawar No. 10). Tanpa Domain = Orang harus hafal koordinat GPS untuk cari rumah.

3. 🎮 Simulasi Upload Website

🌐 Coba Simulasi Upload ke Internet

Klik tombol untuk melihat bagaimana website diupload ke hosting!

💻

Klik "Upload Website" untuk mulai!

☁️

🎉 Website Online!
https://website-kamu.netlify.app

📊 Platform Hosting Gratis

Platform	Kelebihan	Kekurangan	Tingkat
Netlify	Sangat mudah, drag & drop	Ada batasan tertentu	⭐ Mudah
GitHub Pages	Gratis selamanya, profesional	Perlu belajar Git sedikit	⭐⭐ Sedang
Vercel	Cepat, modern	Mirip Netlify	⭐⭐ Sedang
000webhost	Gratis dengan database	Ada iklan kecil	⭐⭐⭐ Agak Sulit

4. 🛠️ Langkah-langkah Upload

Siapkan File Website

Kumpulkan semua file website dalam satu folder.

Pastikan file utama bernama index.html (huruf kecil semua!)
Pastikan foto dan file lain ada di folder yang sama
Cek semua link CSS dan JavaScript

Buka Netlify Drop

Kunjungi: https://app.netlify.com/drop

Login atau daftar gratis (bisa pakai Google Account)
Akan ada kotak "Drag and drop your site folder here"

Drag & Drop Folder

Tarik folder website kamu dari komputer ke kotak tersebut.

Tunggu beberapa detik sampai upload selesai
Netlify akan memberikan link unik

Website Sudah Online!

Klik link tersebut untuk membuka website kamu di internet!

Bagikan link ini ke teman dan keluarga! 🎉
Link contoh: random-name-12345.netlify.app

Ganti Nama Domain (Opsional)

Di Netlify, klik Site Settings > Change Site Name.

Ganti nama random menjadi nama yang kamu mau
Contoh: website-budi.netlify.app
Nama harus unik (belum dipakai orang lain)

⚠️ Keamanan Data: Jangan mengupload informasi pribadi (alamat rumah, nomor telepon, password) ke website publik!

5. ✅ Checklist Sebelum Upload

Semua file dalam 1 folder

File utama bernama index.html (huruf kecil)

Semua gambar ada di folder

CSS dan JavaScript terhubung dengan benar

Sudah dicek di browser lokal

Tidak ada informasi pribadi yang sensitif

6. 📝 Penilaian

✅ Struktur Folder: Apakah semua file ada dalam satu folder?
✅ Nama File: Apakah file utama bernama index.html?
✅ Upload Berhasil: Apakah website bisa dibuka dari link?
✅ Link Berfungsi: Apakah semua gambar dan CSS tampil dengan benar?
✅ Berbagi: Apakah siswa berhasil membagikan link ke teman/keluarga?

7. 💡 Pesan untuk Guru / Orang Tua

Keamanan Data: Ajarkan siswa untuk tidak mengupload informasi pribadi ke website publik.

Nama Domain: Ingatkan bahwa nama domain harus sopan dan tidak menyinggung orang lain.

Hosting Gratis Ada Batasan: Jelaskan bahwa hosting gratis punya limit (ukuran file, bandwidth).

Backup File: Selalu simpan copy file website di komputer/USB.

Copyright: Pastikan gambar yang diupload adalah milik sendiri atau bebas hak cipta.

8. 🎁 Lembar Contekan Kode

📚 Cheat Sheet Hosting

Checklist Upload:

□ Semua file dalam 1 folder

                    □ File utama: index.html

                    □ Cek semua link

                    □ Tidak ada data sensitif

Platform Hosting:

Netlify → netlify.com (⭐ Mudah)

                    GitHub Pages → pages.github.com (⭐⭐)

                    Vercel → vercel.com (⭐⭐)

Cara Share:

1. Copy link dari Netlify

                    2. Kirim via WhatsApp/Email

                    3. Posting di Media Sosial

9. 🏆 Perjalanan 6 Modul

Modul 1: HTML (Kerangka)

Modul 2: CSS (Hiasan)

Modul 3: Foto & Daftar

Modul 4: Tabel & Form

Modul 5: JavaScript

Modul 6: Hosting Online! 🚀

🎉 SELAMAT! 🎉

Kamu telah menyelesaikan 6 Modul Web Programming!
Dari nol sampai website online!

🌟 Kamu resmi menjadi WEB DEVELOPER CILIK! 🌟

Website kamu sudah bisa diakses oleh siapa saja di seluruh dunia!
Tunjukkan karyamu pada orang tua, guru, dan teman-temanmu!

Teruslah belajar dan berkreasi!
Dunia butuh karyamu! 🚀