PPDB Online - MA Muhammadiyah 1 Karangasem Paciran 2025/2026

Akademi

Program Unggulan Kami

Pilih program yang sesuai dengan minat dan bakat putra-putri Anda untuk masa depan yang cerah

ITCP

IT Class Program

Web Development
Mobile Programming
Database Management
Networking Basics

MICO

International Language

English (Cambridge)
Arabic Language
Japanese / Korean
Cultural Exchange

Agama

Program Agama Islam

Tahfidz Al-Qur'an
Kitab Kuning
Praktik Ibadah
Akhlakul Karimah

MIPA

Reguler Sains

Matematika Terpadu
IPA Terpadu
Lab Modern
Olimpiade Sains

ATCP

Arabic & Tahfidz Class

Hifdzul Qur'an 3 Juz
Bahasa Arab Aktif
Hadits & Tarikh
Balaghah & Nahwu

Pencapaian

Prestasi & Keunggulan

Bukti komitmen kami dalam memberikan pendidikan berkualitas tinggi

Prestasi Akademik

Indikator	Pencapaian
Kelulusan SPAN-PTKIN	6 siswa 100%
Kelulusan SNBP 2026	20 dari 150 (13.3%)
Akreditasi	A (Unggul)
Rata-rata Nilai UN	Di atas Nasional

Fasilitas Modern

Gedung Ber-AC

3 Lantai Modern

Lab Komputer

40 Unit Terbaru

Perpustakaan

Digital & Fisik

Masjid Sekolah

Nyaman & Bersih

Lapangan Olahraga

Multi-fungsi

Lingkungan Asri

Hijau & Nyaman

Pendaftaran

Formulir Pendaftaran Online

Isi data lengkap di bawah ini untuk mendaftar sebagai calon peserta didik baru

Form Pendaftaran Siswa Baru

1 Data Pribadi

Nama Lengkap *

NISN *

Tempat, Tanggal Lahir *

Jenis Kelamin *

No. HP / WhatsApp *

Alamat Lengkap *

Email *

2 Data Akademik

Asal Sekolah *

Nilai Rata-rata Rapor *

Pilihan Program *

3 Upload Dokumen (PDF/JPG, Max 2MB)

📷 Foto 3x4 *

📄 Kartu Keluarga *

📋 Akta Kelahiran *

📊 Rapor Semester 1-5 *

Data Anda aman dan terenkripsi

Nomor Otomatis

Sistem akan generate nomor pendaftaran unik secara otomatis setelah submit.

PPDB-2025-XXXXX

Validasi Real-time

Form dilengkapi validasi client-side untuk memastikan data lengkap dan benar.

Notifikasi SweetAlert

Notifikasi sukses/gagal yang menarik menggunakan SweetAlert2.

Preview Dokumen

Preview dokumen sebelum upload untuk memastikan file benar.

Administrasi

Dashboard Admin Panel

Panel administrasi lengkap dengan fitur manajemen pendaftar yang powerful

Login Admin

Demo credentials untuk testing

Username

Password

JWT Protected 24h Session

Real-time

Statistik Dashboard

Total pendaftar
Distribution per program
Status breakdown
Daily registration chart

Manajemen Data

Sortable columns
Search & filter
Pagination
By program/status/date

Quick Actions

✅ Terima ❌ Tolak 👁️ Detail 🖨️ Cetak PDF

Export Data

Excel (.xlsx)
CSV format
PDF report
Print friendly

Security

Bcrypt hashing
JWT tokens
CORS protection
Rate limiting

Detail Modal

Complete student info
Document preview
Status history
Notes field

Preview Tabel Pendaftar

No. Daftar	Nama	Asal Sekolah	Program	Nilai	Status
PPDB-2025-00001	Ahmad Fauzi	SMPN 1 Lamongan	ITCP	89.5	Menunggu
PPDB-2025-00002	Siti Aisyah	MTsN 2 Gresik	MICO	92.0	Diterima
PPDB-2025-00003	Muhammad Rizki	SMP Muhammadiyah 5	ATCP	87.3	Ditolak

