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

BEGINNER3 penilaian39 peserta

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 :

  1. Membangun web service Rest API menggunakan Laravel.
  2. Mengintegrasikan Rest API di dalam Nuxt.js.
  3. 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

Cover00.00
Kata Pengantar00.00
License Buku00.00
Tentang Buku00.00

Diagram Alur Aplikasi00.00
Struktur dan Relasi Database00.00
Wirefrime UI Desain Website00.00

Persiapan dan Persyaratan Tools00.00
Membuat Project Baru Laravel Dengan Composer00.00
Membuat Helpers di Laravel00.00
Upgrade Versi Laravel00.00

Koneksi Database di Laravel00.00
Membuat Model dan Migration00.00
Eloquent Relationships00.00
Eloquent Accessors, Mutators & Casting00.00
Membuat Data Seeder User00.00

Apa itu API ?00.00
Apa itu JWT (Json Web Token) ?00.00
Installasi dan Konfigurasi JWT untuk Admin00.00
Membuat Restful API Login Admin00.00
Membuat Restful API Dashboard Admin00.00
Membuat Restful API CRUD Categories00.00
Membuat Restful API CRUD Products00.00
Membuat Restful API Invoices Admin00.00
Membuat Restful API Customers00.00
Membuat Restful API CRUD Sliders00.00
Membuat Restful API CRUD Users00.00

Membuat Restful API Register Customer00.00
Konfigurasi JWT untuk Customer00.00
Membuat Restful API Login Customer00.00
Membuat Restful API Dashboard Customer00.00
Membuat Restful API Invoices Customer00.00
Membuat Restful API Review Product00.00

Membuat Restful API Categories Web00.00
Membuat Restful API Products Web00.00
Membuat Restful API Sliders Web00.00
Installasi dan Konfigurasi Raja Ongkir00.00
Membuat Restful API Raja Ongkir00.00
Membuat Restful API Carts00.00
Installasi dan Konfigurasi Midtrans00.00
Membuat Restful API Checkout00.00
Membuat Notifikasi Handler Payment Gateway00.00

Apa itu Nuxt.js ?00.00
Installasi Nuxt.js00.00
Memahami Struktur Folder di Nuxt.js00.00
Rendering00.00
Target Deployment00.00
Routing00.00
Meta Tags dan SEO00.00
Data Fetching00.00

Berkenalan Dengan Vuex00.00

Membuat Project Baru di Nuxt.js00.00
Kustomisasi Progress Bar di Nuxt.js00.00
Konfigurasi SSR dan Target Deployment00.00
Integrasi Dengan CSS dan JavaScript External (Template Dashboard CoreUI)00.00

Installasi dan Konfigurasi Nuxt Auth00.00
Membuat Middleware Role00.00
Installasi dan Konfigurasi Vue Star Rating00.00
Installasi dan Konfigurasi Chart.js00.00
Installasi CKEDITOR dan Sweet Alert 200.00
Membuat Global Helpers dengan Mixins00.00

Membuat Proses Login Admin00.00
Membuat Layout Admin00.00
Membuat Halaman Dashboard00.00
Konfigurasi Vuex Admin Category00.00
Menampilkan Data Categories00.00
Membuat Proses Insert Data Category00.00
Membuat Proses Edit dan Update Data Category00.00
Membuat Proses Delete Data Category00.00
Konfigurasi Vuex Admin Product00.00
Menampilkan Data Products00.00
Membuat Proses Insert Data Product00.00
Membuat Proses Edit dan Update Data Product00.00
Membuat Proses Delete Data Product00.00
konfigurasi Vuex Admin Invoice00.00
Menampilkan Data Invoices00.00
Menampilkan Detail Data Invoice00.00
Konfigurasi Vuex Admin Customer00.00
Menampilkan Data Customer00.00
Konfigurasi Vuex Admin Slider00.00
Menampilkan Data Sliders00.00
Membuat Proses Insert Data Slider00.00
Membuat Proses Delete Data Slider00.00
Konfigurasi Vuex Admin User00.00
Menampilkan Data Users00.00
Membuat Proses Insert Data User00.00
Membuat Proses Edit dan Update Data User00.00
Membuat Proses Delete Data User00.00
Membuat Proses Delete Data User00.00

Membuat Component Hader dan Footer00.00
Membuat Layout Default00.00
Membuat Proses Register Customer00.00
Membuat Proses Login Customer00.00
Membuat Halaman Dashboard Customer00.00
Konfigurasi Vuex Customer Invoice00.00
Menampilkan Data Invoice Customer00.00
Menampilkan Detail Data Invoice Customer00.00
Menampilkan Snap Payment Midtrans00.00
Membuat Fitur Rating dan Review900.00

Membuat Vuex Web Category00.00
Menampilkan Categories di Header00.00
Membuat Vuex Web Slider00.00
Membuat dan Menampilkan Component Slider00.00
Membuat Vuex Web Product00.00
Menampilkan Products di Homepage00.00
Menampilkan Index Data Products00.00
Menampilkan Index Data Categories00.00
Menampilkan Data Product Berdasarkan Category00.00
Menampilkan Detail Data Product00.00
Membuat Fitur Pencarian Product00.00
Membuat Vuex Web Cart00.00
Membuat Proses Add To Cart00.00
Menampilkan Data Cart di Header00.00
Menampilkan Cart Setelah Login dan Menghapus Cart Setelah Logout00.00
Menampilkan Halaman Cart 900.00
Membuat Fungsi Remove Cart 900.00
Membuat Vuex Web RajaOngkir00.00
Menghitung Biaya Ongkos Kirim 900.00
Membuat Proses Checkout 900.00
Melakukan Pembayaran Dengan Midtrans00.00
Installasi dan Konfigurasi PWA00.00

Deployment Project Laravel di cPanel (Shared Hosting)00.00
Deploy Project Nuxt.js di Vercel (SSR)00.00
Konfigurasi Notifikasi Handler Midtrans00.00

Source Code00.00
Penutup00.00
Penyusun Materi

Prev
Next
Fika Ridaul Maulayya
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

  • Semua
  • Bintang 5
  • Bintang 4
  • Bintang 3
  • Bintang 2
  • Bintang 1
5.0

(3 reviews)

5 Bintang
100%
4 Bintang
0%
3 Bintang
0%
2 Bintang
0%
1 Bintang
0%
ROY ANLIE JONATHAN SIHITE 2019
ROY ANLIE JONATHAN SIHITE 2019
materi yang diberikan sangat mudah dipahami dan untuk di implementasikan menjadi website yang terampil dan keren
Fakhry
Fakhry
Kontennya menarik
Ihksan maulana
Ihksan maulana
materinya bagus cukup detail
;
...
Rp. 399,000
Beli sekali akses selamanya
Beli Sekarang
Beli lewat Roadmap
Sewa kelas dan akses selama 1 bulan
Sewa Sekarang
Yang akan kamu dapatkan :
125 Modul
8 jam durasi
Forum Diskusi Tanya Jawab
Klaim Sertifikat Digital

Kelas Populer Lainnya

Prev
Next