Cara menggunakan mysql connection string nodejs

To access a MySQL database with Node.js, you need a MySQL driver. This tutorial will use the "mysql" module, downloaded from NPM.

To download and install the "mysql" module, open the Command Terminal and execute the following:

C:\Users\Your Name>npm install mysql

Now you have downloaded and installed a mysql database driver.

Node.js can use this module to manipulate the MySQL database:

var mysql = require('mysql');

Create Connection

Start by creating a connection to the database.

Use the username and password from your MySQL database.

demo_db_connection.js

var mysql = require('mysql');

var con = mysql.createConnection({
  host: "localhost",
  user: "yourusername",
  password: "yourpassword"
});

con.connect(function(err) {
  if (err) throw err;
  console.log("Connected!");
});

Save the code above in a file called "demo_db_connection.js" and run the file:

Run "demo_db_connection.js"

C:\Users\Your Name>node demo_db_connection.js

Which will give you this result:

Now you can start querying the database using SQL statements.

Query a Database

Use SQL statements to read from (or write to) a MySQL database. This is also called "to query" the database.

Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

Anda dapat menggunakan instans DB Amazon Relational Database Service (Amazon RDS) untuk menyimpan data yang dikumpulkan dan dimodifikasi oleh aplikasi Anda. Basis data dapat dilampirkan ke lingkungan Anda dan dikelola oleh Elastic Beanstalk, atau dibuat dan dikelola secara eksternal.

Jika Anda menggunakan Amazon RDS untuk pertama kalinya, ke lingkungan uji dengan Konsol Manajemen Elastic Beanstalk dan verifikasi apakah aplikasi Anda dapat terhubung ke sana.

Untuk terhubung ke basis data, ke aplikasi Anda, muat driver dalam kode Anda, dan dengan properti lingkungan yang disediakan oleh Elastic Beanstalk. Kode konfigurasi dan koneksi bervariasi bergantung pada mesin basis data dan kerangka kerja yang Anda gunakan.

Menambahkan instans DB ke lingkungan Anda

Untuk menambahkan instans DB ke lingkungan Anda

1. Buka Konsol Elastic Beanstalk, dan di daftar Wilayah, pilih Wilayah AWS Anda.

2. Di panel navigasi, pilih Lingkungan, dan kemudian pilih nama lingkungan Anda dari daftar.

   Jika Anda memiliki banyak lingkungan, gunakan bilah pencarian untuk memfilter daftar lingkungan.

3. Di panel navigasi, pilih Konfigurasi.

4. Di kategori konfigurasi Basis data, pilih Edit.

5. Pilih mesin DB, dan masukkan nama pengguna dan kata sandi.

6. Pilih Terapkan.

Menambahkan instans DB memakan waktu sekitar 10 menit. Ketika pembaruan lingkungan selesai, nama host instans DB dan informasi koneksi lainnya tersedia untuk aplikasi Anda melalui properti lingkungan berikut:

Nama propertiDeskripsiNilai properti

RDS_HOSTNAME

Nama host instans DB.

PadaKonektivitas & keamanantab di konsol Amazon RDS: Titik akhir.

RDS_PORT

Port tempat instans DB menerima koneksi. Nilai default bervariasi di antara mesin DB.

PadaKonektivitas & keamanantab di konsol Amazon RDS: Pelabuhan.

RDS_DB_NAME

Nama basis data, ebdb.

PadaKonfigurasitab di konsol Amazon RDS: Nama DB.

RDS_USERNAME

Nama pengguna yang Anda konfigurasi untuk basis data Anda.

PadaKonfigurasitab di konsol Amazon RDS: Nama pengguna master.

RDS_PASSWORD

Kata sandi yang Anda konfigurasi untuk basis data Anda.

Tidak tersedia untuk referensi di konsol Amazon RDS.

Untuk informasi selengkapnya tentang cara membuat string koneksi menggunakan node-mysql, lihat npmjs.org/package/mysql.

Pada tutorial ini Anda akan belajar bagaimana membuat full stack CRUD aplikasi menggunakan node.js, express, MySQL, dan React JS.

Tidak hanya itu,

Pada tutorial ini Anda juga akan belajar menggunakan Bulma CSS untuk style pada frontend.

Dengan demikian, aplikasi yang dibangun menjadi lebih user friendly dengan user interface (UI) yang elegan dan responsif.

Ini bukan tutorial untuk pemula,

Jika Anda seorang pemula di node.js express, saya sarankan Anda terlebih dahulu mempelajari “Tutorial Express Js Untuk Pemula”.

Dan jika Anda pemula di React JS, saya sarankan Anda terlebih dahulu mempelajari “Tutorial React Js Untuk Pemula”.

Mari kita mulai.

