• Langkah 1 - Menambahkan Route Post Create dan Store
• Langkah 2 - Membuat View Post Create

Halo teman-teman semuanya, pada kesempatan kali ini kita semua akan belajar bagaimana cara memasukkan data ke dalam database menggunakan Express. Disini kita hanya akan menambahkan sebuah route dan juga view/template baru.

Langkah 1 - Menambahkan Route Post Create dan Store

Pertama, silahkan buka file routes/posts.js, kemudian ubah 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');
            }
        })
    }

})

module.exports = router;

Di atas, kita menambahkan 2 route baru, yaitu : create dan store.

create

Route create akan kita gunakan untuk menampilkan halaman form dan route ini menggunakan method GET.

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

Di atas, di dalam route create kita melakukan render ke dalam view post create.

store

Route store, digunakan untuk melakukan proses insert data yang dikirim melalui form, route ini menggunakan method POST. Dan di dalam route ini kita membuat basic validation untuk memastikan data yang akan di masukkan ke database tidak kosong.

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
   })
}

Di atas, merupakan contoh validasi yang akan digunakan untuk mengecek apakah nilai dari field title tidak kosong. Jika validasi sudah terpenuhi, maka akan melakukan insert data ke dalam database menggunakan kode seperti berikut ini :

// insert query
connection.query('INSERT INTO posts SET ?', formData, function(err, result) 

//...

Di atas, kita memasukkan data dari variable formData ke dalam database, jika kita perhatikan lagi untuk variable formData isinya kurang lebih seperti berikut ini :

let title   = req.body.title; 	// <-- get from form 
let content = req.body.content;	// <-- get from form 

let formData = {
  title: title,
  content: content
}

Langkah 2 - Membuat View Post Create

Sekarang, kita lanjutkan untuk membuat view untuk menampilkan form tambah data. Silahkan buat file baru dengan nama create.ejs di dalam folder views/posts dan 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>Create 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/store" 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">SIMPAN</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, pertama kita tambahkan flash message untuk menampilkan error dari validasi.

<% if (messages.error) { %>
  <div class="alert alert-danger" role="alert"><%- messages.error %></div>
<% } %>

Selanjutnya, teman-teman perhatikan pada form action, dimana di dalam action tersebut kita arahkan ke dalam route /posts/store dan untuk method dari form tersebut adalah POST.

<form action="/posts/store" method="post">

Sekarang, silahkan coba project-nya di http://localhost:3000/posts/create, jika berhasil maka akan menampilkan halaman kurang lebih seperti berikut ini :

kemudian, silahkan isi pada input form-nya dan klik SIMPAN, jika berhasil maka kita akan di arahkan ke halaman posts index dengan menampilkan flash sukses.

Di atas, kita berhasil menambahkan data ke dalam database menggunakan Express, di artikel selanjutnya kita semua akan belajar untuk menampilkan data yang akan di edit dan melakukan proses update.

Terima Kasih

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