Logo
© 2019 - 2026 SantriKoding.
All Levels

Membangun Toko Online Dengan Laravel, Vue Js dan Payment Gateway

5.0 (43 ulasan)
339 members
DISKON 13%
Rp. 400.000
Rp. 350.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
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

Yazid Z

Developer awam

"Materinya bagus dan up to date, cocok untuk yang ingin memulai menjadi full stack developer"

Arif Setyo Wibowo

Iam a programmer

"masya Allah sejauh ini , ini alhamdulillah metode belajar yang cocok buat saya. terimakasih, semoga berkah sukses jaya selalu. barkallahufiikum"

Yusri

No bio available

"penyampaian materi mudah dipahami dan friendly utk pemula, saya belajar statement manajemen vue dan saya akhirnya paham dari pada hanya menonton video tutorial"

Wirangga Bernandi Nyarong

Saya seorang IT Application Developer

"Modul sangat baik dan sangat bermanfaat untuk menambah pengetahuan, wawasan, dan portofolio"

Eka Bagus Fernadi

I am a student

"Materi sangat bermanfaat dan mudah dimengerti"

Tito Candra

Saya Web Developer/Fullstack Developer Dari S...

"Buku sangat bagus dan mudah dipahami. Terimakasih"

Hari Priswanto

Business Analyst, Full Stack Developer

"luar biasa sih ini.. detail banget materi nya,. dan support nya full.. private via chat telegram.. recomended banget pokok nya."

Indra Mustafa

Saya adalah seorang profesional yang penuh se...

"bermanfaat dan menambah pengetahuan"

"Jazakallah khairan atas materinya yg struktur dan jelas cepat dimengerti, santrikoding terbaik sukses selalu"

Riki Krismawan

Orang yang suka meraba komputer dan menghisap...

"Ilmu. yang sangat bermanfaat untuk saya. Terimakasih mas Fika"

Ega Alifya Firnando

No bio available

"penjelasannya terstruktur, codenya juga rapi, dan mudah dipahami"

Butuh Bantuan?