#1. Install Express, MySQL2, Nodemon, dan Cors

Buat sebuah folder di komputer Anda, di sini saya beri nama “fullstack”.

Jika Anda membuat folder dengan nama yang sama, itu lebih baik.

Anda bebas membuatnya di manapun, baik di C, D, ataupun di Desktop.

Kemudian buka folder “fullstack” tersebut menggunakan code editor, disini saya menggunakan Visual Studio Code.

Saya juga menyarankan Anda untuk menggunakan Visual Studio Code.

Anda dapat mendownload Visual Studio Code pada link berikut, kemudian install di komputer Anda:

https://code.visualstudio.com/

Setelah folder “fullstack” ter-open menggunakan Visual Studio Code, buat sebuah sub folder bernama “backend” di dalam folder “fullstack”.

Selanjutnya, buka terminal pada Visual Studio Code. Kemudian, masuk ke folder “backend” dengan mengetikan perintah berikut pada terminal:

cd backend

Setelah itu, ketikkan perintah berikut pada terminal untuk membuat file “package.json”:

npm init -y

Selanjutnya, install express, mysql2, sequelize dan cors dengan mengetikan perintah berikut pada terminal:

npm install express mysql2 sequelize cors

Selanjutnya, install nodemon secara global dengan mengetikan perintah berikut pada terminal:

npm install -g nodemon

Selanjutnya, tambahkan kode berikut pada file “package.json”:

"type": "module",

Sehingga file “package.json” terlihat menjadi seperti berikut:

{
  "name": "backend",
  "version": "1.0.0",
  "description": "",
  "type": "module",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^4.17.3",
    "mysql2": "^2.3.3",
    "sequelize": "^6.17.0"
  }
}

Hal ini bertujuan agar kita dapat menggunakan ES6 Module Syntax untuk export dan import module.

#2. Buat database

Untuk dapat menggunakan MySQL, Anda perlu menginstall XAMPP, WAMP, MAMP, atau software sejenisnya.

Pada tutorial ini, saya menggunakan XAMPP.

Kemudian buat database baru pada MySQL, Anda dapat menggunakan tools seperti SQLyog, PHPMyAdmin atau sejenisnya.

Disini saya membuat database dengan nama “crud_db”.

Jika Anda membuat database dengan nama yang sama, itu lebih baik.

Untuk  membuat database pada MySQL, dapat dilakukan dengan mengeksekusi query berikut:

CREATE DATABASE crud_db;

Perintah SQL diatas akan membuat sebuah database dengan nama “crud_db”.

#3. Struktur Aplikasi

Agar aplikasi lebih terstruktur rapi, kita akan menerapkan pola MVC (Model-View-Controllers).

Buat folder “config”, “controllers”, “models”, dan “routes” di dalam folder “backend”.

Kemudian buat file “Database.js” di dalam folder “config”, buat file “UserController.js” di dalam folder “controllers”, buat file “UserModel.js” di dalam folder “models”, buat file “UserRoute.js” di dalam folder “routes”, dan buat file “index.js” di dalam folder “backend”.

Perhatikan gambar berikut untuk lebih jelasnya:

#4. Connect ke Database

Buka file “Database.js” yang terdapat pada folder “config”, kemudian ketikan kode berikut:

import {Sequelize} from "sequelize";

const db = new Sequelize('crud_db','root','',{
    host: 'localhost',
    dialect: 'mysql'
});

export default db;

#5. Models

Buka file model “UserModel.js” yang terdapat pada folder “models”, kemudian ketikan kode berikut:

import {Sequelize} from "sequelize";
import db from "../config/Database.js";

const {DataTypes} = Sequelize;

const User = db.define('users',{
    name: DataTypes.STRING,
    email: DataTypes.STRING,
    gender: DataTypes.STRING
},{
    freezeTableName:true
});

export default User;

(async()=>{
    await db.sync();
})();

#6. Controllers

Buka file controller “UserController.js” yang terdapat pada folder “controllers”, kemudian ketikan kode berikut:

import User from "../models/UserModel.js";

export const getUsers = async(req, res) =>{
    try {
        const response = await User.findAll();
        res.status(200).json(response);
    } catch (error) {
        console.log(error.message);
    }
}

export const getUserById = async(req, res) =>{
    try {
        const response = await User.findOne({
            where:{
                id: req.params.id
            }
        });
        res.status(200).json(response);
    } catch (error) {
        console.log(error.message);
    }
}

export const createUser = async(req, res) =>{
    try {
        await User.create(req.body);
        res.status(201).json({msg: "User Created"});
    } catch (error) {
        console.log(error.message);
    }
}

