Buku ini berjudul "Membangun Website Donasi Online dengan Laravel, Vue Js, Tailwind CSS dan Payment Gateway", di dalam buku ini kita semua akan belajar bersama-sama bagaimana cara membangun sebuah website donasi online dengan Laravel sebagai Backend, Vue Js sebagai Frontend, Tailwind CSS sebagai UI atau user interface dan terakhir kita menggunakan Payment Gateway (Midtrans) untuk proses pembayaran donasi secara otomatis.
Di dalam buku ini, kita akan belajar dari 0 bagaimana proses pembuatan website donasi sampai ke tahap deployment online, agar website yang kita bagung dapat diakses secara global di internet.
Di dalam buku ini, akan dibagi menjadi beberapa materi, diantaranya yaitu bagaimana cara membangun halaman Admin dan Restful API menggunakan Laravel, membangun halaman Frontend dengan Vue Js dan sekaligus mengintegrasikannya dengan Tailwind CSS dan yang terakhir kita akan menggunakan Payment Gateway sebagai metode pembayaran.
Di awal, kita akan fokus belajar dengan Laravel seperti bagaimana cara membuat Model, Migration, dan Authentication, yang mana akan kita integrasikan dengan Two Factor Authentication atau Autentikasi 2 Langkah dengan harapan agar website yang dibangun menjadi lebih aman.
Setelah itu, kita juga akan belajar tentang bagaimana cara membuat halaman Admin beserta proses CRUD di Laravel untuk membuat beberapa master data, seperti Category, Campaign, Statistik dan Filter data donasi berdasarkan 2 tanggal yang berbeda.
Setelah halaman Admin dan master data sudah selesai dibuat, selanjutnya kita akan belajar membuat Restful API untuk beberapa proses, yaitu Authentication dengan Laravel Passport, Campaign, Donation, Profile dan masih banyak lagi.
Di materi selanjutnya, kita akan belajar bagaimana cara mengkonsumsi API atau memanggil API yang sebelumnya sudah kita buat di Laravel ke dalam Vue Js. Dan disini kita juga akan melakukan installasi dan konfigurasi Tailwind CSS sebagai UI atau user interface di website donasi yang sedang kita bangun. Untuk melakukan centralize data di dalam Vue Js, kita akan menggunakan Vuex dan menerapkan module system agar kode menjadi lebih maintenable dan mudah di kembangkan kedepannya.
Agar kode di dalam Vue Js tidak ditulis berulang-ulang, maka kita akan menggunakan fitur terbaru di dalam Vue Js 3, yaitu Composition API, dengan fitur ini kode yang kita buat di dalam aplikasi menjadi lebih reusable atau bisa digunakan secara berulang-ulang di dalam komponen lain.
Setelah semua proses membangun website donasi selesai, kita akan lanjutkan lagi untuk belajar bagaimana cara melakukan proses deployment atau mengonlinekan aplikasi kita di internet. Disini kita akan menggunakan Shared Hosting untuk project Laravel atau Backend-nya dan Netlify untuk project Vue Js atau Frontend.
DEMO PROJECT
- BackEnd : https://donasi.appdev.my.id/
- FrontEnd : https://donasi-online.netlify.app/
