Cara menggunakan create crud dengan javascript

Pada tutorial kali ini saya akan membagikan cara membuat aplikasi CRUD (Create Read Update Delete) menggunakan node. js dan mysql

Table of Contents Show

Langkah 1. pengantar
Langkah 2. Buat Database dan Tabel
Langkah #3. Instal Dependensi
Langkah #4. Struktur proyek
Langkah #5. Indeks. js
Langkah #6. Melihat
Langkah #7. Pengujian
Langkah-langkah membuat CRUD?
Apa itu kueri CRUD?
Apa itu MySQL CRUD?
Apa itu CRUD Sederhana?

Tidak hanya itu, saya juga akan membagikan cara menggunakan bootstrap modal untuk form input dan record update

Sehingga aplikasi CRUD yang akan dibuat lebih interaktif, responsif, dan user friendly

Mari kita mulai

Dapatkan paket hosting diskon 75% dan domain gratis + tambahan diskon 5% dengan menggunakan kupon. MEMIKIRKAN

Pesan sekarang

Langkah 1. pengantar

Ini penting

Dalam tutorial ini, Anda akan belajar bagaimana melakukan operasi CRUD dengan node. js dan mysql

Jika Anda tidak terbiasa dengan node. js sebelumnya, saya sarankan membaca posting sebelumnya. Node Tutorial. js Untuk Pemula

Dalam tutorial ini saya akan menggunakan Bootstrap dan Jquery

Jika anda belum memiliki bootstrap dan jquery silahkan download terlebih dahulu di website resmi getbootstrap. com dan jquery. com

Langkah 2. Buat Database dan Tabel

Buat database baru, disini saya membuat database dengan nama crud_db

Jika Anda membuat dengan nama yang sama itu lebih baik

Untuk membuat database dengan MySQL, dapat dilakukan dengan mengeksekusi query berikut

CREATE DATABASE crud_db;

Perintah SQL diatas akan membuat database dengan nama crud_db

Selanjutnya, buat tabel di database crud_db

Disini saya membuat tabel dengan nama produk

Jika Anda membuat dengan nama yang sama itu lebih baik.

Untuk membuat tabel produk, dapat dilakukan dengan mengeksekusi perintah SQL berikut

CREATE TABLE product(
product_id INT(11) PRIMARY KEY AUTO_INCREMENT,
product_name VARCHAR(200),
product_price INT(11) 
)ENGINE=INNODB;

Perintah SQL di atas akan membuat tabel dengan produk, dengan field product_id, product_name, dan product_price

Langkah #3. Instal Dependensi

Sebelum install dependencies silahkan buat folder, disini saya membuat folder dengan nama crud

Dimana folder crud adalah folder project kita di tutorial ini

Ayo lanjutkan,

Dalam tutorial ini, kita membutuhkan 4 dependensi yaitu

1. Ekspres (simpul. kerangka js)

2. MySQL (driver mysql untuk node. js)

3. Body-parser (middleware untuk menangani permintaan post body)

4. Setang (mesin template)

Untuk menginstal dependensi pada node. js dapat dilakukan dengan mudah menggunakan NPM (Node Package Manager)

Anda dapat menjalankan NPM di Terminal atau Command Prompt

Namun pada tutorial ini saya tidak menggunakan Command Prompt, melainkan menggunakan Git Bash Terminal

Saya sangat merekomendasikan Anda juga menggunakan Git Bash

Anda dapat mengunduh Git Bash di url berikut

https. //git-scm. com/download

Silahkan download sesuai platform anda, lalu install di komputer anda

Jika sudah menginstal Git Bash, silahkan buka folder crud yang sudah dibuat tadi

Kemudian klik kanan dan pilih Git Bash Here, seperti yang ditunjukkan pada gambar berikut

Maka akan muncul terminal seperti gambar berikut

Di terminal di atas, Anda dapat menginstal semua dependensi yang Anda perlukan untuk proyek Anda

Sebelum menginstal dependensi, kita perlu membuat sebuah paket. json

Untuk membuat paket. json, Anda dapat menjalankan perintah berikut di terminal

npm init

Seperti gambar berikut ini

Perintah di atas akan membuat sebuah file bernama package. json secara otomatis di proyek Anda

Lebih-lebih lagi,

Instal semua dependensi yang diperlukan dengan mengetikkan perintah berikut di terminal

npm install --save express mysql body-parser hbs

Seperti gambar berikut ini

Perintah di atas akan menginstal semua dependensi yang kita butuhkan yaitu. express, mysql, body-parser, dan handlebars

Jika file paket dibuka. json, maka tampilannya akan seperti berikut

{
  "name": "crud",
  "version": "1.0.0",
  "description": "Crud Node.js",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "M Fikri",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.18.3",
    "express": "^4.16.3",
    "hbs": "^4.0.1",
    "mysql": "^2.16.0"
  }
}

