Basic Tutorial with Vue JS, React, Node Express & MySQL – Demo Login, Register & CRUD Data

Dalam tutorial ini, kita akan belajar cara membuat aplikasi sederhana menggunakan Vite JS, React, Node Express, dan MySQL. Aplikasi ini akan memiliki fitur login, register, dan CRUD (Create, Read, Update, Delete) data. Tutorial ini akan memandu langkah demi langkah dalam membuat aplikasi ini dari awal hingga akhir.

Sebelum kita mulai, pastikan Anda memiliki Node.js dan MySQL diinstal di komputer Anda. Anda juga harus memiliki pengetahuan dasar tentang React dan Express. Jika Anda belum menginstal Vite JS, Anda dapat melakukannya dengan menjalankan perintah berikut:

npm install -g create-vite

Setelah semua persyaratan terpenuhi, kita dapat mulai membuat aplikasi.

Langkah 1: Membuat Proyek Vite JS

Pertama, kita akan membuat proyek Vite JS dengan menggunakan template default React. Buka terminal Anda dan jalankan perintah berikut:

create-vite demo-app
cd demo-app
npm i

Setelah proyek selesai dibuat, kita dapat menjalankannya dengan perintah:

npm run dev

Langkah 2: Membuat Komponen Login dan Register

Kedua, kita akan membuat komponen Login dan Register di dalam proyek React.

Di dalam folder src, buat folder components. Di dalam folder tersebut, buat dua file baru: Login.js dan Register.js.

// Login.js
import React from 'react';

const Login = () => {
    return (
        <div>
            <h2>Login</h2>
            <form>
                <input type="email" placeholder="Email" />
                <input type="password" placeholder="Password" />
                <button type="submit">Login</button>
            </form>
        </div>
    );
}

export default Login;

// Register.js
import React from 'react';

const Register = () => {
    return (
        <div>
            <h2>Register</h2>
            <form>
                <input type="text" placeholder="Name" />
                <input type="email" placeholder="Email" />
                <input type="password" placeholder="Password" />
                <button type="submit">Register</button>
            </form>
        </div>
    );
}

export default Register;

Langkah 3: Mengatur Routes dengan React Router

Ketiga, kita akan mengatur routes menggunakan React Router. Install React Router dengan perintah:

npm install react-router-dom

Buat file Routes.js di dalam folder src dan tambahkan kode berikut:

// Routes.js
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Login from './components/Login';
import Register from './components/Register';

const Routes = () => {
    return (
        <Router>
            <Switch>
                <Route path="/login" exact component={Login} />
                <Route path="/register" exact component={Register} />
            </Switch>
        </Router>
    );
}

export default Routes;

Tambahkan kode berikut di dalam file App.jsx untuk menggunakan komponen Routes:

// App.jsx
import React from 'react';
import Routes from './Routes';

const App = () => {
    return (
        <div>
            <h1>Welcome to Demo App</h1>
            <Routes />
        </div>
    );
}

export default App;

Langkah 4: Membuat API dengan Node Express

Keempat, kita akan membuat API dengan Node Express untuk login, register, dan CRUD data.

Buat folder server di dalam root proyek Anda. Di dalam folder tersebut, buat file server.js dan tambahkan kode berikut:

// server.js
const express = require('express');
const app = express();

app.use(express.json());

// API for login
app.post('/api/login', (req, res) => {
    // Implement login logic here
});

// API for register
app.post('/api/register', (req, res) => {
    // Implement register logic here
});

// API for CRUD data
app.get('/api/data', (req, res) => {
    // Implement get data logic here
});

app.post('/api/data', (req, res) => {
    // Implement create data logic here
});

app.put('/api/data/:id', (req, res) => {
    // Implement update data logic here
});

app.delete('/api/data/:id', (req, res) => {
    // Implement delete data logic here
});

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

Langkah 5: Menghubungkan React dan Express dengan Axios

Kelima, kita akan menghubungkan React dengan Express menggunakan Axios. Install Axios dengan perintah:

npm install axios

Tambahkan kode berikut di dalam komponen Login.js untuk melakukan request login ke server:

// Login.js
import React from 'react';
import axios from 'axios';

const Login = () => {
    const handleSubmit = async (e) => {
        e.preventDefault();
        const email = e.target.elements.email.value;
        const password = e.target.elements.password.value;

        try {
            const res = await axios.post('http://localhost:5000/api/login', { email, password });
            console.log(res.data);
        } catch (error) {
            console.error(error);
        }
    }

    return (
        <div>
            <h2>Login</h2>
            <form onSubmit={handleSubmit}>
                <input type="email" name="email" placeholder="Email" />
                <input type="password" name="password" placeholder="Password" />
                <button type="submit">Login</button>
            </form>
        </div>
    );
}

export default Login;

Langkah 6: Menghubungkan MySQL dengan Node Express

Keenam, kita akan menghubungkan MySQL dengan Node Express menggunakan modul mysql2. Install modul tersebut dengan perintah:

npm install mysql2

Tambahkan kode berikut di dalam file server.js untuk menghubungkan server dengan database MySQL:

// server.js
const mysql = require('mysql2');

const db = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: 'your_password',
    database: 'demo_app'
});

db.connect(err => {
    if (err) {
        console.error('Error connecting to database:', err);
        return;
    }
    console.log('Connected to database');
});

Langkah 7: Final Touch

Terakhir, jalankan server Node Express dengan perintah node server/server.js. Buka aplikasi React dengan menjalankan perintah npm run dev di terminal.

Anda sekarang memiliki sebuah aplikasi sederhana yang memungkinkan pengguna untuk login, register, dan melakukan CRUD data. Anda dapat mengembangkan aplikasi ini lebih lanjut dengan menambahkan fitur-fitur tambahan sesuai kebutuhan. Semoga tutorial ini bermanfaat untuk Anda dalam mempelajari pengembangan aplikasi web menggunakan Vite JS, React, Node Express, dan MySQL. Selamat mencoba!