Web App Intermediate

Building Modern Apps with Filament

Learn how to build modern, full-stack web applications rapidly using FilamentPHP and the TALL stack. This project-based course is designed for beginners, guiding you step-by-step to create a fully functional backend administration panel. By the end of the course, you will have mastered Filament's powerful Panel Builder, robust CRUD operations, complex database relationships, and interactive dashboards.

7 Weeks
Project-Based Learning

About this Course

Learn how to build modern, full-stack web applications rapidly using FilamentPHP and the TALL stack. This project-based course is designed for beginners, guiding you step-by-step to create a fully functional backend administration panel. By the end of the course, you will have mastered Filament's powerful Panel Builder, robust CRUD operations, complex database relationships, and interactive dashboards. This comprehensive course is designed to take you from intermediate concepts to advanced mastery. You will build real-world skills through hands-on practice and expert guidance.

Course Syllabus

Module 1: Introduction to FilamentPHP & Environment Setup

  • What is FilamentPHP and the TALL Stack (Tailwind, Alpine, Laravel, Livewire)?
  • Installing Laravel and configuring the database (SQLite/MySQL).
  • Installing Filament (Panel Builder) and creating the initial Admin User.
  • Project Kickoff: Understanding the "Mini Academic Portal" structure.

Module 2: Database Foundations & Eloquent Models

  • Designing the database schema for the Academic Portal.
  • Creating Migrations and Models for Instructor, Course, and Student.
  • Configuring Mass Assignment ($fillable) and utilizing Factories for dummy data.
  • Defining Eloquent relationships (HasMany, BelongsTo, BelongsToMany).

Module 3: Building Core Resources (Basic CRUD)

  • Introduction to Filament Resources and their structure.
  • Generating the InstructorResource and StudentResource.
  • Basic Form Builder: Using TextInput, Textarea, and Select.
  • Basic Table Builder: Displaying data with TextColumn and IconColumn.

Module 4: Mastering the Form Builder

  • Implementing form validations directly within Filament.
  • Handling file uploads (e.g., uploading Instructor profile pictures).
  • Structuring complex forms using Layouts (Section, Grid, and Fieldset).
  • Using dependent fields (reactive inputs).

Module 5: Relasi Kompleks & Enrollment

  • Setup tabel pivot untuk relasi Many-to-Many antara Student dan Course.
  • Menggunakan RelationManager di Filament: Menampilkan daftar kursus di dalam halaman detail siswa, dan sebaliknya.
  • Menggunakan Attach/Detach/Sync actions bawaan Filament untuk mendaftarkan siswa ke kursus tanpa perlu coding manual dari nol.

Module 6: Handling Relationships & Enrollments

  • Setting up the pivot table for the Many-to-Many relationship between Students and Courses.
  • Introduction to Filament RelationManagers.
  • Displaying a list of enrolled courses directly inside the Student detail page.
  • Using Attach, Detach, and Sync actions to manage enrollments seamlessly.

Module 7: Building Interactive Dashboards

  • Understanding the concept of Filament Widgets.
  • Creating a Stats Overview Widget (e.g., "Total Students", "Active Courses").
  • Building a Line Chart Widget to visualize monthly student enrollments.
  • Customizing widget placement on the main dashboard.

Module 8: Theming, Security & Final Polish

  • Customizing the Filament Panel's appearance (brand logo, primary colors, typography).
  • Enabling and configuring Global Search for quick data access.
  • Introduction to basic Roles & Permissions (restricting specific menus or actions based on user type).

Capstone Project

Featured Project

Mini Academic Portal (Learning Management System)

A centralized backend administration panel designed to streamline an educational institution's core operations. Students will build this portal from scratch, applying every concept learned throughout the course to manage data for instructors, courses, student enrollments, and academic statistics.

Core Project Goal

Apply all the skills you've learned to build a production-ready application from scratch. This project serves as your portfolio piece.

Key Features:

  • Master Data Management: Comprehensive CRUD functionality to manage Instructors and Course catalogs.
  • Student Registry: A dedicated module to manage student profiles and personal information.
  • Dynamic Enrollment System: Handling Many-to-Many relationships to enroll students into specific courses using Filament's pivot features.
  • Interactive Analytics Dashboard: Data visualization featuring statistical overview widgets and dynamic enrollment charts.
  • Secure Access & Navigation: Implementation of global search, custom panel theming, and basic access control.
Total Investment
Rp 7,000,000
One-time payment
Enroll Now
Duration: 7 Weeks
Mode: Online
Certificate of Completion