Tutorial Dasar Fitur CRUD dengan Next JS dan MongoDB Projek Web Toko Baju

Saat ini, JavaScript merupakan bahasa pemrograman yang sangat populer di dunia website development. JavaScript bisa digunakan di frontend maupun backend, sehingga membuatnya sangat fleksibel dan efisien.

Dengan kemampuan ini, developer dapat membuat aplikasi web yang interaktif dan dinamis hanya dengan satu bahasa. Hal ini juga mempermudah proses development karena tidak perlu mempelajari bahasa pemrograman yang berbeda untuk frontend dan backend.

Salah satu framework JavaScript yang sedang naik daun adalah Next.js. Framework ini dirancang untuk memudahkan developer dalam membangun aplikasi web modern dengan fitur-fitur canggih yang tidak dimiliki framework lain.

Next.js adalah pilihan yang populer karena menyediakan pengalaman yang lebih baik dalam hal performa, SEO, dan fleksibilitas. Berikut ini adalah lima fitur hebat yang membuat Next.js begitu populer:

  1. Server-Side Rendering (SSR) dan Static Site Generation (SSG) Next.js mendukung Server-Side Rendering (SSR) dan Static Site Generation (SSG), yang memungkinkan halaman website dapat dirender di server atau dibuat statis pada waktu build. Ini sangat membantu untuk meningkatkan performa website dan juga memberikan dampak positif pada SEO.
  2. Routing Otomatis Dengan Next.js, Anda tidak perlu repot-repot membuat file routing secara manual. Setiap file yang Anda buat di dalam folder pages akan otomatis menjadi route. Ini sangat memudahkan developer dalam mengatur navigasi antar halaman.
  3. API Routes Next.js memungkinkan Anda membuat API endpoint langsung di dalam project Anda. Ini membuat Next.js tidak hanya bisa digunakan untuk frontend, tapi juga backend. Anda bisa membuat API sendiri tanpa memerlukan backend terpisah.
  4. Image Optimization Fitur ini memungkinkan optimisasi gambar secara otomatis. Next.js akan memuat gambar dengan ukuran yang tepat dan format yang optimal, yang berdampak pada waktu loading yang lebih cepat.
  5. Dukungan TypeScript Next.js mendukung penggunaan TypeScript secara penuh. TypeScript membantu developer untuk menulis kode yang lebih terstruktur dan aman, dengan fitur seperti type checking dan autocompletion.

Membuat Fitur CRUD Sederhana dengan Next.js dan MongoDB

Pada artikel ini, kita akan belajar bagaimana membangun fitur CRUD (Create, Read, Update, Delete) sederhana menggunakan framework Next.js dan database NoSQL, MongoDB.

CRUD adalah fondasi dari hampir semua aplikasi web yang memungkinkan pengguna untuk mengelola data seperti menambah (create), melihat (read), memperbarui (update), dan menghapus (delete) data.

Implementasi fitur CRUD sangat penting dalam aplikasi yang berhubungan dengan penyimpanan dan pengolahan data, seperti aplikasi e-commerce, manajemen tugas, blog, dan lain sebagainya.

Mengapa Memilih Next.js dan MongoDB?

Next.js adalah framework JavaScript yang memungkinkan kita untuk membuat aplikasi web modern dengan fitur-fitur canggih seperti Server-Side Rendering (SSR), Static Site Generation (SSG), dan API Routes.

Keunggulan-keunggulan ini membuat Next.js sangat fleksibel dan cocok digunakan untuk membangun aplikasi web yang cepat dan SEO-friendly.

MongoDB, di sisi lain, adalah database NoSQL yang sangat populer dan banyak digunakan untuk menyimpan data berbentuk dokumen dalam format JSON. Berbeda dengan database relasional yang menggunakan tabel dan baris, MongoDB menyimpan data dalam dokumen yang lebih fleksibel dan dapat menampung berbagai jenis data tanpa perlu mematuhi skema yang kaku.

Menggabungkan Next.js dan MongoDB memberikan kita fleksibilitas untuk mengembangkan aplikasi full-stack yang efisien, di mana Next.js digunakan untuk membangun antarmuka pengguna dan API, sedangkan MongoDB digunakan untuk menyimpan data di backend.

Manfaat Membuat Fitur CRUD dengan Next.js dan MongoDB

  1. Fleksibilitas dalam Pengelolaan Data: Dengan MongoDB, kita dapat menyimpan data dalam bentuk dokumen JSON yang mudah untuk dimanipulasi. Ini sangat berguna ketika kita bekerja dengan data yang kompleks dan tidak terstruktur.
  2. Pengembangan Full-Stack yang Efisien: Next.js memungkinkan kita untuk membuat API Routes di dalam aplikasi yang sama. Ini berarti kita dapat menangani logika backend (seperti pengelolaan database) tanpa memerlukan backend terpisah.
  3. Performa dan Skalabilitas: Next.js mendukung Server-Side Rendering dan Static Site Generation yang meningkatkan performa aplikasi. MongoDB juga dapat diakses dan diskalakan dengan mudah untuk menangani volume data yang besar.
  4. Pengembangan Cepat dan Mudah: Dengan menggunakan Next.js dan MongoDB, kita dapat memanfaatkan banyak library dan alat yang mempermudah pengembangan, seperti mongoose untuk menghubungkan aplikasi dengan MongoDB.

Rencana Pembuatan Fitur CRUD

Dalam pembuatan fitur CRUD ini, kita akan fokus pada beberapa operasi dasar:

  • Create: Menambahkan data baru ke dalam database. Misalnya, kita dapat menambahkan item baru ke daftar produk dalam aplikasi e-commerce.
  • Read: Mengambil dan menampilkan data dari database. Misalnya, menampilkan daftar produk yang tersedia.
  • Update: Memperbarui data yang sudah ada. Misalnya, memperbarui informasi harga produk atau jumlah stok yang tersedia.
  • Delete: Menghapus data dari database. Misalnya, menghapus produk yang sudah tidak dijual lagi dari daftar produk.

Seluruh operasi ini akan diimplementasikan menggunakan API Routes di Next.js yang berfungsi sebagai endpoint untuk mengirimkan request ke database MongoDB. Meskipun kita tidak akan masuk ke detail kode dalam artikel ini, namun penting untuk memahami alur umum dari pembuatan fitur CRUD:

  1. Koneksi ke Database: Menghubungkan aplikasi Next.js dengan database MongoDB menggunakan library mongoose atau mongodb native.
  2. Membuat Model Data: Menentukan struktur data yang akan disimpan di MongoDB, misalnya, membuat model untuk produk yang memiliki atribut seperti nama, harga, dan deskripsi.
  3. Membuat API Routes: Membuat endpoint API untuk menangani permintaan CRUD dari frontend, seperti /api/products untuk menambahkan, melihat, memperbarui, dan menghapus produk.
  4. Integrasi dengan Antarmuka Pengguna: Menggunakan hook seperti useSWR untuk berkomunikasi dengan API Routes dan menampilkan data di halaman Next.js.

1) Membuat Proyek Toko Baju dengan Next.js Terbaru Menggunakan Terminal

Untuk memulai proyek baru menggunakan Next.js tanpa instalasi MongoDB, ikuti langkah-langkah berikut:

Langkah 1: Membuat Proyek Baru

Buka terminal Anda, lalu jalankan perintah berikut untuk membuat proyek Next.js baru:

npx create-next-app@latest toko-baju

Proses ini akan meminta Anda untuk memilih beberapa opsi seperti menggunakan TypeScript atau JavaScript, mengaktifkan ESLint, dan sebagainya. Pilih sesuai kebutuhan Anda atau gunakan pengaturan default.

