Learning Management System Berbasis Web untuk Kursus, Modul Pembelajaran, dan Ujian Online

Frontend LMS dibangun sebagai Single Page Application (SPA) menggunakan Vue 3 dengan Vite sebagai build tool modern.

Pendekatan ini dipilih untuk memberikan:

performa tinggi
build yang cepat
modular development
kemudahan maintainability

Core Frontend Stack

Vue 3

Framework utama yang digunakan untuk membangun antarmuka aplikasi.

Keunggulan Vue 3:

Composition API
reactive state system
component based architecture
performa lebih tinggi dibanding Vue 2

Vue digunakan untuk membangun seluruh interface seperti:

dashboard
katalog kursus
modul pembelajaran
sistem ujian

Vite

Vite digunakan sebagai modern build tool menggantikan Webpack.

Keunggulan Vite:

instant dev server
hot module replacement sangat cepat
optimized production build
native ES modules

Script utama:

npm run dev
npm run build
npm run preview

Tailwind CSS

Tailwind digunakan untuk membangun UI dengan pendekatan utility-first CSS.

Keuntungan menggunakan Tailwind:

styling lebih konsisten
development lebih cepat
responsive design mudah
tidak perlu banyak custom CSS

Tailwind juga membuat UI LMS terlihat modern dan minimalis.

Pinia (State Management)

Pinia digunakan sebagai state management global.

Pinia menggantikan Vuex pada Vue 3 karena:

API lebih sederhana
performa lebih baik
TypeScript friendly

State yang dikelola melalui Pinia antara lain:

user authentication
kursus yang diikuti
data dashboard
state ujian

Vue Router

Vue Router digunakan untuk menangani navigasi SPA.

Contoh struktur routing:

/login
/dashboard
/courses
/courses/:slug
/modules/:id
/exams
/profile
/catalog

Routing ini memungkinkan navigasi halaman tanpa reload browser.

API Communication

Frontend berkomunikasi dengan backend melalui REST API menggunakan Axios.

Library yang digunakan:

axios

Contoh penggunaan:

axios.get('/api/lms/dashboard')
axios.post('/api/auth/login')

Semua request diarahkan ke backend API Laravel.

Authentication System

Sistem autentikasi menggunakan:

Laravel Sanctum
Token based authentication

Alur autentikasi:

Login
 ↓
API /auth/login
 ↓
Receive token
 ↓
Save token
 ↓
Attach token to API request

Token kemudian digunakan untuk mengakses endpoint yang memerlukan autentikasi.

UI Component System

UI dibangun menggunakan component-based architecture.

Contoh struktur komponen:

components/
 ├── Dashboard
 │   ├── StatCard.vue
 │   ├── RecentCourses.vue
 │   └── ExamHistory.vue
 │
 ├── Courses
 │   ├── CourseCard.vue
 │   ├── CourseGrid.vue
 │   └── CourseDetail.vue
 │
 ├── Exams
 │   ├── ExamCard.vue
 │   ├── QuestionNavigator.vue
 │   └── ExamResult.vue

Pendekatan ini membuat kode lebih modular dan mudah dipelihara.

Frontend Folder Structure (Example)

Struktur project frontend secara umum:

src/
 ├── assets
 ├── components
 ├── layouts
 ├── pages
 ├── router
 ├── stores
 ├── services
 ├── utils
 └── main.js

Penjelasan:

components → reusable UI components
pages → halaman aplikasi
router → konfigurasi routing
stores → state management Pinia
services → API service
utils → helper functions

Build Configuration

Project menggunakan Vite 8 dengan plugin Vue.

Contoh konfigurasi utama:

vite
@vitejs/plugin-vue
@tailwindcss/vite

Build output dioptimasi untuk:

production deployment
asset compression
tree shaking

Additional Libraries

Beberapa library tambahan yang digunakan:

FontAwesome

Digunakan untuk ikon UI.

@fortawesome/fontawesome-free

Firebase

Digunakan untuk fitur seperti:

push notification
analytics
realtime features

firebase

Performance Optimization

Beberapa strategi optimasi yang digunakan:

lazy loading pages
code splitting
optimized assets
caching API request

Vite juga melakukan bundling yang sangat efisien untuk production.

Deployment

Frontend dapat di-deploy menggunakan beberapa opsi:

Static Hosting

Karena berbasis SPA, aplikasi dapat di-host di:

Nginx
Vercel
Netlify
Cloudflare Pages

Summary

Frontend Fahram LMS dibangun menggunakan stack modern yang terdiri dari:

Vue 3
Vite
TailwindCSS
Pinia
Vue Router
Axios

Pendekatan ini menghasilkan aplikasi yang:

cepat
scalable
modular
mudah dikembangkan

Frontend juga terintegrasi langsung dengan Laravel REST API sehingga dapat digunakan bersama mobile application Flutter.

Tag: TailwindCSS