Nodejs#2 : Membuat CRUD Dengan Nodejs MySQL

-

Melanjutkan Postingan Sebelumnya tentang nodejs untuk pemula, pada postingan ini saya akan sharing membuat CRUD sederhana dengan nodejs - mysql

pertama kita buat database dulu di localhost/phpmyadmin dengan nama db_nodejs setelah itu kita buat table dengan nama tbl_siswa seperti berikut :



 selanjutnya kita buka project yang sudah dibuat di postingan Sebelumnya dan jalankan command berikut :

npm init

jika sudah tekan enter dan didalam project akan tercreate file baru dengan nama package.json dan folder baru node_modules 

setelah itu kita install express, mysql, dan body-parser :








dan satu lagi yang akan kita install di project yaitu nodemon, nodemon ini berfungsi untuk menjalankan local server aplikasi nodejs kita, dengan nodemon ini kita tidak perlu melakukan restart server ketika ada perubahan source code di server nodejs kita, nodemon ini akan otomatis melakukan restart server setiap ada perubahan source code di sisi server




dan di file package.json ini akan menjadi seperti berikut :




selanjutnya kita buat folder baru dengan nama public dan didalamnya kita buat file index.html dan script.js, sehingga tampilan struktur project akan seperti berikut :



kemudian buat file index.html menjadi seperti berikut :
<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
    <title>CRUD | Nodejs - MySql </title>
</head>
<body>

    <div class="container">
        <div class="card">
            <div class="card-header" style="background: #343a40;color: white;align-content: center;">
                CRUD | Nodejs - MySql
            </div>

            <button type="button" class="btn btn-primary btnTambahData mt-1" data-toggle="modal" data-target="#exampleModal" data-zurl="<?= BASEURL; ?>">
                Tambah Mahasiswa
            </button>
            <hr>
            <table class="table">
                <thead class="thead-dark">
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">Nis</th>
                        <th scope="col">Nama</th>
                        <th scope="col">Alamat</th>
                        <th scope="col">Hobi</th>
                        <th scope="col"></th>
                    </tr>
                </thead>
                <tbody id="databody">
                    
                </tbody>
            </table>

        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Tambah Mahasiswa</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="card-body">
                        <div class="form-group">
                            <label for="nis">Nomor Induk Siswa</label>
                            <input type="text" class="form-control" id="nis" placeholder="Masukkan Nomor Induk Siswa" autocomplete=off>
                        </div>
                        <div class="form-group">
                            <label for="nama">Nama</label>
                            <input type="text" class="form-control" id="nama" placeholder="Masukkan Nama" autocomplete=off>
                        </div>
                        <div class="form-group">
                            <label for="alamat">Alamat</label>
                            <input type="text" class="form-control" id="alamat" placeholder="Masukkan Alamat" autocomplete=off>
                        </div>
                        <div class="form-group">
                            <label for="hobu">Hobi</label>
                            <input type="text" class="form-control" id="hobi" placeholder="Masukkan Hobi" autocomplete=off>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="btn_save">Simpan</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
    <script src="script.js"></script>
</body>
</html>


dan script.js seperti berikut :
getData();
async function getData(){
    const response = await fetch('/read');
    const json = await response.json();
    console.log(json);
    showData(json);
}

const btnSave = document.getElementById('btn_save');
btnSave.addEventListener('click', async event => {

    const action = btnSave.textContent;

    const nis    = document.getElementById('nis').value;
    const nama   = document.getElementById('nama').value;
    const alamat = document.getElementById('alamat').value;
    const hobi   = document.getElementById('hobi').value;

    let data = {
        nis : nis,
        nama : nama,
        alamat : alamat,
        hobi : hobi,
        action : action
    }

    const options = {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    };
    const response = await fetch('/api', options);
    const json = await response.json();
    console.log(json);
    
    getData();

    $('#exampleModal').modal('hide');

    if(action === 'Simpan'){
        $.alert('Data Berhasil ditambah!');
    }else{
        $.alert('Data Berhasil dirubah!');
    }
});

function showData(json){
    let tr = '';
    $('#databody').html('');
    let no;
    for (let i = 0; i < json.length; i++) {
        no = i + 1;
        tr = $('<tr/>');
        tr.append("<td>" + no + "</td>");
        tr.append("<td>" + json[i].nis + "</td>");
        tr.append("<td>" + json[i].nama + "</td>");
        tr.append("<td>" + json[i].alamat + "</td>");
        tr.append("<td>" + json[i].hobi + "</td>");
        tr.append(`
            <td>
                <button type="button" class="badge badge-primary badge-pill btnEdit" data-nis="`+ json[i].nis +`">
                    Edit
                </button>
                <button type="button" class="badge badge-danger badge-pill btnHapus" data-nis="`+ json[i].nis +`">
                    Hapus
                </button>
            </td>`
        );
        $('#databody').append(tr);
    }

    //Jquery Selector
    $(function(){
        $('.btnTambahData').on('click', function(){
            document.getElementById('nis').readOnly = false;
            document.getElementById('nis').value = '';
            document.getElementById('nama').value = '';
            document.getElementById('alamat').value = '';
            document.getElementById('hobi').value = '';

            $('#exampleModalLabel').html('Tambah Data Siswa');
            $('.modal-footer button[id=btn_save]').html('Simpan');
        });

        $('.btnEdit').on('click', async function(){
            let nis = $(this).data('nis');
            console.log(nis);


            const url = `readbynis/${nis}`;
            const response = await fetch(url);
            const json = await response.json();
            console.log(json[0].nis);

            document.getElementById('nis').readOnly = true;
            document.getElementById('nis').value = json[0].nis;
            document.getElementById('nama').value = json[0].nama;
            document.getElementById('alamat').value = json[0].alamat;
            document.getElementById('hobi').value = json[0].hobi;

            $('#exampleModalLabel').html('Ubah Data Siswa');
            $('.modal-footer button[id=btn_save]').html('Ubah Data');
            $('#exampleModal').modal('show');
        });

        $('.btnHapus').on('click', async function(){
            let nis = $(this).data('nis');

            $.confirm({
                title: 'Hapus Data Siswa',
                content: 'Apakah Anda Yakin...???',
                buttons: {
                    ya: {
                        text: 'YA',
                        btnClass: 'btn-blue',
                        action: async function(){
                            const url = `hapus/${nis}`;
                            const response = await fetch(url);
                            const json = await response.json();
                            $.alert('Data Berhasil dihapus!');
                            getData();
                        }
                    },
                    tidak: function () {
                        
                    }
                }
            });
        });
    })
}


kemudian rubah file server.js seperti berikut :
const express    = require('express');
const bodyParser = require('body-parser');
const mysql      = require('mysql');
const app        = express();


//Koneksi ke mysql database
const conn = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: '',
  database: 'db_nodejs'
});

//connect ke database
conn.connect((err) =>{
  if(err) throw err;
  console.log('Koneksi berhasil');
});

app.use(bodyParser.json());
app.listen(4000, () => console.log('Server berjalan di port 4000'));
app.use(express.static('public'));

//Baca Semua Data
app.get('/read',(req, res) => {

  let sql = "SELECT * FROM tbl_siswa";
  let query = conn.query(sql, (err, results) => {
    if(err) throw err;
    res.json(results);
  });
});

//Baca Data Berdasarkan NIS
app.get('/readbynis/:nis', async (req, res) =>{
    const nis = req.params.nis;
    console.log(nis);

    let sql = "SELECT * FROM tbl_siswa Where nis = "+ nis +"";
      let query = conn.query(sql, (err, results) => {
        if(err) throw err;
        res.json(results);
      });
});

//route untuk insert data
app.post('/api', (req, res) => {
    let action = req.body.action;
    let data = {nis: req.body.nis, nama: req.body.nama, alamat: req.body.alamat, hobi: req.body.hobi};
    let sql;

    if(action === 'Simpan'){
        sql = "INSERT INTO tbl_siswa SET ?";    
    }else{
        sql = `UPDATE tbl_siswa SET nama='`+req.body.nama+`', 
                alamat='`+req.body.alamat+`', hobi='`+ req.body.hobi +`' 
                WHERE nis='`+req.body.nis+`';`
    }
    
    console.log(sql);
    let query = conn.query(sql, data,(err, results) => {
       if(err) throw err;
       res.json(results);
       console.log(results);
    });
});

