MH Academy×ikxworks
Langkah 1 / 8
Selamat datang

Assalamualaikum
dan salam sejahtera, cikgu

Malam ni kita belajar bina sendiri dengan bantuan AI. Tak perlu tahu coding.

Hadiah untuk cikgu malam ni

Ilmu bina web sendiri dengan AI. Inilah hadiah kami malam ni, untuk memudahkan kerja guru.

Apa yang perlu ada

Laptop atau PC dengan Chrome
Akaun DELIMa (emel @moe-dl.edu.my)
Internet yang stabil

Apa yang kita buat

Lihat cara lama dulu
Kenal aliran kerja dan contoh web app
Bina, upload dan beri nama domain

Panduan ini boleh dibuka semula selepas bengkel untuk ulang kaji. Buat langkahnya di laptop.

Cara lama

Dulu, nak bina satu laman web
susahnya macam ni

Sebelum ada AI, semuanya dibuat sendiri dengan tangan. Tekan setiap peringkat.

Cara lama

Berminggu minggu, perlu tahu coding

Dengan AI

Satu malam. Cikgu tulis arahan dalam bahasa biasa, AI tulis kodnya

Aliran kerja

Fahamkan flow dulu

Ada lima peringkat. Tekan setiap kotak untuk lihat penerangan.

Cara mudah ingat: macam buka gerai makan. Prompt ialah resipi, Gemini tukang masak, fail HTML lauknya, Netlify gerainya, dan domain alamat gerai.

Masalah dan penyelesaian

Web app apa yang
boleh cikgu bina?

Mula dengan masalah sebenar di sekolah. Tekan setiap contoh.

Tekan satu contoh di atas.

Malam ni kita bina bahagian depan (frontend) sahaja. Web app berjalan dalam browser. Tiada pangkalan data, jadi maklumat yang diisi pengguna tidak disimpan.

Gemini

Minta Gemini tulis kod

ialah arahan yang kita beri kepada AI. Pilih satu contoh prompt, tukar bahagian kuning ikut sekolah cikgu.

  1. Buka Gemini di Chromegemini.google.com
  2. Log masuk dengan akaun DELIMaEmel yang berakhir dengan @moe-dl.edu.my. Lihat bulatan profil di atas kanan untuk pastikan akaun betul.
  3. Mula chat baharuKotak tulis berada di bahagian bawah skrin. Di situ kita tampal prompt.
Prompt landing page
Bina sebuah landing page dalam SATU fail HTML sahaja (HTML, CSS dan JavaScript dalam fail yang sama).

Maklumat:
- Nama program: Hari Sukan Tahunan 2026
- Sekolah: SK Taman Melati
- Tarikh dan masa: 20 Disember 2026, 7.30 pagi
- Tempat: Padang sekolah
- Untuk siapa: murid, ibu bapa dan komuniti

Keperluan:
1. Bahagian atas: tajuk besar, tarikh, tempat dan butang "Lihat aturcara".
2. Bahagian aturcara: senarai acara mengikut masa.
3. Bahagian kira detik (countdown) sehingga tarikh program.
4. Bahagian soalan lazim: apa perlu dibawa, pakaian, tempat letak kereta.
5. Butang WhatsApp untuk bertanya kepada guru bertugas (guna nombor contoh dahulu).
6. Reka bentuk ceria, tulisan besar, sesuai untuk telefon dan laptop.
7. Jangan guna gambar dari internet atau pangkalan data. Semua mesti berfungsi dalam satu fail.

Beri kod penuh dalam satu blok kod sahaja.
Prompt kuiz interaktif
Bina sebuah web app kuiz interaktif dalam SATU fail HTML sahaja (HTML, CSS dan JavaScript dalam fail yang sama).

Maklumat kuiz:
- Subjek: Sains
- Tahap murid: Tahun 4
- Topik: Sistem Suria
- Bilangan soalan: 10

Keperluan:
1. Skrin mula: tajuk kuiz, ruang untuk murid taip nama, dan butang besar "Mula".
2. Soalan objektif yang tepat dan sesuai dengan tahap murid, setiap satu ada 4 pilihan jawapan.
3. Tunjuk satu soalan pada satu masa, dengan nombor soalan dan bar kemajuan.
4. Bila murid tekan jawapan, terus tunjuk betul (hijau) atau salah (merah), dan paparkan jawapan yang betul.
5. Skrin akhir: nama murid, markah, peratus, mesej galakan, dan butang "Cuba Lagi" yang mengacak semula susunan soalan.
6. Reka bentuk ceria, tulisan besar, butang besar, sesuai untuk telefon dan laptop.
7. Jangan guna pautan luar, gambar dari internet atau pangkalan data. Semua mesti berfungsi dalam satu fail.

Beri kod penuh dalam satu blok kod sahaja.
Prompt website kelas
Bina sebuah website kelas dalam SATU fail HTML sahaja (HTML, CSS dan JavaScript dalam fail yang sama).

Maklumat:
- Nama kelas: 4 Amanah
- Sekolah: SK Taman Melati
- Guru kelas: Cikgu Aminah

Keperluan:
1. Menu di atas: Utama, Jadual, Pengumuman, Hubungi. Tekan menu, terus ke bahagian itu.
2. Utama: ucapan aluan guru kelas dan moto kelas.
3. Jadual: jadual waktu mingguan dalam bentuk jadual yang kemas (guna contoh dahulu).
4. Pengumuman: 3 kad pengumuman contoh dengan tarikh.
5. Hubungi: butang WhatsApp guru kelas (guna nombor contoh dahulu).
6. Reka bentuk kemas dan mesra ibu bapa, tulisan besar, sesuai untuk telefon dan laptop.
7. Jangan guna gambar dari internet atau pangkalan data. Semua mesti berfungsi dalam satu fail.

Beri kod penuh dalam satu blok kod sahaja.
  1. Salin dan tukar bahagian kuningTekan Salin prompt, tampal di Gemini, kemudian tukar maklumat ikut sekolah cikgu.
  2. HantarTekan Enter. Biasanya kurang 1 minit, Gemini akan beri kod penuh dalam satu kotak kod.
  1. Cari kotak kodDalam jawapan Gemini, cari kotak yang mengandungi kod.
  2. Muat turunTekan butang Download pada kotak kod itu. Fail akan masuk ke folder Downloads cikgu.
  3. Semak fail ituBuka folder Downloads. Cikgu patut nampak satu fail berakhir dengan .html. Klik dua kali untuk buka dalam Chrome.

Web app boleh dibuka dalam Chrome? Tahniah, web app cikgu sudah wujud. Nak tambah atau betulkan sesuatu? Pergi ke tab D. Kalau sudah puas hati, kita letak di internet.

Buka web app itu dan cuba sendiri. Kalau ada yang tak kena, salin satu arahan di bawah dan hantar kepada Gemini. Hantar satu arahan pada satu masa.

Cikgu juga boleh tulis sendiri dalam bahasa biasa. Contoh: "Tukar warna butang kepada hijau dan besarkan tajuk."

Netlify

Letak web app di internet
dengan Netlify

ialah tempat percuma untuk letak laman web. Mula dengan daftar akaun, kemudian seret fail.

  1. Buka laman daftar Netlifyapp.netlify.com/signup
  2. Pilih cara daftarTekan Sign up with Google dan pilih akaun DELIMa yang sama, atau daftar guna emel.
  3. Jawab soalan ringkasNetlify akan tanya beberapa soalan tentang cikgu. Jawab apa sahaja yang sesuai, atau tekan Skip.
  4. Sampai di DashboardBila nampak halaman utama Netlify, akaun cikgu sudah siap. Teruskan ke tab B.

Kenapa perlu daftar? Tanpa akaun, laman yang diupload hanya sementara dan akan hilang. Dengan akaun, laman cikgu kekal.

  1. Buka Netlify Dropapp.netlify.com/drop Atau dari Dashboard, tekan Add new project kemudian Deploy manually.
  2. Susun dua tetingkapBuka folder Downloads di sebelah browser supaya cikgu nampak kedua duanya.
  3. Seret fail ke dalam kotakTekan dan tahan fail .html, tarik masuk ke dalam kotak bergaris, kemudian lepaskan.
  4. Tunggu beberapa saatNetlify akan beri satu link pelik seperti jolly-cat-1a2b3c.netlify.app. Tekan link itu. Web app cikgu sudah di internet.

Laman kosong atau keluar senarai fail? Tukar nama fail kepada index.html, masukkan dalam satu folder baharu, dan seret folder itu pula.

Domain

Beri nama yang cantik
kepada laman cikgu

Link seperti jolly-cat-1a2b3c sukar diingat. Kita tukar kepada yang lebih kemas.

Hasilnya: namapilihan.netlify.app. Percuma dan sudah cukup untuk dikongsi.

  1. Buka projek cikguDi Dashboard Netlify, tekan nama projek cikgu.
  2. Pergi ke tetapanTekan Project configuration (kadang kala tertulis Site configuration).
  3. Tukar namaDi bahagian Project details, tekan Change project name.
  4. Taip nama baharu dan SaveGuna huruf kecil dan nombor sahaja, tanpa jarak. Contoh: sukansktamanmelati. Kalau nama sudah diambil orang, tambah nombor.
Link cikgu: sukansktamanmelati.netlify.app

Ini pilihan sahaja, bukan wajib. Beli domain perlukan kad debit atau kredit yang boleh bayar online. Bayaran tahunan dan harga ikut jenis domain.

Hasilnya: namapilihan.com atau namapilihan.my, tanpa perkataan netlify.

  1. Buka projek cikguTekan nama projek di Dashboard Netlify.
  2. Pergi ke Domain managementTekan Domain management, kemudian Add a domain.
  3. Cari nama domainTaip nama yang cikgu mahu. Netlify akan tunjuk sama ada nama itu masih ada dan harganya.
  4. Beli domainPilih untuk beli domain itu melalui Netlify, isi maklumat kad dan sahkan pembayaran.
  5. Tunggu domain aktifNetlify sambungkan domain dan pasang secara automatik. Biasanya beberapa minit, kadang kala sehingga beberapa jam.
Bengkel selesai

Tahniah, cikgu sudah bina
web app sendiri

Ini yang cikgu buat malam ini:

  • Faham beza cara lama dan cara AI
  • Faham aliran Idea ke Link
  • Dapatkan kod web app daripada Gemini
  • Upload ke Netlify
  • Tetapkan nama domain

Salin link Netlify cikgu dan kongsi dalam group WhatsApp kelas atau sekolah.