Membuat Website Dashboard Pesantren Modern dengan Shaynaa AI Secara Praktis

Pendahuluan

Website dashboard untuk pesantren modern sekarang bukan lagi sekadar pelengkap. Ini sudah jadi kebutuhan operasional. Di era digital, pengelolaan data santri, pendaftaran, program, sampai laporan administrasi tidak lagi efektif kalau masih manual atau tercecer di banyak file. Dashboard membantu semua informasi terpusat dan mudah dikontrol.

Kalau sistem internal tidak tertata dengan baik, dampaknya bukan cuma ke tampilan, tapi ke kinerja tim. Data sulit dicari, laporan lambat dibuat, dan proses administrasi jadi tidak efisien. Dashboard yang terstruktur membuat pengelola pesantren bisa memantau kondisi lembaga secara real-time tanpa harus membuka banyak dokumen berbeda.

Masalahnya, banyak yang mengira membuat website dashboard itu mahal dan teknisnya rumit. Harus paham coding tingkat lanjut, harus membangun sistem dari nol, atau menyewa developer dengan biaya besar. Tantangan biaya, teknis, dan waktu sering membuat digitalisasi sistem pesantren tertunda cukup lama.

Di sinilah Shaynaa AI menjadi solusi yang lebih praktis. Dengan pendekatan berbasis prompt dan generate otomatis, kita bisa membangun struktur dashboard secara lebih cepat dan terarah. Tanpa harus menyusun layout dari awal secara manual, kita tetap bisa menghasilkan template HTML yang rapi, konsisten, dan siap dikembangkan lebih lanjut sesuai kebutuhan sistem pesantren.

Mengenal Shaynaa AI dan Cara Kerjanya

Kalau ngomongin UI dashboard, sering banget kita ngetik hal-hal yang itu-itu terus: struktur layout, sidebar, tabel, header, button, dan seterusnya. Ngetik manual itu bukan salah, tapi kalau bisa dipercepat tanpa kehilangan kualitas, kenapa nggak?

Nah, di sinilah kita ngenalin Shaynaa — sebuah tool AI-powered web builder yang bisa dibilang asisten UI modern kamu. Cek aja langsung di https://shaynaaa.com.

Shaynaa bukan sekadar generik “bikin UI”. Dia dirancang khusus buat bantu developer, designer, dan creator menghasilkan template HTML dengan cepat hanya dari deskripsi teks (prompt). Kamu cukup jelasin kebutuhan halamannya: posisi elemen, jenis data yang tampil, fitur yang dibutuhin, dan gaya visualnya. Dari situ, Shaynaa akan ngeluarin HTML + Tailwind CSS yang siap dipakai di proyek nyata.

Sekarang bayangin ini:

• Kamu lagi buka VS Code,
• udah pegang outline halaman yang mau dibuat,
• tinggal tulis prompt pendek tapi jelas ke Shaynaa,
• klik generate,
• dan dalam hitungan detik halaman dashboard muncul.

Ini bukan magic. Ini kerja sama antara konteks yang kamu tahu sebagai developer sama kecepatan AI untuk ngejawab deskripsi kamu.

Tapi penting dibedain: artikel ini nggak pakai Shaynaa untuk sekali klik langsung beres semua halaman sekaligus. Kita pakai pendekatan yang lebih sehat dan bisa dipakai lagi di project lain:

• Satu halaman = satu prompt.
• Satu prompt = satu file HTML.
• Setiap hasil langsung kita simpan dan rapikan sejak awal.

Cara kerja ini bikin template yang kita bikin bukan sekadar demo UI, tapi aset digital yang bisa dipakai ulang, dikustom, atau bahkan dijual. Struktur filenya jadi masuk akal, mudah dibaca orang lain, dan scalable kalau nanti mau dikembangin jadi React, Next.js, atau integrasi backend.

Dan ini yang bikin Shaynaa menarik:

hasilnya bukan cuma prototype, tapi HTML yang bersih dan layak dikembangkan lebih lanjut.

Dengan pendekatan ini, kamu tetap pegang kendali. AI membantu eksekusi UI, kamu yang mengarahkan konteks dan logikanya.

Setup Workspace & Folder Project

Sebelum buka Shaynaa dan mulai nulis prompt, ada satu hal yang nggak boleh dilewatin:

kita harus jelas dulu halaman dashboard apa saja yang mau dibangun.

Bukan biar ribet. Justru supaya nanti pas generate UI, kita nggak asal “bikin dashboard yang keliatan canggih” tapi nggak jelas fungsinya.

Yang kita kejar itu dashboard yang masuk akal dipakai oleh admin pesantren setiap hari.

Di tahap ini, kita posisikan diri sebagai admin atau staf tata usaha pesantren.

Orang yang tiap hari ngurus data santri, cek pembayaran, pantau pendaftaran baru, lihat laporan program, dan kelola akun pengguna. Dari sudut pandang ini, struktur halaman dashboard jadi jauh lebih realistis dan terarah.

Halaman yang kita siapkan dari awal adalah:

1. Dashboard → ringkasan jumlah santri, pendaftaran terbaru, pembayaran, dan aktivitas terbaru.
2. Data Santri → daftar santri, detail profil, status aktif/nonaktif.
3. Pendaftaran → data calon santri dan status seleksi.
4. Program → daftar program pendidikan dan kuota.
5. Keuangan → riwayat pembayaran dan tagihan.
6. Laporan → rekap data dalam periode tertentu.
7. Users → manajemen admin dan staf.
8. Settings → konfigurasi dasar sistem.

Setiap halaman ini dipisah.

Satu halaman, satu file HTML.

Kenapa? Karena sejak awal target kita bukan bikin satu halaman panjang berisi semua komponen. Tapi bikin kumpulan template dashboard yang rapi dan reusable. Mudah dikembangkan, mudah diintegrasikan, dan fondasinya sudah kuat dari awal.

Dengan struktur seperti ini, nanti pas masuk ke Shaynaa:

1. kita tahu prompt-nya harus fokus ke fungsi apa,
2. hasil layout jadi lebih relevan,
3. dan file HTML yang dihasilkan langsung enak disusun di dalam project.

Setelah struktur halaman beres, kita langsung masuk ke workspace.

Buka VS Code. Di tahap ini kita nggak perlu mikirin backend, database, atau integrasi sistem dulu. Fokusnya satu: menyiapkan template HTML dashboard pesantren secara terstruktur dari awal.

Langkah pertama, bikin satu folder project. Namanya bebas, tapi jelas konteksnya. Misalnya:

dashboard-pesantren-modern-html

Ingat, ini masih template. Bukan aplikasi final. Jadi mindset-nya bukan “langsung deploy”, tapi “struktur ini enak nggak kalau nanti dikembangkan lebih lanjut”.

Di dalam folder utama, kita langsung buat file per halaman:

1. index.html untuk Dashboard
2. santri.html untuk Data Santri
3. pendaftaran.html
4. program.html
5. keuangan.html
6. laporan.html
7. users.html
8. settings.html

Isinya belum perlu lengkap. Bahkan boleh cuma struktur HTML dasar.

Isinya belum apa-apa, nggak masalah. Bahkan boleh cuma:

<!DOCTYP html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Tujuan tahap ini bukan bikin UI. Tapi menyiapkan panggungnya dulu.

Supaya nanti setiap kali kita generate dari Shaynaa:

1. kita tahu file mau ditempel di mana,
2. setiap halaman berdiri sendiri,
3. dan struktur project tetap konsisten dari awal.

Dengan workspace seperti ini, workflow jadi lebih enak. Generate satu halaman → salin HTML → tempel ke file → simpan → lanjut halaman berikutnya. Nggak numpuk, nggak berantakan, dan progres project jadi lebih terkontrol.

Kalau struktur dan folder sudah siap, barulah kita masuk ke bagian paling inti:

mulai generate halaman satu per satu pakai prompt ke Shaynaa, dimulai dari Dashboard sebagai pusat kontrol sistem pesantren.

Generate Halaman Dashboard dengan Shaynaa (Step by Step)

Step 1: Buka Shaynaa dan buat project baru

Pertama, buka https://shaynaaa.com lewat browser.

Di halaman utama, klik “Create New Project”. Project ini bakal jadi tempat semua halaman template kita nanti dikumpulin — mulai dari dashboard, Deals, Customer, sampai laporan.

Penting untuk bikin project dari awal, karena dari sini Shaynaa akan ngejaga konsistensi style dan struktur antar halaman. Anggap aja ini kayak satu folder besar yang rapi, bukan file lepas-lepas.

Step 2: Buat prompt untuk halaman Beranda

Sekarang kita fokus ke halaman pertama: Dashboard.

Ini bagian yang paling krusial. Prompt di Shaynaa itu ibarat briefing ke desainer. Kita nggak cuma bilang “buat dashboard pesantren”, tapi harus jelasin dengan jelas siapa yang pakai, untuk apa, dan data apa saja yang wajib muncul di tampilan utama.

Karena ini dashboard pesantren modern, penggunanya adalah admin atau staf tata usaha. Jadi mereka butuh ringkasan seperti:

1. Total santri
2. Pendaftaran baru
3. Pembayaran bulan ini
4. Program aktif
5. Aktivitas terbaru

Semua itu sebaiknya terlihat dalam satu layar utama.

Sebelum generate, pastikan kamu sudah memilih tema yang tersedia di Shaynaa seperti Bandung, Jakarta, atau Jakarta Lite.

Khusus untuk project ini kita akan menggunakan tema Jakarta.

Di sini kita tidak perlu menuliskan warna atau gaya desain di dalam prompt, karena seluruh styling sepenuhnya mengikuti tema yang dipilih.

Contoh prompt:

Buat dashboard admin pesantren modern sebagai pusat kontrol staf. Tambahkan sidebar denganmenu: Dashboard, Data Santri, Pendaftaran, Program, Keuangan, Laporan, Users, Settings. Tampilkan ringkasan Total Santri, Pendaftaran Baru, Pembayaran Bulan Ini, dan Program Aktif. Sertakan tabel pendaftaran terbaru, data pembayaran terbaru, serta log aktivitas.

Nggak perlu takut kalau prompt belum sempurna. Yang penting jelas konteksnya dan spesifik kebutuhan datanya.

Perlu diperhatikan juga, di Shaynaa ada batasan panjang prompt:

minimal 40 karakter dan maksimal 400 karakter. Jadi jangan terlalu pendek, tapi juga jangan kepanjangan sampai bertele-tele.

Nantinya, Shaynaa juga akan memberikan saran prompt terbaik dari deskripsi yang kita tulis. Jadi sistem akan membantu merapikan dan mengoptimalkan prompt sebelum proses generate dilakukan.

Tips penting: hindari prompt yang terlalu umum seperti “buat dashboard modern”. Semakin detail instruksinya, semakin relevan dan siap pakai hasil layout yang dihasilkan.

Step 3: Generate halaman

Kalau prompt sudah siap dan sudah memenuhi batas minimal 40 karakter serta maksimal 400 karakter, sekarang waktunya klik Generate.

Di tahap ini, Shaynaa akan memproses prompt yang kita tulis dan mengubahnya menjadi tampilan UI dashboard sesuai instruksi. Biasanya prosesnya cepat, dan kita langsung bisa melihat hasil layout lengkapnya.

Yang perlu kamu lakukan di tahap ini bukan langsung puas atau panik.

Perhatikan beberapa hal:

1. Apakah struktur sidebar sudah sesuai?
2. Apakah kartu statistik muncul sesuai instruksi?
3. Apakah tabel dan activity log sudah ada?
4. Apakah warna primary sesuai dengan yang diminta?

Kalau ada bagian yang kurang pas, tenang. Itu normal. Kita memang jarang langsung dapat hasil 100% sempurna di generate pertama.

Anggap hasil ini sebagai draft pertama.

Setelah halaman dashboard berhasil di-generate dan tampil dengan struktur yang jelas, barulah kita lanjut ke tahap berikutnya: review dan evaluasi sebelum masuk ke proses edit.

Step 4: Review hasil di Shaynaa

Setelah Shaynaa selesai melakukan generate, sistem akan langsung menampilkan hasil layout berdasarkan prompt yang sudah kita kirim.

Di tahap ini, jangan langsung ambil kodenya dulu.

Sekarang kita perlu review hasilnya dengan tenang dan objektif. Anggap ini seperti ngecek draft pertama sebelum kita pakai ke project.

Beberapa hal yang perlu diperhatikan:

1. Cek struktur sidebar / navbar Apakah urutan menu sudah sesuai dengan yang kita minta?
2. Cek bagian ringkasan utama Apakah kartu statistik seperti Total Santri dan Pendaftaran Baru sudah muncul?
3. Cek tabel dan activity log Apakah elemen yang diminta benar-benar ditampilkan?
4. Pastikan layout tidak berantakan Lihat apakah struktur antar section sudah rapi dan logis.

Selain itu, manfaatkan juga fitur cek responsif langsung di Shaynaa.

Biasanya tersedia preview untuk:

1. Tampilan Desktop
2. Tampilan Tablet
3. Tampilan Mobile

Coba pindahkan ke mode mobile dan tablet, lalu perhatikan:

• Apakah sidebar berubah jadi menu collapse?
• Apakah kartu statistik tetap terbaca dengan jelas?
• Apakah tabel masih nyaman dilihat di layar kecil?

Jangan cuma fokus di desktop. Dashboard yang bagus harus tetap rapi dan usable di berbagai ukuran layar.

Kalau ada bagian yang kurang sesuai, kita bisa lanjut ke tahap edit dan penyempurnaan di Shaynaa dulu.

Tujuan review ini sederhana:

pastikan struktur dashboard sudah benar, responsif, dan siap dipakai.

Kalau sudah oke, barulah kita lanjut ke tahap berikutnya: melihat code HTML dan menyalinnya ke project kita di VS Code.

Step 5: Cek Layers & Project Files

Setelah review tampilan selesai dan layout sudah terasa pas, jangan langsung ambil kodenya dulu.

Masih ada satu tahap penting: cek Layers dan Project Files di Shaynaa.

Di sini ada dua hal yang perlu kita perhatikan.

Cek Layers

Fitur Layers memungkinkan kita melihat struktur penyusun halaman yang baru saja di-generate.

Yang perlu dicek:

1. Urutan section (header, sidebar, main content, footer)
2. Pembagian komponen seperti stat card, tabel, dan activity log
3. Apakah elemen tersusun rapi dan terpisah dengan jelas

Tujuannya bukan untuk ngoding di sini, tapi untuk memastikan struktur halaman memang modular dan logis.

Kalau layer-nya sudah terstruktur dengan baik, biasanya hasil HTML-nya juga lebih bersih dan enak dibaca.

Cek Project Files

Selain Layers, ada juga bagian Project Files.

Ini bukan file HTML yang kita download, tapi daftar halaman atau project yang sudah kita generate sebelumnya di dalam workspace Shaynaa.

Di sini kita bisa melihat:

1. Halaman Dashboard yang baru saja dibuat
2. Halaman lain (kalau sebelumnya sudah generate halaman lain)
3. Struktur project secara keseluruhan

Bagian ini penting supaya kita tahu setiap halaman berdiri sendiri dan tidak tercampur dengan generate sebelumnya.

Anggap saja ini seperti “manajemen halaman” di dalam Shaynaa sebelum kita ambil kodenya ke VS Code.

Step 6: Rapikan Hasil dengan UI Edit Mode Shaynaa

Setelah cek Layers dan Project Files, sekarang kita masuk ke tahap penyempurnaan lewat UI Edit Mode di Shaynaa.

Di tahap ini kita belum menyentuh code. Kita rapikan dulu dari sisi tampilan supaya saat nanti disalin ke VS Code, hasilnya sudah bersih dan siap pakai.

Beberapa hal yang perlu dirapikan:

1. Ganti teks dummy Hapus semua placeholder atau contoh data bawaan. Ganti dengan nama pesantren, jumlah santri yang realistis, nama program, dan istilah yang benar-benar akan digunakan.
2. Sesuaikan identitas pesantren Pastikan nama lembaga konsisten di semua bagian. Jangan sampai di sidebar pakai istilah berbeda dengan yang ada di konten utama.
3. Rapikan spacing dan alignment Perhatikan jarak antar kartu statistik, posisi tabel, dan kesejajaran judul dengan isinya. Pastikan semuanya terasa rapi dan nyaman dilihat.
4. Cek kembali struktur visualnya Pastikan tidak ada section yang terasa terlalu padat, kosong berlebihan, atau tidak proporsional.

Tahap ini penting supaya dashboard yang kita hasilkan bukan cuma “jadi”, tapi benar-benar terlihat profesional dan siap masuk ke tahap berikutnya: melihat dan menyalin code HTML ke project kita.

Step 7: Salin HTML ke VS Code

Kalau hasil di UI Edit Mode sudah rapi dan sesuai kebutuhan, sekarang waktunya masuk ke bagian teknis: ambil kodenya.

Di Shaynaa, buka bagian Code View atau tampilan HTML. Di sana kamu bisa melihat seluruh struktur HTML dari halaman dashboard yang sudah kita generate dan rapikan tadi.

Langkahnya sederhana:

1. Buka tampilan code di Shaynaa
2. Salin seluruh kode HTML yang tersedia
3. Masuk ke project di VS Code
4. Buka file halaman admin (misalnya admin.html atau index.html untuk dashboard)
5. Paste dan replace isi file dengan kode dari Shaynaa
6. Simpan file

Pastikan kamu menempelkan kode ke file yang benar sesuai struktur project yang sudah kita siapkan di awal. Setelah disimpan, buka file tersebut di browser untuk memastikan tampilannya sama seperti preview di Shaynaa.

Step 8: Jalankan di browser

Setelah kode HTML berhasil ditempel ke file admin di VS Code dan sudah disimpan, sekarang waktunya kita cek hasil akhirnya di browser.

Cara paling praktis adalah menggunakan Live Server di VS Code.

Yang perlu dilakukan:

1. Klik kanan pada file index.html (atau file dashboard yang kamu gunakan)
2. Pilih Open with Live Server
3. Browser akan otomatis terbuka dan menampilkan halaman dashboard

Setelah terbuka, pastikan beberapa hal berikut:

1. Halaman tampil tanpa error
2. Struktur sidebar dan konten muncul dengan lengkap
3. Tidak ada tampilan yang rusak atau terpotong
4. Responsif tetap berjalan saat layar diperkecil

Kalau semua tampil normal dan sesuai dengan preview di Shaynaa, berarti proses pembuatan halaman dashboard sudah berhasil dari awal sampai jalan di browser.

Selanjutnya, tinggal ulangi workflow yang sama untuk halaman berikutnya sampai semua halaman website pesantren selesai dibuat satu per satu.

Generate Halaman Data Santri dengan Shaynaa (Step by Step)

Step 1: buat project baru

Kita tidak perlu membuat project baru.

Kita tetap menggunakan project yang sama seperti Dashboard tadi supaya semua halaman berada dalam satu workspace dan satu struktur yang konsisten.

Langkahnya seperti ini:

• Masuk ke project yang sudah kita gunakan sebelumnya
• Tulis prompt baru untuk halaman Data Santri
• Klik Generate

Setelah itu, Shaynaa biasanya akan menampilkan konfirmasi seperti:

Update current file atau Create new file?

Di tahap ini, kita pilih Create New File.

Kenapa?

Karena kita ingin setiap halaman berdiri sendiri. Dashboard tetap di file sebelumnya, dan halaman Data Santri dibuat sebagai file baru di dalam project yang sama.

Dengan cara ini:

• Struktur project tetap rapi
• Setiap halaman punya file masing-masing
• Tidak menimpa halaman Dashboard yang sudah jadi

Setelah memilih Create New File, barulah kita lanjut ke tahap berikutnya: membuat prompt khusus untuk halaman Data Santri.

Step 2: Buat prompt untuk halaman Data santri

Sekarang kita fokus ke halaman Data Santri.

Kalau Dashboard tadi berfungsi sebagai ringkasan utama, maka halaman ini lebih detail. Fungsinya sebagai pusat pengelolaan data seluruh santri yang terdaftar di pesantren.

Berarti prompt yang kita tulis harus jelas konteksnya:

halaman ini dipakai admin untuk melihat, mencari, dan mengelola data santri.

Beberapa elemen yang sebaiknya ada di halaman Data Santri:

1. Tabel daftar santri
2. Kolom seperti: Nama, NIS, Kelas, Program, Status, Tahun Masuk
3. Fitur pencarian (search bar)
4. Filter berdasarkan kelas atau program
5. Tombol tambah santri
6. Tombol edit dan hapus pada setiap baris data

Ingat, kita tetap tidak perlu menuliskan warna atau gaya desain karena itu sudah mengikuti tema yang dipilih (misalnya Jakarta).

Contoh prompt:

Buat halaman admin Data Santri untuk pesantren modern. Tampilkan tabel daftar santri dengan kolom Nama, NIS, Kelas, Program, Status, dan Tahun Masuk. Tambahkan fitur pencarian, filter berdasarkan kelas dan program, serta tombol tambah santri. Sertakan aksi edit dan hapus pada setiap baris data.

Pastikan panjang prompt tetap di antara 40 hingga 400 karakter.

Yang penting di sini adalah kejelasan struktur dan fungsi halaman. Semakin jelas kita menjelaskan kebutuhan admin, semakin relevan hasil layout yang dihasilkan oleh Shaynaa.

Setelah prompt siap, kita lanjut ke tahap Generate dan pilih Create New File seperti yang sudah dijelaskan sebelumnya.

Step 3: Generate halaman

Setelah prompt selesai ditulis dan sudah sesuai kebutuhan, sekarang waktunya klik Generate.

Begitu tombol Generate diklik, Shaynaa akan menampilkan halaman konfirmasi terlebih dulu. Di tahap ini, sistem akan memperlihatkan kembali:

1. Prompt yang sudah kita tulis
2. Tema yang sedang digunakan (misalnya Jakarta)
3. Opsi AI Prompt Boosting

Di sini, cukup pastikan satu hal penting:

apakah prompt yang tampil sudah benar dan sesuai dengan yang kita maksud?

