E-Loen - SMK Negeri 1 Lhoksukon
Built E-Loen (E-Learning Online Education Network), a digital learning platform for SMK Negeri 1 Lhoksukon that connects admins, teachers, and students in one academic workflow, from master data and class assignment to learning materials, assignments, exams, and grade recaps, all scoped per academic year and semester. This project deepened my understanding of multi-role permission architecture and session-based academic context in a real school environment.
- Project Duration
- Jul 2025 - Aug 2025
- Role
- Fullstack Web Developer
Overview
E-Loen (E-Learning Online Education Network) is a school learning management system built for SMK Negeri 1 Lhoksukon. It digitizes the entire teaching cycle in one place: administrators manage master academic data, classes, subjects, and teaching assignments; teachers publish materials, assignments, and exams then grade student submissions; and students access their subjects, submit work, and track their own grades. Every learning activity is bound to a selected academic year and semester, so historical data stays intact when the school moves to a new term.
Challenges
The hardest part was keeping academic data correct across time. A school does not start from zero each semester. The same subject, taught by the same teacher, is repeated for different class groups every term, so assignments, exams, and grades from a previous semester must never leak into the current one. On top of that, four roles need very different views of the same data: an admin sees everything, a teacher may only touch the class groups they actually teach, and a student may only see their own submissions and grades. Enforcing that isolation without duplicating access checks in every controller was a real design problem.
Solution
I made the semester an explicit part of the session: teachers and students choose an academic year and semester at login, and a dedicated middleware guards every /learn route so no learning page can be opened without a valid academic context. Access control is layered: Spatie Permission handles role-level routing, while ownership checks at the query level verify that a teacher actually teaches the class group and that a student belongs to it. The relational schema (groups, subject-teachers, group-students) keeps every record anchored to its semester, so data naturally separates itself per term. The interface is built with Laravel and Inertia.js so React 19 and TypeScript can render role-specific dashboards, navigation, and pages without a separate API layer, styled with TailwindCSS and shadcn/ui and supported by full light/dark mode.
Key Features
- Four-tier role and permission system (Superadmin, Admin, Teacher, Student) powered by Spatie Permission with ~45 granular permissions
- Separated authentication gates: a public login for teachers and students, and a dedicated admin portal at /manage with role verification and rate limiting
- Semester-aware session context: teachers and students pick an academic year and semester at login, and every learning route is locked to that context by middleware
- Master data management: academic years, odd/even semesters, majors, and teacher categories
- Academic structure management: class groups per major and semester, student placement into groups, subjects, and subject-to-teacher assignment
- User management for teachers (NIP) and students (NIS), each linked to a user account with photo upload
- Learning materials in two formats: document materials (file upload or external link) and video materials (embedded link)
- Assignment module with deadlines, attachments, per-student submissions, and unique submission constraints
- Exam module with start and due windows, file-based submissions, and submission status tracking
- Grading workflow with score (0-100) and written feedback for both assignments and exams
- Per-student grade recap page with strict access rules: teachers only see students in their own class groups, students only see their own grades
- Analytics dashboard with KPI cards, role distribution, students per major, classes per major, and semester filtering, visualized with Recharts
- Audit trail via Spatie Activitylog, recording login, logout, and data changes with the responsible user shown on the dashboard
- Bulk delete across every management module and server-side data tables built with TanStack Table
- Account settings with profile editing, password change, and light/dark appearance mode