Membangun Website Donasi Online Dengan Laravel, Vue Js, Tailwind CSS dan Payment Gateway
Kelas ini berjudul "Membangun Website Donasi Online dengan Laravel, Vue Js, Tailwind CSS dan Payment Gateway", di dalam kelas 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. Catatan : * Kelas ini berupa e-book/text * Update Laravel 9
Tentang Kelas
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, Profil 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 instalasi 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 maintainable 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 meng online kan 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/
Daftar Materi
| Cover | 00.00 | |
| Kata Pengantar | 00.00 | |
| License Buku | 00.00 | |
| Tentang Buku | 00.00 |
| Perancangan Aplikasi | 00.00 | |
| Struktur Database | 00.00 | |
| Wirefrime UI Desain Website | 00.00 |
| Persiapan dan Persyaratan | 00.00 | |
| Membuat Project Laravel dengan Composer | 00.00 | |
| Upgrade Versi Laravel | 00.00 | |
| Membuat Helpers di Laravel | 00.00 | |
| Installasi dan Konfigurasi Tailwind CSS di Laravel | 00.00 |
| Koneksi Database | 00.00 | |
| Membuat Model dan Migration | 00.00 | |
| Eloquent Relationships | 00.00 | |
| Eloquent Mutators & Casting | 00.00 | |
| Membuat Data Seeder User | 00.00 |
| Apa itu Laravel Fortify ? | 00.00 | |
| Installasi dan Konfigurasi Laravel Fortify | 00.00 | |
| Membuat Proses Login | 00.00 | |
| Membuat Proses Forgot dan Reset Password | 00.00 |
| Membuat Halaman Dashboard | 00.00 | |
| Membuat CRUD Category | 00.00 | |
| Membuat CRUD Campaign 9 | 00.00 | |
| Menampilkan Data Donatur | 00.00 | |
| Menampilkan Data Donasi | 00.00 | |
| Profile User dan Two Factor Authentication | 00.00 | |
| Membuat CRUD Slider | 00.00 |
| Apa itu API ? | 00.00 | |
| Install dan Konfigurasi Laravel Passport | 00.00 | |
| Membuat Restful API Register | 00.00 | |
| Membuat Restful API Login | 00.00 | |
| Membuat Restful API Category | 00.00 | |
| Membuat Restful API Campaign | 00.00 | |
| Membuat Restful API Slider | 00.00 | |
| Membuat Restful API Profile | 00.00 | |
| Installasi dan Konfigurasi Midtrans | 00.00 | |
| Membuat Restful API Donation | 00.00 |
| Berkenalan Dengan Vue Js | 00.00 | |
| Composition API dan Reactivity API | 00.00 | |
| Lifecycle Hooks | 00.00 | |
| Berkenalan Dengan Vuex | 00.00 | |
| Membuat Aplikasi Pertama Dengan Vuex | 00.00 |
| Installasi dan Persiapan Frontend | 00.00 | |
| Membuat Project Vue Js dengan Vue CLI | 00.00 | |
| Installasi Library Pendukung | 00.00 | |
| Installasi dan Konfigurasi Tailwind CSS di Vue Js | 00.00 | |
| Membuat Helpers Menggunakan Mixins | 00.00 | |
| Konfigurasi Midtrans di Vue Js | 00.00 | |
| Membuat Component Header dan Footer | 00.00 |
| Konfigurasi Global API Endpoint | 00.00 | |
| Konfigurasi Router untuk Authentication | 00.00 | |
| Konfigurasi Module Auth Vuex | 00.00 | |
| Membuat Proses Register Donatur | 00.00 | |
| Menampilkan Halaman Dashboard Donatur | 00.00 | |
| Membuat Proses Logout Donatur | 00.00 | |
| Membuat Proses Login Donatur | 00.00 | |
| Konfigurasi Router untuk Donation | 00.00 | |
| Konfigurasi Module Donation Vuex | 00.00 | |
| Menampilkan Data Donation dari Donatur | 00.00 | |
| Konfigurasi Router untuk Profile | 00.00 | |
| Konfigurasi Module Profile Vuex | 00.00 | |
| Menampilkan Data Profile | 00.00 | |
| Update Profile Donatur | 00.00 | |
| Konfigurasi Router untuk Update Password | 00.00 | |
| Update Password Donatur | 00.00 |
| Konfigurasi Module Slider Vuex | 00.00 | |
| Membuat Component Slider | 00.00 | |
| Konfigurasi Module Category Vuex | 00.00 | |
| Membuat Component Category Home | 00.00 | |
| Konfigurasi Router untuk Homepage | 00.00 | |
| Menampilkan Component Slider dan Category di Halaman Homepage | 00.00 | |
| Konfigurasi Module Campaign Vuex | 00.00 | |
| Menampilkan Data Campaign di Homepage | 00.00 | |
| Konfigurasi Router untuk Category | 00.00 | |
| Menampilkan Data Category | 00.00 | |
| Menampilkan Detail Category | 00.00 | |
| Konfigurasi Router untuk Campaign | 00.00 | |
| Menampilkan Data Campaign | 00.00 | |
| Menampilkan Detail Campaign | 00.00 | |
| Konfigurasi Router untuk Proses Donasi | 00.00 | |
| Membuat Proses Donasi9 | 00.00 | |
| Menampilkan Snap Pay Midtrans | 00.00 | |
| Konfigurasi Router untuk Search | 00.00 | |
| Membuat Realtime Search | 00.00 |
| Deploy Project Laravel di Shared Hosting (cPanel) | 00.00 | |
| Deploy Project Vue Js di Netlify | 00.00 | |
| Konfigurasi Notifikasi Handler Midtrans | 00.00 |
| Source Code | 00.00 | |
| Kesimpulan | 00.00 |
Penyusun Materi
Fika Ridaul Maulayya
Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share everything i know with Article, Screencasts and E-Books at SantriKoding.com
Testimoni Oleh Siswa
(1 reviews)
Ahmad Mukaram Aziz
Mudah dipahami