Logo
© 2019 - 2026 SantriKoding.
All Levels

Membangun Toko Online Dengan Laravel, Vue Js dan Payment Gateway

5.0 (43 ulasan)
339 members
DISKON 90%
Rp. 990.000
Rp. 103.950

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
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 & 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

Tools yang digunakan dalam course ini

Laravel
Laravel

The PHP Framework for Web Artisans

See More
Vue.js
Vue.js

JavaScript Framework

See More
Midtrans
Midtrans

Payment Gateway

See More

SCREENSHOTS

Screenshot hasil projek dari course ini

Homepage
Homepage
Product List
Product List
Cart / Checkout
Cart / Checkout

BENEFITS

Manfaat yang akan Anda dapatkan dari course ini


Ebook

Source Code

Private Group Member

Konsultasi Belajar

Update Materi

Kupon Diskon Hosting

Sertifikat

Akses Selamanya

Real Studi Kasus

DISUSUN OLEH

Tim expert yang menyusun course ini

Fika Ridaul Maulayya
Fika Ridaul Maulayya
PREMIUM MEMBER

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


ULASAN MEMBERS

Apa kata mereka tentang course ini

adityo

No bio available

"semangat mas fika, sukses selalu, mantab pokoknya"

Adhitya Rangga Putra

No bio available

"materi nya jelas dan penjelasan nya jelas sekali. saya sangat merekomendasikan ke teman teman"

Iskandar Zulkarnain

my name is iskandar

"materi mudah difahami dengan bahasa sederhana"

Yasin Yusuf

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

Kang Ngopi (Tukang Ngoding Pinggiran)

"Mantap.... Terimakasih santrikoding.com ."

Yudi Purwanto

Backend Dev

"Terima kasih sudah memberikan ilmu ke kami guru"

Budiyanto Restiawan

No bio available

"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."

Butuh Bantuan?