Menampilkan 1-3 dari 150 data

...

Teknologi

Tech Stack & Arsitektur

Dibangun dengan teknologi modern dan best practices industri

Frontend

React.js Ecosystem

React.js 18+ (Vite Build Tool)
├── Tailwind CSS (Utility-first CSS)
├── React Router DOM (Client Routing)
├── Axios (HTTP Client)
├── SweetAlert2 (Notifications)
├── React Hook Form (Form Handling)
└── React Icons (Icon Library)

React Tailwind CSS Vite React Router Axios SweetAlert2

Backend

Node.js + Express

Node.js + Express.js Framework
├── MongoDB (NoSQL Database)
├── Mongoose (ODM Library)
├── JSON Web Token (Authentication)
├── Bcryptjs (Password Hashing)
├── Multer (File Upload Handler)
└── ExcelJS / PDFKit (Export Engine)

Node.js Express MongoDB JWT Multer Bcrypt

Database Schema (MongoDB)

Collection: students

{
  nama: String,
  nisn: { type: String, unique: true },
  ttl: String,
  jenisKelamin: String,
  alamat: String,
  noHp: String,
  email: String,
  asalSekolah: String,
  nilai: Number,
  program: String,
  foto: String,      // URL/path
  kk: String,
  akta: String,
  raport: String,
  status: {
    type: String,
    default: "Menunggu",
    enum: ["Menunggu","Diterima","Ditolak"]
  },
  nomorPendaftaran: {
    type: String,
    unique: true
  },
  createdAt: {
    type: Date,
    default: Date.now
  }
}

Collection: admins

{
  username: {
    type: String,
    unique: true,
    required: true
  },
  password: {
    type: String,
    required: true
    // Stored as bcrypt hash
  },
  createdAt: {
    type: Date,
    default: Date.now
  }
}

// Default Admin Seed:
// Username: admin
// Password: admin123

Instalasi

Quick Start Guide

Ikuti langkah-langkah berikut untuk menjalankan sistem PPDB di lokal Anda

1

Clone Repository

git clone https://github.com/yourusername/ppdb-muh1karangasem.git
cd ppdb-muh1karangasem

2

Install Dependencies

# Backend Dependencies
cd server
npm install

# Frontend Dependencies
cd ../client
npm install

3

Environment Setup

Create .env file in server/:

PORT=5000
MONGODB_URI=mongodb://localhost:27017/ppdb_muh1karangasem
JWT_SECRET=your_super_secret_key_here_min_32_chars
JWT_EXPIRE=24h
UPLOAD_PATH=./uploads

4

Seed Default Admin

cd server
node seedAdmin.js

# Output:
# ✓ Admin created successfully!
# Username: admin
# Password: admin123

5

Run Application

# Terminal 1 - Backend Server
cd server
npm run dev
# → http://localhost:5000

# Terminal 2 - Frontend App
cd client
npm run dev
# → http://localhost:5173

Folder Structure

ppdb-muh1karangasem/
├── 📁 client/              # React Frontend
│   ├── public/
│   └── src/
│       ├── components/     # Reusable UI Components
│       │   ├── Navbar.jsx
│       │   ├── Hero.jsx
│       │   ├── FormPendaftaran.jsx
│       │   └── ...
│       ├── pages/          # Route Pages
│       │   ├── HomePage.jsx
│       │   ├── PendaftaranPage.jsx
│       │   ├── AdminLoginPage.jsx
│       │   └── AdminDashboard.jsx
│       ├── context/         # React Context
│       │   └── AuthContext.jsx
│       ├── utils/           # Helper Functions
│       ├── App.jsx          # Main App Component
│       └── main.jsx         # Entry Point
│
├── 📁 server/              # Express Backend
│   ├── config/
│   │   └── db.js           # MongoDB Connection
│   ├── controllers/
│   │   ├── authController.js
│   │   └── studentController.js
│   ├── middleware/
│   │   ├── auth.js         # JWT Middleware
│   │   └── upload.js       # Multer Config
│   ├── models/
│   │   ├── Student.js      # Mongoose Model
│   │   └── Admin.js
│   ├── routes/
│   │   ├── authRoutes.js
│   │   └── studentRoutes.js
│   ├── uploads/            # File Storage
│   ├── seedAdmin.js        # Admin Seeder
│   ├── index.js            # Server Entry
│   └── package.json
│
└── README.md               # Documentation