Langkah #4. Struktur proyek

Buka folder crud menggunakan text editor, disini saya menggunakan ATOM sebagai text editornya

Anda dapat menggunakan Sublime Text, Intellij IDEA, atau editor lainnya

Kemudian buat folder baru di folder crud. Disini saya membuat dua folder yaitu folder public dan views

Seperti gambar berikut ini

Selanjutnya, buat folder css dan folder js di folder publik

Kemudian salin file bootstrap. css yang sudah didownload sebelumnya ke dalam folder public/css/

Dan salin file bootstrap. js dan jquery di folder public/js/

Sehingga struktur project kita terlihat seperti gambar berikut

Langkah #5. Indeks. js

Buat file dengan nama index. js. Seperti gambar berikut ini

Kemudian buka index. js dan ketik kode berikut

//use path module
const path = require('path');
//use express module
const express = require('express');
//use hbs view engine
const hbs = require('hbs');
//use bodyParser middleware
const bodyParser = require('body-parser');
//use mysql database
const mysql = require('mysql');
const app = express();

//konfigurasi koneksi
const conn = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: '',
  database: 'crud_db'
});

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

//set views file
app.set('views',path.join(__dirname,'views'));
//set view engine
app.set('view engine', 'hbs');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
//set folder public sebagai static folder untuk static file
app.use('/assets',express.static(__dirname + '/public'));

//route untuk homepage
app.get('/',(req, res) => {
  let sql = "SELECT * FROM product";
  let query = conn.query(sql, (err, results) => {
    if(err) throw err;
    res.render('product_view',{
      results: results
    });
  });
});

//route untuk insert data
app.post('/save',(req, res) => {
  let data = {product_name: req.body.product_name, product_price: req.body.product_price};
  let sql = "INSERT INTO product SET ?";
  let query = conn.query(sql, data,(err, results) => {
    if(err) throw err;
    res.redirect('/');
  });
});

//route untuk update data
app.post('/update',(req, res) => {
  let sql = "UPDATE product SET product_name='"+req.body.product_name+"', product_price='"+req.body.product_price+"' WHERE product_id="+req.body.id;
  let query = conn.query(sql, (err, results) => {
    if(err) throw err;
    res.redirect('/');
  });
});

//route untuk delete data
app.post('/delete',(req, res) => {
  let sql = "DELETE FROM product WHERE product_id="+req.body.product_id+"";
  let query = conn.query(sql, (err, results) => {
    if(err) throw err;
      res.redirect('/');
  });
});

//server listening
app.listen(8000, () => {
  console.log('Server is running at port 8000');
});

Langkah #6. Melihat

Buat file dengan nama product_view. hbs di folder views. Seperti gambar berikut ini

Kemudian buka product_view. hbs dan ketikkan kode berikut

<html lang="en">
<head>
	<meta charset="utf-8">
	<title>CRUD Node.js and Mysql</title>
  <link href="/assets/css/bootstrap.css" rel="stylesheet" type="text/css"/>
