Dapatkan diskon 75% paket hosting + gratis domain + gratis SSL + extra diskon 5% dengan kupon: MFIKRI

Order Sekarang.!

Membuat CRUD dengan Node.js, Bootstrap, dan MySQL

Membuat CRUD dengan Node.js, Bootstrap, dan MySQL

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.

Dapatkan diskon 75% paket hosting dan gratis domain + extra diskon 5% dengan menggunakan kupon: MFIKRI

Order Sekarang.!

 

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.

crud folder

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:

git bash here

Maka akan muncul terminal seperti gambar berikut:

git bash terminal

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:

npm-init

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:

install dependencies

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:

public dan views folder

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:

Struktur Project

 

Step #5. Index.js

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

Index.js

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:

Product View

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:

node index.js

Kemudian buka browser Anda dan ketikan URL berikut:

http://localhost:8000/

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

product list

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

Add New form

Input Product Name dan Price kemudian Klik tombol Save.

Maka akan terlihat hasilnya seperti berikut:

Product Saved

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

Modal Edit Form

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

Maka akan terlihat hasilnya sebagai berikut:

Product Updated

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

Modal Delete

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!

Dapatkan diskon 75% paket hosting dan gratis domain + extra diskon 5% dengan menggunakan kupon: MFIKRI

Order Sekarang.!

Dapatkan diskon 75% paket hosting dan gratis domain + extra diskon 5% dengan menggunakan kupon: MFIKRI

Order Sekarang.!
Download Source Code

Komentar (34)

Afrizal, 12 October 2018 19:34 - Reply

Terimakasih pembelajarannya prof.. ditunggu pelajaran pada posting berikutnya

M Fikri, 20 October 2018 09:04 - Reply

Sama-sama mas Afrizal.

Ridhwan, 16 October 2018 03:57 - Reply

Terima kasih atas tutorialnya, hanya saya baru pertama kali mengenal node.js tetapi disini menggunakan express.js nah yang menjadi pertanyaan node.js dan express.js perbedaanya apa? terima kasih lagi.

M Fikri, 17 October 2018 19:23 - Reply

Mas Ridwan, terima kasih telah bertanya.
Node.js merupakan javascript runtime environment, sama halnya dengan .NET ataupun JRE pada Java.
Sedangkan express.js merupakan node.js framework.
Untuk info lebih lengkap coba baca post sebelumnya tentang "Tutorial Node.js Untuk Pemula"

Bang Ade, 25 October 2018 08:40 - Reply

Terimakasih untuk shared Ilmunya, semoga bertambah berkah dan bermanfaat keilmuanNya

M Fikri, 03 November 2018 05:37 - Reply

Sama-sama mas.

Philip Bagus Kristianto, 29 October 2018 18:59 - Reply

Terimakasih mas Fikri udah mau share.. sangat membantu

M Fikri, 03 November 2018 05:37 - Reply

Sama-sama mas,
Terima kasih telah berkunjung.

Sofwan, 25 November 2018 17:53 - Reply

Masih bingung cara bikin databasenya, mohon kasih tau lebih detail aplikasi apa yang dipake buat bikin databasenya, trima kasih sblumnya pak fikri

M Fikri, 28 November 2018 13:58 - Reply

Bikin databasenya pake mysql mas.
kalo untuk tools untuk memepermudah bikin database cukup banyak, bebas mau pake yang mana.
Bisa pake phpmyadmin, mysql console, sql yog, mysql front, atau yang lainnya.
Setiap programmer biasanya menggunakan tools yang berbeda. oleh sebab itu tools yang digunakan tidak saya cantumkan di tutorial ini.
Saya sendiri menggunakan sql yog dan phpmyadmin.

A.N.D.I, 03 February 2019 06:31 - Reply

terima kasih ilmu gan fikri, saya mau nanya satu lagi gan fikri kalaw kita mau nambah satu field lagi gimn cara tu gan fikri. . terimakasih sebelumnya. .

M Fikri, 07 February 2019 21:40 - Reply

Mas Andi, kalau mau nambah satu field lagi, Anda dapat meng-alter table product dan tambahkan satu field yang diinginkan.
kemudian pada modal Add Product dan Edit Product dalam file "product_view.hbs"
Tambahkan satu textbox lagi.
Setelah itu paggil name dari textbox tersebut saat SAVE dan UPDATE.
dengan cara:
req.body.nama_textbox