Kalau sudah sesuai, langsung lanjutkan proses generate.

Setelah itu, Shaynaa akan mulai memproses prompt dan menghasilkan layout halaman Data Santri berdasarkan struktur yang kita minta.

Sama seperti sebelumnya, hasil generate pertama ini adalah draft awal. Jadi setelah selesai, kita tidak langsung ambil kodenya.

Step 4: Review hasil di Shaynaa

Setelah proses generate selesai dan halaman Data Santri tampil, sekarang kita masuk ke tahap review.

Jangan langsung ambil kodenya dulu. Anggap ini sebagai tahap pengecekan sebelum halaman benar-benar siap dipakai.

Beberapa hal yang perlu diperhatikan:

• Pastikan struktur informasi runtut Urutan elemen harus logis. Biasanya dimulai dari heading halaman, lalu action button (misalnya Tambah Santri), kemudian search dan filter, baru tabel data. Jangan sampai tombol penting malah tersembunyi atau posisinya membingungkan.
• Cek heading dan hierarchy Pastikan judul utama jelas terlihat sebagai heading utama. Subjudul, label filter, dan judul tabel harus memiliki hirarki yang rapi dan tidak terasa “sama beratnya” semua. Struktur heading yang baik bikin halaman lebih profesional dan enak dipahami.

Selain itu, seperti sebelumnya, jangan lupa cek juga tampilan responsif:

1. Coba preview di desktop
2. Coba di tablet
3. Coba di mobile

Pastikan tabel tetap terbaca, tombol tetap bisa diakses, dan layout tidak berantakan di layar kecil.

Kalau struktur dan hierarki sudah rapi, barulah kita lanjut ke tahap berikutnya: cek Layers & rapikan lewat UI Edit Mode sebelum ambil kodenya.

Step 5: Cek Layers & Project Files

Setelah halaman berhasil di-generate dan tampilan sudah terlihat rapi di Shaynaa, jangan langsung ambil kodenya dulu. Masih ada satu tahap penting sebelum masuk ke VS Code: memastikan struktur halaman modular dan file project tertata dengan baik.

Di Shaynaa, ada dua fitur utama yang perlu dicek: Layers dan Project Files.

Cek Layers

Layers ini ibarat “lapisan-lapisan” penyusun halaman. Dengan fitur ini, kita bisa melihat bagaimana setiap elemen tersusun, mulai dari header, sidebar, main content, hingga footer.

Beberapa hal yang perlu diperhatikan:

• ✅ Urutan section: Pastikan header, sidebar, main content, dan footer tersusun logis.
• ✅ Komponen modular: Stat card, tabel, activity log, dan elemen lain sebaiknya dipisah rapi.
• ✅ Hierarki visual: Elemen penting seperti tombol CTA, search bar, atau filter terlihat di layer atas, bukan “terselip” di bawah komponen lain.
• ✅ Konsistensi naming: Nama layer jelas, misal sidebar-menu, stat-card-total-santri, supaya nanti mudah diidentifikasi.

Manfaat ngecek Layers:

• Layout lebih mudah diedit di UI Edit Mode.
• Struktur HTML yang nanti diexport ke VS Code jadi bersih, terpisah, dan mudah dibaca.

Cek Project Files

Selain Layers, ada juga panel Project Files. Ini menampilkan semua halaman yang sudah di-generate dalam satu project workspace.

Yang perlu dicek:

• ✅ Halaman berdiri sendiri: Dashboard, Data Santri, Pendaftaran, Program, dsb., masing-masing punya file tersendiri.
• ✅ File tidak tertimpa: Pastikan saat generate halaman baru, pilih Create New File, bukan update file lama.
• ✅ Struktur folder rapi: Semua file tersimpan di folder project yang sama, memudahkan navigasi dan integrasi.

Manfaat ngecek Project Files:

1. Memastikan semua halaman berada dalam satu workspace yang konsisten.
2. Memudahkan kita menghubungkan navigasi antar halaman.
3. Menghindari file bercampur atau hilang saat proses generate berikutnya.

Tips tambahan:

• Jangan langsung ambil kode HTML sebelum cek Layers & Project Files.
• Catat nama file dan urutan halaman. Misal: index.html → Dashboard, santri.html → Data Santri.
• Kalau ada halaman yang kurang lengkap, tandai dulu, lalu edit di UI Edit Mode sebelum ambil kodenya.

Dengan langkah ini, kita memastikan project bersih, terstruktur, dan siap untuk tahap berikutnya: Rapikan Hasil dengan UI Edit Mode Shaynaa.

Step 6: Rapikan Hasil dengan UI Edit Mode Shaynaa

Setelah cek Layers dan Project Files, sekarang waktunya masuk ke tahap penyempurnaan visual halaman Data Santri lewat UI Edit Mode di Shaynaa. Tahap ini penting supaya halaman nggak cuma “jadi”, tapi siap dipakai admin pesantren dengan data yang realistis.

Masukkan Data Asli

Hal pertama yang perlu dilakukan adalah mengganti semua data dummy atau placeholder dengan data yang relevan.

Beberapa hal yang perlu diperhatikan:

• ✅ Nama santri: Pastikan format konsisten, misal Ahmad Fauzi, Siti Nurhaliza.
• ✅ NIS / Nomor Induk Santri: Gunakan nomor unik yang masuk akal, bukan angka random.
• ✅ Kelas dan Program: Sesuaikan dengan struktur program pesantren, misal Tahfidz, Bahasa Arab, IT Santri.
• ✅ Status Santri: Tandai aktif / nonaktif sesuai kebutuhan.
• ✅ Tahun Masuk: Pastikan semua santri punya data tahun masuk yang valid.

Tip: Masukkan data sedikit demi sedikit dulu, jangan langsung semua. Ini membantu memastikan layout tabel tetap rapi dan mudah dicek.

Hapus Konten Generik

Selanjutnya, hapus semua placeholder bawaan Shaynaa yang tidak relevan, misal:

• Teks “Lorem Ipsum”
• Icon atau gambar default yang nggak sesuai konteks pesantren
• Data contoh seperti “John Doe” atau “Sample Program”

Checklist rapikan tampilan:

• ✅ Heading & label: Pastikan judul tabel dan filter sesuai halaman Data Santri.
• ✅ Tombol aksi: Tombol Tambah, Edit, dan Hapus ada di tempat yang logis dan terlihat.
• ✅ Spacing & alignment: Pastikan jarak antar kolom, kartu, dan tombol seragam dan nyaman dibaca.
• ✅ Visual konsisten: Gunakan tema yang sama dengan halaman lain (misal Jakarta) agar seluruh project terasa menyatu.

Tips tambahan

• Preview di mode Desktop, Tablet, dan Mobile untuk memastikan tabel tetap terbaca dan tombol bisa diakses di semua ukuran layar.
• Jangan lupa cek apakah filter dan search bar terlihat jelas, terutama di layar kecil.
• Simpan perubahan secara berkala agar progress tidak hilang.

Dengan langkah ini, halaman Data Santri sudah lebih siap untuk masuk ke Step 7: Salin HTML ke VS Code. Hasilnya bukan hanya rapi, tapi juga menggambarkan kondisi data nyata pesantren, sehingga admin bisa langsung bekerja tanpa harus edit ulang banyak hal.

Step 7: Salin HTML ke VS Code

Setelah halaman Data Santri rapi dan siap, sekarang waktunya masuk ke tahap teknis: menyalin kode HTML dari Shaynaa ke VS Code. Ini memastikan halaman bisa berjalan di project lokal dan terhubung dengan navigasi utama.

Salin code HTML dari shaynaa ke vscode

• Buka file santri.html (atau file halaman Data Santri yang sudah disiapkan sebelumnya) di VS Code.
• Di Shaynaa, buka Code View atau tampilan HTML halaman Data Santri.
• Klik button copy code HTML, atau lalu salin (Ctrl+C / Cmd+C).
• Paste (Ctrl+V / Cmd+V) ke file santri.html di VS Code, ganti isi file yang lama.
• Simpan file (Ctrl+S / Cmd+S).

Catatan: Kalau ada yang belum menyiapkan file, baru buat file baru dengan nama jelas seperti santri.html dan lanjutkan seperti langkah di atas. Tapi kalau mengikuti workflow kita dari awal, semua file sudah siap.

Integrasikan ke Navbar

Supaya halaman bisa diakses dari menu utama:

• Buka file index.html atau file lain yang memiliki sidebar / navbar.
• Pastikan menu Data Santri sudah ada dan mengarah ke santri.html:

<li><ahref="santri.html"class="nav-link">Data Santri</a></li>

• Pastikan urutan menu sesuai logika navigasi: Dashboard → Data Santri → Pendaftaran → Program → …
• Simpan perubahan navbar.

Tips: Selalu cek kembali link navbar supaya mengarah ke file yang benar. Ini mencegah error “404 Not Found” saat diklik.

Final Check

• Pastikan santri.html tersimpan di folder project yang sama dengan halaman lain.
• Periksa struktur HTML di VS Code: jangan ada tag yang belum ditutup atau elemen duplicate.
• Semua elemen penting seperti tabel, tombol tambah/edit/hapus, filter, dan search bar sudah tampil sesuai preview Shaynaa.

Dengan langkah ini, halaman Data Santri siap untuk diuji di browser, dan kita bisa lanjut ke Step 8: Jalankan di browser untuk memastikan tampilan, navigasi, dan responsif bekerja sesuai harapan.

Step 8: Jalankan di browser

Setelah kode HTML halaman Data Santri ditempel dan tersimpan di VS Code, sekarang waktunya menjalankan halaman di browser untuk memastikan semuanya tampil dan berfungsi dengan baik.

Buka Halaman di Browser

1. Di VS Code, pastikan file santri.html sudah tersimpan.
2. Klik kanan pada file → pilih Open with Live Server.
   • Kalau belum pakai Live Server, bisa install extension Live Server di VS Code terlebih dahulu.
3. Browser akan otomatis terbuka menampilkan halaman Data Santri.

Tip: Live Server membuat setiap perubahan di VS Code langsung terlihat di browser, jadi workflow lebih cepat.

Cek Navigasi dari Beranda

1. Buka halaman Dashboard (index.html) di browser.
2. Klik menu Data Santri di sidebar.
3. Pastikan halaman berpindah ke Data Santri tanpa error.
4. Periksa kembali semua link internal lain:
   • Tombol Tambah Santri
   • Tombol Edit atau Hapus
   • Filter dan search bar

Tips: Kalau ada link yang tidak berfungsi, pastikan nama file dan href di navbar sudah sesuai.

Cek Tampilan dan Responsif

1. Uji tampilan di berbagai ukuran layar:
   • Desktop → pastikan tabel dan tombol terlihat rapi.
   • Tablet → sidebar harus collapse atau menyesuaikan layar.
   • Mobile → tabel masih terbaca, tombol tetap bisa diklik.
2. Periksa jarak antar elemen (spacing) dan alignment.
3. Pastikan data asli sudah tampil, bukan placeholder Shaynaa.

Final Check

