Membuat CRUD Sederhana Menggunakan Expressjs Dan MySQL PART 3 : CRUD Dengan Upload Foto atau Gambar

ExpressJS

Intro

Lanjut setelah di part sebelumnya kita sudah berhasil membuat konfigurasi database nya sekarang kita akan membuat CRUD (Create, Read, Update, Delete). Untuk CRUD nya disini kita akan menggunakan foto ya dan tidak menggunakan RestfullAPI hanya CRUD biasa aja, sedangkan untuk library nya kita akan menggunakan multer untuk upload gambarnya.

Membuat Fungsi CRUD 

Sebelum memulai membuat function nya kita install dulu library multer nya untuk bisa digunakan ketika akan mengupload file. dan juga kita akan menggunakan express-flash dan express-session untuk pesan jika error atau berhasil nya.

npm install multer express-flash express-session

Setelah itu ubah file di app.js tambahkan code seperti pada gambar di bawah ini pada bagian secret bisa diisi sesuai selera teman-teman fungsi secret yaitu secret key nama session aplikasi kita.

const flash = require('express-flash')
const session = require('express-session')
app.use(flash());
app.use(session({
  secret: 'master-template-express',
  resave: true,
  saveUninitialized: true,
  maxAge: Date.now() + (30 * 86400 * 1000)
}));

app.js

1. Create

Pertama kita akan membuat function create yang berguna untuk menyimpan data hasil inputan dari aplikasi client kita, atau frontend untuk mengedit file nya file ini berada di folder routes/blog.js. Disini juga kita akan setting upload gambar nya berikut code nya

router.post('/save', upload.single('gambar'), async (req, res) => {
    const data = {
        judul: req.body.judul,
        kategori: req.body.deskripsi,
        gambar: !req.file ? 'placeholder.jpg' : req.file.filename
    };
    try { 
        await Blogs.create(data)
    } catch (error) {
        req.flash('msg_error', error);
        res.redirect('/')
    }
});

2. Read

Lalu kita akan membuat function Read yang berguna untuk menampilkan list data ke client atau frontend kita, untuk mengedit file nya file ini berada di folder routes/index.js berikut codenya.

const db = require('../database/models')
const Blogs = db.Blogs;
router.get('/', async function(req, res) {
    const data = { 
        title: 'Express', 
        result: await Blogs.findAndCountAll()
    }
    res.render('index', data );
});

3. Update

Lalu kita akan membuat function update yang berguna untuk mengubah data hasil inputan dari aplikasi client kita, atau frontend untuk mengedit file nya file ini berada di folder routes/blog.js. Berikut code nya.

router.get('/edit/:id', async function (req, res) {
    const id = req.params.id
    const result = await Blogs.findByPk(id);
    const data = {
        title: 'Express Edit Blog',
        result: result.dataValues
    }
    res.render('edit', data);
});

router.post('/update/:id', upload.single('gambar'), (req, res) => {
    const id = req.params.id
    const data = {
        judul: req.body.judul,
        deskripsi: req.body.deskripsi
    };
    Blogs.findByPk(id).then((row) => {
        if (req.file) {
            if (row.dataValues.gambar !== 'placeholder.jpg') {
                fs.unlink(`public/images/${row.dataValues.gambar}`, () => {
                    return true
                })
            }
            data.gambar = req.file.filename
        }
        row.update(data);
        req.flash('msg_success', 'data berhasil diperbarui');
        res.redirect('/')
    }).catch((err) => {
        console.log(err);
        req.flash('msg_error', err);
        res.redirect('/')
    });
});

4. Delete

Lalu kita akan membuat function create yang berguna untuk mengahpus data hasil inputan dari aplikasi client kita, atau frontend untuk mengedit file nya file ini berada di folder routes/blog.js. Berikut code nya.

router.get('/delete/:id', function(req, res) {
    const id = req.params.id
    Blogs.findByPk(id)
    .then((row) => {
    if (row.dataValues.cover != 'placeholder.jpg') {
      fs.unlink(`public/images/${row.dataValues.gambar}`, () => {
        return true;
      })
    }
    Blogs.destroy({
      where: {
        id: row.dataValues.id
      }
    }).then(() => {
        req.flash('msg_success', 'data terhapus');
        res.redirect('/')
    }).catch((err) => {
        req.flash('msg_error', err);
        res.redirect('/')
    })
  }).catch((err) => {
    res.render('/', err)
  })
});

Kode lengkap nya disini untuk file blog.js, index.ejs dan edit.ejs

okay testing dengan menggunakan perintah sebagai berikut di terminal

npm start

http://localhost:3000/

Okay part terakhir di latihan membuat CRUD menggunakan expressjs mysql dan upload gambar menggunakan package multer sampai sudah selesai jika ada yang ditanyakan bisa tulis saja dikolom komentar source code nya ada disini. 

Semoga bermanfa'at :)