Cara menggunakan mysql implementation

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

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:

	
	
  


  

    
Product List
		Add New
    
         {{#each results}}
        
        {{/each}}
      

      

        

          
Product ID
          
Product Name
          
Price
          
Action
        
      
      

          
{{ product_id }}
          
{{ product_name }}
          
{{ product_price }}
          

            Edit
            Delete
          
        
    
  

	
	  

        

         

           

             

               
Add New Product
               
                 ×
               
             
             

               

                   
               

               

                   
               
             
             

               Close
               Save
             
           
         
        
	 

	 
   

       

        

          

            

              
Edit Product
              
                ×
              
            
            

              

                  
              

              

                  
              
            
            

              
              Close
              Update
            
          
        
       
  

	 
 	  

 	     

 	        

 	           

 	               

									 	
Delete Product
 	                  ×
 	               
 	               

												 Anda yakin mau menghapus data ini?
 	               
 	               

									 		
 	                   	Close
 	                  	Delete
 	               
 	      			
 	        
 	     
 	 

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.

Langkah

Langkah kerja MySQL?

Bagaimana langkah

Langkah awal membuat database MySQL?