Tips All

Di era digital seperti sekarang, membangun website modern adalah langkah penting bagi perusahaan yang ingin meningkatkan bisnis mereka secara online. Sebuah website tidak hanya berfungsi sebagai wajah perusahaan di dunia digital, tetapi juga sebagai platform interaksi antara perusahaan dan pelanggannya. Dengan website yang modern dan responsif, perusahaan dapat menjangkau lebih banyak audiens, meningkatkan kepercayaan pelanggan, dan memperkuat branding mereka. Selain itu, website yang baik juga dapat mendukung strategi pemasaran, seperti SEO dan media sosial, yang pada akhirnya membantu meningkatkan penjualan dan profit perusahaan. Oleh karena itu, penting bagi perusahaan untuk terus belajar dan mengikuti perkembangan teknologi agar bisa memaksimalkan potensi website mereka dalam menjalankan bisnis secara online. Mengapa Menggunakan Next.js untuk Website Modern Salah satu framework yang banyak digunakan oleh developer untuk membangun website modern adalah Next.js. Framework ini sangat populer karena fleksibilitasnya yang memungkinkan penggunaannya baik untuk frontend maupun backend. Dengan Next.js, perusahaan dapat membangun aplikasi web yang cepat, efisien, dan SEO-friendly, sehingga dapat meningkatkan performa website dan pengalaman pengguna. Selain itu, Next.js juga mendukung rendering server-side dan static site generation, yang membuatnya sangat cocok untuk berbagai jenis proyek web development. Fleksibilitas inilah yang menjadikan Next.js pilihan tepat untuk perusahaan yang ingin mencoba teknologi terbaru dan menghadirkan website modern yang handal untuk bisnis mereka. Fitur Component dalam Next.js untuk Mempercepat Development Next.js memiliki fitur yang sangat membantu dalam mempercepat proses development, yaitu component. Component dalam Next.js memungkinkan developer untuk memecah tampilan website menjadi bagian-bagian kecil yang terpisah namun saling terhubung. Setiap component ini berfungsi secara independen, yang artinya bisa digunakan kembali di berbagai bagian lain dari aplikasi. Dengan memanfaatkan fitur ini, proses development menjadi jauh lebih efisien karena developer tidak perlu menulis ulang kode yang sama. Selain itu, component juga mempermudah proses maintenance website. Ketika ada perubahan yang perlu dilakukan, developer hanya perlu memperbarui component tertentu tanpa harus memodifikasi keseluruhan aplikasi. Inilah yang membuat component menjadi salah satu fitur andalan di Next.js untuk membangun website modern. Apa Itu Component-Based Architecture dan Jenis Component dalam Next.js Component-based architecture adalah pendekatan dalam pengembangan aplikasi web yang mengorganisir aplikasi menjadi potongan-potongan kecil yang disebut component. Setiap component memiliki fungsi spesifik dan dapat digunakan kembali di berbagai bagian aplikasi. Pendekatan ini membuat kode lebih mudah dipahami, dipelihara, dan dikembangkan dalam jangka panjang. Di Next.js, terdapat beberapa jenis component yang sering digunakan, antara lain: Functional Components: Ini adalah jenis component yang paling umum dalam Next.js. Component ini hanya menerima props dan mengembalikan tampilan (UI). Biasanya digunakan untuk tampilan statis atau elemen yang tidak membutuhkan banyak logika kompleks.Stateful Components: Component yang memiliki internal state, biasanya digunakan ketika aplikasi membutuhkan interaksi dinamis, seperti form input atau perubahan data secara real-time.Presentational Components: Digunakan khusus untuk merender tampilan tanpa memiliki logika bisnis yang kompleks. Presentational components fokus pada bagaimana tampilan muncul kepada pengguna.Container Components: Component yang menangani logika bisnis dan mengelola state dari aplikasi. Biasanya, container components bekerja sama dengan presentational components untuk memisahkan logika dan tampilan. Developer perlu menggunakan component berdasarkan kebutuhan aplikasi. Misalnya, jika hanya membutuhkan tampilan sederhana, maka functional components bisa digunakan. Namun, jika ada interaksi yang lebih kompleks atau pengelolaan data, stateful dan container components menjadi pilihan yang tepat. Dengan memanfaatkan berbagai jenis component ini, developer dapat membangun aplikasi web yang lebih terstruktur, efisien, dan mudah di-maintain. Membuat Project Next.js Toko Sepatu Online Terbaru dengan npm Pada tutorial ini, kita akan membahas bagaimana cara membuat project Next.js terbaru untuk toko sepatu online. Berikut adalah langkah-langkahnya beserta contoh kode yang lengkap. Install Next.js dengan npm Untuk memulai, pastikan npm sudah terpasang di komputer Anda. Setelah itu, buka terminal dan jalankan perintah berikut untuk membuat project Next.js baru: npx create-next-app@latest toko-sepatu-online Perintah ini akan membuat folder bernama toko-sepatu-online dan menginstal semua dependency yang diperlukan untuk memulai project Next.js. Menjalankan Project Next.js Setelah proses instalasi selesai, masuk ke direktori project yang baru saja dibuat: cd toko-sepatu-online Jalankan project Next.js untuk melihat apakah semuanya berjalan dengan baik: npm run dev Kunjungi http://localhost:3000 di browser Anda, dan Anda akan melihat halaman default Next.js. Struktur Project Berikut adalah struktur dasar project yang baru saja dibuat: toko-sepatu-online/ ├── node_modules/ ├── public/ ├── src/ │ ├── pages/ │ └── styles/ ├── .gitignore ├── package.json ├── README.md └── next.config.js Membuat Halaman Home untuk Toko Sepatu Buka file src/pages/index.js dan modifikasi untuk membuat halaman home bagi toko sepatu online Anda: import Head from 'next/head'; export default function Home() { return ( <div> <Head> <title>Toko Sepatu Online</title> <meta name="description" content="Belanja sepatu online dengan koleksi terbaru" /> </Head> <header> <h1>Selamat Datang di Toko Sepatu Online</h1> <p>Koleksi sepatu terbaru untuk gaya dan kenyamanan Anda</p> </header> </div> ); } Menambahkan Daftar Produk Sepatu Untuk menampilkan daftar sepatu, buat array data produk sepatu di dalam halaman index.js. Kemudian, gunakan fungsi map untuk menampilkan daftar produk tersebut. const products = [ { id: 1, name: 'Sepatu Running', price: 500000 }, { id: 2, name: 'Sepatu Basket', price: 600000 }, { id: 3, name: 'Sepatu Casual', price: 400000 } ]; export default function Home() { return ( <div> <Head> <title>Toko Sepatu Online</title> <meta name="description" content="Belanja sepatu online dengan koleksi terbaru" /> </Head> <header> <h1>Selamat Datang di Toko Sepatu Online</h1> <p>Koleksi sepatu terbaru untuk gaya dan kenyamanan Anda</p> </header> <section> <h2>Produk Kami</h2> <ul> {products.map((product) => ( <li key={product.id}> <h3>{product.name}</h3> <p>Harga: Rp {product.price}</p> </li> ))} </ul> </section> </div> ); } Menambahkan Style pada Halaman Untuk memberikan tampilan yang lebih baik, tambahkan CSS ke halaman Anda. Buka file src/styles/globals.css dan tambahkan gaya berikut: body { font-family: Arial, sans-serif; margin: 0; padding: 0; box-sizing: border-box; } header { background-color: #f8f9fa; padding: 20px; text-align: center; } h1 { color: #333; } section { padding: 20px; } ul { list-style-type: none; padding: 0; } li { border-bottom: 1px solid #ddd; padding: 10px 0; } Setelah itu, buka kembali halaman di browser Anda. Sekarang tampilan toko sepatu online Anda terlihat lebih rapi dan profesional. Menambahkan Produk Baru Untuk menambahkan produk baru, Anda hanya perlu menambahkannya ke dalam array products di file index.js: const products = [ { id: 1, name: 'Sepatu Running', price: 500000 }, { id: 2, name: 'Sepatu Basket', price: 600000 }, { id: 3, name: 'Sepatu Casual', price: 400000 }, { id: 4, name: 'Sepatu Formal', price: 700000 } ]; Produk baru tersebut akan otomatis muncul di halaman produk tanpa perlu perubahan besar pada kode lainnya. Membuat Beberapa Komponen Utama pada Website Sepatu Online Dalam Next.js, kita bisa memanfaatkan fitur component untuk memecah website menjadi bagian-bagian kecil yang lebih mudah diatur dan dipelihara. Berikut adalah cara membuat beberapa komponen utama untuk website sepatu online beserta contoh koding lengkap. Membuat Komponen Header Komponen pertama yang akan kita buat adalah Header, yang akan menampilkan judul dan deskripsi singkat tentang toko sepatu online. Buat file Header.js di dalam folder src/components. import React from 'react'; const Header = () => { return ( <header> <h1>Toko Sepatu Online</h1> <p>Koleksi sepatu terbaru dengan harga terjangkau</p> </header> ); }; export default Header; Setelah itu, import komponen Header ke dalam halaman utama src/pages/index.js. import Head from 'next/head'; import Header from '../components/Header'; export default function Home() { return ( <div> <Head> <title>Toko Sepatu Online</title> <meta name="description" content="Belanja sepatu online dengan koleksi terbaru" /> </Head> <Header /> {/* Konten lainnya */} </div> ); } Membuat Komponen Produk Selanjutnya, kita buat komponen Product untuk menampilkan informasi setiap produk. Buat file Product.js di dalam folder src/components. import React from 'react'; const Product = ({ name, price }) => { return ( <div> <h3>{name}</h3> <p>Harga: Rp {price}</p> </div> ); }; export default Product; Kemudian, kita gunakan komponen Product ini di halaman utama untuk menampilkan daftar produk. Kembali ke src/pages/index.js dan tambahkan produk ke dalam halaman: import Head from 'next/head'; import Header from '../components/Header'; import Product from '../components/Product'; export default function Home() { const products = [ { id: 1, name: 'Sepatu Running', price: 500000 }, { id: 2, name: 'Sepatu Basket', price: 600000 }, { id: 3, name: 'Sepatu Casual', price: 400000 } ]; return ( <div> <Head> <title>Toko Sepatu Online</title> <meta name="description" content="Belanja sepatu online dengan koleksi terbaru" /> </Head> <Header /> <section> <h2>Daftar Produk</h2> <div> {products.map((product) => ( <Product key={product.id} name={product.name} price={product.price} /> ))} </div> </section> </div> ); } Membuat Komponen Footer Untuk melengkapi website, kita buat komponen Footer yang akan berisi informasi singkat tentang toko. Buat file Footer.js di dalam folder src/components. import React from 'react'; const Footer = () => { return ( <footer> <p>© 2024 Toko Sepatu Online. All Rights Reserved.</p> </footer> ); }; export default Footer; Sekarang, tambahkan komponen Footer ke dalam halaman utama index.js agar muncul di bagian bawah halaman. import Head from 'next/head'; import Header from '../components/Header'; import Product from '../components/Product'; import Footer from '../components/Footer'; export default function Home() { const products = [ { id: 1, name: 'Sepatu Running', price: 500000 }, { id: 2, name: 'Sepatu Basket', price: 600000 }, { id: 3, name: 'Sepatu Casual', price: 400000 } ]; return ( <div> <Head> <title>Toko Sepatu Online</title> <meta name="description" content="Belanja sepatu online dengan koleksi terbaru" /> </Head> <Header /> <section> <h2>Daftar Produk</h2> <div> {products.map((product) => ( <Product key={product.id} name={product.name} price={product.price} /> ))} </div> </section> <Footer /> </div> ); } Menambahkan Style untuk Komponen Buat tampilan website lebih menarik dengan menambahkan style di file src/styles/globals.css. Berikut adalah contoh CSS yang bisa digunakan: body { font-family: Arial, sans-serif; margin: 0; padding: 0; box-sizing: border-box; } header { background-color: #f8f9fa; padding: 20px; text-align: center; } footer { background-color: #343a40; color: #fff; text-align: center; padding: 10px 0; position: absolute; bottom: 0; width: 100%; } section { padding: 20px; } h1 { color: #333; } h3 { color: #007bff; } p { margin: 0; } Menggunakan Komponen secara Efisien Dengan menggunakan komponen, website sepatu online Anda kini lebih terstruktur dan mudah untuk dikembangkan. Komponen Header, Product, dan Footer bisa digunakan di berbagai halaman, sehingga tidak perlu menulis ulang kode di setiap halaman. Ini tidak hanya mempercepat proses development, tetapi juga memudahkan proses maintenance di masa depan. Komponen memungkinkan Anda untuk fokus pada setiap bagian secara terpisah dan membuat website menjadi lebih modular dan scalable. Membuat Data Dummy pada Website Toko Sepatu dan Mengirimkan Data ke Component di Halaman Lain Dalam membangun website dengan Next.js, salah satu kebutuhan umum adalah membuat data dummy dan mengirimkan data tersebut dari satu halaman ke halaman lainnya. Berikut adalah langkah-langkah lengkap beserta contoh koding untuk membuat data dummy dan meneruskannya antar halaman di website toko sepatu. Membuat Data Dummy Produk Sepatu Pertama, buat data dummy untuk produk sepatu yang bisa diakses dari berbagai halaman. Buat file baru bernama products.js di dalam folder src/data. export const products = [ { id: 1, name: 'Sepatu Running', price: 500000, description: 'Sepatu untuk olahraga lari.' }, { id: 2, name: 'Sepatu Basket', price: 600000, description: 'Sepatu untuk bermain basket.' }, { id: 3, name: 'Sepatu Casual', price: 400000, description: 'Sepatu santai untuk sehari-hari.' }, { id: 4, name: 'Sepatu Formal', price: 700000, description: 'Sepatu formal untuk acara resmi.' } ]; Data ini akan digunakan untuk menampilkan daftar produk di halaman toko sepatu serta diteruskan ke halaman detail produk. Menampilkan Daftar Produk di Halaman Utama Sekarang kita tampilkan data produk di halaman utama. Buka file src/pages/index.js dan impor data dari file products.js, lalu tampilkan daftar produk menggunakan component Product. import Head from 'next/head'; import Header from '../components/Header'; import Product from '../components/Product'; import { products } from '../data/products'; import Link from 'next/link'; export default function Home() { return ( <div> <Head> <title>Toko Sepatu Online</title> <meta name="description" content="Belanja sepatu online dengan koleksi terbaru" /> </Head> <Header /> <section> <h2>Daftar Produk</h2> <div> {products.map((product) => ( <div key={product.id}> <Product name={product.name} price={product.price} /> <Link href={`/product/${product.id}`}> <a>Lihat Detail</a> </Link> </div> ))} </div> </section> </div> ); } Pada kode di atas, setiap produk ditampilkan menggunakan component Product, dan setiap produk juga memiliki link yang mengarahkan pengguna ke halaman detail produk menggunakan Link dari Next.js. Membuat Halaman Detail Produk Untuk menampilkan detail produk, buat halaman dinamis menggunakan routing berbasis file di Next.js. Buat folder product di dalam src/pages, lalu buat file [id].js untuk menangani routing dinamis berdasarkan id produk. import { products } from '../../data/products'; import { useRouter } from 'next/router'; import Head from 'next/head'; const ProductDetail = () => { const router = useRouter(); const { id } = router.query; const product = products.find((p) => p.id === parseInt(id)); if (!product) { return <p>Produk tidak ditemukan</p>; } return ( <div> <Head> <title>{product.name} - Detail Produk</title> <meta name="description" content={`Detail produk untuk ${product.name}`} /> </Head> <h1>{product.name}</h1> <p>Harga: Rp {product.price}</p> <p>{product.description}</p> </div> ); }; export default ProductDetail; Pada halaman ini, id produk diambil dari URL menggunakan useRouter() dari Next.js. Produk yang sesuai dengan id tersebut kemudian dicari dari data dummy dan ditampilkan detailnya. Jika produk tidak ditemukan, akan muncul pesan "Produk tidak ditemukan". Menghubungkan Halaman Utama dengan Halaman Detail Kembali ke halaman utama, kita telah menambahkan link yang mengarahkan ke halaman detail produk dengan URL /product/[id]. Ketika pengguna mengklik link "Lihat Detail" pada suatu produk, mereka akan diarahkan ke halaman ProductDetail yang menampilkan informasi lengkap produk tersebut. Misalnya, jika pengguna mengklik produk dengan id 1, mereka akan diarahkan ke URL /product/1, dan halaman detail akan menampilkan nama, harga, dan deskripsi produk tersebut. Menambahkan Style untuk Halaman Detail Agar tampilan lebih menarik, tambahkan style untuk halaman detail produk di file src/styles/globals.css. h1 { color: #007bff; margin-top: 20px; } p { font-size: 18px; } a { color: #007bff; text-decoration: none; } a:hover { text-decoration: underline; } Mengatur Types TypeScript pada Component di Next.js Dalam project Next.js yang menggunakan TypeScript, mengatur types pada setiap component sangat penting untuk memastikan data yang diterima atau dikirim lebih akurat dan aman. Berikut adalah langkah-langkah lengkap beserta contoh koding untuk mengatur types TypeScript pada component agar data yang diterima atau dikirim sesuai dengan yang diharapkan. Mengaktifkan TypeScript pada Project Next.js Jika project Next.js Anda belum menggunakan TypeScript, Anda bisa mengaktifkannya dengan menjalankan perintah berikut: touch tsconfig.json npm install --save-dev typescript @types/react @types/node Setelah itu, jalankan project Next.js Anda, dan Next.js akan otomatis mengonversi file-file ke dalam format TypeScript. Menyiapkan Data Dummy dengan TypeScript Langkah pertama adalah membuat type untuk data dummy. Buat file baru bernama types.ts di dalam folder src untuk mendefinisikan type yang digunakan. Misalnya, kita ingin mendefinisikan type untuk produk sepatu: export interface Product { id: number; name: string; price: number; description: string; } Type Product ini memiliki empat properti: id, name, price, dan description, yang semuanya wajib ada ketika produk digunakan. Membuat Data Dummy dengan Type Setelah mendefinisikan type, kita dapat menggunakannya dalam file products.ts yang berisi data dummy. Buka file src/data/products.ts dan gunakan type yang sudah didefinisikan: import { Product } from '../types'; export const products: Product[] = [ { id: 1, name: 'Sepatu Running', price: 500000, description: 'Sepatu untuk olahraga lari.' }, { id: 2, name: 'Sepatu Basket', price: 600000, description: 'Sepatu untuk bermain basket.' }, { id: 3, name: 'Sepatu Casual', price: 400000, description: 'Sepatu santai untuk sehari-hari.' }, { id: 4, name: 'Sepatu Formal', price: 700000, description: 'Sepatu formal untuk acara resmi.' } ]; Di sini, kita menggunakan Product[] untuk mendefinisikan bahwa variabel products adalah array dari objek Product. Mengatur Type pada Komponen Product Sekarang kita akan membuat komponen Product dan menetapkan type untuk data yang diterima oleh komponen tersebut. Buka file src/components/Product.tsx dan buat komponen dengan TypeScript. import React from 'react'; import { Product } from '../types'; interface ProductProps { name: string; price: number; } const ProductComponent: React.FC<ProductProps> = ({ name, price }) => { return ( <div> <h3>{name}</h3> <p>Harga: Rp {price}</p> </div> ); }; export default ProductComponent; Di sini, kita membuat interface ProductProps untuk mendefinisikan bahwa ProductComponent menerima dua props: name dan price, yang keduanya bertipe string dan number. Menggunakan Komponen dengan Type yang Tepat Sekarang, kita akan menggunakan ProductComponent di halaman utama. Buka file src/pages/index.tsx dan impor data serta component: import Head from 'next/head'; import Header from '../components/Header'; import ProductComponent from '../components/Product'; import { products } from '../data/products'; export default function Home() { return ( <div> <Head> <title>Toko Sepatu Online</title> <meta name="description" content="Belanja sepatu online dengan koleksi terbaru" /> </Head> <Header /> <section> <h2>Daftar Produk</h2> <div> {products.map((product) => ( <ProductComponent key={product.id} name={product.name} price={product.price} /> ))} </div> </section> </div> ); } Pada bagian ini, kita memastikan bahwa setiap produk yang dilemparkan ke ProductComponent memiliki data dengan tipe yang sesuai (name: string dan price: number). Menambahkan Type untuk Routing Dinamis Selain mengatur types pada komponen, kita juga bisa mengatur types untuk halaman dengan routing dinamis. Buka file src/pages/product/[id].tsx dan tambahkan type untuk menangani produk: import { useRouter } from 'next/router'; import { products } from '../../data/products'; import { Product } from '../../types'; const ProductDetail: React.FC = () => { const router = useRouter(); const { id } = router.query; const product: Product | undefined = products.find((p) => p.id === Number(id)); if (!product) { return <p>Produk tidak ditemukan</p>; } return ( <div> <h1>{product.name}</h1> <p>Harga: Rp {product.price}</p> <p>{product.description}</p> </div> ); }; export default ProductDetail; Di sini, kita memastikan bahwa data product yang ditemukan sesuai dengan type Product. Jika product tidak ditemukan, halaman akan menampilkan pesan error. Menerapkan State Management pada Component agar Data dan Tampilan Dinamis Dalam pengembangan aplikasi Next.js, state management sangat penting untuk membuat komponen lebih dinamis. Dengan state, kita bisa mengatur data yang berubah secara real-time, seperti interaksi pengguna atau perubahan nilai dari input. Berikut adalah langkah-langkah lengkap untuk menerapkan state management pada sebuah komponen dengan contoh koding yang rinci. Membuat State dengan useState Pertama, kita akan membuat komponen sederhana yang menggunakan useState untuk mengelola state di dalamnya. Misalnya, kita akan membuat komponen yang menampilkan daftar sepatu dan memungkinkan pengguna untuk menambah produk sepatu ke dalam daftar favorit. Buat komponen baru bernama ProductList.tsx di dalam folder src/components: import React, { useState } from 'react'; const ProductList = () => { const [favorites, setFavorites] = useState<string[]>([]); const products = ['Sepatu Running', 'Sepatu Basket', 'Sepatu Casual', 'Sepatu Formal']; const addFavorite = (product: string) => { if (!favorites.includes(product)) { setFavorites([...favorites, product]); } }; return ( <div> <h2>Daftar Produk</h2> <ul> {products.map((product) => ( <li key={product}> {product} <button onClick={() => addFavorite(product)}>Tambah ke Favorit</button> </li> ))} </ul> <h3>Produk Favorit</h3> {favorites.length > 0 ? ( <ul> {favorites.map((favorite) => ( <li key={favorite}>{favorite}</li> ))} </ul> ) : ( <p>Belum ada produk favorit</p> )} </div> ); }; export default ProductList; Pada contoh di atas, kita menggunakan useState untuk menyimpan daftar produk favorit di state favorites. Komponen ini memiliki daftar produk sepatu, dan pengguna bisa menambahkan produk ke daftar favorit dengan mengklik tombol "Tambah ke Favorit". Setiap kali produk ditambahkan, state favorites diperbarui, dan daftar favorit ditampilkan secara dinamis di bawah daftar produk. Menampilkan Komponen di Halaman Utama Selanjutnya, kita akan menampilkan komponen ProductList di halaman utama. Buka file src/pages/index.tsx dan tambahkan ProductList ke dalamnya: import Head from 'next/head'; import Header from '../components/Header'; import ProductList from '../components/ProductList'; export default function Home() { return ( <div> <Head> <title>Toko Sepatu Online</title> <meta name="description" content="Belanja sepatu online dengan koleksi terbaru" /> </Head> <Header /> <ProductList /> </div> ); } Sekarang, komponen ProductList akan muncul di halaman utama. Pengguna dapat menambah produk ke daftar favorit, dan setiap produk yang dipilih akan ditampilkan secara dinamis di bagian "Produk Favorit". Mengelola State dengan Input Pengguna Untuk memperlihatkan lebih banyak penggunaan state, kita akan menambahkan input yang memungkinkan pengguna untuk menambahkan produk baru ke daftar produk. Kembali ke file ProductList.tsx dan tambahkan input untuk menambah produk: import React, { useState } from 'react'; const ProductList = () => { const [favorites, setFavorites] = useState<string[]>([]); const [products, setProducts] = useState<string[]>(['Sepatu Running', 'Sepatu Basket', 'Sepatu Casual', 'Sepatu Formal']); const [newProduct, setNewProduct] = useState<string>(''); const addFavorite = (product: string) => { if (!favorites.includes(product)) { setFavorites([...favorites, product]); } }; const addProduct = () => { if (newProduct && !products.includes(newProduct)) { setProducts([...products, newProduct]); setNewProduct(''); } }; return ( <div> <h2>Daftar Produk</h2> <ul> {products.map((product) => ( <li key={product}> {product} <button onClick={() => addFavorite(product)}>Tambah ke Favorit</button> </li> ))} </ul> <h3>Tambah Produk Baru</h3> <input type="text" value={newProduct} onChange={(e) => setNewProduct(e.target.value)} placeholder="Nama produk baru" /> <button onClick={addProduct}>Tambah Produk</button> <h3>Produk Favorit</h3> {favorites.length > 0 ? ( <ul> {favorites.map((favorite) => ( <li key={favorite}>{favorite}</li> ))} </ul> ) : ( <p>Belum ada produk favorit</p> )} </div> ); }; export default ProductList; Pada kode di atas, kita menambahkan state baru newProduct untuk menyimpan input dari pengguna. Ketika pengguna mengetikkan nama produk baru, state newProduct akan diperbarui, dan ketika tombol "Tambah Produk" diklik, produk baru akan ditambahkan ke daftar produk menggunakan setProducts. Daftar produk diperbarui secara dinamis, dan pengguna juga dapat menambahkan produk baru ke daftar favorit. Menyimpan State di Local Storage (Opsional) Untuk mempertahankan state meskipun halaman di-refresh, Anda bisa menggunakan local storage. Berikut adalah cara menerapkan penyimpanan data menggunakan local storage pada state produk favorit: Tambahkan efek samping untuk menyimpan dan mengambil data dari local storage menggunakan useEffect dari React: import React, { useState, useEffect } from 'react'; const ProductList = () => { const [favorites, setFavorites] = useState<string[]>([]); const [products, setProducts] = useState<string[]>(['Sepatu Running', 'Sepatu Basket', 'Sepatu Casual', 'Sepatu Formal']); const [newProduct, setNewProduct] = useState<string>(''); useEffect(() => { const savedFavorites = localStorage.getItem('favorites'); if (savedFavorites) { setFavorites(JSON.parse(savedFavorites)); } }, []); useEffect(() => { localStorage.setItem('favorites', JSON.stringify(favorites)); }, [favorites]); const addFavorite = (product: string) => { if (!favorites.includes(product)) { setFavorites([...favorites, product]); } }; const addProduct = () => { if (newProduct && !products.includes(newProduct)) { setProducts([...products, newProduct]); setNewProduct(''); } }; return ( <div> <h2>Daftar Produk</h2> <ul> {products.map((product) => ( <li key={product}> {product} <button onClick={() => addFavorite(product)}>Tambah ke Favorit</button> </li> ))} </ul> <h3>Tambah Produk Baru</h3> <input type="text" value={newProduct} onChange={(e) => setNewProduct(e.target.value)} placeholder="Nama produk baru" /> <button onClick={addProduct}>Tambah Produk</button> <h3>Produk Favorit</h3> {favorites.length > 0 ? ( <ul> {favorites.map((favorite) => ( <li key={favorite}>{favorite}</li> ))} </ul> ) : ( <p>Belum ada produk favorit</p> )} </div> ); }; export default ProductList; Pada contoh ini, state favorites disimpan ke dalam local storage setiap kali produk baru ditambahkan ke dalam daftar favorit, dan saat halaman dimuat kembali, data favorit diambil dari local storage. Menerapkan Conditional Rendering pada Component di Proyek Toko Sepatu Online Dalam sebuah aplikasi, terkadang kita perlu menampilkan elemen atau konten yang berbeda berdasarkan kondisi tertentu. Pada proyek toko sepatu online, kita bisa menggunakan conditional rendering untuk mengontrol tampilan berdasarkan kondisi seperti ketersediaan produk, status login pengguna, atau kategori produk yang dipilih. Berikut adalah langkah-langkah untuk menerapkan conditional rendering pada sebuah component dengan contoh kode lengkap. Membuat Komponen Produk dengan Ketersediaan Stok Kita akan membuat komponen ProductList yang menampilkan daftar sepatu. Sepatu yang stoknya habis akan ditampilkan dengan pesan khusus, sementara sepatu yang tersedia akan menampilkan tombol "Tambah ke Keranjang". Buat file ProductList.tsx di dalam folder src/components: import React from 'react'; interface Product { id: number; name: string; price: number; isAvailable: boolean; } const ProductList: React.FC = () => { const products: Product[] = [ { id: 1, name: 'Sepatu Running', price: 500000, isAvailable: true }, { id: 2, name: 'Sepatu Basket', price: 600000, isAvailable: false }, { id: 3, name: 'Sepatu Casual', price: 400000, isAvailable: true }, { id: 4, name: 'Sepatu Formal', price: 700000, isAvailable: false } ]; return ( <div> <h2>Daftar Produk</h2> <ul> {products.map((product) => ( <li key={product.id}> <h3>{product.name}</h3> <p>Harga: Rp {product.price}</p> {product.isAvailable ? ( <button>Tambah ke Keranjang</button> ) : ( <p style={{ color: 'red' }}>Stok Habis</p> )} </li> ))} </ul> </div> ); }; export default ProductList; Pada contoh di atas, kita menggunakan conditional rendering untuk menampilkan pesan "Stok Habis" jika isAvailable bernilai false. Jika isAvailable bernilai true, maka akan menampilkan tombol "Tambah ke Keranjang". Ini adalah cara dasar untuk menerapkan conditional rendering di dalam komponen berdasarkan kondisi stok produk. Menampilkan Komponen di Halaman Utama Untuk menampilkan komponen ini di halaman utama, buka file src/pages/index.tsx dan tambahkan komponen ProductList: import Head from 'next/head'; import Header from '../components/Header'; import ProductList from '../components/ProductList'; export default function Home() { return ( <div> <Head> <title>Toko Sepatu Online</title> <meta name="description" content="Belanja sepatu online dengan koleksi terbaru" /> </Head> <Header /> <ProductList /> </div> ); } Sekarang, ketika Anda membuka halaman utama, daftar produk akan ditampilkan dengan pesan khusus jika stok habis. Conditional Rendering Berdasarkan Kategori Produk Selanjutnya, kita akan menerapkan conditional rendering berdasarkan kategori produk yang dipilih oleh pengguna. Buat sebuah state untuk menyimpan kategori yang dipilih, dan tampilkan produk berdasarkan kategori tersebut. Modifikasi file ProductList.tsx untuk menambahkan fitur ini: import React, { useState } from 'react'; interface Product { id: number; name: string; price: number; category: string; isAvailable: boolean; } const ProductList: React.FC = () => { const [selectedCategory, setSelectedCategory] = useState<string>('All'); const products: Product[] = [ { id: 1, name: 'Sepatu Running', price: 500000, category: 'Olahraga', isAvailable: true }, { id: 2, name: 'Sepatu Basket', price: 600000, category: 'Olahraga', isAvailable: false }, { id: 3, name: 'Sepatu Casual', price: 400000, category: 'Casual', isAvailable: true }, { id: 4, name: 'Sepatu Formal', price: 700000, category: 'Formal', isAvailable: false } ]; const filteredProducts = selectedCategory === 'All' ? products : products.filter((product) => product.category === selectedCategory); return ( <div> <h2>Daftar Produk</h2> <div> <button onClick={() => setSelectedCategory('All')}>Semua</button> <button onClick={() => setSelectedCategory('Olahraga')}>Olahraga</button> <button onClick={() => setSelectedCategory('Casual')}>Casual</button> <button onClick={() => setSelectedCategory('Formal')}>Formal</button> </div> <ul> {filteredProducts.map((product) => ( <li key={product.id}> <h3>{product.name}</h3> <p>Harga: Rp {product.price}</p> {product.isAvailable ? ( <button>Tambah ke Keranjang</button> ) : ( <p style={{ color: 'red' }}>Stok Habis</p> )} </li> ))} </ul> </div> ); }; export default ProductList; Pada contoh ini, kita menambahkan tombol untuk memilih kategori produk (All, Olahraga, Casual, Formal). Berdasarkan kategori yang dipilih, daftar produk akan difilter menggunakan metode filter(). Hasil filter tersebut kemudian ditampilkan dengan conditional rendering yang sama untuk ketersediaan stok. Menyempurnakan Tampilan dengan Conditional Rendering Kita juga bisa menyempurnakan tampilan dengan menambahkan pesan khusus jika tidak ada produk yang sesuai dengan kategori yang dipilih. Modifikasi kode di dalam ProductList.tsx: import React, { useState } from 'react'; interface Product { id: number; name: string; price: number; category: string; isAvailable: boolean; } const ProductList: React.FC = () => { const [selectedCategory, setSelectedCategory] = useState<string>('All'); const products: Product[] = [ { id: 1, name: 'Sepatu Running', price: 500000, category: 'Olahraga', isAvailable: true }, { id: 2, name: 'Sepatu Basket', price: 600000, category: 'Olahraga', isAvailable: false }, { id: 3, name: 'Sepatu Casual', price: 400000, category: 'Casual', isAvailable: true }, { id: 4, name: 'Sepatu Formal', price: 700000, category: 'Formal', isAvailable: false } ]; const filteredProducts = selectedCategory === 'All' ? products : products.filter((product) => product.category === selectedCategory); return ( <div> <h2>Daftar Produk</h2> <div> <button onClick={() => setSelectedCategory('All')}>Semua</button> <button onClick={() => setSelectedCategory('Olahraga')}>Olahraga</button> <button onClick={() => setSelectedCategory('Casual')}>Casual</button> <button onClick={() => setSelectedCategory('Formal')}>Formal</button> </div> {filteredProducts.length > 0 ? ( <ul> {filteredProducts.map((product) => ( <li key={product.id}> <h3>{product.name}</h3> <p>Harga: Rp {product.price}</p> {product.isAvailable ? ( <button>Tambah ke Keranjang</button> ) : ( <p style={{ color: 'red' }}>Stok Habis</p> )} </li> ))} </ul> ) : ( <p>Tidak ada produk untuk kategori {selectedCategory}</p> )} </div> ); }; export default ProductList; Jika kategori yang dipilih tidak memiliki produk, akan muncul pesan "Tidak ada produk untuk kategori [kategori]". Dengan menggunakan conditional rendering, Anda dapat menampilkan elemen atau konten berdasarkan kondisi tertentu. Dalam contoh ini, kita menampilkan pesan khusus untuk stok habis dan memfilter produk berdasarkan kategori yang dipilih. Ini adalah teknik yang sangat bermanfaat untuk membuat tampilan aplikasi lebih dinamis dan interaktif, sesuai dengan kebutuhan pengguna dan data yang ada. 3 Kesalahan Utama Saat Membangun Website Menggunakan Komponen di Next.js App Router Dalam membangun website menggunakan Next.js dan fitur app router, ada beberapa kesalahan umum yang sering dilakukan oleh pengembang. Kesalahan ini dapat menyebabkan aplikasi tidak berjalan secara efisien atau menimbulkan bug yang sulit dilacak. Berikut adalah tiga kesalahan utama beserta solusi dan contoh koding lengkap untuk menghindarinya. 1. Tidak Memisahkan Logika Bisnis dari Komponen UI Kesalahan pertama adalah mencampuradukkan logika bisnis dengan tampilan (UI) dalam satu komponen. Ini membuat komponen menjadi sulit di-maintain dan di-reuse, serta mempersulit debugging di masa depan. Sebaiknya, pisahkan logika bisnis dari komponen UI agar komponen tetap sederhana. Contoh kesalahan: import React, { useState, useEffect } from 'react'; const ProductList = () => { const [products, setProducts] = useState([]); const [isLoading, setIsLoading] = useState(true); useEffect(() => { // Fetch data langsung di dalam komponen UI fetch('/api/products') .then((res) => res.json()) .then((data) => { setProducts(data); setIsLoading(false); }); }, []); return ( <div> {isLoading ? <p>Loading...</p> : products.map((product) => <p key={product.id}>{product.name}</p>)} </div> ); }; export default ProductList; Solusi: Pindahkan logika fetch data ke dalam fungsi terpisah atau gunakan custom hook. import React, { useState, useEffect } from 'react'; // Custom hook untuk fetching data const useProducts = () => { const [products, setProducts] = useState([]); const [isLoading, setIsLoading] = useState(true); useEffect(() => { fetch('/api/products') .then((res) => res.json()) .then((data) => { setProducts(data); setIsLoading(false); }); }, []); return { products, isLoading }; }; const ProductList = () => { const { products, isLoading } = useProducts(); return ( <div> {isLoading ? <p>Loading...</p> : products.map((product) => <p key={product.id}>{product.name}</p>)} </div> ); }; export default ProductList; 2. Tidak Menggunakan Key yang Unik saat Mapping Elemen Kesalahan kedua adalah tidak memberikan key yang unik saat melakukan rendering list dengan map(). Ini sering menyebabkan peringatan di console, dan bisa mengakibatkan bug rendering yang tidak terduga. Contoh kesalahan: const ProductList = ({ products }) => { return ( <ul> {products.map((product) => ( <li>{product.name}</li> // Tidak menggunakan key ))} </ul> ); }; Solusi: Pastikan setiap elemen dalam list memiliki key yang unik, misalnya menggunakan id dari data produk. const ProductList = ({ products }) => { return ( <ul> {products.map((product) => ( <li key={product.id}>{product.name}</li> // Menggunakan key yang unik ))} </ul> ); }; 3. Melakukan Fetch Data di Setiap Render Tanpa Mekanisme Caching Kesalahan ketiga adalah melakukan fetch data berulang-ulang setiap kali komponen dirender tanpa caching atau mekanisme pembatasan. Ini akan mengurangi performa aplikasi, terutama jika fetch data dilakukan dari API eksternal. Contoh kesalahan: const ProductList = () => { const [products, setProducts] = useState([]); useEffect(() => { fetch('/api/products') // Fetch data setiap kali komponen dirender .then((res) => res.json()) .then((data) => setProducts(data)); }, []); // Tidak ada caching }; Solusi: Gunakan mekanisme caching seperti useSWR untuk menghindari fetch data berulang kali. import useSWR from 'swr'; const fetcher = (url) => fetch(url).then((res) => res.json()); const ProductList = () => { const { data: products, error } = useSWR('/api/products', fetcher); if (error) return <p>Error loading data</p>; if (!products) return <p>Loading...</p>; return ( <ul> {products.map((product) => ( <li key={product.id}>{product.name}</li> ))} </ul> ); }; export default ProductList; Dengan menggunakan useSWR, data hanya akan di-fetch sekali dan disimpan di cache, sehingga performa aplikasi tetap optimal. Penutup Dengan memahami dan menghindari kesalahan-kesalahan umum dalam membangun website menggunakan komponen di Next.js, kita bisa menciptakan aplikasi yang lebih efisien dan mudah di-maintain. Jika Anda ingin meningkatkan kemampuan coding lebih lanjut dan belajar secara mendalam, Anda bisa belajar bersama mentor expert BuildWithAngga. Selain mendapatkan akses selamanya, Anda juga bisa membangun portfolio berkualitas, konsultasi langsung dengan mentor, dan mendapatkan beragam benefit menarik lainnya yang akan membantu Anda menjadi web developer profesional. Mari bergabung dan raih kesuksesan di dunia web development bersama BuildWithAngga!

