Pengenalan Express JS, Membuat Apps Pertama, Route, Database dan Login di Express JS

 MATERI BACKEND DENGAN EXPRESS JS

Oleh: Sutrisno Sukarno

1.      Buat folder crud

2.      Ketik npm init

3.      Npm install express

 

4.      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

 

 

5.      Buat folder config dan di dalamnya database.js

 

6.      Install mysql

7.      Install nodemon, ejs

8.      

9.      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

 

 

10.  Buat folder views dan  buat file about.ejs, contact dll

 

11.  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>

 

 

12.  Install md5, express-session, dan body-parser

 

Body-parser digunakan untuk route dengan kiriman dari html ke database

 

13.  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

 

 

14.  Buat database expressdb dan tabel pengguna dengan field id, username, password

 

15.  Input data di database, dan pwd pakai md5

 

16.  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

1.      Buat tabel customers

Isi tabel customers

 

2.      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

            })

        }

    })

})