[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..

Advertisements

[Nodejs + Express] Make Simple Form

Berikut adalah contoh penerapan nodejs dengan menggunakan express untuk membuat simple form post dan get. Saya asumsikan anda semua sudah menginstall nodejs pada server anda. Pertama-tama untuk mengintegrasikan dengan express, install terlebih dahulu express pada server anda dengan cara memasukkan code berikut pada command  anda:

 
npm install express -g

Kemudian change your directory ke directory project anda. Lalu masukkan command berikut :

 
express -c stylus
npm install -d

Command di atas akan membuat sebuah aplikasi nodejs baru pada direktori anda. Bisa anda lihat pada direktori project anda telah ada beberapa new file and folder yang di create oleh command tadi. Perlu anda ketahui, express secara default akan menggunakan jade engine template. Jade sendiri adalah salah satu template engine yang berguna untuk mempermudah penulisan form html , for see more about jade you can see this link http://jade-lang.com/.

After that, di dalam directory anda bukalah file “app.js”. File ini adalah file yang menjadi induk dari aplikasi nodejs kita, jika anda familiar dengan PHP, app.js dapat diibaratkan sebagai “index.php”. Kemudian tambahkan code berikut tepat di atas code “http.createServer()” :

 
app.get('/formex', function(req, res) {
    res.render('form_ex', {  //akan memanggil form "form_ex" yang ada pada folder "view"
        title: 'This Is Sample Form'
    });
});

app.post('/formex', function(req, res) {
    res.render('form_result', { // akan memanggil form "form_result" yang ada pada folder "view"
        title: 'This Is Sample Form Result',
        textinsert : req.param('title')
    });
});

Kode diatas digunakan untuk menentukan apa yang harus dilakukan ketika pengguna me-request url tertentu. Pada kasus di atas adalah url “formex” baik ketika pertama kali mengakses atau saat terjadi POST request. Dapat anda lihat masing-masing request akan memanggil form tertentu dan melemparkan beberapa nilai yang dapat digunakan pada form.

Setelah kita membuat code diatas,  we need to write view code to show interface to user. Pada folder “view” buatlah sebuah file “form_ex.jade” dan masukkan code berikut :

 extends layout

block content
    h1= title
    div
        form( method="post")
            div
                div
                    span.label Enter Some Text Here :
                    input(type="text", name="title")
                div#editEmployeeSubmit
                    input(type="submit", value="Save")

kemudian buat juga file “form_result.jade” dan masukkan kode berikut :

 extends layout

block content
    h1= title
    div
    h2=textinsert

Selesai..

Sekarang untuk menjalankan aplikasi anda, pada command anda jalankan aplikasi anda dengan memasukkan command :

 
node app.js

Akan ada pesan pada port berapa aplikasi anda dijalankan. Secara default akan terdapat pada port 3000. Cobalah me-request url “formex” untuk melihat hasilnya, masukkan url berikut pada port anda “http://localhost:3000/formex”.

Selesai.. Selamat mencoba..

Happy coding..

%d bloggers like this: