Membangun "Rumah Digital" Impianmu Sendiri

Assalamu’alaikum Warahmatullahi Wabarakatuh

Halo anak-anak hebat ! 👋

Coba bayangkan sebuah rumah. Setiap rumah pasti punya bentuk pondasi, struktur dinding, warna cat, serta isi di dalam ruangannya masing-masing.

Nah, tahu tidak kalau Website itu sama persis seperti sebuah Rumah? 🏠

Bedanya, kalau rumah biasa berdiri di atas tanah, website adalah "Rumah Digital" milikmu yang berdiri di dunia internet.

🏠 Kenapa Kamu Perlu Punya "Rumah Digital" Sendiri?

Sama seperti rumah yang menjadi tempat tinggal dan tempat kamu menyambut tamu, website pribadi adalah tempat kamu menyambut siapapun di internet untuk mengenali siapa dirimu!

1. Tempat Memajang Karya (Portofolio): Jika rumah punya ruang tamu untuk memajang piala atau lukisan, websitemu bisa jadi tempat memajang hasil karya terbaikmu.

2. Kelihatan Keren & Profesional: Punya rumah digital dengan alamat atas namamu sendiri bikin kamu tampil beda dan kreatif dibanding teman-teman lainnya.

3. Milik Pribadi Sepenuhnya: Di media sosial, tampilan akunmu dibatasi oleh aplikasi. Tapi di website milikmu sendiri, kamu bebas mendesain "rumahmu" sesuai selera!

💭 Studi Kasus: Mendesain Rumah Digital Sesuai Cita-Citamu!

Bentuk dan isi "rumah digital" bisa disesuaikan dengan impian dan cita-citamu kelak. Coba cek beberapa contoh ini:

• Ingin Jadi Game Developer / Programmer?

  Rumah digitalmu bisa diisi dengan koleksi game buatanmu (Scratch/Construct), lengkap dengan tombol untuk pengunjung memainkan game-nya langsung!

• Ingin Jadi Atlet atau Pemain Olahraga Profesional?

  Rumah digitalmu bisa dihiasi dengan galeri piala, foto-foto saat kamu bertanding, dan catatan prestasimu.

• Ingin Jadi Pengusaha Muda (Entrepreneur)?

  Rumah digitalmu bisa jadi "toko" untuk memajang produk jualanmu (seperti desain kaos, buket bunga, atau jajanan) lengkap dengan harganya.

• Ingin Jadi Penulis, Content Creator, atau Illustrator?

  Rumah digitalmu bisa jadi "galeri seni" atau blog pribadi berisi karya gambar, komik, atau cerita pendek buatanmu.

📝 BAGAIMANA CARA MEMBANGUN RUMAH DIGITALMU?

BAGIAN 1: Kenalan dengan Bahan Bangunan Website (HTML & CSS)

Untuk membangun sebuah rumah digital, kita membutuhkan 2 bahan bangunan utama:

• HTML (HyperText Markup Language): Ibarat Struktur Rangka & Dinding rumah. HTML bertugas membuat struktur dasarnya, seperti menentukan di mana letak judul, tulisan paragraf, atau gambar.

• CSS (Cascading Style Sheets): Ibarat Cat, Dekorasi, & Interior rumah. CSS bertugas mempercantik tampilan rumah digitalmu, seperti menentukan warna cat latar belakang, jenis huruf (font), dan merapikan tata letaknya.

BAGIAN 2: Contoh Studi Kasus — Rancangan Rumah Digital Muhammaddun

Misalnya, seorang siswa bernama Muhammaddun bercita-cita ingin jadi Guru TIK / Informatika.

Sebelum membangun rumah digitalnya di komputer, Muhammaddun merancang denah rumah websitenya di kertas seperti ini:

• Bagian Atas (Atap/Pintu Masuk): Teks Judul "Selamat Datang di Rumah Digital Muhammaddun - Calon Guru TIK".

• Bagian Tengah (Ruang Utama): Foto profil Muhammaddun dan paragraf perkenalan singkat tentang hobinya ngulik komputer dan cita-citanya ingin mengajar teknologi.

• Bagian Bawah (Ruang Kelas/Kontak): Tulisan modul/tutorial koding sederhana buatan Muhammaddun dan alamat kontak/email.

🖼️ CONTOH HASIL RANCANGAN KERTAS YANG SUDAH JADI