Alfianinda, 13 February 2019 21:44 - Reply

Mas fikri, apa ada tutorial membuat aplikasi crud dengan reactjs-express-mysql? karena saya praktekan tutorial ini dan dihubungkan dengan reactjs, tidak jalan.. Terimakasih :)

M Fikri, 31 March 2019 10:18 - Reply

Kalo itu saya belum coba mas.

Fadli, 14 February 2019 00:07 - Reply

Kalau diupload ke hosting bagaimana eksekusi server nya supaya running mas?

M Fikri, 31 March 2019 10:17 - Reply

Harus di host, di hosting yang support node.js mas.
tapi, juga bisa pake VPS. jadi node.js nya di install sendiri di hostingnya.
untuk info lebih lengkap, silahkan hubungi pihak hosting favorit Anda!

Supardi, 28 February 2019 12:04 - Reply

Mas, ko saya jalanin di GIT Bash nya trus ketik npm init, malah muncul bash : npm : command not found ??

M Fikri, 28 February 2019 16:45 - Reply

Mas Supardi, coba ketikan perintah berikut pada terminal:

npm -v

jika muncul error yang sama, berarti installasi npm-nya corrupt. uninstall node.js pada komputer mas supardi, kemudian download lagi node.js dan install kembali.

bargo, 08 March 2019 08:35 - Reply

untuk upload gambar dan menampilkan kembali ke halaman gimana gan?

M Fikri, 08 March 2019 08:49 - Reply

Untuk upload image belum saya buatkan tutorialnya mas.

Mohon bersabar.!

Zeldianto Eka Putra, 08 March 2019 16:45 - Reply

Mantap bg.. kalau databasenyo dari mongoDB baa bg ?

M Fikri, 11 March 2019 10:49 - Reply

Justru lebih mudah Zel, karena mongoDB sangat cocok untuk data format JSON.
tapi mongoDB tidak menggunakan bahasa SQL, melainkan yang umum digunakan adalah Document Store.

Neir Agus, 13 March 2019 22:22 - Reply

bagus gan artikel nya , coba tutorial set up nya pake Visual code gan

M Fikri, 31 March 2019 10:17 - Reply

Terima kasih mas, atas masukannya.

Puguh Sulistyo, 24 May 2019 21:54 - Reply

Thanks mas sudah share ilmu nya, baru pertama kali belajar Node.js, materinya mudah di pahami, sukses selalu mas fikri

Syahid, 30 June 2019 11:30 - Reply

Pak mau tanya, sebelum nya saya sdh coba ekskusi program diatas dan berjalan dgn normal, tapi saya menggunakan node.js dan xampp. Apakah bisa pak program nya dijalankan tanpa xampp??? Jika bisa bagaimana caranya? Terimakasih pak,

M Fikri, 27 July 2019 21:10 - Reply

Mas Syahid, XAMPP itu menggunakan Apache (Webserver untuk PHP), sedangkan node.js memiliki server sendiri.
Apakah bisa dijalankan tanpa XAMPP?
Tentu saja, memang seharusnya dijalankan tanpa XAMPP.

Ryo taopan, 05 July 2019 20:52 - Reply

mas tutorialnya sungguh sangat membantu disini saya ingin bertanya pada product_view.hbs ... tipe hbs itu tipe file apa mas ?

M Fikri, 27 July 2019 21:01 - Reply

Itu ekstensi untuk template engine handlebars mas.

Firman, 09 July 2019 12:45 - Reply

Maaf Bang Fikri, sudah bisa sekarang hehe Terima kasih banyak Bang untuk Tutorialnya

M Fikri, 27 July 2019 21:01 - Reply

Sama-sama mas Firman

Muhammad Naufal Rifai, 30 December 2020 23:21 - Reply

terimakasih untuk tutorialnya saya sedikit modifiaksi. awalnya halaman localhost8000 ada yg salah ternyata ketika saya ubah folder public css dan js nya memakai source kode dari website langsung jalan normal. awalnya saya pakai bootstrap dan js versi terbaru skrg 30 desember 2020.

naufal, 28 August 2021 18:54 - Reply

cuma mau nambahin untuk versi node js yang baru di step ke 5 udah gaperlu lagi pake kutip 1 (') biar ga error

Vladimir Joyner, 09 September 2021 13:58 - Reply

MAKASIH PROF

Leave a Comment