Membangun Aplikasi Ujian Online (CBT) Dengan Laravel, Inertia.js & Vue.js

4.9 (16 ulasan) 256 members

DISKON 7%
Rp. 372.000 Rp. 400.000

TENTANG

Pada pembahasan buku ini, kita semua akan belajar bersama-sama bagaimana cara menjadi seorang FullStack Web Developer dengan cara membangun sebuah aplikasi Ujian Online menggunakan Laravel, Inertia.js dan Vue.js 3.

Karena akan menggunakan Inertia.js, maka akan sangat mengehemat waktu kita dalam pembuatan sebuah aplikasi yang bersifat modern dan SPA atau Single Page Application. Dengan menggunakan Inertia.js, maka kita tidak perlu susah payah dan repot-repot membuat REST API untuk menghubungkan antara Backend dan Frontend. Karena peran Inertia.js akan menggantikan REST API untuk menguhubungkan Laravel (Backend) dan Vue.js (Frontend) dengan lebih mudah dan maintainable.

Kita juga akan belajar membuat sistem otentikasi dengan 2 jenis role / peran, yaitu admin sebagai seseorang yang melakukan input data master, seperti data siswa, kelas, ujian, report dan lain-lain. Sedangkan role / peran yang satunya adalah siswa, yaitu yang melakukan proses ujian di dalam aplikasi.

Karena akan membuat aplikasi Ujian Online, maka kita juga akan belajar tentang melakukan import dan export data, seperti siswa, soal ujian dan bahkan report hasil ujian dari para siswa.

Setelah proses pembuatan aplikasi sudah selesai, maka kita juga akan belajar bagaimana cara melakukan deployment atau meng-onlinkan aplikasi tersebut agar bisa diakses oleh banyak orang. Dan disini kita akan belajar melakukan Deploy menggunakan VPS.

Karena akan melakukan Deployment menggunakan VPS, maka kita juga akan belajar tentang LEMP stack atau kepanjangan dari Linux, Engine X, MySQL dan PHP. Maka secara tidak langsung, kita juga akan belajar tentang basic Devops.

Demo Aplikasi : https://ujian-online.my.id

DISUSUN OLEH

Fika Ridaul Maulayya

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

DAFTAR ISI

    Pendahuluan
  • Cover
  • Kata Pengantar
  • License Buku
  • Tentang Buku
    Perancangan
  • Diagram Aplikasi
  • Struktur dan Relasi Database
    Fundamental JavaScript ES6
  • JavaScript ES6
  • Variable
  • Default Parameter
  • Template String atau Literal
  • Arrow Function
  • Rest Parameter
  • Destructuring & Restructuring
  • Spread Operator
  • Array Map
  • Promise
  • Async Await
    Installasi & Persiapan
  • Persiapan dan Tools Pendukung
  • Membuat Project Laravel dengan Composer
  • Konfigurasi Time Zone
    Database
  • Konfigurasi Koneksi Database
  • Membuat Model dan Migration
  • Relasi Table Dengan Eloquent
  • Membuat User Seeder
    Konfigurasi Inertia.js
  • Apa itu Inertia.js ?
  • Installasi & Konfigurasi Inertia.js "server-side"
  • Installasi & Konfigurasi Inertia.js "client-side"
  • Share Data di Inertia.js
  • Menambahkan Progressbar di Inertia.js
  • Membuat Helpers Dengan Mixins
    Konfigurasi Laravel Excel
  • Apa itu Laravel Excel ?
  • Installasi & Konfigurasi Laravel Excel
    Authentication Admin
  • Apa itu Laravel Fortify ?
  • Installasi dan Konfigurasi Laravel Fortify
  • Membuat Proses Login
  • Membuat Proses Logout
    Halaman Dashboard Admin
  • Membuat Controller Dashboard
  • Membuat Layout Admin
  • Menampilkan Halaman Dashboard
    CRUD Data Pelajaran
  • Membuat Controller Lesson
  • Menampilkan Data Lesson
  • Membuat Proses Insert Data Lesson
  • Membuat Proses Edit dan Update Data Lesson
  • Membuat Proses Delete Data Lesson
    CRUD Data Kelas
  • Membuat Controller Classroom
  • Menampilkan Data Classroom
  • Membuat Proses Insert Data Classroom
  • Membuat Proses Edit dan Update Data Classroom
  • Membuat Proses Delete Data Classroom
    CRUD Data Siswa
  • Membuat Controller Student
  • Menampilkan Data Student
  • Membuat Proses Insert Data Student
  • Membuat Proses Edit dan Update Data Student
  • Membuat Proses Delete Data Student
  • Membuat Proses Import Data Student
    CRUD Data Ujian
  • Membuat Controller Exam
  • Menampilkan Data Exam
  • Membuat Proses Insert Data Exam
  • Menampilkan Detail Data Exam
  • Membuat Proses Edit dan Update Data Exam
  • Membuat Proses Delete Data Exam
    CRUD Data Soal Ujian
  • Menampilkan Data Questions
  • Membuat Proses Insert Data Question
  • Membuat Proses Edit dan Update Data Question
  • Membuat Proses Delete Data Question
  • Membuat Proses Import Data Question
    CRUD Data Sesi Ujian
  • Membuat Controller Exam Session
  • Menampilkan Data Exam Sessions
  • Membuat Proses Insert Data Exam Session
  • Menampilkan Detail Data Exam Session
  • Membuat Proses Edit dan Update Data Exam Session
  • Membuat Proses Delete Data Exam Session
    Enrolle Siswa Ujian
  • Menampilkan Data Siswa Enrolled
  • Membuat Proses Enrolle Data Siswa (Bulk Insert)
  • Membuat Proses Delete Data Siswa Enrolled
    Laporan Ujian
  • Membuat Controller Report
  • Menampilkan Nilai Ujian
  • Membuat Proses Export Nilai Ujian
    Authentication Siswa
  • Konfigurasi Authentication Student
  • Membuat Middleware Authentication Student
  • Membuat Controller Login Student
  • Membuat Halaman dan Proses Login Student
    Halaman Dashboard Siswa
  • Membuat Controller Dashboard Student
  • Menampilkan Halaman Dashboard Student
    Halaman Ujian Siswa
  • Menampilkan Konfirmasi Ujian
  • Memulai dan Menampilkan Ujian
  • Menampilkan dan Update Durasi Ujian
  • Membuat Navigasi Soal Ujian
  • Proses Menjawab Soal Ujian
  • Proses Mengakhiri Ujian
  • Menampilkan Hasil Ujian
    Deployment
  • Membeli VPS (Virtual Private Server)
  • Konfirugasi LEMP Stack di Server
  • Proses Deployment Project ke Server via GitHub
  • Menghubungkan Domain ke Server
  • Memasang SSL di Server
    Penutup
  • Source Code
  • Penutup

Dapatkan ebook sekarang untuk dapat mengikuti pembelajaran

TOOLS

Laravel

The PHP Framework for Web Artisans

Inertia.js

Build Modern Single Page App

Vue.js

JavaScript Framework

SCREENSHOTS


Halaman Login Siswa

Halaman Menambah Soal Ujian

Halaman Ujian Siswa

BENEFITS


Ebook

Souce Code

Private Group Member

Konsultasi Belajar

Update Materi

Kupon Diskon Hosting

Sertifikat

Akses Selamanya

Real Studi Kasus

ULASAN MEMBERS


Mudah dipahami dan enak ada private groupnya buat tanya-tanya 👍

Elnandi Nur at SantriKoding

I am a passionate developer with experience in various...


Kursus "Membangun Aplikasi Ujian Online (CBT) Dengan Laravel, Inertia.js & Vue.js" adalah panduan yang sangat bermanfaat bagi pengembang web yang ingin mempelajari cara membangun aplikasi Computer-Based Test (CBT) yang modern dan responsif. Dalam kursus ini, saya belajar bagaimana mengintegrasikan Laravel sebagai backend, Inertia.js sebagai jembatan antara frontend dan backend, serta Vue.js untuk membangun antarmuka pengguna yang dinamis.

Marshel Sitompul at SantriKoding

Pengen jadi pengembang aplikasi


Keren banget, hanya dalam waktu singkat saya sudah berhasil punya app ujian online yang benar-benar online. dengan mengikuti step by step yg ada di ebook dan bila ada masalah dikomunikasikan lewat grup private. terima kasih Santri Koding.

NeoXyline at SantriKoding

Learning by doing


Setiap logika di fungsi yang dibuat, diberikan penjelasan yang mudah dipahami.