Dalam tutorial kali ini, saya akan sharing bagaimana membuat aplikasi CRUD (Create Read Update Delete) menggunakan node.js dan mysql.

Tidak hanya itu, saya juga akan sharing bagaimana menggunakan modal bootstrap untuk form input dan update record.

Sehingga aplikasi CRUD yang akan dibuat menjadi lebih interaktif, responsive, dan user friendly.

Mari kita mulai.

 

Step #1. Pendahuluan

Ini penting!

Dalam tutorial ini, Anda akan belajar bagaimana membuat operasi CRUD dengan dengan node.js dan mysql.

Jika Anda belum kenal dengan node.js sebelumnya, saya sarankan untuk membaca post sebelumnya: Tutorial Node.js Untuk Pemula.

Dalam tutorial kali ini saya akan menggunakan Bootstrap dan Jquery.

Jika Anda belum memiliki bootstrap dan jquery, silahkan download terlebih dahulu di official websitenya getbootstrap.com dan jquery.com.

 

Step #2. Buat Database dan Table

Buat sebuah database baru, disini saya membuat database dengan nama crud_db.

Jika Anda membuat dengan nama yang sama itu lebih baik.

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

CREATE DATABASE crud_db;

Perintah SQL diatas akan membuat sebuah database dengan nama crud_db.

Selanjutnya, buat sebuah table di dalam database crud_db.

Disini saya membuat sebuah table dengan nama product.

Jika Anda membuat dengan nama yang sama itu lebih baik. 

Untuk membuat table product, dapat dilakukan dengan mengeksekusi perintah SQL berikut:

CREATE TABLE product(
product_id INT(11) PRIMARY KEY AUTO_INCREMENT,
product_name VARCHAR(200),
product_price INT(11) 
)ENGINE=INNODB;

Perintah SQL diatas akan membuat sebuah table dengan product, dengan field product_id, product_name, dan product_price.

 

Step #3. Install Dependencies

Sebelum menginstall dependencies, silahkan buat sebuah folder, disini saya membuat sebuah folder dengan nama crud.

Dimana folder crud merupakan folder project kita pada tutorial kali ini.

Mari kita lanjut, 

Pada tutorial kali ini, kita membutuhkan 4 dependencies yaitu:

1. Express (node.js framework)

2. MySQL (driver mysql untuk node.js)

3. Body-parser (middleware untuk menghandle post body request)

4. Handlebars (template engine)

Untuk menginstall dependencies pada node.js dapat dilakukan dengan mudah menggunakan NPM (Node Package Manager).

Anda dapat menjalankan NPM pada Terminal atau Command Prompt.

Akan tetapi, pada tutorial kali ini saya tidak menggunakan Command Prompt, melainkan menggunakan Git Bash Terminal.

Saya sangat merekomendasikan Anda juga menggunakan Git Bash.

Anda dapat mendownload Git Bash pada url berikut:

https://git-scm.com/downloads

Silahkan download sesuai dengan platform Anda, kemudian install di komputer Anda.

Jika Anda telah menginstall Git Bash, silahkan buka folder crud yang telah dibuat sebelumnya.

Kemudian klik-kanan dan pilih Git Bash Here, seperti gambar berikut:

Maka akan muncul terminal seperti gambar berikut:

Pada terminal diatas, anda dapat menginstall semua dependencies yang Anda perlukan untuk project Anda.

Sebelum menginstall dependencies, kita perlu membuat package.json.

Untuk membuat package.json, anda dapat menjalankan perintah berikut pada terminal.

npm init

Seperti gambar berikut:

Perintah diatas akan membuat sebuah file bernama package.json secara otomatis pada project Anda.

Selanjutnya,

Install semua dependencies yang dibutuhkan dengan mengetikkan perintah berikut pada terminal:

npm install --save express mysql body-parser hbs

Seperti gambar berikut:

Perintah diatas akan menginstall semua dependencies yang kita butuhkan yaitu: express, mysql, body-parser, dan handlebars.

Jika di buka file package.json, maka akan terlihat seperti berikut:

{
  "name": "crud",
  "version": "1.0.0",
  "description": "Crud Node.js",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "M Fikri",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.18.3",
    "express": "^4.16.3",
    "hbs": "^4.0.1",
    "mysql": "^2.16.0"
  }
}

 

Step #4. Struktur Project

Buka folder crud menggunakan text editor, disini saya menggunakan ATOM sebagai text editor.

Anda dapat menggunakan Sublime Text, Intellij IDEA, ataupun editor lainnya.

Kemudian buat folder baru didalam folder crud. Disni saya membuat dua folder yaitu folder public dan views.

Seperti gambar berikut:

Selanjutnya buat folder css dan folder js didalam folder public.

Kemudian copy file bootstrap.css yang telah di download sebelumnya kedalam folder public/css/.

Dan copy file bootstrap.js dan jquery pada folder public/js/.

Sehingga terlihat struktur project kita seperti gambar berikut:

 

Step #5. Index.js

Buat sebuah file dengan nama index.js. Seperti gambar berikut:

Kemudian open index.js dan ketikan kode berikut:

//use path module
const path = require('path');
//use express module
const express = require('express');
//use hbs view engine
const hbs = require('hbs');
//use bodyParser middleware
const bodyParser = require('body-parser');
//use mysql database
const mysql = require('mysql');
const app = express();

//konfigurasi koneksi
const conn = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: '',
  database: 'crud_db'
});

//connect ke database
conn.connect((err) =>{
  if(err) throw err;
  console.log('Mysql Connected...');
});

//set views file
app.set('views',path.join(__dirname,'views'));
//set view engine
app.set('view engine', 'hbs');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
//set folder public sebagai static folder untuk static file
app.use('/assets',express.static(__dirname + '/public'));

//route untuk homepage
app.get('/',(req, res) => {
  let sql = "SELECT * FROM product";
  let query = conn.query(sql, (err, results) => {
    if(err) throw err;
    res.render('product_view',{
      results: results
    });
  });
});

//route untuk insert data
app.post('/save',(req, res) => {
  let data = {product_name: req.body.product_name, product_price: req.body.product_price};
  let sql = "INSERT INTO product SET ?";
  let query = conn.query(sql, data,(err, results) => {
    if(err) throw err;
    res.redirect('/');
  });
});

//route untuk update data
app.post('/update',(req, res) => {
  let sql = "UPDATE product SET product_name='"+req.body.product_name+"', product_price='"+req.body.product_price+"' WHERE product_id="+req.body.id;
  let query = conn.query(sql, (err, results) => {
    if(err) throw err;
    res.redirect('/');
  });
});

//route untuk delete data
app.post('/delete',(req, res) => {
  let sql = "DELETE FROM product WHERE product_id="+req.body.product_id+"";
  let query = conn.query(sql, (err, results) => {
    if(err) throw err;
      res.redirect('/');
  });
});

//server listening
app.listen(8000, () => {
  console.log('Server is running at port 8000');
});

 

Step #6. View

Buat sebuah file dengan nama product_view.hbs didalam folder views. Seperti gambar berikut:

Kemudian open product_view.hbs dan ketikan kode berikut:

<html lang="en">
<head>
        <meta charset="utf-8">
        <title>CRUD Node.js and Mysql</title>
  <link href="/assets/css/bootstrap.css" rel="stylesheet" type="text/css"/>
