Akses kelas selamanya

Ambil Promo
flash sale
hamburger-menu

Tips All

Meningkatkan skills menjadi 1% lebih baik

Reset
Kelas Tutorial Next JS Pemula: Belajar Menerapkan Types TypeScript di BuildWithAngga

Tutorial Next JS Pemula: Belajar Menerapkan Types TypeScript

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!

Kelas Tutorial Next JS 14 Pemula: Bikin Web  Jual Template CV Sederhana di BuildWithAngga

Tutorial Next JS 14 Pemula: Bikin Web Jual Template CV Sederhana

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!

Kelas Tutorial Next JS 14 Pemula: Bikin Web Jual Ebook Sederhana di BuildWithAngga

Tutorial Next JS 14 Pemula: Bikin Web Jual Ebook Sederhana

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!

Kelas Tutorial Laravel 10 Cara Bikin Admin CMS dengan Filament Projek Web Order Coffee Shop di BuildWithAngga

Tutorial Laravel 10 Cara Bikin Admin CMS dengan Filament Projek Web Order Coffee Shop

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!

Kelas Tutorial Pake Laravel Policy Pada Projek Website Koskosan di BuildWithAngga

Tutorial Pake Laravel Policy Pada Projek Website Koskosan

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.

Kelas Cara Bikin dan Melakukan Unit Testing dengan Laravel 11 Pada Projek Website E-learning Online di BuildWithAngga

Cara Bikin dan Melakukan Unit Testing dengan Laravel 11 Pada Projek Website E-learning Online

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!

Kelas 3 Sumber UI Kit Populer 2024! di BuildWithAngga

3 Sumber UI Kit Populer 2024!

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! 😁

Kelas Cara Bikin dan Melakukan Unit Testing dengan Laravel 11 Pada Projek Website Toko Buah Online di BuildWithAngga

Cara Bikin dan Melakukan Unit Testing dengan Laravel 11 Pada Projek Website Toko Buah Online