Next.js adalah framework yang sangat populer di kalangan developer karena memberikan kemudahan dalam membangun aplikasi web modern. Di dalam Next.js, terdapat dua versi routing utama yang dikenal sebagai App Router dan Pages Router. Perbedaan mendasar dari keduanya terletak pada cara mereka mengatur dan mengelola SEO tags seperti title, meta description, dan meta tags lainnya. Pada Pages Router, struktur routing lebih tradisional di mana setiap halaman web diwakili oleh sebuah file di dalam folder pages. SEO diatur melalui file Head yang diimport di setiap file komponen, atau menggunakan next/head. Sedangkan App Router lebih fleksibel dan memberikan kontrol lebih pada developer dalam mengatur SEO. App Router memungkinkan kamu untuk lebih mudah menggunakan fitur-fitur canggih dari React dan Next.js, termasuk optimisasi SEO yang lebih granular dan dinamis. Meskipun keduanya memiliki pendekatan yang berbeda dalam mengelola halaman dan SEO, tujuan akhirnya tetap sama, yaitu memberikan pengalaman yang lebih optimal bagi pengguna dan meningkatkan performa website di mesin pencari. Pentingnya SEO dalam Next.js untuk Meningkatkan Peringkat Website Salah satu keunggulan besar menggunakan Next.js adalah kemampuannya dalam mendukung Server-Side Rendering (SSR), yang sangat membantu dalam meningkatkan SEO (Search Engine Optimization). SEO sangat penting karena dapat membantu website kamu muncul lebih tinggi di hasil pencarian Google dan mesin pencari lainnya, yang pada gilirannya dapat mendatangkan lebih banyak customer atau pengunjung secara online. Dengan SSR, Next.js memungkinkan halaman web untuk dirender di server terlebih dahulu sebelum dikirim ke browser pengguna. Hal ini memastikan bahwa search engine bots dapat mengindeks halaman dengan lebih efektif karena konten sudah siap di server, bukan hanya berupa kode JavaScript yang harus diinterpretasi di browser. Selain itu, kamu bisa memastikan bahwa metadata penting seperti title, description, dan open graph tags sudah tersedia sejak awal, yang akan membantu meningkatkan nilai SEO secara keseluruhan. Jadi, bagi para developer yang ingin membangun website dengan performa SEO yang lebih baik, Next.js adalah pilihan yang sangat kuat karena framework ini memang didesain untuk memberikan performa yang optimal dan pengalaman yang baik bagi pengguna dan search engine bots. Latihan Mengatur SEO pada Proyek Website Jual Mobil Online Pada artikel ini, kita akan berlatih mengatur SEO untuk sebuah proyek website jual mobil online menggunakan Next.js. Ini adalah langkah penting untuk mempersiapkan diri menjadi seorang frontend developer yang matang. Mengatur SEO dengan baik adalah salah satu keterampilan yang sangat berharga dalam dunia web development, terutama karena SEO dapat membantu website kamu lebih mudah ditemukan oleh calon pembeli di mesin pencari seperti Google. Dengan memanfaatkan kemampuan Server-Side Rendering (SSR) di Next.js, kita bisa memastikan bahwa website jual mobil kita dioptimalkan untuk SEO, sehingga mampu mendatangkan lebih banyak traffic organik secara online. Latihan ini akan membekali kamu dengan keterampilan praktis yang bisa langsung diterapkan pada proyek-proyek profesional lainnya, terutama untuk website yang memerlukan pengaturan SEO yang kuat agar dapat bersaing di dunia digital. Cara Menginstall Proyek Next.js 14 App Router Terbaru Sebelum memulai, pastikan kamu sudah menginstal Node.js di komputer kamu. Jika belum, kamu bisa download dan menginstalnya dari Node.js website. Setelah itu, kita akan menggunakan npx untuk membuat proyek Next.js dengan App Router terbaru. Berikut langkah-langkah lengkapnya: Buka terminal atau command prompt di komputer kamu.Jalankan perintah berikut untuk membuat proyek Next.js dengan App Router terbaru: npx create-next-app@latest my-car-shop --use-app-router Setelah perintah ini dijalankan, kamu akan diminta untuk memasukkan beberapa informasi seperti: Nama proyek: Kamu bisa menekan Enter untuk menggunakan nama default atau mengetik nama lain.Apakah kamu ingin menggunakan TypeScript: Pilih 'Yes' atau 'No' tergantung preferensi kamu.Apakah ingin menggunakan ESLint: Pilih 'Yes' jika kamu ingin menambahkan linting pada proyek.Apakah ingin menggunakan Tailwind CSS: Pilih 'Yes' atau 'No' tergantung kebutuhan proyek.Apakah ingin menggunakan src directory: Pilih 'Yes' atau 'No' tergantung struktur folder yang kamu inginkan.Apakah ingin mengkonfigurasi test setup: Pilih 'Yes' jika kamu ingin menambahkan testing.Apakah ingin menggunakan import alias: Pilih 'Yes' jika kamu ingin mengatur alias pada import file. Setelah semua pilihan dijawab, proses instalasi akan berjalan dan proyek Next.js kamu akan siap.Setelah proyek berhasil dibuat, masuk ke folder proyek dengan perintah: cd my-car-shop Untuk menjalankan proyek di server lokal, gunakan perintah berikut: npm run dev Buka browser dan akses proyek kamu di http://localhost:3000. Dengan langkah-langkah ini, kamu sudah berhasil menginstal Next.js 14 dengan App Router terbaru dan siap untuk memulai pengembangan proyek website jual mobil online. Cara Membuat Halaman page.tsx untuk Daftar Mobil dan Detail Mobil dengan Slug di Next.js Setelah berhasil menginstal proyek Next.js 14 dengan App Router, kita akan membuat halaman daftar mobil dan detail mobil menggunakan dummy data. Langkah ini akan menunjukkan cara menggunakan slug untuk mengakses detail setiap mobil. 1. Membuat Halaman Daftar Mobil di Folder cars Pertama, buat folder cars di dalam folder app untuk menyimpan halaman daftar mobil. Di dalam folder ini, kita akan membuat file page.tsx yang akan menampilkan semua mobil dari dummy data. Buat file page.tsx di folder app/cars dan tambahkan kode berikut: // app/cars/page.tsx import Link from 'next/link'; const cars = [ { id: 1, name: 'Toyota Avanza', slug: 'toyota-avanza', price: 150000000 }, { id: 2, name: 'Honda Civic', slug: 'honda-civic', price: 300000000 }, { id: 3, name: 'Suzuki Swift', slug: 'suzuki-swift', price: 200000000 }, ]; const CarsPage = () => { return ( <div> <h1>Daftar Mobil Dijual</h1> <ul> {cars.map((car) => ( <li key={car.id}> <Link href={`/cars/${car.slug}`}> {car.name} - Rp {car.price.toLocaleString()} </Link> </li> ))} </ul> </div> ); }; export default CarsPage; Pada kode di atas, kita membuat array cars yang berisi beberapa dummy data mobil dengan id, name, slug, dan price. Kemudian, kita menggunakan map() untuk menampilkan daftar mobil dan membuat link untuk setiap mobil yang akan menuju ke halaman detail berdasarkan slug. 2. Membuat Halaman Detail Mobil dengan Slug Selanjutnya, kita akan membuat halaman detail mobil yang bisa diakses menggunakan slug. Buat folder [slug] di dalam folder cars, lalu buat file page.tsx di dalam folder tersebut. Berikut adalah kode untuk menampilkan detail mobil berdasarkan slug: // app/cars/[slug]/page.tsx import { useParams } from 'next/navigation'; const cars = [ { id: 1, name: 'Toyota Avanza', slug: 'toyota-avanza', price: 150000000, description: 'Toyota Avanza adalah mobil keluarga yang sangat populer di Indonesia.' }, { id: 2, name: 'Honda Civic', slug: 'honda-civic', price: 300000000, description: 'Honda Civic menawarkan desain sporty dan performa mesin yang tangguh.' }, { id: 3, name: 'Suzuki Swift', slug: 'suzuki-swift', price: 200000000, description: 'Suzuki Swift adalah hatchback dengan desain compact dan efisiensi bahan bakar yang baik.' }, ]; const CarDetailPage = () => { const params = useParams(); const car = cars.find((car) => car.slug === params.slug); if (!car) { return <div>Mobil tidak ditemukan</div>; } return ( <div> <h1>{car.name}</h1> <p>Harga: Rp {car.price.toLocaleString()}</p> <p>{car.description}</p> </div> ); }; export default CarDetailPage; Di halaman ini, kita menggunakan useParams dari next/navigation untuk mengambil slug dari URL dan mencocokkannya dengan dummy data mobil. Jika slug ditemukan, kita akan menampilkan detail mobil, termasuk nama, harga, dan deskripsi. Jika tidak ditemukan, kita akan menampilkan pesan "Mobil tidak ditemukan". Dengan langkah ini, kamu sudah berhasil membuat dua halaman: satu untuk menampilkan daftar mobil, dan satu lagi untuk menampilkan detail mobil berdasarkan slug. Mengimplementasikan generateMetadata untuk Meningkatkan SEO di Halaman Cars dan Detail Car Dalam Next.js, kita dapat menggunakan fungsi generateMetadata untuk meningkatkan SEO dengan menambahkan meta tags seperti title, description, dan keywords secara dinamis. Ini sangat membantu dalam memberikan informasi yang relevan kepada mesin pencari dan dapat meningkatkan peringkat website. 1. Mengimplementasikan generateMetadata di Halaman Cars Untuk meningkatkan SEO di halaman daftar mobil, kita bisa menambahkan metadata seperti title dan description. Berikut adalah cara mengimplementasikan generateMetadata di file page.tsx pada folder cars: // app/cars/page.tsx import Link from 'next/link'; const cars = [ { id: 1, name: 'Toyota Avanza', slug: 'toyota-avanza', price: 150000000 }, { id: 2, name: 'Honda Civic', slug: 'honda-civic', price: 300000000 }, { id: 3, name: 'Suzuki Swift', slug: 'suzuki-swift', price: 200000000 }, ]; // Fungsi generateMetadata untuk meningkatkan SEO export async function generateMetadata() { return { title: 'Daftar Mobil Dijual - Jual Mobil Online', description: 'Temukan berbagai mobil bekas dan baru yang dijual dengan harga terbaik di website kami.', }; } const CarsPage = () => { return ( <div> <h1>Daftar Mobil Dijual</h1> <ul> {cars.map((car) => ( <li key={car.id}> <Link href={`/cars/${car.slug}`}> {car.name} - Rp {car.price.toLocaleString()} </Link> </li> ))} </ul> </div> ); }; export default CarsPage; Pada kode di atas, kita menambahkan fungsi generateMetadata yang mengembalikan objek metadata. title diatur untuk menampilkan judul halaman yang relevan, sedangkan description berisi deskripsi singkat yang dapat membantu mesin pencari memahami konten halaman. 2. Mengimplementasikan generateMetadata di Halaman Detail Mobil dengan Slug Untuk halaman detail mobil, kita bisa mengatur metadata yang dinamis berdasarkan slug mobil. Dengan cara ini, setiap mobil akan memiliki SEO yang unik dan relevan. Berikut adalah cara menambahkan generateMetadata pada file page.tsx di dalam folder [slug]: // app/cars/[slug]/page.tsx import { useParams } from 'next/navigation'; const cars = [ { id: 1, name: 'Toyota Avanza', slug: 'toyota-avanza', price: 150000000, description: 'Toyota Avanza adalah mobil keluarga yang sangat populer di Indonesia.' }, { id: 2, name: 'Honda Civic', slug: 'honda-civic', price: 300000000, description: 'Honda Civic menawarkan desain sporty dan performa mesin yang tangguh.' }, { id: 3, name: 'Suzuki Swift', slug: 'suzuki-swift', price: 200000000, description: 'Suzuki Swift adalah hatchback dengan desain compact dan efisiensi bahan bakar yang baik.' }, ]; // Fungsi generateMetadata untuk setiap mobil berdasarkan slug export async function generateMetadata({ params }) { const car = cars.find((car) => car.slug === params.slug); if (car) { return { title: `${car.name} - Jual Mobil Online`, description: `Beli ${car.name} dengan harga Rp ${car.price.toLocaleString()} hanya di website kami. ${car.description}`, }; } return { title: 'Mobil Tidak Ditemukan', description: 'Mobil yang Anda cari tidak tersedia di website kami.', }; } const CarDetailPage = () => { const params = useParams(); const car = cars.find((car) => car.slug === params.slug); if (!car) { return <div>Mobil tidak ditemukan</div>; } return ( <div> <h1>{car.name}</h1> <p>Harga: Rp {car.price.toLocaleString()}</p> <p>{car.description}</p> </div> ); }; export default CarDetailPage; Di halaman detail mobil, kita menggunakan parameter slug untuk menemukan data mobil dari array cars. Fungsi generateMetadata mengembalikan metadata yang unik untuk setiap mobil, seperti title dan description, berdasarkan informasi dari dummy data. Jika mobil tidak ditemukan, metadata akan diatur untuk menunjukkan bahwa mobil tersebut tidak ada. Dengan cara ini, setiap halaman detail mobil memiliki metadata yang relevan untuk SEO, sehingga membantu mesin pencari memberikan informasi yang lebih akurat dan meningkatkan peluang website ditemukan oleh calon pembeli. Tips Meningkatkan SEO Organik pada Proyek Next.js SEO organik sangat penting untuk meningkatkan visibilitas website di mesin pencari seperti Google tanpa menggunakan iklan berbayar. Berikut adalah tiga tips praktis yang bisa kamu terapkan pada proyek Next.js untuk meningkatkan SEO organik, dilengkapi dengan contoh koding yang relevan. 1. Menggunakan generateMetadata untuk Meta Tags Dinamis Mengoptimalkan meta tags seperti title, description, dan keywords pada setiap halaman website adalah salah satu cara terbaik untuk meningkatkan SEO organik. Dengan Next.js, kamu bisa menggunakan fungsi generateMetadata untuk membuat meta tags yang dinamis berdasarkan konten halaman. Ini membantu mesin pencari memahami konten halaman dengan lebih baik. Contoh kode: // app/products/[slug]/page.tsx import { useParams } from 'next/navigation'; const products = [ { id: 1, name: 'Laptop Gaming', slug: 'laptop-gaming', price: 15000000, description: 'Laptop Gaming dengan performa tinggi untuk bermain game.' }, { id: 2, name: 'Smartphone 5G', slug: 'smartphone-5g', price: 8000000, description: 'Smartphone dengan teknologi 5G terbaru dan kamera canggih.' }, ]; export async function generateMetadata({ params }) { const product = products.find((p) => p.slug === params.slug); if (product) { return { title: `${product.name} - Produk Terbaik`, description: `${product.name} dengan harga Rp ${product.price.toLocaleString()}. ${product.description}`, }; } return { title: 'Produk Tidak Ditemukan', description: 'Produk yang Anda cari tidak tersedia.', }; } const ProductDetail = () => { const params = useParams(); const product = products.find((p) => p.slug === params.slug); if (!product) { return <div>Produk tidak ditemukan</div>; } return ( <div> <h1>{product.name}</h1> <p>Harga: Rp {product.price.toLocaleString()}</p> <p>{product.description}</p> </div> ); }; export default ProductDetail; Dengan generateMetadata, setiap halaman produk memiliki meta tags yang spesifik dan relevan, yang akan membantu meningkatkan SEO untuk halaman tersebut. 2. Mengoptimalkan Penggunaan Heading Tags Penggunaan heading tags seperti <h1>, <h2>, dan seterusnya sangat penting untuk membantu mesin pencari memahami struktur konten website. Pastikan setiap halaman memiliki hanya satu <h1> tag yang menggambarkan konten utama, dan gunakan heading lain untuk mendukung struktur konten. Contoh kode: // app/about/page.tsx const AboutPage = () => { return ( <div> <h1>Tentang Kami</h1> <p>Kami adalah perusahaan teknologi yang menyediakan produk-produk terbaik untuk kebutuhan Anda.</p> <h2>Misi Kami</h2> <p>Misi kami adalah memberikan produk berkualitas tinggi dengan layanan terbaik kepada pelanggan kami.</p> <h2>Visi Kami</h2> <p>Visi kami adalah menjadi pemimpin dalam inovasi teknologi dan solusi digital di pasar global.</p> </div> ); }; export default AboutPage; Dengan struktur heading yang jelas dan konsisten, konten website lebih mudah diindeks oleh mesin pencari, yang dapat meningkatkan SEO organik. 3. Menyediakan Sitemap untuk Mempermudah Indeksasi Sitemap adalah file XML yang memberikan informasi kepada mesin pencari tentang halaman-halaman penting di website. Dengan Next.js, kamu bisa membuat sitemap secara otomatis untuk membantu meningkatkan indeksasi konten oleh mesin pencari, yang pada akhirnya meningkatkan SEO organik. Contoh kode untuk membuat sitemap di Next.js: // pages/sitemap.xml.tsx import { GetServerSideProps } from 'next'; import { format } from 'date-fns'; const Sitemap = () => null; export const getServerSideProps: GetServerSideProps = async ({ res }) => { const baseUrl = '<https://yourwebsite.com>'; const today = format(new Date(), 'yyyy-MM-dd'); const staticPages = [ `${baseUrl}/`, `${baseUrl}/about`, `${baseUrl}/products`, ]; const sitemap = `<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="<http://www.sitemaps.org/schemas/sitemap/0.9>"> ${staticPages .map((url) => { return ` <url> <loc>${url}</loc> <lastmod>${today}</lastmod> </url> `; }) .join('')} </urlset>`; res.setHeader('Content-Type', 'text/xml'); res.write(sitemap); res.end(); return { props: {}, }; }; export default Sitemap; Dengan menyediakan sitemap, kamu memberi petunjuk kepada mesin pencari tentang halaman mana yang harus diindeks, yang dapat mempercepat proses indeksasi dan membantu SEO organik. Kesalahan Utama Ketika Memelihara SEO pada Proyek Next.js Memelihara SEO pada proyek Next.js membutuhkan perhatian khusus untuk memastikan bahwa mesin pencari dapat mengindeks dan menampilkan konten dengan baik. Namun, ada beberapa kesalahan umum yang sering dilakukan, yang dapat mengurangi efektivitas SEO. Berikut adalah tiga kesalahan utama yang harus dihindari, dilengkapi dengan contoh koding lengkap. 1. Tidak Menggunakan Meta Tags Dinamis Salah satu kesalahan terbesar adalah tidak memanfaatkan meta tags dinamis pada halaman yang berbeda. Meta tags seperti title, description, dan keywords sangat penting untuk SEO. Jika semua halaman menggunakan meta tags yang sama, maka mesin pencari tidak dapat memahami perbedaan konten antara satu halaman dengan yang lainnya. Contoh kesalahan: // app/products/page.tsx export default function ProductsPage() { return ( <div> <h1>Daftar Produk</h1> <p>Temukan berbagai produk di toko kami.</p> </div> ); } // Tidak ada meta tags dinamis untuk mengoptimalkan SEO di halaman ini. Contoh perbaikan: // app/products/page.tsx export async function generateMetadata() { return { title: 'Daftar Produk - Toko Online Terbaik', description: 'Jelajahi koleksi produk terbaru dan terbaik hanya di toko online kami.', }; } export default function ProductsPage() { return ( <div> <h1>Daftar Produk</h1> <p>Temukan berbagai produk di toko kami.</p> </div> ); } Dengan menggunakan generateMetadata, setiap halaman memiliki meta tags yang unik dan relevan, yang membantu mesin pencari mengindeks konten secara lebih baik. 2. Tidak Mengoptimalkan Struktur Heading Kesalahan lain yang sering dilakukan adalah menggunakan struktur heading (<h1>, <h2>, dll.) secara sembarangan. Setiap halaman harus memiliki satu <h1> tag yang menggambarkan konten utama, dan heading lainnya digunakan untuk mendukung struktur konten. Penggunaan heading yang berlebihan atau tidak konsisten dapat membingungkan mesin pencari. Contoh kesalahan: // app/about/page.tsx export default function AboutPage() { return ( <div> <h2>Tentang Kami</h2> <p>Kami menyediakan berbagai produk berkualitas tinggi.</p> <h2>Misi Kami</h2> <p>Memberikan layanan terbaik kepada pelanggan.</p> </div> ); } // Tidak ada penggunaan <h1>, dan <h2> digunakan lebih dari satu kali di satu level konten. Contoh perbaikan: // app/about/page.tsx export default function AboutPage() { return ( <div> <h1>Tentang Kami</h1> <p>Kami menyediakan berbagai produk berkualitas tinggi.</p> <h2>Misi Kami</h2> <p>Memberikan layanan terbaik kepada pelanggan.</p> </div> ); } Dengan menempatkan <h1> pada judul utama dan menggunakan <h2> secara tepat untuk subjudul, struktur halaman lebih mudah dipahami oleh mesin pencari. 3. Tidak Menyediakan Tautan Internal yang Relevan Kesalahan lain yang sering terjadi adalah mengabaikan penggunaan tautan internal. Tautan internal membantu mesin pencari untuk menjelajahi dan mengindeks seluruh halaman website dengan lebih baik. Menggunakan tautan internal yang relevan juga dapat meningkatkan pengalaman pengguna dengan memudahkan navigasi antarhalaman. Contoh kesalahan: // app/home/page.tsx export default function HomePage() { return ( <div> <h1>Selamat Datang di Toko Kami</h1> <p>Kami menyediakan berbagai macam produk berkualitas tinggi.</p> </div> ); } // Tidak ada tautan internal yang membantu pengguna menjelajahi halaman lain. Contoh perbaikan: // app/home/page.tsx import Link from 'next/link'; export default function HomePage() { return ( <div> <h1>Selamat Datang di Toko Kami</h1> <p>Kami menyediakan berbagai macam produk berkualitas tinggi.</p> <Link href="/products">Lihat Daftar Produk</Link> </div> ); } Dengan menambahkan tautan internal, mesin pencari lebih mudah menavigasi situs dan mengindeks halaman-halaman lain yang relevan. Tautan ini juga meningkatkan interaksi pengguna di website. Penutup Dengan memahami dan menerapkan cara-cara untuk meningkatkan SEO pada proyek Next.js, kamu sudah berada di jalur yang tepat untuk membangun website yang lebih mudah ditemukan di mesin pencari dan mendatangkan lebih banyak pengunjung secara organik. Namun, perjalanan belajar tidak berhenti di sini. Kamu bisa terus mengembangkan kemampuanmu dengan bergabung di BuildWithAngga. Di BuildWithAngga, kamu bisa belajar bersama mentor expert yang akan membantu kamu memahami lebih dalam tentang web development dan SEO. Selain itu, kamu akan mendapatkan banyak benefit, seperti akses selamanya ke materi pembelajaran, portfolio berkualitas yang siap memukau calon klien atau perusahaan, konsultasi langsung dengan mentor untuk mengatasi masalah teknis, serta benefit menarik lainnya yang akan mempercepat proses belajar kamu. Mari tingkatkan kemampuan coding dan wujudkan impianmu bersama BuildWithAngga!

