const express = require('express')
const path = require('path')
const PORT = process.env.PORT || 5000
const mysql = require('mysql')
const parser = require('body-parser')
const https = require('https')
process.on('uncaughtException',(a)=>{
console.log(`error exeption : ${a}`)
})
process.on('unhandledRejection',(a)=>{
console.log(`error rejection : ${a}`)
})
/*
DATABASE
========
- table : barang
describe :
- id
- nama
- satuan
- harga
*/
const db = mysql.createConnection({
host:"bestmedialearning.com",
user:"u6045499_apibest",
password:"makuro123",
database:"u6045499_bestatk"
})
db.connect((err)=>{
if(err) console.log(`database error : ${err}`)
})
const app = express()
app.use(parser.json())
app.use(parser.urlencoded({extended:true}))
app.use(express.static(path.join(__dirname,'public')))
app.set('view engine','pug')
app.set('views','views')
app.set('view engine','pug')
app.set('views','views')
app.get('/',(a,b)=>{
b.render('index',{
title:'best ATK'
})
})
app.get('/api/semua/barang',(a,b)=>{
let sql = 'select * from barang'
let query = db.query(sql,(c,d)=>{
if(c) console.log(`error dapatkan semua barang ${c}`)
b.send(d)
})
})
app.get('/api/product/:id',(a,b)=>{
let idnya = a.params.id
let sql = `select * from barang where nama like "%${idnya}%"`
let query = db.query(sql,(c,d)=>{
if(c) console.log(`error carri prduct : ${c}`)
b.send(d)
})
})
app.post('/api/product/delete/:id',(a,b)=>{
let idnya = a.params.id
let sql = `delete from barang where id = "${idnya}"`
let query = db.query(sql,(c,d)=>{
if(c) {
b.send([{"pesan":`gagal menghapus : ${c}`}])
}else{
b.send([{"pesan":"berhasil menghapus"}])
}
})
})
/*
API EDIT BARANG
===============
- nama : nama
- satuan : satuan
- harga : harga
- idnya : id
/api/edit/barang
*/
app.post('/api/edit/barang',(a,b)=>{
let badan = a.body
let sql = `update barang set nama = "${badan.nama}", satuan = "${badan.satuan}", harga = "${badan.harga}" where id = "${badan.idnya}"`
let query = db.query(sql,(c,d)=>{
if(c) b.send([{pesan:"ada permasalahan sewaktu update "+c}])
else b.send([{pesan:"berhasil update barang"}])
})
})
/*
API TAMBAH BARANG
=================
api : /api/tambah/barang
describe :
- nama : nama
- satuan : satuan
- harga : harga
*/
app.post('/api/tambah/barang',(a,b)=>{
let badan = a.body
let sql = `insert into barang(id,nama,satuan,harga) values(null,"${badan.nama}","${badan.satuan}","${badan.harga}")`
let query = db.query(sql,(c,d)=>{
if(c) b.send([{pesan:"error tambah barang : "+c}])
else b.send([{pesan:"berhasil tambah barang"}])
})
})
app.get('*',(a,b)=>{
b.send([{"pesan":"cari apa sih mas ..."}])
})
setInterval(()=>{
db.query('select 1')
},1000)
app.listen(PORT,()=>{
console.log(`app run on port : ${PORT}`)
})doctype html
html
head
title=title
script(src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js")
public
link(rel="stylesheet", href="w3.css", attr)
style.
.w3-container{
padding:0px;
}
.w3-button{
padding:0px;
}
body.w3-light-grey.w3-container
h1.w3-text-red.w3-button(onclick="reload()") BEST ATK //||\\
.w3-container.w3-dark-grey.w3-bar.w3-input.w3-card
.w3-bar-item.w3-button(onclick="gantian('daftar')") DAFTAR
.w3-bar-item.w3-button(onclick="gantian('list')") LIST
.w3-bar-item.w3-button(onclick="gantian('tambah')") TAMBAH
.w3-bar-item.w3-button(onclick="gantian('edit')") EDIT
#hapus.w3-bar-item.w3-button(onclick="gantian('daftar')") HAPUS
.w3-cell-row.w3-container.w3-padding
input#filter(type="search" placeholder="search").w3-container.w3-padding.w3-input.w3-half.w3-cell
#cari.w3-button.w3-round.w3-blue.w3-card.w3-padding SEARCH
#daftar.w3-container.w3-padding.wadah
#isi.w3-container
#tambah.w3-container.w3-content.w3-light-grey.w3-card.w3-border.wadah(style="display:none")
h1.w3-padding TAMBAH ITEM
.w3-container.w3-padding
table.w3-table
tr
th nama
th satuan
th harga
th simpan
tr
td
input#tnama(placeholder="nama").w3-input
td
input#tsatuan(placeholder="satuan").w3-input
td
input#tharga(placeholder="harga").w3-input
td
button#ttambah.w3-button.w3-round.w3-blue.w3-padding TAMBAH
#list.w3-container.w3-content.w3-light-grey.w3-card.w3-border.wadah(style="display:none")
h1.w3-padding LIST ITEM
#listcon.w3-container
#edit.w3-container.w3-content.w3-light-grey.w3-card.w3-border.wadah(style="display:none")
h1.w3-padding EDIT
#editcon.w3-container.w3-padding
script.
function reload(){
location.reload()
}
$.get('/api/semua/barang',(a,b)=>{
hasilnya(a)
})
$("#cari").click(()=>{
guyon()
$.get('/api/product/'+$("#filter").val(),(a,b)=>{
hasilnya(a)
})
})
var boleh = true;
$("#hapus").click(()=>{
var hap = document.getElementsByClassName("hapus");
if(boleh){
for(var t =0;t < hap.length;t++){
hap[t].style.display = ""
}
boleh = false
}else{
for(var t =0;t < hap.length;t++){
hap[t].style.display = "none"
}
boleh = true
}
})
// function nya
function hasilnya(a){
var isinya2 = ""
isinya2 += `<div style="display: flex;flex-wrap: wrap;">`
for(var i = 0; i < a.length ; i++){
isinya2 += `<div id="a${a[i].id}" class="w3-container w3-col s2 con">`+
`<button class="w3-button w3-padding w3-card w3-right w3-round w3-red hapus" style="display:none" onclick="hapus('${a[i].id}')">X</button/>`+
`<div class="w3-padding w3-container">`+
`<img class="w3-card w3-button w3-round" src="https://i.ebayimg.com/images/g/TbAAAOSwqS5b03yG/s-l300.jpg" style="width:100%" class="w3-blue">`+
`<div class="w3-container cin w3-border-bottom w3-small">Nama : ${a[i].nama}</div>`+
`<div class="w3-container w3-text-grey w3-border-bottom w3-small ">Satuaan : ${a[i].satuan}</div>`+
`<div class="w3-container w3-text-grey w3-small">Harga : ${a[i].harga}</div>`+
`</div>`+
"</div>"
}
isinya2 += `</div>`
$("#isi").html(isinya2)
}
function hapus(param){
$.post('/api/product/delete/'+param,(a,b)=>{
alert(a[0].pesan)
$.get('/api/semua/barang',(a,b)=>{
hasilnya(a)
})
})
}
function guyon(){
if($("#filter").val() == ""){
alert("eh , seneng guyon ya ??")
return;
}
}
function gantian(param){
var wadah = document.getElementsByClassName("wadah");
for(var i = 0;i<wadah.length;i++){
wadah[i].style.display = "none"
}
document.getElementById(param).style.display = "block"
}
listItem()
function listItem(){
$.get('/api/semua/barang',(a,b)=>{
var isinya3 = ""
isinya3 += `<table class="w3-table-all">`+
`<tr><th>NO</th><th>ID</th><th>NAMA</th><th>SATUAN</th><th>HARGA</th></tr>`
for(var i = 0; i < a.length ; i++){
isinya3+= `<tr>`+
`<td>${i+1}</td><td>${a[i].id}</td><td>${a[i].nama}</td><td>${a[i].satuan}</td><td>${a[i].harga}</td>`+
`</tr>`
}
isinya3 += `</table>`
$("#listcon").html(isinya3)
})
}
ngedit()
function ngedit(){
$.get('/api/semua/barang',(a,b)=>{
var nge = ""
nge += `<table class="">`+
`<tr><th>NO</th><th>ID</th><th>NAMA</th><th>SATUAN</th><th>HARGA</th><th>EDIT</th></tr>`
for(var i = 0; i < a.length ; i++){
nge += `<tr>`+
`<td>${i+1}</td><td>${a[i].id}</td><td><input id="a${a[i].id}a" class="w3-input" value="${a[i].nama}"></td><td><input id="a${a[i].id}b" class="w3-input" value="${a[i].satuan}"></td><td><input id="a${a[i].id}c" class="w3-input" value="${a[i].harga}"></td><td class="w3-yellow w3-button w3-padding" onclick="mengedit('${a[i].id}')">edit</td>`+
`</tr>`
}
nge += `</table>`
$("#editcon").html(nge)
})
}
/*
MENGEDIT
========
- aa : name
- ab : satuan
- ac : harga
- idnya : id (param)
- stock : stock ( todo)
- gambar : gambar ( todo )
*/
function mengedit(param){
var aa = document.getElementById("a"+param+"a");
var ab = document.getElementById("a"+param+"b");
var ac = document.getElementById("a"+param+"c");
var paket = {
nama:aa.value,
satuan:ab.value,
harga:ac.value,
idnya:param
}
$.post('/api/edit/barang',paket,(a,b)=>{
alert(a[0].pesan)
})
}
/*
TAMBAH BARANG
=============
- tnama : nama
- tsatuan : satuan
- tharga : harga
api : /api/tambah/barang
*/
$("#ttambah").click(()=>{
var tnama = $("#tnama")
var tsatuan = $("#tsatuan")
var tharga = $("#tharga")
var paketan = {
nama: tnama.val(),
satuan: tsatuan.val(),
harga: tharga.val()
}
$.post('/api/tambah/barang',paketan,(a,b)=>{
alert(a[0].pesan)
tnama.val("")
tsatuan.val("")
tharga.val("")
})
})