• Halaman tampil tanpa error atau elemen rusak.
• Navigasi dari Dashboard ke Data Santri berjalan mulus.
• Layout tetap konsisten dengan halaman lain yang sudah dibuat.

Dengan langkah ini, halaman Data Santri sudah sepenuhnya siap digunakan oleh admin pesantren.

Selanjutnya, workflow yang sama bisa diterapkan untuk halaman lain seperti Pendaftaran, Program, Keuangan, Laporan, Users, dan Settings. Cukup ulangi pattern:

Prompt → Generate → Review → Edit → Salin HTML → Jalankan di Browser

Generate Halaman Pendaftaran dengan Shaynaa (Step by Step)

Step 1: Buat file baru

Di tahap ini, tidak perlu membuat project baru. Semua halaman pesantren, mulai dari Dashboard, Data Santri, hingga Pendaftaran, sebaiknya berada dalam satu project. Dengan begitu, tema tetap konsisten dan struktur file lebih rapi.

Langkahnya cukup buka project yang sudah dibuat sebelumnya di Shaynaa, pastikan halaman sebelumnya tersimpan, dan sekarang kita siap menambahkan halaman Pendaftaran ke dalam project yang sama.

⚠️ Tip: Menjaga semua halaman dalam satu project membuat update tema atau style lebih mudah. Misal ingin ubah warna primary atau font, cukup sekali saja, semua halaman ikut berubah.

Step 2: Buat prompt untuk halaman pendaftaran

Halaman Pendaftaran berfungsi sebagai form untuk input data calon santri. Di sini kita harus menjelaskan kebutuhan dengan jelas ke Shaynaa agar layout yang dihasilkan rapi dan siap pakai.

Beberapa elemen penting yang sebaiknya ada: nama lengkap, alamat, nomor telepon, pilihan program, dan tombol submit. Jangan lupa, field harus jelas labelnya agar admin mudah memahami.

Contoh prompt yang bisa digunakan di Shaynaa:

Buat halaman Pendaftaran untuk admin pesantren dengan forminput Nama Lengkap, Alamat, Nomor Telepon, Pilihan Program, dan tombol Submit. Layout harus rapi dan responsif.

⚠️ Tip: Panjang prompt tetap antara 40–400 karakter. Jangan terlalu umum seperti “buat halaman pendaftaran”, tapi cukup spesifik sehingga Shaynaa tahu elemen apa saja yang harus muncul.

Setelah prompt siap, kita bisa lanjut ke Step 3: Generate halaman di Shaynaa.

Step 3: Generate halaman

Setelah prompt siap, sekarang saatnya klik Generate di Shaynaa untuk membuat halaman Pendaftaran. Pastikan kamu sudah memilih tema yang sama dengan project sebelumnya, misal Jakarta, supaya tampilan konsisten dengan Dashboard dan Data Santri.

Langkahnya sederhana:

1. Masukkan prompt yang sudah diringkas dan lengkap (sidebar + field form) ke Shaynaa.
2. Pastikan panjang prompt antara 40–400 karakter.
3. Klik Generate dan pilih Create New File. Hal ini memastikan setiap halaman berdiri sendiri, tapi tetap berada di dalam project yang sama.

⚠️ Tips: Jangan panik kalau hasil pertama belum sempurna. Fokus cek apakah sidebar muncul sesuai urutan, form terlihat lengkap, dan tombol Submit ada. Hasil generate pertama biasanya draft awal yang perlu review dan edit.

Setelah generate selesai, kita bisa lanjut ke Step 4: Review hasil di Shaynaa, untuk memastikan layout, responsif, dan struktur form sudah sesuai.

Step 4: Review hasil di Shaynaa

Setelah halaman Pendaftaran selesai di-generate, jangan langsung ambil kodenya. Sekarang saatnya review hasilnya secara menyeluruh.

Beberapa hal penting yang perlu dicek:

1. Sidebar: pastikan urutan menu tetap sama seperti di halaman lain (Dashboard, Data Santri, Pendaftaran, Program, Keuangan, Laporan, Users, Settings).
2. Form Input: semua field muncul sesuai prompt, mulai dari Nama & Panggilan, Jenis Kelamin, TTL, Alamat, Telepon, Email, Sekolah Asal, Kelas, Program sebelumnya, Pilihan Program, hingga Nama & Telepon Wali.
3. Tombol Submit: pastikan ada, jelas, dan mudah diakses.
4. Layout: cek apakah form tersusun rapi, tidak terlalu padat, dan mudah dibaca.
5. Responsif: gunakan preview responsif khusus di Shaynaa. Pilih mode Desktop, Tablet, dan Mobile di pojok kanan atas editor. Periksa:
   • Sidebar collapse di tablet dan mobile
   • Form tetap terbaca jelas dan tombol Submit mudah diakses
   • Tidak ada field atau label yang terpotong

⚠️ Tips: Fokus jangan cuma di desktop. Banyak admin membuka halaman Pendaftaran lewat tablet atau HP, jadi pastikan usability tetap nyaman di semua ukuran layar.

Setelah review selesai dan semua elemen terlihat benar, kita bisa lanjut ke Step 5: Cek Layers & Project Files untuk memastikan struktur halaman modular dan siap di-edit.

Step 5: Cek Layers & Project Files

Setelah halaman Pendaftaran selesai direview, langkah berikutnya adalah memastikan struktur halaman rapi dan modular sebelum kita rapikan lebih lanjut.

Cek Layers

1. Buka panel Layers di Shaynaa.
2. Pastikan urutan elemen jelas: header, sidebar, main content, form, tombol Submit, footer.
3. Pastikan setiap komponen seperti field input, label, dan tombol terpisah dengan rapi agar mudah di-edit dan maintain.
4. Tujuannya supaya HTML yang nanti diambil ke VS Code bersih dan mudah dibaca.

Cek Project Files

• Masuk ke panel Project Files di Shaynaa.
• Pastikan halaman Pendaftaran muncul sebagai file baru, berdiri sendiri, tapi tetap berada di dalam project yang sama.
• Cek apakah halaman sebelumnya (Dashboard, Data Santri) tidak tertimpa.
• Anggap panel ini seperti “manajemen halaman” untuk memastikan tiap halaman tetap modular dan terorganisir.

⚠️ Tips: Layers yang rapi memudahkan saat nanti kita masuk ke UI Edit Mode, karena setiap field atau komponen sudah jelas posisinya dan tidak tercampur.

Setelah Layers & Project Files dicek dan terlihat rapi, kita bisa lanjut ke Step 6: Rapikan Hasil dengan UI Edit Mode Shaynaa untuk menyesuaikan tampilan dan data sesuai kebutuhan nyata.

Step 6: Rapikan Hasil dengan UI Edit Mode Shaynaa

Setelah mengecek Layers dan Project Files, sekarang waktunya masuk ke UI Edit Mode untuk menyempurnakan tampilan halaman Pendaftaran.

Di tahap ini, fokus kita bukan ngoding, tapi memastikan form dan elemen visual rapi serta siap digunakan admin.

Beberapa hal yang perlu diperhatikan:

1. Isi data asli: ganti placeholder atau contoh data dengan informasi realistis, seperti nama program atau kelas yang tersedia di pesantren.
2. Rapikan form: pastikan label dan input tersusun rapi, spacing antar field konsisten, dan tombol Submit jelas terlihat.
3. Cek layout responsif: pastikan form tetap nyaman di desktop, tablet, maupun mobile.

⚠️ Tips: Jangan lupa untuk menyesuaikan setiap detail yang relevan dengan alur pendaftaran sebenarnya, misal durasi program atau target capaian tiap pilihan program. Hal ini membuat halaman lebih realistis dan siap dipakai oleh admin sehari-hari.

Setelah semua rapi dan siap, kita bisa lanjut ke Step 7: Salin HTML ke VS Code untuk integrasi ke project.

Step 7: Salin HTML ke VS Code

Setelah halaman Pendaftaran rapi dan siap, sekarang waktunya masuk ke tahap teknis: menyalin kode HTML dari Shaynaa ke VS Code. Ini memastikan halaman bisa berjalan di project lokal dan terhubung dengan navigasi utama.

Salin code HTML dari Shaynaa ke VS Code

Buka file daftar.html di VS Code. Di Shaynaa, buka Code View atau tampilan HTML halaman Pendaftaran. Salin seluruh kode HTML (Ctrl+C / Cmd+C), lalu paste (Ctrl+V / Cmd+V) ke file daftar.html di VS Code, ganti isi file yang lama jika perlu, kemudian simpan file (Ctrl+S / Cmd+S).

Catatan: Kalau file belum dibuat, baru buat file baru dengan nama jelas seperti daftar.html dan lanjutkan langkah di atas. Tapi kalau mengikuti workflow dari awal, file sudah siap.

Integrasikan ke Navbar

Supaya halaman bisa diakses dari menu utama, buka file index.html atau file lain yang memiliki sidebar / navbar. Pastikan menu Pendaftaran sudah ada dan mengarah ke daftar.html:

<li><ahref="daftar.html"class="nav-link">Pendaftaran</a></li>

Periksa urutan menu agar logis: Dashboard → Data Santri → Pendaftaran → Program → …

Simpan perubahan navbar.

Tips: Selalu cek kembali link navbar supaya mengarah ke file yang benar, untuk menghindari error “404 Not Found” saat diklik.

Final Check

Pastikan daftar.html tersimpan di folder project yang sama dengan halaman lain. Periksa struktur HTML di VS Code, jangan ada tag yang belum ditutup atau elemen duplicate. Semua elemen penting seperti form, field input, tombol Submit, search bar, dan filter sudah tampil sesuai preview Shaynaa.

Dengan langkah ini, halaman Pendaftaran siap untuk diuji di browser, dan kita bisa lanjut ke Step 8: Jalankan di browser untuk memastikan tampilan, navigasi, dan responsif bekerja sesuai harapan.

Step 8: Jalankan di browser

Setelah kode HTML halaman Pendaftaran berhasil ditempel dan disimpan di VS Code, sekarang waktunya memastikan semuanya berjalan lancar di browser. Cara paling praktis adalah menggunakan Live Server di VS Code.

Klik kanan pada file daftar.html → pilih Open with Live Server. Browser akan otomatis membuka halaman Pendaftaran.

Yang perlu dicek

1. Pastikan tampilan form rapi dan sesuai preview Shaynaa.
2. Coba isi beberapa field form, pastikan input mudah diakses dan tombol Submit terlihat jelas.
3. Uji semua link internal:
   • Menu sidebar / navbar mengarah ke halaman yang benar.
   • Tombol navigasi lain di dalam halaman (misalnya kembali ke Dashboard) bekerja.
4. Cek tampilan di berbagai ukuran layar: desktop, tablet, dan mobile. Pastikan form tetap responsif dan tidak terpotong.

Tips: Kalau ada elemen yang kurang rapi di layar kecil, catat dan perbaiki kembali di UI Edit Mode Shaynaa atau di VS Code sebelum lanjut ke halaman berikutnya.

Setelah semua dicek dan berjalan lancar, halaman Pendaftaran sudah siap digunakan, dan workflow generate halaman dari Shaynaa ke browser untuk halaman inti selesai.

Generate Halaman Keuangan dengan Shaynaa (Step by Step)