Routing merupakan salah satu komponen penting dalam setiap projek website. Dengan routing yang baik, pengguna dapat mengakses halaman-halaman di dalam website dengan lebih mudah, memberikan pengalaman yang nyaman dan responsif. Routing yang tertata dengan baik juga membantu developer dalam mengelola navigasi antar halaman, sehingga setiap bagian dari website bisa diakses secara efisien. Pentingnya routing membuat developer harus memilih dan menerapkan metode routing yang sesuai dengan kebutuhan projek web development mereka. Next.js hadir sebagai salah satu framework JavaScript modern yang sangat populer dan mendukung konsep file-based routing. Ini berarti setiap file yang diletakkan di dalam folder tertentu secara otomatis menjadi rute yang bisa diakses pada URL. Dalam Next.js 14, ada dua konsep utama terkait routing yang perlu dipahami, yaitu App Router dan Pages Router. Kedua konsep ini memiliki tujuan yang sama, yaitu mengelola navigasi halaman, namun dengan cara kerja yang berbeda. Pada artikel ini, kita akan membahas secara singkat mengenai perbedaan kedua jenis router tersebut untuk membantu pemula memahami bagaimana mereka bekerja di dalam Next.js 14. Apa Itu App Router di Next.js? App Router di Next.js adalah pendekatan modern untuk pengelolaan routing yang diperkenalkan mulai dari Next.js 13 dan semakin dikembangkan di versi Next.js 14. Tidak seperti Pages Router yang menggunakan folder pages, App Router bekerja dengan folder app, di mana setiap file di dalamnya secara otomatis menjadi rute di aplikasi. Konsep ini menawarkan pendekatan yang lebih fleksibel dan modular dalam pengelolaan rute, serta mendukung fitur-fitur canggih seperti React Server Components dan nested routing. Berikut contoh bagaimana cara membuat beberapa rute dengan App Router: // app/page.tsx import React from 'react'; const HomePage = () => { return ( <div> <h1>Selamat Datang di Home Page</h1> <p>Ini adalah halaman utama menggunakan App Router di Next.js 14.</p> </div> ); } export default HomePage; Pada contoh di atas, file page.tsx yang berada di folder app secara otomatis menjadi halaman utama yang diakses melalui rute /. Ini menunjukkan betapa mudahnya membuat rute di App Router tanpa perlu konfigurasi yang rumit. Jika Anda ingin membuat halaman lain seperti halaman "Tentang", cukup tambahkan file baru: // app/about/page.tsx import React from 'react'; const AboutPage = () => { return ( <div> <h1>Halaman Tentang</h1> <p>Ini adalah halaman tentang menggunakan App Router di Next.js 14.</p> </div> ); } export default AboutPage; Dengan struktur ini, halaman About akan dapat diakses melalui /about tanpa tambahan konfigurasi apa pun. Anda juga bisa membuat subrute dengan struktur file yang lebih dalam. Misalnya, untuk halaman produk dengan subrute: // app/products/[id]/page.tsx import React from 'react'; const ProductDetail = ({ params }: { params: { id: string } }) => { return ( <div> <h1>Detail Produk {params.id}</h1> <p>Informasi produk dengan ID {params.id}.</p> </div> ); } export default ProductDetail; File di atas akan menghasilkan rute dinamis untuk halaman detail produk yang dapat diakses melalui /products/[id], di mana [id] adalah parameter dinamis. Misalnya, jika Anda ingin melihat produk dengan ID 123, Anda dapat mengakses /products/123. Beberapa keuntungan lain menggunakan App Router di Next.js 14 adalah: Modular dan Terorganisir: Struktur rute lebih rapi dengan memisahkan file berdasarkan fungsinya. Contohnya, logika untuk data fetching dapat dipisah ke dalam komponen server, sedangkan UI klien tetap di komponen klien.Optimisasi Performa: Dengan React Server Components, bagian tertentu dari halaman bisa dirender di server dan dikirim ke klien, mengurangi waktu loading di browser.Nested Routes: Mendukung pembuatan rute bertingkat (nested routes), yang sangat membantu ketika membuat struktur halaman yang kompleks seperti aplikasi e-commerce dengan halaman produk, ulasan, dan kategori. Dengan semua fitur yang ditawarkan, App Router cocok digunakan dalam proyek yang membutuhkan pengelolaan rute yang lebih kompleks dan performa tinggi. Perbandingan App Router vs Pages Router di Next.js 14 KriteriaApp RouterPages RouterFlexibilitySangat fleksibel, mendukung React Server Components dan nested routing. Misalnya, jika Anda memiliki halaman produk dengan subhalaman untuk ulasan dan detail produk, App Router memungkinkan Anda membuat struktur seperti /product/[id]/reviews dan /product/[id]/details dengan mudah.Fleksibilitas lebih terbatas, namun tetap mendukung kebutuhan routing sederhana seperti /about atau /contact. Misalnya, aplikasi portofolio atau landing page dapat dikelola dengan mudah menggunakan Pages Router.Folder StructureMenggunakan folder app, setiap file atau folder di dalamnya otomatis menjadi rute. Sebagai contoh, app/blog/page.tsx akan menjadi /blog di URL. Folder terstruktur dengan baik, memungkinkan pemisahan logika server dan klien secara terorganisir.Menggunakan folder pages, di mana setiap file di dalamnya langsung menjadi rute. Misalnya, file pages/about.js akan otomatis menjadi /about. Struktur ini lebih sederhana, memudahkan developer untuk melihat secara langsung rute yang tersedia dalam aplikasi.Use Case ScenarioCocok untuk aplikasi dengan rute kompleks, seperti aplikasi e-commerce atau sistem manajemen yang memiliki banyak halaman dinamis, termasuk integrasi SSR dan SSG untuk optimasi performa.Cocok untuk aplikasi kecil hingga menengah, seperti blog sederhana, portofolio, atau aplikasi satu halaman (SPA) yang tidak memerlukan struktur rute yang kompleks atau fitur SSR yang rumit. Dengan App Router, Anda mendapatkan kontrol yang lebih baik dalam hal pembagian komponen server dan klien, sedangkan Pages Router lebih cocok untuk aplikasi yang membutuhkan setup cepat dengan rute yang sederhana. Contoh Struktur Folder Lengkap: App Router vs Pages Router Berikut adalah contoh struktur folder lengkap untuk App Router dan Pages Router di Next.js agar lebih jelas bagaimana kedua pendekatan ini diimplementasikan dalam proyek. Struktur Folder: App Router Pada App Router, semua file rute diletakkan di dalam folder app. Setiap file atau folder di dalamnya secara otomatis menjadi rute sesuai dengan struktur folder tersebut. my-next-app/ ├── app/ │ ├── layout.tsx // Layout utama untuk semua halaman │ ├── page.tsx // Halaman utama (rute "/") │ ├── about/ │ │ └── page.tsx // Halaman tentang (rute "/about") │ ├── products/ │ │ ├── page.tsx // Halaman produk (rute "/products") │ │ └── [id]/ │ │ └── page.tsx // Halaman detail produk dengan ID dinamis (rute "/products/[id]") │ ├── blog/ │ │ ├── layout.tsx // Layout khusus untuk semua halaman blog │ │ ├── page.tsx // Halaman utama blog (rute "/blog") │ │ └── [slug]/ │ │ └── page.tsx // Halaman artikel blog dinamis (rute "/blog/[slug]") ├── public/ │ └── favicon.ico // Ikon situs ├── styles/ │ └── globals.css // CSS global └── next.config.js // Konfigurasi Next.js Pada struktur di atas: File layout.tsx digunakan untuk mendefinisikan layout yang bisa digunakan di seluruh halaman dalam app.Folder dinamis menggunakan tanda kurung seperti [id] dan [slug] untuk mendukung rute dinamis.Setiap halaman, seperti about/page.tsx, secara otomatis diakses melalui URL yang sesuai dengan struktur foldernya. Struktur Folder: Pages Router Untuk Pages Router, semua file rute diletakkan di dalam folder pages. Setiap file di dalam folder ini menjadi rute otomatis berdasarkan nama file atau folder tersebut. my-next-app/ ├── pages/ │ ├── index.js // Halaman utama (rute "/") │ ├── about.js // Halaman tentang (rute "/about") │ ├── products/ │ │ └── index.js // Halaman produk (rute "/products") │ ├── products/ │ │ └── [id].js // Halaman detail produk dengan ID dinamis (rute "/products/[id]") │ ├── blog/ │ │ ├── index.js // Halaman utama blog (rute "/blog") │ │ └── [slug].js // Halaman artikel blog dinamis (rute "/blog/[slug]") ├── public/ │ └── favicon.ico // Ikon situs ├── styles/ │ └── globals.css // CSS global └── next.config.js // Konfigurasi Next.js Pada struktur di atas: File index.js di dalam pages menjadi halaman utama yang dapat diakses melalui /.Rute dinamis ditangani dengan file [id].js atau [slug].js, mirip dengan App Router.Tidak ada layout terpisah seperti di App Router, sehingga struktur ini lebih sederhana dan langsung. Fitur Segments di App Router Next.js Segments dalam App Router di Next.js adalah bagian dari URL yang dipisahkan oleh garis miring /. Setiap segmen ini dapat berupa rute statis atau dinamis. Dalam App Router, Anda dapat memanfaatkan segmen untuk membagi dan mengatur rute menjadi lebih modular dan fleksibel, termasuk dukungan untuk rute dinamis, parameter opsional, dan pengelompokan. Berikut beberapa konsep segmen yang bisa diterapkan di App Router: Static Segment: Rute statis seperti /products atau /about.Dynamic Segment: Rute dengan parameter dinamis seperti /products/[id].Optional Segment: Segmen opsional yang mungkin ada atau tidak dalam URL.Parallel Routes: Menangani beberapa segmen yang dapat muncul secara paralel. Contoh Penerapan Segments di App Router Kita akan melihat contoh bagaimana segmen bekerja di App Router dengan mengimplementasikan rute untuk produk dengan ID dinamis dan kategori opsional. Struktur Folder: app/ ├── products/ │ ├── [id]/ │ │ ├── page.tsx // Halaman detail produk │ │ └── [category]/ │ └── page.tsx // Halaman produk dengan kategori opsional Rute Dinamis (Dynamic Segment) untuk Produk Berdasarkan ID: // app/products/[id]/page.tsx import React from 'react'; const ProductDetail = ({ params }: { params: { id: string } }) => { return ( <div> <h1>Detail Produk {params.id}</h1> <p>Informasi lengkap tentang produk dengan ID {params.id}.</p> </div> ); } export default ProductDetail; Pada contoh ini, segmen [id] digunakan untuk menangani rute dinamis. Ketika pengguna mengakses /products/123, halaman ini akan menampilkan informasi produk dengan ID 123. Segmen dinamis [id] memungkinkan rute ini menangani berbagai nilai ID tanpa membuat rute statis untuk setiap produk. Segmen Opsional (Optional Segment) untuk Kategori: // app/products/[id]/[category]/page.tsx import React from 'react'; const ProductCategory = ({ params }: { params: { id: string; category?: string } }) => { return ( <div> <h1>Produk {params.id}</h1> {params.category ? ( <p>Kategori: {params.category}</p> ) : ( <p>Produk ini tidak memiliki kategori khusus.</p> )} </div> ); } export default ProductCategory; Di sini, kita menambahkan segmen [category] di dalam rute [id] untuk menangani kategori produk yang mungkin opsional. Ketika pengguna mengakses /products/123/electronics, kategori electronics akan ditampilkan. Namun, jika hanya mengakses /products/123, maka produk akan tetap ditampilkan tanpa kategori, dan pesan default akan diberikan. Kesimpulan Static Segment digunakan untuk rute yang selalu sama, seperti /products atau /about.Dynamic Segment memungkinkan Anda menangani berbagai nilai, seperti ID produk atau nama kategori, tanpa membuat rute statis untuk setiap variasi.Optional Segment digunakan untuk menangani bagian URL yang mungkin ada atau tidak, sehingga Anda bisa membuat rute yang lebih fleksibel. Dengan fitur segments di App Router, Anda dapat membangun rute yang lebih dinamis dan modular, mengurangi kompleksitas dalam menangani URL yang bervariasi dalam aplikasi Anda. Apa Itu Dynamic Routes? Dynamic routes adalah rute yang memungkinkan URL untuk menangani parameter dinamis. Contohnya, dalam sebuah aplikasi e-commerce, halaman detail produk mungkin perlu menangani URL seperti /products/123, di mana 123 adalah ID dari produk tersebut. Dengan dynamic routes, Anda dapat membuat satu rute yang menangani berbagai nilai dinamis, seperti ID atau slug produk, tanpa perlu membuat rute terpisah untuk setiap produk. Dynamic routes sangat berguna ketika Anda memiliki data yang bervariasi, seperti postingan blog, produk, atau pengguna, yang diakses melalui URL dinamis. Dynamic Routes di App Router Dalam App Router di Next.js, dynamic routes diimplementasikan dengan membuat folder yang menggunakan tanda kurung ([ ]) di sekitar nama parameter dinamis. Misalnya, jika Anda ingin membuat rute dinamis untuk detail produk berdasarkan ID, Anda bisa membuat folder [id]. Berikut adalah contoh implementasi dynamic routes di App Router: // app/products/[id]/page.tsx import React from 'react'; const ProductDetail = ({ params }: { params: { id: string } }) => { return ( <div> <h1>Detail Produk {params.id}</h1> <p>Ini adalah informasi produk dengan ID {params.id}.</p> </div> ); } export default ProductDetail; Pada contoh di atas: Folder products berisi folder dinamis [id].File page.tsx di dalam folder [id] akan menangani URL seperti /products/123, di mana 123 adalah nilai dinamis untuk ID produk.Parameter dinamis id diakses melalui properti params, yang secara otomatis diteruskan ke komponen oleh Next.js. Anda dapat menambahkan rute dinamis tambahan dengan struktur folder yang lebih dalam, seperti /products/[id]/reviews, menggunakan folder dinamis lainnya seperti [id] di dalam products. Dynamic Routes di Pages Router Dalam Pages Router, dynamic routes juga diimplementasikan dengan membuat file menggunakan tanda kurung ([ ]). Namun, daripada menggunakan folder, Anda akan membuat file dengan nama parameter dinamis di dalam folder pages. Berikut adalah contoh implementasi dynamic routes di Pages Router: // pages/products/[id].js import React from 'react'; import { useRouter } from 'next/router'; const ProductDetail = () => { const router = useRouter(); const { id } = router.query; return ( <div> <h1>Detail Produk {id}</h1> <p>Ini adalah informasi produk dengan ID {id}.</p> </div> ); } export default ProductDetail; Pada contoh di atas: File [id].js di dalam folder products menangani rute dinamis untuk produk berdasarkan ID, seperti /products/123.Untuk mendapatkan nilai dinamis dari URL, digunakan hook useRouter dari Next.js. router.query.id memberikan akses ke parameter id dari URL. Dynamic routes di Pages Router bekerja mirip dengan App Router, tetapi perbedaannya terletak pada struktur folder dan cara pengambilan parameter dari URL (menggunakan useRouter() di Pages Router). Apa Itu Nested Routing? Nested routing adalah konsep di mana satu rute dapat memiliki rute anak atau subrute yang terkait. Ini berarti bahwa di dalam satu halaman atau komponen, Anda bisa memiliki beberapa bagian atau halaman lain yang diakses sebagai subrute. Nested routing sangat bermanfaat untuk aplikasi yang memiliki struktur hierarkis atau rute yang lebih kompleks, seperti aplikasi e-commerce dengan halaman produk yang memiliki tab untuk ulasan, detail, dan spesifikasi produk. Nested Routing di App Router Dalam App Router di Next.js, nested routing diimplementasikan dengan menggunakan folder bertingkat di dalam folder app. Struktur folder ini mencerminkan bagaimana rute dan subrute akan muncul di URL. Setiap folder mewakili bagian dari rute, sehingga Anda bisa dengan mudah membuat rute bertingkat. Berikut contoh implementasi nested routing di App Router: // app/products/[id]/layout.tsx import React from 'react'; const ProductLayout = ({ children }: { children: React.ReactNode }) => { return ( <div> <h1>Halaman Produk</h1> <div>{children}</div> {/* Subrute akan di-render di sini */} </div> ); } export default ProductLayout; // app/products/[id]/page.tsx import React from 'react'; const ProductDetail = ({ params }: { params: { id: string } }) => { return ( <div> <h2>Detail Produk {params.id}</h2> <p>Informasi detail tentang produk dengan ID {params.id}.</p> </div> ); } export default ProductDetail; // app/products/[id]/reviews/page.tsx import React from 'react'; const ProductReviews = ({ params }: { params: { id: string } }) => { return ( <div> <h2>Ulasan Produk {params.id}</h2> <p>Berikut adalah ulasan untuk produk dengan ID {params.id}.</p> </div> ); } export default ProductReviews; Pada struktur ini: Folder products/[id] memiliki file layout.tsx yang bertindak sebagai layout untuk semua halaman terkait produk. Komponen children di layout ini akan menampilkan halaman yang lebih spesifik seperti detail atau ulasan produk.File page.tsx di dalam folder [id] menangani rute utama produk, misalnya /products/123.Folder reviews di dalam [id] membuat rute tambahan, sehingga rute /products/123/reviews menampilkan halaman ulasan produk. Komponen ini di-render di dalam children pada ProductLayout. Dengan nested routing, Anda bisa mengatur struktur halaman yang lebih kompleks, seperti /products/123, /products/123/reviews, atau /products/123/specifications. Nested Routing di Pages Router Dalam Pages Router, nested routing juga bisa diterapkan dengan struktur folder bertingkat. Meskipun Pages Router tidak memiliki konsep layout bawaan seperti App Router, Anda bisa menggunakan komponen React biasa untuk menangani layout dan navigasi antar subhalaman. Berikut adalah contoh implementasi nested routing di Pages Router: // pages/products/[id].js import React from 'react'; import Link from 'next/link'; const ProductDetail = ({ id }) => { return ( <div> <h2>Detail Produk {id}</h2> <p>Informasi tentang produk dengan ID {id}.</p> <nav> <Link href={`/products/${id}/reviews`}>Lihat Ulasan</Link> </nav> </div> ); } export async function getServerSideProps(context) { const { id } = context.params; return { props: { id }, }; } export default ProductDetail; // pages/products/[id]/reviews.js import React from 'react'; const ProductReviews = ({ id }) => { return ( <div> <h2>Ulasan Produk {id}</h2> <p>Berikut adalah ulasan untuk produk dengan ID {id}.</p> </div> ); } export async function getServerSideProps(context) { const { id } = context.params; return { props: { id }, }; } export default ProductReviews; Pada struktur ini: File [id].js di dalam folder products menangani halaman detail produk pada rute /products/[id].Folder products/[id] berisi file reviews.js, yang menjadi subrute untuk menampilkan ulasan produk dengan rute /products/[id]/reviews.Navigasi antar subrute dilakukan melalui komponen Link di halaman utama produk. Perbedaan utamanya adalah dalam Pages Router, layout atau tampilan halaman biasanya dibuat di dalam setiap file, sedangkan di App Router, layout bisa dipisah dengan lebih modular menggunakan file layout.tsx. Kesimpulan App Router mendukung nested routing secara lebih modular dengan layout.tsx yang memungkinkan subrute di-render dalam komponen layout yang sama, sehingga lebih cocok untuk aplikasi dengan struktur rute yang kompleks.Pages Router menggunakan struktur folder yang serupa untuk nested routing, tetapi tidak memiliki fitur layout bawaan, sehingga perlu menggunakan komponen React biasa untuk mengelola tampilan antar halaman. Latihan Menerapkan App Router pada Proyek Simple E-commerce: CRUD Products dan Transaction Pada latihan ini, kita akan mencoba menerapkan App Router di Next.js untuk membangun proyek e-commerce sederhana dengan fitur CRUD untuk produk dan transaksi. Dengan menggunakan App Router, kita dapat memanfaatkan routing yang fleksibel dan modular, yang sangat cocok untuk aplikasi seperti e-commerce. Proyek ini akan terdiri dari dua bagian utama: manajemen produk (CRUD) dan transaksi. Membuat CRUD Products Untuk memulai, kita akan membuat rute untuk menampilkan daftar produk, menambahkan produk baru, mengedit produk, dan menghapus produk. Setiap rute ini akan dikelola oleh App Router di dalam folder app. Struktur Folder: app/ ├── products/ │ ├── page.tsx // Menampilkan daftar produk │ ├── create/ │ │ └── page.tsx // Menambahkan produk baru │ └── [id]/ │ ├── page.tsx // Menampilkan detail produk │ └── edit/ │ └── page.tsx // Mengedit produk Menampilkan Daftar Produk: // app/products/page.tsx import React from 'react'; const ProductsPage = () => { const products = [ { id: 1, name: 'Produk A', price: 10000 }, { id: 2, name: 'Produk B', price: 20000 }, ]; return ( <div> <h1>Daftar Produk</h1> <ul> {products.map((product) => ( <li key={product.id}> {product.name} - Rp {product.price} <a href={`/products/${product.id}`}>Detail</a> <a href={`/products/${product.id}/edit`}>Edit</a> </li> ))} </ul> <a href="/products/create">Tambah Produk Baru</a> </div> ); }; export default ProductsPage; Di halaman ini, kita menampilkan daftar produk beserta tautan untuk melihat detail produk atau mengedit produk. Menambahkan Produk Baru: // app/products/create/page.tsx import React, { useState } from 'react'; const CreateProductPage = () => { const [name, setName] = useState(''); const [price, setPrice] = useState(''); const handleSubmit = (e) => { e.preventDefault(); console.log({ name, price }); // Di sini bisa ditambahkan logika untuk menyimpan data }; return ( <div> <h1>Tambah Produk Baru</h1> <form onSubmit={handleSubmit}> <input type="text" placeholder="Nama Produk" value={name} onChange={(e) => setName(e.target.value)} /> <input type="number" placeholder="Harga Produk" value={price} onChange={(e) => setPrice(e.target.value)} /> <button type="submit">Simpan</button> </form> </div> ); }; export default CreateProductPage; Form ini memungkinkan pengguna untuk menambahkan produk baru ke dalam daftar. Anda bisa memperluas logika dengan menambahkan API untuk menyimpan data ke database. Mengedit Produk: // app/products/[id]/edit/page.tsx import React, { useState } from 'react'; const EditProductPage = ({ params }: { params: { id: string } }) => { const [name, setName] = useState('Produk A'); // Nilai awal bisa diambil dari API const [price, setPrice] = useState(10000); // Nilai awal bisa diambil dari API const handleSubmit = (e) => { e.preventDefault(); console.log({ id: params.id, name, price }); // Di sini bisa ditambahkan logika untuk mengupdate data }; return ( <div> <h1>Edit Produk {params.id}</h1> <form onSubmit={handleSubmit}> <input type="text" value={name} onChange={(e) => setName(e.target.value)} /> <input type="number" value={price} onChange={(e) => setPrice(e.target.value)} /> <button type="submit">Simpan Perubahan</button> </form> </div> ); }; export default EditProductPage; Halaman ini memungkinkan pengguna untuk mengedit produk berdasarkan ID produk. Anda bisa menggunakan API untuk mengambil dan mengupdate data produk. Membuat CRUD Transactions Selanjutnya, kita akan menambahkan rute untuk transaksi yang mengikuti pola serupa seperti manajemen produk. Struktur Folder: app/ ├── transactions/ │ ├── page.tsx // Menampilkan daftar transaksi │ ├── create/ │ │ └── page.tsx // Menambahkan transaksi baru │ └── [id]/ │ ├── page.tsx // Menampilkan detail transaksi │ └── edit/ │ └── page.tsx // Mengedit transaksi Menampilkan Daftar Transaksi: // app/transactions/page.tsx import React from 'react'; const TransactionsPage = () => { const transactions = [ { id: 1, product: 'Produk A', total: 2, amount: 20000 }, { id: 2, product: 'Produk B', total: 1, amount: 20000 }, ]; return ( <div> <h1>Daftar Transaksi</h1> <ul> {transactions.map((transaction) => ( <li key={transaction.id}> {transaction.product} - {transaction.total} item - Rp {transaction.amount} <a href={`/transactions/${transaction.id}`}>Detail</a> <a href={`/transactions/${transaction.id}/edit`}>Edit</a> </li> ))} </ul> <a href="/transactions/create">Tambah Transaksi Baru</a> </div> ); }; export default TransactionsPage; Halaman ini menampilkan daftar transaksi, dan menyediakan tautan untuk melihat detail transaksi atau mengeditnya. Menambahkan Transaksi Baru: // app/transactions/create/page.tsx import React, { useState } from 'react'; const CreateTransactionPage = () => { const [product, setProduct] = useState(''); const [total, setTotal] = useState(''); const [amount, setAmount] = useState(''); const handleSubmit = (e) => { e.preventDefault(); console.log({ product, total, amount }); // Di sini bisa ditambahkan logika untuk menyimpan data transaksi }; return ( <div> <h1>Tambah Transaksi Baru</h1> <form onSubmit={handleSubmit}> <input type="text" placeholder="Produk" value={product} onChange={(e) => setProduct(e.target.value)} /> <input type="number" placeholder="Jumlah" value={total} onChange={(e) => setTotal(e.target.value)} /> <input type="number" placeholder="Total Harga" value={amount} onChange={(e) => setAmount(e.target.value)} /> <button type="submit">Simpan</button> </form> </div> ); }; export default CreateTransactionPage; Form ini memungkinkan pengguna untuk menambahkan transaksi baru dengan memasukkan produk, jumlah, dan harga total. Dengan menggunakan App Router, Anda dapat mengelola rute secara modular, memisahkan setiap fitur (produk dan transaksi) menjadi halaman dan subrute yang terstruktur dengan baik. Contoh Kesalahan Saat Mengerjakan Routing pada Proyek Next.js Berikut adalah tiga contoh kesalahan umum yang sering terjadi ketika mengerjakan routing pada proyek Next.js, beserta contoh koding lengkapnya. Kesalahan 1: Tidak Mengatur Rute Dinamis dengan Benar Salah satu kesalahan umum adalah tidak menggunakan tanda kurung untuk parameter dinamis dalam rute. Misalnya, saat Anda ingin membuat rute dinamis untuk produk berdasarkan ID, tetapi Anda menggunakan nama file biasa, bukannya tanda kurung ([id]). Kesalahan: // app/products/id/page.tsx (Tidak menggunakan tanda kurung [id]) import React from 'react'; const ProductDetail = () => { return ( <div> <h1>Detail Produk</h1> <p>Ini adalah halaman produk tanpa parameter dinamis.</p> </div> ); } export default ProductDetail; Pada contoh ini, file id/page.tsx tidak akan menangani parameter dinamis seperti /products/123 karena Next.js menganggap id sebagai rute statis. Untuk mengatasi masalah ini, Anda harus menggunakan tanda kurung untuk membuat rute dinamis yang benar. Perbaikan: // app/products/[id]/page.tsx (Menggunakan tanda kurung [id] untuk parameter dinamis) import React from 'react'; const ProductDetail = ({ params }: { params: { id: string } }) => { return ( <div> <h1>Detail Produk {params.id}</h1> <p>Informasi produk dengan ID {params.id}.</p> </div> ); } export default ProductDetail; Kesalahan 2: Tidak Menggunakan Link dengan Benar Kesalahan lain yang sering terjadi adalah menggunakan tag <a> langsung tanpa menggunakan komponen <Link> dari Next.js. Ini bisa menyebabkan halaman direload sepenuhnya ketika berpindah halaman, padahal Next.js mendukung navigasi antar halaman secara client-side. Kesalahan: // pages/products/index.js import React from 'react'; const ProductsPage = () => { return ( <div> <h1>Daftar Produk</h1> <a href="/products/123">Lihat Detail Produk</a> {/* Ini akan menyebabkan full reload */} </div> ); } export default ProductsPage; Pada contoh ini, penggunaan <a href="/products/123"> akan menyebabkan halaman direload penuh, yang mengabaikan optimasi client-side routing dari Next.js. Perbaikan: // pages/products/index.js import React from 'react'; import Link from 'next/link'; const ProductsPage = () => { return ( <div> <h1>Daftar Produk</h1> <Link href="/products/123"> <a>Lihat Detail Produk</a> {/* Menggunakan Link untuk client-side navigation */} </Link> </div> ); } export default ProductsPage; Dengan menggunakan <Link>, Next.js akan melakukan navigasi antar halaman tanpa reload penuh, yang jauh lebih cepat dan lebih efisien. Kesalahan 3: Tidak Menyertakan Default Page di Nested Routes Ketika menggunakan nested routes, kesalahan umum lainnya adalah tidak menyertakan file page.tsx atau index.js pada rute utama, sehingga menyebabkan error saat mengakses rute induk. Kesalahan: // app/products/[id]/reviews/page.tsx (Hanya ada subrute, tapi tidak ada rute induk) import React from 'react'; const ReviewsPage = ({ params }: { params: { id: string } }) => { return ( <div> <h1>Ulasan untuk Produk {params.id}</h1> </div> ); } export default ReviewsPage; Pada contoh ini, rute /products/123/reviews akan berfungsi dengan baik, tetapi jika Anda mencoba mengakses /products/123, Anda akan mendapatkan error karena tidak ada file page.tsx di folder [id]. Perbaikan: // app/products/[id]/page.tsx (Menambahkan halaman default untuk rute induk) import React from 'react'; const ProductDetail = ({ params }: { params: { id: string } }) => { return ( <div> <h1>Detail Produk {params.id}</h1> <p>Informasi produk dengan ID {params.id}.</p> </div> ); } export default ProductDetail; Dengan menambahkan halaman default di rute induk (/products/[id]/page.tsx), Anda dapat memastikan bahwa rute /products/123 dan subrute /products/123/reviews keduanya berfungsi dengan baik. Penutup Membangun proyek dengan Next.js, terutama dalam hal routing, membutuhkan pemahaman yang baik agar aplikasi berjalan dengan efisien dan mudah dikelola. Dengan menghindari kesalahan umum dan memahami konsep seperti dynamic routes serta nested routing, Anda dapat mengembangkan aplikasi yang lebih terstruktur dan performa tinggi. Bagi Anda yang ingin memperdalam ilmu web development, termasuk dalam pengembangan aplikasi dengan Next.js, Laravel, atau framework lainnya, Anda bisa belajar bersama mentor expert di Buildwithangga. Dengan bergabung, Anda akan mendapatkan berbagai benefit menarik seperti akses selamanya ke materi pembelajaran, portofolio berkualitas yang bisa ditampilkan kepada klien atau perekrut, konsultasi langsung dengan mentor untuk mendapatkan bimbingan dan saran, serta banyak lagi manfaat lainnya yang akan membantu Anda menjadi developer yang lebih handal. Ayo, tingkatkan skill Anda dan bangun karier yang lebih baik bersama Buildwithangga!

