Membangun Website Toko Online Dengan Laravel, Nuxt.js dan Payment Gateway

5.0 (1 rating) 47 members

DISKON 12%
Rp. 351.120 Rp. 399.000

Fika Ridaul Maulayya

Author of This Ebook

wave
wave

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 table menjadi satu kesatuaan. 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 akaan 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 sekala 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 Continue Integration dan Contrinue Development.


DEMO PROJECT :



    Pendahuluan

  • Cover
  • Kata pengantar
  • License Buku
  • Tentang Buku

    Perancangan

  • Diagram Alur Aplikasi
  • Struktur dan Relasi Database
  • Wirefrime UI Desain Website

    Installasi & Persiapan Backend

  • Persiapan dan Persyaratan Tools
  • Membuat Project Baru Laravel Dengan Composer
  • Membuat Helpers di Laravel
  • Upgrade Versi Laravel

    Database

  • Koneksi Database di Laravel
  • Membuat Model dan Migration
  • Eloquent Relationships
  • Eloquent Accessors, Mutators & Casting
  • Membuat Data Seeder User

    RESTful API - Admin

  • Apa itu API ?
  • Apa itu JWT (Json Web Token) ?
  • Installasi dan Konfigurasi JWT untuk Admin
  • Membuat Restful API Login Admin
  • Membuat Restful API Dashboard Admin
  • Membuat Restful API CRUD Categories
  • Membuat Restful API CRUD Products
  • Membuat Restful API Invoices Admin
  • Membuat Restful API Customers
  • Membuat Restful API CRUD Sliders
  • Membuat Restful API CRUD Users

    RESTful API - Customer

  • Membuat Restful API Register Customer
  • Konfigurasi JWT untuk Customer
  • Membuat Restful API Login Customer
  • Membuat Restful API Dashboard Customer
  • Membuat Restful API Invoices Customer
  • Membuat Restful API Review Product

    RESTful API - Web

  • Membuat Restful API Categories Web
  • Membuat Restful API Products Web
  • Membuat Restful API Sliders Web
  • Installasi dan Konfigurasi Raja Ongkir
  • Membuat Restful API Raja Ongkir
  • Membuat Restful API Carts
  • Installasi dan Konfigurasi Midtrans
  • Membuat Restful API Checkout
  • Membuat Restful API Notifikasi Handler Payment Gateway

    Pengenalan Nuxt.js

  • Apa itu Nuxt.js ?
  • Installasi Nuxt.js
  • Memahami Struktur Folder di Nuxt.js
  • Rendering
  • Target Deployment
  • Routing
  • Meta Tags dan SEO
  • Data Fetching

    Pengenalan Vuex

  • Berkenalan Dengan Vuex

    Installasi & Persiapan Frontend

  • Membuat Project Baru di Nuxt.js
  • Kustomisasi Progress Bar di Nuxt.js
  • Konfigurasi SSR dan Target Deployment
  • Integrasi Dengan CSS dan JavaScript External (Template Dashboard CoreUI)

    Installasi & Konfigurasi Module

  • Installasi dan Konfigurasi Nuxt Auth
  • Membuat Middleware Role
  • Installasi dan Konfigurasi Vue Star Rating
  • Installasi dan Konfigurasi Chart.js
  • Installasi CKEDITOR dan Sweet Alert 2
  • Membuat Global Helpers dengan Mixins

    Halaman Admin

  • Membuat Proses Login Admin
  • Membuat Layout Admin
  • Membuat Halaman Dashboard
  • Konfigurasi Vuex Admin Category
  • Menampilkan Data Categories
  • Membuat Proses Insert Data Category
  • Membuat Proses Edit dan Update Data Category
  • Membuat Proses Delete Data Category
  • Konfigurasi Vuex Admin Product
  • Menampilkan Data Products
  • Membuat Proses Insert Data Product
  • Membuat Proses Edit dan Update Data Product
  • Membuat Proses Delete Data Product
  • konfigurasi Vuex Admin Invoice
  • Menampilkan Data Invoices
  • Menampilkan Detail Data Invoice
  • Konfigurasi Vuex Admin Customer
  • Menampilkan Data Customer
  • Konfigurasi Vuex Admin Slider
  • Menampilkan Data Sliders
  • Membuat Proses Insert Data Slider
  • Membuat Proses Delete Data Slider
  • Konfigurasi Vuex Admin User
  • Menampilkan Data Users
  • Membuat Proses Insert Data User
  • Membuat Proses Edit dan Update Data User
  • Membuat Proses Delete Data User

    Halaman Customer

  • Membuat Component Hader dan Footer
  • Membuat Layout Default
  • Membuat Proses Register Customer
  • Membuat Proses Login Customer
  • Membuat Halaman Dashboard Customer
  • Konfigurasi Vuex Customer Invoice
  • Menampilkan Data Invoice Customer
  • Menampilkan Detail Data Invoice Customer
  • Menampilkan Snap Payment Midtrans
  • Membuat Fitur Rating dan Review

    Halaman Web

  • Membuat Vuex Web Category
  • Menampilkan Categories di Header
  • Membuat Vuex Web Slider
  • Membuat dan Menampilkan Component Slider
  • Membuat Vuex Web Product
  • Menampilkan Products di Homepage
  • Menampilkan Index Data Products
  • Menampilkan Index Data Categories
  • Menampilkan Data Product Berdasarkan Category
  • Menampilkan Detail Data Product
  • Membuat Fitur Pencarian Product
  • Membuat Vuex Web Cart
  • Membuat Proses Add To Cart
  • Menampilkan Data Cart di Header
  • Menampilkan Cart Setelah Login dan Menghapus Cart Setelah Logout
  • Menampilkan Halaman Cart
  • Membuat Fungsi Remove Cart
  • Membuat Vuex Web RajaOngkir
  • Menghitung Biaya Ongkos Kirim
  • Membuat Proses Checkout
  • Melakukan Pembayaran Dengan Midtrans
  • Installasi dan Konfigurasi PWA

    Deployment

  • Deployment Project Laravel di cPanel (Shared Hosting)
  • Deployment Project Nuxt.js di Vercel (SSR)
  • Konfigurasi Notifikasi Handler Midtrans

    Penutup

  • Source Code
  • Penutup

Dapatkan ebook sekarang untuk dapat mengikuti pembelajaran

BENEFIT


Ebook

Souce Code

Private Group Member

Konsultasi Belajar

Update Materi

Kupon Diskon Hosting

Sertifikat

Akses Selamanya

Real Studi Kasus

ULASAN MEMBERS

Luar biasa e-book nya, banyak metode baru yg diterapkan dan menurut pengamatan saya dari beberapa instruktur yang saya temui, implementasi di sin jauhi lebih simpel dan lebih mudah untuk di pahami

Mochammad Agus Idris
Belajar lebih baik