Step 1: Buat project baru

Halaman Keuangan ini berfungsi sebagai pusat pengelolaan semua transaksi pembayaran santri. Di sini admin bisa melihat riwayat pembayaran, memfilter data berdasarkan bulan, kelas, atau program, serta menambahkan, mengedit, atau menghapus catatan pembayaran. Selain itu, halaman ini juga memudahkan ekspor laporan dan pembuatan struk sebagai bukti pembayaran bagi santri.

Untuk membuat halaman ini di Shaynaa, kita tidak perlu membuat project baru. Semua halaman admin pesantren sebaiknya tetap berada dalam satu project Shaynaa yang sama, supaya tema, style, dan struktur sidebar konsisten.

Langkahnya:

1. Buka project yang sudah dibuat sebelumnya (Dashboard, Data Santri, Pendaftaran).
2. Pastikan halaman sebelumnya sudah tersimpan dengan benar.
3. Sekarang kita siap menambahkan halaman Keuangan ke dalam project yang sama.

⚠️ Tip: Menjaga semua halaman dalam satu project membuat update tema atau style lebih mudah. Misal ingin ubah warna primary atau font, cukup sekali saja, semua halaman ikut berubah.

Step 2: Buat prompt untuk halaman Keuangan

Sekarang kita fokus ke halaman Keuangan.

Kalau Dashboard berfungsi sebagai ringkasan utama, maka halaman ini lebih detail. Fungsinya sebagai pusat pengelolaan seluruh transaksi pembayaran santri di pesantren.

Berarti prompt yang kita tulis harus jelas konteksnya:

halaman ini dipakai admin untuk melihat, mencari, dan mengelola pembayaran, serta menyiapkan laporan keuangan.

Beberapa elemen yang sebaiknya ada di halaman Keuangan:

1. Tabel riwayat pembayaran
2. Kolom seperti: Nama Santri, Kelas, Program, Tanggal Bayar, Jumlah, Metode, Status
3. Fitur pencarian dan filter berdasarkan bulan, kelas, atau program
4. Tombol Tambah Pembayaran
5. Tombol Edit dan Hapus pada setiap baris data
6. Tombol Cetak Struk
7. Opsi ekspor laporan PDF

Ingat, kita tetap tidak perlu menuliskan warna atau gaya desain karena itu sudah mengikuti tema yang dipilih (misalnya Jakarta).

Contoh prompt:

Buat halaman Keuangan untuk admin pesantren modern. Tampilkan tabel riwayat pembayaran dengan kolom Nama Santri, Kelas, Program, Tanggal Bayar, Jumlah, Metode, Status. Tambahkan fitur pencarian, filter berdasarkan bulan, program, dan kelas. Sertakan tombol Tambah Pembayaran, Edit, Hapus, Cetak Struk, dan ekspor laporan PDF.

Pastikan panjang prompt tetap di antara 40 hingga 400 karakter.

Yang penting di sini adalah kejelasan struktur dan fungsi halaman. Semakin jelas kita menjelaskan kebutuhan admin, semakin relevan hasil layout yang dihasilkan oleh Shaynaa.

Setelah prompt siap, kita lanjut ke tahap Generate dan pilih Create New File seperti yang sudah dijelaskan sebelumnya.

Step 3: Generate halaman

Setelah prompt halaman Keuangan siap, sekarang saatnya klik Generate di Shaynaa untuk membuat halaman riwayat pembayaran. Pastikan kamu sudah memilih tema yang sama dengan project sebelumnya, misal Jakarta, supaya tampilan konsisten dengan Dashboard dan Data Santri.

Langkahnya sederhana:

1. Masukkan prompt yang sudah diringkas dan lengkap (tabel riwayat pembayaran + filter + tombol aksi) ke Shaynaa.
2. Pastikan panjang prompt antara 40–400 karakter.
3. Klik Generate dan pilih Create New File. Hal ini memastikan setiap halaman berdiri sendiri, tapi tetap berada di dalam project yang sama.

⚠️ Tips: Jangan panik kalau hasil pertama belum sempurna. Fokus cek apakah sidebar muncul sesuai urutan, tabel terlihat lengkap, filter bisa dipakai, dan tombol aksi (Tambah, Edit, Hapus, Cetak, PDF) ada. Hasil generate pertama biasanya draft awal yang perlu review dan edit.

Setelah generate selesai, kita bisa lanjut ke Step 4: Review hasil di Shaynaa, untuk memastikan layout, responsif, dan struktur tabel serta tombol sudah sesuai.

Step 4: Review hasil di Shaynaa

Setelah halaman Keuangan selesai di-generate, jangan langsung ambil kodenya. Sekarang saatnya review hasilnya secara menyeluruh untuk memastikan semua fitur dan layout tampil sesuai kebutuhan admin pesantren.

Beberapa hal penting yang perlu diperiksa:

1. Sidebar / Navbar: pastikan urutan menu tetap konsisten dengan halaman lain (Dashboard, Data Santri, Pendaftaran, Program, Keuangan, Laporan, Users, Settings).
2. Ringkasan Keuangan: cek apakah kartu statistik seperti Total Pembayaran Bulan Ini, Total Tagihan, dan Status Pembayaran muncul dengan jelas.
3. Tabel Transaksi: pastikan tabel riwayat pembayaran menampilkan kolom seperti Nama Santri, Kelas / Program, Nominal, Tanggal Pembayaran, Status, dan opsi Aksi (Edit / Hapus).
4. Filter & Search: cek apakah filter berdasarkan bulan, kelas, program, dan search bar berfungsi serta mudah diakses.
5. Tombol / CTA: tombol tambah transaksi atau generate laporan harus terlihat jelas dan mudah diklik.
6. Layout & Spacing: pastikan tabel, kartu, dan tombol tersusun rapi, jarak antar elemen konsisten, dan tidak terlalu padat.
7. Responsif: gunakan fitur preview responsif di Shaynaa. Cek di mode Desktop, Tablet, dan Mobile. Perhatikan:
   • Sidebar collapse di tablet dan mobile
   • Kartu statistik dan tabel tetap terbaca jelas
   • Tombol tetap mudah diakses dan tidak tertutup

⚠️ Tips: Jangan cuma cek di Desktop. Banyak admin mengakses halaman Keuangan lewat tablet atau HP, jadi pastikan usability tetap nyaman di semua ukuran layar.

Setelah review selesai dan semua elemen terlihat sesuai, barulah lanjut ke Step 5: Cek Layers & Project Files untuk memastikan struktur halaman modular dan siap di-edit di UI Edit Mode.

Step 5: Cek Layers & Project Files

Setelah halaman Keuangan selesai direview, sekarang waktunya memastikan struktur halaman rapi dan modular. Ini penting supaya nanti saat diambil ke VS Code, semuanya mudah diedit dan nggak berantakan.

Cek Layers

• Buka panel Layers di Shaynaa.
• Pastikan urutan elemen logis: header → sidebar → main content → kartu / tabel → tombol → footer.
• Setiap komponen, seperti field input, label, dan tombol, harus terpisah dengan rapi agar gampang diubah atau di-maintain.
• Tujuannya: HTML yang nanti diambil bersih, jelas, dan gampang dibaca.

Cek Project Files

• Masuk ke panel Project Files di Shaynaa.
• Pastikan halaman Keuangan muncul sebagai file sendiri, tetap berada di project yang sama, dan tidak menimpa halaman lain (Dashboard, Data Santri, Pendaftaran, dll).
• Anggap panel ini seperti “peta” halaman kamu — bikin semua file modular, rapi, dan gampang dicari.

⚠️ Tips: Layers yang terstruktur dengan baik membuat langkah berikutnya di UI Edit Mode jauh lebih cepat dan menyenangkan. Nggak ada lagi drama field yang nyempil atau tombol susah dicari.

Kalau semua layers dan file sudah dicek dan rapi, kita bisa lanjut ke Step 6: Rapikan Hasil dengan UI Edit Mode Shaynaa untuk menyesuaikan tampilan, spacing, dan data sesuai kebutuhan nyata.

Step 6: Rapikan Hasil dengan UI Edit Mode Shaynaa

Setelah mengecek Layers dan Project Files, sekarang saatnya masuk ke UI Edit Mode untuk menyempurnakan tampilan halaman Keuangan.

Di tahap ini, kita tidak ngoding dulu, tapi fokus memastikan form, tabel, dan elemen visual rapi, jelas, dan siap dipakai admin.

Hal-hal yang perlu dicek:

1. Isi data realistis: ganti placeholder atau contoh data dengan informasi nyata, misalnya nama program, tipe pembayaran, atau kategori keuangan yang berlaku di pesantren.
2. Rapikan form & tabel: pastikan label dan input tersusun rapi, spacing antar elemen konsisten, tombol Submit mudah ditemukan, dan tabel mudah dibaca.
3. Cek layout responsif: pastikan halaman tetap nyaman dilihat di desktop, tablet, dan mobile. Sidebar collapsible harus bekerja, tabel dan form tidak terpotong, dan tombol mudah diakses.
4. Tambahkan info alur keuangan: misalnya status pembayaran, tanggal transaksi, atau langkah-langkah pencatatan agar admin lebih mudah mengikuti alur kerja sehari-hari.

⚠️ Tips: Perhatikan detail kecil tapi penting, seperti warna status pembayaran, tooltip info tambahan, atau ikon yang memudahkan admin memahami alur. Hal ini bikin halaman lebih realistis dan profesional.

Kalau semua elemen sudah rapi dan siap, kita bisa lanjut ke Step 7: Salin HTML ke VS Code untuk integrasi ke project dan testing lebih lanjut.

Step 7: Salin HTML ke VS Code

Setelah halaman Keuangan rapi dan siap, sekarang masuk ke tahap teknis: menyalin kode HTML dari Shaynaa ke VS Code. Ini memastikan halaman bisa dijalankan di project lokal dan terhubung dengan navigasi utama.

Salin kode HTML dari Shaynaa ke VS Code

1. Buka file baru atau file yang sudah ada, misal keuangan.html di VS Code.
2. Di Shaynaa, buka Code View atau tampilan HTML halaman Keuangan.
3. Salin seluruh kode HTML (Ctrl+C / Cmd+C), lalu paste (Ctrl+V / Cmd+V) ke file keuangan.html di VS Code.
4. Simpan file (Ctrl+S / Cmd+S).

⚠️ Catatan: Jika file belum ada, buat dulu dengan nama jelas seperti keuangan.html. Kalau mengikuti workflow dari awal, file sudah tersedia.

Integrasikan ke Sidebar / Navbar

Supaya halaman bisa diakses dari menu utama:

1. Buka file index.html atau file lain yang memiliki sidebar / navbar.
2. Tambahkan menu Keuangan yang mengarah ke keuangan.html:

<li><ahref="keuangan.html"class="nav-link">Keuangan</a></li>

1. Pastikan urutan menu tetap logis: Dashboard → Data Santri → Pendaftaran → Program → Keuangan → …
2. Simpan perubahan navbar.

⚠️ Tips: Selalu cek link agar mengarah ke file yang benar, untuk menghindari error “404 Not Found”.

Final Check

• Pastikan keuangan.html tersimpan di folder project yang sama dengan halaman lain.
• Periksa struktur HTML di VS Code, jangan ada tag yang belum ditutup atau elemen duplikat.
• Semua elemen penting seperti tabel transaksi, filter, tombol aksi, dan field input sudah tampil sesuai preview Shaynaa.

Dengan langkah ini, halaman Keuangan siap untuk diuji di browser. Selanjutnya bisa lanjut ke Step 8: Jalankan di browser untuk memastikan tampilan, navigasi, dan responsif bekerja sesuai harapan.

Step 8: Jalankan di browser

Setelah kode HTML halaman Keuangan berhasil ditempel dan disimpan di VS Code, sekarang saatnya memastikan semuanya berjalan lancar di browser. Cara paling praktis adalah menggunakan Live Server di VS Code.

1. Klik kanan pada file keuangan.html → pilih Open with Live Server.
2. Browser akan otomatis membuka halaman Keuangan.

Yang perlu dicek

1. Pastikan tampilan tabel, form filter, dan tombol aksi rapi, sesuai preview di Shaynaa.
2. Coba input beberapa data atau klik tombol aksi, pastikan interaksi mudah dilakukan dan tombol terlihat jelas.
3. Uji semua link internal:
   • Menu sidebar / navbar mengarah ke halaman yang benar.
   • Tombol navigasi lain di dalam halaman (misal kembali ke Dashboard) berfungsi normal.
4. Cek tampilan di berbagai ukuran layar: desktop, tablet, dan mobile. Pastikan tabel dan form tetap responsif, tidak terpotong, dan mudah diakses.

⚠️ Tips: Kalau ada elemen yang terlihat kurang rapi di layar kecil, catat dan perbaiki di UI Edit Mode Shaynaa atau langsung di VS Code sebelum lanjut ke halaman berikutnya.

Generate Halaman Laporan dengan Shaynaa (Step by Step)

Step 1: Tambahkan halaman Laporan ke project

Halaman Laporan berfungsi sebagai pusat monitoring seluruh aktivitas administrasi, keuangan, dan program di pesantren. Di sini admin bisa melihat ringkasan laporan, mengekspor PDF, atau mencetak data sesuai kebutuhan.

Sebelum membuat halaman baru, pastikan semua halaman sebelumnya sudah tersimpan dengan baik agar workflow tetap rapi.

Langkah-langkah:

1. Buka project yang sudah ada (Dashboard, Data Santri, Pendaftaran, Keuangan).
2. Pastikan semua halaman sebelumnya tersimpan di project yang sama.
3. Tambahkan halaman Laporan ke project yang sama supaya konsistensi tema, warna, dan sidebar tetap terjaga.

⚠️ Tip: Menyimpan semua halaman dalam satu project memudahkan update style global. Misalnya jika ingin ganti font, warna primary, atau ukuran tombol, semua halaman akan otomatis menyesuaikan.

Step 2: Buat prompt untuk halaman Laporan

Sebelum generate halaman di Shaynaa, penting untuk menyiapkan prompt yang jelas dan terstruktur. Hal ini memastikan Shaynaa memahami fungsi utama halaman Laporan dan menampilkan layout yang sesuai kebutuhan admin.

Hal-hal yang harus dijelaskan dalam prompt:

• Menampilkan ringkasan laporan harian, mingguan, dan bulanan, supaya admin bisa langsung memonitor performa administrasi dan keuangan.
• Menyediakan filter fleksibel berdasarkan tanggal, program, dan kelas agar data bisa dicari dengan cepat.
• Menampilkan tabel laporan dengan kolom penting: Nama Santri, Kelas, Program, Tanggal Bayar, Jumlah, Metode Pembayaran, Status.
• Menyediakan tombol aksi pada setiap data: Cetak, ekspor PDF, Edit, Hapus, agar admin bisa langsung mengelola laporan.
• Gunakan desain dan tema yang konsisten dengan halaman sebelumnya (Dashboard, Keuangan, Pendaftaran), tanpa menambahkan style yang tidak perlu.

Contoh prompt yang bisa digunakan di Shaynaa:

Buat halaman Laporan untuk admin pesantren modern. Tampilkan ringkasan laporan harian, mingguan, dan bulanan. Sediakan filter berdasarkan tanggal, program, dan kelas. Tampilkan tabel dengan kolom Nama Santri, Kelas, Program, Tanggal Bayar, Jumlah, Metode, Status. Sertakan tombol Cetak, ekspor PDF, Edit, dan Hapus.

⚠️ Tip: Pastikan prompt jelas dan lengkap, tapi tetap ringkas (antara 40–400 karakter). Semakin spesifik kebutuhan admin dijelaskan, semakin relevan layout yang dihasilkan oleh Shaynaa.

Step 3: Generate halaman

Setelah prompt halaman Laporan siap, sekarang saatnya generate halaman di Shaynaa. Tujuannya adalah membuat layout awal yang bisa langsung direview dan disesuaikan, tanpa harus mulai dari nol.

Langkah-langkahnya:

1. Masukkan prompt ke Shaynaa – gunakan prompt yang sudah kita buat sebelumnya.
2. Periksa panjang prompt – pastikan antara 40–400 karakter supaya Shaynaa bisa memprosesnya dengan optimal.
3. Klik Generate dan pilih Create New File – ini memastikan halaman Laporan berdiri sendiri, tapi tetap berada dalam project yang sama.

⚠️ Tips: Setelah generate, jangan panik kalau hasil pertama belum sempurna. Fokus cek beberapa hal penting:

1. Sidebar / Navbar muncul sesuai urutan dengan halaman lain (Dashboard, Data Santri, Pendaftaran, Keuangan, Laporan, Users, Settings).
2. Tabel laporan menampilkan kolom sesuai prompt dan mudah dibaca.
3. Filter & search dapat digunakan dengan jelas.
4. Tombol aksi seperti Cetak, ekspor PDF, Edit, Hapus terlihat dan bisa diakses.

Hasil generate pertama biasanya merupakan draft awal. Setelah ini, kita lanjut ke Step 4: Review hasil di Shaynaa untuk memastikan layout, responsif, dan semua elemen siap dipakai admin.

Step 4: Review hasil di Shaynaa

Setelah halaman Laporan selesai di-generate, jangan langsung ambil kodenya. Sekarang waktunya review seluruh halaman untuk memastikan layout, tabel, filter, dan tombol aksi tampil sesuai kebutuhan admin.

Beberapa hal penting yang perlu diperiksa:

1. Sidebar / Navbar – pastikan urutan menu konsisten dengan halaman lain: Dashboard → Data Santri → Pendaftaran → Keuangan → Laporan → Users → Settings.
2. Tabel Laporan – cek apakah semua kolom sesuai prompt: Nama Santri, Kelas, Program, Tanggal Bayar, Jumlah, Metode, Status. Pastikan filter berdasarkan tanggal, program, dan kelas bisa digunakan.
3. Tombol aksi – pastikan tombol Cetak, Edit, Hapus, dan ekspor PDF muncul jelas dan mudah diklik.
4. Layout & Spacing – pastikan tabel, filter, dan tombol tersusun rapi, jarak antar elemen konsisten, dan mudah dibaca.
5. Responsif – gunakan preview responsif di Shaynaa. Cek tampilan di mode Desktop, Tablet, dan Mobile. Perhatikan:
   • Sidebar collapse di tablet dan mobile
   • Tabel dan filter tetap terbaca jelas
   • Tombol aksi tetap mudah diakses

⚠️ Tips: Jangan hanya fokus di Desktop. Banyak admin membuka laporan lewat tablet atau HP, jadi pastikan usability nyaman di semua ukuran layar.

Setelah review selesai dan semua elemen terlihat benar, kita bisa lanjut ke Step 5: Cek Layers & Project Files untuk memastikan struktur halaman modular dan siap di-edit.

Step 5: Cek Layers & Project Files

Setelah halaman Laporan selesai direview, sekarang waktunya memastikan struktur halaman rapi dan modular sebelum masuk ke tahap penyempurnaan di UI Edit Mode.

Cek Layers

1. Buka panel Layers di Shaynaa.
2. Pastikan urutan elemen logis: header → sidebar → main content → kartu/tabel → tombol aksi → footer.
3. Periksa setiap komponen, seperti filter, kolom tabel, tombol Cetak / PDF / Edit / Hapus. Pastikan semuanya terpisah dengan rapi, agar mudah diedit dan maintain di kemudian hari.
4. Tujuannya supaya HTML yang nanti diambil ke VS Code bersih, jelas, dan gampang dibaca.

Cek Project Files

• Masuk ke panel Project Files di Shaynaa.
• Pastikan halaman Laporan muncul sebagai file terpisah tapi tetap berada di project yang sama dengan Dashboard, Data Santri, Pendaftaran, dan Keuangan.
• Pastikan halaman lain tidak tertimpa. Anggap panel ini sebagai “peta” halaman untuk menjaga semuanya modular, rapi, dan mudah dicari.

⚠️ Tips: Layers dan file yang terstruktur dengan baik membuat langkah berikutnya di UI Edit Mode lebih cepat dan menyenangkan. Tidak ada lagi drama tombol susah dicari atau field yang tercampur.

Setelah layers dan project files dicek dan rapi, kita bisa lanjut ke Step 6: Rapikan Hasil dengan UI Edit Mode Shaynaa untuk menyempurnakan tampilan dan data.

Step 6: Rapikan Hasil dengan UI Edit Mode Shaynaa

Setelah Layers dan Project Files dicek, sekarang saatnya masuk ke UI Edit Mode untuk menyempurnakan tampilan halaman Laporan. Di tahap ini, kita tidak ngoding dulu, tapi fokus memastikan tabel, filter, dan tombol aksi rapi, jelas, dan siap digunakan admin.

Hal-hal yang perlu diperhatikan

• Isi data realistis: ganti placeholder atau contoh data di tabel dengan informasi nyata, misalnya nama santri, kelas, program, tanggal bayar, jumlah, metode, dan status pembayaran.
• Rapikan tabel dan filter: pastikan kolom, label, dan filter tersusun rapi, spacing konsisten, tombol aksi (Cetak, PDF, Edit, Hapus) mudah ditemukan.
• Cek layout responsif: pastikan halaman nyaman dilihat di Desktop, Tablet, dan Mobile. Sidebar collapsible harus bekerja, tabel dan filter tidak terpotong, tombol mudah diakses.
• Tambahkan informasi alur laporan: misalnya ringkasan data harian, mingguan, bulanan, status pembayaran, atau tooltip yang memudahkan admin memahami isi tabel.

⚠️ Tips: Detail kecil seperti ikon status pembayaran, warna indikator, atau tooltip info tambahan membuat halaman lebih profesional dan memudahkan admin mengikuti alur laporan sehari-hari.

Kalau semua elemen sudah rapi dan siap, kita bisa lanjut ke Step 7: Salin HTML ke VS Code untuk integrasi ke project dan uji di browser.

Step 7: Salin HTML ke VS Code

Setelah halaman Laporan rapi di UI Edit Mode Shaynaa, sekarang masuk ke tahap teknis: menyalin kode HTML ke VS Code. Ini memastikan halaman bisa dijalankan di project lokal dan terhubung dengan navigasi utama.