Access Points

🌐 Public Page localhost:5173

👨‍💼 Admin Login localhost:5173/admin

🔌 API Base URL localhost:5000/api

📄 API Docs localhost:5000/api/docs

Prerequisites

Node.js v18+

MongoDB

Git

VS Code

API

REST API Documentation

Dokumentasi lengkap endpoint API untuk integrasi dan development

Authentication Endpoints

Method	Endpoint	Description	Auth
POST	/api/auth/login	Admin login, returns JWT token	Public
GET	/api/auth/me	Get current admin profile	Required

Student CRUD Endpoints

Method	Endpoint	Description	Auth
POST	/api/students	Create new registration	Public
GET	/api/students	Get all students (paginated, filterable)	Required
GET	/api/students/:id	Get student detail by ID	Required
PUT	/api/students/:id/status	Update status (Terima/Tolak)	Required
DELETE	/api/students/:id	Delete student record	Required

Statistics & Export Endpoints

Method	Endpoint	Description	Auth
GET	/api/stats/overview	Dashboard statistics overview	Required
GET	/api/stats/by-program	Students per program chart data	Required
GET	/api/export/excel	Download Excel report	Required
GET	/api/export/pdf/:id	Generate PDF registration proof	Required

File Upload Endpoints

Method	Endpoint	Description	Auth
POST	/api/upload	Upload documents (multer, max 2MB)	Public
GET	/uploads/:filename	Serve uploaded static files	Public

Example cURL Request

# Admin Login Example
curl -X POST http://localhost:5000/api/auth/login \
  -H "Content-Type: application/json" \
  -d '{"username":"admin","password":"admin123"}'

# Success Response (Status 200):
{
  "success": true,
  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
  "user": {
    "_id": "64abc123def456",
    "username": "admin",
    "role": "admin"
  }
}

# Error Response (Status 401):
{
  "success": false,
  "message": "Invalid username or password"
}

Fitur Lengkap

Complete Feature Checklist

Semua fitur yang telah diimplementasikan dalam sistem PPDB ini

Core Features ✅

Modern landing page dengan Tailwind CSS
Complete registration form dengan validasi
Multiple file upload (foto, KK, akta, raport)
Auto-generate registration number
JWT admin authentication
Real-time dashboard statistics
Data table dengan search/filter/sort/pagination
Accept/reject status update
Detail modal dengan document preview
Excel/CSV export functionality
PDF registration proof generation
Fully responsive design

UI/UX Enhancements 🎨

Loading animations (skeleton & spinner)
SweetAlert2 notifications
Smooth scroll animations
Hover effects & transitions
Card-based modern layout
Islamic green color scheme (#059669)
Google Fonts (Inter & Poppins)
Custom scrollbar styling
Gradient backgrounds

Security 🔒

JWT token authentication
Password bcrypt hashing
CORS configuration
Input validation & sanitization
File size limit (2MB per file)
Protected admin routes
Environment variables (.env)

Performance ⚡

Vite fast build tool
Lazy loading components
Image optimization
MongoDB indexing
Optimized API responses

Developer Experience 🛠️

Clean folder structure
ES6+ syntax throughout
Commented code
Error handling
Seed script for default admin
Comprehensive README
Git-ready repository

Bonus Features 🎁

Email notification system (optional)
WhatsApp integration ready
Dark mode support (ready)
i18n support structure
API rate limiting
Request logging

PPDB ONLINE MA Muhammadiyah 1 Karangasem Paciran

150+

100%

5

A