Jelajahi Cara Kembangkan Shopping Cart Menggunakan MEVN Stack!

Temukan cara ampuh mengembangkan shopping cart menggunakan MEVN Stack! Pelajari teknik inovatif dan raih kesuksesan dalam proyek Anda. Klik untuk eksplorasi lebih lanjut!

By WGS INDONESIA
4.9/4.9
Indonesia
Rp 43,750.00 GRATIS
E-COURSE banner with text and icons representing Artificial Intelligence and video learning

Detail Pembelajaran

Jelajahi Cara Kembangkan Shopping Cart Menggunakan MEVN Stack!
  • Ebook, Pengembangan Web, MEVN Stack, E-Commerce, Shopping Cart, Tutorial Teknologi

Baca Online

Jelajahi Cara Kembangkan Shopping Cart Menggunakan MEVN Stack

Daftar Isi

  1. Pengantar MEVN Stack dan Shopping Cart
  2. Persiapan Lingkungan Pengembangan
  3. Membuat Backend dengan Node.js dan Express
  4. Membuat Database MongoDB dan Model Produk
  5. Membuat Frontend dengan Vue.js
  6. Menghubungkan Frontend dan Backend
  7. Membangun Fitur Shopping Cart
  8. Penutup dan Langkah Selanjutnya

1. Pengantar MEVN Stack dan Shopping Cart

MEVN Stack adalah singkatan dari MongoDB, Express.js, Vue.js, dan Node.js. Ini adalah kombinasi teknologi yang populer untuk membangun aplikasi web modern yang full-stack menggunakan JavaScript di seluruh lapisan.

Dalam ebook ini, kita akan belajar bagaimana mengembangkan sebuah aplikasi shopping cart menggunakan MEVN Stack. Shopping cart adalah fitur penting dalam aplikasi e-commerce yang memungkinkan pengguna memilih produk dan melakukan pembelian.

Ilustrasi konsep MEVN Stack dengan ikon MongoDB, Express, Vue.js, dan Node.js serta keranjang belanja digital

2. Persiapan Lingkungan Pengembangan

Sebelum mulai coding, pastikan Anda sudah menginstal beberapa alat berikut:

  • Node.js dan npm (Node Package Manager)
  • MongoDB (bisa menggunakan MongoDB Atlas untuk cloud)
  • Code editor seperti Visual Studio Code
  • Postman atau Insomnia untuk testing API

Setelah itu, buat folder proyek dan inisialisasi npm dengan perintah npm init -y . Kita akan membuat backend dan frontend secara terpisah.

Tampilan layar komputer dengan terminal yang menunjukkan instalasi Node.js dan MongoDB serta editor kode terbuka

3. Membuat Backend dengan Node.js dan Express

Backend akan bertugas menyediakan API untuk frontend berinteraksi dengan database. Kita akan menggunakan Express.js sebagai framework web.

npm install express mongoose cors

Berikut contoh kode dasar server Express: 

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');

const app = express();
app.use(cors());
app.use(express.json());

