PROMPT FULL SYSTEM
APLIKASI CAREER CENTER (ALUMNI DOUBLE TRACK)
π― TUJUAN APLIKASI
Buatkan aplikasi Career Center berbasis web untuk mengelola alumni SMK Double Track yang memiliki fitur:
- Pendataan alumni
- Informasi lowongan kerja
- Job matching
- Dashboard statistik
- Pengelolaan data oleh admin
π» TEKNOLOGI YANG DIGUNAKAN
Frontend:
- HTML5
- Tailwind CSS
- JavaScript (Vanilla)
Backend:
- Google Apps Script (Web App API)
- Google Spreadsheet (Database)
𧩠STRUKTUR FITUR APLIKASI
1. π€ HALAMAN LANDING
Buat landing page modern dengan:
- Hero section (judul + CTA)
- Informasi program Double Track
- Statistik alumni (dinamis dari spreadsheet)
-
Tombol:
- Daftar Alumni
- Lihat Lowongan
- Login Admin
2. π FORM INPUT ALUMNI
Field:
- Nama lengkap
- Tahun lulus
- Jurusan
- No HP
-
Status:
- Bekerja
- Wirausaha
- Kuliah
- Belum bekerja
- Skill
- Upload CV (opsional, link drive)
Fungsi:
- Simpan ke Google Spreadsheet
- Timestamp otomatis
3. πΌ HALAMAN LOWONGAN KERJA
Fitur:
- List lowongan dari spreadsheet
-
Filter:
- Lokasi
- Bidang kerja
-
Detail pekerjaan:
- Nama perusahaan
- Deskripsi
- Syarat
- Link apply
4. π― JOB MATCHING SYSTEM
Logika:
- Cocokkan skill alumni dengan lowongan
- Tampilkan rekomendasi pekerjaan
5. π DASHBOARD ADMIN
Fitur:
-
Statistik alumni:
- Total alumni
- Bekerja (%)
- Wirausaha (%)
- Grafik sederhana (JS chart)
- Data tabel alumni
- CRUD data lowongan
6. π LOGIN ADMIN
- Username & password sederhana (hardcoded / spreadsheet)
- Session login
π️ STRUKTUR GOOGLE SPREADSHEET
Sheet 1: Alumni
Kolom:
ID | Nama | Tahun | Jurusan | HP | Email | Status | Skill | CV | Timestamp
Sheet 2: Lowongan
ID | Perusahaan | Posisi | Lokasi | Skill | Deskripsi | Link | Timestamp
Sheet 3: Admin
Username | Password
⚙️ BACKEND (GOOGLE APPS SCRIPT)
Endpoint yang harus dibuat:
1. Tambah Alumni
POST /exec?action=addAlumni
2. Ambil Data Alumni
GET /exec?action=getAlumni
3. Ambil Lowongan
GET /exec?action=getJobs
4. Tambah Lowongan
POST /exec?action=addJob
5. Login Admin
POST /exec?action=login
π§ LOGIKA APPS SCRIPT
Tuliskan kode:
- doGet(e) → routing API
- doPost(e) → handle POST
-
Fungsi:
- addAlumni()
- getAlumni()
- getJobs()
- addJob()
- login()
Gunakan:
SpreadsheetApp.openById("SPREADSHEET_ID")
Return JSON:
ContentService.createTextOutput(JSON.stringify(data))
.setMimeType(ContentService.MimeType.JSON)
π¨ FRONTEND (DETAIL PERINTAH)
π― DESIGN:
- Gunakan Tailwind
- Modern UI (dashboard style)
- Responsive (mobile friendly)
πΉ HALAMAN YANG HARUS DIBUAT:
1. index.html
- Landing page
- Statistik dari API
2. alumni.html
- Form input alumni
- Submit ke Apps Script API
3. jobs.html
- Fetch API lowongan
- Render card job
4. admin.html
- Login
- Dashboard
- CRUD lowongan
π INTEGRASI API (WAJIB ADA)
Gunakan fetch:
fetch(API_URL + "?action=getJobs")
.then(res => res.json())
.then(data => console.log(data));
POST:
fetch(API_URL, {
method: "POST",
body: JSON.stringify({
action: "addAlumni",
nama: "Fajar",
tahun: "2025"
})
});
π― FITUR TAMBAHAN (WAJIB ADA)
- Loading indicator
- Alert sukses/gagal
- Validasi form
- Search data alumni
- Filter lowongan
π BONUS FITUR (JIKA BISA)
- Export data ke PDF
- Integrasi WhatsApp
- Upload CV ke Google Drive
- Dark mode
π¦ OUTPUT YANG DIMINTA DARI AI
- Kode lengkap HTML (semua halaman)
- Kode lengkap Apps Script
- Struktur folder
-
Cara deploy:
- Deploy Apps Script sebagai Web App
- Set akses: Anyone
- Cara menghubungkan frontend ke backend
π₯ PROMPT SUPER FINAL (TINGGAL COPY)
Buatkan aplikasi Career Center Alumni Double Track menggunakan HTML, Tailwind CSS, dan JavaScript untuk frontend, serta Google Apps Script sebagai backend dengan Google Spreadsheet sebagai database.
Fitur:
- Landing page modern
- Form input alumni (simpan ke spreadsheet)
- Halaman lowongan kerja (ambil dari spreadsheet)
- Dashboard admin (CRUD lowongan + statistik)
- Login admin sederhana
- Job matching berdasarkan skill
Backend:
- Apps Script dengan endpoint:
- addAlumni
- getAlumni
- getJobs
- addJob
- login
- Return JSON
Frontend:
- Responsive Tailwind UI
- Fetch API integration
- Validasi form
- Loading & alert
Berikan:
- Kode lengkap semua file HTML
- Kode Apps Script lengkap
- Struktur folder
- Cara deploy Apps Script Web App
- Cara menghubungkan frontend dengan backend
π‘ CATATAN PENTING (STRATEGIS)
Prompt ini sudah level:
π Bisa langsung jadi project mahasiswa
π Bisa jadi produk real sekolah
π Bisa dikembangkan jadi startup (Pervekt versi mini)
.png)
