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.