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

5.0 (13 ulasan) 206 members

DISKON 7%
Rp. 372.000 Rp. 400.000

TENTANG

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 :

DISUSUN OLEH

Fika Ridaul Maulayya

Full-Stack Developer, Content Creator and CO-Founder SantriKoding.com

DAFTAR ISI

    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

TOOLS

Laravel

The PHP Framework for Web Artisans

Nuxt.js

Vue.js Framework

Midtrans

Payment Gateway

SCREENSHOTS


Homepage

Detail Product

Dashboard

BENEFITS


Ebook

Souce Code

Private Group Member

Konsultasi Belajar

Update Materi

Kupon Diskon Hosting

Sertifikat

Akses Selamanya

Real Studi Kasus

ULASAN MEMBERS

Mochammad Agus Idris at SantriKoding

Belajar lebih baik


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

Murtado at SantriKoding

Saya Murtado, saya mempunyai minat belajar dan menyukai...


Teruslah Membaca walaupun belum memahaminya. Terimakasih kepada Santrikoding telah mengamalkan ilmunya. Berkat Santrikoding alhamdulillah pengetahuan saya bertambah, khususnya di ilmu pemrograman web.

SUMPENA ADI PUTRA at SantriKoding

“Bila kau tak tahan lelahnya belajar, maka kau harus ta...


Alhamdulillah, ebooknya sangat baik untuk pembelajaran dan pengalaman dapat bertambah setelah menggunakan ebook ini

Anon nymous at SantriKoding

Saya adalah seorang programmer pemula


penjelasannya bagus dan mudah dimengerti

Muhammad Davi at SantriKoding

Freelance Web Developer


materi sudah lumayan bagus, semoga terus diupdate sesuai perkembangan teknologi sekarang.

Dedi Handoko at SantriKoding

Saya kuliah dan bekerja di bidang IT khususnya pengemba...


bukunya keren dan dijelaskan detail dari dasar2 dari awal dengan contoh2 detail,thanks


sangat bermanfaat dan sangat membantu bagi saya yg masih pemula

Elnandi Nur at SantriKoding

I am a passionate developer with experience in various...


Bagian yang paling menonjol dari kursus ini adalah integrasi payment gateway, yang memungkinkan untuk mengimplementasikan berbagai metode pembayaran dengan mudah dan aman. Instruksi yang jelas, contoh yang relevan, dan pendekatan pembelajaran berbasis proyek menjadikan kursus ini sangat bermanfaat. Baik Anda seorang developer yang berpengalaman atau pemula yang ingin mendalami full-stack development, kursus ini memberikan pengetahuan dan keterampilan yang diperlukan untuk membangun aplikasi e-commerce yang profesional.


Ebooknya keren terus kalo kalian kurang paham sama materianya bisa dibantu langsung sama mas Fika, keren banget pokoknya