export const updateUser = async(req, res) =>{
    try {
        await User.update(req.body,{
            where:{
                id: req.params.id
            }
        });
        res.status(200).json({msg: "User Updated"});
    } catch (error) {
        console.log(error.message);
    }
}

export const deleteUser = async(req, res) =>{
    try {
        await User.destroy({
            where:{
                id: req.params.id
            }
        });
        res.status(200).json({msg: "User Deleted"});
    } catch (error) {
        console.log(error.message);
    }
}

#7. Routes

Buka file “UserRoute.js” yang terdapat pada folder “routes”, kemudian ketikan kode berikut:

npm init -y

#8. Entry Point

Buka file “index.js” yang terdapat pada folder “backend”, kemudian ketikan kode berikut:

npm init -y

Untuk memastikan aplikasi berjalan dengan baik, jalankan aplikasi dengan mengetikan perintah berikut pada terminal:

npm init -y

Jika berjalan dengan baik, maka akan terlihat seperti gambar berikut:

Sampai disini Anda telah berhasil membuat “backend”.

Untuk memastikan backend berjalan dengan baik, Anda dapat menggunakan POSTMAN atau extensions REST Client pada VS Code untuk melakukan pengujian.

#9. Front-End

Untuk front-end, saya akan menggunakan React JS.

Jika Anda belum familiar dengan React JS, saya sarankan untuk mempelajari “Tutorial React JS Untuk Pemula” terlebih dahulu.

Untuk membuat project react js, dapat dilakukan dengan banyak cara. Akan tetapi cara yang paling mudah adalah “create react app”.

Buka new terminal dan buat project react baru dengan mengetikan perintah berikut pada terminal:

npm init -y

Dan pastikan Anda berada di folder “fullstack”, seperti gambar berikut:

Jika instalasi selesai, maka akan terdapat folder “frontend” di dalam folder “fullstack”.

Sehingga di dalam folder “fullstack” terdapat dua folder yaitu: “backend” dan “frontend” seperti gambar berikut:

Folder “backend” merupakan folder aplikasi yang dibangun sebelumnya menggunakan node.js express, sedangkan “frontend” merupakan folder aplikasi yang dibuat menggunakan React JS.

Selanjutnya, masuk kedalam folder “frontend” dengan mengetikan perintah berikut pada terminal:

npm init -y

Setelah itu, install react-router-dom, axios, dan bulma dengan mengetikan perintah berikut pada terminal:

npm init -y

Setelah instalasi selesai, dan untuk memastikan semuanya berjalan dengan baik, ketikan perintah berikut untuk menjalankan project:

npm init -y

Jika berjalan dengan baik, maka akan tampil seperti gambar berikut:

#10. Components

Buat sebuah folder bernama “components” di dalam folder “frontend/src”.

Kemudian, buat file components “UserList.js”, “AddUser.js”, dan “EditUser.js” pada folder “frontend/src/components”.

Seperti gambar berikut:

Kemudian buka file “UserList.js”, kemudian ketikan kode berikut:

npm init -y

Selanjutnya, buka file “AddUser.js”, kemudian ketikan kode berikut:

npm init -y

Selanjutnya, buka file “EditUser.js”, kemudian ketikan kode berikut:

npm init -y

#11. App.js

Buka file “App.js” pada folder “frontend/src”, kemudian ubah menjadi seperti berikut:

npm install express mysql2 sequelize cors

#12. index.js

Buka file “index.js” pada folder “frontend/src”, kemudian ubah menjadi seperti berikut:

npm install express mysql2 sequelize cors

#13. Testing

#READ

Kembali ke browser dan kunjungi URL berikut:

npm install express mysql2 sequelize cors

Jika berjalan dengan baik, maka akan terlihat seperti gambar berikut:

#CREATE

Klik tombol “Add New”, maka akan tampil form seperti berikut:

Masukkan “Name, Email” dan “Gender”, kemudian klik tombol “SAVE”.

Jika insert berhasil, maka akan terlihat penambahan data pada list user seperti gambar berikut:

#UPDATE

Untuk mengupdate data klik salah satu dari tombol “Edit”, maka akan tampil form seperti berikut:

Ubah “Name, Email” atau “Gender”, kemudian klik tombol “UPDATE”.

Jika update berhasil, maka akan terlihat perubahan data pada list user seperti gambar berikut:

#DELETE 

Untuk menghapus data klik salah satu dari tombol “Delete”.

Jika delete berhasil, maka data akan hilang dari list user.

Kesimpulan:

Pembahasan kali ini adalah bagaimana membuat full-stack aplikasi dengan backend node.js express dan frontend menggunakan React JS.

Dengan demikian, Anda telah memiliki gambaran bagaimana membuat aplikasi web modern yang memisahkan antara backend dan frontend.