Langkah 2: Masuk ke Direktori Proyek

Setelah proyek berhasil dibuat, pindah ke direktori proyek:

cd toko-baju

Langkah 3: Menjalankan Proyek

Jalankan proyek untuk memastikan semua telah terpasang dengan benar:

npm run dev

Buka http://localhost:3000 di browser untuk melihat tampilan awal proyek Next.js Anda. Anda sekarang memiliki proyek Next.js dasar yang siap untuk dikembangkan lebih lanjut.

2) Tata Cara Mendaftar Akun MongoDB dan Membuat Koneksi dengan MongoDB Atlas pada Windows dan Mac OS

Langkah 1: Mendaftar Akun MongoDB Atlas

  • Buka situs MongoDB Atlas dan klik Sign Up.
  • Isi informasi yang diperlukan seperti nama, email, dan kata sandi.
  • Atau, Anda dapat menggunakan akun Google atau GitHub untuk mendaftar.
  • Setelah itu, verifikasi email yang dikirimkan untuk mengaktifkan akun Anda.

Langkah 2: Membuat Cluster MongoDB

  • Setelah masuk ke MongoDB Atlas, klik Build a Cluster.
  • Pilih opsi Free Tier untuk membuat cluster gratis.
  • Pilih wilayah yang terdekat dengan lokasi Anda.
  • Klik Create Cluster dan tunggu hingga cluster selesai dibuat.

Langkah 3: Membuat Pengguna dan Menambahkan IP Address

  • Buka tab Database Access dan klik Add New Database User.
  • Masukkan nama pengguna dan kata sandi untuk akses database Anda.
  • Buka tab Network Access dan klik Add IP Address.
  • Pilih opsi Allow Access from Anywhere atau masukkan IP address Anda untuk mengizinkan koneksi.

Langkah 4: Mendapatkan String Koneksi

  • Setelah cluster siap, klik Connect di cluster Anda.
  • Pilih Connect your application.
  • Pilih Node.js sebagai driver, lalu salin string koneksi yang ditampilkan. String ini akan digunakan untuk menghubungkan aplikasi Anda dengan MongoDB Atlas.

3) Menginstal MongoDB pada Proyek Toko Baju dan Menghubungkan dengan Akun MongoDB Atlas

Langkah 1: Menginstal Mongoose

Pastikan Anda berada di dalam direktori proyek toko-baju yang telah dibuat. Instal Mongoose dengan perintah berikut:

npm install mongoose

Langkah 2: Menyiapkan Koneksi MongoDB

Buat file lib/mongodb.js di dalam proyek Anda dan tambahkan kode berikut untuk mengatur koneksi ke MongoDB Atlas:

// lib/mongodb.js
import mongoose from 'mongoose';

const connectMongo = async () => {
  try {
    await mongoose.connect(process.env.MONGODB_URI, {
      useNewUrlParser: true,
      useUnifiedTopology: true,
    });
    console.log("MongoDB connected");
  } catch (error) {
    console.error("MongoDB connection error", error);
  }
};

export default connectMongo;

Langkah 3: Menyimpan String Koneksi di File Environment

Buat file .env.local di root proyek Anda dan tambahkan string koneksi dari MongoDB Atlas yang telah disalin sebelumnya:

MONGODB_URI=mongodb+srv://:@cluster0.mongodb.net/myFirstDatabase?retryWrites=true&w=majority

Ganti dan dengan nama pengguna dan kata sandi yang telah dibuat sebelumnya, dan myFirstDatabase dengan nama database yang ingin Anda gunakan.

Langkah 4: Menghubungkan ke MongoDB dalam Aplikasi Next.js

Import dan panggil fungsi connectMongo() di dalam file API atau komponen yang memerlukan koneksi database, misalnya:

// pages/api/hello.js
import connectMongo from '../../lib/mongodb';

