Tahap akhir Toko Kue! Pelajari cara membuat form checkout sederhana dengan controlled components di React/Next.js, menangani submit, dan melakukan navigasi programatik ke halaman terima kasih.
17m bacaanKuis WajibMicro Badge Lesson
"Bayar" Kue Enakmu: Bikin Form Checkout & Halaman Terima Kasih!
Toko Kue Online kita udah hampir jadi! Pengunjung udah bisa liat produk, detail produk, dan masukin kue ke keranjang belanja. Sekarang, langkah terakhir sebelum mereka (pura-puranya) bisa nikmatin kuenya adalah proses Checkout.
Di bagian ini, kita bakal:
Bikin halaman Checkout yang isinya form sederhana buat pengguna masukin data (nama, alamat, email). Kita bakal pake konsep Controlled Components lagi.
Nanganin submit form checkout. Karena ini contoh dasar, kita gak bakal proses pembayaran beneran ya. Cukup nampilin pesan sukses dan ngosongin keranjang.
Bikin halaman "Terima Kasih" yang ditampilin setelah checkout berhasil, pake navigasi programatik.
Langkah 1: Membuat Halaman Checkout (src/app/checkout/page.tsx)
Di dalam src/app/, bikin folder baru checkout.
Di dalam src/app/checkout/, bikin file page.tsx.
File src/app/checkout/page.tsx:
tsx
// src/app/checkout/page.tsx"use client"; // Karena kita akan menggunakan form dan stateimport React, { useState, FormEvent } from 'react';import Link from 'next/link';import { useRouter } from 'next/navigation'; // Untuk navigasi programatikimport { useCart } from '@/context/cart-context'; // Untuk akses keranjang & kosongkanexport default function HalamanCheckout() { const router = useRouter();
Bedah HalamanCheckout.tsx:
"use client";: Komponen ini butuh state dan event handling, jadi harus Client Component.
useRouter(): Kita impor dan pake buat navigasi programatik nanti.
useCart(): Kita pake buat ngambil data itemDiKeranjang, totalHarga, dan fungsi kosongkanKeranjang.
State Form: Kita bikin beberapa useState buat tiap field input (nama, email, alamat, telepon, catatan). Ini adalah Controlled Components.
handleSubmitCheckout(event):
event.preventDefault(): Mencegah submit form tradisional.
Validasi sederhana: Ngecek field wajib diisi.
Di sini kita cuma console.log data dan nampilin alert. Di aplikasi nyata, ini tempat kamu ngirim data ke backend API.
kosongkanKeranjang(): Manggil fungsi dari CartContext buat ngosongin keranjang.
router.push('/terima-kasih'): Arahin pengguna ke halaman "Terima Kasih".
Kondisi Keranjang Kosong: Kalau keranjang kosong, kita nampilin pesan dan tombol buat balik belanja, bukan form checkout.
Form JSX:
Struktur form biasa dengan <label> dan <input>/<textarea>.
Tiap input di-link ke state-nya masing-masing (value={nama}, onChange={(e) => setNama(e.target.value)}).
Ada ringkasan pesanan yang diambil dari itemDiKeranjang dan totalHarga.
Tombol "Proses Pesanan" bertipe submit.
Ada link buat balik ke keranjang.
Styling: Saya tambahin beberapa class Tailwind dasar biar tampilannya lumayan rapi.
Langkah 2: Membuat Halaman Terima Kasih (src/app/terima-kasih/page.tsx)
Ini halaman simpel yang ditampilin setelah checkout "berhasil".
Di dalam src/app/, bikin folder baru terima-kasih.
Di dalam src/app/terima-kasih/, bikin file page.tsx.
File src/app/terima-kasih/page.tsx:
tsx
// src/app/terima-kasih/page.tsximport React from 'react';import Link from 'next/link';export default function HalamanTerimaKasih() { return ( <div className="container mx-auto p-4 md:p-8 text-center min-h-[60vh] flex flex-col justify-center items-center"> <div className="bg-green-100 border-l-4 border-green-500 text-green-700 p-6 rounded-md shadow-lg max-w-md"> <h1 className="text-3xl font-bold mb-4">Pesanan Diterima! 🎉</h1> <p className="text-lg mb-2">Terima kasih telah berbelanja di Toko Kue Mahir.dev!</p> <p className="mb-6">Kami (pura-puranya) akan segera memproses pesanan Anda.</p> </div> <Link href="/" className="mt-8 inline-block bg-blue-500 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg transition-colors"> Kembali ke Beranda </Link> </div> );}
Bedah HalamanTerimaKasih.tsx:
Ini komponen yang sangat simpel, cuma nampilin pesan terima kasih dan link buat balik ke beranda.
Bisa kamu tambahin info lain kalau mau (misal, nomor pesanan bohongan).
Langkah 3: Update Styling (Jika Perlu)
Kamu bisa nambahin style lagi di src/app/globals.css atau App.css buat halaman checkout dan terima kasih biar makin cakep. Contoh di atas udah pake beberapa utility Tailwind dasar.
Tes Alur Checkout!
Pastikan dev server jalan (npm run dev).
Masukin beberapa item ke keranjang belanja.
Pindah ke halaman keranjang (/keranjang).
Klik tombol "Lanjut ke Checkout". Kamu bakal dibawa ke /checkout.
Isi form checkout. Coba submit dengan field kosong, harusnya ada alert.
Isi semua field wajib, terus klik "Proses Pesanan".
Harusnya kamu liat alert "Pesanan Diterima...", keranjang belanjamu (di localStorage dan di tampilan kalau ada indikatornya) jadi kosong, dan kamu otomatis diarahkan ke halaman /terima-kasih.
Di halaman terima kasih, klik link buat balik ke beranda.
Hore! Toko Kue Online sederhana kita udah punya alur lengkap dari liat produk sampe (pura-pura) checkout!
Apa yang Udah Kita Terapin di Studi Kasus Ini (Secara Keseluruhan):
Next.js App Router: Bikin halaman dan rute dinamis.
Server Components: Buat ngambil data produk awal.
Client Components: Buat semua bagian yang interaktif (tombol, form, keranjang).
React Components, Props, State (useState): Fondasi UI kita.
List Rendering (.map() dengan key): Buat nampilin daftar produk dan item keranjang.
TypeScript: Ngasih tipe ke data, props, state, dan event buat kode yang lebih aman.
Context API (useContext): Buat ngelola state keranjang secara "global".
localStorage & useEffect: Buat nyimpen data keranjang biar gak ilang.
API Routes (Route Handlers): Bikin backend mini buat data produk.
Navigasi Programatik (useRouter().push()).
(Jika kamu implementasikan) Styling dengan Tailwind CSS atau CSS biasa.
Ini udah jadi aplikasi web mini yang lumayan kompleks dan ngelibatin banyak banget konsep penting! Kamu bisa jadiin ini basis buat dieksplorasi lebih jauh, misalnya:
Nambahin validasi form yang lebih canggih.
Integrasi sama API pembayaran beneran (ini udah advance banget!).
Nambahin fitur filter atau sortir produk.
Nambahin halaman akun pengguna.
Yang pasti, dengan nyelesaiin studi kasus ini, kamu udah dapet pengalaman praktis yang sangat berharga dalam ngebangun aplikasi React (dan Next.js) dengan TypeScript.
