Membangun Toko Online Dengan Laravel, Vue Js dan Payment Gateway
Di dalam kelas ini kita akan belajar bersama-sama bagaimana cara membuat project Toko Online dari 0 sampai online menggunakan Laravel, Vue.js dan Payment Gateway. Catatan : Update Laravel 10
Tentang Kelas
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 : BackEnd : http://store.appdev.my.id/ FrontEnd : https://apple-store-vue.netlify.app/
Daftar Materi
Cover | 00.00 | |
Kata Pengantar | 00.00 | |
License | 00.00 | |
Tentang Buku | 00.00 |
Persiapan | 00.00 | |
Membuat Project Laravel | 00.00 | |
Upgrade Versi Laravel | 00.00 | |
Membuat Helpers | 00.00 |
Struktur Database | 00.00 | |
Koneksi Database | 00.00 | |
Membuat Model dan Migration | 00.00 | |
Eloquent Relationships | 00.00 | |
Membuat Data Seeder User | 00.00 |
Tentang Laravel Fortify | 00.00 | |
Installasi dan Konfigurasi Laravel Fortify | 00.00 | |
Membuat Proses Login | 00.00 | |
Membuat Forgot dan Reset Password | 00.00 |
Halaman Dashboard | 00.00 | |
Membuat CRUD Category | 00.00 | |
Membuat CRUD Product | 00.00 | |
Membuat Halaman Manajemen Order | 00.00 | |
Menampilkan Data Customers | 00.00 | |
Membuat CRUD Sliders | 00.00 | |
Profile User dan Two Factor Authentication | 00.00 | |
Membuat CRUD Users | 00.00 |
Tentang JWT (Json Web Token) | 00.00 | |
Installasi dan Konfigurasi JWT | 00.00 | |
Membuat RESTful API Authentication Customer | 00.00 | |
Membuat RESTful API Data Order Customer | 00.00 | |
Membuat RESTful API Data Category | 00.00 | |
Membuat RESTful API Data Product | 00.00 | |
Membuat RESTful API Cart | 00.00 | |
Installasi dan Konfigurasi Raja Ongkir | 00.00 | |
Membuat RESTful API Raja Ongkir | 00.00 | |
Installasi dan Konfigurasi Midtrans | 00.00 | |
Membuat RESTful API Checkout dan Payment Gateway | 00.00 | |
Membuat RESTful API Data Slider | 00.00 |
Berkenalan Dengan Vue Js | 00.00 | |
Composition API dan Reactifity API di Vue Js | 00.00 | |
Lifecycle Hooks di Vue Js | 00.00 | |
Berkenalan Dengan Vuex | 00.00 | |
Membuat Aplikasi Dengan Vuex | 00.00 |
Installasi dan Persiapan Front-End | 00.00 | |
Membuat Project Vue Js | 00.00 | |
Installasi Vue Router, Vuex dan Axios | 00.00 | |
Konfigurasi Global Function Dengan Mixins | 00.00 | |
Templating Dengan Bootstrap | 00.00 | |
Membuat Component Header dan Footer | 00.00 |
Konfigurasi Global API Endpoint. | 00.00 | |
Konfigurasi Vue Router untuk Authentication | 00.00 | |
Konfigurasi Module Auth Vuex | 00.00 | |
Membuat Proses Register Customer | 00.00 | |
Membuat Halaman Dashboard Customer | 00.00 | |
Membuat Proses Logout Customer | 00.00 | |
Membuat Proses Login Customer | 00.00 | |
Konfigurasi Vue Router untuk Order | 00.00 | |
Konfigurasi Module Order Vuex | 00.00 | |
Menampilkan Data Order Customer | 00.00 |
Menampilkan Category dan Slider di Halaman Homepage | 00.00 | |
Menampilkan Product di Halaman Homepage | 00.00 | |
Menampilkan Kategori | 00.00 | |
Menampilkan Product By Kategori | 00.00 | |
Membuat Halaman Detail Product | 00.00 | |
Membuat Fitur Add to Cart | 00.00 | |
Menampilkan Data Cart di Header | 00.00 | |
Menampilkan Halaman Cart | 00.00 | |
Membuat Fungsi Remove Cart | 00.00 | |
Menghitung Biaya Ongkos Kirim | 00.00 | |
Membuat Proses Checkout dan Payment Gateway | 00.00 |
Deploy Project Laravel di Shared Hosting (cPanel) | 00.00 | |
Deploy Project Vue Js di Netlify | 00.00 | |
Konfigurasi Notifikasi Handler Midtrans | 00.00 |
Source Code | 00.00 | |
Kesimpulan | 00.00 |
Penyusun Materi
Testimoni Oleh Siswa
(1 reviews)