export default async function handler(req, res) {
  await connectMongo();
  res.status(200).json({ message: 'Connected to MongoDB' });
}

Cara Membuat Fitur CRUD Data Produk Baju yang Terhubung dengan MongoDB

Pada tutorial ini, kita akan membuat fitur CRUD (Create, Read, Update, Delete) untuk data produk baju yang terhubung dengan database MongoDB yang telah kita buat sebelumnya. Proses ini akan menggunakan Next.js dan Mongoose untuk mengelola data produk baju.

1) Membuat Model Produk dengan Mongoose

Buat file baru models/Product.js untuk mendefinisikan schema produk baju:

// models/Product.js
import mongoose from 'mongoose';

const ProductSchema = new mongoose.Schema({
  name: {
    type: String,
    required: true,
  },
  price: {
    type: Number,
    required: true,
  },
  description: {
    type: String,
  },
  imageUrl: {
    type: String,
  },
}, {
  timestamps: true,
});

export default mongoose.models.Product || mongoose.model('Product', ProductSchema);

Schema ini berisi atribut name, price, description, dan imageUrl yang akan digunakan untuk menyimpan data produk baju.

2) Membuat API Routes untuk CRUD Produk

Buat file baru di folder pages/api/products/index.js untuk menangani operasi Create dan Read:

// pages/api/products/index.js
import connectMongo from '../../../lib/mongodb';
import Product from '../../../models/Product';

export default async function handler(req, res) {
  await connectMongo();

  if (req.method === 'POST') {
    try {
      const product = new Product(req.body);
      await product.save();
      res.status(201).json({ success: true, data: product });
    } catch (error) {
      res.status(400).json({ success: false, error });
    }
  } else if (req.method === 'GET') {
    try {
      const products = await Product.find({});
      res.status(200).json({ success: true, data: products });
    } catch (error) {
      res.status(400).json({ success: false, error });
    }
  } else {
    res.status(405).json({ success: false, message: 'Method not allowed' });
  }
}

Kode ini akan membuat endpoint API untuk menambahkan (POST) dan mendapatkan (GET) semua produk.

3) Membuat API Route untuk Update dan Delete Produk

Buat file baru di pages/api/products/[id].js untuk menangani operasi Update dan Delete berdasarkan id produk:

// pages/api/products/[id].js
import connectMongo from '../../../lib/mongodb';
import Product from '../../../models/Product';

export default async function handler(req, res) {
  await connectMongo();

  const { id } = req.query;

  if (req.method === 'PUT') {
    try {
      const product = await Product.findByIdAndUpdate(id, req.body, {
        new: true,
        runValidators: true,
      });
      if (!product) {
        return res.status(404).json({ success: false, message: 'Product not found' });
      }
      res.status(200).json({ success: true, data: product });
    } catch (error) {
      res.status(400).json({ success: false, error });
    }
  } else if (req.method === 'DELETE') {
    try {
      const deletedProduct = await Product.findByIdAndDelete(id);
      if (!deletedProduct) {
        return res.status(404).json({ success: false, message: 'Product not found' });
      }
      res.status(200).json({ success: true, data: deletedProduct });
    } catch (error) {
      res.status(400).json({ success: false, error });
    }
  } else {
    res.status(405).json({ success: false, message: 'Method not allowed' });
  }
}

Kode ini memungkinkan pengguna untuk memperbarui (PUT) dan menghapus (DELETE) produk berdasarkan id.

4) Menambahkan Fungsi CRUD di Frontend

Untuk menampilkan data produk di frontend dan menambahkan fitur CRUD, buat file pages/products.js:

// pages/products.js
import { useState, useEffect } from 'react';
import axios from 'axios';

