How To Update Data On A Webpage With Express
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 information 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 connectedness = crave('../library/database'); /** * INDEX POSTS */ router.get('/', office (req, res, next) { //query connectedness.query('SELECT * FROM posts ORDER BY id desc', part (err, rows) { if (err) { req.flash('error', err); res.render('posts', { data: '' }); } else { //render ke view posts index res.render('posts/index', { data: rows // <-- information posts }); } }); }); /** * CREATE Post */ router.get('/create', role (req, res, next) { res.render('posts/create', { title: '', content: '' }) }) /** * STORE POST */ router.postal service('/store', function (req, res, next) { let title = req.body.title; let content = req.body.content; let errors = false; if(championship.length === 0) { errors = truthful; // set wink message req.flash('fault', "Silahkan Masukkan Title"); // return to add.ejs with flash message res.render('posts/create', { title: title, content: content }) } if(content.length === 0) { errors = true; // set flash bulletin req.flash('error', "Silahkan Masukkan Konten"); // render to add.ejs with wink message res.render('posts/create', { title: title, content: content }) } // if no fault if(!errors) { let formData = { title: title, content: content } // insert query connection.query('INSERT INTO posts Fix ?', formData, function(err, outcome) { //if(err) throw err if (err) { req.flash('error', err) // render to add.ejs res.render('posts/create', { championship: formData.championship, 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', 'Information 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, championship: rows[0].title, content: rows[0].content }) } }) }) /** * UPDATE Postal service */ router.post('/update/:id', part(req, res, next) { allow id = req.params.id; let championship = req.body.title; let content = req.body.content; let errors = false; if(title.length === 0) { errors = true; // gear up flash bulletin req.wink('error', "Silahkan Masukkan Title"); // render to edit.ejs with wink message res.render('posts/edit', { id: req.params.id, title: championship, content: content }) } if(content.length === 0) { errors = true; // set flash message req.wink('fault', "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 ) { allow formData = { title: title, content: content } // update query connexion.query('UPDATE posts Fix ? WHERE id = ' + id, formData, function(err, result) { //if(err) throw err if (err) { // set flash message req.flash('mistake', err) // return to edit.ejs res.return('posts/edit', { id: req.params.id, proper name: formData.name, author: formData.author }) } else { req.flash('success', 'Data Berhasil Diupdate!'); res.redirect('/posts'); } }) } }) module.exports = router; Di atas, kita menambahkan two road baru, yaitu : edit dan update.
edit
Route edit digunakan untuk menampilkan data yang diambil dari database ke dalam sebuah class, road ini menggunakan method Get.
allow id = req.params.id; // <-- go 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 tabular array 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, effect) { // ... Kode di atas merupakan query yang digunakan untuk melakukan proses update data post berdasarkan ID.
Langkah two - Membuat View Mail Edit
Sekarang, kita lanjutkan untuk membuat view untuk menampilkan data yang akan di edit. Silahkan buat file baru dengan nama edit.ejs di dalam binder 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</championship> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.v.2/css/bootstrap.min.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css"> </head> <body way="groundwork: lightgray"> <div class="container mt-five"> <div class="row"> <div class="col-dr.-12"> <% if (messages.error) { %> <div class="alert alarm-danger" part="alarm"><%- letters.error %></div> <% } %> <div class="card border-0 shadow rounded"> <div form="carte-body"> <class action="/posts/update/<%= id %>" method="post"> <div class="form-group"> <characterization>Title</label> <input blazon="text" course="grade-command" name="title" value="<%= title %>" placeholder="Masukkan Championship Post"> </div> <div form="form-group"> <label>Konten</label> <textarea class="form-command" name="content" rows="4" placeholder="Masukkan Konten Post"><%= content %></textarea> </div> <button type="submit" class="btn btn-principal">UPDATE</button> <button type="reset" class="btn btn-alert">RESET</push button> </grade> </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.five.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 activeness kita arahkan ke dalam route update dengan parameter ID mail service.
<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 information-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
Source: https://santrikoding.com/tutorial-node-express-mysql-5
Posted by: lockettliblaingledy.blogspot.com
0 Response to "How To Update Data On A Webpage With Express"
Post a Comment