Daftar Isi

1. Pengantar MERN Stack
2. Persiapan Lingkungan Pengembangan
3. Membuat Backend dengan Node.js & Express
4. Membuat Database MongoDB
5. Membuat Frontend dengan React
6. Integrasi Frontend dan Backend
7. Deploy Aplikasi Blog
8. Sumber Belajar dan Source Code

1. Pengantar MERN Stack

MERN Stack adalah kumpulan teknologi yang digunakan untuk membangun aplikasi web full-stack modern. MERN adalah singkatan dari:

• M ongoDB: Database NoSQL berbasis dokumen.
• E xpress.js: Framework backend untuk Node.js.
• R eact.js: Library frontend untuk membangun UI.
• N ode.js: Runtime JavaScript di server.

Dengan MERN Stack, Anda dapat membangun aplikasi blog yang dinamis, responsif, dan scalable menggunakan JavaScript di seluruh stack.

2. Persiapan Lingkungan Pengembangan

Sebelum mulai membangun aplikasi, pastikan Anda sudah menyiapkan beberapa alat berikut:

1. Node.js & npm: Unduh dan install dari https://nodejs.org .
2. Code Editor: Gunakan Visual Studio Code atau editor favorit Anda.
3. MongoDB: Bisa menggunakan MongoDB Atlas (cloud) atau install MongoDB lokal dari https://www.mongodb.com/try/download/community .
4. Postman atau Insomnia: Untuk testing API backend.

3. Membuat Backend dengan Node.js & Express

Backend bertugas mengelola data dan menyediakan API untuk frontend. Kita akan membuat server menggunakan Express.js.

Langkah 1: Inisialisasi Project

mkdir mern-blog-backend
cd mern-blog-backend
npm init -y
npm install express mongoose cors dotenv
      

Langkah 2: Buat file server.js

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
require('dotenv').config();

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

const PORT = process.env.PORT || 5000;
const MONGO_URI = process.env.MONGO_URI;

// Koneksi ke MongoDB
mongoose.connect(MONGO_URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
})
.then(() => console.log('MongoDB connected'))
.catch(err => console.error(err));

// Schema dan Model Post
const postSchema = new mongoose.Schema({
  title: String,
  content: String,
  author: String,
  createdAt: { type: Date, default: Date.now },
});

const Post = mongoose.model('Post', postSchema);

// Routes API
app.get('/api/posts', async (req, res) => {
  const posts = await Post.find().sort({ createdAt: -1 });
  res.json(posts);
});

app.post('/api/posts', async (req, res) => {
  const { title, content, author } = req.body;
  const newPost = new Post({ title, content, author });
  await newPost.save();
  res.status(201).json(newPost);
});

app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});
      

Jangan lupa buat file .env di root folder dengan isi:

MONGO_URI=your_mongodb_connection_string
      

Jalankan server dengan perintah node server.js atau gunakan nodemon untuk auto reload.

4. Membuat Database MongoDB

Anda bisa menggunakan MongoDB Atlas untuk database cloud gratis atau install MongoDB lokal.

Langkah 1: Buat Akun MongoDB Atlas

Kunjungi https://www.mongodb.com/cloud/atlas , daftar dan buat cluster gratis.

Langkah 2: Buat Database dan User

Setelah cluster aktif, buat database bernama mern_blog dan user dengan akses penuh.

Langkah 3: Dapatkan Connection String

Salin connection string dan masukkan ke file .env pada variabel MONGO_URI .

5. Membuat Frontend dengan React

Frontend akan menampilkan daftar postingan dan form untuk membuat postingan baru.

Langkah 1: Inisialisasi Project React

npx create-react-app mern-blog-frontend
cd mern-blog-frontend
npm install axios react-router-dom
      

Langkah 2: Struktur Folder

Buat folder src/components untuk komponen React.

Langkah 3: Buat Komponen PostList.js

import React, { useEffect, useState } from 'react';
import axios from 'axios';

