MATERI BACKEND DENGAN EXPRESS JS
Oleh: Sutrisno Sukarno
- Buat folder crud
- Ketik npm init
- Npm install express
- Buat file index.js
let express=require(“express”)
let app=express()
app.get(‘/’,(req,res)=>{
res.end(‘Hello World’)
})
app.listen(4000,()=>{
console.log(“App running di port: 4000”)
})
Jalankan node index.js
- Buat folder config dan di dalamnya database.js
- Install mysql
- Install nodemon, ejs
- Buat file di database.js
const mysql=require(‘mysql’)
const connection=mysql.createConnection({
host:”localhost”,
user: “root”,
password:”,
database:”expressdb”
})
connection.connect((err)=>{
if(err){
console.log(“ada eror”)
}else{
console.log(“database konek”)
}
})
module.exports=connection
- Buat folder views dan buat file about.ejs, contact dll
- Isi file about.ejs
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>about</title>
</head>
<body>
<h1>Home</h1>
<a href=”/contact”>contact</a>
<a href=”/home”>home</a>
<a href=”/login”>login</a>
</body>
</html>
File login.ejs
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>about</title>
</head>
<body>
<h1>Home</h1>
<form action=”/login” method=”post”>
username<input type=”text” name=”username”></p>
password<input type=”password” name=”password”></p>
<input type=”submit” name=”submit”>
<input type=”reset” name=”reset”>
</form>
</body>
</html>
File home.ejs
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Home</title>
</head>
<body>
<h1>Home</h1>
<a href=”/contact”>contact</a>
<a href=”/about”>about</a>
<a href=”/login”>login</a>
</body>
</html>
Contact.ejs
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>kontak</title>
</head>
<body>
<h1>kontak</h1>
<a href=”/”>home</a>
<a href=”/about”>about</a>
<a href=”/logout”>logout</a>
</body>
</html>
- Install md5, express-session, dan body-parser
Body-parser digunakan untuk route dengan kiriman dari html ke database
- Buat folder routers
Di dalam folder routers buat file app-route.js
const express=require(“express”)
const bodyParser=require(“body-parser”)
const md5=require(“md5”)
const session=require(“express-session”)
const router=express.Router()
router.use(bodyParser.urlencoded({extended:false}))
const connection=require(“../config/database.js”)
router.get(‘/’,(req,res)=>{
res.render(‘home’)
})
router.get(‘/about’,(req,res)=>{
res.render(‘about’)
})
router.get(‘/contact’,(req,res)=>{
if(session.loggedin){
res.render(‘contact’)
}else{
res.send(‘maaf anda belum login!’)
}
})
router.get(‘/login’,(req,res)=>{
res.render(‘login’)
})
//proses login
router.post(‘/login’,(req,res)=>{
let username=req.body.username
let password=md5(req.body.password)
let sql=”select * from pengguna where username=? AND password=?”
connection.query(sql,[username,password],(err,result)=>{
if(err){res.send(‘sql err’)}
if(result.length>0){
session.loggedin=true
session.username=username
res.render(‘about’)
} else {
res.send(‘login gagal’)
}
})
})
router.get(‘/logout’,(req,res)=>{
session.loggedin=false
res.redirect(‘/login’)
})
module.exports=router
Jalankan nodemon
- Buat database expressdb dan tabel pengguna dengan field id, username, password
- Input data di database, dan pwd pakai md5
- Setting index.js
let express=require(“express”)
let app=express()
/*app.get(‘/’,(req,res)=>{
res.end(‘Hello World’)
}) */
//untuk menjalankan router
const appRouting=require(‘./routers/app-route.js’)
app.set(“views”,”./views”)
app.set(“view engine”,”ejs”)
app.use(“/”,appRouting)
app.listen(4000,()=>{
console.log(“App running di port: 4000”)
})
LANJUTAN KE CRUD
- Buat tabel customers
Isi tabel customers
- Buat file customers.ejs di folder views
<html>
<head>
<title>Data Customer</title>
</head>
<body>
<div>
<a href=”/create”>Tambah Data</a>
<table>
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
<th>Telp</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
<% if(data.length) {
for(var i=0; i< data.length; i++) { %>
<tr>
<td><%= (i+1) %></td>
<td><%=data[i].nama %></td>
<td><%=data[i].alamat %></td>
<td><%=data[i].telepon %></td>
<td class=”text-center”>
<a href=”/edit/<%=data[i].id %>”>Edit</a>
<a onclick=” return alert(‘are you sure?’)” href=”/delete/<%=data[i].id %>”>delete</a>
</td>
</tr>
<% }
}else{ %>
Data tidak ditemukan !
<% } %>
</tbody>
</table>
</div>
</body>
</html>
Edit File app-route.js
router.get(‘/customers’,(req,res)=>{
let sql=”select * from customers”
connection.query(sql,(err,rows)=>{
if(err) {
res.send(“ada err query”)
} else {
res.render(“customers”,{ data:rows })
}
})
})
Lengkapnya file app-route.js
const express=require(“express”)
const bodyParser=require(“body-parser”)
const md5=require(“md5”)
const session=require(“express-session”)
const router=express.Router()
router.use(bodyParser.urlencoded({extended:false}))
const connection=require(“../config/database.js”)
router.get(‘/’,(req,res)=>{
res.render(‘home’)
})
router.get(‘/about’,(req,res)=>{
res.render(‘about’)
})
router.get(‘/contact’,(req,res)=>{
if(session.loggedin){
res.render(‘contact’)
}else{
res.send(‘maaf anda belum login!’)
}
})
router.get(‘/login’,(req,res)=>{
res.render(‘login’)
})
//proses login
router.post(‘/login’,(req,res)=>{
let username=req.body.username
let password=md5(req.body.password)
let sql=”select * from pengguna where username=? AND password=?”
connection.query(sql,[username,password],(err,result)=>{
if(err){res.send(‘sql err’)}
if(result.length>0){
session.loggedin=true
session.username=username
res.render(‘about’)
} else {
res.send(‘login gagal’)
}
})
})
router.get(‘/logout’,(req,res)=>{
session.loggedin=false
res.redirect(‘/login’)
})
router.get(‘/customers’,(req,res)=>{
let sql=”select * from customers”
connection.query(sql,(err,rows)=>{
if(err) {
res.send(“ada err query”)
} else {
res.render(“customers”,{ data:rows })
}
})
})
module.exports=router
Result di browser:
Tambahkan route ke create di app-route.js
router.get(‘/create’,(req,res)=>{
res.render(‘create’)
})
Script lengkap:
const express=require(“express”)
const bodyParser=require(“body-parser”)
const md5=require(“md5”)
const session=require(“express-session”)
const router=express.Router()
router.use(bodyParser.urlencoded({extended:false}))
const connection=require(“../config/database.js”)
router.get(‘/’,(req,res)=>{
res.render(‘home’)
})
router.get(‘/about’,(req,res)=>{
res.render(‘about’)
})
router.get(‘/contact’,(req,res)=>{
if(session.loggedin){
res.render(‘contact’)
}else{
res.send(‘maaf anda belum login!’)
}
})
router.get(‘/login’,(req,res)=>{
res.render(‘login’)
})
//proses login
router.post(‘/login’,(req,res)=>{
let username=req.body.username
let password=md5(req.body.password)
let sql=”select * from pengguna where username=? AND password=?”
connection.query(sql,[username,password],(err,result)=>{
if(err){res.send(‘sql err’)}
if(result.length>0){
session.loggedin=true
session.username=username
res.render(‘about’)
} else {
res.send(‘login gagal’)
}
})
})
router.get(‘/logout’,(req,res)=>{
session.loggedin=false
res.redirect(‘/login’)
})
router.get(‘/customers’,(req,res)=>{
let sql=”select * from customers”
connection.query(sql,(err,rows)=>{
if(err) {
res.send(“ada err query”)
} else {
res.render(“customers”,{ data:rows })
}
})
})
router.get(‘/create’,(req,res)=>{
res.render(‘create’)
})
module.exports=router
buat create.ejs di views
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>create</title>
</head>
<body>
<h1>create</h1>
</body>
</html>
Cek link sudah aktif atau belum:
Edit data di create.ejs
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>create</title>
</head>
<body>
<h1>Form Tambah Data</h1>
<form action=”/create” method=”post”>
nama <input type=”text” name=”nama”></p>
alamat <input type=”text” name=”alamat”></p>
telepon <input type=”text” name=”telepon”></p>
<input type=”submit” name=”submit”>
<input type=”reset” name=”reset”>
</form>
</body>
</html>
Result:
Tambahkan script ini di app-route.js
router.get(‘/create’,(req,res)=>{
res.render(‘create’)
})
router.post(‘/store’,(req,res)=>{
let nama=req.body.nama
let alamat=req.body.alamat
let telepon=req.body.telepon
let FormData={nama:nama,alamat:alamat,telepon:telepon}
let sql=’Insert into customers SET?’
connection.query(sql,FormData,(err,result)=>{
if(err){
res.send(“err query”)
}else{
res.redirect(‘/customers’)
}
})
})
Script full:
const express=require(“express”)
const bodyParser=require(“body-parser”)
const md5=require(“md5”)
const session=require(“express-session”)
const router=express.Router()
router.use(bodyParser.urlencoded({extended:false}))
const connection=require(“../config/database.js”)
router.get(‘/’,(req,res)=>{
res.render(‘home’)
})
router.get(‘/about’,(req,res)=>{
res.render(‘about’)
})
router.get(‘/contact’,(req,res)=>{
if(session.loggedin){
res.render(‘contact’)
}else{
res.send(‘maaf anda belum login!’)
}
})
router.get(‘/login’,(req,res)=>{
res.render(‘login’)
})
//proses login
router.post(‘/login’,(req,res)=>{
let username=req.body.username
let password=md5(req.body.password)
let sql=”select * from pengguna where username=? AND password=?”
connection.query(sql,[username,password],(err,result)=>{
if(err){res.send(‘sql err’)}
if(result.length>0){
session.loggedin=true
session.username=username
res.render(‘about’)
} else {
res.send(‘login gagal’)
}
})
})
router.get(‘/logout’,(req,res)=>{
session.loggedin=false
res.redirect(‘/login’)
})
router.get(‘/customers’,(req,res)=>{
let sql=”select * from customers”
connection.query(sql,(err,rows)=>{
if(err) {
res.send(“ada err query”)
} else {
res.render(“customers”,{ data:rows })
}
})
})
router.get(‘/create’,(req,res)=>{
res.render(‘create’)
})
router.post(‘/store’,(req,res)=>{
let nama=req.body.nama
let alamat=req.body.alamat
let telepon=req.body.telepon
let FormData={nama:nama,alamat:alamat,telepon:telepon}
let sql=’Insert into customers SET?’
connection.query(sql,FormData,(err,result)=>{
if(err){
res.send(“err query”)
}else{
res.redirect(‘/customers’)
}
})
})
module.exports=router
tes input data:
http://localhost:4000/create untuk tambah data
tambahkan script edit di app-route.js
//edit
router.get(‘/edit/(:id)’,(req,res) =>{
let id = req.params.id;
connection.query(‘SELECT * FROM customers WHERE id = ‘ +id, (err, rows) => {
if(err) throw err
if (rows.length <= 0) {
res.send(‘error’,’Data dengan ID ‘ + id + ” Tidak di temukan”)
res.redirect(‘/customers’)
}
else {
res.render(‘customers/edit’, {
id: rows[0].id,
nama: rows[0].nama,
alamat: rows[0].alamat,
telepon: rows[0].telepon
})
}
})
})
