Cara Buat Website Bisnes Guna AI (Panduan BM 2026)
Panduan cara buat website bisnes guna AI dalam Bahasa Melayu. Fahami beza domain .my vs .com.my, had Cloudflare Pages, dan bina pratonton laman kedai sendiri.
Ramai pemilik kedai makan, penyedia servis, dan peniaga kecil di Malaysia menangguhkan hasrat membina laman web sendiri kerana menyangka ia memerlukan kos ribuan Ringgit atau kemahiran pengaturcaraan yang rumit. Dengan bantuan ejen koding AI seperti Claude Code dan OpenAI Codex, korang kini boleh membina draf halaman web bisnes yang kemas terus di dalam komputer sendiri. Dalam ujian saya, kedua-duanya siap dalam kira-kira 4 minit.
Sebelum mula membina, mari fahami tiga komponen asas yang diperlukan oleh mana-mana laman web bisnes yang ringkas:
- Halaman web (Web page / fail HTML): Fail kandungan laman korang (seperti
index.html) yang mengandungi nama kedai, senarai produk atau servis, waktu operasi, dan butang WhatsApp. Fail ini boleh dibina dan dilihat terus di komputer korang secara percuma. - Hosting (Tapak simpanan awan): Perkhidmatan pelayan (server) di internet tempat fail halaman web korang disimpan supaya pelanggan boleh membukanya pada bila-bila masa.
- Domain (Alamat nama laman): Alamat rasmi perniagaan korang di pelayar web (contohnya
.myatau.com.my) supaya pelanggan mudah mengingati dan menaip nama kedai korang.
Tiga cara buat website bisnes: Perbandingan jujur
Secara umumnya, terdapat tiga jalan utama untuk mendapatkan sebuah laman web bisnes hari ini. Jadual di bawah membandingkan kelebihan dan kompromi setiap pilihan:
| Cara | Sesuai untuk | Perkara perlu difikir |
|---|---|---|
| 1. Pembina laman siap | Peniaga yang mahu susun templat siap dalam pelayar, tanpa urus fail | Bayaran langganan berterusan; selalunya tidak mudah pindah ke penyedia lain |
| 2. Ejen koding AI | Pemilik bisnes yang mahu AI bina fail laman sebenar di komputer sendiri | Fail milik korang, tetapi korang perlu semak hasilnya dan muat naik sendiri |
| 3. Upah orang | Bisnes yang ada bajet dan mahu serahkan semua kerja teknikal | Kos ikut skop kerja; setiap perubahan kecil mungkin perlu tunggu atau caj tambahan |
Dalam panduan ini, saya fokus pada Pilihan 2 — iaitu cara menggunakan ejen koding AI untuk membina pratonton laman web satu halaman di komputer korang sendiri supaya korang nampak hasilnya dahulu sebelum membelanjakan sebarang wang untuk domain.
Domain di Malaysia: Beza .my dengan .com.my (Disemak 7 Nov 2026)
Apabila korang bersedia membeli alamat rasmi laman web kelak, domain rasmi negara Malaysia diuruskan oleh MYNIC. Berdasarkan panduan rasmi pembelian domain MYNIC (mynic.my/resources/domains/buying-a-domain, disemak pada 7 November 2026), ini perbezaan kelayakan antara .my dengan .com.my:
| Domain | Siapa layak | Dokumen |
|---|---|---|
| .my | Semua individu, syarikat dan organisasi dari mana-mana negara | Rakyat Malaysia: MyKad atau pasport |
| .com.my | Organisasi atau aktiviti komersial | Dokumen SSM: Borang 9, 13 atau D |
Beberapa fakta penting daripada MYNIC yang wajib korang tahu sebelum membeli domain:
- Dibeli melalui registrar bertauliah: Korang membeli domain melalui penyedia pendaftaran (registrar) yang ditauliahkan oleh MYNIC, dan saluran pembayaran bergantung pada registrar yang dipilih.
- Harga bergantung pada registrar: MYNIC tidak menetapkan satu harga runcit tunggal kerana setiap registrar menawarkan pakej tersendiri — harga bergantung pada registrar; semak terus di laman registrar bertauliah MYNIC.
- Belum termasuk cukai: MYNIC menyatakan bahawa harga yang dipaparkan adalah tidak termasuk cukai perkhidmatan (service tax).
- Tempoh pendaftaran: Boleh didaftarkan untuk tempoh antara 1 hingga 10 tahun.
Hosting: Had pelan percuma Cloudflare Pages (Disemak 7 Nov 2026)
Untuk laman web bisnes statik yang memaparkan maklumat kedai, menu, dan pautan WhatsApp, perkhidmatan seperti Cloudflare Pages menyediakan pelan percuma (Free plan).
Berdasarkan dokumentasi had platform rasmi Cloudflare Pages (developers.cloudflare.com/pages/platform/limits/, disemak pada 7 November 2026), pelan Free menetapkan had teknikal berikut:
| Perkara | Had rasmi | Maksudnya untuk kedai kecil |
|---|---|---|
| Binaan | 500 sebulan | Cukup walaupun korang kemas kini beberapa kali sehari |
| Fail setiap laman | Sehingga 20,000 | Laman profil kedai yang ringkas biasanya hanya beberapa fail |
| Saiz setiap fail | 25 MiB | Mampatkan gambar supaya laju dibuka di telefon |
| Domain sendiri | 100 setiap projek | Boleh sambung domain kedai korang bila sedia |
Dokumentasi rasmi Cloudflare Pages tidak menyatakan angka had jalur lebar (bandwidth) statik tertentu pada halaman tersebut. Dalam panduan percuma ini, saya tidak mengajar langkah memuat naik (deployment) ke Cloudflare Pages — saya fokus membina dan menguji pratonton laman web pertama korang di komputer sendiri dahulu.
Hasil sebenar pertama: Bina pratonton website kedai (index.html) di komputer korang
Sekarang mari gunakan Claude Code atau OpenAI Codex untuk membina satu halaman web bisnes (index.html) yang direka khusus untuk skrin telefon pintar (mobile-first). Korang tidak memerlukan sebarang pelayan atau domain untuk langkah ini kerana fail tersebut dibuka terus di dalam pelayar komputer korang.
Langkah 1: Cipta satu folder ujian baharu (Website-Kedai-Ujian)
- Pada komputer Windows 10, Windows 11, atau Mac korang, cipta satu folder baharu yang kosong di atas Desktop dan namakannya
Website-Kedai-Ujian.- Korang patut nampak: Satu folder kosong bernama
Website-Kedai-Ujianberada di atas Desktop korang.
- Korang patut nampak: Satu folder kosong bernama
Langkah 2: Buka folder Website-Kedai-Ujian di dalam Claude Code atau Codex
- Buka ejen pilihan korang — sama ada melalui tab Code di dalam aplikasi desktop Claude, pilihan Codex di dalam aplikasi desktop ChatGPT, ataupun dengan membuka terminal di dalam folder
Website-Kedai-Ujiandan menjalankanclaudeataucodex.- Korang patut nampak: Ruang kerja ejen yang sudah bersambung dengan folder
Website-Kedai-Ujian.
- Korang patut nampak: Ruang kerja ejen yang sudah bersambung dengan folder
Langkah 3: Tampal prompt pembinaan website kedai
Salin prompt di bawah dan tampal ke dalam ruang arahan ejen korang. (Penting: Nombor telefon +60 12-345 6789 di bawah hanyalah nombor contoh — pastikan korang tukar kepada nombor sendiri dan ubah nama kedai serta waktu operasi mengikut perniagaan sebenar korang!):
Bina satu halaman web bisnes satu muka (one-page website) yang lengkap di dalam satu fail bernama index.html di dalam folder ini.
Gunakan maklumat perniagaan berikut sahaja (jangan reka sebarang fakta, anugerah, atau testimoni pelanggan palsu):
- Nama Perniagaan: Dapur Kopi & Kuih Seri Kembangan
- Apa yang dijual: Kopi kampung bancuhan segar, nasi lemak daun pisang, dan aneka kuih talam tradisional untuk sarapan serta tempahan mesyuarat pejabat.
- Lokasi: Seri Kembangan, Selangor
- Waktu Operasi: Selasa hingga Ahad, 7:30 pagi – 3:30 petang (Tutup setiap Isnin)
- Butang Tindakan Utama: Satu butang jelas bertulis "Tempah Melalui WhatsApp (+60 12-345 6789)" yang menghala ke pautan https://wa.me/60123456789
Keperluan reka bentuk:
1. Susun atur mobile-first yang kemas, moden, dan sangat mudah dibaca pada skrin telefon pintar.
2. Bahagikan halaman kepada 4 bahagian jelas: Kepala Halaman (Hero) bersama butang WhatsApp, Senarai Menu & Servis Utama, Waktu Operasi & Lokasi, serta Bahagian Bawah (Footer).
3. Letakkan semua kod HTML dan penggayaan CSS di dalam satu fail index.html sahaja supaya saya boleh terus membukanya di pelayar web komputer saya.
- Korang patut nampak: Saya uji prompt ini pada 7 Nov 2026. Claude Code dan Codex masing-masing siap dalam kira-kira 4 minit dan mencipta
index.htmldi dalam folderWebsite-Kedai-Ujian. Codex turut menjana sendiri satu ilustrasi hidangan dan memasukkannya ke dalam halaman. Penjanaan gambar menggunakan lebih banyak kuota, dan tiada dalam pelan percuma ChatGPT. Tukar ilustrasi itu kepada gambar sebenar kedai korang sebelum laman diterbitkan.
Langkah 4: Buka pratonton index.html di dalam pelayar web
- Buka folder
Website-Kedai-Ujiandi komputer korang dan klik dua kali pada failindex.htmlsupaya ia dibuka di dalam Chrome, Edge, atau Safari. Cuba kecilkan lebar tetingkap pelayar korang untuk melihat bagaimana halaman tersebut tersusun pada saiz skrin telefon.- Korang patut nampak: Pratonton halaman web kedai satu muka yang lengkap dengan tajuk Dapur Kopi & Kuih Seri Kembangan, senarai menu, waktu operasi, lokasi di Seri Kembangan, dan butang "Tempah Melalui WhatsApp (+60 12-345 6789)" (ingat untuk tukar kepada nombor sendiri!). Kalau korang mahu menukar warna latar atau menambah item menu, taip sahaja arahan pembetulan di dalam Claude Code atau Codex dan muat semula (refresh) pelayar korang.
3 peraturan keselamatan untuk website bisnes korang
Sebelum korang berkongsi atau menerbitkan sebarang halaman web perniagaan, semak tiga perkara keselamatan ini:
- Jangan letakkan nombor IC atau maklumat perbankan peribadi di halaman awam: Laman web bisnes boleh diakses oleh sesiapa sahaja di internet. Jangan sesekali memaparkan nombor MyKad, penyata bank peribadi, atau kunci rahsia (API key) di dalam kod halaman web.
- Semak setiap fakta yang ditulis oleh AI tentang bisnes korang: Baca setiap baris teks pada halaman
index.htmlkorang. Pastikan harga, alamat, waktu operasi, dan penerangan servis adalah tepat, serta pastikan AI tidak menyelitkan janji atau testimoni rekaan. - Gunakan gambar milik sendiri atau gambar yang korang ada hak penggunaan: Elakkan mengambil gambar produk atau kedai orang lain daripada carian imej atau media sosial tanpa kebenaran pemilik asal.
Di mana panduan percuma ini berhenti (dan apa langkah seterusnya)
Panduan percuma ini berhenti pada pratonton tempatan (index.html) di dalam komputer korang sendiri. Korang kini mempunyai fail halaman web sebenar yang boleh diubah suai pada bila-bila masa tanpa kos.
Langkah seterusnya untuk menjadikan laman web itu boleh dilayari oleh pelanggan di internet — iaitu membeli domain .my atau .com.my, memuat naik fail ke hosting (deployment), menyambungkan borang pertanyaan pelanggan, serta tetapan asas carian Google (SEO) — akan diajar langkah demi langkah di dalam resipi berbayar di bawah laluan Bina dengan AI yang akan datang di A.I. Boleh.
Sementara itu, korang boleh membaca panduan perbandingan Codex vs Claude Code, meneroka koleksi panduan lain di Belajar AI, atau memulakan asas penggunaan AI yang selamat melalui siri resipi percuma Mula Sini.