Logo
© 2019 - 2026 SantriKoding.
All Levels

Membangun Aplikasi Surat Desa Dengan Laravel, Inertia.js dan Vue

5.0 (1 ulasan)
22 members
DISKON 50%
Rp. 700.000
Rp. 350.000

TENTANG


Di dalam eBook ini kita bersama-sama akan belajar menjadi seorang Full-Stack Web Developer dari nol dengan cara membangun sebuah Aplikasi Surat Desa menggunakan Laravel, Inertia.js, dan Vue. eBook ini disusun secara bertahap dan praktis, sehingga cocok diikuti baik oleh pemula maupun oleh developer yang ingin memahami arsitektur aplikasi modern berbasis Laravel secara lebih mendalam. Seluruh studi kasus difokuskan pada satu aplikasi nyata, sehingga setiap materi yang dipelajari langsung memiliki konteks dan tujuan yang jelas.

Pada tahap awal, kita akan membahas bagaimana membangun aplikasi dengan konsep monolith modern menggunakan Inertia.js. Dengan pendekatan ini, kita tidak perlu membuat REST API secara terpisah, karena komunikasi antara backend Laravel dan frontend Vue dilakukan secara langsung melalui Inertia. Hal ini membuat alur pengembangan menjadi lebih cepat, lebih rapi, dan lebih mudah dikelola, sekaligus tetap memberikan pengalaman seperti Single Page Application (SPA).

Selanjutnya, kita akan mempelajari penerapan multi guard authentication untuk dua jenis pengguna, yaitu admin dan penduduk. Setiap guard memiliki alur autentikasi, hak akses, dan kebutuhan fitur yang berbeda. Dengan memahami konsep ini, kita akan mampu membangun sistem autentikasi yang aman dan terstruktur, serta mudah dikembangkan jika di kemudian hari ingin menambah tipe pengguna baru.

Pada sisi admin, eBook ini juga akan membahas secara detail konsep dan implementasi Role-Based Access Control (RBAC) atau roles & permissions yang bersifat dinamis. Kita akan belajar bagaimana mengatur hak akses berdasarkan peran, bagaimana menambahkan peran baru tanpa mengubah kode inti aplikasi, serta bagaimana mengamankan setiap fitur agar hanya dapat diakses oleh pengguna yang berwenang.

Tidak kalah penting, kita akan membangun sistem master surat atau template surat yang dinamis. Melalui fitur ini, admin dapat mengelola berbagai jenis surat desa, menentukan struktur dan isinya, serta menyesuaikan field-field yang dibutuhkan tanpa harus melakukan perubahan kode. Pendekatan ini membuat aplikasi menjadi fleksibel dan dapat digunakan dalam jangka panjang untuk berbagai kebutuhan administrasi desa.

Dalam proses pengelolaan data dan input pengguna, kita akan menggunakan useForm atau helper form dari Inertia. Kita akan belajar bagaimana menangani state form, validasi, error handling, serta proses submit dengan cara yang rapi dan konsisten. Dengan pendekatan ini, kode frontend Vue menjadi lebih bersih, mudah dibaca, dan mudah digunakan kembali di berbagai halaman.

Sebagai penutup, setelah seluruh fitur Aplikasi Surat Desa selesai dibangun, kita akan masuk ke tahap deployment ke VPS menggunakan LEMP Stack (Linux, Nginx, MySQL/MariaDB, dan PHP). Pada bagian ini, kita akan membahas proses konfigurasi server, pengamanan aplikasi, hingga memastikan aplikasi berjalan stabil di lingkungan production.

Dengan demikian, setelah menyelesaikan eBook ini, kita tidak hanya memahami teori, tetapi juga memiliki satu aplikasi nyata yang siap digunakan dan siap di-deploy secara profesional.


DEMO: https://surat.desa-santri.my.id

DAFTAR ISI


