Membangun Website Toko Online Menggunakan Laravel, Nuxt.js dan Payment Gateway
Kelas ini akan mengajarkan kita semua bagaimana cara menjadi seorang Full-Stack Web Developer dengan cara membangun sebuah website toko online menggunakan Laravel sebagai backend dan Nuxt.js sebagai frontend. Dimana Laravel akan berperan membuat layanan web service berupa Rest API. Sedangkan Nuxt.js akan berperan untuk mengelola dan menggunakan Rest API tersebut. Catatan : Update Laravel 9
Tentang Kelas
Buku ini akan mengajarkan kita semua bagaimana cara menjadi seorang Full-Stack Web Developer dengan cara membangun sebuah website toko online menggunakan Laravel sebagai backend dan Nuxt.js sebagai frontend. Dimana Laravel akan berperan membuat layanan web service berupa Rest API. Sedangkan Nuxt.js akan berperan untuk mengelola dan menggunakan Rest API tersebut.
Kita juga akan belajar mengimplementasikan layanan dari RajaOngkir untuk mendapatkan biaya ongkos kirim secara realtime dan akurat. Dan juga kita akan belajar tentang integrasi dengan layanan Payment Gateway (Midtrans), fungsinya untuk melakukan pembayaran secara otomatis di dalam website yang kita buat.
Di dalam buku ini akan dibagi menjadi 3 bab utama, yaitu :
- Membangun web service Rest API menggunakan Laravel.
- Mengintegrasikan Rest API di dalam Nuxt.js.
- Deployment ke tahap production (online).
Di bab pertama, kita akan belajar banyak hal di dalam Laravel, seperti membuat project baru menggunakan Composer. Membuat Relationships untuk menghubungkan beberapa tabel menjadi satu kesatuan. Memanipulasi data menggunakan Accessor, Mutator dan Casting. Implementasi JWT (Json Web Token) untuk proses otentikasi di Rest API. Integrasi RajaOngkir dan Payment Gateway.
Di bab kedua, Kita akan belajar membuat project Nuxt.js baru. Membuat proses otentikasi. Penerapan middleware. Kustomisasi middleware untuk multiple level user. Menampilkan statistik dan grafik penjualan. Menampilkan data dengan teknik SSR (server side rendering), sehingga website tersebut baik disisi SEO (search engine optimization).
Di dalam Nuxt.js kita juga akan belajar bagaimana melakukan integrasi dengan external template dashboard. Dan kita akan integrasikan juga menggunakan Bootstrap Vue agar kita dapat menggunakan beberapa component Bootstrap untuk mempermudah dalam pengembangan project skala besar.
Di bab terakhir, setelah semua project berhasil diselesaikan maka akan dilanjutkan belajar bagaimana cara melakukan proses deployment. Untuk Laravel akan di deploy ke dalam cPanel (shared hosting) dan untuk Nuxt.js akan di deploy ke dalam Vercel dengan teknik SSR dan menerapkan konsep CI/CD atau biasa disebut dengan Continuous Integration dan Continuous Development.
Demo Project : BackEnd : https://nuxt-ecommerce-ssr.vercel.app/admin/login FrontEnd : https://nuxt-ecommerce-ssr.vercel.app/
Daftar Materi
| Cover | 00.00 | |
| Kata Pengantar | 00.00 | |
| License Buku | 00.00 | |
| Tentang Buku | 00.00 |
| Diagram Alur Aplikasi | 00.00 | |
| Struktur dan Relasi Database | 00.00 | |
| Wirefrime UI Desain Website | 00.00 |
| Persiapan dan Persyaratan Tools | 00.00 | |
| Membuat Project Baru Laravel Dengan Composer | 00.00 | |
| Membuat Helpers di Laravel | 00.00 | |
| Upgrade Versi Laravel | 00.00 |
| Koneksi Database di Laravel | 00.00 | |
| Membuat Model dan Migration | 00.00 | |
| Eloquent Relationships | 00.00 | |
| Eloquent Accessors, Mutators & Casting | 00.00 | |
| Membuat Data Seeder User | 00.00 |
| Apa itu API ? | 00.00 | |
| Apa itu JWT (Json Web Token) ? | 00.00 | |
| Installasi dan Konfigurasi JWT untuk Admin | 00.00 | |
| Membuat Restful API Login Admin | 00.00 | |
| Membuat Restful API Dashboard Admin | 00.00 | |
| Membuat Restful API CRUD Categories | 00.00 | |
| Membuat Restful API CRUD Products | 00.00 | |
| Membuat Restful API Invoices Admin | 00.00 | |
| Membuat Restful API Customers | 00.00 | |
| Membuat Restful API CRUD Sliders | 00.00 | |
| Membuat Restful API CRUD Users | 00.00 |
| Membuat Restful API Register Customer | 00.00 | |
| Konfigurasi JWT untuk Customer | 00.00 | |
| Membuat Restful API Login Customer | 00.00 | |
| Membuat Restful API Dashboard Customer | 00.00 | |
| Membuat Restful API Invoices Customer | 00.00 | |
| Membuat Restful API Review Product | 00.00 |
| Membuat Restful API Categories Web | 00.00 | |
| Membuat Restful API Products Web | 00.00 | |
| Membuat Restful API Sliders Web | 00.00 | |
| Installasi dan Konfigurasi Raja Ongkir | 00.00 | |
| Membuat Restful API Raja Ongkir | 00.00 | |
| Membuat Restful API Carts | 00.00 | |
| Installasi dan Konfigurasi Midtrans | 00.00 | |
| Membuat Restful API Checkout | 00.00 | |
| Membuat Notifikasi Handler Payment Gateway | 00.00 |
| Apa itu Nuxt.js ? | 00.00 | |
| Installasi Nuxt.js | 00.00 | |
| Memahami Struktur Folder di Nuxt.js | 00.00 | |
| Rendering | 00.00 | |
| Target Deployment | 00.00 | |
| Routing | 00.00 | |
| Meta Tags dan SEO | 00.00 | |
| Data Fetching | 00.00 |
| Berkenalan Dengan Vuex | 00.00 |
| Membuat Project Baru di Nuxt.js | 00.00 | |
| Kustomisasi Progress Bar di Nuxt.js | 00.00 | |
| Konfigurasi SSR dan Target Deployment | 00.00 | |
| Integrasi Dengan CSS dan JavaScript External (Template Dashboard CoreUI) | 00.00 |
| Installasi dan Konfigurasi Nuxt Auth | 00.00 | |
| Membuat Middleware Role | 00.00 | |
| Installasi dan Konfigurasi Vue Star Rating | 00.00 | |
| Installasi dan Konfigurasi Chart.js | 00.00 | |
| Installasi CKEDITOR dan Sweet Alert 2 | 00.00 | |
| Membuat Global Helpers dengan Mixins | 00.00 |
| Membuat Proses Login Admin | 00.00 | |
| Membuat Layout Admin | 00.00 | |
| Membuat Halaman Dashboard | 00.00 | |
| Konfigurasi Vuex Admin Category | 00.00 | |
| Menampilkan Data Categories | 00.00 | |
| Membuat Proses Insert Data Category | 00.00 | |
| Membuat Proses Edit dan Update Data Category | 00.00 | |
| Membuat Proses Delete Data Category | 00.00 | |
| Konfigurasi Vuex Admin Product | 00.00 | |
| Menampilkan Data Products | 00.00 | |
| Membuat Proses Insert Data Product | 00.00 | |
| Membuat Proses Edit dan Update Data Product | 00.00 | |
| Membuat Proses Delete Data Product | 00.00 | |
| konfigurasi Vuex Admin Invoice | 00.00 | |
| Menampilkan Data Invoices | 00.00 | |
| Menampilkan Detail Data Invoice | 00.00 | |
| Konfigurasi Vuex Admin Customer | 00.00 | |
| Menampilkan Data Customer | 00.00 | |
| Konfigurasi Vuex Admin Slider | 00.00 | |
| Menampilkan Data Sliders | 00.00 | |
| Membuat Proses Insert Data Slider | 00.00 | |
| Membuat Proses Delete Data Slider | 00.00 | |
| Konfigurasi Vuex Admin User | 00.00 | |
| Menampilkan Data Users | 00.00 | |
| Membuat Proses Insert Data User | 00.00 | |
| Membuat Proses Edit dan Update Data User | 00.00 | |
| Membuat Proses Delete Data User | 00.00 | |
| Membuat Proses Delete Data User | 00.00 |
| Membuat Component Hader dan Footer | 00.00 | |
| Membuat Layout Default | 00.00 | |
| Membuat Proses Register Customer | 00.00 | |
| Membuat Proses Login Customer | 00.00 | |
| Membuat Halaman Dashboard Customer | 00.00 | |
| Konfigurasi Vuex Customer Invoice | 00.00 | |
| Menampilkan Data Invoice Customer | 00.00 | |
| Menampilkan Detail Data Invoice Customer | 00.00 | |
| Menampilkan Snap Payment Midtrans | 00.00 | |
| Membuat Fitur Rating dan Review9 | 00.00 |
| Membuat Vuex Web Category | 00.00 | |
| Menampilkan Categories di Header | 00.00 | |
| Membuat Vuex Web Slider | 00.00 | |
| Membuat dan Menampilkan Component Slider | 00.00 | |
| Membuat Vuex Web Product | 00.00 | |
| Menampilkan Products di Homepage | 00.00 | |
| Menampilkan Index Data Products | 00.00 | |
| Menampilkan Index Data Categories | 00.00 | |
| Menampilkan Data Product Berdasarkan Category | 00.00 | |
| Menampilkan Detail Data Product | 00.00 | |
| Membuat Fitur Pencarian Product | 00.00 | |
| Membuat Vuex Web Cart | 00.00 | |
| Membuat Proses Add To Cart | 00.00 | |
| Menampilkan Data Cart di Header | 00.00 | |
| Menampilkan Cart Setelah Login dan Menghapus Cart Setelah Logout | 00.00 | |
| Menampilkan Halaman Cart 9 | 00.00 | |
| Membuat Fungsi Remove Cart 9 | 00.00 | |
| Membuat Vuex Web RajaOngkir | 00.00 | |
| Menghitung Biaya Ongkos Kirim 9 | 00.00 | |
| Membuat Proses Checkout 9 | 00.00 | |
| Melakukan Pembayaran Dengan Midtrans | 00.00 | |
| Installasi dan Konfigurasi PWA | 00.00 |
| Deployment Project Laravel di cPanel (Shared Hosting) | 00.00 | |
| Deploy Project Nuxt.js di Vercel (SSR) | 00.00 | |
| Konfigurasi Notifikasi Handler Midtrans | 00.00 |
| Source Code | 00.00 | |
| Penutup | 00.00 |
Penyusun Materi
Fika Ridaul Maulayya
Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share everything i know with Article, Screencasts and E-Books at SantriKoding.com
Testimoni Oleh Siswa
(3 reviews)
ROY ANLIE JONATHAN SIHITE 2019
materi yang diberikan sangat mudah dipahami dan untuk di implementasikan menjadi website yang terampil dan keren
Muhammad Fakhry Burhanuddin
Kontennya menarik
Ihksan maulana
materinya bagus cukup detail