Nah, supaya kamu makin kebayang cara bikinnya, yuk intip 3 contoh rancangan rumah digital di kertas hasil karya teman-temanmu berikut ini:

1. Contoh Rancangan 1: Website Pijat Reflexi Modern (Karya: Farhan Ahmad)

• Cita-Cita: Pemilik Tempat Pijat Reflexi Modern.

• Struktur Menu & Fitur di Kertas:

1. Profil & Layanan: Menjelaskan biodata tukang pijat, tempat & jadwal praktek, serta jenis layanan (pijat kretek).

2. Games & Edukasi: Menampilkan game titik pijat dan edukasi cara memijat serta kesehatan tulang.

3. Link Pendaftaran & Alamat: Formulir pendaftaran online dan integrasi peta alamat.

2. Contoh Rancangan 2: Website Club & Cafe (Karya: Faris Maulana Ibrahim)

• Cita-Cita: Pemilik Club / Tempat Kumpul Modern.

• Struktur Menu & Fitur di Kertas:

1. Profil Club & Pegawai: Informasi lengkap pemilik, pegawai, dan tautan profil.

2. Layanan & Fasilitas: Menu makanan/minuman cafe, sewa ruangan VIP, dan info konser.

3. Lokasi: Tautan langsung ke Google Maps agar pengunjung tidak nyasar.

3. Contoh Rancangan 3: Website Cafe Modern (Karya: Andareviko Althaq Ablyyu Bintoro)

• Cita-Cita: Pemilik Cafe Modern yang Terkenal.

• Struktur Menu & Fitur di Kertas:

1. Profile Cafe & Pekerja: Menampilkan info pekerja dan izin resmi cafe.

2. Produk & Fasilitas: Menu makanan/minuman best seller, promo, dan testimoni pengunjung.

3. Quizz & Hadiah VIP: Fitur interaktif game/quiz berhadiah kode promo dan pendaftaran pelanggan VIP via Google Forms.

BAGIAN 3: TUGAS RANCANGAN WEBSITE (Dikerjakan Sekarang!)

Sebelum kita menyentuh komputer di laboratorium, kamu wajib menggambar denah/rancangan kasar (wireframe) rumah digitalmu di kertas HVS atau buku catatan.

📋 Langkah-Langkah Mengirim Tugas:

1. Ambil selembar kertas dan pulpen/pensil warna.

2. Buat tabel seperti contoh karya teman-teman di atas (Tuliskan Nama, Kelas, Cita-cita, serta Kolom Menu, Fungsi & Fitur).

3. Foto hasil gambar rancanganmu menggunakan HP.

4. Buka website: portofolio-hqbs.web.app

5. Masuk ke pelajaran INFORMATIKA, lalu pilih kategori RANCANGAN WEBSITE.