export default function PostList() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    axios.get('http://localhost:5000/api/posts')
      .then(res => setPosts(res.data))
      .catch(err => console.error(err));
  }, []);

  return (
    <div className="space-y-6">
      {posts.map(post => (
        <article key={post._id} className="p-4 bg-white rounded shadow">
          <h3 className="text-xl font-semibold text-indigo-700">{post.title}</h3>
          <p className="text-gray-700 mt-2">{post.content}</p>
          <p className="text-sm text-gray-500 mt-2">Penulis: {post.author} | {new Date(post.createdAt).toLocaleDateString()}</p>
        </article>
      ))}
    </div>
  );
}
      

Langkah 4: Buat Komponen PostForm.js

import React, { useState } from 'react';
import axios from 'axios';

export default function PostForm({ onPostCreated }) {
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');
  const [author, setAuthor] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const res = await axios.post('http://localhost:5000/api/posts', { title, content, author });
      onPostCreated(res.data);
      setTitle('');
      setContent('');
      setAuthor('');
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="bg-white p-6 rounded shadow space-y-4">
      <div>
        <label className="block font-semibold mb-1" htmlFor="title">Judul</label>
        <input
          id="title"
          type="text"
          value={title}
          onChange={e => setTitle(e.target.value)}
          required
          className="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"
        />
      </div>
      <div>
        <label className="block font-semibold mb-1" htmlFor="content">Konten</label>
        <textarea
          id="content"
          value={content}
          onChange={e => setContent(e.target.value)}
          required
          rows="5"
          className="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"
        />
      </div>
      <div>
        <label className="block font-semibold mb-1" htmlFor="author">Penulis</label>
        <input
          id="author"
          type="text"
          value={author}
          onChange={e => setAuthor(e.target.value)}
          required
          className="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"
        />
      </div>
      <button
        type="submit"
        className="bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700 transition"
      >Buat Postingan</button>
    </form>
  );
}
      

Langkah 5: Gabungkan di App.js

import React, { useState } from 'react';
import PostList from './components/PostList';
import PostForm from './components/PostForm';

function App() {
  const [refresh, setRefresh] = useState(false);

  const handlePostCreated = () => {
    setRefresh(!refresh);
  };

  return (
    <div className="min-h-screen bg-gray-100 p-6">
      <h1 className="text-3xl font-bold text-indigo-700 mb-6 text-center">Blog MERN Stack</h1>
      <PostForm onPostCreated={handlePostCreated} />
      <div className="mt-8">
        <PostList key={refresh} />
      </div>
    </div>
  );
}

export default App;
      

6. Integrasi Frontend dan Backend

Pastikan backend berjalan di http://localhost:5000 dan frontend di http://localhost:3000 .

Jika ada masalah CORS, pastikan middleware cors() sudah dipasang di backend.

Anda bisa menguji API menggunakan Postman atau langsung dari frontend React.

7. Deploy Aplikasi Blog

Setelah aplikasi selesai, Anda bisa deploy ke platform hosting seperti:

• Backend: Heroku, Render, Vercel (serverless), atau DigitalOcean.
• Frontend: Netlify, Vercel, GitHub Pages (jika statis), atau Firebase Hosting.
• Database: Gunakan MongoDB Atlas untuk database cloud.

Contoh deploy backend ke Heroku:

heroku create nama-aplikasi-anda
git push heroku main
heroku config:set MONGO_URI=your_mongodb_connection_string
heroku open
      

Contoh deploy frontend ke Netlify:

npm run build
netlify deploy --dir=build --prod
      

8. Sumber Belajar dan Source Code

Berikut beberapa sumber belajar dan repository contoh untuk memperdalam MERN Stack:

• MongoDB MERN Stack Tutorial
• React Official Tutorial
• Express.js Guide
• Contoh Source Code MERN Stack oleh Academind (GitHub)
• Playlist YouTube: MERN Stack Tutorial oleh freeCodeCamp

Anda dapat mengunduh source code lengkap dari tutorial ini di: