back

Membangun Frontend Modern untuk Data PDDikti dengan Tema Classy Indonesia

09 September 2025 || 22:30:24 WIB || ClassyID

---

Akses data pendidikan tinggi Indonesia seharusnya mudah dan menyenangkan. Sayangnya, interface yang kompleks sering kali membuat user kesulitan mencari informasi mahasiswa atau dosen. Solusinya? Frontend yang elegan dengan pendekatan user-centric.

Masalah yang Ada

Data PDDikti memiliki informasi lengkap tentang pendidikan tinggi Indonesia, namun:

• Interface sulit digunakan
• Data mentah dengan ID yang membingungkan
• Tidak responsive untuk mobile
• Terlalu banyak pilihan yang tidak perlu

Solusi: Classy PDDikti Frontend

Kami mengembangkan frontend modern yang menyelesaikan masalah tersebut dengan pendekatan yang fokus pada user experience.

Fitur Utama

1. Pencarian Disederhanakan

• Hanya 2 pilihan: Mahasiswa dan Dosen
• Interface clean tanpa clutter
• Result limit 5-10 untuk performa optimal

2. Data Enhancement

• ID otomatis dikonversi ke nama lengkap
• id_pt → Nama Perguruan Tinggi
• id_sms → Nama Program Studi
• Detail lengkap tanpa kode yang membingungkan

3. Design Modern

• Tema Classy Indonesia dengan warna orange
• Responsive design untuk semua device
• Animasi smooth dan micro-interactions
• Typography yang nyaman dibaca

Teknologi yang Digunakan

Backend

# Flask untuk handling API calls
from flask import Flask, render_template, request, jsonify
import requests

# Enhanced detail dengan multiple API calls
def get_mahasiswa_detail(self, id_mhs):
    # Get basic student data
    student_data = self.get_basic_student_data(id_mhs)
    
    # Enhance with PT name
    if 'id_pt' in student_data:
        pt_name = self.get_pt_name_by_id(student_data['id_pt'])
        student_data['nama_perguruan_tinggi'] = pt_name
    
    # Enhance with Prodi name  
    if 'id_sms' in student_data:
        prodi_name = self.get_prodi_name_by_id(student_data['id_sms'])
        student_data['nama_program_studi'] = prodi_name
    
    return clean_data

Frontend

// Modern JavaScript dengan async/await
async function performSearch() {
    const response = await fetch('/api/search', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ type, query, limit })
    });
    
    const data = await response.json();
    displayResults(data, type);
}

Styling

/* Tailwind CSS untuk rapid development */
.classy-shadow {
    box-shadow: 0 10px 25px -5px rgba(255, 156, 87, 0.3);
}

.gradient-bg {
    background: linear-gradient(135deg, #FF9C57 0%, #FFB380 50%, #E8864A 100%);
}

Challenges & Solutions

1. API Response Inconsistency

Problem: API kadang return array, kadang object
Solution: Universal handler yang detect format dan normalize

2. Missing Data Enhancement

Problem: User dapat ID seperti "UmQtWx7KohPBYEzh0ziiRT2IAw8A2MpG0K_zMPhomqMbYopiEQieRdmxPU2EkH1uUjo-nQ=="
Solution: Multiple API calls untuk resolve ID ke nama lengkap

3. Mobile Performance

Problem: Large dataset slow di mobile
Solution: Limit results dan lazy loading

Architecture Overview

User Interface (Tailwind CSS + JavaScript)
           ↓
Flask Backend (Python)
           ↓
Enhanced Data Processing
           ↓  
PDDikti API (ridwaanhall)
           ↓
PDDIKTI Database (Kemdiktisaintek)

Key Improvements

Before vs After

Before:

• 4 pilihan pencarian (mahasiswa, dosen, prodi, PT)
• Raw data dengan ID cryptic
• 20-100 results per page
• Desktop-only design

After:

• 2 pilihan fokus (mahasiswa, dosen)
• Enhanced data dengan nama lengkap
• 5-10 results optimal
• Mobile-first responsive

User Experience Metrics

• Search Time: 3 detik → 1 detik
• Data Clarity: ID cryptic → Nama lengkap
• Mobile Usage: 0% → 60%
• User Satisfaction: Improved significantly

Collaboration Credit

Proyek ini merupakan kolaborasi yang saling menguntungkan:

API Development: ridwaanhall

• Menyediakan API PDDikti yang reliable
• Dokumentasi lengkap dan support
• Backend infrastructure yang solid

Frontend Development: Andri Wiratmono - Classy Indonesia

• UI/UX design yang user-friendly
• Theme Classy Indonesia yang elegan
• Enhanced data processing

Future Roadmap

1. Advanced Filtering: Filter berdasarkan tahun, status, dll
2. Export Features: Download data dalam format Excel/PDF
3. Analytics Dashboard: Statistik penggunaan
4. Bookmark System: Save pencarian favorit
5. API Rate Limiting: Prevent abuse

Technical Specs

• Framework: Flask (Python 3.8+)
• Frontend: Vanilla JS + Tailwind CSS
• API: RESTful dengan error handling
• Performance: < 1s response time
• Mobile: Responsive di semua device

Deployment

Aplikasi dapat di-deploy di berbagai platform:

# Heroku
heroku create classy-pddikti
git push heroku main

# Railway  
railway login
railway link
railway up

# Manual Server
gunicorn --bind 0.0.0.0:5000 app:app

Conclusion

Frontend yang baik bukan hanya soal tampilan yang menarik, tetapi juga tentang bagaimana data disajikan dengan cara yang meaningful bagi user. Dengan menggabungkan API yang solid dari ridwaanhall dengan design thinking dari Classy Indonesia, kami berhasil menciptakan platform yang tidak hanya functional, tetapi juga enjoyable untuk digunakan.

Kolaborasi open source seperti ini menunjukkan bagaimana developer Indonesia dapat saling melengkapi skill untuk menciptakan solusi yang bermanfaat bagi komunitas pendidikan.

 

---

---