Tutorial Node.js, Express dan MySQL #5 : Edit dan Update Data


Fika Ridaul Maulayya
I'm a Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share everything i know with Articles, Screencasts and E-Books at SantriKoding.com

Halo teman-teman semuanya, di artikel sebelumnya kita sudah belajar bagaimana cara memasukkan data ke dalam database menggunakan Express, maka sekarang kita akan belajar bagaimana cara menampilkan data yang akan di edit kemudian mengupdate-nya.

Langkah 1 - Membuat Route Post Edit dan Update

Pertama, kita akan menambahkan 2 route baru, yaitu route untuk proses menampilkan data yang akan di edit di dalam form, kemudian route untuk proses update data ke dalam database.

Silahkan buka file routes/posts.js, kemudian ubah semua kode-nya menjadi seperti berikut ini :

var express = require('express');
var router = express.Router();

//import database
var connection = require('../library/database');

/**
 * INDEX POSTS
 */
router.get('/', function (req, res, next) {
    //query
    connection.query('SELECT * FROM posts ORDER BY id desc', function (err, rows) {
        if (err) {
            req.flash('error', err);
            res.render('posts', {
                data: ''
            });
        } else {
            //render ke view posts index
            res.render('posts/index', {
                data: rows // <-- data posts
            });
        }
    });
});

/**
 * CREATE POST
 */
router.get('/create', function (req, res, next) {
    res.render('posts/create', {
        title: '',
        content: ''
    })
})

/**
 * STORE POST
 */
router.post('/store', function (req, res, next) {
    

    let title   = req.body.title;
    let content = req.body.content;
    let errors  = false;

    if(title.length === 0) {
        errors = true;

        // set flash message
        req.flash('error', "Silahkan Masukkan Title");
        // render to add.ejs with flash message
        res.render('posts/create', {
            title: title,
            content: content
        })
    }

    if(content.length === 0) {
        errors = true;

        // set flash message
        req.flash('error', "Silahkan Masukkan Konten");
        // render to add.ejs with flash message
        res.render('posts/create', {
            title: title,
            content: content
        })
    }

    // if no error
    if(!errors) {

        let formData = {
            title: title,
            content: content
        }
        
        // insert query
        connection.query('INSERT INTO posts SET ?', formData, function(err, result) {
            //if(err) throw err
            if (err) {
                req.flash('error', err)
                 
                // render to add.ejs
                res.render('posts/create', {
                    title: formData.title,
                    content: formData.content                    
                })
            } else {                
                req.flash('success', 'Data Berhasil Disimpan!');
                res.redirect('/posts');
            }
        })
    }

})

/**
 * EDIT POST
 */
router.get('/edit/(:id)', function(req, res, next) {

    let id = req.params.id;
   
    connection.query('SELECT * FROM posts WHERE id = ' + id, function(err, rows, fields) {
        if(err) throw err
         
        // if user not found
        if (rows.length <= 0) {
            req.flash('error', 'Data Post Dengan ID ' + id + " Tidak Ditemukan")
            res.redirect('/posts')
        }
        // if book found
        else {
            // render to edit.ejs
            res.render('posts/edit', {
                id:      rows[0].id,
                title:   rows[0].title,
                content: rows[0].content
            })
        }
    })
})

/**
 * UPDATE POST
 */
router.post('/update/:id', function(req, res, next) {

    let id      = req.params.id;
    let title   = req.body.title;
    let content = req.body.content;
    let errors  = false;

    if(title.length === 0) {
        errors = true;

        // set flash message
        req.flash('error', "Silahkan Masukkan Title");
        // render to edit.ejs with flash message
        res.render('posts/edit', {
            id:         req.params.id,
            title:      title,
            content:    content
        })
    }

    if(content.length === 0) {
        errors = true;

        // set flash message
        req.flash('error', "Silahkan Masukkan Konten");
        // render to edit.ejs with flash message
        res.render('posts/edit', {
            id:         req.params.id,
            title:      title,
            content:    content
        })
    }

    // if no error
    if( !errors ) {   
 
        let formData = {
            title: title,
            content: content
        }

        // update query
        connection.query('UPDATE posts SET ? WHERE id = ' + id, formData, function(err, result) {
            //if(err) throw err
            if (err) {
                // set flash message
                req.flash('error', err)
                // render to edit.ejs
                res.render('posts/edit', {
                    id:     req.params.id,
                    name:   formData.name,
                    author: formData.author
                })
            } else {
                req.flash('success', 'Data Berhasil Diupdate!');
                res.redirect('/posts');
            }
        })
    }
})