Salin kode HTML dari Shaynaa ke VS Code

1. Buka file baru atau file yang sudah ada di VS Code, misalnya laporan.html.
2. Di Shaynaa, buka Code View atau tampilan HTML halaman Laporan.
3. Salin seluruh kode HTML (Ctrl+C / Cmd+C), lalu paste (Ctrl+V / Cmd+V) ke file laporan.html.
4. Simpan file (Ctrl+S / Cmd+S).

⚠️ Catatan: Jika file belum ada, buat dulu dengan nama jelas seperti laporan.html. Pastikan file berada di folder project yang sama dengan halaman lain.

Integrasikan ke Sidebar / Navbar

Supaya halaman Laporan bisa diakses dari menu utama:

<li><ahref="laporan.html"class="nav-link">Laporan</a></li>

• Periksa urutan menu agar logis: Dashboard → Data Santri → Pendaftaran → Program → Keuangan → Laporan → …
• Simpan perubahan navbar.

⚠️ Tips: Selalu cek link agar mengarah ke file yang benar, untuk menghindari error “404 Not Found”.

Final Check

• Pastikan struktur HTML rapi, tidak ada tag yang belum ditutup atau elemen duplicate.
• Semua elemen tabel, filter, dan tombol aksi (Cetak, PDF, Edit, Hapus) tampil sesuai preview Shaynaa.
• File laporan.html tersimpan di folder project yang sama dengan halaman lain.

Setelah semua dicek, halaman Laporan siap diuji di browser. Selanjutnya bisa lanjut ke Step 8: Jalankan di browser untuk memastikan tampilan, navigasi, dan responsif bekerja sesuai harapan.

Step 8: Jalankan di browser

Setelah kode HTML halaman Laporan berhasil ditempel dan disimpan di VS Code, sekarang waktunya memastikan semuanya berjalan lancar di browser. Cara paling praktis adalah menggunakan Live Server di VS Code.

1. Klik kanan pada file laporan.html → pilih Open with Live Server.
2. Browser akan otomatis membuka halaman Laporan.

Yang perlu dicek

• Tampilan tabel & filter: pastikan kolom lengkap, data rapi, dan filter bekerja sesuai preview Shaynaa.
• Tombol aksi: tombol Cetak, Edit, Hapus, dan ekspor PDF muncul jelas dan bisa diklik.
• Link internal:
  1. Menu sidebar / navbar mengarah ke halaman yang benar.
  2. Navigasi lain di dalam halaman (misal kembali ke Dashboard) berfungsi normal.
• Responsif: cek tampilan di Desktop, Tablet, dan Mobile. Pastikan tabel, filter, dan tombol tetap rapi, tidak terpotong, dan mudah diakses.

⚠️ Tips: Kalau ada elemen yang kurang rapi di layar kecil, catat dan perbaiki di UI Edit Mode Shaynaa atau langsung di VS Code sebelum lanjut ke halaman berikutnya.

Setelah semua dicek dan berjalan lancar, halaman Laporan sudah siap digunakan, dan workflow generate halaman dari Shaynaa ke browser untuk halaman inti admin selesai.

Yang perlu dicek

1. Tampilan tabel dan filter rapi.
2. Coba klik tombol aksi: Cetak, Edit, Hapus, PDF.
3. Link sidebar dan tombol navigasi lain bekerja.
4. Responsif: Desktop, Tablet, Mobile.

⚠️ Tips: Catat elemen kurang rapi di layar kecil, perbaiki di UI Edit Mode Shaynaa atau VS Code sebelum lanjut ke halaman berikutnya.

Dengan langkah ini, halaman Laporan siap dipakai admin, dan workflow generate halaman dari Shaynaa ke browser selesai.

Generate Halaman Settings dengan Shaynaa (Step by Step)

Step 1: Buat project baru

Halaman Settings ini berfungsi sebagai pusat pengaturan sistem admin pesantren. Di sini admin bisa mengelola profil akun, mengatur keamanan seperti password, mengubah preferensi tampilan, serta menyesuaikan konfigurasi umum sistem seperti notifikasi atau pengaturan dasar lainnya.

Namun untuk membuat halaman ini di Shaynaa, kita tidak perlu benar-benar membuat project baru. Semua halaman admin pesantren sebaiknya tetap berada dalam satu project Shaynaa yang sama, supaya tema, style, dan struktur sidebar tetap konsisten.

Langkahnya:

1. Buka project yang sudah dibuat sebelumnya (Dashboard, Data Santri, Pendaftaran, Keuangan, Laporan).
2. Pastikan semua halaman sebelumnya sudah tersimpan dengan benar.
3. Sekarang kita siap menambahkan halaman Settings ke dalam project yang sama.

⚠️ Tip: Menjaga semua halaman dalam satu project membuat update tema atau style lebih mudah. Misalnya jika ingin mengubah warna primary, font, atau layout sidebar, cukup sekali edit dan semua halaman ikut berubah.

Sekarang kita fokus ke halaman Settings.

Kalau Dashboard berfungsi sebagai ringkasan utama, dan Keuangan berfungsi untuk pengelolaan transaksi, maka halaman Settings berfungsi sebagai pusat kontrol dan konfigurasi sistem admin.

Halaman ini dipakai admin untuk mengatur akun, keamanan, serta preferensi sistem agar operasional pesantren berjalan sesuai kebutuhan.

Berarti prompt yang kita tulis harus jelas konteksnya:

halaman ini digunakan admin untuk mengelola informasi akun, mengubah password, serta mengatur preferensi sistem seperti notifikasi atau pengaturan umum lainnya.

Beberapa elemen yang sebaiknya ada di halaman Settings:

1. Section Informasi Profil Admin (Nama, Email, Role)
2. Form Ubah Password (Password lama, Password baru, Konfirmasi Password)
3. Pengaturan Notifikasi (email / sistem)
4. Pengaturan umum sistem (misalnya nama pesantren atau konfigurasi dasar)
5. Tombol Simpan Perubahan
6. Tombol Reset / Batalkan

Ingat, kita tetap tidak perlu menuliskan warna atau gaya desain karena itu sudah mengikuti tema yang dipilih (misalnya Jakarta).

Contoh prompt:

Buat halaman Settings untuk admin pesantren modern. Tampilkan informasi profil admin, form ubah password dengan password lama dan baru, serta pengaturan notifikasi dan konfigurasi umum sistem. Sertakan tombol Simpan Perubahan dan Reset. Gunakan desain konsisten dengan halaman admin lainnya.

Pastikan panjang prompt tetap di antara 40 hingga 400 karakter.

Yang penting di sini adalah kejelasan struktur dan fungsi halaman. Semakin jelas kita menjelaskan kebutuhan admin, semakin relevan dan terstruktur hasil layout yang dihasilkan oleh Shaynaa.

Step 3: Generate halaman

Setelah prompt halaman Settings siap, sekarang saatnya klik Generate di Shaynaa untuk membuat halaman pengaturan sistem admin. Pastikan kamu sudah memilih tema yang sama dengan project sebelumnya, misalnya Jakarta, supaya tampilannya tetap konsisten dengan Dashboard, Keuangan, dan Laporan.

Langkahnya sederhana:

1. Masukkan prompt yang sudah diringkas dan lengkap (profil admin + form ubah password + pengaturan sistem + tombol aksi) ke Shaynaa.
2. Pastikan panjang prompt antara 40–400 karakter.
3. Klik Generate dan pilih Create New File. Hal ini memastikan setiap halaman berdiri sendiri, tapi tetap berada di dalam project yang sama.

⚠️ Tips: Jangan panik kalau hasil pertama belum sempurna. Fokus cek apakah sidebar muncul sesuai urutan, section profil admin terlihat jelas, form ubah password lengkap, dan tombol Simpan / Reset tersedia. Hasil generate pertama biasanya hanya draft awal yang perlu review dan penyesuaian.

Setelah generate selesai, kita bisa lanjut ke Step 4: Review hasil di Shaynaa, untuk memastikan layout, responsif, dan struktur form pengaturan sudah sesuai.

Step 4: Review hasil di Shaynaa

Setelah halaman Settings selesai di-generate, jangan langsung ambil kodenya. Sekarang waktunya review seluruh halaman untuk memastikan struktur form, pengaturan, dan tombol aksi tampil sesuai kebutuhan admin.

Beberapa hal penting yang perlu diperiksa:

1. Sidebar / Navbar – pastikan urutan menu konsisten dengan halaman lain: Dashboard → Data Santri → Pendaftaran → Keuangan → Laporan → Users → Settings.
2. Informasi Profil Admin – cek apakah Nama, Email, dan Role tampil jelas. Pastikan field tersusun rapi dan mudah dipahami.
3. Form Ubah Password – pastikan tersedia Password Lama, Password Baru, dan Konfirmasi Password. Tombol Simpan harus terlihat jelas.
4. Pengaturan Sistem / Notifikasi – pastikan opsi seperti notifikasi email atau pengaturan umum sistem tersedia sesuai prompt.
5. Tombol aksi – pastikan tombol Simpan Perubahan dan Reset/Batalkan muncul jelas dan mudah diklik.
6. Layout & Spacing – pastikan setiap section (Profil, Password, Pengaturan) terpisah dengan rapi, jarak antar elemen konsisten, dan tampilan tidak terlalu padat.
7. Responsif – gunakan preview responsif di Shaynaa. Cek tampilan di mode Desktop, Tablet, dan Mobile. Perhatikan:

⚠️ Tips: Jangan hanya fokus di Desktop. Halaman Settings sering diakses lewat HP untuk update cepat seperti ganti password, jadi pastikan usability nyaman di semua ukuran layar.

Setelah review selesai dan semua elemen terlihat benar, kita bisa lanjut ke Step 5: Cek Layers & Project Files untuk memastikan struktur halaman modular dan siap di-edit.

Step 5: Cek Layers & Project Files

Setelah halaman Settings lolos tahap review tampilan, sekarang saatnya memastikan struktur internalnya tertata dengan baik sebelum lanjut ke tahap penyempurnaan.

Tahap ini penting supaya halaman mudah diedit, dikembangkan, dan di-maintain ke depannya.

Periksa Panel Layers

• Buka panel Layers di Shaynaa.
• Pastikan susunan elemen berurutan dan masuk akal: Header → Sidebar → Main Content → Section Profil → Form Password → Pengaturan Sistem → Tombol Aksi → Footer
• Cek apakah setiap bagian (input field, label, toggle, tombol) berada dalam container yang terpisah dan tidak bercampur.
• Hindari struktur yang terlalu dalam atau elemen yang “menumpuk” dalam satu layer tanpa kejelasan.

Tujuannya agar struktur HTML nanti tetap bersih, modular, dan gampang dipahami saat dipindahkan ke VS Code.

Periksa Project Files

• Masuk ke panel Project Files.
• Pastikan halaman Settings tersimpan sebagai file terpisah.
• Pastikan tetap berada dalam project admin yang sama (bersama Dashboard, Data Santri, Pendaftaran, Keuangan, dan Laporan).
• Periksa juga apakah tidak ada file lain yang tertimpa atau ter-rename tanpa sengaja.