export default function ProductsPage() {
  const [products, setProducts] = useState([]);
  const [name, setName] = useState('');
  const [price, setPrice] = useState('');
  const [description, setDescription] = useState('');
  const [imageUrl, setImageUrl] = useState('');

  useEffect(() => {
    fetchProducts();
  }, []);

  const fetchProducts = async () => {
    try {
      const response = await axios.get('/api/products');
      setProducts(response.data.data);
    } catch (error) {
      console.error('Failed to fetch products', error);
    }
  };

  const addProduct = async () => {
    try {
      const newProduct = { name, price, description, imageUrl };
      await axios.post('/api/products', newProduct);
      fetchProducts();
      setName('');
      setPrice('');
      setDescription('');
      setImageUrl('');
    } catch (error) {
      console.error('Failed to add product', error);
    }
  };

  return (
    

      
Daftar Produk Baju

      

         setName(e.target.value)}
        />
         setPrice(e.target.value)}
        />
         setDescription(e.target.value)}
        />
         setImageUrl(e.target.value)}
        />
        
      

      
    
        {products.map((product) => (
          
  • 
            
    {product.name}
    
            
    {product.price}
    
            
    {product.description}
    
            {product.name}
          
    • 
        ))}
      

    

  );
}

Kode ini menampilkan daftar produk, memungkinkan penambahan produk baru, dan menyimpan data ke MongoDB Atlas.

Menambahkan Fitur CRUD dan Hapus Produk di Frontend

Untuk menampilkan data produk, menambahkan fitur CRUD, dan menghapus produk dari frontend, kita akan memperbarui file pages/products.js. Berikut adalah langkah-langkahnya:

// pages/products.js
import { useState, useEffect } from 'react';
import axios from 'axios';

export default function ProductsPage() {
  const [products, setProducts] = useState([]);
  const [name, setName] = useState('');
  const [price, setPrice] = useState('');
  const [description, setDescription] = useState('');
  const [imageUrl, setImageUrl] = useState('');

  useEffect(() => {
    fetchProducts();
  }, []);

  const fetchProducts = async () => {
    try {
      const response = await axios.get('/api/products');
      setProducts(response.data.data);
    } catch (error) {
      console.error('Failed to fetch products', error);
    }
  };

  const addProduct = async () => {
    try {
      const newProduct = { name, price, description, imageUrl };
      await axios.post('/api/products', newProduct);
      fetchProducts(); // Refresh the product list after adding a new product
      setName('');
      setPrice('');
      setDescription('');
      setImageUrl('');
    } catch (error) {
      console.error('Failed to add product', error);
    }
  };

  const deleteProduct = async (id) => {
    try {
      await axios.delete(`/api/products/${id}`);
      fetchProducts(); // Refresh the product list after deletion
    } catch (error) {
      console.error('Failed to delete product', error);
    }
  };

  return (
    

      
Daftar Produk Baju

      

         setName(e.target.value)}
        />
         setPrice(e.target.value)}
        />
         setDescription(e.target.value)}
        />
         setImageUrl(e.target.value)}
        />
        
      

      
    
        {products.map((product) => (
          
  • 
            
    {product.name}
    
            
    {product.price}
    
            
    {product.description}
    
            {product.name}
            
          
    • 
        ))}
      

    

  );
}

Penjelasan

  • State dan Hooks: useState digunakan untuk menyimpan data produk dan input dari form. useEffect dipakai untuk mengambil data produk saat komponen pertama kali dimuat.
  • fetchProducts(): Fungsi ini mengambil data produk dari endpoint API /api/products dan menyimpannya di state products.
  • addProduct(): Fungsi ini menambahkan produk baru dengan mengirimkan data dari form ke endpoint /api/products menggunakan metode POST.
  • deleteProduct(id): Fungsi ini menghapus produk berdasarkan id dengan mengirimkan permintaan DELETE ke endpoint /api/products/[id]. Setelah produk dihapus, daftar produk diperbarui dengan memanggil fetchProducts().

Tata Cara Melakukan Uji Coba Seluruh Method API Menggunakan Postman