module.exports = router;

Di atas, kita menambahkan 2 route baru, yaitu : edit dan update.

edit

Route edit digunakan untuk menampilkan data yang diambil dari database ke dalam sebuah form, route ini menggunakan method GET.

let id = req.params.id; // <-- get ID from URL browser
   
connection.query('SELECT * FROM posts WHERE id = ' + id, function(err, rows, fields) {

	// ...

Di atas, di dalam route edit, kita melakukan sebuah query ke dalam table posts berdasarkan ID yang di dapatkan dari parameter di URL. Setelah data di dapatkan, maka akan di parsing ke dalam view post edit.

// render to edit.ejs
res.render('posts/edit', {
  id:      rows[0].id,
  title:   rows[0].title,
  content: rows[0].content
})

update

Route update digunakan untuk melakukan proses update data yang dikirim dari form edit. Untuk kode-nya memang hampir sama dengan route store, yang membedakan hanyalah pada query ke databasenya saja.

// update query
connection.query('UPDATE posts SET ? WHERE id = ' + id, formData, function(err, result) {

	// ...

Kode di atas merupakan query yang digunakan untuk melakukan proses update data post berdasarkan ID.

Langkah 2 - Membuat View Post Edit

Sekarang, kita lanjutkan untuk membuat view untuk menampilkan data yang akan di edit. Silahkan buat file baru dengan nama edit.ejs di dalam folder views/posts, kemudian masukkan kode berikut ini :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Edit Blogs - SantriKoding.com</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
</head>

<body style="background: lightgray">

    <div class="container mt-5">
        <div class="row">
            <div class="col-md-12">
                <% if (messages.error) { %>
                    <div class="alert alert-danger" role="alert"><%- messages.error %></div>
                <% } %>
                <div class="card border-0 shadow rounded">
                    <div class="card-body">
                        <form action="/posts/update/<%= id %>" method="post">
                            <div class="form-group">
                                <label>Title</label>
                                <input type="text" class="form-control" name="title" value="<%= title %>" placeholder="Masukkan Title Post">
                            </div>
                            <div class="form-group">
                                <label>Konten</label>
                                <textarea class="form-control" name="content" rows="4" placeholder="Masukkan Konten Post"><%= content %></textarea>
                            </div>
                            <button type="submit" class="btn btn-primary">UPDATE</button>
                            <button type="reset" class="btn btn-warning">RESET</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    </script>
</body>
</html>

Di atas, bisa teman-teman perhatikan, untuk form action kita arahkan ke dalam route update dengan parameter ID post.

<form action="/posts/update/<%= id %>" method="post">

Sekatang, kita coba untuk menjalankan project-nya dengan cara klik button EDIT, jika berhasil maka kurang lebih tampilannya seperti berikut ini :

Silahkan ubah data-nya dan klik UPDATE, jika berhasil maka kurang lebih seperti berikut ini :

Di atas, kita berhasil melakukan operasi untuk edit dan update data menggunakan Express ke dalam database MySQL, di tutorial selanjutnya kita akan belajar bagaimana cara membuat fungsi hapus data ke dalam database.

Terima Kasih


EBOOK Toko Online Dengan Laravel, Vue Js dan Payment Gateway : https://bit.ly/lp-ebook-laravel-vue-payment-gateway


Fika Ridaul Maulayya
I'm a Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share everything i know with Articles, Screencasts and E-Books at SantriKoding.com
KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami

KOMENTAR