IPT Learn 🎓

IPT Learn is an interactive web-based e-learning platform for Computer Science (Informatika) subjects at SMK IPT Karangpanas Semarang. This application is designed to facilitate the teaching and learning process between teachers and students with a modern, dynamic, and responsive interface.

🌟 Key Features

1. Account & Profile Management (All Roles)

• Role-Based Authentication: A secure authentication system for Admins, Teachers, and Students.
• Interactive Profiles: Users can upload and adjust their profile pictures with interactive features (Zoom, Rotate, and Crop) powered by Cropper.js and Alpine.js.
• Account Security: Password management, forced password reset by admins, and temporary account deactivation (Toggle Active/Inactive).

2. Administrator (Super User)

• Statistics Dashboard: Monitor real-time summaries of the total number of teachers, students, active classes, quizzes, and global average scores.
• User Management: Complete CRUD operations for users, password resets, and account blocking.
• Bulk Student Import: Feature to mass-import student data using CSV files.
• System Monitoring: Oversee all learning materials and quizzes created by teachers across the entire system.

3. Teacher (Guru)

• Class & Topic Management: Create classes/courses and structure the curriculum by topics.
• Rich Learning Materials: Create engaging study materials using a modern WYSIWYG editor—no manual HTML coding required.
• Advanced Quiz Management:
  • Configurable time limits (timers).
  • Quiz scheduling (start and end times).
  • Attempt limits.
  • Multiple-choice question management.
• Grading & Reports: Monitor student progress in detail, view highest/average scores recaps, and Export Scores to CSV/Excel for report cards.

4. Student (Siswa)

• Personalized Dashboard: Access assigned classes and specific study materials.
• Quizzes & Assessments (CBT Style):
  • Take exams with an interactive countdown timer that automatically submits when the time is up.
  • Track exam history (Best score, latest score, average score).
• Mobile-Friendly Design: Access and read materials, as well as take exams directly from mobile phones or tablets with a 100% responsive layout.

🛠️ Tech Stack & Technologies

Backend

• Laravel 13: The powerful main PHP framework.
• PHP 8.3+: Primary programming language.
• MySQL: Relational Database Management System (RDBMS).
• Laravel Breeze: Starter kit for basic authentication scaffolding.

Frontend

• Tailwind CSS 3: Utility-first CSS framework for building elegant, fast, and responsive UIs (built via Vite).
• Alpine.js: Lightweight JavaScript framework for UI interactivity (Modals, Dropdowns, Tabs, Toggles).
• Cropper.js: Client-side image cropping and rotation integration before upload (Base64).
• Rich Text Editor: Integrated for seamless material creation by teachers.

⚙️ Local Installation & Setup

Follow these steps to run the application locally:

1. Clone the repository

   git clone <your-repo-url>
   cd e-learning_laravel

2. Install PHP & Node.js dependencies

   composer install
   npm install

3. Setup environment

   cp .env.example .env

   Open the .env file and adjust your database connection configuration (e.g., DB_DATABASE, DB_USERNAME, DB_PASSWORD).

4. Generate Application Key & Storage Link

   php artisan key:generate
   php artisan storage:link

5. Migrate & Seed the Database

   php artisan migrate --seed

   This process will create tables and populate dummy data (default accounts, topics, quizzes).

6. Build Assets & Run the Server

   npm run build  # Or npm run dev (for development)
   php artisan serve

   The application will be accessible via browser at http://localhost:8000.

🔑 Default Accounts (from Seeder)

For local testing purposes, use the following credentials. Important: Make sure to change passwords and sensitive data if deployed to production.

• Admin

  • Email: admin@smk.sch.id
  • Password: admin123

• Teacher (Guru)

  • Email: guru1@smk.sch.id (Available from guru1 and guru2)
  • Password: guru123

• Student (Siswa)

  • Email: siswa1@smk.sch.id (Available from siswa1 to siswa20)
  • Password: Matches their NISN. For the siswa1 account, the NISN / Password is 0000000001.

📱 Responsiveness (Mobile-Ready)

This system is designed using fully responsive interface principles. The Sidebar will elegantly hide into a Hamburger menu on mobile devices, and long data tables are equipped with horizontal scrolling to ensure the UI remains unbroken on narrow screens.

🎓 Credits

This project was built as an educational media tool for SMK IPT Karangpanas Semarang, designed with a modern Learning Management System (LMS) and Computer-Based Testing (CBT) approach.