Next.js adalah salah satu framework populer yang banyak digunakan oleh developer untuk membangun website modern, baik frontend maupun backend. Dengan Next.js, developer dapat mengelola berbagai fitur yang mendukung pembuatan website dengan performa tinggi dan pengalaman pengguna yang baik. Framework ini memudahkan developer dalam mengelola routing, server-side rendering, dan API, membuatnya menjadi pilihan utama dalam dunia web development. Menggunakan Next.js tidak hanya memberikan kelebihan pada sisi kecepatan dan kemudahan integrasi dengan tools lainnya, tapi juga menawarkan fleksibilitas bagi developer untuk menyesuaikan projek sesuai kebutuhan bisnis dan teknologi yang diinginkan. Mengapa TypeScript Cocok untuk Projek Next.js? Memilih TypeScript sebagai bahasa yang digunakan di dalam projek Next.js adalah langkah yang sangat tepat, terutama jika tujuan jangka panjang adalah menciptakan kode yang lebih aman dan mudah dikelola. TypeScript menawarkan sistem pengetikan yang lebih ketat dibandingkan JavaScript murni, sehingga meminimalkan kemungkinan terjadinya error pada saat runtime. Hal ini penting, terutama ketika bekerja dalam tim besar atau pada projek yang kompleks. Selain itu, TypeScript memudahkan developer untuk menulis kode yang lebih terstruktur dan konsisten. Dengan adanya type checking, kesalahan dalam passing data atau penggunaan fungsi dapat terdeteksi lebih awal saat proses development. Ini dapat meningkatkan produktivitas serta mengurangi waktu debugging yang diperlukan. Tata Cara Membuat Projek Next.js Terbaru Untuk memulai projek Next.js terbaru, kamu bisa menggunakan perintah sederhana dengan menggunakan terminal. Pastikan kamu sudah menginstal Node.js terlebih dahulu agar bisa menggunakan Next.js. Berikut adalah langkah-langkah untuk membuat projek Next.js menggunakan perintah di terminal: Buka terminal dan jalankan perintah berikut untuk menginstal Next.js secara global: npx create-next-app@latest my-nextjs-project Setelah proses instalasi selesai, masuk ke direktori projek yang telah dibuat: cd my-nextjs-project Kemudian, jalankan server development untuk melihat hasil dari projek Next.js: npm run dev Kamu bisa membuka browser dan mengunjungi http://localhost:3000 untuk melihat tampilan awal dari projek Next.js yang baru saja dibuat. Dengan ini, projek Next.js sudah siap untuk dikembangkan lebih lanjut. Mengenal Beberapa Tipe TypeScript: Primitive, Array, Object, Union, dan Lainnya TypeScript menyediakan berbagai jenis tipe data (types) yang membantu developer menulis kode yang lebih aman dan jelas. Beberapa tipe TypeScript yang sering digunakan adalah primitive types, array, object, dan union. Berikut penjelasannya beserta contoh kode. Primitive Types Primitive types mencakup tipe data dasar seperti string, number, boolean, dan lainnya. Ini adalah tipe data yang paling sederhana dan sering digunakan dalam pemrograman. Contoh kode: let name: string = "John Doe"; let age: number = 30; let isDeveloper: boolean = true; Array Array adalah tipe data yang dapat menyimpan banyak nilai dalam satu variabel. TypeScript memungkinkan kita untuk menentukan tipe data dari elemen-elemen di dalam array. Contoh kode: let numbers: number[] = [1, 2, 3, 4, 5]; let names: string[] = ["Alice", "Bob", "Charlie"]; Object Object digunakan untuk menyimpan data dalam bentuk pasangan key-value. Dengan TypeScript, kita bisa mendefinisikan struktur objek agar lebih jelas. Contoh kode: let person: { name: string; age: number; isDeveloper: boolean } = { name: "Jane Doe", age: 28, isDeveloper: true }; Union Union type memungkinkan sebuah variabel memiliki lebih dari satu tipe data. Ini sangat berguna ketika variabel bisa berisi beberapa jenis nilai yang berbeda. Contoh kode: let id: number | string; id = 101; // valid id = "A101"; // valid Optional Types Optional types digunakan ketika sebuah properti atau parameter bersifat opsional, artinya tidak selalu ada. Contoh kode: let user: { name: string; age?: number } = { name: "Tom" }; // age bersifat opsional Dengan berbagai tipe TypeScript ini, developer dapat membuat kode yang lebih aman, mudah dipahami, dan mudah di-maintain, terutama dalam projek Next.js yang cenderung memiliki banyak tipe data kompleks. Tata Cara Membuat Types untuk Data Products, Testimonials, Transactions, Categories Dalam Next.js yang menggunakan TypeScript, mendefinisikan types untuk berbagai data seperti produk, testimoni, transaksi, dan kategori membantu dalam menjaga struktur data yang konsisten. TypeScript memberikan kejelasan tentang bentuk data, sehingga dapat mengurangi potensi error dan meningkatkan keterbacaan kode. Berikut adalah cara membuat types untuk data tersebut. Contoh kode untuk type Products: type Product = { id: number; name: string; price: number; stock: number; description: string; categoryId: number; isFeatured: boolean; }; Type Product mencakup properti seperti id, name, price, stock, description, categoryId, dan isFeatured. Type ini mendefinisikan produk dengan lengkap, termasuk harganya (price), stok yang tersedia (stock), deskripsi produk (description), dan apakah produk ini ditampilkan sebagai produk unggulan (isFeatured). Contoh kode untuk type Testimonials: type Testimonial = { id: number; name: string; feedback: string; productId: number; rating: number; }; Type Testimonial mengelola data ulasan dari pengguna, termasuk nama pengguna (name), ulasan (feedback), serta ID produk (productId) dan rating (rating). Contoh kode untuk type Transactions: type Transaction = { id: number; productId: number; userId: number; quantity: number; totalAmount: number; transactionDate: string; }; Type Transaction menggambarkan transaksi yang terjadi di aplikasi, termasuk ID produk (productId), ID pengguna (userId), jumlah produk yang dibeli (quantity), total harga (totalAmount), dan tanggal transaksi (transactionDate). Contoh kode untuk type Categories: type Category = { id: number; name: string; totalProducts: number; isPopular: boolean; }; Type Category mendefinisikan kategori produk dengan atribut seperti id, name, jumlah produk dalam kategori (totalProducts), dan apakah kategori ini populer (isPopular). Dengan type di atas, kamu bisa memastikan bahwa data yang digunakan dalam aplikasi memiliki struktur yang jelas dan seragam, sehingga memudahkan pengelolaan dan debugging. Tata Cara Mengimplementasikan Types pada Dummy Data Setelah membuat type untuk data products, testimonials, transactions, dan categories, langkah selanjutnya adalah mengimplementasikan types ini pada dummy data. Dengan menggunakan TypeScript, kamu bisa membuat dummy data yang sudah sesuai dengan types yang telah didefinisikan, sehingga validasi data lebih ketat dan kode lebih aman. Contoh Dummy Data untuk Products: const products: Product[] = [ { id: 1, name: "Ebook A", price: 100000, stock: 20, description: "Ebook A tentang pengembangan web modern", categoryId: 1, isFeatured: true }, { id: 2, name: "Ebook B", price: 150000, stock: 10, description: "Ebook B membahas teknik advanced web development", categoryId: 2, isFeatured: false } ]; Pada contoh di atas, kita membuat dummy data produk dengan type Product yang sudah dibuat sebelumnya. Setiap produk memiliki ID, nama, harga, stok, deskripsi, ID kategori, dan status apakah produk tersebut unggulan atau tidak (isFeatured). Contoh Dummy Data untuk Categories: const categories: Category[] = [ { id: 1, name: "Web Development", totalProducts: 5, isPopular: true }, { id: 2, name: "Design", totalProducts: 8, isPopular: false } ]; Dummy data kategori juga didefinisikan menggunakan type Category, sehingga data kategori memiliki informasi seperti ID, nama kategori, jumlah produk dalam kategori tersebut (totalProducts), dan apakah kategori tersebut populer atau tidak. Mapping Dummy Data di Halaman Home Next.js Setelah dummy data dibuat, langkah selanjutnya adalah memetakan data tersebut pada halaman Home di Next.js. Tujuan dari mapping ini adalah untuk menampilkan produk berdasarkan kategori yang dipilih. Berikut adalah langkah-langkah dan contoh implementasinya. Menampilkan Kategori dengan Filter Produk Kita akan menggunakan state untuk menyimpan kategori yang sedang dipilih dan menggunakan filter untuk menampilkan produk yang sesuai dengan kategori yang dipilih.Menggunakan useState untuk Menyimpan Kategori yang Aktif Untuk mengatur kategori yang aktif, kita akan menggunakan hook useState. State ini akan digunakan untuk menyimpan ID kategori yang sedang dipilih oleh pengguna.Melakukan Mapping dan Filtering Produk Pada tahap ini, kita akan memetakan kategori dalam bentuk tombol dan melakukan filtering produk berdasarkan kategori yang dipilih. Jika tidak ada kategori yang dipilih, semua produk akan ditampilkan. Contoh Implementasi di Halaman Home: import { useState } from 'react'; const Home = () => { const [activeCategory, setActiveCategory] = useState<number | null>(null); return ( <div> <h1>Daftar Produk</h1> {/* Mapping Kategori */} <div> {categories.map((category) => ( <button key={category.id} onClick={() => setActiveCategory(category.id)} style={{ margin: '10px', padding: '5px 15px', background: category.isPopular ? 'green' : 'blue', color: 'white' }} > {category.name} </button> ))} </div> {/* Filtering dan Mapping Produk */} <div> {products .filter(product => !activeCategory || product.categoryId === activeCategory) .map(product => ( <div key={product.id} style={{ border: '1px solid #ccc', padding: '10px', margin: '10px' }}> <h2>{product.name}</h2> <p>{product.description}</p> <p>Harga: {product.price}</p> <p>Stok: {product.stock}</p> {product.isFeatured && <span>Produk Unggulan</span>} </div> ))} </div> </div> ); }; export default Home; Penjelasan Implementasi Pada contoh di atas, terdapat beberapa poin penting terkait implementasi: State Active Category: Menggunakan useState untuk menyimpan kategori yang sedang aktif. Saat pengguna mengklik tombol kategori, state akan di-update dengan ID kategori tersebut.Mapping Kategori: Menggunakan map untuk menampilkan semua kategori sebagai tombol. Masing-masing tombol kategori memiliki fungsi onClick untuk mengubah kategori yang aktif.Filtering Produk: Produk yang ditampilkan di halaman difilter berdasarkan kategori yang aktif. Jika tidak ada kategori yang dipilih (activeCategory === null), maka semua produk akan ditampilkan. Jika ada kategori yang dipilih, produk yang ditampilkan hanya yang memiliki categoryId sesuai dengan ID kategori yang aktif.Mapping Produk: Setelah difilter, produk yang sesuai dengan kategori akan dimapping dan ditampilkan dengan informasi seperti nama produk, deskripsi, harga, stok, dan tanda jika produk tersebut adalah produk unggulan. Dengan implementasi ini, pengguna dapat memilih kategori untuk melihat produk-produk yang relevan dengan kategori tersebut. Selain itu, tipe data yang digunakan (TypeScript types) memberikan struktur yang jelas, sehingga proses development lebih terorganisir dan minim error. Menggunakan TypeScript di dalam Next.js juga meningkatkan keterbacaan dan pengelolaan kode, terutama untuk projek yang besar atau memiliki banyak data yang perlu ditangani. Dengan dummy data dan proses mapping ini, kamu sudah berhasil menerapkan TypeScript dalam pengelolaan produk dan kategori di aplikasi Next.js. 5 Kesalahan Menggunakan TypeScript pada Projek Next.js Walaupun TypeScript sangat membantu dalam memastikan kode lebih aman dan terstruktur, seringkali developer membuat beberapa kesalahan saat menggunakannya di dalam projek Next.js. Berikut adalah beberapa kesalahan umum dan cara menghindarinya dengan contoh koding yang lengkap. 1. Mengabaikan Penulisan Type Secara Eksplisit Kesalahan pertama yang sering terjadi adalah developer tidak mendefinisikan type secara eksplisit, mengandalkan inferensi dari TypeScript. Walaupun TypeScript dapat menginfer type secara otomatis, namun menulis type secara eksplisit membantu dalam memahami kode dengan lebih jelas. Contoh kesalahan: const product = { name: "Ebook A", price: 100000, }; Solusi yang benar: type Product = { name: string; price: number; }; const product: Product = { name: "Ebook A", price: 100000, }; Menuliskan type secara eksplisit pada product memastikan struktur data yang lebih jelas dan mudah dipahami. 2. Tidak Menggunakan Union Types Secara Efisien Union types memungkinkan sebuah variabel untuk memiliki lebih dari satu type, namun seringkali developer tidak memanfaatkannya dengan baik, sehingga menyebabkan kode menjadi terlalu kaku. Contoh kesalahan: let id: number; id = 123; // valid id = "ABC"; // error Solusi yang benar: let id: number | string; id = 123; // valid id = "ABC"; // valid Dengan menggunakan union types, variabel id dapat menampung nilai baik berupa number maupun string. 3. Tidak Menggunakan Optional Properties Kesalahan umum lainnya adalah tidak memanfaatkan properti opsional pada object. Hal ini menyebabkan kode menjadi lebih rumit karena developer perlu selalu mengisi semua properti object, meskipun tidak semuanya wajib. Contoh kesalahan: type User = { name: string; email: string; age: number; }; const user: User = { name: "John Doe", email: "[email protected]", age: 30, }; Solusi yang benar: type User = { name: string; email: string; age?: number; // properti opsional }; const user: User = { name: "John Doe", email: "[email protected]", }; Dengan menambahkan tanda ? pada properti age, properti tersebut menjadi opsional, sehingga tidak wajib diisi. 4. Tidak Menggunakan any secara Bijaksana Terkadang, developer menggunakan type any secara berlebihan untuk menangani berbagai jenis data tanpa melakukan validasi. Penggunaan any yang tidak bijaksana bisa menghilangkan manfaat utama TypeScript, yaitu keamanan type. Contoh kesalahan: let data: any; data = "Hello"; data = 123; data = { name: "Ebook A" }; Solusi yang benar: let data: string | number | { name: string }; data = "Hello"; // valid data = 123; // valid data = { name: "Ebook A" }; // valid Dengan mendefinisikan union type, kamu bisa menangani berbagai jenis data tanpa menghilangkan validasi tipe. 5. Tidak Menggunakan Type Assertion dengan Tepat Type assertion digunakan ketika kita yakin bahwa suatu nilai memiliki type tertentu. Namun, kesalahan yang sering terjadi adalah menggunakan type assertion dengan tidak tepat, sehingga justru menyebabkan error di runtime. Contoh kesalahan: const input = document.getElementById("user-input") as HTMLInputElement; input.value = "Hello"; // asumsi bahwa elemen ini selalu ada Solusi yang benar: const input = document.getElementById("user-input"); if (input instanceof HTMLInputElement) { input.value = "Hello"; // pastikan elemen ada dan tipe-nya benar } Dengan memeriksa terlebih dahulu apakah elemen yang dimaksud benar-benar HTMLInputElement, kamu dapat menghindari potensi error di runtime. Menggunakan TypeScript dengan bijaksana akan sangat membantu dalam menjaga keamanan dan kejelasan kode, terutama dalam proyek Next.js yang kompleks. Menghindari kesalahan-kesalahan di atas dapat meningkatkan kualitas proyekmu secara signifikan. Penutup Menggunakan TypeScript dalam proyek Next.js memang bisa memberikan banyak manfaat, terutama dalam menjaga kualitas dan keamanan kode. Dengan menghindari kesalahan umum yang sering dilakukan, kamu bisa mengembangkan aplikasi web yang lebih terstruktur dan minim error. Jika kamu ingin memperdalam pemahamanmu mengenai TypeScript, Next.js, atau topik web development lainnya, kamu bisa belajar bersama mentor expert di BuildWithAngga. Di sana, kamu akan mendapatkan berbagai benefit, seperti akses selamanya ke semua materi, bimbingan untuk membangun portfolio berkualitas, kesempatan untuk konsultasi langsung dengan mentor, serta banyak benefit menarik lainnya yang akan membantu kamu mempersiapkan diri untuk karir di industri teknologi. Jadi, tunggu apalagi? Tingkatkan skill kamu dan wujudkan mimpi menjadi developer handal bersama BuildWithAngga!

Pada artikel ini, kita akan belajar membuat website sederhana untuk jualan template CV menggunakan Next.js versi 14, khususnya dengan fitur app router. Bayangkan kamu adalah seorang pengusaha yang menjual berbagai template CV untuk membantu orang-orang melamar pekerjaan dengan desain yang menarik. Website ini akan menampilkan katalog template CV yang dapat diunduh oleh pengguna, namun kita akan bekerja dengan dummy data terlebih dahulu untuk memudahkan proses pengembangan. Website yang akan kita buat ini adalah langkah awal bagi para developer pemula yang ingin memahami alur kerja Next.js dengan struktur data yang baik. Dalam proyek ini, kita akan fokus pada bagaimana mengatur data template CV, menampilkannya dengan baik, dan mengelola navigasi menggunakan app router dari Next.js. Bayangkan struktur web ini seperti toko kecil yang menjual berbagai barang, dalam hal ini template CV. Setiap template memiliki informasi seperti nama, deskripsi, harga, dan kategori. Nah, dengan Next.js app router, kita bisa dengan mudah membuat halaman-halaman yang menampilkan daftar template, detail template, dan bahkan halaman checkout (meskipun untuk latihan kali ini, kita tidak akan menyertakan fungsionalitas transaksi sebenarnya). Cara Membuat Next.js Project Baru dengan App Router Untuk memulai membuat website jual template CV sederhana, hal pertama yang harus kita lakukan adalah membuat Next.js project baru. Dalam tutorial ini, kita akan menggunakan Next.js 14 yang sudah dilengkapi dengan fitur app router. Berikut adalah langkah-langkah untuk membuat proyek baru beserta contoh koding lengkapnya. Pertama, kamu perlu memastikan bahwa Node.js sudah terinstal di komputermu. Setelah itu, kamu bisa membuka terminal atau command prompt dan jalankan perintah berikut untuk menginstal Next.js secara global: npx create-next-app@latest my-cv-template-store Perintah ini akan membuat folder proyek baru bernama my-cv-template-store dengan Next.js 14. Setelah proses instalasi selesai, masuk ke folder proyek tersebut dengan menjalankan: cd my-cv-template-store Untuk memastikan bahwa proyek sudah menggunakan app router, pastikan bahwa struktur folder yang dibuat otomatis oleh Next.js berisi folder app di dalam root proyek. Folder inilah yang berfungsi sebagai pengatur rute halaman-halaman dalam aplikasi. Selanjutnya, jalankan server pengembangan untuk melihat hasil proyek awal: npm run dev Jika kamu membuka browser dan masuk ke http://localhost:3000, kamu akan melihat halaman awal default dari Next.js. Penjelasan Struktur Folder dan File pada Next.js App Router Project Setelah kita berhasil membuat Next.js project dengan app router, sekarang mari kita bahas struktur folder dan file yang dihasilkan. Folder app: Folder ini adalah inti dari aplikasi yang menggunakan app router. Semua file dan folder di dalamnya akan menjadi halaman-halaman website berdasarkan struktur folder tersebut. Misalnya, jika ada folder bernama app/templates, maka halaman yang diakses melalui http://localhost:3000/templates akan memuat konten dari folder tersebut.File layout.js: File ini adalah template utama yang akan membungkus semua halaman dalam aplikasi. Kamu bisa menganggapnya seperti kerangka dasar dari setiap halaman, seperti header dan footer yang muncul di semua halaman.File page.js: File ini berfungsi untuk menampilkan konten pada halaman tertentu. Jika kamu membuat file page.js di dalam folder app, maka file ini akan ditampilkan di halaman utama http://localhost:3000/. Setiap folder dalam app bisa memiliki file page.js yang bertanggung jawab atas konten spesifik di rutenya masing-masing.Folder public: Di sinilah kamu bisa menyimpan file-file statis seperti gambar, ikon, atau berkas lainnya yang dapat diakses langsung oleh browser tanpa harus melalui proses render server.Folder styles: Folder ini berisi file CSS yang mengatur tampilan antarmuka aplikasi. Kamu bisa mengatur gaya global di sini atau mengimpor gaya ke dalam komponen tertentu.File next.config.js: File konfigurasi untuk Next.js. Di sini kamu bisa mengatur berbagai konfigurasi seperti optimisasi gambar, jalur URL kustom, dan lainnya sesuai kebutuhan proyekmu. Cara Membuat File Data Dummy untuk Kategori di Folder data Untuk mengatur kategori template CV di proyek kita, kita bisa membuat file data dummy yang berisi 5 kategori beserta informasi seperti nama kategori, ikon, dan slug. Data ini nantinya bisa digunakan untuk ditampilkan di halaman web kita. Pertama, buatlah folder baru bernama data di dalam direktori proyek Next.js kamu. Folder ini akan digunakan untuk menyimpan file data dummy. Setelah folder data dibuat, tambahkan file categories.js di dalamnya. Isi file categories.js dengan data dummy dalam format JavaScript object seperti berikut: const categories = [ { id: 1, name: "Professional", icon: "💼", slug: "professional", }, { id: 2, name: "Creative", icon: "🎨", slug: "creative", }, { id: 3, name: "Modern", icon: "📊", slug: "modern", }, { id: 4, name: "Simple", icon: "✏️", slug: "simple", }, { id: 5, name: "Classic", icon: "🖋️", slug: "classic", }, ]; export default categories; Cara Membuat File Data Dummy untuk Penulis di Folder data Untuk menambahkan informasi tentang penulis template CV di proyek Next.js kita, kita bisa membuat file data dummy berisi informasi tentang 5 penulis. Setiap penulis akan memiliki nama, foto, pekerjaan, dan slug untuk URL. Langkah pertama adalah membuat file di folder data yang sudah dibuat sebelumnya. Buat file baru bernama authors.js di dalam folder data. File ini akan menyimpan data penulis dalam bentuk array objek. Berikut adalah contoh lengkap kodenya: const authors = [ { id: 1, name: "Alice Johnson", photo: "/images/alice.jpg", occupation: "Graphic Designer", slug: "alice-johnson", }, { id: 2, name: "Bob Smith", photo: "/images/bob.jpg", occupation: "Content Writer", slug: "bob-smith", }, { id: 3, name: "Charlie Davis", photo: "/images/charlie.jpg", occupation: "UX/UI Designer", slug: "charlie-davis", }, { id: 4, name: "Dana Lee", photo: "/images/dana.jpg", occupation: "Marketing Specialist", slug: "dana-lee", }, { id: 5, name: "Evan Miller", photo: "/images/evan.jpg", occupation: "Web Developer", slug: "evan-miller", }, ]; export default authors; Cara Membuat File Data Dummy untuk Template CV di Folder data Untuk menambahkan informasi tentang template CV yang akan dijual di website kita, kita bisa membuat file data dummy yang berisi informasi tentang template CV, seperti nama, thumbnail, deskripsi, id penulis, id kategori, slug, harga, dan rating. Data ini akan digunakan untuk menampilkan template CV di halaman web kita. Buat file baru bernama templates.js di dalam folder data. Berikut adalah contoh lengkap kodingnya: const templates = [ { id: 1, name: "Modern CV Template", thumbnail: "/images/modern-cv.jpg", about: "Desain CV modern yang cocok untuk berbagai profesi.", author_id: 1, category_id: 3, slug: "modern-cv-template", price: 15, rating: 4.8, }, { id: 2, name: "Creative CV Template", thumbnail: "/images/creative-cv.jpg", about: "Template CV dengan desain kreatif untuk pekerjaan di bidang seni.", author_id: 2, category_id: 2, slug: "creative-cv-template", price: 20, rating: 4.5, }, { id: 3, name: "Professional CV Template", thumbnail: "/images/professional-cv.jpg", about: "Desain CV profesional yang ideal untuk melamar posisi formal.", author_id: 3, category_id: 1, slug: "professional-cv-template", price: 25, rating: 4.9, }, { id: 4, name: "Simple CV Template", thumbnail: "/images/simple-cv.jpg", about: "Desain CV sederhana dan minimalis.", author_id: 4, category_id: 4, slug: "simple-cv-template", price: 10, rating: 4.6, }, { id: 5, name: "Classic CV Template", thumbnail: "/images/classic-cv.jpg", about: "Template CV dengan desain klasik yang tetap relevan.", author_id: 5, category_id: 5, slug: "classic-cv-template", price: 18, rating: 4.7, }, ]; export default templates; Penjelasan setiap properti dalam objek templates: name: Nama dari template CV, seperti "Modern CV Template" atau "Creative CV Template".thumbnail: Lokasi gambar thumbnail yang mewakili tampilan dari template CV, misalnya /images/modern-cv.jpg.about: Deskripsi singkat mengenai template CV tersebut, misalnya apa keunggulannya atau siapa yang cocok menggunakannya.author_id: ID yang menghubungkan template ini dengan penulisnya, diambil dari data penulis yang sudah dibuat di file authors.js.category_id: ID yang menghubungkan template ini dengan kategori, diambil dari data kategori yang sudah dibuat di file categories.js.slug: String yang URL-friendly untuk digunakan sebagai bagian dari rute halaman.price: Harga dari template CV tersebut, dalam format angka.rating: Rating dari template berdasarkan ulasan pengguna, juga dalam format angka. File ini bisa di-import ke komponen yang menampilkan daftar template CV di halaman utama atau halaman detail. Dengan menggunakan data dummy, kita dapat dengan mudah mengelola tampilan konten sebelum data asli tersedia. Cara Membuat File Types untuk Data Dummy Untuk menjaga konsistensi struktur data dalam aplikasi Next.js yang kita buat, terutama ketika menggunakan TypeScript, kita perlu mendefinisikan tipe data untuk setiap data dummy yang telah kita buat. Dengan membuat file types, kita bisa mengatur tipe data yang digunakan oleh template CV, penulis, dan kategori. Ini akan memudahkan pengembangan dan mencegah kesalahan penggunaan data. Buatlah file baru bernama types.ts di dalam folder data atau folder lain yang kamu gunakan untuk tipe data. Berikut adalah contoh lengkap kodingnya untuk seluruh data dummy yang telah kita buat sebelumnya. export interface Category { id: number; name: string; icon: string; slug: string; } export interface Author { id: number; name: string; photo: string; occupation: string; slug: string; } export interface TemplateCV { id: number; name: string; thumbnail: string; about: string; author_id: number; category_id: number; slug: string; price: number; rating: number; } Penjelasan untuk setiap tipe data di atas: Category: Mendefinisikan struktur data untuk kategori template CV, termasuk properti id (nomor unik), name (nama kategori), icon (ikon yang mewakili kategori), dan slug (teks URL-friendly).Author: Mendefinisikan struktur data untuk penulis template CV, dengan properti id (nomor unik), name (nama penulis), photo (URL foto penulis), occupation (pekerjaan penulis), dan slug (teks URL-friendly).TemplateCV: Mendefinisikan struktur data untuk template CV, dengan properti seperti id (nomor unik), name (nama template), thumbnail (gambar representasi template), about (deskripsi template), author_id (ID penulis terkait), category_id (ID kategori terkait), slug (teks URL-friendly), price (harga template), dan rating (rating dari pengguna). Dengan mendefinisikan tipe-tipe ini, kamu bisa memastikan bahwa data yang digunakan dalam komponen-komponen Next.js akan sesuai dengan struktur yang diharapkan. TypeScript akan membantu memberikan peringatan ketika ada ketidaksesuaian data, sehingga aplikasi menjadi lebih aman dan mudah dipelihara. Cara Mapping Data dan Membuat Tabs Sederhana di Komponen Home Untuk menampilkan data templateCV, category, dan author di komponen Home, kita bisa melakukan mapping data dari file dummy yang sudah dibuat. Selain itu, kita akan menggunakan state di React untuk membuat tabs sederhana yang memungkinkan pengguna memilih template berdasarkan kategori atau penulis. Pertama, pastikan kamu sudah mengimpor data dari file dummy ke dalam komponen Home. Berikut adalah contoh lengkap kodingnya: "use client" import { useState } from "react"; import categories from "../data/categories"; import authors from "../data/authors"; import templates from "../data/templates"; const Home = () => { const [activeTab, setActiveTab] = useState("category"); const filterByCategory = (categoryId: number) => { return templates.filter((template) => template.category_id === categoryId); }; const filterByAuthor = (authorId: number) => { return templates.filter((template) => template.author_id === authorId); }; return ( <div> {/* Tabs */} <div className="tabs"> <button onClick={() => setActiveTab("category")}>By Category</button> <button onClick={() => setActiveTab("author")}>By Author</button> </div> {/* Content based on active tab */} {activeTab === "category" ? ( <div> <h3>Templates by Category</h3> {categories.map((category) => ( <div key={category.id}> <h4>{category.name}</h4> <div className="template-list"> {filterByCategory(category.id).map((template) => ( <div key={template.id} className="template-item"> <img src={template.thumbnail} alt={template.name} /> <h5>{template.name}</h5> <p>{template.about}</p> <p>Price: ${template.price}</p> <p>Rating: {template.rating}</p> </div> ))} </div> </div> ))} </div> ) : ( <div> <h3>Templates by Author</h3> {authors.map((author) => ( <div key={author.id}> <h4>{author.name} - {author.occupation}</h4> <div className="template-list"> {filterByAuthor(author.id).map((template) => ( <div key={template.id} className="template-item"> <img src={template.thumbnail} alt={template.name} /> <h5>{template.name}</h5> <p>{template.about}</p> <p>Price: ${template.price}</p> <p>Rating: {template.rating}</p> </div> ))} </div> </div> ))} </div> )} </div> ); }; export default Home; Penjelasan koding: useState: Kita menggunakan useState untuk menyimpan status tab aktif. Ada dua tab: By Category dan By Author. State activeTab akan menentukan data mana yang ditampilkan, apakah berdasarkan kategori atau penulis.filterByCategory dan filterByAuthor: Dua fungsi ini digunakan untuk menyaring templateCV berdasarkan category_id atau author_id, sesuai tab yang aktif.Mapping Data: Kita melakukan mapping terhadap data categories dan authors, kemudian untuk setiap kategori atau penulis, kita menampilkan template-template yang sesuai dengan menggunakan fungsi penyaringan tadi.Tabs: Ada dua tombol yang mengatur tab aktif. Saat pengguna mengklik tombol "By Category", tab akan berubah dan menampilkan template berdasarkan kategori. Demikian juga dengan "By Author". Cara Membuat Komponen Category, Author, dan TemplateCV Untuk membuat struktur kode yang lebih terorganisir di dalam aplikasi Next.js 14, kita bisa memecah tampilan data menjadi beberapa komponen terpisah: Category, Author, dan TemplateCV. Ini akan memudahkan dalam pengelolaan dan pemeliharaan kode. Langkah 1: Membuat Komponen Category Buat file komponen Category.js di folder components. Komponen ini akan bertanggung jawab untuk menampilkan data kategori: // components/Category.js const Category = ({ category, templates }) => { return ( <div> <h4>{category.name}</h4> <div className="template-list"> {templates.map((template) => ( <div key={template.id} className="template-item"> <img src={template.thumbnail} alt={template.name} /> <h5>{template.name}</h5> <p>{template.about}</p> <p>Price: ${template.price}</p> <p>Rating: {template.rating}</p> </div> ))} </div> </div> ); }; export default Category; Langkah 2: Membuat Komponen Author Buat file komponen Author.js di folder components. Komponen ini akan menampilkan daftar template yang ditulis oleh penulis tertentu: // components/Author.js const Author = ({ author, templates }) => { return ( <div> <h4>{author.name} - {author.occupation}</h4> <div className="template-list"> {templates.map((template) => ( <div key={template.id} className="template-item"> <img src={template.thumbnail} alt={template.name} /> <h5>{template.name}</h5> <p>{template.about}</p> <p>Price: ${template.price}</p> <p>Rating: {template.rating}</p> </div> ))} </div> </div> ); }; export default Author; Langkah 3: Membuat Komponen TemplateCV Buat file komponen TemplateCV.js di folder components. Komponen ini akan menangani tampilan untuk satu template CV. Meskipun kita sudah menampilkannya di dalam komponen Category dan Author, kita bisa membuat komponen ini terpisah jika nantinya perlu digunakan secara independen. // components/TemplateCV.js const TemplateCV = ({ template }) => { return ( <div className="template-item"> <img src={template.thumbnail} alt={template.name} /> <h5>{template.name}</h5> <p>{template.about}</p> <p>Price: ${template.price}</p> <p>Rating: {template.rating}</p> </div> ); }; export default TemplateCV; Langkah 4: Mapping dan Menggunakan Komponen-Komponen Tersebut di Komponen Home Sekarang kita akan mengimpor komponen Category dan Author ke dalam komponen Home, lalu melakukan mapping data menggunakan komponen-komponen tersebut. "use client"; import { useState } from "react"; import categories from "../data/categories"; import authors from "../data/authors"; import templates from "../data/templates"; import Category from "../components/Category"; import Author from "../components/Author"; export default function Home() { const [activeTab, setActiveTab] = useState("category"); const filterByCategory = (categoryId) => { return templates.filter((template) => template.category_id === categoryId); }; const filterByAuthor = (authorId) => { return templates.filter((template) => template.author_id === authorId); }; return ( <div> {/* Tabs */} <div className="tabs"> <button onClick={() => setActiveTab("category")}>By Category</button> <button onClick={() => setActiveTab("author")}>By Author</button> </div> {/* Content based on active tab */} {activeTab === "category" ? ( <div> <h3>Templates by Category</h3> {categories.map((category) => ( <Category key={category.id} category={category} templates={filterByCategory(category.id)} /> ))} </div> ) : ( <div> <h3>Templates by Author</h3> {authors.map((author) => ( <Author key={author.id} author={author} templates={filterByAuthor(author.id)} /> ))} </div> )} </div> ); } Penjelasan: Category Component: Komponen Category menerima properti category dan templates. Data ini ditampilkan berdasarkan kategori tertentu, dan template-template yang sesuai ditampilkan menggunakan mapping.Author Component: Komponen Author mirip dengan Category, tetapi menampilkan template berdasarkan penulis yang bersangkutan.TemplateCV Component: Komponen ini bertindak sebagai unit dasar untuk menampilkan satu template CV. Ini dipanggil di dalam komponen Category dan Author melalui mapping.State Management di Home: useState digunakan untuk mengelola tab aktif (category atau author), dan filterByCategory serta filterByAuthor digunakan untuk menyaring data template berdasarkan kategori atau penulis. Kesimpulan yang Telah Dipelajari: Modularisasi Komponen: Dalam pengembangan dengan Next.js, membagi tampilan dan logika ke dalam beberapa komponen seperti Category, Author, dan TemplateCV membuat kode lebih terstruktur, mudah dipelihara, dan fleksibel. Modularisasi ini membantu dalam menangani data secara efisien dengan cara yang terorganisir.Penggunaan "use client": Untuk menggunakan fitur interaktif di Next.js seperti useState, komponen harus ditandai dengan "use client". Ini memastikan bahwa komponen tersebut dijalankan di sisi client, memungkinkan pengelolaan state dan interaksi langsung dengan pengguna, yang tidak bisa dilakukan di server components secara default.Mapping Data untuk UI Dinamis: Memanfaatkan data dari file dummy dan melakukan mapping dengan komponen individual adalah cara yang efektif untuk merender data secara dinamis di halaman web. Ini memberikan fleksibilitas untuk menampilkan konten berdasarkan kategori, penulis, atau properti lain sesuai dengan kebutuhan aplikasi. Saran untuk Materi Lain yang Perlu Dipelajari: Server-Side Rendering (SSR) dan Static Site Generation (SSG): Pelajari lebih dalam tentang bagaimana Next.js menggunakan SSR dan SSG untuk meningkatkan performa aplikasi, terutama dalam hal merender data secara efisien.API Routes di Next.js: Belajar tentang bagaimana membangun API di dalam proyek Next.js untuk mengelola data secara dinamis dari backend atau sumber eksternal.State Management Lebih Lanjut: Mempelajari state management lebih dalam, seperti menggunakan Context API atau Redux, bisa membantu dalam menangani data global dalam aplikasi yang lebih kompleks. Penutup Dengan mempelajari konsep-konsep di atas, kamu sudah memiliki pondasi yang baik untuk membangun aplikasi web modern menggunakan Next.js. Namun, perjalanan belajar tidak berhenti di sini. Untuk menguasai lebih dalam dan mendapatkan pengalaman nyata dalam proyek, kamu bisa belajar bersama mentor expert di BuildWithAngga. Di BuildWithAngga, kamu akan mendapatkan akses selamanya ke semua materi pembelajaran, bisa membangun portfolio berkualitas yang siap digunakan untuk melamar pekerjaan, dan juga mendapatkan kesempatan untuk konsultasi langsung dengan mentor yang berpengalaman. Selain itu, ada banyak benefit menarik lainnya yang akan membantumu mempercepat perjalanan karier sebagai developer. Ayo, terus kembangkan skill-mu dan bergabunglah bersama komunitas belajar yang mendukung di BuildWithAngga!