6. Klik tombol Tambah Portofolio, lalu isi formulirnya sebagai berikut:

   • Nama Pembuat: Isi dengan nama lengkapmu (Contoh: Muhammaddun).

   • Kelas: Isi dengan kelasmu (Contoh: 7B atau 9B).

   • Topik: Isi dengan cita-citamu (Contoh: Cita-cita Menjadi Guru TIK).

   • Deskripsi: Tuliskan penjelasan singkat tentang rancangan websitemu.

   • Link: Masukkan rencana link Netlify kamu (Contoh: [https://guru-madun.netlify.app](https://guru-madun.netlify.app) $\rightarrow$ Wajib diawali https:// dan diakhiri .netlify.app).

   • Upload Gambar: Unggah foto lembar kertas rancanganmu.

⚠️ PENTING: Jika foto rancangan di kertas sudah kamu upload dan disetujui oleh Guru, barulah kamu boleh melanjutkan ke tahap praktik koding di laboratorium komputer sekolah!

BAGIAN 4: Persiapan Alat & Koding (Dikerjakan di Sekolah)

Catatan: Langkah di bawah ini akan kita kerjakan bersama-sama saat jam pelajaran Informatika di laboratorium komputer sekolah.

1. Persiapan Alat

• Teks Editor (Tempat Membangun Kode): Visual Studio Code (VS Code).

• Browser (Tempat Melihat Rumahmu): Google Chrome.

2. Buat Folder Proyek

Buat folder baru di komputer sekolah dengan nama rumah-digitalku.

3. Membuat Struktur Rumah dengan HTML (index.html)

Buka VS Code, buat file index.html di dalam folder rumah-digitalku, lalu 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>Rumah Digital Cita-Citaku</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="kartu">
        <h1>Selamat Datang di Rumah Digitalku!</h1>
        <p>Halo! Nama saya Muhammaddun. Cita-cita saya adalah menjadi seorang Guru TIK profesional.</p>
        <p>Saya belajar koding dari sekarang agar bisa mengajar teknologi dan membuat website yang bermanfaat bagi banyak orang!</p>
    </div>

</body>
</html>

4. Mengatur Cat & Dekorasi dengan CSS (style.css)

Buat file baru lagi di folder yang sama dengan nama style.css, lalu masukkan kode dekorasi berikut:

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #e0f7fa; /* Warna cat background luar */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.kartu {
    background-color: white; /* Warna tembok ruangan utama */
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    text-align: center;
    max-width: 400px;
}

h1 {
    color: #00796b;
}

p {
    color: #555;
    line-height: 1.6;
}

BAGIAN 5: Membuka Pintu Rumah Digital ke Dunia Internet via Netlify (Saat di Sekolah)

Setelah rumah digitalmu selesai dikoding dan dirapikan di lab:

1. Buka situs app.netlify.com di browser komputer lab.

2. Masuk / Sign in sesuai arahan Guru.

3. Masuk ke tab Sites.

4. Cari area kotak bertuliskan "Drag and drop your site folder here".

5. Tarik (drag) folder rumah-digitalku milikmu dari komputer dan lepaskan (drop) di kotak Netlify tersebut.

6. Tunggu beberapa detik, dan tadaaa! Rumah digitalmu sekarang sudah memiliki "alamat resmi" di internet dan bisa dikunjungi siapa saja! 🎉

📌 Ringkasan Alur Kerja Siswa:

1. Di Rumah/Kelas: Bikin sketsa rancangan rumah digital di kertas -> Foto -> Masuk INFORMATIKA -> RANCANGAN WEBSITE -> Tambah Portofolio di portofolio-hqbs.web.app.

2. Di Lab Sekolah: Buka VS Code -> Ketik HTML & CSS -> Upload folder ke Netlify.app -> Tunjukkan alamat rumah digital milikmu ke Guru!

💌 Pesan & Renungan Keislaman

Teknologi seperti koding, HTML, CSS, dan internet ini hanyalah sebuah alat (wasilah). Baik atau buruknya alat tersebut tergantung pada siapa pemegangnya dan untuk apa alat itu digunakan.

Dalam Islam, Rasulullah SAW bersabda:

"Khairunnas anfa'uhum linnas" — "Sebaik-baik manusia adalah yang paling bermanfaat bagi manusia lainnya." (HR. Ahmad & Thabrani)

 

Saat kalian membangun "Rumah Digital" ini, niatkanlah dari dalam hati bahwa website yang kalian buat bukan hanya sekadar untuk pamer atau mencari nilai sekolah. Niatkanlah untuk menyebarkan kebaikan, berbagi ilmu, menginspirasi sesama, serta mempermudah jalan hidup orang lain sesuai dengan cita-cita kalian kelak.

Ingatlah juga firman Allah SWT dalam Al-Qur'an:

"Jika kamu berbuat baik, (berarti) kamu berbuat baik bagi dirimu sendiri..." (QS. Al-Isra: 7)

Setiap baris kode baik yang kalian tulis dan bermanfaat bagi orang lain, insyaAllah akan menjadi pemberat timbangan kebaikan dan amal jariyah bagi kalian di akhirat kelak.

🔥 Kata-Kata Motivasi

"Jangan takut salah saat mulai belajar koding atau membuat sketsa. Rumah yang megah tidak pernah berdiri hanya dalam satu malam, tapi dibangun bata demi bata dengan kesabaran. Setiap kesalahan koding (bug) atau kegagalan adalah bukti bahwa kamu sedang belajar dan melangkah maju!"

Tetap semangat, jaga niat lurus karena Allah, dan tuangkan ide terbaikmu di atas kertas!

Selamat merancang rumah digitalmu dan sampai jumpa di jam praktik lab sekolah! Wassalamu’alaikum Warahmatullahi Wabarakatuh.