Temukan

Minggu, 18 Januari 2026

Website cepat dengan bantuan Blackbox.ai

 Membuat website cepat dengan bantuan Blackbox.ai

Contoh perintah (prompt) sederhana membuat website menggunakan Blackbox.ai

1.       Website Portofolio Sederhana (HTML, CSS, JavaScript)

Prompt ini meminta AI untuk membuat halaman tunggal yang responsif dan menarik secara visual untuk menampilkan karya.

  • "Buatlah kode lengkap (HTML, CSS, dan JavaScript) untuk website portofolio satu halaman yang modern. Website ini harus memiliki bagian 'Tentang Saya', 'Proyek', dan 'Kontak'. Terapkan desain responsif dengan skema warna minimalis (putih, abu-abu, dan aksen biru). Sertakan efek hover halus pada tautan navigasi dan tombol."

2.       Website E-Commerce Dasar (HTML/Tailwind CSS)

Prompt ini meminta kerangka dasar untuk toko online, dengan fokus pada tata letak produk.

  • "Hasilkan struktur website e-commerce dasar menggunakan Tailwind CSS. Halaman utama harus menampilkan grid 4 kolom untuk produk, dengan gambar placeholder, nama produk, dan harga. Sertakan bilah navigasi di bagian atas dengan logo, tautan 'Produk', dan ikon keranjang belanja. Pastikan tata letak responsif untuk desktop dan seluler."

3.       Formulir Kontak Fungsional (HTML/PHP Sederhana)

Prompt ini berfokus pada pembuatan elemen fungsional tertentu, bukan seluruh website.

  • "Tulis kode HTML untuk formulir kontak yang menyertakan bidang untuk 'Nama', 'Email', dan 'Pesan'. Diperlukan skrip PHP sederhana untuk memproses pengiriman formulir ini dan mengirimkan data ke alamat email tertentu. Sertakan validasi dasar sisi klien menggunakan JavaScript untuk memastikan semua bidang diisi sebelum pengiriman."

4.       Halaman Landing Page Acara (HTML/Bootstrap)

Prompt ini meminta halaman landing page yang spesifik untuk sebuah acara menggunakan kerangka kerja Bootstrap.

  • "Buat halaman landing page acara yang menarik menggunakan Bootstrap 5. Halaman harus memiliki penghitung waktu mundur JavaScript ke tanggal acara yang ditentukan, bagian pendaftaran dengan tombol CTA (Call to Action), dan bagian FAQ yang dapat diperluas. Gunakan palet warna yang cerah dan modern."

Contoh Penggunaan Prompt Terstruktur

"Buatlah struktur kode lengkap untuk website dengan domain bengkel.co.id. Website ini berfokus pada Kursus Belajar Komputer Online Khusus Cyber Security. Gunakan bahasa pemrograman Python dengan framework Flask atau Django. Fitur yang harus ada: halaman beranda yang profesional, daftar modul kursus (seperti Pentesting, Network Security, dan Python for Security), halaman pendaftaran, dan sistem login. Gunakan Tailwind CSS untuk desainnya agar terlihat modern dan responsif."

Contoh Penggunaan Prompt Berorientasi Fitur (Untuk Backend & Database)

"Tolong buatkan kode Python menggunakan Django untuk website kursus cyber security bernama bengkel.co.id. Saya butuh skema database sederhana untuk menyimpan data pengguna dan progres belajar siswa. Buat juga tampilan landing page yang menarik dengan tema 'hacker/dark mode' dan sertakan bagian testimoni serta harga kursus."

Contoh Penggunaan Prompt Singkat (Untuk Pembuatan Cepat/Draft)

"Buatlah website satu halaman (single page) menggunakan Python Streamlit untuk alamat bengkel.co.id. Isinya adalah platform kursus online Cyber Security. Sertakan formulir kontak, kurikulum singkat, dan video embed contoh pelajaran."

Tips Tambahan saat Menggunakan Blackbox AI:

  • Minta File Terpisah: Jika kodenya terlalu panjang, instruksikan Blackbox dengan: "Berikan kode secara terpisah untuk file app.py, models.py, dan folder templates/index.html."
  • Spesifikasi Keamanan: Karena topiknya adalah Cyber Security, Anda bisa meminta: "Pastikan kode Python yang dibuat mengikuti best practice keamanan web, seperti proteksi terhadap SQL Injection dan CSRF."
  • Deployment: Jika ingin segera online, tambahkan: "Berikan panduan cara men-deploy kode ini ke layanan hosting seperti Heroku atau PythonAnywhere agar domain bengkel.co.id bisa aktif."

Setelah mendapatkan kodenya, Anda bisa melakukan registrasi domain di layanan seperti Niagahoster atau Rumahweb untuk meresmikan alamat bengkel.co.id tersebut.

Tidak ada komentar:

Posting Komentar