Pada tutorial ini, kita akan belajar dasar-dasar Next.js dengan menggunakan fitur app router yang baru. Kita akan membuat proyek web sederhana yang berfungsi sebagai toko ebook online menggunakan dummy data. Proyek ini cocok bagi pemula yang ingin latihan Next.js tanpa harus memikirkan integrasi dengan database atau API yang rumit. Fokus kita adalah pada bagaimana app router bekerja dalam Next.js, serta bagaimana kita bisa mengelola dan menampilkan data secara efisien. Bayangkan aplikasi kita sebagai sebuah toko buku online, di mana pengguna dapat menjelajah berbagai kategori ebook, melihat detail ebook, dan beralih antar kategori dengan mudah. Toko ini hanya menggunakan dummy data, yang artinya data yang kita gunakan hanya untuk keperluan latihan, bukan data nyata. App router dalam Next.js bekerja mirip dengan peta untuk sebuah toko. Di toko fisik, peta ini akan membantu pelanggan menemukan bagian tertentu, seperti bagian buku fiksi, buku non-fiksi, atau buku sains. Dalam proyek ini, app router akan membantu kita mengatur dan mengelola routing antar halaman, misalnya halaman home, detail ebook, atau halaman kategori. Dengan pemahaman dasar tentang app router, kamu akan bisa membangun aplikasi yang lebih kompleks di masa depan, seperti website e-commerce atau portal berita. Latihan ini adalah langkah awal yang bagus untuk siapa saja yang ingin memahami Next.js dan cara kerjanya dalam membangun aplikasi web yang cepat dan efisien. Kamu bisa mengikuti tutorial ini dan memahami konsep dasarnya sebelum melanjutkan ke fitur Next.js yang lebih canggih. Sekarang, mari kita mulai perjalanan kita dengan membangun proyek sederhana ini! Cara Install Next.js Secara Global Sebelum kita memulai proyek Next.js menggunakan app router, langkah pertama yang harus dilakukan adalah menginstal Next.js secara global di komputer kita. Instalasi ini akan memudahkan kita dalam membuat proyek baru dan menjalankan server pengembangan dengan cepat. Untuk menginstal Next.js secara global, pastikan kamu sudah menginstal Node.js di komputermu. Kamu bisa mengecek apakah Node.js sudah terpasang dengan menjalankan perintah berikut di terminal: node -v Jika Node.js sudah terpasang, langkah selanjutnya adalah menginstal Next.js. Buka terminal atau command prompt dan jalankan perintah berikut: npm install -g create-next-app Perintah ini akan menginstal create-next-app secara global, yang merupakan tool resmi dari Next.js untuk membuat proyek Next.js dengan cepat. Dengan menggunakan create-next-app, kita tidak perlu repot mengatur konfigurasi awal secara manual. Proses instalasi ini hanya perlu dilakukan satu kali, dan setelah itu kamu bisa membuat proyek Next.js kapan pun dengan mudah. Cara Membuat Proyek Next.js Baru dengan App Router Setelah berhasil menginstal Next.js secara global, langkah berikutnya adalah membuat proyek Next.js baru dengan menggunakan app router. Kita bisa membuat proyek ini dengan sangat cepat menggunakan perintah create-next-app yang sudah kita instal sebelumnya. Buka terminal dan jalankan perintah berikut untuk membuat proyek baru: npx create-next-app@latest my-ebook-store Setelah perintah di atas dijalankan, kamu akan diminta untuk menjawab beberapa pertanyaan, seperti apakah kamu ingin menggunakan TypeScript, ESLint, atau Tailwind CSS. Kamu bisa menjawab sesuai kebutuhan proyekmu. Jika kamu hanya ingin mencoba fitur dasar Next.js, cukup pilih opsi No untuk fitur tambahan. Berikut contoh dialog yang muncul di terminal: ✔ Would you like to use TypeScript with this project? … No ✔ Would you like to use ESLint with this project? … No ✔ Would you like to use Tailwind CSS with this project? … No ✔ Would you like to use `src/` directory with this project? … Yes ✔ Would you like to use App Router? (recommended) … Yes ✔ Would you like to customize the default import alias? … No Setelah proses ini selesai, masuk ke direktori proyek yang baru dibuat dengan perintah berikut: cd my-ebook-store Lalu, jalankan server pengembangan untuk memulai proyek Next.js: npm run dev Kamu akan melihat pesan di terminal yang mengindikasikan bahwa server berjalan di http://localhost:3000. Buka browser dan akses URL tersebut untuk melihat proyek Next.js yang baru saja kamu buat. Sekarang, proyek Next.js dengan app router sudah siap, dan kamu bisa mulai mengembangkan toko ebook online kamu! Cara Membuat File Types untuk Data Ebook dan Ebook Categories Dalam proyek Next.js, kita bisa menggunakan TypeScript untuk mendefinisikan tipe data yang digunakan dalam aplikasi. Hal ini sangat berguna karena dapat membantu kita menghindari kesalahan ketika mengelola data dan memastikan bahwa data yang kita gunakan sesuai dengan struktur yang diharapkan. Untuk mendefinisikan types untuk data ebook dan ebook categories, langkah pertama adalah membuat file baru yang khusus untuk menyimpan tipe data ini. Biasanya, file tersebut dibuat dengan nama types.ts atau types.d.ts di dalam folder proyek. Misalkan kita akan membuat dua tipe data: satu untuk ebook dan satu lagi untuk ebook categories. Berikut ini adalah cara membuat file types: Buat file types.ts di dalam direktori proyek kamu, misalnya di folder src.Di dalam file types.ts, kita akan mendefinisikan tipe data untuk ebook dan ebook categories. Contoh kode lengkap untuk tipe data ebook: export interface Ebook { id: number; title: string; about: string; description: string; author: string; price: number; stock: number; } Contoh kode lengkap untuk tipe data ebook categories: export interface EbookCategory { id: number; name: string; icon: string; totalEbooks: number; isPopular: boolean; } Di sini, kita menggunakan interface untuk mendefinisikan struktur dari data ebook dan ebook categories. Setiap ebook akan memiliki properti seperti id, title, about, description, author, price, dan stock. Sedangkan untuk ebook categories, kita mendefinisikan properti seperti id, name, icon, totalEbooks, dan isPopular. Dengan mendefinisikan tipe data seperti ini, kamu bisa memastikan bahwa ketika data ebook dan kategori ebook digunakan di seluruh aplikasi, mereka akan selalu memiliki struktur yang sama dan mematuhi tipe data yang sudah didefinisikan. Sebagai contoh, ketika kamu ingin membuat sebuah komponen yang menampilkan daftar ebook, kamu bisa memastikan bahwa data yang diterima oleh komponen tersebut sesuai dengan interface yang sudah dibuat. Jika ada kesalahan, TypeScript akan memberi peringatan sejak dini, sehingga kamu bisa memperbaikinya sebelum masalah muncul. Cara Membuat File Dummy Data Terpisah untuk Data Ebook yang Dibungkus dengan Data EbookCategory Dalam kasus ini, kita akan membuat struktur data dummy di mana setiap category memiliki beberapa ebook terkait di dalamnya. Misalnya, satu category bisa memiliki 4 ebook. Untuk mencapai ini, kita akan membuat sebuah file dummy data di mana setiap kategori berisi array dari ebook yang termasuk dalam kategori tersebut. Berikut cara membuatnya dan contoh koding lengkap: Buat file ebookCategoriesWithBooks.ts di dalam folder data atau src/data.Di dalam file ini, kita akan mendefinisikan data ebook categories yang setiap kategorinya berisi data ebooks terkait. Contoh kode untuk file ebookCategoriesWithBooks.ts: import { Ebook, EbookCategory } from '../types'; interface EbookCategoryWithBooks extends EbookCategory { ebooks: Ebook[]; } export const ebookCategoriesWithBooks: EbookCategoryWithBooks[] = [ { id: 1, name: "Programming", icon: "🖥️", totalEbooks: 50, isPopular: true, ebooks: [ { id: 1, title: "Learn JavaScript", about: "A comprehensive guide to JavaScript", description: "This book covers all the essential concepts of JavaScript in a simple and clear way.", author: "John Doe", price: 19.99, stock: 10, }, { id: 2, title: "Mastering React", about: "Advanced techniques in React", description: "Take your React skills to the next level with this deep dive into advanced topics.", author: "Jane Smith", price: 24.99, stock: 5, }, { id: 3, title: "Node.js for Beginners", about: "A complete beginner's guide to Node.js", description: "Learn the basics of Node.js and server-side JavaScript development.", author: "Alex Brown", price: 15.99, stock: 8, }, { id: 4, title: "TypeScript Essentials", about: "Master TypeScript from scratch", description: "Learn how TypeScript can improve your JavaScript projects.", author: "Emily White", price: 18.99, stock: 12, } ] }, { id: 2, name: "Design", icon: "🎨", totalEbooks: 30, isPopular: false, ebooks: [ { id: 5, title: "Introduction to UX Design", about: "Learn the basics of user experience design", description: "A guide to understanding the principles of UX design.", author: "Chris Green", price: 22.99, stock: 9, }, { id: 6, title: "Mastering Photoshop", about: "Advanced techniques for Photoshop", description: "Enhance your design skills with advanced Photoshop techniques.", author: "Sophie Blue", price: 25.99, stock: 7, }, { id: 7, title: "UI Design Fundamentals", about: "Build intuitive user interfaces", description: "Understand the key principles of UI design.", author: "Liam Grey", price: 20.99, stock: 6, }, { id: 8, title: "Sketch for Beginners", about: "Learn how to use Sketch for UI/UX design", description: "A beginner's guide to designing with Sketch.", author: "Laura Black", price: 17.99, stock: 4, } ] }, { id: 3, name: "Business", icon: "💼", totalEbooks: 20, isPopular: true, ebooks: [ { id: 9, title: "Entrepreneurship 101", about: "Starting your own business from scratch", description: "A guide for aspiring entrepreneurs to kickstart their business.", author: "Michael Gold", price: 19.99, stock: 11, }, { id: 10, title: "Marketing Strategies", about: "Learn key marketing strategies", description: "Understand how to create and implement effective marketing strategies.", author: "Karen Silver", price: 21.99, stock: 5, }, { id: 11, title: "Financial Management", about: "Manage your business finances effectively", description: "Learn how to keep your business financially healthy.", author: "Tom Red", price: 23.99, stock: 8, }, { id: 12, title: "Business Growth Hacking", about: "Grow your business rapidly", description: "Strategies to accelerate the growth of your business.", author: "Rachel Blue", price: 27.99, stock: 6, } ] } ]; Di sini, kita membuat interface baru bernama EbookCategoryWithBooks yang mewarisi properti dari EbookCategory dan menambahkan properti ebooks, yaitu array berisi data ebook yang terkait dengan kategori tersebut. Setiap objek EbookCategoryWithBooks sekarang memiliki properti seperti id, name, icon, totalEbooks, isPopular, serta array ebooks yang berisi daftar ebook untuk kategori tersebut. Dengan struktur ini, kita bisa dengan mudah menampilkan kategori dan ebook terkait di aplikasi. Dengan membungkus data ebook di dalam ebook category, kita bisa mensimulasikan hubungan satu ke banyak antara kategori dan ebook di aplikasi yang lebih kompleks. Data dummy ini bisa kamu gunakan untuk menampilkan daftar ebook per kategori di halaman aplikasi Next.js kamu. Cara Mapping Data dan Membuat Tabs Sederhana di Komponen Home Setelah kita memiliki data dummy ebook dan category, langkah berikutnya adalah menampilkan data tersebut di komponen Home. Kita juga akan membuat tabs sederhana untuk menampilkan data ebook berdasarkan kategorinya dengan menggunakan useState di React. Berikut ini adalah cara melakukan mapping data ebook per kategori dan membuat tabs sederhana untuk memilih kategori di komponen Home: Pertama, impor data ebookCategoriesWithBooks dari file data yang telah kita buat ke dalam komponen Home.Gunakan useState untuk mengatur state aktif dari kategori yang dipilih, sehingga kita bisa menampilkan ebook yang sesuai dengan kategori tersebut.Lakukan mapping untuk membuat tab berdasarkan kategori yang ada, dan gunakan data tersebut untuk menampilkan daftar ebook. Berikut adalah contoh kode lengkap untuk komponen Home: import { useState } from 'react'; import { ebookCategoriesWithBooks } from '../data/ebookCategoriesWithBooks'; const Home = () => { // State untuk kategori yang aktif const [activeCategoryId, setActiveCategoryId] = useState<number>(ebookCategoriesWithBooks[0].id); // Filter ebooks berdasarkan kategori yang dipilih const activeCategory = ebookCategoriesWithBooks.find(category => category.id === activeCategoryId); return ( <div> {/* Tabs untuk memilih kategori */} <div className="tabs"> {ebookCategoriesWithBooks.map((category) => ( <button key={category.id} className={`tab ${category.id === activeCategoryId ? 'active' : ''}`} onClick={() => setActiveCategoryId(category.id)} > {category.name} </button> ))} </div> {/* Menampilkan data ebook berdasarkan kategori yang dipilih */} <div className="ebooks-list"> {activeCategory && activeCategory.ebooks.length > 0 ? ( activeCategory.ebooks.map((ebook) => ( <div key={ebook.id} className="ebook-item"> <h3>{ebook.title}</h3> <p>{ebook.about}</p> <p><strong>Author:</strong> {ebook.author}</p> <p><strong>Price:</strong> ${ebook.price}</p> <p><strong>Stock:</strong> {ebook.stock}</p> </div> )) ) : ( <p>No ebooks available in this category.</p> )} </div> </div> ); }; export default Home; Penjelasan Kode: useState digunakan untuk menyimpan activeCategoryId, yaitu ID dari kategori yang sedang dipilih. Secara default, ID kategori pertama dari ebookCategoriesWithBooks akan menjadi kategori yang aktif.Pada bagian tabs, kita melakukan mapping terhadap ebookCategoriesWithBooks untuk membuat tombol tab. Setiap tombol tab akan mengubah activeCategoryId ketika diklik, dan tombol yang aktif diberi kelas active.Setelah kategori dipilih, kita menggunakan find untuk mendapatkan kategori yang sesuai dengan activeCategoryId. Kemudian, kita melakukan mapping terhadap ebooks yang ada di kategori tersebut dan menampilkannya di layar.Jika tidak ada ebook di kategori yang dipilih, kita menampilkan pesan No ebooks available in this category. Dengan cara ini, kita dapat menampilkan daftar ebook berdasarkan kategori yang dipilih oleh pengguna, serta memungkinkan pengguna untuk berpindah kategori menggunakan tabs. Saran untuk Materi Lain yang Perlu Dipelajari Dynamic Routing di Next.js Setelah memahami app router, kamu bisa mempelajari bagaimana melakukan dynamic routing di Next.js, terutama untuk aplikasi yang membutuhkan navigasi berbasis parameter seperti halaman detail produk.API Integration Mempelajari cara mengintegrasikan Next.js dengan API (baik RESTful maupun GraphQL) sangat penting untuk membangun aplikasi yang lebih kompleks dan dinamis, termasuk mengambil data dari server.Server-Side Rendering (SSR) dan Static Site Generation (SSG) Pelajari kapan dan bagaimana menggunakan SSR dan SSG di Next.js untuk meningkatkan performa aplikasi serta memberikan pengalaman pengguna yang lebih baik.Optimisasi dan SEO di Next.js Mengoptimalkan SEO dan performa adalah langkah penting untuk aplikasi web yang sukses. Mempelajari teknik optimisasi di Next.js seperti menggunakan getStaticProps dan getServerSideProps akan sangat membantu.Pengelolaan State yang Lebih Kompleks Setelah menguasai useState, kamu bisa mempelajari pengelolaan state yang lebih kompleks menggunakan useReducer atau bahkan state management libraries seperti Redux untuk aplikasi yang skalanya lebih besar. Penutup Dalam perjalanan belajar Next.js, sangat penting untuk terus berlatih dan memperdalam pemahaman kita tentang berbagai fitur yang ada. Dengan mengikuti tutorial ini, kamu telah mempelajari dasar-dasar Next.js menggunakan app router, cara mengelola data dengan TypeScript, hingga membuat tabs sederhana untuk menampilkan data berdasarkan kategori. Jika kamu ingin meningkatkan kemampuanmu lebih jauh, kamu bisa belajar bersama para mentor expert di BuildWithAngga. Kamu akan mendapatkan berbagai benefit menarik seperti akses materi selamanya, kesempatan untuk membangun portfolio berkualitas, serta konsultasi langsung dengan mentor yang siap membantu menjawab pertanyaan dan membimbingmu. Tak hanya itu, ada juga berbagai keuntungan lain yang akan membuat perjalanan belajarmu semakin menyenangkan dan terarah. Yuk, bergabung sekarang dan wujudkan impianmu menjadi developer profesional dengan dukungan penuh dari BuildWithAngga!