Dalam pengembangan perangkat lunak, selain membuat fitur CRUD atau sistem login, programmer juga wajib menyediakan dan melakukan unit testing. Bayangkan jika kita membuat sebuah resep masakan; kita perlu mencicipi setiap bahan untuk memastikan rasa yang pas. Begitu pula dengan unit testing, yang membantu tim untuk menguji coba fitur sebelum dirilis, memastikan semuanya berfungsi dengan baik dan mengurangi kemungkinan kesalahan di masa depan. Di Laravel 11, melakukan unit testing menjadi sangat mudah. Laravel menyediakan berbagai alat dan fungsionalitas yang memungkinkan programmer untuk menulis dan menjalankan pengujian dengan cepat. Dengan bantuan framework ini, pengujian bisa dilakukan secara otomatis, sehingga pengembang dapat lebih fokus pada pengembangan fitur baru tanpa khawatir akan kesalahan yang mungkin ada. Ketika membuat website jual buah online, ada beberapa fitur unggulan yang biasanya tersedia. Pertama, halaman produk yang menampilkan berbagai jenis buah dengan deskripsi dan harga. Kedua, keranjang belanja yang memungkinkan pengguna untuk menambahkan barang sebelum melakukan checkout. Ketiga, sistem pembayaran yang aman untuk memudahkan transaksi. Keempat, pelacakan pesanan untuk memberi tahu pengguna tentang status pengiriman. Terakhir, fitur ulasan pengguna, yang memungkinkan pembeli memberikan feedback tentang produk yang mereka beli, meningkatkan kepercayaan pengguna lain. Cara Membuat Proyek Laravel 11 Baru dengan Composer dan Mengatur .env untuk Unit Testing Untuk memulai proyek Laravel 11 baru, pertama-tama pastikan Anda telah menginstal Composer di sistem Anda. Berikut adalah langkah-langkahnya: Buka terminal atau command prompt, lalu jalankan perintah berikut untuk membuat proyek baru: composer create-project laravel/laravel nama-proyek Gantilah nama-proyek dengan nama yang Anda inginkan. Setelah proses selesai, masuk ke direktori proyek: cd nama-proyek Selanjutnya, Anda perlu mengatur file .env untuk konfigurasi database yang digunakan dalam unit testing. Buka file .env di editor teks Anda dan sesuaikan pengaturan database, misalnya: DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=nama_database DB_USERNAME=root DB_PASSWORD=password Gantilah nilai-nilai di atas sesuai dengan konfigurasi database Anda. Untuk menjalankan unit testing, pastikan Anda sudah membuat beberapa fitur atau model yang ingin diuji. Misalnya, jika Anda memiliki model Product, buatlah pengujian untuk memastikan model tersebut berfungsi dengan baik. Jalankan perintah berikut untuk membuat pengujian: php artisan make:test ProductTest Kemudian, buka file tests/Feature/ProductTest.php dan tambahkan kode berikut untuk menguji fitur produk: <?php namespace Tests\\\\Feature; use App\\\\Models\\\\Product; use Illuminate\\\\Foundation\\\\Testing\\\\RefreshDatabase; use Tests\\\\TestCase; class ProductTest extends TestCase { use RefreshDatabase; public function test_product_creation() { $response = $this->post('/api/products', [ 'name' => 'Apple', 'price' => 2000, ]); $response->assertStatus(201); $this->assertDatabaseHas('products', [ 'name' => 'Apple', 'price' => 2000, ]); } } Terakhir, jalankan pengujian dengan perintah berikut: php artisan test Dengan langkah-langkah di atas, Anda sudah berhasil membuat proyek Laravel 11 baru, mengatur file .env, dan melakukan unit testing pada fitur yang telah Anda buat. Cara Membuat dan Mengatur File Unit Testing untuk Fitur-Fitur di Laravel 11 Untuk melakukan unit testing pada lima fitur utama website jual buah online, pertama-tama pastikan Anda sudah memiliki struktur database dan API endpoint yang sesuai. Berikut adalah cara membuat dan mengatur file unit testing untuk masing-masing fitur dengan contoh kode lengkap. 1. Pengujian Fitur Produk Buat file test baru untuk menguji fitur produk: php artisan make:test ProductTest Buka file tests/Feature/ProductTest.php dan tambahkan kode berikut untuk menguji fitur produk, termasuk membuat dan memastikan produk tersimpan di database: <?php namespace Tests\\\\Feature; use App\\\\Models\\\\Product; use Illuminate\\\\Foundation\\\\Testing\\\\RefreshDatabase; use Tests\\\\TestCase; class ProductTest extends TestCase { use RefreshDatabase; public function test_create_product() { $response = $this->postJson('/api/products', [ 'name' => 'Apple', 'price' => 10000, 'stock' => 50, ]); $response->assertStatus(201); $this->assertDatabaseHas('products', [ 'name' => 'Apple', 'price' => 10000, ]); } } 2. Pengujian Fitur Keranjang Belanja Buat file test baru untuk menguji fitur keranjang belanja: php artisan make:test CartTest Buka file tests/Feature/CartTest.php dan tambahkan kode berikut untuk menguji fitur menambah produk ke keranjang: <?php namespace Tests\\\\Feature; use App\\\\Models\\\\Product; use Illuminate\\\\Foundation\\\\Testing\\\\RefreshDatabase; use Tests\\\\TestCase; class CartTest extends TestCase { use RefreshDatabase; public function test_add_to_cart() { $product = Product::create([ 'name' => 'Banana', 'price' => 5000, 'stock' => 30, ]); $response = $this->postJson('/api/cart', [ 'product_id' => $product->id, 'quantity' => 2, ]); $response->assertStatus(200) ->assertJson([ 'added' => true, 'product_id' => $product->id, 'quantity' => 2, ]); } } 3. Pengujian Fitur Pembayaran Buat file test baru untuk menguji fitur pembayaran: php artisan make:test PaymentTest Buka file tests/Feature/PaymentTest.php dan tambahkan kode berikut untuk menguji fitur pembayaran: <?php namespace Tests\\\\Feature; use Illuminate\\\\Foundation\\\\Testing\\\\RefreshDatabase; use Tests\\\\TestCase; class PaymentTest extends TestCase { use RefreshDatabase; public function test_secure_payment() { $response = $this->postJson('/api/payment', [ 'amount' => 15000, 'payment_method' => 'credit_card', ]); $response->assertStatus(200) ->assertJson([ 'payment_status' => 'success', ]); } } 4. Pengujian Fitur Pelacakan Pesanan Buat file test baru untuk menguji fitur pelacakan pesanan: php artisan make:test OrderTrackingTest Buka file tests/Feature/OrderTrackingTest.php dan tambahkan kode berikut untuk menguji fitur pelacakan pesanan: <?php namespace Tests\\\\Feature; use App\\\\Models\\\\Order; use Illuminate\\\\Foundation\\\\Testing\\\\RefreshDatabase; use Tests\\\\TestCase; class OrderTrackingTest extends TestCase { use RefreshDatabase; public function test_order_tracking() { $order = Order::create([ 'user_id' => 1, 'status' => 'shipped', 'total' => 25000, ]); $response = $this->getJson('/api/orders/' . $order->id); $response->assertStatus(200) ->assertJson([ 'status' => 'shipped', ]); } } 5. Pengujian Fitur Ulasan Pengguna Buat file test baru untuk menguji fitur ulasan pengguna: php artisan make:test ReviewTest Buka file tests/Feature/ReviewTest.php dan tambahkan kode berikut untuk menguji fitur ulasan pengguna: <?php namespace Tests\\\\Feature; use App\\\\Models\\\\Product; use Illuminate\\\\Foundation\\\\Testing\\\\RefreshDatabase; use Tests\\\\TestCase; class ReviewTest extends TestCase { use RefreshDatabase; public function test_user_review() { $product = Product::create([ 'name' => 'Grapes', 'price' => 8000, 'stock' => 20, ]); $response = $this->postJson('/api/reviews', [ 'product_id' => $product->id, 'rating' => 5, 'comment' => 'Excellent quality!', ]); $response->assertStatus(201) ->assertJson([ 'reviewed' => true, 'product_id' => $product->id, ]); } } Setelah semua file pengujian selesai dibuat, jalankan perintah berikut untuk menjalankan semua pengujian: php artisan test Semua pengujian akan dijalankan, dan Anda akan melihat hasilnya di terminal. Dengan cara ini, Anda bisa memastikan bahwa setiap fitur di website toko buah online berfungsi sesuai dengan harapan. Pengertian tentang RefreshDatabase Menggunakan RefreshDatabase pada Laravel hanya akan memengaruhi database pengujian (testing) dan tidak akan menghapus atau memengaruhi data asli di server production Anda. Namun, penting untuk memahami bagaimana RefreshDatabase bekerja agar tidak terjadi kesalahpahaman. Bagaimana RefreshDatabase Bekerja? RefreshDatabase adalah trait yang digunakan pada pengujian Laravel untuk memastikan database dalam keadaan bersih setiap kali pengujian dijalankan. Trait ini akan menjalankan perintah migrate:fresh yang akan menghapus semua tabel di database dan kemudian membuat ulang tabel sesuai dengan migrasi yang ada. Penggunaan Lokal atau Pengembangan: Saat Anda menjalankan pengujian secara lokal atau di lingkungan pengembangan, RefreshDatabase akan bekerja pada database pengujian yang ditentukan di file .env.testing atau di .env jika tidak ada konfigurasi khusus untuk testing.Penggunaan di Production: Laravel tidak secara otomatis menggunakan database production untuk pengujian. Saat Anda menjalankan perintah php artisan test atau phpunit, Laravel akan menggunakan koneksi database yang ditentukan untuk lingkungan pengujian. Ini biasanya diatur di file .env.testing atau melalui konfigurasi di file phpunit.xml. Apakah Data di Production Akan Hilang? Tidak, data di server production Anda tidak akan terhapus jika: Anda tidak menjalankan perintah pengujian (php artisan test atau phpunit) di lingkungan production.Anda memastikan bahwa pengujian dilakukan dengan koneksi database yang terpisah dari database production, yang biasanya diatur dalam file .env.testing. Tips untuk Keamanan Pengujian Selalu Gunakan Koneksi Database Pengujian: Pastikan koneksi database untuk pengujian berbeda dengan koneksi database production. Anda bisa membuat database khusus untuk pengujian.Cek Konfigurasi env: Pastikan Anda menggunakan file .env.testing atau pengaturan khusus di file phpunit.xml untuk koneksi database pengujian.Jangan Jalankan php artisan test di Production: Hindari menjalankan pengujian di lingkungan production untuk menghindari risiko yang tidak perlu. Dengan mengikuti praktik-praktik di atas, Anda dapat menggunakan RefreshDatabase dengan aman tanpa khawatir data production akan terpengaruh. Kesalahan Umum dalam Melakukan Unit Testing di Laravel Unit testing adalah bagian penting dari pengembangan aplikasi, namun seringkali terdapat kesalahan yang dilakukan oleh programmer, terutama bagi yang baru memulai. Berikut adalah tiga kesalahan umum saat melakukan unit testing di Laravel beserta contoh kode yang relevan. Menggunakan Database Production untuk Pengujian Salah satu kesalahan terbesar adalah menggunakan database production untuk menjalankan pengujian. Ini sangat berbahaya karena dapat menghapus atau memodifikasi data yang sebenarnya digunakan dalam aplikasi. Misalnya, jika menggunakan RefreshDatabase tanpa memastikan bahwa koneksi database sudah diset untuk pengujian, semua data di database production bisa terhapus. Contoh kode yang salah: use Illuminate\\\\Foundation\\\\Testing\\\\RefreshDatabase; use Tests\\\\TestCase; class ProductTest extends TestCase { use RefreshDatabase; public function test_create_product() { // Jika koneksi menggunakan database production, ini akan menghapus semua data. $response = $this->post('/api/products', [ 'name' => 'Apple', 'price' => 10000, 'stock' => 50, ]); $response->assertStatus(201); } } Pastikan untuk menggunakan database khusus pengujian dengan menambahkan konfigurasi di file .env.testing seperti: DB_CONNECTION=mysql_testing DB_DATABASE=testing_database Tidak Menggunakan Mocking untuk Layanan Eksternal Ketika melakukan unit testing, penting untuk memisahkan pengujian dari dependensi luar, seperti API eksternal atau layanan pembayaran. Menghubungkan langsung ke layanan eksternal saat pengujian tidak hanya memperlambat proses, tetapi juga dapat menyebabkan hasil yang tidak konsisten. Contoh kode yang salah: class PaymentTest extends TestCase { public function test_payment_process() { // Memanggil layanan pembayaran eksternal secara langsung. $response = $this->post('/api/payment', [ 'amount' => 15000, 'payment_method' => 'credit_card', ]); $response->assertStatus(200); } } Untuk mengatasi ini, gunakan mocking atau fake service agar pengujian tetap cepat dan terisolasi: class PaymentTest extends TestCase { public function test_payment_process() { // Menggunakan mock untuk layanan pembayaran. $this->mock(PaymentService::class, function ($mock) { $mock->shouldReceive('process') ->andReturn(['status' => 'success']); }); $response = $this->post('/api/payment', [ 'amount' => 15000, 'payment_method' => 'credit_card', ]); $response->assertStatus(200) ->assertJson(['status' => 'success']); } } Menulis Pengujian Terlalu Kompleks atau Tidak Fokus Pengujian unit seharusnya hanya menguji satu fungsi atau bagian kecil dari kode. Kesalahan yang umum adalah menulis pengujian yang terlalu kompleks, yang menguji beberapa fitur sekaligus, sehingga sulit menemukan penyebab kesalahan jika pengujian gagal. Contoh kode yang salah: class ComplexFeatureTest extends TestCase { public function test_complex_feature() { // Menguji terlalu banyak hal dalam satu pengujian. $response = $this->post('/api/products', [ 'name' => 'Banana', 'price' => 5000, 'stock' => 30, ]); $response->assertStatus(201); $response = $this->post('/api/cart', [ 'product_id' => 1, 'quantity' => 2, ]); $response->assertStatus(200); $response = $this->post('/api/payment', [ 'amount' => 10000, 'payment_method' => 'credit_card', ]); $response->assertStatus(200); } } Untuk pengujian yang lebih baik, pisahkan pengujian menjadi beberapa bagian yang lebih kecil dan terfokus: class ProductTest extends TestCase { public function test_create_product() { $response = $this->post('/api/products', [ 'name' => 'Banana', 'price' => 5000, 'stock' => 30, ]); $response->assertStatus(201); } } class CartTest extends TestCase { public function test_add_to_cart() { $product = Product::create([ 'name' => 'Banana', 'price' => 5000, 'stock' => 30, ]); $response = $this->post('/api/cart', [ 'product_id' => $product->id, 'quantity' => 2, ]); $response->assertStatus(200); } } Penutup dan saran mentor Laravel terus berkembang dan menjadi salah satu framework PHP yang paling populer berkat update fitur-fitur menarik yang memudahkan developer dalam mengembangkan aplikasi web dengan cepat dan efisien. Dengan komunitas yang besar dan dokumentasi yang lengkap, Laravel memberikan dukungan yang kuat bagi para programmer di seluruh dunia. Untuk terus mengasah kemampuan Anda dalam menggunakan Laravel, pastikan untuk selalu memantau BuildWithAngga. Mereka sering mengupdate kelas-kelas gratis dengan studi kasus yang menarik dan dipandu oleh mentor berpengalaman. Selain itu, Anda juga akan mendapatkan akses seumur hidup untuk setiap kelas yang diikuti, sehingga Anda bisa belajar kapan saja tanpa batasan waktu. Terus belajar dan kembangkan keterampilan Anda bersama BuildWithAngga!

Kelas Tutorial Task Schedule Laravel 11 Pada Projek Website Sewa Kantor di BuildWithAngga

Tutorial Task Schedule Laravel 11 Pada Projek Website Sewa Kantor

Dalam membangun sebuah website sewa kantor, tujuan utama kita adalah memberikan pengalaman terbaik bagi pengguna. Bayangkan, seorang pengunjung datang ke website kita untuk mencari kantor yang ideal. Jika informasi yang mereka butuhkan sulit diakses atau tampilan website kita tidak menarik, besar kemungkinan mereka akan meninggalkan website tanpa melakukan tindakan apa pun. Pengalaman pengguna yang baik bisa diibaratkan seperti pelayan ramah di sebuah restoran, yang tahu kapan harus memberikan menu, kapan mengisi ulang minuman, dan kapan menawarkan bantuan. Semuanya dilakukan dengan tepat waktu dan tanpa membuat pelanggan merasa terganggu. Untuk mencapai hal ini, kita perlu memastikan bahwa website berjalan dengan lancar, informasi selalu up-to-date, dan berbagai fitur otomatis bekerja sesuai jadwal. Di sinilah fitur task schedule pada Laravel 11 bisa sangat membantu. Fitur Task Schedule Laravel untuk Otomatisasi Website Laravel adalah framework PHP yang populer di kalangan developer karena banyaknya fitur canggih yang ditawarkan, salah satunya adalah task scheduling. Fitur ini memungkinkan kita untuk mengatur tugas-tugas tertentu agar berjalan secara otomatis pada waktu yang sudah ditentukan. Misalnya, mengirim email pengingat kepada calon penyewa yang belum menyelesaikan proses booking, membersihkan data lama dari database, atau melakukan backup data secara rutin. Analoginya, fitur task schedule ini seperti alarm pada smartphone kita. Bayangkan, kita punya alarm yang disetel untuk berbagai keperluan: bangun pagi, mengingatkan makan siang, dan meeting sore. Semua dilakukan secara otomatis sesuai waktu yang sudah ditentukan. Demikian juga, task schedule di Laravel bisa diatur untuk menjalankan tugas-tugas rutin tanpa kita harus melakukannya secara manual setiap saat. Fitur ini sangat berguna untuk website sewa kantor karena kita dapat: Mengirimkan notifikasi harian kepada penyewa mengenai tagihan yang akan jatuh tempo.Memperbarui status ketersediaan kantor secara otomatis setiap malam berdasarkan data terbaru.Mengirim laporan harian kepada admin mengenai jumlah penyewa baru, permintaan kunjungan, dan sebagainya. Dengan adanya task schedule, kita bisa fokus pada pengembangan fitur lain tanpa khawatir tentang tugas-tugas rutin yang harus dijalankan. Cara Menggunakan Task Schedule di Laravel Untuk menggunakan task scheduling di Laravel, pertama-tama kita harus mengkonfigurasi Laravel Cron Job di server. Setelah itu, kita bisa mendefinisikan tugas-tugas apa saja yang ingin dijalankan secara otomatis di file app/Console/Kernel.php. Berikut ini adalah contoh sederhana penggunaan task schedule: protected function schedule(Schedule $schedule) { // Mengirim email pengingat setiap hari pada pukul 08:00 pagi $schedule->call(function () { // Logika pengiriman email di sini })->dailyAt('08:00'); } Untuk lebih mendalami cara menggunakan fitur ini, kamu bisa membaca dokumentasi resmi Laravel tentang Task Scheduling. Dengan fitur ini, kita bisa memastikan bahwa tugas-tugas yang bersifat rutin dan berulang dapat dijalankan secara otomatis, sehingga pengguna mendapatkan pengalaman yang lebih baik dan pengelolaan website menjadi lebih efisien. Cara Membuat Projek Website Sewa Kantor dengan Laravel 11 Menggunakan Composer Untuk memulai proyek website sewa kantor dengan Laravel 11, langkah pertama yang perlu dilakukan adalah memastikan bahwa Composer sudah terinstall di sistem. Composer adalah alat yang digunakan untuk mengelola dependensi PHP dan merupakan cara termudah untuk menginstall Laravel. Langkah pertama, buka terminal atau command prompt, lalu jalankan perintah berikut untuk membuat proyek Laravel baru: composer create-project --prefer-dist laravel/laravel sewa-kantor Perintah di atas akan mengunduh Laravel 11 beserta semua dependensi yang diperlukan ke dalam folder sewa-kantor. Setelah proses instalasi selesai, masuk ke direktori proyek dengan perintah berikut: cd sewa-kantor Selanjutnya, buat database baru di MySQL atau PostgreSQL dan sesuaikan pengaturan koneksi database di file .env yang ada di root proyek Laravel. Misalnya, sesuaikan bagian ini: DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=sewa_kantor_db DB_USERNAME=root DB_PASSWORD=your_password Setelah itu, jalankan perintah migrasi untuk membuat tabel-tabel yang diperlukan oleh Laravel: php artisan migrate Perintah ini akan membuat tabel-tabel dasar seperti users, password_resets, dan failed_jobs di database sewa_kantor_db. Agar proyek bisa dijalankan secara lokal, gunakan perintah berikut untuk menjalankan server Laravel: php artisan serve Server Laravel sekarang berjalan di http://127.0.0.1:8000. Akses URL tersebut di browser untuk melihat tampilan awal proyek Laravel yang baru saja dibuat. Dengan langkah-langkah di atas, proyek website sewa kantor berbasis Laravel 11 sudah siap digunakan sebagai basis pengembangan fitur-fitur lebih lanjut, seperti task scheduling untuk pengelolaan otomatis berbagai tugas rutin. Cara Membuat File Model dan Migration untuk Tabel-Tabel yang Dibutuhkan Untuk membangun fitur-fitur unggulan pada website sewa kantor dengan Laravel, kita memerlukan beberapa tabel penting seperti offices untuk data kantor, bookings untuk data penyewaan, users untuk data penyewa, payments untuk catatan pembayaran, dan activities untuk mencatat aktivitas pengguna. Berikut adalah langkah-langkah membuat model dan migration untuk tabel-tabel tersebut. Pertama, pastikan berada di dalam direktori proyek Laravel yang telah dibuat sebelumnya. Kemudian, gunakan perintah Artisan untuk membuat model dan migration. php artisan make:model Office -m php artisan make:model Booking -m php artisan make:model User -m php artisan make:model Payment -m php artisan make:model Activity -m Perintah di atas akan membuat file model dan migration untuk masing-masing entitas yang diperlukan. Selanjutnya, kita akan mengedit file migration yang terletak di direktori database/migrations. Tabel Offices Untuk tabel offices, tambahkan kolom-kolom yang diperlukan seperti name, location, price, dan availability. Berikut contoh kodingnya: public function up() { Schema::create('offices', function (Blueprint $table) { $table->id(); $table->string('name'); $table->string('location'); $table->decimal('price', 10, 2); $table->boolean('availability')->default(true); $table->timestamps(); }); } Tabel Bookings Untuk tabel bookings, tambahkan kolom yang menyimpan informasi tentang penyewa, kantor yang disewa, tanggal mulai, dan tanggal selesai penyewaan. public function up() { Schema::create('bookings', function (Blueprint $table) { $table->id(); $table->foreignId('user_id')->constrained('users'); $table->foreignId('office_id')->constrained('offices'); $table->date('start_date'); $table->date('end_date'); $table->timestamps(); }); } Tabel Users Untuk tabel users, Laravel sudah menyediakan migration default. Pastikan tabel ini memiliki kolom-kolom yang diperlukan seperti name, email, dan password. Jika ingin menambahkan kolom lain, edit migration default yang sudah ada. public function up() { Schema::create('users', function (Blueprint $table) { $table->id(); $table->string('name'); $table->string('email')->unique(); $table->timestamp('email_verified_at')->nullable(); $table->string('password'); $table->rememberToken(); $table->timestamps(); }); } Tabel Payments Untuk tabel payments, tambahkan kolom untuk menyimpan informasi pembayaran seperti booking_id, amount, status, dan payment_date. public function up() { Schema::create('payments', function (Blueprint $table) { $table->id(); $table->foreignId('booking_id')->constrained('bookings'); $table->decimal('amount', 10, 2); $table->string('status'); $table->date('payment_date'); $table->timestamps(); }); } Tabel Activities Tabel activities digunakan untuk mencatat semua aktivitas pengguna di website seperti login, booking, dan pembayaran. public function up() { Schema::create('activities', function (Blueprint $table) { $table->id(); $table->foreignId('user_id')->constrained('users'); $table->string('description'); $table->timestamps(); }); } Setelah semua file migration sudah diisi dengan skema tabel yang sesuai, jalankan perintah berikut untuk membuat tabel-tabel tersebut di database: php artisan migrate Dengan demikian, semua tabel yang dibutuhkan untuk fitur-fitur unggulan pada website sewa kantor sudah tersedia di database dan siap digunakan untuk proses pengembangan lebih lanjut. Cara Menerapkan 5 Fitur Utama dengan Task Scheduling Laravel 11 Task scheduling di Laravel 11 memungkinkan kita untuk mengotomatisasi berbagai tugas rutin yang diperlukan untuk menjalankan fitur-fitur utama pada website sewa kantor. Berikut adalah cara menerapkan masing-masing fitur dengan menggunakan task scheduling beserta contoh kodingnya. Pengingat Pembayaran Otomatis Untuk mengingatkan pengguna tentang pembayaran yang akan datang, kita dapat membuat task schedule yang akan mengirimkan email pengingat beberapa hari sebelum tanggal jatuh tempo. Buatlah sebuah command baru untuk mengirim email pengingat: php artisan make:command SendPaymentReminder Kemudian, tambahkan logika pengiriman email di dalam file SendPaymentReminder.php: public function handle() { $bookings = Booking::where('end_date', '>=', now()->subDays(3)) ->where('end_date', '<', now()) ->whereDoesntHave('payments') ->get(); foreach ($bookings as $booking) { Mail::to($booking->user->email)->send(new PaymentReminderMail($booking)); } } Jadwalkan command ini di app/Console/Kernel.php: protected function schedule(Schedule $schedule) { $schedule->command('send:payment-reminder')->daily(); } Pembaruan Ketersediaan Kantor Untuk memperbarui status ketersediaan kantor secara otomatis, buatlah command baru: php artisan make:command UpdateOfficeAvailability Di dalam UpdateOfficeAvailability.php, tambahkan logika untuk memperbarui ketersediaan kantor: public function handle() { $offices = Office::all(); foreach ($offices as $office) { $office->availability = $office->bookings()->where('end_date', '>', now())->count() === 0; $office->save(); } } Jadwalkan command ini agar berjalan setiap malam: protected function schedule(Schedule $schedule) { $schedule->command('update:office-availability')->dailyAt('23:00'); } Laporan Aktivitas Harian Untuk mengirim laporan aktivitas harian kepada admin, buat command baru: php artisan make:command SendDailyActivityReport Tambahkan logika untuk mengirim laporan harian melalui email: public function handle() { $activities = Activity::whereDate('created_at', now()->format('Y-m-d'))->get(); Mail::to('[email protected]')->send(new DailyActivityReportMail($activities)); } Jadwalkan command ini agar berjalan setiap pagi: protected function schedule(Schedule $schedule) { $schedule->command('send:daily-activity-report')->dailyAt('08:00'); } Pengarsipan Data Lama Untuk mengarsipkan data lama, buat command baru: php artisan make:command ArchiveOldBookings Tambahkan logika untuk mengarsipkan data booking lama: public function handle() { $oldBookings = Booking::where('end_date', '<', now()->subYear())->get(); foreach ($oldBookings as $booking) { // Logika pengarsipan, misalnya memindahkan data ke tabel arsip ArchivedBooking::create($booking->toArray()); $booking->delete(); } } Jadwalkan command ini agar berjalan setiap bulan: protected function schedule(Schedule $schedule) { $schedule->command('archive:old-bookings')->monthly(); } Backup Data Rutin Untuk membuat backup data rutin, buat command baru: php artisan make:command BackupDatabase Tambahkan logika untuk melakukan backup database: public function handle() { $filename = "backup-" . now()->format('Y-m-d-H-i-s') . ".sql"; $command = "mysqldump -u root -p'password' sewa_kantor_db > " . storage_path("backups/" . $filename); exec($command); } Jadwalkan command ini agar berjalan setiap malam: protected function schedule(Schedule $schedule) { $schedule->command('backup:database')->dailyAt('02:00'); } Dengan menerapkan task scheduling seperti contoh di atas, kita dapat memastikan bahwa fitur-fitur penting pada website sewa kantor berjalan secara otomatis dan teratur. Ini membantu menjaga pengalaman pengguna yang baik dan mengurangi beban pekerjaan manual. Penutup Laravel akan terus menjadi pilihan utama bagi developer karena selalu menghadirkan update menarik yang memudahkan proses pengembangan web. Fitur-fitur canggih seperti task scheduling tidak hanya meningkatkan efisiensi kerja tetapi juga membuka peluang inovasi dalam proyek yang kita kerjakan. Untuk terus meningkatkan kemampuan dan mengikuti perkembangan terbaru, pantau terus website Buildwithangga. Mereka sering mengupdate kelas gratis dengan studi kasus menarik bersama mentor berpengalaman, serta menawarkan akses kelas seumur hidup. Dengan belajar secara kontinu, kita dapat menjadi developer yang lebih kompeten dan siap menghadapi tantangan di dunia teknologi.

Kelas Tutorial Laravel 11, Filament, Spatie, Midtrans Bikin Website Toko Online Sederhana di BuildWithAngga

Tutorial Laravel 11, Filament, Spatie, Midtrans Bikin Website Toko Online Sederhana

Membangun sebuah website e-commerce bukan hanya tentang bagaimana menampilkan produk dan transaksi pembelian di sisi pengguna (frontend). Sebuah website e-commerce yang baik juga harus memiliki halaman admin yang terstruktur dan efisien untuk memudahkan pengelolaan produk, pesanan, pelanggan, dan laporan penjualan. Dalam artikel ini, kita akan membahas bagaimana cara membuat halaman admin beserta Content Management System (CMS) menggunakan Laravel dan Filament. Pentingnya Halaman Admin yang Terstruktur Bayangkan Anda memiliki sebuah toko fisik dengan berbagai produk yang dijual. Tanpa sistem manajemen yang baik, Anda akan kesulitan melacak stok barang, pesanan yang masuk, atau bahkan detail pelanggan. Hal ini sama pentingnya dengan toko online. Halaman admin yang terstruktur ibarat sebuah kantor pusat yang mengelola segala aktivitas di toko tersebut. Melalui halaman ini, kita bisa melakukan hal-hal seperti: Mengelola Produk: Menambahkan, mengubah, atau menghapus produk dengan mudah.Mengelola Pesanan: Melihat detail pesanan yang masuk, status pengiriman, hingga riwayat transaksi.Mengelola Pelanggan: Melihat data pelanggan, riwayat pembelian, dan preferensi mereka.Laporan Penjualan: Melihat data penjualan harian, mingguan, hingga bulanan untuk analisis lebih lanjut. Dengan halaman admin yang baik, seluruh proses pengelolaan ini bisa dilakukan dengan lebih efisien dan terstruktur. Itulah mengapa penting untuk membangun sistem admin yang user-friendly dan dapat diandalkan. Laravel dan Filament: Kombinasi yang Tepat untuk Membangun CMS Laravel adalah framework PHP yang sangat populer di kalangan developer web. Framework ini menyediakan berbagai fitur yang membuat pengembangan website menjadi lebih mudah dan aman. Beberapa fitur penting dari Laravel yang relevan untuk membangun sistem admin adalah: Eloquent ORM: Membuat interaksi dengan database menjadi lebih sederhana dan mudah dipahami. Anda bisa menggunakan Eloquent untuk membuat, membaca, mengubah, dan menghapus data di database dengan sintaks yang mudah dipahami.Middleware: Digunakan untuk memfilter dan memeriksa permintaan HTTP sebelum mencapai aplikasi. Ini sangat berguna untuk mengamankan halaman admin dengan memeriksa apakah pengguna sudah login dan memiliki akses yang tepat.Policy: Memberikan kontrol akses yang lebih rinci untuk setiap tindakan yang dilakukan di aplikasi. Misalnya, hanya pengguna dengan peran 'Admin' yang bisa menambahkan produk baru. Sementara itu, Filament adalah library yang mempermudah pembuatan dashboard dan halaman admin di Laravel. Filament dilengkapi dengan resource builder yang intuitif, sehingga Anda bisa membuat form, tabel, dan antarmuka admin lainnya dengan cepat tanpa perlu menulis kode dari nol. Berikut beberapa keunggulan Filament: Resource Builder: Dengan fitur ini, Anda bisa membuat halaman admin untuk mengelola data seperti produk, pesanan, atau pelanggan hanya dengan beberapa konfigurasi sederhana.Modular: Filament dirancang secara modular, artinya Anda bisa menambahkan fitur atau modul baru ke dalam dashboard admin Anda dengan mudah.User Interface (UI) yang Intuitif: Filament memberikan UI yang user-friendly dan modern, sehingga mudah digunakan bahkan untuk pengguna yang baru mengenal sistem admin. Mengapa Laravel dan Filament Cocok untuk E-Commerce? Keamanan: Laravel dilengkapi dengan fitur seperti CSRF protection, validasi input, dan manajemen sesi yang membantu menjaga keamanan aplikasi e-commerce Anda. Dengan Filament, Anda juga bisa menambahkan level akses yang lebih rinci pada halaman admin.Kecepatan Pengembangan: Kombinasi Laravel dan Filament memungkinkan pengembangan halaman admin menjadi lebih cepat. Anda tidak perlu membangun dashboard dari nol, cukup gunakan resource builder dari Filament.Kemudahan Maintenance: Dengan struktur MVC (Model-View-Controller) dari Laravel, Anda bisa memisahkan logika bisnis, tampilan, dan data dengan jelas. Filament membantu memisahkan logika tampilan di halaman admin, sehingga lebih mudah dimaintenance. Membuat Projek Laravel Terbaru Menggunakan Composer dan Mengatur Koneksi MySQL Untuk memulai projek Laravel terbaru, kita dapat menggunakan Composer untuk menginstall Laravel beserta dependensinya. Pada langkah-langkah berikut, kita akan belajar cara membuat projek Laravel terbaru menggunakan Composer dan mengatur koneksi MySQL pada file .env. 1. Membuat Projek Laravel dengan Composer Langkah pertama adalah membuat projek Laravel menggunakan perintah composer create-project. Pastikan Composer sudah terinstall di komputer Anda. Jika belum, silakan download dan install Composer dari situs resmi Composer. Buka terminal atau command prompt, lalu jalankan perintah berikut: composer create-project --prefer-dist laravel/laravel nama_projek Gantilah nama_projek dengan nama projek yang ingin Anda buat. Perintah ini akan mengunduh dan menginstall Laravel beserta dependensi yang diperlukan di folder nama_projek. 2. Mengatur Koneksi Database di File .env Setelah proses instalasi selesai, masuk ke folder projek yang baru dibuat: cd nama_projek Di dalam folder projek tersebut, terdapat file .env yang berfungsi untuk menyimpan konfigurasi environment, termasuk pengaturan koneksi database. Berikut adalah cara mengatur koneksi MySQL di file .env: DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=nama_database DB_USERNAME=root DB_PASSWORD=kata_sandi DB_CONNECTION: Menentukan jenis database yang digunakan. Dalam contoh ini, kita menggunakan mysql.DB_HOST: Alamat host database. Jika MySQL terinstall secara lokal, gunakan 127.0.0.1.DB_PORT: Port yang digunakan untuk koneksi ke MySQL. Secara default, MySQL menggunakan port 3306.DB_DATABASE: Nama database yang akan digunakan untuk projek Laravel ini. Pastikan database ini sudah dibuat di MySQL.DB_USERNAME: Username yang digunakan untuk mengakses database MySQL.DB_PASSWORD: Password yang digunakan untuk mengakses database MySQL. Contoh pengaturan .env untuk koneksi ke database MySQL lokal: DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=laravel_ecommerce DB_USERNAME=root DB_PASSWORD=password123 Pastikan untuk mengganti DB_DATABASE, DB_USERNAME, dan DB_PASSWORD sesuai dengan pengaturan di MySQL Anda. 3. Menguji Koneksi Database Setelah melakukan pengaturan di file .env, langkah selanjutnya adalah menguji koneksi ke database dengan menjalankan migrasi default dari Laravel. Jalankan perintah berikut di terminal: php artisan migrate Jika tidak ada error, berarti koneksi ke database berhasil dan tabel-tabel default Laravel berhasil dibuat. Jika terdapat error, periksa kembali pengaturan di file .env dan pastikan database MySQL Anda sudah berjalan. 4. Contoh Kode Lengkap Berikut adalah contoh file .env lengkap setelah pengaturan koneksi database: APP_NAME=Laravel APP_ENV=local APP_KEY=base64:....... APP_DEBUG=true APP_URL=http://localhost LOG_CHANNEL=stack LOG_LEVEL=debug DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=laravel_ecommerce DB_USERNAME=root DB_PASSWORD=password123 BROADCAST_DRIVER=log CACHE_DRIVER=file QUEUE_CONNECTION=sync SESSION_DRIVER=file SESSION_LIFETIME=120 REDIS_HOST=127.0.0.1 REDIS_PASSWORD=null REDIS_PORT=6379 MAIL_MAILER=smtp MAIL_HOST=mailhog MAIL_PORT=1025 MAIL_USERNAME=null MAIL_PASSWORD=null MAIL_ENCRYPTION=null MAIL_FROM_ADDRESS="[email protected]" MAIL_FROM_NAME="${APP_NAME}" AWS_ACCESS_KEY_ID= AWS_SECRET_ACCESS_KEY= AWS_DEFAULT_REGION=us-east-1 AWS_BUCKET= PUSHER_APP_ID= PUSHER_APP_KEY= PUSHER_APP_SECRET= PUSHER_APP_CLUSTER=mt1 MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}" MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}" Dalam contoh ini, konfigurasi yang perlu diperhatikan adalah bagian DB_CONNECTION, DB_HOST, DB_PORT, DB_DATABASE, DB_USERNAME, dan DB_PASSWORD. Pastikan nilai-nilai ini sesuai dengan pengaturan MySQL Anda. Membuat File Migration dan Model untuk Tabel E-Commerce di Laravel Dalam sebuah proyek e-commerce, kita memerlukan beberapa tabel seperti products, categories, customers, dan orders. Setiap tabel ini akan saling berhubungan melalui relasi Eloquent seperti hasMany, belongsTo, dan belongsToMany. Langkah-langkah berikut akan menjelaskan cara membuat file migration dan model untuk setiap tabel, menambahkan properti fillable, serta mengatur hubungan antar tabel menggunakan Artisan command dan metode Eloquent. Membuat Migration untuk Tabel E-Commerce Untuk membuat file migration, gunakan perintah Artisan make:migration yang akan membuat file migration baru di dalam folder database/migrations. Tabel Categories Mulai dengan membuat tabel categories untuk menyimpan informasi kategori produk: php artisan make:migration create_categories_table --create=categories Isi file migration create_categories_table: Schema::create('categories', function (Blueprint $table) { $table->id(); $table->string('name')->unique(); // Nama kategori unik $table->timestamps(); }); Tabel Products Lanjutkan dengan membuat tabel products untuk menyimpan data produk: php artisan make:migration create_products_table --create=products Isi file migration create_products_table: Schema::create('products', function (Blueprint $table) { $table->id(); $table->string('name'); // Nama produk $table->text('description')->nullable(); // Deskripsi produk, bisa null $table->decimal('price', 8, 2); // Harga produk $table->integer('stock'); // Stok produk $table->foreignId('category_id')->constrained()->onDelete('cascade'); // Relasi ke tabel categories $table->timestamps(); }); Tabel Customers Selanjutnya, buat tabel customers untuk menyimpan data pelanggan: php artisan make:migration create_customers_table --create=customers Isi file migration create_customers_table: Schema::create('customers', function (Blueprint $table) { $table->id(); $table->string('name'); // Nama pelanggan $table->string('email')->unique(); // Email pelanggan unik $table->string('phone'); // Nomor telepon pelanggan $table->text('address'); // Alamat pelanggan $table->timestamps(); }); Tabel Orders Terakhir, buat tabel orders untuk menyimpan data pesanan: php artisan make:migration create_orders_table --create=orders Isi file migration create_orders_table: Schema::create('orders', function (Blueprint $table) { $table->id(); $table->foreignId('customer_id')->constrained()->onDelete('cascade'); // Relasi ke tabel customers $table->decimal('total_price', 10, 2); // Total harga pesanan $table->string('status')->default('pending'); // Status pesanan, default 'pending' $table->timestamps(); }); Jalankan semua migration yang telah dibuat dengan perintah: php artisan migrate Membuat Model dan Menambahkan Properti Fillable Setelah membuat migration, kita perlu membuat model untuk setiap tabel. Tambahkan properti fillable pada setiap model untuk mengatur atribut apa saja yang bisa diisi secara massal. Model Category Buat model untuk tabel categories: php artisan make:model Category Isi file model Category.php: namespace App\\\\Models; use Illuminate\\\\Database\\\\Eloquent\\\\Factories\\\\HasFactory; use Illuminate\\\\Database\\\\Eloquent\\\\Model; class Category extends Model { use HasFactory; protected $fillable = [ 'name', // Atribut yang bisa diisi secara massal ]; public function products() { return $this->hasMany(Product::class); // Satu kategori memiliki banyak produk } } Model Product Buat model untuk tabel products: php artisan make:model Product Isi file model Product.php: namespace App\\\\Models; use Illuminate\\\\Database\\\\Eloquent\\\\Factories\\\\HasFactory; use Illuminate\\\\Database\\\\Eloquent\\\\Model; class Product extends Model { use HasFactory; protected $fillable = [ 'name', 'description', 'price', 'stock', 'category_id' ]; public function category() { return $this->belongsTo(Category::class); // Produk ini milik satu kategori } public function orders() { return $this->belongsToMany(Order::class, 'order_product')->withPivot('quantity'); // Produk bisa ada di banyak pesanan } } Model Customer Buat model untuk tabel customers: php artisan make:model Customer Isi file model Customer.php: namespace App\\\\Models; use Illuminate\\\\Database\\\\Eloquent\\\\Factories\\\\HasFactory; use Illuminate\\\\Database\\\\Eloquent\\\\Model; class Customer extends Model { use HasFactory; protected $fillable = [ 'name', 'email', 'phone', 'address' ]; public function orders() { return $this->hasMany(Order::class); // Pelanggan bisa memiliki banyak pesanan } } Model Order Buat model untuk tabel orders: php artisan make:model Order Isi file model Order.php: namespace App\\\\Models; use Illuminate\\\\Database\\\\Eloquent\\\\Factories\\\\HasFactory; use Illuminate\\\\Database\\\\Eloquent\\\\Model; class Order extends Model { use HasFactory; protected $fillable = [ 'customer_id', 'total_price', 'status' ]; public function customer() { return $this->belongsTo(Customer::class); // Pesanan ini milik satu pelanggan } public function products() { return $this->belongsToMany(Product::class, 'order_product')->withPivot('quantity'); // Pesanan bisa memiliki banyak produk } } Mengatur Relasi Antar Tabel Berikut adalah penjelasan tentang bagaimana mengatur relasi antar tabel menggunakan Eloquent: Category memiliki relasi hasMany ke Product, artinya satu kategori dapat memiliki banyak produk.Product memiliki relasi belongsTo ke Category, artinya setiap produk hanya dimiliki oleh satu kategori.Customer memiliki relasi hasMany ke Order, artinya satu pelanggan dapat membuat banyak pesanan.Order memiliki relasi belongsTo ke Customer, artinya setiap pesanan hanya dimiliki oleh satu pelanggan.Product dan Order memiliki relasi belongsToMany melalui tabel pivot order_product, artinya satu produk bisa ada di banyak pesanan, dan satu pesanan bisa memiliki banyak produk. Cara Menginstall Package Filament dan Membuat Akun Admin Filament adalah paket Laravel yang memudahkan pembuatan dashboard dan Content Management System (CMS) dengan antarmuka yang modern dan fitur-fitur yang lengkap. Berikut adalah langkah-langkah untuk menginstall Filament, membuat akun admin, serta mengonfigurasi user sebagai admin. Menginstall Package Filament Mulailah dengan menginstall package Filament menggunakan Composer. Buka terminal atau command prompt di direktori proyek Laravel Anda, kemudian jalankan perintah berikut: composer require filament/filament Perintah ini akan mengunduh dan menginstal package Filament beserta semua dependensi yang diperlukan ke dalam proyek Laravel Anda. Menjalankan Migrasi Setelah menginstall Filament, Anda perlu menjalankan migrasi untuk membuat tabel yang diperlukan oleh Filament. Tabel ini digunakan untuk menyimpan data user dan manajemen dashboard. php artisan migrate Perintah ini akan membuat tabel-tabel yang dibutuhkan Filament, seperti users, password_resets, dan lainnya di dalam database. Membuat Akun Admin dengan Filament Filament menyediakan perintah khusus untuk membuat akun admin secara cepat. Gunakan perintah berikut untuk membuat user baru yang akan digunakan sebagai admin: php artisan make:filament-user Perintah ini akan meminta Anda untuk memasukkan informasi berikut: Nama user (misalnya Admin User)Alamat email (misalnya [email protected])Kata sandiOpsi untuk menetapkan user sebagai super admin (ketik yes untuk memberikan akses penuh kepada user ini) Berikut contoh tampilan interaktif di terminal: Name: Admin User Email: [email protected] Password: Super Admin: yes Jika Anda memilih yes untuk super admin, user ini akan memiliki semua izin yang tersedia di dashboard Filament. Konfigurasi Akun Admin Setelah membuat akun admin, Anda perlu mengatur middleware agar user ini dapat mengakses dashboard Filament. Secara default, Filament menggunakan middleware filament untuk memverifikasi apakah user memiliki izin untuk mengakses dashboard. Pastikan middleware ini sudah dikonfigurasi dengan benar. Berikut adalah langkah-langkah yang perlu dilakukan untuk mengonfigurasi user sebagai admin: Buka file config/filament.php di proyek Laravel Anda.Temukan bagian auth.guard dan pastikan guard yang digunakan adalah web: 'auth' => [ 'guard' => 'web', ],Temukan bagian auth.providers.users.model dan pastikan model yang digunakan adalah App\\\\Models\\\\User atau model user yang Anda gunakan: 'auth' => [ 'providers' => [ 'users' => [ 'model' => App\\\\Models\\\\User::class, ], ], ], Pastikan juga bahwa user yang Anda buat memiliki akses ke dashboard Filament. Jika Anda menggunakan Role dan Permission, pastikan bahwa user tersebut memiliki role admin atau izin yang sesuai untuk mengakses halaman dashboard. Mengakses Dashboard Filament Setelah melakukan konfigurasi, Anda dapat mengakses dashboard Filament melalui URL berikut: <http://localhost/admin> Masukkan email dan password yang telah Anda buat menggunakan perintah make:filament-user. Jika login berhasil, Anda akan masuk ke dashboard Filament yang berisi antarmuka untuk mengelola data. Membuat Resource untuk CRUD di Filament Untuk mengelola data dari tabel-tabel yang telah dibuat seperti products, categories, customers, dan orders, kita bisa menggunakan fitur resource dari Filament. Filament memudahkan pembuatan halaman CRUD (Create, Read, Update, Delete) melalui dashboard admin dengan menggunakan command php artisan make:filament-resource. Berikut ini adalah langkah-langkah lengkap untuk membuat resource pada setiap tabel beserta contoh kode konfigurasi fields, forms, dan tables. Membuat Resource untuk Setiap Tabel Setiap resource akan merepresentasikan satu tabel di dalam aplikasi e-commerce kita. Gunakan perintah php artisan make:filament-resource untuk membuat resource ini. Membuat Resource untuk Tabel Categories php artisan make:filament-resource Category Resource ini akan menghasilkan beberapa file utama, termasuk file CategoryResource.php yang mengatur bagaimana resource ini ditampilkan di dashboard admin. Isi file app/Filament/Resources/CategoryResource.php: namespace App\\\\Filament\\\\Resources; use App\\\\Filament\\\\Resources\\\\CategoryResource\\\\Pages; use App\\\\Models\\\\Category; use Filament\\\\Forms; use Filament\\\\Resources\\\\Form; use Filament\\\\Resources\\\\Resource; use Filament\\\\Resources\\\\Table; use Filament\\\\Tables; class CategoryResource extends Resource { protected static ?string $model = Category::class; protected static ?string $navigationIcon = 'heroicon-o-tag'; // Ikon untuk menu navigasi public static function form(Form $form): Form { return $form ->schema([ Forms\\\\Components\\\\TextInput::make('name') ->required() ->maxLength(255), ]); } public static function table(Table $table): Table { return $table ->columns([ Tables\\\\Columns\\\\TextColumn::make('id')->sortable(), Tables\\\\Columns\\\\TextColumn::make('name')->sortable()->searchable(), 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'), ]; } } Membuat Resource untuk Tabel Products php artisan make:filament-resource Product Isi file app/Filament/Resources/ProductResource.php: namespace App\\\\Filament\\\\Resources; use App\\\\Filament\\\\Resources\\\\ProductResource\\\\Pages; use App\\\\Models\\\\Product; use Filament\\\\Forms; use Filament\\\\Resources\\\\Form; use Filament\\\\Resources\\\\Resource; use Filament\\\\Resources\\\\Table; use Filament\\\\Tables; class ProductResource extends Resource { protected static ?string $model = Product::class; protected static ?string $navigationIcon = 'heroicon-o-shopping-bag'; // Ikon untuk menu navigasi public static function form(Form $form): Form { return $form ->schema([ Forms\\\\Components\\\\TextInput::make('name') ->required() ->maxLength(255), Forms\\\\Components\\\\Textarea::make('description') ->maxLength(65535), Forms\\\\Components\\\\TextInput::make('price') ->numeric() ->required(), Forms\\\\Components\\\\TextInput::make('stock') ->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('id')->sortable(), Tables\\\\Columns\\\\TextColumn::make('name')->sortable()->searchable(), Tables\\\\Columns\\\\TextColumn::make('price')->sortable(), Tables\\\\Columns\\\\TextColumn::make('stock')->sortable(), Tables\\\\Columns\\\\TextColumn::make('category.name')->label('Category'), Tables\\\\Columns\\\\TextColumn::make('created_at')->dateTime(), ]) ->filters([ // ]); } public static function getPages(): array { return [ 'index' => Pages\\\\ListProducts::route('/'), 'create' => Pages\\\\CreateProduct::route('/create'), 'edit' => Pages\\\\EditProduct::route('/{record}/edit'), ]; } } Membuat Resource untuk Tabel Customers php artisan make:filament-resource Customer Isi file app/Filament/Resources/CustomerResource.php: namespace App\\\\Filament\\\\Resources; use App\\\\Filament\\\\Resources\\\\CustomerResource\\\\Pages; use App\\\\Models\\\\Customer; use Filament\\\\Forms; use Filament\\\\Resources\\\\Form; use Filament\\\\Resources\\\\Resource; use Filament\\\\Resources\\\\Table; use Filament\\\\Tables; class CustomerResource extends Resource { protected static ?string $model = Customer::class; protected static ?string $navigationIcon = 'heroicon-o-user-group'; // Ikon untuk menu navigasi public static function form(Form $form): Form { return $form ->schema([ Forms\\\\Components\\\\TextInput::make('name') ->required() ->maxLength(255), Forms\\\\Components\\\\TextInput::make('email') ->email() ->required() ->maxLength(255), Forms\\\\Components\\\\TextInput::make('phone') ->tel() ->maxLength(20) ->required(), Forms\\\\Components\\\\Textarea::make('address') ->maxLength(65535) ->required(), ]); } public static function table(Table $table): Table { return $table ->columns([ Tables\\\\Columns\\\\TextColumn::make('id')->sortable(), Tables\\\\Columns\\\\TextColumn::make('name')->sortable()->searchable(), Tables\\\\Columns\\\\TextColumn::make('email')->sortable()->searchable(), Tables\\\\Columns\\\\TextColumn::make('phone')->sortable(), Tables\\\\Columns\\\\TextColumn::make('created_at')->dateTime(), ]) ->filters([ // ]); } public static function getPages(): array { return [ 'index' => Pages\\\\ListCustomers::route('/'), 'create' => Pages\\\\CreateCustomer::route('/create'), 'edit' => Pages\\\\EditCustomer::route('/{record}/edit'), ]; } } Membuat Resource untuk Tabel Orders php artisan make:filament-resource Order Isi file app/Filament/Resources/OrderResource.php: namespace App\\\\Filament\\\\Resources; use App\\\\Filament\\\\Resources\\\\OrderResource\\\\Pages; use App\\\\Models\\\\Order; use Filament\\\\Forms; use Filament\\\\Resources\\\\Form; use Filament\\\\Resources\\\\Resource; use Filament\\\\Resources\\\\Table; use Filament\\\\Tables; class OrderResource extends Resource { protected static ?string $model = Order::class; protected static ?string $navigationIcon = 'heroicon-o-shopping-cart'; // Ikon untuk menu navigasi public static function form(Form $form): Form { return $form ->schema([ Forms\\\\Components\\\\Select::make('customer_id') ->relationship('customer', 'name') ->required(), Forms\\\\Components\\\\TextInput::make('total_price') ->numeric() ->required(), Forms\\\\Components\\\\Select::make('status') ->options([ 'pending' => 'Pending', 'completed' => 'Completed', 'cancelled' => 'Cancelled', ]) ->required(), ]); } public static function table(Table $table): Table { return $table ->columns([ Tables\\\\Columns\\\\TextColumn::make('id')->sortable(), Tables\\\\Columns\\\\TextColumn::make('customer.name')->label('Customer')->sortable(), Tables\\\\Columns\\\\TextColumn::make('total_price')->sortable(), Tables\\\\Columns\\\\TextColumn::make('status')->sortable(), Tables\\\\Columns\\\\TextColumn::make('created_at')->dateTime(), ]) ->filters([ // ]); } public static function getPages(): array { return [ 'index' => Pages\\\\ListOrders::route('/'), 'create' => Pages\\\\CreateOrder::route('/create'), 'edit' => Pages\\\\EditOrder::route('/{record}/edit'), ]; } } Mengatur Fields, Forms, dan Tables untuk Setiap Resource Fields: Digunakan untuk mendefinisikan form input yang akan digunakan ketika menambahkan atau mengedit data. Contohnya adalah Forms\\\\Components\\\\TextInput::make('name') untuk field name. Forms: Berfungsi untuk mendefinisikan form schema yang ditampilkan pada halaman create dan edit. Contohnya: Forms\\\\Components\\\\TextInput::make('name') ->required() ->maxLength(255) Tables: Digunakan untuk mendefinisikan kolom yang akan ditampilkan pada tabel daftar data. Contohnya: Tables\\\\Columns\\\\TextColumn::make('name')->sortable()->searchable() Setiap resource memiliki form dan table yang dikonfigurasikan sesuai kebutuhan untuk mengel ola data dari tabel yang bersangkutan di halaman admin. Menambahkan Fitur Authentication Menggunakan Laravel Breeze atau Fortify Laravel Breeze dan Fortify adalah solusi bawaan Laravel untuk menambahkan fitur autentikasi seperti login, register, dan manajemen pengguna. Keduanya menawarkan cara yang efisien untuk mengamankan akses ke halaman admin. Berikut adalah langkah-langkah instalasi, konfigurasi, serta penambahan login dan register form untuk memastikan hanya pengguna yang memiliki izin yang dapat mengakses halaman admin. Menggunakan Laravel Breeze Instalasi Laravel Breeze Laravel Breeze menyediakan implementasi autentikasi yang sederhana dan cepat. Untuk menginstal Laravel Breeze, pertama-tama pastikan Anda berada di direktori proyek Laravel, lalu jalankan perintah berikut: composer require laravel/breeze --dev Setelah instalasi selesai, jalankan perintah untuk menginstall scaffolding Breeze: php artisan breeze:install Perintah ini akan menambahkan file-file yang diperlukan untuk fitur autentikasi seperti halaman login, register, dan dashboard pengguna. Jalankan Migrasi Setelah menginstall Breeze, jalankan migrasi untuk membuat tabel users dan password_resets: php artisan migrate Install Dependensi Frontend Laravel Breeze menggunakan Tailwind CSS untuk styling frontend. Jalankan perintah berikut untuk menginstall dependensi frontend dan membangun aplikasi: npm install && npm run dev Mengatur Middleware untuk Mengamankan Halaman Admin Untuk memastikan hanya pengguna yang sudah login yang dapat mengakses halaman admin, gunakan middleware auth pada route admin di file routes/web.php: Route::middleware(['auth'])->group(function () { Route::get('/admin', [AdminController::class, 'index'])->name('admin.index'); // Route lainnya yang perlu diamankan }); Dengan middleware auth, Laravel akan memverifikasi apakah pengguna sudah login sebelum mengizinkan akses ke halaman admin. Konfigurasi Redirect Setelah Login Untuk mengarahkan pengguna ke halaman admin setelah login, buka file App\\\\Providers\\\\RouteServiceProvider.php dan ubah properti HOME menjadi URL halaman admin: public const HOME = '/admin'; Menggunakan Laravel Fortify Laravel Fortify adalah backend authentication scaffolding yang lebih fleksibel. Ini memberikan kontrol penuh untuk mengatur logika autentikasi tanpa dependensi frontend. Instalasi Laravel Fortify Untuk menginstall Fortify, jalankan perintah berikut di terminal: composer require laravel/fortify Publikasikan file konfigurasi Fortify dengan perintah berikut: php artisan vendor:publish --provider="Laravel\\\\Fortify\\\\FortifyServiceProvider" Ini akan menghasilkan file konfigurasi di config/fortify.php. Aktifkan Fitur Autentikasi Di dalam file config/fortify.php, aktifkan fitur-fitur yang dibutuhkan seperti login dan register dengan menambahkan: 'features' => [ Features::registration(), Features::resetPasswords(), Features::emailVerification(), Features::updateProfileInformation(), Features::updatePasswords(), Features::twoFactorAuthentication(), ], Jalankan Migrasi Fortify menggunakan tabel users dan password_resets. Pastikan tabel-tabel ini sudah ada di database dengan menjalankan migrasi: php artisan migrate Mengatur View untuk Login dan Register Untuk menambahkan form login dan register, buat file login.blade.php dan register.blade.php di dalam folder resources/views/auth. Contoh form login sederhana: <form method="POST" action="{{ route('login') }}"> @csrf <div> <label for="email">Email</label> <input id="email" type="email" name="email" required autofocus> </div> <div> <label for="password">Password</label> <input id="password" type="password" name="password" required> </div> <button type="submit">Login</button> </form> Contoh form register sederhana: <form method="POST" action="{{ route('register') }}"> @csrf <div> <label for="name">Name</label> <input id="name" type="text" name="name" required autofocus> </div> <div> <label for="email">Email</label> <input id="email" type="email" name="email" required> </div> <div> <label for="password">Password</label> <input id="password" type="password" name="password" required> </div> <button type="submit">Register</button> </form> Menggunakan Middleware untuk Mengamankan Halaman Admin Tambahkan middleware auth pada route admin di file routes/web.php untuk memastikan hanya pengguna yang sudah login yang dapat mengakses halaman admin: Route::middleware(['auth'])->group(function () { Route::get('/admin', [AdminController::class, 'index'])->name('admin.index'); }); Konfigurasi Guard untuk Admin Untuk membatasi akses admin dengan lebih spesifik, Anda bisa menambahkan guard baru di file config/auth.php: 'guards' => [ 'admin' => [ 'driver' => 'session', 'provider' => 'users', ], ], Lalu, pastikan middleware auth:admin digunakan pada route admin: Route::middleware(['auth:admin'])->group(function () { Route::get('/admin', [AdminController::class, 'index'])->name('admin.index'); }); Mengatur Role dan Permission Menggunakan Spatie Laravel Permission Untuk mengelola akses pengguna dengan lebih terperinci di aplikasi Laravel, kita bisa menggunakan package Spatie Laravel Permission. Package ini memungkinkan kita untuk mengatur role dan permission agar hanya pengguna tertentu yang memiliki akses ke fitur atau halaman tertentu. Dalam panduan ini, akan dijelaskan cara mengatur role seperti admin, product_manager, sales_staff, dan customer, serta menetapkan izin (permission) untuk masing-masing role beserta contoh koding lengkap. Instalasi Spatie Laravel Permission Mulailah dengan menginstal package Spatie Laravel Permission melalui Composer: composer require spatie/laravel-permission Setelah terinstal, jalankan perintah untuk mempublikasikan konfigurasi dan migrasi: php artisan vendor:publish --provider="Spatie\\\\Permission\\\\PermissionServiceProvider" Perintah ini akan membuat file konfigurasi config/permission.php dan migrasi untuk tabel roles, permissions, dan model_has_roles. Jalankan migrasi untuk membuat tabel-tabel tersebut: php artisan migrate Menambahkan Trait HasRoles ke Model User Untuk menggunakan fitur role dan permission pada model User, tambahkan trait HasRoles dari package Spatie di model User: namespace App\\\\Models; use Illuminate\\\\Foundation\\\\Auth\\\\User as Authenticatable; use Spatie\\\\Permission\\\\Traits\\\\HasRoles; class User extends Authenticatable { use HasRoles; // properti dan metode lainnya } Trait HasRoles ini memungkinkan model User untuk menggunakan metode seperti assignRole, hasRole, givePermissionTo, dan lainnya. Membuat Role dan Permission Gunakan seeder untuk membuat role dan permission pertama kali. Buat file seeder dengan perintah: php artisan make:seeder RolePermissionSeeder Isi file seeder RolePermissionSeeder.php seperti berikut: namespace Database\\\\Seeders; use Illuminate\\\\Database\\\\Seeder; use Spatie\\\\Permission\\\\Models\\\\Permission; use Spatie\\\\Permission\\\\Models\\\\Role; class RolePermissionSeeder extends Seeder { public function run() { // Membuat permission Permission::create(['name' => 'manage products']); Permission::create(['name' => 'manage categories']); Permission::create(['name' => 'manage orders']); Permission::create(['name' => 'view orders']); Permission::create(['name' => 'manage users']); // Membuat role Admin dan memberikan semua permission $admin = Role::create(['name' => 'admin']); $admin->givePermissionTo(Permission::all()); // Membuat role Product Manager dan memberikan permission terkait produk dan kategori $productManager = Role::create(['name' => 'product_manager']); $productManager->givePermissionTo(['manage products', 'manage categories']); // Membuat role Sales Staff dan memberikan permission terkait pesanan $salesStaff = Role::create(['name' => 'sales_staff']); $salesStaff->givePermissionTo(['view orders', 'manage orders']); // Membuat role Customer tanpa permission Role::create(['name' => 'customer']); } } Jalankan seeder untuk memasukkan data role dan permission ke database: php artisan db:seed --class=RolePermissionSeeder Seeder ini akan membuat role dan permission yang dibutuhkan serta menghubungkannya. Mengatur Role pada User Setelah role dan permission dibuat, Anda dapat memberikan role kepada pengguna. Misalnya, untuk membuat pengguna dengan role admin, gunakan contoh kode berikut di seeder atau di controller: use App\\\\Models\\\\User; use Spatie\\\\Permission\\\\Models\\\\Role; // Misalkan ini adalah user yang sudah terdaftar $adminUser = User::find(1); $adminUser->assignRole('admin'); $productManagerUser = User::find(2); $productManagerUser->assignRole('product_manager'); $salesStaffUser = User::find(3); $salesStaffUser->assignRole('sales_staff'); Dengan menggunakan metode assignRole, pengguna akan diberikan role yang sesuai. Middleware untuk Mengamankan Route Berdasarkan Role Untuk mengamankan route dengan role dan permission, gunakan middleware role atau permission yang disediakan oleh package Spatie. Contoh untuk mengamankan route agar hanya admin yang bisa mengakses: Route::group(['middleware' => ['role:admin']], function () { Route::get('/admin', [AdminController::class, 'index'])->name('admin.index'); // Tambahkan route lain yang hanya bisa diakses oleh admin }); Untuk memberikan akses hanya kepada product_manager atau sales_staff, gunakan: Route::group(['middleware' => ['role:product_manager|sales_staff']], function () { Route::get('/orders', [OrderController::class, 'index'])->name('orders.index'); }); Dengan middleware ini, hanya pengguna dengan role product_manager atau sales_staff yang dapat mengakses halaman daftar pesanan. Middleware Permission untuk Mengakses Halaman Tertentu Jika ingin membatasi akses berdasarkan izin (permission), gunakan middleware permission: Route::group(['middleware' => ['permission:manage products']], function () { Route::get('/products', [ProductController::class, 'index'])->name('products.index'); Route::get('/products/create', [ProductController::class, 'create'])->name('products.create'); // Route lain yang membutuhkan izin 'manage products' }); Pengguna dengan izin manage products dapat mengakses halaman ini, tanpa memandang role-nya. Menampilkan Role dan Permission di Halaman Admin Untuk memberikan kontrol penuh kepada admin dalam mengelola role dan permission, Anda bisa membuat CRUD untuk role dan permission menggunakan resource Filament. Berikut adalah contoh untuk menampilkan role di halaman admin: namespace App\\\\Filament\\\\Resources; use Spatie\\\\Permission\\\\Models\\\\Role; use Filament\\\\Forms; use Filament\\\\Resources\\\\Form; use Filament\\\\Resources\\\\Resource; use Filament\\\\Resources\\\\Table; use Filament\\\\Tables; class RoleResource extends Resource { protected static ?string $model = Role::class; protected static ?string $navigationIcon = 'heroicon-o-shield-check'; public static function form(Form $form): Form { return $form ->schema([ Forms\\\\Components\\\\TextInput::make('name') ->required() ->maxLength(255), Forms\\\\Components\\\\Select::make('permissions') ->multiple() ->relationship('permissions', 'name') ->preload(), ]); } public static function table(Table $table): Table { return $table ->columns([ Tables\\\\Columns\\\\TextColumn::make('name')->sortable(), Tables\\\\Columns\\\\TextColumn::make('permissions.name')->label('Permissions')->wrap(), ]) ->filters([ // ]); } public static function getPages(): array { return [ 'index' => Pages\\\\ListRoles::route('/'), 'create' => Pages\\\\CreateRole::route('/create'), 'edit' => Pages\\\\EditRole::route('/{record}/edit'), ]; } } Dengan resource ini, admin dapat melihat, menambah, dan mengedit role serta mengatur permission untuk masing-masing role melalui dashboard. Integrasi Payment Gateway dengan Midtrans untuk Memproses Pembayaran Integrasi dengan payment gateway seperti Midtrans memungkinkan aplikasi Laravel Anda untuk memproses pembayaran secara langsung dari halaman checkout atau mengelola transaksi melalui halaman admin. Berikut adalah panduan lengkap untuk melakukan integrasi Midtrans, mulai dari instalasi hingga pengelolaan pembayaran melalui halaman admin. Instalasi SDK Midtrans Untuk memulai integrasi dengan Midtrans, pertama-tama pastikan package midtrans/midtrans-php sudah terpasang di proyek Laravel Anda. Anda bisa menginstalnya melalui Composer: composer require midtrans/midtrans-php Package ini akan membantu dalam berkomunikasi dengan API Midtrans untuk memproses pembayaran. Konfigurasi Midtrans Buat file konfigurasi midtrans.php di direktori config untuk menyimpan kredensial dan pengaturan API Midtrans: return [ 'merchant_id' => env('MIDTRANS_MERCHANT_ID'), 'client_key' => env('MIDTRANS_CLIENT_KEY'), 'server_key' => env('MIDTRANS_SERVER_KEY'), 'is_production' => env('MIDTRANS_PRODUCTION', false), 'is_sanitized' => env('MIDTRANS_SANITIZED', true), 'is_3ds' => env('MIDTRANS_3DS', true), ]; Tambahkan variabel konfigurasi berikut ke file .env Anda: MIDTRANS_MERCHANT_ID=your_merchant_id MIDTRANS_CLIENT_KEY=your_client_key MIDTRANS_SERVER_KEY=your_server_key MIDTRANS_PRODUCTION=false MIDTRANS_SANITIZED=true MIDTRANS_3DS=true Pengaturan ini memastikan bahwa aplikasi Anda dapat berkomunikasi dengan API Midtrans menggunakan kredensial yang benar. Membuat Fungsi untuk Memproses Pembayaran Buat sebuah controller baru untuk memproses pembayaran, misalnya PaymentController. Controller ini akan menangani permintaan pembayaran dari halaman checkout dan mengirimkan data ke Midtrans. namespace App\\\\Http\\\\Controllers; use Illuminate\\\\Http\\\\Request; use Midtrans\\\\Config; use Midtrans\\\\Snap; use App\\\\Models\\\\Order; class PaymentController extends Controller { public function processPayment(Request $request) { // Konfigurasi Midtrans Config::$serverKey = config('midtrans.server_key'); Config::$isProduction = config('midtrans.is_production'); Config::$isSanitized = config('midtrans.is_sanitized'); Config::$is3ds = config('midtrans.is_3ds'); // Mendapatkan data order dari database $order = Order::find($request->order_id); // Parameter yang dikirim ke Midtrans $params = [ 'transaction_details' => [ 'order_id' => $order->id, 'gross_amount' => $order->total_price, ], 'customer_details' => [ 'first_name' => $order->customer->name, 'email' => $order->customer->email, 'phone' => $order->customer->phone, ], 'item_details' => [ [ 'id' => 'product-' . $order->product_id, 'price' => $order->product->price, 'quantity' => $order->quantity, 'name' => $order->product->name, ], ], ]; try { // Mendapatkan Snap Token dari Midtrans $snapToken = Snap::getSnapToken($params); // Menampilkan halaman checkout dengan Snap Token return view('payment.checkout', ['snapToken' => $snapToken, 'order' => $order]); } catch (\\\\Exception $e) { return back()->with('error', 'Gagal memproses pembayaran: ' . $e->getMessage()); } } public function handleNotification(Request $request) { // Logika untuk menangani notifikasi dari Midtrans } } Pada fungsi processPayment, data order dikirim ke Midtrans untuk mendapatkan Snap Token yang akan digunakan untuk menampilkan halaman pembayaran. Simpan Snap Token ini dan gunakan pada halaman checkout. Membuat Halaman Checkout Buat file view resources/views/payment/checkout.blade.php untuk menampilkan halaman checkout dengan widget Snap Midtrans: @extends('layouts.app') @section('content') <h1>Checkout</h1> <p>Order ID: {{ $order->id }}</p> <p>Total Pembayaran: Rp {{ number_format($order->total_price, 0, ',', '.') }}</p> <button id="pay-button">Bayar Sekarang</button> <script type="text/javascript" src="<https://app.sandbox.midtrans.com/snap/snap.js>" data-client-key="{{ config('midtrans.client_key') }}"></script> <script type="text/javascript"> var payButton = document.getElementById('pay-button'); payButton.addEventListener('click', function () { window.snap.pay('{{ $snapToken }}', { onSuccess: function (result) { alert("Pembayaran berhasil!"); console.log(result); }, onPending: function (result) { alert("Menunggu pembayaran!"); console.log(result); }, onError: function (result) { alert("Pembayaran gagal!"); console.log(result); }, onClose: function () { alert('Anda menutup pop-up tanpa menyelesaikan pembayaran'); } }); }); </script> @endsection Widget Snap dari Midtrans akan membuka pop-up untuk memproses pembayaran ketika tombol "Bayar Sekarang" ditekan. Pop-up ini memungkinkan pengguna untuk menyelesaikan transaksi dengan berbagai metode pembayaran yang disediakan oleh Midtrans. Mengelola Pembayaran Melalui Halaman Admin Untuk mengelola pembayaran dari halaman admin, Anda dapat membuat resource baru menggunakan Filament untuk menampilkan data order dan status pembayaran. Misalnya, buat resource OrderResource untuk mengelola pesanan dan statusnya: namespace App\\\\Filament\\\\Resources; use App\\\\Models\\\\Order; use Filament\\\\Resources\\\\Resource; use Filament\\\\Resources\\\\Form; use Filament\\\\Resources\\\\Table; use Filament\\\\Forms; use Filament\\\\Tables; class OrderResource extends Resource { protected static ?string $model = Order::class; protected static ?string $navigationIcon = 'heroicon-o-clipboard-list'; public static function form(Form $form): Form { return $form ->schema([ Forms\\\\Components\\\\TextInput::make('id')->disabled(), Forms\\\\Components\\\\TextInput::make('customer_name')->disabled(), Forms\\\\Components\\\\TextInput::make('status'), Forms\\\\Components\\\\TextInput::make('total_price')->disabled(), Forms\\\\Components\\\\Textarea::make('note'), ]); } public static function table(Table $table): Table { return $table ->columns([ Tables\\\\Columns\\\\TextColumn::make('id')->sortable(), Tables\\\\Columns\\\\TextColumn::make('customer.name')->label('Customer'), Tables\\\\Columns\\\\TextColumn::make('status')->sortable(), Tables\\\\Columns\\\\TextColumn::make('total_price')->sortable(), Tables\\\\Columns\\\\TextColumn::make('created_at')->dateTime(), ]) ->filters([ // Tambahkan filter status pembayaran jika diperlukan ]); } public static function getPages(): array { return [ 'index' => Pages\\\\ListOrders::route('/'), 'edit' => Pages\\\\EditOrder::route('/{record}/edit'), ]; } } Dengan resource ini, Anda dapat melihat daftar pesanan, mengubah status pembayaran, dan memberikan catatan pada setiap pesanan melalui halaman admin. Menangani Notifikasi dari Midtrans Midtrans menyediakan fitur notifikasi untuk memberi tahu server Anda ketika status transaksi berubah (misalnya, pembayaran berhasil atau gagal). Tambahkan route di file routes/web.php untuk menangani notifikasi ini: Route::post('/payment/notification', [PaymentController::class, 'handleNotification']); Di dalam fungsi handleNotification pada PaymentController, Anda bisa menangani notifikasi ini dan memperbarui status pembayaran di database: public function handleNotification(Request $request) { $notification = $request->all(); // Logika untuk memperbarui status pesanan berdasarkan notifikasi $order = Order::find($notification['order_id']); if ($notification['transaction_status'] == 'settlement') { $order->status = 'paid'; } elseif ($notification['transaction_status'] == 'cancel' || $notification['transaction_status'] == 'deny' || $notification['transaction_status'] == 'expire') { $order->status = 'failed'; } $order->save(); return response()->json(['status' => 'success']); } Fungsi ini akan menerima notifikasi dari Midtrans dan memperbarui status pesanan di database sesuai dengan status pembayaran yang diterima. Menambahkan Fitur Notifikasi Email Otomatis di Laravel Fitur notifikasi email otomatis sangat penting untuk menginformasikan pengguna ketika ada pesanan baru, perubahan status pesanan, atau pengingat untuk menyelesaikan pembayaran. Laravel menyediakan fitur Mailable yang memungkinkan kita untuk mengirim email secara dinamis berdasarkan event tertentu. Berikut adalah panduan lengkap untuk membuat email template menggunakan Mailable dan mengatur pengiriman email berdasarkan event seperti perubahan status pesanan. Mengatur Konfigurasi Mail di Laravel Pastikan konfigurasi mail di Laravel sudah diatur dengan benar di file .env: MAIL_MAILER=smtp MAIL_HOST=smtp.example.com MAIL_PORT=587 [email protected] MAIL_PASSWORD=your_password MAIL_ENCRYPTION=tls [email protected] MAIL_FROM_NAME="${APP_NAME}" Jika Anda menggunakan layanan email seperti Gmail, pastikan MAIL_HOST disesuaikan menjadi smtp.gmail.com, dan MAIL_PORT diatur ke 587 atau 465 dengan MAIL_ENCRYPTION yang sesuai (tls atau ssl). Membuat Email Template dengan Mailable Laravel menyediakan fitur Mailable untuk membuat template email. Gunakan perintah berikut untuk membuat Mailable: php artisan make:mail OrderStatusChanged Ini akan membuat file OrderStatusChanged.php di direktori app/Mail. Buka file tersebut dan atur sesuai kebutuhan: namespace App\\\\Mail; use App\\\\Models\\\\Order; use Illuminate\\\\Bus\\\\Queueable; use Illuminate\\\\Mail\\\\Mailable; use Illuminate\\\\Queue\\\\SerializesModels; class OrderStatusChanged extends Mailable { use Queueable, SerializesModels; public $order; public function __construct(Order $order) { $this->order = $order; } public function build() { return $this->subject('Status Pesanan Anda Telah Berubah') ->view('emails.order-status') ->with([ 'order_id' => $this->order->id, 'status' => $this->order->status, 'customer_name' => $this->order->customer->name, ]); } } Di sini, kita mengirimkan objek Order ke dalam email template dan menggunakan metode build() untuk menentukan subject email dan view yang akan digunakan. Membuat View untuk Template Email Buat file view order-status.blade.php di direktori resources/views/emails: <!DOCTYPE html> <html> <head> <title>Status Pesanan Berubah</title> </head> <body> <h1>Halo, {{ $customer_name }}</h1> <p>Pesanan Anda dengan ID <strong>{{ $order_id }}</strong> sekarang berstatus: <strong>{{ $status }}</strong>.</p> <p>Terima kasih telah berbelanja di toko kami. Jika ada pertanyaan, jangan ragu untuk menghubungi kami.</p> <p>Salam,<br>{{ config('app.name') }}</p> </body> </html> Template ini akan digunakan untuk menampilkan email yang berisi informasi mengenai perubahan status pesanan. Mengirim Email Berdasarkan Event Untuk mengirim email berdasarkan event tertentu, misalnya ketika status pesanan berubah, kita bisa menggunakan Event dan Listener di Laravel. Buat event baru dengan perintah: php artisan make:event OrderStatusUpdated Buka file event OrderStatusUpdated.php yang baru dibuat dan tambahkan properti order: namespace App\\\\Events; use App\\\\Models\\\\Order; use Illuminate\\\\Foundation\\\\Events\\\\Dispatchable; use Illuminate\\\\Queue\\\\SerializesModels; class OrderStatusUpdated { use Dispatchable, SerializesModels; public $order; public function __construct(Order $order) { $this->order = $order; } } Buat listener untuk menangani event ini dengan perintah: php artisan make:listener SendOrderStatusChangedEmail Di dalam listener SendOrderStatusChangedEmail.php, kirim email menggunakan Mailable yang telah dibuat sebelumnya: namespace App\\\\Listeners; use App\\\\Events\\\\OrderStatusUpdated; use App\\\\Mail\\\\OrderStatusChanged; use Illuminate\\\\Contracts\\\\Queue\\\\ShouldQueue; use Illuminate\\\\Support\\\\Facades\\\\Mail; class SendOrderStatusChangedEmail implements ShouldQueue { public function handle(OrderStatusUpdated $event) { $order = $event->order; // Mengirim email menggunakan Mailable Mail::to($order->customer->email)->send(new OrderStatusChanged($order)); } } Di listener ini, kita menggunakan facade Mail untuk mengirim email ke customer berdasarkan event OrderStatusUpdated. Menghubungkan Event dan Listener Pastikan event dan listener yang telah dibuat dihubungkan dalam file EventServiceProvider.php di app/Providers: namespace App\\\\Providers; use App\\\\Events\\\\OrderStatusUpdated; use App\\\\Listeners\\\\SendOrderStatusChangedEmail; use Illuminate\\\\Foundation\\\\Support\\\\Providers\\\\EventServiceProvider as ServiceProvider; class EventServiceProvider extends ServiceProvider { protected $listen = [ OrderStatusUpdated::class => [ SendOrderStatusChangedEmail::class, ], ]; public function boot() { parent::boot(); } } Dengan konfigurasi ini, setiap kali event OrderStatusUpdated dipanggil, listener SendOrderStatusChangedEmail akan menangani pengiriman email. Memicu Event saat Status Pesanan Berubah Di dalam model Order atau di controller tempat Anda mengubah status pesanan, panggil event OrderStatusUpdated setiap kali status pesanan diperbarui: use App\\\\Events\\\\OrderStatusUpdated; $order->status = 'shipped'; $order->save(); // Memicu event setelah status pesanan diperbarui event(new OrderStatusUpdated($order)); Dengan memicu event ini, Laravel akan secara otomatis menjalankan listener yang terhubung dan mengirimkan email notifikasi kepada pengguna. Mengirim Pengingat untuk Menyelesaikan Pembayaran Untuk mengirim pengingat kepada pengguna yang belum menyelesaikan pembayaran, buatlah Mailable dan event serupa. Anda dapat menggunakan scheduler untuk memeriksa pesanan yang belum dibayar dan mengirimkan pengingat. Buat seeder atau command artisan untuk memeriksa pesanan yang belum dibayar: php artisan make:command SendPaymentReminder Di dalam command SendPaymentReminder.php, lakukan logika untuk memeriksa pesanan yang belum dibayar: namespace App\\\\Console\\\\Commands; use Illuminate\\\\Console\\\\Command; use App\\\\Models\\\\Order; use Illuminate\\\\Support\\\\Facades\\\\Mail; use App\\\\Mail\\\\PaymentReminder; class SendPaymentReminder extends Command { protected $signature = 'reminder:payment'; protected $description = 'Kirim pengingat pembayaran kepada pelanggan yang belum menyelesaikan pembayaran'; public function handle() { $orders = Order::where('status', 'pending')->get(); foreach ($orders as $order) { Mail::to($order->customer->email)->send(new PaymentReminder($order)); } $this->info('Pengingat pembayaran berhasil dikirim!'); } } Gunakan scheduler di file App\\\\Console\\\\Kernel.php untuk menjalankan perintah ini setiap hari atau sesuai kebutuhan: protected function schedule(Schedule $schedule) { $schedule->command('reminder:payment')->daily(); } Ini akan memastikan bahwa pengingat pembayaran dikirimkan secara otomatis kepada pelanggan yang belum menyelesaikan pembayaran setiap hari. Penutup dan saran dari mentor Laravel terus menjadi framework yang populer di kalangan developer berkat berbagai update menarik yang memudahkan pengembangan aplikasi web. Dengan fitur-fitur seperti autentikasi yang sederhana, integrasi payment gateway, hingga notifikasi otomatis, Laravel memudahkan developer untuk membangun aplikasi yang robust dan scalable. Kemudahan ini membuat Laravel tetap menjadi pilihan utama untuk banyak proyek pengembangan web. Untuk terus memperdalam pengetahuan Anda tentang Laravel dan teknologi lainnya, pantau terus website BuildWithAngga. Mereka sering memperbarui kelas gratis dengan studi kasus menarik yang dipandu oleh mentor berpengalaman. Selain itu, Anda juga bisa mendapatkan akses kelas seumur hidup, sehingga dapat belajar kapan saja sesuai kebutuhan. Jangan lewatkan kesempatan untuk mengembangkan skill Anda bersama BuildWithAngga dan jadilah developer yang handal!