mongoose.connect('mongodb://localhost:27017/shoppingcart', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

const port = 5000;
app.listen(port, () => {
  console.log(`Server berjalan di http://localhost:${port}`);
});
Tampilan kode backend Node.js dengan Express dan koneksi MongoDB di editor kode

4. Membuat Database MongoDB dan Model Produk

Kita akan membuat model produk untuk menyimpan data produk yang akan ditampilkan di frontend. 

const mongoose = require('mongoose');

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

module.exports = mongoose.model('Product', productSchema);

Selanjutnya buat route API untuk mendapatkan daftar produk: 

const Product = require('./models/Product');

app.get('/api/products', async (req, res) => {
  try {
    const products = await Product.find();
    res.json(products);
  } catch (error) {
    res.status(500).json({ message: error.message });
  }
});
Diagram model produk MongoDB dan contoh endpoint API Express untuk mengambil data produk

5. Membuat Frontend dengan Vue.js

Frontend akan menampilkan produk dan mengelola shopping cart. Kita akan menggunakan Vue.js untuk membangun antarmuka interaktif.

Buat proyek Vue dengan Vue CLI atau Vite, lalu install Axios untuk request API:

npm install axios

Contoh komponen Vue untuk menampilkan daftar produk: 

<template>
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
    <div v-for="product in products" :key="product._id" class="border rounded-lg p-4 flex flex-col">
      <img :src="product.imageUrl" :alt="product.name" class="h-48 object-cover rounded mb-4" />
      <h3 class="text-xl font-semibold mb-2">{{ product.name }}</h3>
      <p class="flex-grow mb-4">{{ product.description }}</p>
      <div class="text-lg font-bold mb-4">Rp {{ product.price.toLocaleString() }}</div>
      <button @click="addToCart(product)" class="bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700 transition">Tambah ke Keranjang</button>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      products: [],
    };
  },
  methods: {
    async fetchProducts() {
      try {
        const response = await axios.get('http://localhost:5000/api/products');
        this.products = response.data;
      } catch (error) {
        console.error(error);
      }
    },
    addToCart(product) {
      this.$emit('add-to-cart', product);
    },
  },
  mounted() {
    this.fetchProducts();
  },
};
</script>
Tampilan aplikasi frontend Vue.js yang menampilkan grid produk dengan gambar, nama, harga, dan tombol tambah ke keranjang

6. Menghubungkan Frontend dan Backend

Pastikan backend berjalan di http://localhost:5000 dan frontend dapat mengakses API tersebut.

Gunakan CORS di backend agar frontend dapat melakukan request. Contoh sudah diberikan pada kode backend sebelumnya.

Jalankan backend dengan:

node index.js

Jalankan frontend dengan:

npm run dev

Tampilan dua jendela terminal yang menunjukkan backend dan frontend MEVN stack berjalan bersamaan

7. Membangun Fitur Shopping Cart

Kita akan menambahkan fitur shopping cart di frontend untuk menyimpan produk yang dipilih pengguna.

Contoh implementasi sederhana shopping cart di Vue: 

<template>
  <div>
    <h2 class="text-2xl font-semibold mb-4">Keranjang Belanja</h2>
    <ul class="mb-4">
      <li v-for="item in cart" :key="item._id" class="flex justify-between mb-2">
        <span>{{ item.name }} (x{{ item.quantity }})</span>
        <span>Rp {{ (item.price * item.quantity).toLocaleString() }}</span>
      </li>
    </ul>
    <div class="font-bold text-lg">Total: Rp {{ totalPrice.toLocaleString() }}</div>
  </div>
</template>

<script>
export default {
  props: ['cart'],
  computed: {
    totalPrice() {
      return this.cart.reduce((sum, item) => sum + item.price * item.quantity, 0);
    },
  },
};
</script>

Dan di komponen utama, kelola state cart dan fungsi tambah produk: 

<template>
  <div>
    <ProductList @add-to-cart="addToCart" />
    <ShoppingCart :cart="cart" />
  </div>
</template>

<script>
import ProductList from './ProductList.vue';
import ShoppingCart from './ShoppingCart.vue';

export default {
  components: { ProductList, ShoppingCart },
  data() {
    return {
      cart: [],
    };
  },
  methods: {
    addToCart(product) {
      const item = this.cart.find(i => i._id === product._id);
      if (item) {
        item.quantity++;
      } else {
        this.cart.push({ ...product, quantity: 1 });
      }
    },
  },
};
</script>
Tampilan frontend Vue.js dengan daftar produk dan keranjang belanja yang menampilkan produk terpilih dan total harga

8. Penutup dan Langkah Selanjutnya

Selamat! Anda telah mempelajari cara mengembangkan shopping cart menggunakan MEVN Stack. Anda dapat mengembangkan lebih lanjut dengan menambahkan fitur autentikasi pengguna, pembayaran online, dan manajemen pesanan.

Jangan lupa untuk mengoptimalkan UI/UX dan mengamankan API backend Anda.

Ilustrasi roadmap pengembangan aplikasi MEVN stack dengan ikon fitur tambahan seperti autentikasi, pembayaran, dan keamanan

Edukasi Terkait