</head>
<body>
  <div class="container">
    <h2>Product List</h2>
                <button class="btn btn-success" data-toggle="modal" data-target="#myModalAdd">Add New</button>
    <table class="table table-striped" id="mytable">
      <thead>
        <tr>
          <th>Product ID</th>
          <th>Product Name</th>
          <th>Price</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
         {{#each results}}
        <tr>
          <td>{{ product_id }}</td>
          <td>{{ product_name }}</td>
          <td>{{ product_price }}</td>
          <td>
            <a href="javascript:void(0);" class="btn btn-sm btn-info edit" data-id="{{ product_id }}" data-product_name="{{ product_name }}" data-product_price="{{ product_price }}">Edit</a>
            <a href="javascript:void(0);" class="btn btn-sm btn-danger delete" data-id="{{ product_id }}">Delete</a>
          </td>
        </tr>
        {{/each}}
      </tbody>
    </table>
  </div>

        <!-- Modal Add Produk-->
          <form action="/save" method="post">
        <div class="modal fade" id="myModalAdd" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
         <div class="modal-dialog" role="document">
           <div class="modal-content">
             <div class="modal-header">
               <h5 class="modal-title" id="exampleModalLabel">Add New Product</h5>
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                 <span aria-hidden="true">&times;</span>
               </button>
             </div>
             <div class="modal-body">
               <div class="form-group">
                   <input type="text" name="product_name" class="form-control" placeholder="Product Name" required>
               </div>

               <div class="form-group">
                   <input type="text" name="product_price" class="form-control" placeholder="Price" required>
               </div>
             </div>
             <div class="modal-footer">
               <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
               <button type="submit" class="btn btn-primary">Save</button>
             </div>
           </div>
         </div>
        </div>
         </form>

         <!-- Modal Update Produk-->
   <form action="/update" method="post">
       <div class="modal fade" id="EditModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Edit Product</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <div class="form-group">
                  <input type="text" name="product_name" class="form-control product_name" placeholder="Product Name" required>
              </div>

              <div class="form-group">
                  <input type="text" name="product_price" class="form-control price" placeholder="Price" required>
              </div>
            </div>
            <div class="modal-footer">
              <input type="hidden" name="id" class="product_id">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="submit" class="btn btn-primary">Update</button>
            </div>
          </div>
        </div>
       </div>
  </form>

         <!-- Modal Delete Produk-->
          <form id="add-row-form" action="/delete" method="post">
             <div class="modal fade" id="DeleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                   <div class="modal-content">
                       <div class="modal-header">
                                                                                <h5 class="modal-title" id="myModalLabel">Delete Product</h5>
                          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                       </div>
                       <div class="modal-body">
                                                                                                 <strong>Anda yakin mau menghapus data ini?</strong>
                       </div>
                       <div class="modal-footer">
                                                                                        <input type="hidden" name="product_id" class="form-control product_id2" required>
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                <button type="submit" class="btn btn-success">Delete</button>
                       </div>
                                </div>
                </div>
             </div>
         </form>

<script src="/assets/js/jquery-3.3.1.js"></script>
<script src="/assets/js/bootstrap.js"></script>
<script>
    $(document).ready(function(){
                        //tampilkan data ke modal untuk edit
      $('#mytable').on('click','.edit',function(){
        var product_id = $(this).data('id');
        var product_name = $(this).data('product_name');
        var product_price = $(this).data('product_price');
        $('#EditModal').modal('show');
        $('.product_name').val(product_name);
        $('.price').val(product_price);
        $('.product_id').val(product_id);
      });
                        //tampilkan modal hapus record
                        $('#mytable').on('click','.delete',function(){
        var product_id = $(this).data('id');
        $('#DeleteModal').modal('show');
        $('.product_id2').val(product_id);
      });

    });
</script>
</body>
</html>

 

Step #7. Testing

Uji coba aplikasi untuk memastikan aplikasi crud yang kita buat berjalan dengan baik.

Untuk menjalankan aplikasi, ketikan perintah berikut pada terminal.

node index

Maka akan tampil di console pesan “Server is running at port 8000” dan “Mysql Connected”.

Seperti gambar berikut:

Kemudian buka browser Anda dan ketikan URL berikut:

http://localhost:8000/

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

Klik tombol Add New, maka akan tampil modal Add New Product seperti berikut:

Input Product Name dan Price kemudian Klik tombol Save.

Maka akan terlihat hasilnya seperti berikut:

Klik tombol Edit untuk mengedit record, maka akan tampil modal Edit Product seperti berikut:

Edit data yang ingin di edit, kemudian klik tombol Update.

Maka akan terlihat hasilnya sebagai berikut:

Untuk menghapus Record, klik tombol Delete, maka akan muncul modal konfirmasi seperti berikut:

Kemudian klik tombol Delete untuk menghapus record.

Selesai.

Related: Tutorial Lengkap Express JS Untuk Pemula

Kesimpulan:

Pembahasan kali ini adalah tentang bagaimana membuat aplikasi CRUD (Create Read Update Delete) menggunakan node.js dan mysql.

Dalam tutorial ini, anda telah belajar bagaimana membuat aplikasi CRUD dengan node.js dan mysql.

Tidak hanya itu, Anda juga telah belajar bagaimana menggunakan modal bootstrap untuk form input dan update record.

Jadi, tunggu apa lagi. Let’s coding!

Download Source Code