Logo
© 2019 - 2026 SantriKoding.
Menengah

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

5.0 (16 ulasan)
211 members
DISKON 7%
Rp. 400.000
Rp. 372.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 :

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
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)
Deploy Project Nuxt.js di Vercel (SSR)
Konfigurasi Notifikasi Handler Midtrans
Penutup
Source Code
Penutup

TOOLS

Tools yang digunakan dalam course ini

Laravel
Laravel

The PHP Framework for Web Artisans

See More
Nuxt.js
Nuxt.js

Vue.js Framework

See More
Midtrans
Midtrans

Payment Gateway

See More

SCREENSHOTS

Screenshot hasil projek dari course ini

Homepage
Homepage
Detail Product
Detail Product
Dashboard
Dashboard

BENEFITS

Manfaat yang akan Anda dapatkan dari course ini


Ebook

Source Code

Private Group Member

Konsultasi Belajar

Update Materi

Kupon Diskon Hosting

Sertifikat

Akses Selamanya

Real Studi Kasus

DISUSUN OLEH

Tim expert yang menyusun course ini

Fika Ridaul Maulayya
Fika Ridaul Maulayya
PREMIUM MEMBER

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


ULASAN MEMBERS

Apa kata mereka tentang course ini

Muhammad Kuswari

I'm Frontend Developer with 3 Years of experi...

"Materi mudah di pahami"

Muhammad Tarmidzi Bariq

Saya merupakan Mahasiwa dari Universitas Guna...

"pembelajaran dengan sistem ebook seperti ini dapat mudah untuk saya mengerti dengan baik. Terimakasih saya dapat memahami penggunaan dalam laravel, nuxt js, serta penerapan API yang diintegrasikan ke sisi front end."

Nandi

I am a passionate developer with experience i...

"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."

Muhammad Davi

Freelance Web Developer

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

dina

saat ini, aku berkedudukan sebagai school adm...

"sangat membantu meningkatkan skill"

Muhammad Jaya Saputra

No bio available

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

SUMPENA ADI PUTRA

“Bila kau tak tahan lelahnya belajar, maka ka...

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

Rizal Amin Natasolusi

No bio available

"sangat bermanfaat dan sangat membantu bagi saya yg masih pemula"

Dedi Handoko

Saya kuliah dan bekerja di bidang IT khususny...

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

Murtado

Saya Murtado, saya mempunyai minat belajar da...

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

Anon nymous

Saya adalah seorang programmer pemula

"penjelasannya bagus dan mudah dimengerti"

Mochammad Agus Idris

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"

Butuh Bantuan?