[Nodejs + Express] Make CRUD Operation With Mysql

Sebelumnya saya pernah posting simple example how to use nodejs dengan express untuk membuat form sederhana di https://sabitlabscode.wordpress.com/2013/07/03/nodejs-express-make-simple-form/. Tentunya tidaklah cukup hanya membuat simple form, paling tidak kita harus tahu bagaimana cara menghubungkan nodejs itu sendiri ke database. Kali ini saya akan memaparkan bagaimana membuat operasi CRUD (Create, Read, Update, Delete) pada nodejs dengan sasaran databasenya Mysql. Pertama-tama buatlah sebuah aplikasi baru dengan nodejs. Lalu hal yang kita butuhkan adalah sesuatu untuk menghubungkan nodejs dengan mysql database. Untuk itu kita perlu menginstallnya dengan cara mengetikkan code berikut pada command anda :

npm install mysql

Setelah itu definisikan module mysql pada aplikasi anda, pada app.js pastikan code konfigurasi anda seperti berikut :

 var express = require('express')
  , routes = require('./routes')
  , user = require('./routes/user')
  , http = require('http')
  , path = require('path')
  , mysql = require('mysql');

var app = express();
var connection = mysql.createConnection({
  host     : 'your host',
  user     : 'your user',
  password : 'your password',
  database : 'database name'
});

Saya asumsikan kita memiliki sebuah database dengan nama tabel “author” dimana tabel ini terdiri dari 3 buah column yaitu : id, first_name, dan last_name. Kita ingin membuat fungsi-fungsi yang dapat melakukan hal-hal berikut :

– melihat semua data pada tabel author

– melihat data detail pada tabel author

– menghapus data pada tabel author

– memperbaharui data pada tabel author

– membuat data baru

Pertama-tama, kita definisikan terlebih dahulu fungsi-fungsi di atas.

1. View All Data

Pada app.js, masukkan code berikut :

 //show all data from author table
app.get('/author', function(req, res) {
  sql='SELECT * FROM author';
  // execution sql and save result to "rows"
  connection.query(sql, function(e, rows, f) {
    if (!e) {
      //render "author" page
      //and send "rows" as "data" 
      res.render('author', {
        data: rows
      });
    }
  });
});

Kemudian pada folder “views”, buatlah file “author.jade” yang akan menampilkan user interfacenya. Masukkan code berikut pada file “author.jade” :

 extends layout

block content
  h1= title
  p Welcome to Author
  a(href="/author/new")!= "Add New Author"
  #Daftar Author
   table
    thead
     tr 
      th Firstname
      th Lastname
    tbody
    each row in data
        tr 
         td= row.first_name 
         td= row.last_name
         td
            a(href="/author/view/"+row.id)!= "View"

2. View Detail Data

Untuk menampilkan data secara detail, tambahkan kode berikut pada “app.js” :

 //view detail data
app.get('/author/view/:id', function(req, res) {
  //get parameter :id and save it in "tid"
  var tid=req.params.id;
  sql='SELECT * FROM author WHERE id='+connection.escape(tid);
  // execution query and save result to "rows"
  connection.query(sql, function(e, rows, f) {
    //check if there is error or data not found
    if (!e && (rows.length === 1)) 
    {
      //get first data and save it to "row"
      var row = rows[0];  
      //render "author_view" and send some value
      res.render('author_view', {
        title: 'New Author',
        data : row
      });
    } 
    else {
      //write error when error
        console.log(e);
    }
  });
});

Setelah itu buatlah “author_view.jade” pada folder “views” dan masukkan kode berikut :

 extends layout

block content
    h1= title
    div.newsiswa
        div
            div= data.first_name
            div= data.last_name
        a(href="/author/update/"+data.id)!= "[Update]"
        label   
        a(href="/author/delete/"+data.id)!= "[Delete]"

3. Insert New Data
Masukkan kode berikut pada app.js :

 //we have 2 request in author/new
