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

5.0 (12 ulasan) 218 members

DISKON 13%
Rp. 350.000 Rp. 400.000

TENTANG

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

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
  • 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 Vite
  • 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

TOOLS

Laravel

The PHP Framework for Web Artisans

Vue.js

JavaScript Framework

Tailwind CSS

A utility-first CSS framework

SCREENSHOTS


Homepage

Detail Campaign

Login

BENEFITS


Ebook

Souce Code

Private Group Member

Konsultasi Belajar

Update Materi

Kupon Diskon Hosting

Sertifikat

Akses Selamanya

Real Studi Kasus

ULASAN MEMBERS

Mohammad Ricky Sanjaya at SantriKoding

Hi! I'm Sanjaya Back End Developer. You can discuss wit...


Kualitas materi is very good & mentor nya siap membantu

Rafael Nuansa Ramadhon at SantriKoding

I am currently studying at Santri Koding as a step towa...


Mantaapp, ga akan pernah rugi, kita beli ebook untuk pengembangan diri


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

Muhammad Zakir Ramadhan at SantriKoding

Backend Engineer, Otaku, Modern stack enthusiast


Sangat mudah di pahami

Egi Alfarizi at SantriKoding

Saya Egi Alfarizi, Panggilan John/Egi. Pendidikan terak...


MANTAP SANGAT JELAS


Alhamdulillah dibimbing step by step, mentornya sabar banget menghadapi peserta newbie kaya saya. Jazakallahu khairan katsira, insyaa Allah ilmunya bermanfaat.

Mutiiya Permatasari at SantriKoding

semoga bisa menjadikan website ini bisa berguna


Sangat bagus!!