</head>
<body>
  <div class="container">
    <h2>Product List</h2>
		<button class="btn btn-success" data-toggle="modal" data-target="#myModalAdd">Add New</button>
    <table class="table table-striped" id="mytable">
      <thead>
        <tr>
          <th>Product ID</th>
          <th>Product Name</th>
          <th>Price</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
         {{#each results}}
        <tr>
          <td>{{ product_id }}</td>
          <td>{{ product_name }}</td>
          <td>{{ product_price }}</td>
          <td>
            <a href="javascript:void(0);" class="btn btn-sm btn-info edit" data-id="{{ product_id }}" data-product_name="{{ product_name }}" data-product_price="{{ product_price }}">Edit</a>
            <a href="javascript:void(0);" class="btn btn-sm btn-danger delete" data-id="{{ product_id }}">Delete</a>
          </td>
        </tr>
        {{/each}}
      </tbody>
    </table>
  </div>

	<!-- Modal Add Produk-->
	  <form action="/save" method="post">
        <div class="modal fade" id="myModalAdd" 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">Add New Product</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="form-group">
                   <input type="text" name="product_name" class="form-control" placeholder="Product Name" required>
               </div>

               <div class="form-group">
                   <input type="text" name="product_price" class="form-control" placeholder="Price" required>
               </div>
             </div>
             <div class="modal-footer">
               <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
               <button type="submit" class="btn btn-primary">Save</button>
             </div>
           </div>
         </div>
        </div>
	 </form>

	 <!-- Modal Update Produk-->
   <form action="/update" method="post">
       <div class="modal fade" id="EditModal" 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">Edit Product</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="form-group">
                  <input type="text" name="product_name" class="form-control product_name" placeholder="Product Name" required>
              </div>

              <div class="form-group">
                  <input type="text" name="product_price" class="form-control price" placeholder="Price" required>
              </div>
            </div>
            <div class="modal-footer">
              <input type="hidden" name="id" class="product_id">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="submit" class="btn btn-primary">Update</button>
            </div>
          </div>
        </div>
       </div>
  </form>

	 <!-- Modal Delete Produk-->
 	  <form id="add-row-form" action="/delete" method="post">
 	     <div class="modal fade" id="DeleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 	        <div class="modal-dialog">
 	           <div class="modal-content">
 	               <div class="modal-header">
									 	<h5 class="modal-title" id="myModalLabel">Delete Product</h5>
 	                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 	               </div>
 	               <div class="modal-body">
												 <strong>Anda yakin mau menghapus data ini?</strong>
 	               </div>
 	               <div class="modal-footer">
									 		<input type="hidden" name="product_id" class="form-control product_id2" required>
 	                   	<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 	                  	<button type="submit" class="btn btn-success">Delete</button>
 	               </div>
 	      			</div>
 	        </div>
 	     </div>
 	 </form>

<script src="/assets/js/jquery-3.3.1.js"></script>
<script src="/assets/js/bootstrap.js"></script>
<script>
    $(document).ready(function(){
			//tampilkan data ke modal untuk edit
      $('#mytable').on('click','.edit',function(){
        var product_id = $(this).data('id');
        var product_name = $(this).data('product_name');
        var product_price = $(this).data('product_price');
        $('#EditModal').modal('show');
        $('.product_name').val(product_name);
        $('.price').val(product_price);
        $('.product_id').val(product_id);
      });
			//tampilkan modal hapus record
			$('#mytable').on('click','.delete',function(){
        var product_id = $(this).data('id');
        $('#DeleteModal').modal('show');
        $('.product_id2').val(product_id);
      });

    });
</script>
</body>
</html>

Langkah #7. Pengujian

Test aplikasi untuk memastikan aplikasi crud yang kita buat berjalan dengan baik

Untuk menjalankan aplikasi, ketikkan perintah berikut di terminal

node index

Kemudian pesan "Server sedang berjalan di port 8000" dan "Mysql Connected" akan muncul di konsol.

Seperti gambar berikut ini

Kemudian buka browser Anda dan ketik URL berikut

http. // localhost. 8000/

Jika berjalan dengan baik, maka akan terlihat seperti gambar berikut

Klik tombol Add New, maka akan muncul modal Add New Product seperti berikut

Masukkan Nama Produk dan Harga kemudian Klik tombol Simpan

Maka Anda akan melihat hasilnya sebagai berikut

Klik tombol Edit untuk mengedit record, maka akan muncul modal Edit Product seperti berikut

Edit data yang ingin Anda edit, lalu klik tombol Perbarui

Maka akan terlihat hasilnya seperti berikut

Untuk menghapus Record, klik tombol Hapus, maka akan muncul pesan konfirmasi seperti berikut

Kemudian klik tombol Hapus untuk menghapus catatan

Selesai

Terkait. Tutorial Lengkap Express JS Untuk Pemula

Kesimpulan

Pembahasan kali ini tentang cara membuat aplikasi CRUD (Create Read Update Delete) menggunakan node. js dan mysql

Dalam tutorial ini, Anda telah mempelajari cara membuat aplikasi CRUD dengan node. js dan mysql

Tidak hanya itu, Anda juga telah mempelajari cara menggunakan modal bootstrap untuk input formulir dan pembaruan catatan

Langkah-langkah membuat CRUD?

Membuat CRUD di Halaman CRUD .

Membuat Sistem Registrasi. Pada bagian ini, Anda akan membuat formulir pendaftaran lengkap dengan database di dalamnya. .

Membuat File Konfigurasi. .

Membuat Formulir Pendaftaran. .

Membuat Sistem Login. .

Buat Formulir Masuk. .

6. Buat Halaman Beranda. .

7. Buat Skrip Logout

Apa itu kueri CRUD?

CRUD adalah istilah populer di kalangan pengembang back end. Singkatan dari Buat, Baca, Perbarui, dan Hapus . Suatu proses yang memiliki keterkaitan dengan transaksi atau pengambilan data dari dan atau ke database.

Apa itu MySQL CRUD?

CRUD adalah operasi khusus yang nantinya akan membutuhkan database untuk membuat, membaca, memperbarui, atau menghapus data .

Apa itu CRUD Sederhana?

Buku tamu CRUD sederhana adalah proses pembuatan aplikasi sederhana dengan menggunakan bahasa pemrograman PHP dan MySQL . Program PHP dan MySQL biasanya dibundel dalam satu paket yang disebut XAMPP.