Tutorial Koneksi JavaScript dengan MySQL Menggunakan Node.js

Pendahuluan

• Tujuan: Menghubungkan file JavaScript dengan database MySQL menggunakan Node.js.
• Fokus pada pemula yang ingin belajar JavaScript di sisi server.
• Menggunakan template engine untuk menampilkan data di browser.

Syarat Awal

• Menggunakan XAMPP untuk menjalankan Apache dan MySQL.
• Pastikan Node.js dan npm terinstal dengan perintah:
  • node -v
  • npm -v

Membuat Project

1. Buat Folder
   mkdir tutorialDBNode
2. Inisialisasi npm
   npm init -y
3. Buat File server.js
   touch server.js

Menginstal Dependensi

• Install library yang dibutuhkan: npm i express mysql body-parser ejs

Membuat Server Sederhana

• Import library: const express = require('express'); const mysql = require('mysql'); const bodyParser = require('body-parser');
• Setup Express: const app = express(); const PORT = 3000; app.listen(PORT, () => { console.log(`Server running on port ${PORT}`); });

Koneksi ke Database MySQL

• Buat koneksi: const db = mysql.createConnection({ host: 'localhost', user: 'root', password: '', database: 'school' });
• Cek koneksi: db.connect(err => { if (err) throw err; console.log('Database connected'); });

Membuat Route

• GET Route untuk Menampilkan Data: app.get('/', (req, res) => { db.query('SELECT * FROM users', (err, results) => { if (err) throw err; res.render('index.ejs', { users: results }); }); });
• POST Route untuk Menambah Data: app.post('/add', (req, res) => { const { name, class } = req.body; db.query(`INSERT INTO users (name, class) VALUES ('${name}', '${class}')`, (err, result) => { if (err) throw err; res.redirect('/'); }); });

Template Engine EJS

• Setup EJS sebagai template engine: app.set('view engine', 'ejs'); app.set('views', path.join(__dirname, 'views'));
• Buat file index.ejs untuk menampilkan data: <h1>Data Siswa</h1> <table> <tr> <th>ID</th> <th>Name</th> <th>Class</th> </tr> <% users.forEach(user => { %> <tr> <td><%= user.id %></td> <td><%= user.name %></td> <td><%= user.class %></td> </tr> <% }); %> </table> ```__

Menambahkan Data dengan Form

• Buat form untuk menambah data: <form action="/add" method="POST"> <input type="text" name="name" placeholder="Nama Lengkap"> <input type="text" name="class" placeholder="Kelas"> <button type="submit">Tambah Murid</button> </form>

Kesimpulan

• Proyek ini berhasil menghubungkan JavaScript dengan database MySQL menggunakan Node.js.
• Data dapat ditampilkan dan ditambahkan secara langsung melalui aplikasi.
• Sesi belajar berakhir dengan harapan materi bermanfaat dan bisa diterapkan.