Pendahuluan
Cover
Kata Pengantar
Lisensi
Tentang
Prasyarat
Prasyarat Backend Laravel
Prasyarat Inertia.js dan Vue
Installasi & Persiapan Laravel
Aplikasi Pendukung
Membuat Project Laravel
Konfigurasi Time Zone
Konfigurasi Roles & Permissions
Laravel Spatie Permission
Installasi & Konfigurasi Laravel Spatie Permission
Database
Struktur Table dan Relasi Database
Koneksi Database
Membuat Model dan Migration
Membuat Relasi Table (Relationships)
Membuat Seeder Roles
Membuat Seeder Permissions
Membuat Seeder User
Membuat Seeder Setting
Menjalankan Migration dan Seeder
Konfigurasi Inertia.js
Installasi dan Konfigurasi Inertia.js "server-side"
Installasi dan Konfigurasi Inertia.js "client-side
Share Data di Inertia.js
Konfigurasi Permission di Inertia.js
Membuat Reusable Component
Membuat Component Pagination
Membuat Component Search
Membuat Component PageHeader
Membuat Component TableEmpty
Membuat Component Delete
Authentication admin
Membuat Controller Login
Membuat Layout Auth
Membuat Proses Login
Membuat Layout Admin
Membuat Menu Config
Membuat Component Logo
Membuat Component Desktop Menu
Membuat Component Mobile Menu
Membuat Component User Dropdown
Membuat Layout Admin
Halaman Dashboard
Membuat Controller Dashboard
Menampilkan Halaman Dashboard
Menampilkan Statistik Dashboard
Menampilkan Recent Acivity Dashboard
Menampilkan Chart atau Grafik Dashboard
Halaman Settings
Membuat Controller Setting
Membuat Halaman dan Update Setting
CRUD Data Permissions
Membuat Controller Permission
Menampilkan Data Permissions
Membuat Proses Insert Data Permission
Membuat Proses Edit dan Update Data Permission
Membuat Proses Delete Data Permission
CRUD Data Roles
Membuat Controller Role
Menampilkan Data Roles
Membuat Proses Insert Data Role
Membuat Proses Edit dan Update Data Role
Membuat Proses Delete Data Role
CRUD Data Users
Membuat Controller User
Menampilkan Data Users
Membuat Proses Insert Data User
Membuat Proses Edit dan Update Data User
Membuat Proses Delete Data User
CRUD Data Penduduk
Membuat Controller Resident
Menampilkan Data Residents
Membuat Proses Insert Data Resident
Membuat Proses Edit dan Update Data Resident
Membuat Proses Delete Data Resident
Installasi & Konfigurasi Laravel Excel
Membuat Proses Import Data Resident dari Excel
Membuat Proses Export Data Resident ke Excel
CRUD Data Master Surat
Membuat Controller Letter Template
Menampilkan Data Letter Templates
Membuat Component Letter Preview
Installasi dan Konfigurasi TinyMCE
Membuat Component Letter Editor
Membuat Proses Insert Data Letter Template
Membuat Proses Edit dan Update Letter Template
Membuat Proses Delete Data Letter Template
Halaman Surat Masuk
Membuat Controller Letter (Surat Masuk)
Menampilkan Data Letter (Surat Masuk)
Membuat Component Letter Information
Membuat Component Render Payload
Membuat Component Render Snapshot Resident
Menampilkan Detail Letter dan Action Letter
Halaman Surat Selesai
Membuat Controller Letter Completed (Surat Selesai)
Menampilkan Data Letter Completeds (Surat Selesai)
Membuat Fitur Cetak Surat (Print)
Membuat Layout Web
Membuat Component Desktop Menu
Membuat Component Mobile Menu
Membuat Component Mobile Menu Button
Membuat Component Header
Membuat Layout Web
Authentication Resident
Konfigurasi Guard Auth Resident
Membuat Controller Login
Membuat Proses Login
Halaman Dashboard
Membuat Controller Dashboard
Menampilkan Halaman Dashboard
Halaman Home
Menampilkan Halaman Home
Halaman My Letters (Surat Saya)
Membuat Controller My Letter (Surat Saya)
Menampilkan Data My Letters (Surat Saya)
Menampilkan Detail My Letter (Surat Saya)
Membuat Fitur Cetak Surat (Print)
Halaman Letters (Pengajuan Surat)
Membuat Controller Letter (Pengajuan Surat)
Menampilkan List Data Letters (Pengajuan Surat)
Membuat Pengajuan Surat
Deployment (VPS)
Membeli VPS (Virtual Private Server)
Membeli Domain
Menghubungkan Domain ke Server
Konfirugasi LEMP Stack
Upload Project di GitHub
Deploy Project ke Server
Memasang SSL di Server
Penutup
Source Code
Penutup

TOOLS

Tools yang digunakan dalam course ini

Laravel
Laravel

The PHP Framework for Web Artisans

See More
Inertia.js
Inertia.js

Build Modern Single Page App

See More
Vue
Vue

JavaScript Framework

See More

SCREENSHOTS

Screenshot hasil projek dari course ini

Login Admin
Login Admin
Dashboard Admin
Dashboard Admin
Master Surat Dinamis
Master Surat Dinamis
Roles & Permissions
Roles & Permissions
Login Penduduk
Login Penduduk
Dashboard Penduduk
Dashboard Penduduk

BENEFITS

Manfaat yang akan Anda dapatkan dari course ini


Ebook

Source Code

Private Group Member

Konsultasi Belajar

Update Materi

Kupon Diskon Hosting

Sertifikat

Akses Selamanya

Real Studi Kasus

DISUSUN OLEH

Tim expert yang menyusun course ini

Fika Ridaul Maulayya
Fika Ridaul Maulayya
PREMIUM MEMBER

Full-Stack Developer, Content Creator and CEO & Founder SantriKoding.com


ULASAN MEMBERS

Apa kata mereka tentang course ini

Muhammad Ghifari Arfananda

Fullstack Web Developer

"Materi mudah dipahami sama seperti yang versi react sebelumnya, ada beberapa fungsi yang belum saya gunakan sebelumnya pada aplikasi saya diterapkan pada materi ini, sangat membantu untuk membuat aplikasi saya menjadi lebih baik lagi. Terima Kasih"

Butuh Bantuan?