A. Setup Project dan Konfigurasi Awal

Tutorial Setup Project dan Konfigurasi Awal

1. Persiapan Development Environment

1. Install Node.js versi LTS dari nodejs.org

2. Install MySQL Server dari mysql.com

3. Install code editor (rekomendasi: VS Code)

4. Buka terminal dan verifikasi instalasi:

node --version
npm --version
mysql --version

1. Buat struktur project:

mkdir online-shop
cd online-shop
mkdir frontend backend

1. Install dependencies:

# Backend setup
cd backend
npm init -y
npm install express mysql2 cors dotenv bcryptjs jsonwebtoken multer

# Frontend setup
cd ../frontend
npx create-react-app .
npm install axios react-router-dom @reduxjs/toolkit react-redux tailwindcss

2. Database Design & Setup

1. Buka MySQL terminal atau MySQL Workbench

2. Buat database baru:

CREATE DATABASE online_shop;
USE online_shop;

1. Buat tabel users:

CREATE TABLE users (
    id INT PRIMARY KEY AUTO_INCREMENT,
    username VARCHAR(50) UNIQUE NOT NULL,
    email VARCHAR(100) UNIQUE NOT NULL,
    password VARCHAR(255) NOT NULL,
    role ENUM('admin', 'petugas', 'pengguna') DEFAULT 'pengguna',
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

1. Buat tabel products:

CREATE TABLE products (
    id INT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(100) NOT NULL,
    description TEXT,
    price DECIMAL(10,2) NOT NULL,
    stock INT NOT NULL,
    image_url VARCHAR(255),
    category_id INT,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

1. Tabel carts dan orders akan diimplementasikan nanti:

-- Akan diimplementasikan pada tutorial Cart & Order Management
/* 
CREATE TABLE carts {...}
CREATE TABLE orders {...}
*/

3. Backend Initial Setup

1. Buat file .env di folder backend:

PORT=5000
NODE_ENV=development
DB_HOST=localhost
DB_USER=root
DB_PASSWORD=your_password
DB_NAME=online_shop
JWT_SECRET=your_jwt_secret_key
JWT_EXPIRES_IN=24h

1. Buat struktur folder backend:

backend/
├── src/
│   ├── config/
│   ├── controllers/
│   ├── middleware/
│   ├── models/
│   ├── routes/
│   ├── utils/
│   └── index.js
└── .env

1. Setup database connection (src/config/database.js):

const mysql = require('mysql2');
const dotenv = require('dotenv');

dotenv.config();

const pool = mysql.createPool({
    host: process.env.DB_HOST,
    user: process.env.DB_USER,
    password: process.env.DB_PASSWORD,
    database: process.env.DB_NAME,
    waitForConnections: true,
    connectionLimit: 10,
    queueLimit: 0
});

module.exports = pool.promise();

1. Setup server (src/index.js):

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

dotenv.config();

const app = express();

app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

const db = require('./config/database');

// Routes akan diimplementasikan nanti
/*
const authRoutes = require('./routes/auth.routes');
const productRoutes = require('./routes/product.routes');
const cartRoutes = require('./routes/cart.routes');
const orderRoutes = require('./routes/order.routes');

app.use('/api/auth', authRoutes);
app.use('/api/products', productRoutes);
app.use('/api/cart', cartRoutes);
app.use('/api/orders', orderRoutes);
*/

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

4. Frontend Initial Setup

1. Buat struktur folder frontend:

frontend/
├── src/
│   ├── components/
│   │   ├── common/
│   │   ├── auth/
│   │   ├── products/
│   │   ├── cart/
│   │   └── dashboard/
│   ├── pages/
│   ├── store/
│   ├── services/
│   ├── utils/
│   └── App.js
└── .env

1. Setup React Router (src/App.js):

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { Provider } from 'react-redux';
import store from './store';

// Components akan diimplementasikan nanti
/*
import Login from './pages/Login';
import Register from './pages/Register';
import Dashboard from './pages/Dashboard';
import Products from './pages/Products';
import Cart from './pages/Cart';
import Profile from './pages/Profile';
*/

function App() {
  return (
    <Provider store={store}>
      <Router>
        <Routes>
          {/* Routes akan diimplementasikan nanti */}
        </Routes>
      </Router>
    </Provider>
  );
}

export default App;

1. Setup Redux Store (src/store/index.js):

import { configureStore } from '@reduxjs/toolkit';

// Reducers akan diimplementasikan nanti
/*
import authReducer from './slices/authSlice';
import cartReducer from './slices/cartSlice';
import productReducer from './slices/productSlice';
*/

export const store = configureStore({
  reducer: {
    // Reducers akan ditambahkan nanti
  },
});

export default store;

1. Setup API Service (src/services/api.js):

import axios from 'axios';

const API_URL = process.env.REACT_APP_API_URL || 'http://localhost:5000/api';

const api = axios.create({
  baseURL: API_URL,
  headers: {
    'Content-Type': 'application/json',
  },
});

api.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default api;

1. Buat file .env di frontend:

REACT_APP_API_URL=http://localhost:5000/api

Catatan Penting:

• Semua komponen, routes, dan reducers yang dikomentari akan diimplementasikan pada tutorial selanjutnya

• Pastikan semua dependencies terinstal dengan benar

• Verifikasi koneksi database sebelum melanjutkan ke tahap berikutnya

• Pastikan server backend dan frontend dapat berjalan tanpa error

Untuk menjalankan aplikasi:

# Terminal 1 - Backend
cd backend
npm start

# Terminal 2 - Frontend
cd frontend
npm start