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

5.0 (3 rating) 79 members

Rp. 350.000

Fika Ridaul Maulayya

Author of This Ebook

wave
wave

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



    Pendahuluan

  • Cover
  • Kata Pengantar
  • License Buku
  • Tentang Buku

    Perancangan

  • Perancangan Aplikasi
  • Struktur Database
  • Wirefrime UI Desain Website

    Installasi & Persiapan - BackEnd

  • Persiapan dan Persyaratan
  • Membuat Project Laravel dengan Composer
  • Upgrade Versi Laravel
  • Membuat Helpers di Laravel
  • Installasi dan Konfigurasi Tailwind CSS di Laravel

    Database

  • Koneksi Database
  • Membuat Model dan Migration
  • Eloquent Relationships
  • Eloquent Mutators & Casting
  • Membuat Data Seeder User

    Authentication - Fortify

  • Apa itu Laravel Fortify ?
  • Installasi dan Konfigurasi Laravel Fortify
  • Membuat Proses Login
  • Membuat Proses Forgot dan Reset Password

    Halaman Admin - BackEnd

  • Membuat Halaman Dashboard
  • Membuat CRUD Category
  • Membuat CRUD Campaign
  • Menampilkan Data Donatur
  • Menampilkan Data Donasi
  • Profile User dan Two Factor Authentication
  • Membuat CRUD Slider

    RESTful API

  • Apa itu API ?
  • Install dan Konfigurasi Laravel Passport
  • Membuat Restful API Register
  • Membuat Restful API Login
  • Membuat Restful API Category
  • Membuat Restful API Campaign
  • Membuat Restful API Slider
  • Membuat Restful API Profile
  • Installasi dan Konfigurasi Midtrans
  • Membuat Restful API Donation

    Pengenalan Vue Js & Vuex

  • Berkenalan Dengan Vue Js
  • Composition API dan Reactivity API
  • Lifecycle Hooks
  • Berkenalan Dengan Vuex
  • Membuat Aplikasi Pertama Dengan Vuex

    Installasi & Persiapan - FrontEnd

  • Installasi dan Perispan Frontend
  • Membuat Project Vue Js dengan Vue CLI
  • Installasi Library Pendukung
  • Installasi dan Konfigurasi Tailwind CSS di Vue Js
  • Membuat Helpers Menggunakan Mixins
  • Konfigurasi Midtrans di Vue Js
  • Membuat Component Header dan Footer

    Halaman Donatur

  • Konfigurasi Global API Endpoint
  • Konfigurasi Router untuk Authentication
  • Konfigurasi Module Auth Vuex
  • Membuat Proses Register Donatur
  • Menampilkan Halaman Dashboard Donatur
  • Membuat Proses Logout Donatur
  • Membuat Proses Login Donatur
  • Konfigurasi Router untuk Donation
  • Konfigurasi Module Donation Vuex
  • Menampilkan Data Donation dari Donatur
  • Konfigurasi Router untuk Profile
  • Konfigurasi Module Profile Vuex
  • Menampilkan Data Profile
  • Update Profile Donatur
  • Konfigurasi Router untuk Update Password
  • Update Password Donatur

    Halaman FrontEnd

  • Konfigurasi Module Slider Vuex
  • Membuat Component Slider
  • Konfigurasi Module Category Vuex
  • Membuat Component Category Home
  • Konfigurasi Router untuk Homepage
  • Menampilkan Component Slider dan Category di Halaman Homepage
  • Konfigurasi Module Campaign Vuex
  • Menampilkan Data Campaign di Homepage
  • Konfigurasi Router untuk Category
  • Menampilkan Data Category
  • Menampilkan Detail Category
  • Konfigurasi Router untuk Campaign
  • Menampilkan Data Campaign
  • Menampilkan Detail Campaign
  • Konfigurasi Router untuk Proses Donasi
  • Membuat Proses Donasi
  • Menampilkan Snap Pay Midtrans
  • Konfigurasi Router untuk Search
  • Membuat Realtime Search

    Deployment

  • Deploy Project Laravel di Shared Hosting (cPanel)
  • Deploy Project Vue Js di Netlify
  • Konfigurasi Notifikasi Handler Midtrans

    Penutup

  • Source Code
  • Kesimpulan

Dapatkan ebook sekarang untuk dapat mengikuti pembelajaran

BENEFIT


Ebook

Souce Code

Private Group Member

Konsultasi Belajar

Update Materi

Kupon Diskon Hosting

Sertifikat

Akses Selamanya

Real Studi Kasus

ULASAN MEMBERS

Izin Request untuk Multi Role(DASHBOARD) dengan fortify dan penggunaan Socialite(RESTAPI) , :D

Izu Tolandona
E-book nya mudah dimengerti :)

Zulkifli Jufri
I am a Learner
Sangat bagus dan menarik

Yudi Purwanto
Newbie :(