//"get" will run when we request author/new
//and "post" will run when we do submit data
app.get('/author/new', function(req, res) {
      //render "author_new"
      res.render('author_new', {
        title: 'New Author'
      });
});

app.post('/author/new', function(req, res) {
  //get value that have been submitted
  //and save it in variable
  var fname = req.param('firstname');
  var lname = req.param('lastname');
  sql='INSERT INTO author(first_name,last_name) VALUES("'+fname+'","'+lname+'")';
  //do query
  connection.query(sql, function(e, rows, f) {
    if (!e) {
      res.redirect('/author')
    }
  });
});

dan untuk tampilannya yaitu “author_new.jade” masukkan code berikut :

 extends layout

block content
    h1= title
    div.newsiswa
        form( method="post")
            div
                div
                    span.label Firstname :
                    input(type="text", name="firstname")
                div
                    span.label Lastname :
                    input(type="text", name="lastname")
                div#editEmployeeSubmit
                    input(type="submit", value="Save")
        a(href="/author")!= "Back to Author List"

4.Updata Data
Masukkan code berikut pada app.js

 //same with author/new
//author update have 2 request
app.get('/author/update/:id', function(req, res) {
  //get parameter :id and save it to "tid"
  var tid=req.params.id;
  sql='SELECT * FROM author WHERE id='+connection.escape(tid);
  //show data to the form
  connection.query(sql, function(e, rows, f) {
    if (!e && (rows.length === 1)) 
    {
      var row = rows[0];  
      res.render('author_update', {
        title: 'Update Author'+row.first_name+' '+row.last_name,
        data : row
      });
    } 
    else {
        console.log(e);
    }
  });
});

app.post('/author/update/:id', function(req, res) {
  //get parameter :id
  var tid=req.params.id;
  //get data that have been submitted
  var fname = req.param('firstname');
  var lname = req.param('lastname');
  sql='UPDATE author SET first_name="'+fname+'",last_name="'+lname+'" WHERE id='+tid;
  //do query
  connection.query(sql, function(e, rows, f) {
    if (!e) {
      res.redirect('/author')
    }
  });
});

Lalu masukkan kode berikut pada “author_update.jade” yang telah anda buat pada folder “views”:

 extends layout

block content
    h1= title
    div.newsiswa
        form( method="post")
            div
                div
                    span.label Firstname :
                    input(type="text", name="firstname", value=data.first_name)
                div
                    span.label Lastname :
                    input(type="text", name="lastname", value=data.last_name)
                div#editEmployeeSubmit
                    input(type="submit", value="Save")
        a(href="/author")!= "Back to Author List"

5. Delete Data

Untuk delete data sendiri tidak akan memanggil tampilan suatu form, dia hanya akan mengeksekusi dan setelah itu langsung redirect ke halaman “author”, untuk itu masukkan kode seperti berikut :

 //delete data
app.get('/author/delete/:id', function(req, res) {
  // get parameter :id
  var tid=req.params.id;
  sql='DELETE FROM author WHERE id='+connection.escape(tid);
  //do query
  connection.query(sql, function(e, rows, f) {
    if (!e) 
    {
      //redirect to "/author"
      res.redirect('/author')
    } 
    else {
        console.log(e);
    }
  });
});

Itulah dia cara melakukan operasi crud pada suatu tabel dengan menggunakan msyql database.

Selesai… Hope it help.. Happy coding..

4 Responses to [Nodejs + Express] Make CRUD Operation With Mysql

  1. David Cesar says:

    gan kenapa pas ane ngeload data lebih dari dua attribute selalu error ya??khan dicontohnya agan cm 2 attribute tuwh di table author nah ane punya 5 atrribute tp pas mau ngelod isi dari tabel dengan 5 attribute selalu error knp ya gan ?????

  2. pfriska says:

    gan. kalo buat form login gimana gan? saya masih baru belajar node js, express sama jade.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: