CRUD sederhana javascript dan html

Kita akan membuatkan contoh website sederhana menggunakan MySQL, Node.js, dan HTML. Website ini akan memiliki fungsi dasar CRUD (Create, Read, Update, Delete).

buat file

package.json

{
  "name": "simple-crud-app",
  "version": "1.0.0",
  "description": "Simple CRUD application with Node.js and MySQL",
  "main": "server.js",
  "dependencies": {
    "express": "^4.17.1",
    "cors": "^2.8.5",
    "mysql2": "^2.3.0",
    "body-parser": "^1.19.0"
  }
}
server.js


const express = require('express');
const mysql = require('mysql2');
const bodyParser = require('body-parser');
const path = require('path');
const cors = require('cors');

const app = express();

// Middleware
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static(path.join(__dirname, 'public')));

// Database configuration
const dbConfig = {
    host: 'localhost',
    user: 'root',
    password: '',
    database: 'crud'
};

// Create MySQL connection pool instead of single connection
const pool = mysql.createPool(dbConfig);

// Test database connection
pool.getConnection((err, connection) => {
    if (err) {
        console.error('Error connecting to MySQL database:');
        console.error('Error code:', err.code);
        console.error('Error message:', err.message);
        return;
    }

    console.log('Successfully connected to MySQL database');

    // Release the connection
    connection.release();

    // Test query
    pool.query('SELECT 1 + 1 AS solution', (err, results) => {
        if (err) {
            console.error('Error executing test query:', err);
            return;
        }
        console.log('Database connection test successful');
    });
});

// Middleware to handle database errors
const handleDatabaseError = (err, res) => {
    console.error('Database Error:', err);
    res.status(500).json({
        error: 'Database error occurred',
        details: err.message,
        code: err.code
    });
};

// API Routes
// GET all users
app.get('/api/users', (req, res) => {
    console.log('GET /api/users - Fetching all users');

    pool.query('SELECT * FROM users ORDER BY id DESC', (err, results) => {
        if (err) {
            handleDatabaseError(err, res);
            return;
        }
        console.log(`Successfully retrieved ${results.length} users`);
        res.json(results);
    });
});

// POST new user
app.post('/api/users', (req, res) => {
    console.log('POST /api/users - Creating new user:', req.body);
    const { name, email } = req.body;

    // Input validation
    if (!name || !email) {
        console.log('Invalid input - Missing required fields');
        return res.status(400).json({
            error: 'Invalid input',
            message: 'Name and email are required'
        });
    }

    const query = 'INSERT INTO users (name, email) VALUES (?, ?)';
    pool.query(query, [name, email], (err, result) => {
        if (err) {
            // Handle duplicate email error specifically
            if (err.code === 'ER_DUP_ENTRY') {
                return res.status(409).json({
                    error: 'Duplicate email',
                    message: 'This email is already registered'
                });
            }
            handleDatabaseError(err, res);
            return;
        }

        console.log('User created successfully with ID:', result.insertId);
        res.status(201).json({
            id: result.insertId,
            name,
            email,
            message: 'User created successfully'
        });
    });
});

// PUT update user
app.put('/api/users/:id', (req, res) => {
    const { id } = req.params;
    const { name, email } = req.body;
    console.log(`PUT /api/users/${id} - Updating user:`, req.body);

    // Input validation
    if (!name || !email) {
        console.log('Invalid input - Missing required fields');
        return res.status(400).json({
            error: 'Invalid input',
            message: 'Name and email are required'
        });
    }

    const query = 'UPDATE users SET name = ?, email = ? WHERE id = ?';
    pool.query(query, [name, email, id], (err, result) => {
        if (err) {
            // Handle duplicate email error
            if (err.code === 'ER_DUP_ENTRY') {
                return res.status(409).json({
                    error: 'Duplicate email',
                    message: 'This email is already registered'
                });
            }
            handleDatabaseError(err, res);
            return;
        }

        if (result.affectedRows === 0) {
            console.log('User not found with ID:', id);
            return res.status(404).json({
                error: 'Not found',
                message: 'User not found'
            });
        }

        console.log('User updated successfully:', id);
        res.json({
            id,
            name,
            email,
            message: 'User updated successfully'
        });
    });
});

// DELETE user
app.delete('/api/users/:id', (req, res) => {
    const { id } = req.params;
    console.log(`DELETE /api/users/${id} - Deleting user`);

    const query = 'DELETE FROM users WHERE id = ?';
    pool.query(query, [id], (err, result) => {
        if (err) {
            handleDatabaseError(err, res);
            return;
        }

        if (result.affectedRows === 0) {
            console.log('User not found with ID:', id);
            return res.status(404).json({
                error: 'Not found',
                message: 'User not found'
            });
        }

        console.log('User deleted successfully:', id);
        res.json({
            message: 'User deleted successfully',
            id: id
        });
    });
});

// Handle 404 errors
app.use((req, res) => {
    res.status(404).json({
        error: 'Not found',
        message: 'The requested resource was not found'
    });
});

// Handle other errors
app.use((err, req, res, next) => {
    console.error('Server Error:', err);
    res.status(500).json({
        error: 'Server error',
        message: 'An unexpected error occurred'
    });
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
    console.log(`Access the application at http://localhost:${PORT}`);
});

// Graceful shutdown
process.on('SIGTERM', () => {
    console.log('SIGTERM received. Closing HTTP server and database connection...');
    pool.end((err) => {
        if (err) {
            console.error('Error closing database connection:', err);
            process.exit(1);
        }
        process.exit(0);
    });
});

Kita telah membuat contoh aplikasi CRUD sederhana menggunakan Node.js, MySQL, dan HTML. Berikut adalah penjelasan cara menggunakan dan mengatur aplikasinya:

  1. Persiapan Database:

  • Install MySQL di komputer Anda

  • Buat database dan tabel menggunakan perintah SQL yang ada di bagian database.sql

  1. Instalasi dan Konfigurasi:

  1. Konfigurasi Database:

  • Buka file server.js

  • Sesuaikan konfigurasi MySQL dengan pengaturan Anda:

    • host

    • user

    • password

    • database

  1. Menjalankan Aplikasi:

  1. Akses Aplikasi:

  • Buka browser dan akses http://localhost:3000

Fitur yang tersedia dalam aplikasi ini:

  1. Menampilkan daftar pengguna

  2. Menambah pengguna baru

  3. Mengubah data pengguna

  4. Menghapus pengguna

Struktur Aplikasi:

  • server.js: File utama server Node.js dengan Express

  • public/index.html: Halaman web utama dengan HTML dan JavaScript

  • database.sql: Script SQL untuk membuat database dan tabel

Teknologi yang digunakan:

  • Backend: Node.js dengan Express

  • Database: MySQL

  • Frontend: HTML, CSS, dan JavaScript vanilla

  • API: RESTful API untuk operasi CRUD

Apakah Anda ingin saya menjelaskan bagian tertentu dari kode ini lebih detail?

PreviousBab 8: Package Management dan Build ToolsNextTutorial Sistem Login Register dengan Role Menggunakan Node.js, Express, dan MySQL

Last updated

Was this helpful?