Kali ini kita akan belajar membuat halaman admin dan Content Management System (CMS) untuk website order coffee di sebuah cafe shop dengan menggunakan Laravel 10 dan Filament. Tujuan dari latihan ini adalah memberikan kemampuan bagi pemilik cafe untuk mengelola menu, harga, dan berbagai konten lainnya secara mandiri, tanpa perlu pengetahuan mendalam tentang coding. Halaman admin yang akan kita buat ini nantinya berfungsi sebagai pusat kendali untuk segala aktivitas manajemen konten di website, seperti menambah atau menghapus menu coffee, membuat promo spesial, serta memperbarui informasi yang tampil di website secara real-time. Laravel 10 dan Filament: Kombinasi Tepat untuk Dashboard dan CMS Menggunakan Laravel 10 dan Filament merupakan pilihan yang tepat dalam membangun dashboard serta CMS yang aman, cepat, dan mudah dimaintenance. Laravel 10, sebagai framework PHP yang sudah terkenal dengan keamanannya, akan memberikan fondasi yang kuat untuk website Anda. Di sisi lain, Filament memungkinkan Anda membuat dashboard admin yang interaktif dan mudah digunakan dengan antarmuka yang sederhana namun fungsional. Jika diibaratkan, Laravel 10 adalah fondasi yang kokoh, sementara Filament adalah alat yang memudahkan Anda untuk membangun struktur di atasnya, seperti merancang tampilan dan fungsi admin dengan mudah. Kombinasi ini tidak hanya memudahkan dari segi pengembangan, tetapi juga dalam hal maintenance dan perbaikan di masa depan. Dengan Filament, pemilik cafe shop dapat melakukan perubahan pada konten website kapan saja tanpa perlu repot menghubungi developer. Inilah yang membuat Laravel 10 dan Filament sangat cocok untuk membangun CMS yang handal, efisien, dan aman dalam mengelola informasi di website. Cara Membuat Projek Laravel 10 Menggunakan Composer dan Mengatur File .env MySQL Untuk memulai projek dengan Laravel 10, kita perlu menggunakan Composer, yaitu dependency manager untuk PHP yang memudahkan kita dalam mengelola paket-paket yang dibutuhkan oleh Laravel. Selain itu, kita juga harus mengonfigurasi koneksi database MySQL di file .env agar aplikasi Laravel dapat terhubung dengan database. Berikut adalah langkah-langkah dan contoh lengkap untuk membuat projek Laravel 10 beserta pengaturan MySQL. 1. Instalasi Laravel 10 Menggunakan Composer Langkah pertama adalah membuka terminal atau command prompt, kemudian menjalankan perintah Composer untuk membuat projek Laravel 10. composer create-project --prefer-dist laravel/laravel order-coffee "10.*" Perintah ini akan mengunduh dan menginstall Laravel versi 10 ke dalam folder bernama order-coffee. Anda bisa mengganti nama folder tersebut sesuai dengan kebutuhan projek Anda. Setelah instalasi selesai, masuk ke direktori projek: cd order-coffee Kemudian, jalankan server lokal Laravel dengan perintah berikut: php artisan serve Server Laravel akan berjalan pada http://localhost:8000 atau alamat yang ditampilkan pada terminal Anda. Sekarang, aplikasi Laravel sudah terpasang dan bisa diakses melalui browser. 2. Mengatur Koneksi Database MySQL di File .env Setelah berhasil membuat projek Laravel 10, langkah selanjutnya adalah mengatur koneksi ke database MySQL. Laravel menyimpan pengaturan koneksi ini di file .env yang terletak di root direktori projek. Buka file .env dengan teks editor dan cari bagian berikut: DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=nama_database DB_USERNAME=root DB_PASSWORD= Penjelasan setiap variabel di atas: DB_CONNECTION: Jenis database yang digunakan, dalam hal ini mysql.DB_HOST: Host dari database, biasanya 127.0.0.1 atau localhost.DB_PORT: Port yang digunakan oleh MySQL, secara default adalah 3306.DB_DATABASE: Nama database yang ingin Anda gunakan. Buat database baru di MySQL dengan nama ini.DB_USERNAME: Username untuk mengakses MySQL, biasanya root untuk lokal.DB_PASSWORD: Password MySQL untuk root atau sesuai dengan yang telah Anda atur. Contoh jika Anda membuat database bernama order_coffee, username root, dan tanpa password, maka pengaturan .env akan terlihat seperti ini: DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=order_coffee DB_USERNAME=root DB_PASSWORD= Jangan lupa untuk menyimpan file .env setelah mengeditnya. 3. Menjalankan Migrasi Database Setelah konfigurasi database selesai, langkah selanjutnya adalah menjalankan migrasi untuk membuat tabel-tabel dasar di database. Laravel menyediakan beberapa tabel bawaan yang berguna, seperti tabel users, yang dapat kita buat dengan perintah berikut: php artisan migrate Jika koneksi ke database berhasil, tabel-tabel akan dibuat di database order_coffee. Sekarang, Laravel sudah terhubung dengan MySQL dan siap digunakan untuk membuat fitur-fitur lainnya dalam projek order coffee. Anda sudah berhasil membuat projek Laravel 10 dengan konfigurasi MySQL menggunakan Composer dan file .env. Untuk mempelajari lebih lanjut tentang cara mengelola database dan tabel dengan Laravel, Anda bisa mengunjungi dokumentasi resmi Laravel. Cara Membuat File Migration dan Model Beserta Fillable dan Relationship untuk Table Categories, Coffees, Cafes, Transactions Dalam projek kelas seperti order coffee, kita membutuhkan beberapa tabel untuk menyimpan data yang diperlukan. Tabel-tabel tersebut bisa diwakili oleh beberapa model dan relasi di Laravel, seperti categories, coffees, cafes, dan transactions. Berikut ini adalah cara membuat file migration dan model untuk masing-masing tabel, serta mengatur fillable dan relationship antara tabel-tabel tersebut. 1. Membuat Migration untuk Tabel Categories Untuk membuat file migration dan model untuk tabel categories, gunakan perintah berikut di terminal: php artisan make:model Category -m Perintah ini akan membuat model Category beserta file migration untuk tabel categories. Buka file migration di database/migrations/, kemudian tambahkan kolom-kolom yang diperlukan untuk tabel categories: public function up() { Schema::create('categories', function (Blueprint $table) { $table->id(); $table->string('name'); $table->timestamps(); }); } Pada model Category, tambahkan properti fillable untuk menentukan field yang dapat diisi: class Category extends Model { protected $fillable = ['name']; public function coffees() { return $this->hasMany(Coffee::class); } } Relasi hasMany digunakan karena satu kategori bisa memiliki banyak coffee. 2. Membuat Migration untuk Tabel Coffees Buat model dan migration untuk tabel coffees dengan perintah berikut: php artisan make:model Coffee -m Setelah itu, buka file migration untuk coffees dan tambahkan kolom-kolom yang diperlukan: public function up() { Schema::create('coffees', function (Blueprint $table) { $table->id(); $table->string('name'); $table->decimal('price', 8, 2); $table->unsignedBigInteger('category_id'); $table->timestamps(); $table->foreign('category_id')->references('id')->on('categories')->onDelete('cascade'); }); } Pada model Coffee, tambahkan properti fillable dan buat relasi belongsTo untuk menghubungkan coffee dengan category: class Coffee extends Model { protected $fillable = ['name', 'price', 'category_id']; public function category() { return $this->belongsTo(Category::class); } public function cafes() { return $this->belongsToMany(Cafe::class); } } Relasi belongsToMany di sini digunakan karena satu coffee bisa dijual di banyak cafe. 3. Membuat Migration untuk Tabel Cafes Buat model dan migration untuk tabel cafes dengan perintah berikut: php artisan make:model Cafe -m Edit file migration untuk cafes dan tambahkan kolom-kolom yang dibutuhkan: public function up() { Schema::create('cafes', function (Blueprint $table) { $table->id(); $table->string('name'); $table->string('location'); $table->timestamps(); }); } Pada model Cafe, tambahkan properti fillable dan buat relasi belongsToMany untuk menghubungkan cafe dengan coffee: class Cafe extends Model { protected $fillable = ['name', 'location']; public function coffees() { return $this->belongsToMany(Coffee::class); } public function transactions() { return $this->hasMany(Transaction::class); } } Satu cafe bisa melakukan banyak transaksi, sehingga relasi hasMany digunakan untuk tabel transactions. 4. Membuat Migration untuk Tabel Transactions Buat model dan migration untuk transactions dengan perintah berikut: php artisan make:model Transaction -m Edit file migration untuk transactions dengan menambahkan kolom-kolom yang dibutuhkan: public function up() { Schema::create('transactions', function (Blueprint $table) { $table->id(); $table->unsignedBigInteger('cafe_id'); $table->unsignedBigInteger('coffee_id'); $table->integer('quantity'); $table->decimal('total_price', 8, 2); $table->timestamps(); $table->foreign('cafe_id')->references('id')->on('cafes')->onDelete('cascade'); $table->foreign('coffee_id')->references('id')->on('coffees')->onDelete('cascade'); }); } Pada model Transaction, tambahkan properti fillable dan buat relasi belongsTo untuk menghubungkan transaksi dengan coffee dan cafe: class Transaction extends Model { protected $fillable = ['cafe_id', 'coffee_id', 'quantity', 'total_price']; public function cafe() { return $this->belongsTo(Cafe::class); } public function coffee() { return $this->belongsTo(Coffee::class); } } Cara Menginstall Package Filament dan Membuat Akun Admin Filament adalah package yang memudahkan kita dalam membuat halaman admin yang lengkap dengan fitur CRUD untuk projek Laravel. Dengan Filament, kita bisa membuat dashboard admin dengan cepat dan mudah. Berikut adalah cara menginstall Filament dan membuat akun admin. Menginstall Filament di Laravel 10 Langkah pertama untuk memulai adalah dengan menginstall Filament. Pastikan Anda sudah berada di root direktori projek Laravel. Jalankan perintah berikut di terminal untuk menginstall package Filament: composer require filament/filament Setelah proses instalasi selesai, kita bisa menjalankan beberapa perintah tambahan untuk memastikan bahwa Filament terpasang dengan benar dan siap digunakan. Mengatur Filament dengan Artisan Setelah menginstall Filament, Anda perlu menjalankan perintah berikut untuk mengatur konfigurasi dasar dari Filament. Perintah ini akan membuat beberapa file dasar yang diperlukan untuk dashboard admin Filament. php artisan filament:install Perintah ini akan mempersiapkan segala kebutuhan Filament dalam projek Anda, seperti file konfigurasi dan rute untuk dashboard admin. Membuat Akun Admin Untuk bisa masuk ke halaman admin, kita perlu membuat akun admin terlebih dahulu. Filament mendukung pembuatan user dengan role admin. Anda bisa menggunakan Artisan untuk membuat user baru dengan role admin. Jalankan perintah berikut untuk membuat admin: php artisan make:filament-user Setelah menjalankan perintah ini, Anda akan diminta untuk mengisi beberapa informasi seperti nama, email, password, dan apakah user tersebut merupakan super admin. Isi informasi tersebut sesuai kebutuhan. Jika akun berhasil dibuat, Anda akan melihat pesan konfirmasi di terminal. Contoh Kode Pengaturan User Admin Setelah akun admin berhasil dibuat, Anda dapat mengakses dashboard admin Filament melalui URL berikut: <http://localhost:8000/admin> Pastikan Anda sudah menjalankan server Laravel dengan php artisan serve, dan gunakan akun admin yang baru saja dibuat untuk login ke dashboard tersebut. Akun admin yang telah Anda buat memiliki hak akses penuh untuk mengelola data di halaman dashboard. Cara Membuat Resource untuk CRUD Seluruh Table yang Sudah Dibuat Menggunakan Filament Dalam sebuah projek, kita dapat memanfaatkan Filament untuk membuat CRUD (Create, Read, Update, Delete) secara otomatis pada seluruh tabel yang sudah kita buat sebelumnya, seperti categories, coffees, cafes, dan transactions. Dengan menggunakan resource di Filament, kita bisa mengelola data dalam tabel tersebut melalui halaman admin yang sudah terintegrasi dengan dashboard. Berikut adalah cara membuat resource untuk masing-masing tabel. Menggunakan Artisan untuk Membuat Resource Untuk membuat resource CRUD di Filament, Anda bisa menggunakan perintah Artisan. Misalnya, untuk membuat resource untuk tabel categories, jalankan perintah berikut di terminal: php artisan make:filament-resource Category Perintah ini akan membuat resource yang mencakup fitur CRUD untuk tabel categories, termasuk tampilan antarmuka untuk membuat, mengedit, menghapus, dan melihat data kategori. Lakukan hal yang sama untuk tabel coffees, cafes, dan transactions dengan menyesuaikan nama modelnya: php artisan make:filament-resource Coffee php artisan make:filament-resource Cafe php artisan make:filament-resource Transaction Contoh Koding Resource untuk Categories Setelah perintah di atas dijalankan, Filament akan otomatis membuat file resource di direktori app/Filament/Resources/CategoryResource.php. Buka file tersebut dan Anda akan menemukan struktur dasar dari resource. Berikut adalah contoh implementasi dasar resource untuk Category: namespace App\\\\Filament\\\\Resources; use App\\\\Filament\\\\Resources\\\\CategoryResource\\\\Pages; use App\\\\Models\\\\Category; use Filament\\\\Resources\\\\Resource; use Filament\\\\Resources\\\\Table; use Filament\\\\Resources\\\\Form; use Filament\\\\Forms; use Filament\\\\Tables; class CategoryResource extends Resource { protected static string $model = Category::class; public static function form(Form $form): Form { return $form ->schema([ Forms\\\\Components\\\\TextInput::make('name') ->required(), ]); } public static function table(Table $table): Table { return $table ->columns([ Tables\\\\Columns\\\\TextColumn::make('name'), Tables\\\\Columns\\\\TextColumn::make('created_at') ->dateTime(), ]) ->filters([]); } public static function getPages(): array { return [ 'index' => Pages\\\\ListCategories::route('/'), 'create' => Pages\\\\CreateCategory::route('/create'), 'edit' => Pages\\\\EditCategory::route('/{record}/edit'), ]; } } Bagian form() digunakan untuk mendefinisikan input apa saja yang dibutuhkan saat membuat atau mengedit data kategori, sedangkan bagian table() digunakan untuk menampilkan kolom-kolom apa yang akan muncul di halaman daftar kategori. Contoh Koding Resource untuk Coffees Untuk tabel coffees, resource akan diatur serupa dengan categories, namun dengan penambahan field seperti price dan relasi ke categories. Berikut adalah contoh resource Coffee: namespace App\\\\Filament\\\\Resources; use App\\\\Filament\\\\Resources\\\\CoffeeResource\\\\Pages; use App\\\\Models\\\\Coffee; use Filament\\\\Resources\\\\Resource; use Filament\\\\Resources\\\\Table; use Filament\\\\Resources\\\\Form; use Filament\\\\Forms; use Filament\\\\Tables; class CoffeeResource extends Resource { protected static string $model = Coffee::class; public static function form(Form $form): Form { return $form ->schema([ Forms\\\\Components\\\\TextInput::make('name') ->required(), Forms\\\\Components\\\\TextInput::make('price') ->numeric() ->required(), Forms\\\\Components\\\\Select::make('category_id') ->relationship('category', 'name') ->required(), ]); } public static function table(Table $table): Table { return $table ->columns([ Tables\\\\Columns\\\\TextColumn::make('name'), Tables\\\\Columns\\\\TextColumn::make('price')->money('USD'), Tables\\\\Columns\\\\TextColumn::make('category.name'), Tables\\\\Columns\\\\TextColumn::make('created_at')->dateTime(), ]); } public static function getPages(): array { return [ 'index' => Pages\\\\ListCoffees::route('/'), 'create' => Pages\\\\CreateCoffee::route('/create'), 'edit' => Pages\\\\EditCoffee::route('/{record}/edit'), ]; } } Dalam resource ini, Anda dapat melihat field tambahan untuk harga (price) serta dropdown yang menampilkan kategori (category_id) menggunakan relasi dari model Category. Menambahkan Resource untuk Cafes dan Transactions Langkah yang sama dapat diterapkan pada tabel cafes dan transactions. Pada CafeResource, Anda bisa menambahkan field seperti name dan location. Sedangkan di TransactionResource, tambahkan input untuk cafe_id, coffee_id, quantity, dan total_price. Berikut adalah contoh singkat untuk TransactionResource: namespace App\\\\Filament\\\\Resources; use App\\\\Filament\\\\Resources\\\\TransactionResource\\\\Pages; use App\\\\Models\\\\Transaction; use Filament\\\\Resources\\\\Resource; use Filament\\\\Resources\\\\Table; use Filament\\\\Resources\\\\Form; use Filament\\\\Forms; use Filament\\\\Tables; class TransactionResource extends Resource { protected static string $model = Transaction::class; public static function form(Form $form): Form { return $form ->schema([ Forms\\\\Components\\\\Select::make('cafe_id') ->relationship('cafe', 'name') ->required(), Forms\\\\Components\\\\Select::make('coffee_id') ->relationship('coffee', 'name') ->required(), Forms\\\\Components\\\\TextInput::make('quantity') ->numeric() ->required(), Forms\\\\Components\\\\TextInput::make('total_price') ->numeric() ->required(), ]); } public static function table(Table $table): Table { return $table ->columns([ Tables\\\\Columns\\\\TextColumn::make('cafe.name'), Tables\\\\Columns\\\\TextColumn::make('coffee.name'), Tables\\\\Columns\\\\TextColumn::make('quantity'), Tables\\\\Columns\\\\TextColumn::make('total_price')->money('USD'), Tables\\\\Columns\\\\TextColumn::make('created_at')->dateTime(), ]); } public static function getPages(): array { return [ 'index' => Pages\\\\ListTransactions::route('/'), 'create' => Pages\\\\CreateTransaction::route('/create'), 'edit' => Pages\\\\EditTransaction::route('/{record}/edit'), ]; } } Dengan resource ini, Anda dapat melakukan CRUD untuk semua transaksi yang terjadi di cafe, termasuk mencatat coffee yang dipesan, jumlah, dan total harga. Cara Membuat Export Button pada Tabel Transactions di Filament Untuk menambahkan fitur Export Button pada tabel Transactions yang sudah dibuat sebelumnya di Filament, kita akan memanfaatkan custom action di resource Filament. Fitur ini memungkinkan pengguna untuk mengekspor seluruh data dari tabel transactions ke format seperti CSV atau Excel. Berikut adalah cara membuat Export Button pada tabel Transactions beserta contoh koding lengkapnya. Langkah 1: Menambahkan Custom Action untuk Export Buka file TransactionResource.php yang berada di direktori app/Filament/Resources/TransactionResource.php. Di dalam metode table(), kita bisa menambahkan custom action untuk melakukan export data. Berikut adalah contoh implementasi custom action: namespace App\\\\Filament\\\\Resources; use App\\\\Filament\\\\Resources\\\\TransactionResource\\\\Pages; use App\\\\Models\\\\Transaction; use Filament\\\\Resources\\\\Resource; use Filament\\\\Resources\\\\Table; use Filament\\\\Resources\\\\Form; use Filament\\\\Forms; use Filament\\\\Tables; use Filament\\\\Tables\\\\Actions\\\\Action; use Illuminate\\\\Database\\\\Eloquent\\\\Builder; use Maatwebsite\\\\Excel\\\\Facades\\\\Excel; use App\\\\Exports\\\\TransactionsExport; class TransactionResource extends Resource { protected static string $model = Transaction::class; public static function form(Form $form): Form { return $form ->schema([ Forms\\\\Components\\\\Select::make('cafe_id') ->relationship('cafe', 'name') ->required(), Forms\\\\Components\\\\Select::make('coffee_id') ->relationship('coffee', 'name') ->required(), Forms\\\\Components\\\\TextInput::make('quantity') ->numeric() ->required(), Forms\\\\Components\\\\TextInput::make('total_price') ->numeric() ->required(), ]); } public static function table(Table $table): Table { return $table ->columns([ Tables\\\\Columns\\\\TextColumn::make('cafe.name'), Tables\\\\Columns\\\\TextColumn::make('coffee.name'), Tables\\\\Columns\\\\TextColumn::make('quantity'), Tables\\\\Columns\\\\TextColumn::make('total_price')->money('USD'), Tables\\\\Columns\\\\TextColumn::make('created_at')->dateTime(), ]) ->actions([ Action::make('export') ->label('Export Transactions') ->action(function () { return Excel::download(new TransactionsExport, 'transactions.xlsx'); }), ]); } public static function getPages(): array { return [ 'index' => Pages\\\\ListTransactions::route('/'), 'create' => Pages\\\\CreateTransaction::route('/create'), 'edit' => Pages\\\\EditTransaction::route('/{record}/edit'), ]; } } Pada contoh di atas, kita membuat custom Action bernama export yang akan menampilkan tombol Export Transactions di halaman daftar Transactions. Ketika tombol tersebut diklik, data akan diekspor dalam format Excel dengan menggunakan Maatwebsite Excel. Langkah 2: Membuat TransactionsExport Class Untuk melakukan export ke format Excel, kita perlu membuat sebuah class yang menghandle proses export. Gunakan perintah berikut di terminal untuk membuat class export: php artisan make:export TransactionsExport --model=Transaction Class export ini akan dibuat di direktori app/Exports/TransactionsExport.php. Edit file tersebut dan tambahkan kode berikut untuk mengekspor seluruh data dari tabel transactions: namespace App\\\\Exports; use App\\\\Models\\\\Transaction; use Maatwebsite\\\\Excel\\\\Concerns\\\\FromCollection; class TransactionsExport implements FromCollection { /** * Return a collection of data to be exported. */ public function collection() { return Transaction::all(); } } Class ini mengambil semua data dari tabel transactions dan mengekspornya sebagai file Excel. Langkah 3: Menginstall Maatwebsite Excel Jika Anda belum menginstall package Maatwebsite Excel, Anda bisa menginstallnya dengan perintah berikut: composer require maatwebsite/excel Setelah menginstall package ini, Laravel sudah siap untuk mengekspor data ke berbagai format file, seperti Excel atau CSV. Langkah 4: Menguji Export Button Setelah semua konfigurasi diatur, jalankan aplikasi Laravel Anda, buka halaman Transactions di dashboard Filament, dan Anda akan melihat tombol Export Transactions. Ketika tombol tersebut diklik, file transactions.xlsx akan diunduh, berisi seluruh data dari tabel transactions. Dengan cara ini, Anda berhasil menambahkan fitur Export Button di halaman Transactions menggunakan Filament dan Maatwebsite Excel. Penutup Dengan mengikuti langkah-langkah di atas, Anda sekarang dapat dengan mudah menambahkan fitur Export Button pada tabel Transactions menggunakan Filament dan Maatwebsite Excel di Laravel. Fitur ini memungkinkan admin untuk mengekspor seluruh data transaksi dalam format Excel, yang sangat berguna untuk keperluan laporan atau analisis lebih lanjut. Menambah fitur seperti ini bukan hanya memudahkan proses pengelolaan data, tetapi juga menunjukkan betapa fleksibelnya Laravel dan Filament dalam mengembangkan sistem admin yang kuat dan efisien. Jika Anda ingin lebih mendalami Laravel dan Filament serta meningkatkan keterampilan web development Anda, Anda bisa belajar bersama mentor expert di Buildwithangga. Anda akan mendapatkan banyak manfaat seperti portfolio siap kerja, akses materi selamanya, serta bimbingan private yang akan membantu Anda siap menghadapi tantangan di dunia kerja. Bergabunglah dan maksimalkan potensi Anda dengan dukungan mentor yang berpengalaman!

Dalam membangun sebuah website yang besar dan kompleks, misalnya website pencarian dan penyewaan kos-kosan, keamanan dan kontrol akses menjadi salah satu aspek yang penting. Salah satu fitur Laravel yang sangat membantu untuk mengelola akses ini adalah Policy. Dengan menggunakan Policy, kita bisa memastikan bahwa hanya pengguna tertentu yang dapat mengakses fitur tertentu berdasarkan aturan yang kita tentukan. Bayangkan seperti ini: Sebuah website kos-kosan memiliki berbagai jenis pengguna, mulai dari pengguna Basic hingga pengguna Gold. Pengguna Gold, karena mereka membayar lebih, memiliki akses ke lebih banyak fitur. Misalnya, mereka bisa mengklaim paket katering khusus. Nah, di sinilah Policy berperan. Dengan Laravel Policy, kita bisa membatasi agar hanya pengguna Gold yang bisa mengakses fitur klaim paket katering ini, sementara pengguna Basic tidak bisa. Mengapa Laravel Policy Penting? Policy di Laravel memungkinkan kita untuk membuat aturan yang spesifik untuk siapa yang bisa melakukan tindakan tertentu pada resource tertentu. Misalnya, kita ingin hanya pengguna dengan status Gold yang bisa mengakses link tertentu di website kos-kosan. Jadi, link untuk mengklaim paket katering hanya bisa diakses oleh pengguna yang memenuhi syarat, dan ini dikendalikan dengan Policy. Contoh Implementasi Laravel Policy di Website Koskosan Untuk menerapkan Policy di Laravel, kita perlu membuat sebuah Policy dengan perintah artisan: php artisan make:policy CateringPolicy Policy ini akan berisi metode yang menentukan apakah pengguna memiliki hak untuk mengklaim paket katering. Contohnya: namespace App\\\\Policies; use App\\\\Models\\\\User; class CateringPolicy { /** * Tentukan apakah pengguna bisa mengklaim paket katering. */ public function claimCatering(User $user) { return $user->level === 'Gold'; } } Setelah Policy ini dibuat, kita perlu menghubungkannya dengan AuthServiceProvider. Di file app/Providers/AuthServiceProvider.php, kita daftarkan Policy ini: use App\\\\Models\\\\User; use App\\\\Policies\\\\CateringPolicy; class AuthServiceProvider extends ServiceProvider { protected $policies = [ User::class => CateringPolicy::class, ]; public function boot() { $this->registerPolicies(); } } Sekarang, saat pengguna mencoba mengakses fitur klaim paket katering, kita bisa menggunakan Policy ini untuk memeriksa apakah mereka memiliki izin yang cukup. Di controller, kita bisa menambahkan: public function claimCatering() { if (Gate::denies('claimCatering', auth()->user())) { abort(403, 'Anda tidak memiliki akses untuk klaim paket katering.'); } // Lanjutkan dengan logika klaim paket katering } 1. Fitur Reservasi Kamar Khusus Beberapa kamar kos mungkin hanya tersedia untuk pengguna dengan level tertentu, seperti pengguna Platinum atau Gold. Laravel Policy dapat diterapkan untuk membatasi siapa yang bisa melakukan reservasi untuk kamar-kamar eksklusif ini. Contoh Policy: public function reserveExclusiveRoom(User $user) { return $user->level === 'Platinum' || $user->level === 'Gold'; } Pengguna Basic tidak akan bisa melakukan reservasi pada kamar eksklusif ini, dan akan diarahkan untuk memilih kamar lainnya. 2. Fitur Diskon Spesial Pengguna dengan level tertentu, misalnya Gold, bisa mendapatkan diskon khusus ketika menyewa kamar atau layanan tambahan seperti laundry atau Wi-Fi. Policy bisa digunakan untuk memastikan hanya pengguna yang memenuhi syarat yang bisa mengklaim diskon tersebut. Contoh Policy: public function applyDiscount(User $user) { return $user->level === 'Gold'; } Di controller, kita bisa memeriksa apakah pengguna memenuhi syarat diskon sebelum mengaplikasikan potongan harga. 3. Akses Ke Event Khusus Misalnya, website kos-kosan juga menawarkan akses ke acara-acara khusus seperti webinar atau acara offline bagi penghuni kos. Hanya pengguna yang memiliki level tertentu yang diizinkan untuk mendaftar dan mengikuti acara tersebut. Policy bisa digunakan untuk membatasi akses ini. Contoh Policy: public function accessEvent(User $user) { return $user->level === 'Platinum'; } Pengguna dengan level di bawah Platinum akan dicegah untuk mendaftar. 4. Fitur Ulasan Kamar Kebijakan website bisa mengatur bahwa hanya pengguna yang sudah menyelesaikan pembayaran atau tinggal di kos lebih dari 1 bulan yang boleh memberikan ulasan atau review pada kamar. Policy akan membantu memverifikasi apakah pengguna tersebut berhak menulis ulasan berdasarkan status mereka. Contoh Policy: public function writeReview(User $user) { return $user->hasCompletedPayment(); } Policy ini akan mencegah pengguna yang belum pernah tinggal di kos untuk memberikan ulasan palsu. 5. Fitur Upgrade Level Pengguna Beberapa pengguna mungkin ingin meng-upgrade akun mereka dari level Basic ke Gold untuk menikmati fasilitas tambahan seperti akses ke kamar eksklusif atau paket katering. Fitur ini dapat menggunakan Policy untuk memastikan hanya pengguna yang memenuhi kriteria (misalnya telah membayar biaya upgrade) yang bisa mengakses proses upgrade. Contoh Policy: public function upgradeAccount(User $user) { return $user->canUpgrade(); } Ini memastikan bahwa hanya pengguna yang memenuhi syarat yang bisa melakukan upgrade, mencegah penyalahgunaan sistem. Analogi Laravel Policy Bayangkan Policy di Laravel seperti seorang petugas keamanan di depan pintu akses khusus sebuah gedung. Hanya orang-orang yang memiliki kartu identitas Gold yang diizinkan masuk. Jika seseorang dengan kartu identitas Basic mencoba masuk, mereka akan dihentikan oleh petugas tersebut. Dalam hal ini, Laravel Policy bertindak sebagai “petugas keamanan” yang memeriksa siapa yang boleh dan tidak boleh mengakses fitur tertentu. Dengan Policy, kita dapat mengelola akses ke fitur-fitur sensitif di website kos-kosan secara lebih mudah dan efisien. Tidak hanya itu, Policy juga memastikan bahwa setiap tindakan yang diambil pengguna dalam aplikasi kita sesuai dengan aturan yang telah ditentukan, meningkatkan keamanan dan pengalaman pengguna secara keseluruhan. Untuk mempelajari lebih lanjut tentang Policy di Laravel, kamu bisa baca dokumentasi resmi Laravel. Dengan menerapkan Policy ini, kita bisa memastikan bahwa website kos-kosan kita aman dan fitur-fitur penting seperti klaim paket katering hanya bisa diakses oleh pengguna yang memenuhi syarat. Penutup dan saran Laravel terus menjadi salah satu framework yang paling populer di kalangan developer, terutama karena selalu menghadirkan update menarik yang memudahkan pengembangan website. Dengan fitur-fitur canggih seperti Policy, Eloquent ORM, dan sistem routing yang fleksibel, Laravel memberikan solusi lengkap untuk membangun aplikasi yang aman, cepat, dan mudah dikelola. Untuk terus mengikuti perkembangan terbaru seputar Laravel, jangan lupa pantau terus website BuildWithAngga. Mereka sering mengadakan update kelas gratis dengan studi kasus menarik, dibimbing oleh mentor berpengalaman. Keunggulannya, kamu juga mendapatkan akses kelas seumur hidup, yang sangat cocok bagi siapa saja yang ingin terus belajar dan memperdalam skill programming mereka.

Dalam dunia web development, membuat fitur seperti CRUD, login, atau registrasi sudah menjadi hal yang umum. Namun, ada satu langkah penting yang sering diabaikan oleh banyak programmer, yaitu unit testing. Bayangkan kita sedang membangun sebuah website e-learning, misalnya, yang memiliki banyak fitur seperti pengelolaan kursus, sistem registrasi, dan pengelolaan konten pembelajaran. Setiap fitur tersebut membutuhkan unit testing untuk memastikan bahwa semua berjalan dengan baik dan mempermudah tim dalam melakukan uji coba serta mengurangi risiko terjadinya bug di kemudian hari. Mengapa Unit Testing Penting? Analoginya seperti ini: bayangkan Anda sedang membangun sebuah rumah. Setiap kali Anda selesai membangun satu bagian, Anda akan memeriksa apakah bagian tersebut kokoh dan sesuai dengan rencana. Jika ada kesalahan, Anda bisa langsung memperbaikinya sebelum melanjutkan ke bagian lain. Unit testing berfungsi seperti pemeriksaan ini dalam pembangunan website. Setiap kali kita membuat fungsi atau fitur, kita bisa langsung menguji apakah fitur tersebut bekerja sesuai dengan yang diharapkan sebelum melanjutkan ke fitur berikutnya. Dengan begitu, ketika seluruh website selesai dibuat, kita tidak perlu khawatir lagi akan adanya error di setiap bagian. 5 Fitur Utama pada Website E-learning Online Website e-learning yang efektif harus memiliki beberapa fitur utama untuk memberikan pengalaman belajar yang optimal. Berikut lima fitur penting yang biasanya ada: 1) Daftar Kursus Fitur ini memungkinkan pengguna untuk melihat dan mencari kursus berdasarkan kategori, tingkat kesulitan, atau topik tertentu. Pengguna bisa mendapatkan informasi lengkap seperti deskripsi, durasi, dan profil instruktur untuk memilih kursus yang tepat. 2) Sistem Registrasi Fitur ini memudahkan pengguna untuk membuat akun dan mendaftar kursus. Selain itu, sistem registrasi membantu melacak progres belajar pengguna, mengelola akses ke konten premium, dan memberikan notifikasi terkait aktivitas kursus. 3) Fitur Ujian dan Kuis Ujian dan kuis membantu pengguna menguji pemahaman mereka terhadap materi. Fitur ini biasanya mencakup soal pilihan ganda, isian singkat, atau essay dengan penilaian otomatis dan umpan balik langsung. 4) Manajemen Konten Pembelajaran Instruktur dapat mengelola materi pembelajaran seperti video, dokumen, dan presentasi. Materi dapat disusun dalam modul atau bab untuk memberikan pembelajaran yang terstruktur dan mudah diakses. 5) Sistem Penilaian Peserta Fitur ini memungkinkan instruktur memberikan penilaian berdasarkan hasil ujian, tugas, dan partisipasi. Peserta dapat melihat progres mereka dan mendapatkan umpan balik yang membantu memperbaiki hasil belajar. Cara Membuat Proyek Laravel 11 Baru dengan Composer dan Mengatur .env untuk Unit Testing Untuk memulai proyek Laravel 11, buka terminal dan jalankan perintah berikut untuk mengunduh dan membuat proyek baru: composer create-project --prefer-dist laravel/laravel elearning-platform Setelah proyek berhasil dibuat, masuk ke direktori proyek: cd elearning-platform Selanjutnya, lakukan konfigurasi pada file .env yang ada di root proyek. Sesuaikan pengaturan database agar dapat digunakan untuk unit testing. Misalnya, gunakan database sqlite yang biasanya digunakan untuk keperluan testing: DB_CONNECTION=sqlite DB_DATABASE=/path/to/database/testing.sqlite Jangan lupa untuk membuat file testing.sqlite di direktori yang sudah ditentukan. Anda bisa menggunakan perintah berikut di terminal: touch /path/to/database/testing.sqlite Untuk mempermudah unit testing, pastikan Anda sudah menjalankan perintah berikut untuk membuat database testing: php artisan migrate Contoh Koding Pengujian untuk Fitur Registrasi Kursus Buat file test baru untuk pengujian registrasi kursus dengan menggunakan perintah: php artisan make:test CourseRegistrationTest Kemudian, tambahkan pengujian berikut di file tests/Feature/CourseRegistrationTest.php: <?php namespace Tests\\\\Feature; use App\\\\Models\\\\User; use Illuminate\\\\Foundation\\\\Testing\\\\RefreshDatabase; use Tests\\\\TestCase; class CourseRegistrationTest extends TestCase { use RefreshDatabase; public function test_user_can_register_for_a_course() { $user = User::factory()->create(); $this->actingAs($user); $response = $this->post('/courses/register', [ 'course_id' => 1, 'user_id' => $user->id, ]); $response->assertStatus(200); $response->assertSee('Kursus berhasil didaftarkan'); } } Contoh Koding Pengujian untuk Fitur Manajemen Konten Pembelajaran Buat file test baru untuk menguji manajemen konten pembelajaran: php artisan make:test ContentManagementTest Tambahkan kode berikut di file tests/Feature/ContentManagementTest.php: <?php namespace Tests\\\\Feature; use App\\\\Models\\\\User; use App\\\\Models\\\\Content; use Illuminate\\\\Foundation\\\\Testing\\\\RefreshDatabase; use Tests\\\\TestCase; class ContentManagementTest extends TestCase { use RefreshDatabase; public function test_instructor_can_add_content() { $instructor = User::factory()->create(['role' => 'instructor']); $this->actingAs($instructor); $response = $this->post('/contents', [ 'title' => 'Laravel Basics', 'description' => 'Introduction to Laravel framework.', 'content' => 'This is the content for the Laravel Basics module.', ]); $response->assertStatus(201); $this->assertDatabaseHas('contents', [ 'title' => 'Laravel Basics' ]); } public function test_instructor_can_update_content() { $instructor = User::factory()->create(['role' => 'instructor']); $this->actingAs($instructor); $content = Content::factory()->create(); $response = $this->put("/contents/{$content->id}", [ 'title' => 'Updated Laravel Basics', 'description' => 'Updated introduction to Laravel framework.', 'content' => 'This is the updated content for the Laravel Basics module.', ]); $response->assertStatus(200); $this->assertDatabaseHas('contents', [ 'title' => 'Updated Laravel Basics' ]); } } Tata Cara Membuat dan Mengatur File Unit Testing untuk 5 Fitur E-learning Untuk membuat dan mengatur file unit testing bagi kelima fitur, Anda bisa menggunakan php artisan make:test untuk membuat file test secara terpisah. Misalnya, Anda ingin membuat file test untuk sistem registrasi, manajemen konten, dan sistem penilaian peserta. Buat file test untuk masing-masing fitur: php artisan make:test CourseRegistrationTest php artisan make:test ContentManagementTest php artisan make:test AssessmentSystemTest Pada file CourseRegistrationTest.php, tambahkan pengujian untuk registrasi kursus: <?php namespace Tests\\\\Feature; use App\\\\Models\\\\User; use App\\\\Models\\\\Course; use Illuminate\\\\Foundation\\\\Testing\\\\RefreshDatabase; use Tests\\\\TestCase; class CourseRegistrationTest extends TestCase { use RefreshDatabase; public function test_user_can_register_for_course() { $user = User::factory()->create(); $course = Course::factory()->create(); $this->actingAs($user); $response = $this->post('/courses/register', [ 'course_id' => $course->id, 'user_id' => $user->id, ]); $response->assertStatus(200); $response->assertJson([ 'message' => 'Kursus berhasil didaftarkan' ]); } } Pada file ContentManagementTest.php, tambahkan pengujian untuk manajemen konten: <?php namespace Tests\\\\Feature; use App\\\\Models\\\\User; use App\\\\Models\\\\Content; use Illuminate\\\\Foundation\\\\Testing\\\\RefreshDatabase; use Tests\\\\TestCase; class ContentManagementTest extends TestCase { use RefreshDatabase; public function test_instructor_can_create_content() { $instructor = User::factory()->create(['role' => 'instructor']); $this->actingAs($instructor); $response = $this->post('/contents', [ 'title' => 'Laravel Basics', 'description' => 'Introduction to Laravel', 'content' => 'This is the content of Laravel Basics.', ]); $response->assertStatus(201); $this->assertDatabaseHas('contents', [ 'title' => 'Laravel Basics' ]); } } Pada file AssessmentSystemTest.php, tambahkan pengujian untuk sistem penilaian peserta: <?php namespace Tests\\\\Feature; use App\\\\Models\\\\User; use App\\\\Models\\\\Course; use App\\\\Models\\\\Assessment; use Illuminate\\\\Foundation\\\\Testing\\\\RefreshDatabase; use Tests\\\\TestCase; class AssessmentSystemTest extends TestCase { use RefreshDatabase; public function test_instructor_can_give_assessment() { $instructor = User::factory()->create(['role' => 'instructor']); $course = Course::factory()->create(['instructor_id' => $instructor->id]); $student = User::factory()->create(); $this->actingAs($instructor); $response = $this->post("/courses/{$course->id}/assessments", [ 'student_id' => $student->id, 'score' => 85, 'feedback' => 'Good job!' ]); $response->assertStatus(201); $this->assertDatabaseHas('assessments', [ 'student_id' => $student->id, 'score' => 85, 'feedback' => 'Good job!' ]); } } Dengan cara ini, Anda dapat membuat dan mengatur file unit testing untuk masing-masing fitur e-learning secara terpisah, sehingga setiap fitur dapat diuji secara mendetail dan terstruktur. Menggunakan RefreshDatabase di Laravel tidak akan menghapus data asli pada server production karena RefreshDatabase secara otomatis bekerja hanya di environment testing. Laravel memisahkan pengaturan environment untuk pengujian, development, dan production. Saat melakukan pengujian, Laravel akan menggunakan file .env.testing atau konfigurasi testing yang berbeda dari environment production. Jadi, secara default, RefreshDatabase akan mereset database hanya untuk pengujian, bukan untuk environment production. Namun, untuk memastikan keamanan lebih lanjut, penting bagi developer untuk mengikuti beberapa langkah preventif agar data production tetap aman: Periksa Environment: Pastikan aplikasi menggunakan environment testing saat menjalankan unit test. Ini bisa diatur di file phpunit.xml atau file .env.testing. Dengan cara ini, database yang digunakan untuk pengujian tidak akan sama dengan database production.Gunakan SQLite atau Database Terpisah untuk Testing: Anda bisa menggunakan SQLite (in-memory database) atau database terpisah hanya untuk keperluan pengujian. Dengan demikian, tidak ada risiko database production terkena dampak pengujian.Hindari Menjalankan Pengujian di Production: Jangan pernah menjalankan perintah testing di environment production. Anda bisa menambahkan pengecekan di kode untuk memastikan pengujian tidak dijalankan di production. Berikut adalah contoh koding sederhana untuk memastikan RefreshDatabase hanya digunakan di environment testing: <?php namespace Tests\\\\Feature; use Illuminate\\\\Foundation\\\\Testing\\\\RefreshDatabase; use Tests\\\\TestCase; class ExampleTest extends TestCase { use RefreshDatabase; protected function setUp(): void { parent::setUp(); // Pastikan unit test hanya berjalan di environment testing if (app()->environment() !== 'testing') { $this->markTestSkipped('Testing hanya boleh dijalankan di environment testing.'); } } public function test_example() { // Contoh pengujian sederhana $this->assertTrue(true); } } Kode di atas memastikan bahwa pengujian akan dilewati jika environment yang digunakan bukan testing. Dengan melakukan langkah-langkah ini, Anda bisa menghindari potensi risiko menghapus data asli pada server production saat melakukan unit testing. Kesalahan Umum Ketika Melakukan Unit Testing pada Projek E-learning Online Dalam melakukan unit testing pada proyek e-learning online, ada beberapa kesalahan yang sering terjadi dan dapat menyebabkan pengujian menjadi tidak efektif atau bahkan berdampak negatif pada lingkungan pengembangan. Berikut adalah tiga kesalahan umum yang perlu dihindari: 1) Tidak Menggunakan Database Testing Salah satu kesalahan yang sering dilakukan adalah menggunakan database asli atau production untuk pengujian. Ini sangat berisiko karena dapat mengubah atau merusak data penting yang ada di database asli. Sebagai gantinya, sebaiknya gunakan database testing seperti SQLite atau database sementara yang terpisah dari database utama. Contoh kesalahan: // Menggunakan database MySQL production secara langsung config(['database.connections.mysql.database' => 'production_db']); public function test_course_registration() { $response = $this->post('/courses/register', [ 'course_id' => 1, 'user_id' => 1, ]); $response->assertStatus(200); } Perbaikan: Gunakan database testing yang aman dan terisolasi: // Menggunakan SQLite untuk pengujian config(['database.connections.sqlite.database' => ':memory:']); public function test_course_registration() { $response = $this->post('/courses/register', [ 'course_id' => 1, 'user_id' => 1, ]); $response->assertStatus(200); } 2) Menghubungkan ke Layanan Video Hosting Langsung Pada aplikasi e-learning, terkadang diperlukan integrasi dengan layanan video hosting seperti YouTube atau Vimeo untuk menampilkan konten pembelajaran. Menghubungkan langsung ke layanan ini dalam pengujian dapat menyebabkan pengujian menjadi lambat dan tidak stabil, terutama jika layanan tersebut mengalami downtime atau masalah koneksi. Contoh kesalahan: public function test_video_content_is_accessible() { // Menghubungkan ke API YouTube langsung $response = Http::get('<https://www.googleapis.com/youtube/v3/videos>', [ 'id' => 'video_id', 'key' => 'API_KEY' ]); $response->assertStatus(200); } Perbaikan: Gunakan mock atau simulasi untuk meniru respons dari layanan eksternal: use Illuminate\\\\Support\\\\Facades\\\\Http; public function test_video_content_is_accessible() { // Simulasi respons dari API YouTube Http::fake([ '<https://www.googleapis.com/youtube/v3/videos>' => Http::response([ 'items' => [ ['id' => 'video_id', 'status' => 'public'] ] ], 200) ]); $response = Http::get('<https://www.googleapis.com/youtube/v3/videos>', [ 'id' => 'video_id', 'key' => 'API_KEY' ]); $response->assertStatus(200); } 3) Membuat Pengujian yang Terlalu Kompleks Kesalahan lain adalah membuat pengujian yang terlalu kompleks dan sulit dipelihara. Pengujian yang mencakup terlalu banyak skenario dalam satu test case akan sulit dipahami dan di-debug. Pengujian sebaiknya fokus pada satu skenario spesifik dan menggunakan metode yang mudah diikuti. Contoh kesalahan: public function test_course_creation_and_registration_with_invalid_data() { // Pengujian terlalu kompleks, mencakup banyak skenario $response = $this->post('/courses', [ 'title' => '', 'description' => '', ]); $response->assertStatus(422); $response = $this->post('/courses/register', [ 'course_id' => 1, 'user_id' => 'invalid', ]); $response->assertStatus(422); $response = $this->get('/courses/1'); $response->assertStatus(404); } Perbaikan: Pisahkan pengujian ke dalam beberapa test case yang lebih spesifik: public function test_course_creation_with_invalid_data() { // Hanya menguji pembuatan kursus dengan data yang tidak valid $response = $this->post('/courses', [ 'title' => '', 'description' => '', ]); $response->assertStatus(422); } public function test_registration_with_invalid_user() { // Menguji registrasi kursus dengan user yang tidak valid $response = $this->post('/courses/register', [ 'course_id' => 1, 'user_id' => 'invalid', ]); $response->assertStatus(422); } Dengan menghindari kesalahan-kesalahan ini, pengujian akan menjadi lebih efektif, aman, dan mudah dikelola. Pastikan setiap unit test dijalankan pada environment yang tepat dan hanya menguji satu skenario sederhana per test case. Penutup Laravel terus menjadi pilihan utama bagi para developer karena pembaruan fitur yang rutin dan memudahkan proses pengembangan aplikasi. Dengan banyaknya peningkatan dan komunitas yang aktif, framework ini akan tetap relevan dan populer di kalangan programmer. Untuk belajar lebih dalam tentang Laravel dan topik web development lainnya, pastikan untuk terus memantau website BuildWithAngga. Mereka sering menyediakan kelas gratis dengan studi kasus menarik yang dibawakan oleh mentor berpengalaman, serta memberikan akses kelas seumur hidup yang sangat bermanfaat bagi pengembangan skill Anda. Jangan lewatkan kesempatan untuk belajar dan berkembang bersama komunitas yang solid!

Di dunia desain digital yang bergerak cepat, efisiensi dan kualitas adalah hal yang sangat penting. UI Kits, koleksi elemen UI yang telah didesain sebelumnya, telah muncul sebagai alat yang tak ternilai bagi para desainer, memperlancar proses desain dan memastikan konsistensi di seluruh proyek. Gambaran komprehensif ini akan mengeksplorasi manfaat, fitur utama, dan platform UI Kit yang populer, memberikan kamu pemahaman yang lebih dalam tentang bagaimana sumber daya ini dapat meningkatkan alur kerja desainmu. Dalam artikel kali ini, kita akan berkenalan dengan 3 Resources UI Kit yang populer di tahun 2024! Apa saja sih? Universal UI Starter Kit Bayangkan kamu sedang membangun sebuah rumah. Kamu pasti membutuhkan fondasi yang kuat, kan? Nah, Universal UI Starter Kit itu seperti fondasi untuk desain website atau aplikasi kamu. Universal Starter Kit ini adalah kumpulan komponen desain yang sudah jadi, seperti tombol, kotak input, menu navigasi, dan elemen-elemen lainnya yang sering digunakan dalam desain antarmuka pengguna (UI). Semua komponen ini sudah dirancang dengan baik dan siap pakai, sehingga kamu tidak perlu membuat semuanya dari awal. Kelebihan Universal UI Starter Kit: Menghemat Waktu: Karena komponen-komponen sudah siap pakai, kamu bisa langsung menggunakannya tanpa perlu mendesain ulang. Ini akan sangat menghemat waktu pengerjaan proyek.Konsisten: Semua komponen dalam satu kit biasanya dirancang dengan gaya yang sama, sehingga desain kamu akan terlihat lebih konsisten dan profesional.Mudah Dikustomisasi: Meskipun sudah jadi, kamu tetap bisa menyesuaikan komponen-komponen ini sesuai dengan kebutuhan proyekmu.Efisien: Dengan menggunakan starter kit, kamu bisa fokus pada bagian yang lebih kreatif dari desainmu, seperti tata letak dan pemilihan warna. Spotify - Mobile UI Kit Ketika kamu ingin membuat aplikasi musik seperti Spotify. Kamu bisa saja membuat semua desainnya dari awal, satu per satu. Tapi, akan lebih cepat dan efisien jika kamu menggunakan "blueprint" yang sudah ada, bukan? Nah, Spotify - Mobile UI Kit itu seperti "blueprint" siap pakai untuk aplikasi musik. Ini adalah kumpulan komponen desain yang sudah jadi, seperti tombol "Play", tampilan daftar lagu, profil pengguna, dan elemen-elemen khas Spotify lainnya. Semua komponen ini sudah dirancang dengan gaya khas Spotify dan siap kamu gunakan untuk membuat aplikasi musikmu sendiri. Kelebihan Spotify - Mobile UI Kit: Menghemat Waktu: Kamu tidak perlu mendesain ulang semua elemen dari awal. Cukup sesuaikan dengan kebutuhan aplikasi kamu.Konsisten dengan Brand Spotify: Desainnya sudah mengikuti gaya visual Spotify, jadi aplikasi kamu akan terlihat lebih profesional dan familiar bagi pengguna Spotify.Inspirasi Desain: Kamu bisa melihat bagaimana Spotify merancang antarmuka pengguna mereka dan mendapatkan inspirasi untuk desain aplikasi musikmu. ShaynaKIT ShaynaKit.com adalah sebuah platform yang menyediakan berbagai macam sumber daya desain, terutama UI Kit dan template website. Bayangkan ini seperti sebuah toko perlengkapan desain, di mana kamu bisa menemukan berbagai macam "bahan baku" untuk membangun desain website atau aplikasi kamu. Kelebihan ShaynaKit.com: Beragam Pilihan: ShaynaKit.com menawarkan banyak pilihan UI Kit dan template dengan berbagai gaya dan tema. Jadi, kamu bisa memilih yang paling sesuai dengan kebutuhan proyekmu.Mudah Digunakan: Sumber daya yang disediakan umumnya sudah siap pakai dan mudah disesuaikan. Kamu tidak perlu memulai dari nol.Hemat Waktu: Dengan menggunakan sumber daya dari ShaynaKit.com, kamu bisa menghemat waktu yang biasanya digunakan untuk mendesain elemen-elemen dasar.Inspirasi Desain: Melihat berbagai desain yang ada di ShaynaKit.com bisa memberikanmu inspirasi untuk proyek desainmu sendiri.Komponen Lengkap: Selain UI Kit, ShaynaKit.com juga menyediakan berbagai komponen desain lainnya seperti ikon, ilustrasi, dan font yang bisa kamu kombinasikan. Kesimpulan UI Kits telah menjadi alat yang tak tergantikan bagi desainer modern, menawarkan berbagai manfaat dalam hal efisiensi, konsistensi, dan kualitas. Dengan memanfaatkan sumber daya yang telah didesain sebelumnya, desainer dapat memperlancar alur kerja mereka, menciptakan antarmuka yang menarik secara visual, dan memberikan pengalaman pengguna yang luar biasa. Baik kamu seorang profesional berpengalaman atau desainer pemula, menjelajahi UI Kits dapat secara signifikan meningkatkan proses desainmu 🤩 Yuk ikuti kelas-kelas UI/UX di BuildWithAngga untuk asah skill dan pengetahuanmu di bidang ini! Bangun portfolio berkualitas dan kesempatan magang di sini! 😁