//Baca Data Berdasarkan NIS
app.get('/hapus/:nis', async (req, res) =>{
    const nis = req.params.nis;
    console.log(nis);

    let sql = `DELETE FROM tbl_siswa Where nis = '`+ nis +`';`
      let query = conn.query(sql, (err, results) => {
        if(err) throw err;
        res.json(results);
      });
});

jika sudah coba jalankan server dengan command berikut :

nodemon server.js

dan kita buka web browser dan jalankan localhost:4000


Tambah Data


 


Edit Data



Hapus Data



 
Sekian sharing kali ini, semoga bermanfaat,, full source code-nya bisa di dowload DISINI

Comments

Post a Comment

Popular posts from this blog

PHP MySql CRUD Dengan Konsep MVC

-
Image
Pada postingan kali ini saya akan sharing cara membuat CRUD dengan php menggunakan konsep MVC, ok langsung saja buka code editor (saya menggunakan sublime text) dan buat folder baru dengan nama phpmvc didalam folder htdocs kalian dan tambah folder seperti berikut :  Setelah itu kita siapkan database di mysql, buat database dengan nama phpmvc dan tablenya seperti gambar berikut : tambahkan file config.php didalam folder app/config : <?php define('BASEURL', 'http://localhost:8181/phpmvc/public'); define('DB_HOST', 'localhost'); define('DB_USER', 'root'); define('DB_PASS', ''); define('DB_NAME', 'phpmvc'); kemudian tambahkan 3 file controller didalam folder app/controllers, yaitu Home, About, dan Mahasiswa : Home.php <?php class Home extends Controller { public function index() { $data['nama'] = $this->model('User_model')->getUser()...
Read more

Laravel - Sistem Informasi Perpustakaan Sederhana Laravel

-
Image
Postingan kali saya akan sharing membuat aplikasi perpustakaan sederhana menggunakan laravel 5.8, dimana terdapan menu Anggota, Kategori Buku, Daftar Buku dan Transaksi (Peminjaman/Pengembalian Buku). ok langsung saja kita buat project laravel dengan nama perpus : composer create-project --prefer-dist laravel/laravel perpus setelah create project laravel-nya selesai kita buat database melalui localhost/phpmyadmin dengan nama db_perpus, lalu kita buka project laravel dengan code editor disini saya menggunakan visual studio code. Setelah project kita buka dengan code editor, pertama kita atur koneksi database yang ada di file .env, kita rubah menjadi seperti berikut : note : untuk db_username dan db_password di sesuiakan dengan configurasi masing-masing. Selanjutnya kita tambahkan 4 buah data migration yaitu : table_anggota, table_kategori, table_buku, table_transaksi, kita buka terminal dan jalankan command berikut :  php artisan make:migration crea...
Read more

IT Asset Management Dengan PHP MySQL

-
Image
Pada postingan kali saya akan share sebuah aplikasi IT Asset management yang fungsinya untuk memonitoring semua Asset khusus IT, contohnya : Laptop/komputer , Printer, Router, Hardisk, dll. Dalam aplkasi ini kita bisa mengetahui Asset IT posisinya dimana dan digunakan oleh siapa. untuk data-data yang dibutuhkan antara lain : 1. data kategori asset dalam menu ini kita bisa meng-input jenis2 kategory asset : tambah kategori asset : 2. data department 3. data karyawan 4. data department per karyawan 5. data asset location  6. data satuan asset dan untuk transaksi yang ada dalam aplikasi ini adalah,  1. create asset, pada menu create asset ini kita akan mengalokasikan sebuah asset ke karyawan/personnel tampilannya seperti berikut: setelah klik tombol save akan muncul seperti dibawah : untuk melihat detail asset yang sudah dibuat tadi, kita bisa pilih...
Read more