Membangun Website Donasi Online Dengan Laravel, Vue Js, Tailwind CSS dan Payment Gateway

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

BEGINNER0 penilaian9 peserta

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

Cover00.00
Kata Pengantar00.00
License Buku00.00
Tentang Buku00.00

Perancangan Aplikasi00.00
Struktur Database00.00
Wirefrime UI Desain Website00.00

Persiapan dan Persyaratan00.00
Membuat Project Laravel dengan Composer00.00
Upgrade Versi Laravel00.00
Membuat Helpers di Laravel00.00
Installasi dan Konfigurasi Tailwind CSS di Laravel00.00

Koneksi Database00.00
Membuat Model dan Migration00.00
Eloquent Relationships00.00
Eloquent Mutators & Casting00.00
Membuat Data Seeder User00.00

Apa itu Laravel Fortify ?00.00
Installasi dan Konfigurasi Laravel Fortify00.00
Membuat Proses Login00.00
Membuat Proses Forgot dan Reset Password00.00

Membuat Halaman Dashboard00.00
Membuat CRUD Category00.00
Membuat CRUD Campaign00.00
Menampilkan Data Donatur00.00
Menampilkan Data Donasi00.00
Profile User dan Two Factor Authentication00.00
Membuat CRUD Slider00.00

Apa itu API ?00.00
Install dan Konfigurasi Laravel Passport00.00
Membuat Restful API Register00.00
Membuat Restful API Login00.00
Membuat Restful API Category00.00
Membuat Restful API Campaign00.00
Membuat Restful API Slider00.00
Membuat Restful API Profile00.00
Installasi dan Konfigurasi Midtrans00.00
Membuat Restful API Donation00.00

Berkenalan Dengan Vue Js00.00
Composition API dan Reactivity API00.00
Lifecycle Hooks00.00
Berkenalan Dengan Vuex00.00
Membuat Aplikasi Pertama Dengan Vuex00.00

Installasi dan Perispan Frontend00.00
Membuat Project Vue Js dengan Vue CLI00.00
Installasi Library Pendukung00.00
Installasi dan Konfigurasi Tailwind CSS di Vue Js00.00
Membuat Helpers Menggunakan Mixins00.00
Konfigurasi Midtrans di Vue Js00.00
Membuat Component Header dan Footer00.00

Konfigurasi Global API Endpoint00.00
Konfigurasi Router untuk Authentication00.00
Konfigurasi Module Auth Vuex00.00
Membuat Proses Register Donatur00.00
Menampilkan Halaman Dashboard Donatur00.00
Membuat Proses Logout Donatur00.00
Membuat Proses Login Donatur00.00
Konfigurasi Router untuk Donation00.00
Konfigurasi Module Donation Vuex00.00
Menampilkan Data Donation dari Donatur00.00
Konfigurasi Router untuk Profile00.00
Konfigurasi Module Profile Vuex00.00
Menampilkan Data Profile00.00
Update Profile Donatur00.00
Konfigurasi Router untuk Update Password00.00
Update Password Donatur00.00

Konfigurasi Module Slider Vuex00.00
Membuat Component Slider00.00
Konfigurasi Module Category Vuex00.00
Membuat Component Category Home00.00
Konfigurasi Router untuk Homepage00.00
Menampilkan Component Slider dan Category di Halaman Homepage00.00
Konfigurasi Module Campaign Vuex00.00
Menampilkan Data Campaign di Homepage00.00
Konfigurasi Router untuk Category00.00
Menampilkan Data Category00.00
Menampilkan Detail Category00.00
Konfigurasi Router untuk Campaign00.00
Menampilkan Data Campaign00.00
Menampilkan Detail Campaign00.00
Konfigurasi Router untuk Proses Donasi00.00
Membuat Proses Donasi00.00
Menampilkan Snap Pay Midtrans00.00
Konfigurasi Router untuk Search00.00
Membuat Realtime Search00.00

Deploy Project Laravel di Shared Hosting (cPanel)00.00
Deploy Project Vue Js di Netlify00.00
Konfigurasi Notifikasi Handler Midtrans00.00

Source Code00.00
Kesimpulan00.00
Penyusun Materi

Prev
Next
Fika Ridaul Maulayya
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

0

(0 reviews)

5 Bintang
0%
4 Bintang
0%
3 Bintang
0%
2 Bintang
0%
1 Bintang
0%
...
Rp. 350,000
Rp. 320,0009% off
Hemat Rp. 30,000Diskon sampai hari ini
Beli sekali akses selamanya
Beli lewat Roadmap
Sewa kelas dan akses selama 1 bulan
Yang akan kamu dapatkan :
92 Modul
7 jam durasi
Forum Diskusi Tanya Jawab
Klaim Sertifikat Digital

Kelas Populer Lainnya

Prev
Next