Berikut ini adalah langkah-langkah lengkap untuk melakukan uji coba method API (GET, POST, PUT, DELETE) menggunakan Postman dengan struktur yang terorganisir. Pastikan API yang ingin diuji sudah berjalan di server lokal Anda.

1) Menguji Method GET untuk Mendapatkan Daftar Produk

  • Buka aplikasi Postman.
  • Pilih metode GET.
  • Masukkan URL endpoint http://localhost:3000/api/products.
  • Klik tombol Send.
  • Pastikan respons yang diterima berupa daftar produk dalam format JSON, misalnya:
{
  "success": true,
  "data": [
    {
      "_id": "60d21b4667d0d8992e610c85",
      "name": "Kaos Polos",
      "price": 100000,
      "description": "Kaos polos berwarna putih",
      "imageUrl": "",
      "createdAt": "2023-09-20T07:00:00.000Z",
      "updatedAt": "2023-09-20T07:00:00.000Z"
    }
  ]
}

2) Menguji Method POST untuk Menambahkan Produk Baru

Pilih metode POST di Postman.

Masukkan URL endpoint http://localhost:3000/api/products.

Pilih tab Body, lalu pilih opsi raw dan JSON.

Masukkan data JSON berikut untuk menambahkan produk baru:

{
  "name": "Kemeja Batik",
  "price": 200000,
  "description": "Kemeja batik modern dengan motif kontemporer",
  "imageUrl": ""
}

Klik tombol Send.

Pastikan respons yang diterima berupa data produk yang baru ditambahkan, misalnya:

{
  "success": true,
  "data": {
    "_id": "60d21b4667d0d8992e610c86",
    "name": "Kemeja Batik",
    "price": 200000,
    "description": "Kemeja batik modern dengan motif kontemporer",
    "imageUrl": "",
    "createdAt": "2023-09-20T08:00:00.000Z",
    "updatedAt": "2023-09-20T08:00:00.000Z"
  }
}

3) Menguji Method PUT untuk Memperbarui Produk Berdasarkan ID

Pilih metode PUT di Postman.

Masukkan URL endpoint http://localhost:3000/api/products/60d21b4667d0d8992e610c86 (ganti ID dengan ID produk yang ingin diperbarui).

Pilih tab Body, lalu pilih opsi raw dan JSON.

Masukkan data JSON berikut untuk memperbarui produk:

{
  "name": "Kemeja Batik Terbaru",
  "price": 250000,
  "description": "Kemeja batik terbaru dengan desain elegan"
}

Klik tombol Send.

Pastikan respons yang diterima berupa data produk yang telah diperbarui, misalnya:

{
  "success": true,
  "data": {
    "_id": "60d21b4667d0d8992e610c86",
    "name": "Kemeja Batik Terbaru",
    "price": 250000,
    "description": "Kemeja batik terbaru dengan desain elegan",
    "imageUrl": "",
    "createdAt": "2023-09-20T08:00:00.000Z",
    "updatedAt": "2023-09-20T09:00:00.000Z"
  }
}

4) Menguji Method DELETE untuk Menghapus Produk Berdasarkan ID

Pilih metode DELETE di Postman.

Masukkan URL endpoint http://localhost:3000/api/products/60d21b4667d0d8992e610c86 (ganti ID dengan ID produk yang ingin dihapus).

Klik tombol Send.

Pastikan respons yang diterima berupa pesan konfirmasi bahwa produk telah dihapus, misalnya:

{
  "success": true,
  "data": {
    "_id": "60d21b4667d0d8992e610c86",
    "name": "Kemeja Batik Terbaru",
    "price": 250000,
    "description": "Kemeja batik terbaru dengan desain elegan",
    "imageUrl": "",
    "createdAt": "2023-09-20T08:00:00.000Z",
    "updatedAt": "2023-09-20T09:00:00.000Z"
  }
}

Jangan lewatkan kesempatan untuk belajar dan berkembang bersama BuildWithAngga!