Anggap bagian ini sebagai kontrol struktur proyek supaya semua halaman tetap terorganisir dan mudah dilacak.

⚠️ Tips: Struktur yang rapi dari awal akan menghemat waktu saat revisi. Semakin modular Layers dan file-nya, semakin mudah proses pengembangan berikutnya.

Kalau semua sudah aman dan tertata, kita bisa lanjut ke Step 6: Rapikan Tampilan di UI Edit Mode Shaynaa untuk menyempurnakan detail layout dan komponen.

Step 6: Rapikan Hasil dengan UI Edit Mode Shaynaa

Setelah Layers dan Project Files dicek, sekarang waktunya masuk ke UI Edit Mode untuk menyempurnakan tampilan halaman Settings.

Di tahap ini, kita belum masuk ke coding. Fokusnya adalah memastikan semua form, pengaturan, dan tombol aksi rapi, jelas, dan nyaman digunakan admin.

Hal-hal yang perlu diperhatikan :

1. Isi data realistis Ganti placeholder seperti “Admin Name” atau “[email protected]” dengan data yang lebih masuk akal agar tampilan terlihat profesional.
2. Rapikan form dan label Pastikan label sejajar, jarak antar input konsisten, dan setiap section (Profil, Ubah Password, Pengaturan Sistem) terpisah dengan jelas.
3. Perjelas tombol aksi Tombol seperti Simpan Perubahan dan Reset harus terlihat menonjol, tidak terlalu kecil, dan tidak terlalu mepet satu sama lain.
4. Cek layout responsif Pastikan halaman tetap nyaman di Desktop, Tablet, dan Mobile. Perhatikan:
   • Sidebar bisa collapse dengan baik
   • Input tidak terpotong
   • Tombol tetap mudah ditekan di layar kecil
5. Tambahkan kejelasan alur pengaturan Misalnya beri keterangan kecil di bawah field password (contoh: minimal 8 karakter), atau deskripsi singkat di bagian pengaturan notifikasi agar admin tahu fungsinya.

⚠️ Tips: Detail kecil seperti keterangan tambahan di bawah input, indikator validasi password, atau pemisahan section dengan card akan membuat halaman terlihat lebih profesional dan mudah dipahami.

Kalau semua sudah rapi dan siap, kita bisa lanjut ke Step 7: Salin HTML ke VS Code untuk integrasi dan pengujian di browser.

Step 7: Salin HTML ke VS Code

Setelah halaman Settings rapi di UI Edit Mode Shaynaa, sekarang kita masuk ke tahap teknis yaitu menyalin kode HTML ke VS Code. Tujuannya supaya halaman ini bisa dijalankan di project lokal dan terhubung dengan navigasi utama seperti halaman lainnya.

Pertama, buka VS Code lalu buat file baru dengan nama settings.html, atau gunakan file yang memang sudah disiapkan sebelumnya. Setelah itu, kembali ke Shaynaa dan buka Code View untuk halaman Settings. Salin seluruh kode HTML yang ditampilkan, lalu paste ke dalam file settings.html di VS Code. Jangan lupa simpan file agar perubahan tersimpan dengan baik.

⚠️ Catatan: Pastikan file settings.html berada di folder project yang sama dengan Dashboard, Keuangan, Laporan, dan halaman lainnya agar struktur project tetap rapi dan konsisten.

Setelah kodenya masuk, langkah berikutnya adalah menghubungkan halaman ini ke sidebar atau navbar. Tambahkan link menuju settings.html di bagian menu navigasi agar halaman bisa diakses dari dalam sistem admin. Pastikan urutan menu tetap logis dan konsisten dengan struktur sebelumnya.

Sebelum lanjut, lakukan pengecekan akhir. Perhatikan apakah ada tag HTML yang belum tertutup, apakah struktur tetap bersih, dan apakah tampilan masih sesuai dengan preview di Shaynaa. Pastikan juga file sudah tersimpan dengan benar di dalam folder project.

Kalau semuanya sudah aman, halaman Settings siap diuji di browser untuk memastikan navigasi dan tampilannya berjalan dengan baik.

Step 8: Jalankan di browser

Setelah kode HTML halaman Settings berhasil ditempel dan disimpan di VS Code, sekarang waktunya memastikan semuanya benar-benar berjalan dengan baik di browser. Cara paling praktis adalah menggunakan Live Server di VS Code agar perubahan bisa langsung terlihat secara real-time.

Caranya sederhana: klik kanan pada file settings.html, lalu pilih Open with Live Server. Browser akan otomatis membuka halaman Settings sesuai struktur project yang sudah kita buat.

Begitu halaman terbuka, jangan langsung puas. Lakukan pengecekan menyeluruh karena ini adalah halaman pengaturan sistem yang cukup krusial.

Pertama, periksa tampilan keseluruhan. Pastikan section Profil Admin, Form Ubah Password, dan Pengaturan Sistem tampil rapi seperti di preview Shaynaa. Perhatikan jarak antar elemen, ukuran input, dan posisi tombol Simpan atau Reset.

Kemudian uji interaksi dasar. Coba isi beberapa field input untuk memastikan tidak ada layout yang bergeser atau terpotong. Pastikan tombol terlihat jelas dan tidak tertimpa elemen lain. Jika ada toggle notifikasi atau checkbox, pastikan tampilannya konsisten.

Selanjutnya cek navigasi. Klik menu sidebar dan pastikan:

• Link menuju Dashboard, Keuangan, Laporan, dan halaman lainnya mengarah ke file yang benar.
• Menu Settings dalam keadaan aktif (highlight) saat dibuka.
• Tidak ada error seperti “404 Not Found”.

Jangan lupa cek responsif. Ubah ukuran browser atau gunakan inspect mode untuk melihat tampilan di Desktop, Tablet, dan Mobile. Pastikan:

• Sidebar bisa collapse dengan baik.
• Form tetap nyaman diisi di layar kecil.
• Tombol tetap mudah ditekan dan tidak terlalu mepet.

⚠️ Tips: Kalau ada elemen yang terlihat kurang rapi di layar kecil atau posisi tombol kurang pas, segera catat dan perbaiki di UI Edit Mode Shaynaa atau langsung di VS Code sebelum project dianggap final.

Karena halaman Settings adalah halaman terakhir yang kita generate, jika semua sudah berjalan normal—layout rapi, navigasi lancar, responsif aman—maka seluruh workflow dari generate di Shaynaa → review → edit → export HTML → uji di browser sudah selesai dengan baik.

Artinya, struktur dasar sistem admin pesantren kamu sudah lengkap dan siap dikembangkan ke tahap berikutnya, seperti integrasi backend atau penambahan fitur lanjutan.

Dari Template HTML ke Website Pesantren Modern

Setelah semua halaman dashboard dan halaman tambahan selesai di-generate, di-review, dirapikan, dan diuji di browser, sekarang kita masuk ke tahap finalisasi template HTML sebelum dikembangkan lebih lanjut.

Di tahap ini, yang kita pastikan bukan lagi sekadar tampilan rapi, tetapi kestabilan struktur secara menyeluruh. Layout antar halaman sudah konsisten, komponen seperti header dan sidebar seragam, serta pola tabel dan card tidak berubah-ubah. Navigasi sudah saling terhubung dengan benar, tidak ada link yang error, dan seluruh halaman bisa diakses tanpa kendala.

Struktur file juga sudah modular. Setiap halaman berdiri sebagai file terpisah namun tetap berada dalam satu project yang rapi. Ini penting karena memudahkan proses maintenance, pengembangan fitur baru, atau bahkan konversi ke teknologi yang lebih modern. Dengan fondasi seperti ini, template sudah layak disebut sebagai kerangka sistem, bukan sekadar kumpulan halaman HTML.

Langkah berikutnya bisa diarahkan ke pengembangan yang lebih teknis. Template HTML ini dapat dikonversi ke framework modern seperti React atau Next.js agar lebih scalable dan berbasis komponen. Alternatif lainnya adalah mulai mengintegrasikan backend dan database, sehingga data tidak lagi statis. Daftar santri bisa tersimpan di database, form pendaftaran benar-benar memproses input pengguna, halaman keuangan menarik data transaksi aktual, dan dashboard menampilkan statistik real-time berdasarkan data yang ada.

Di sinilah template berubah menjadi Sistem Informasi Pesantren Modern yang dinamis dan siap digunakan secara nyata.

Sebelum masuk ke tahap lanjutan tersebut, ada beberapa hal penting yang perlu dipastikan. Setiap halaman harus benar-benar diuji di browser dan tetap responsif di berbagai ukuran layar. Navigasi antar halaman harus mengarah ke file yang benar tanpa error. Struktur file dan komponen harus tetap modular agar mudah dikembangkan. Selain itu, data dummy atau placeholder sebaiknya sudah diganti atau setidaknya siap diganti dengan data asli.

Finishing memang tidak se-exciting proses generate halaman satu per satu. Namun justru di tahap ini terlihat kualitas proyek secara keseluruhan. Website yang terstruktur, stabil, dan konsisten akan jauh lebih mudah dikembangkan dibandingkan template yang hanya fokus pada tampilan.

Hasil template HTML ini bukan hanya demo UI. Ini adalah fondasi yang siap dipakai, mudah dipahami oleh developer lain, dan cukup fleksibel untuk dikembangkan menjadi sistem yang lebih besar dan profesional.

Catatan: sebelum melanjutkan ke integrasi backend atau konversi framework, pastikan semua halaman sudah dites, responsif, dan seluruh navigasi bekerja dengan sempurna.

Next Step: Dari Template HTML ke Next.js dengan Shayna AI

Kalau proses dari generate HTML → review → rapikan → uji di browser tadi sudah kamu kuasai, aku juga punya rekomendasi kelas gratis yang bisa bantu kamu naik level lagi dalam membangun dashboard yang lebih profesional dengan teknologi modern.

Kamu bisa cek kelas Vibe Coding Next.js: Dashboard Rumah Sakit dengan Shayna AI di BuildWithAngga. Kelas ini ngajarin kamu gimana membangun real project — bukan cuma template statis — menggunakan Next.js 16 bersama Shayna AI, jadi kamu belajar praktik coding modern sekaligus belajar cara mengintegrasikan desain AI ke dalam framework nyata yang siap produksi.

Kelasnya mencakup pembuatan dashboard rumah sakit yang lengkap seperti:

1. Halaman beranda dashboard
2. Manajemen pasien dan admin billing
3. Navigasi real project dengan App Router Next.js
4. Teknik vibe coding supaya AI membantu kamu menulis UI lebih cepat

Dan yang paling keren: kelas ini gratis! Kamu bisa langsung belajar dan praktek tanpa biaya.

👉 Kunjungi link kelasnya:
https://buildwithangga.com/kelas/vibe-coding-nextjs-dashboard-rumah-sakit-dengan-shayna-ai

Kalau kamu ingin lanjut ke tahap yang lebih teknis seperti konversi ke Next.js atau integrasi real backend, kelas ini bisa jadi next step yang pas banget setelah kamu nguasai dasar pembuatan template HTML.