Membangun Toko Online Dengan Laravel, Vue Js dan Payment Gateway

5.0 (40 ulasan) 338 members

DISKON 13%

Rp. 350.000

Rp. 400.000


TENTANG

Di dalam buku ini kita akan belajar bersama-sama bagaimana cara membuat project Toko Online dari 0 sampai online. Dimana materinya akan dibagi menjadi 5 bagian utama, yaitu bagaimana cara membangun halaman admin menggunakan Laravel, membuat RESTful API (JWT), membangun halaman Frontend menggunakan Vue Js, mengintegrasikan dengan Raja Ongkir untuk mendapatkan biaya ongkos kirim secara otomatis dan yang terakhir adalah mengimplementasikan Payment Gateway menggunakan Midtrans. Payment Gateway akan kita manfaatkan untuk proses pembayaran dari website yang kita bangun, sehingga bisa menjadi otomatis dan lebih mudah. Dengan menerapkan Payment Gateway, kita bisa melakukan pembayaran melalui banyak cara, diantaranya seperti:

  • Credit Card
  • GoPay
  • Alfamart
  • Indomaret
  • Virtual Account
  • Bank Transfer
  • Dan lain-lain.

Keuntungan menggunakan Payment Gateway kita tidak perlu manual melakukan verifikasi pembayaran yang dilakukan oleh customer, karena semua sudah otomatis di handle dari Payment Gateway tersebut.

Di dalam halaman admin atau Backend kita semua akan fokus mempelajari bagaimana cara membuat authentication beserta Two Factor Auth, CRUD category, products dan manajemen data order masuk. Kita juga akan membuat statistik pendapatan.

Kemudian setelah kita selesai membangun halaman Admin, maka sekarang kita akan lanjutkan untuk proses membangun RESTful API. RESTful API akan kita gunakan untuk proses bertukar data antara Backend (Laravel) dan Frontend (Vue Js).

Di sini kita akan belajar membuat RESTful API untuk proses Authentication Customer menggunakan JWT atau JSON Web Token, seperti proses Register dan Login. Kita juga akan memanfaatkan RESTful API untuk membuat proses Add to Cart, Checkout, Payment, Rajaongkir dan semua service yang dilakukan di halaman Frontend. Di dalam Vue Js kita akan menggunakan Vuex sebagai state management yang terpusat dan Composition API untuk kode yang bisa digunakan berulang-ulang di dalam component lain (reusable).

Setelah project Toko Online yang kita bangun selesai, kita juga akan belajar bagaimana cara untuk melakukan proses deployment project tersebut ke Shared Hosting (Laravel) dan juga Netlify (Vue Js).


DEMO PROJECT :

DAFTAR ISI

    Pendahuluan
  • Cover
  • Kata Pengantar
  • License
  • Tentang Buku
    Installasi & Persiapan BackEnd
  • Persiapan
  • Membuat Project Laravel
  • Upgrade Versi Laravel
  • Membuat Helpers
    Database
  • Struktur Database
  • Koneksi Database
  • Membuat Model dan Migration
  • Eloquent Relationships
  • Membuat Data Seeder User
    Authentication
  • Tentang Laravel Fortify
  • Installasi dan Konfigurasi Laravel Fortify
  • Membuat Proses Login
  • Membuat Forgot dan Reset Password
    Halaman BackEnd
  • Halaman Dashboard
  • Membuat CRUD Category
  • Membuat CRUD Product
  • Membuat Halaman Manajemen Order
  • Menampilkan Data Customer
  • Membuat CRUD Slider
  • Profile User dan Two Factor Authentication
  • Membuat CRUD Users
    RESTful API
  • Tentang JWT (Json Web Token)
  • Installasi dan Konfigurasi JWT
  • Membuat RESTful API Authentication Customer
  • Membuat RESTful API Data Order Customer
  • Membuat RESTful API Data Category
  • Membuat RESTful API Data Product
  • Membuat RESTful API Cart
  • Installasi dan Konfigurasi Raja Ongkir
  • Membuat RESTful API Raja Ongkir
  • Installasi dan Konfigurasi Midtrans
  • Membuat RESTful API Checkout dan Payment Gateway
  • Membuat RESTful API Data Slider
    Pengenalan Vue Js dan Vuex
  • Berkenalan Dengan Vue Js
  • Composition API dan Reactivity API di Vue Js
  • Lifecycle Hooks di Vue Js
  • Berkenalan Dengan Vuex
  • Membuat Aplikasi Dengan Vuex
    Installasi & Persiapan FrontEnd
  • Installasi dan Persiapan Front-End
  • Membuat Project Vue Js
  • Installasi Vue Router, Vuex, Axios
  • Konfigurasi Global Function Dengan Mixins
  • Templating Dengan Bootstrap
  • Membuat Component Header dan Footer
    Halaman Customer
  • Konfigurasi Global API Endpoint
  • Konfigurasi Vue Router untuk Authentication
  • Konfigurasi Module Auth Vuex
  • Membuat Proses Register Customer
  • Membuat Halaman Dashboard Customer
  • Membuat Proses Logout Customer
  • Membuat Proses Login Customer
  • Konfigurasi Vue Router untuk Order
  • Konfigurasi Module Order Vuex
  • Menampilkan Data Order Customer
    Halaman FrontEnd
  • Menampilkan Category dan Slider di Halaman Homepage
  • Menampilkan Product di Halaman Homepage
  • Menampilkan Kategori
  • Menampilkan Product By Kategori
  • Membuat Halaman Detail Product
  • Membuat Fitur Add to Cart
  • Menampilkan Data Cart di Header
  • Menampilkan Halaman Cart
  • Membuat Fungsi Remove Cart
  • Menghitung Biaya Ongkos Kirim
  • Membuat Proses Checkout dan Payment Gateway
    Deployment
  • Deploy Project Laravel di Shared Hosting (Cpanel)
  • Deploy Project Vue Js di Netlify
  • Konfigurasi Notifikasi Handler Midtrans
    Penutup
  • Source Code
  • Kesimpulan

TOOLS

Laravel

The PHP Framework for Web Artisans

Vue.js

JavaScript Framework

Midtrans

Payment Gateway

SCREENSHOTS


Homepage

Product List

Cart / Checkout

BENEFITS


Ebook

Souce Code

Private Group Member

Konsultasi Belajar

Update Materi

Kupon Diskon Hosting

Sertifikat

Akses Selamanya

Real Studi Kasus

DISUSUN OLEH

Fika Ridaul Maulayya

Full-Stack Developer, Content Creator and CO-Founder SantriKoding.com

ULASAN MEMBERS

Yasin Yusuf at SantriKoding

saya adalah aku


Urutan belajarnya sangat taratur cocok untuk beginer, respon di grub juga sangat bagus, semua pertanyaan bisa terjawab oleh instruktur. semoga santri koding makin maju dan memajukan. Terimakasih santrikoding.com

Bambang Sutejo at SantriKoding

Kang Ngopi (Tukang Ngoding Pinggiran)


Mantap.... Terimakasih santrikoding.com .

Yudi Purwanto at SantriKoding

Backend Dev


Terima kasih sudah memberikan ilmu ke kami guru


admin fast response untuk konsultasi tidak lepas tanggung jawab, bisa tanya2 lewat grup telegram jika ada kendala, cuma minta dilengkapi aja materinya seperti check token dan refresh token jwtnya, karena bagi yang baru belajar menggunakan token jwt agak membingungkan. selebihnya materi sudah oke, jika sudah ada tambahan materinya dan ulasan bisa d edit nanti dilengkapi bintangnya.