DEV Community: Andi Ismail

Cara add domain ke vercel

Andi Ismail — Sun, 05 Feb 2023 04:21:49 +0000

Cara menambahkan domain custom ke website vercel

akan error ketika memasukkan domain ke website anda di vercel. selanjutnya kita akan setting dns di link berikut https://www.domainesia.com/panduan/cara-setting-dns-dengan-mudah/

clik nama domain bukan di centang akan muncul gambar berikut, click use default namseservers

lanjut ke dns

dan ini hasilnya :

websitenya https://www.andiismail.my.id/
hosting https://vercel.com/
domain https://www.domainesia.com/
Pakai Framework React Js, css
Tampilan websitenya

React myRooms - 1 navbar

Andi Ismail — Tue, 31 Jan 2023 00:56:41 +0000

mkdir hotelBookingSystem
cd hotelBookingSystem
npx create-react-app client
cd client
npm start

selesai membuat react app

Tambahkan Bootstrap di atas title file index.html

// index.html

<!-- Link Css dan Js Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" ...">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" ..."></script>

<title>React App</title>

selanjutnya kita akan buat 2 folder Component, screen.
lanjut ke navbar, kita akan rubah background navbar warna hitam, tulisan warna hitam, dan logo myRooms berwarna putih dan link navbar register dan login kita tempatkan ke kiri otomatis.

index.css

.navbar {
  background-color: black !important;
}
.nav-link{
  color: white !important;
}
.navbar-brand {
  color: white !important;
}
.navbar-nav {
  margin-left: auto !important;
}

github repo
link belajar

Express jwt 2

Andi Ismail — Fri, 06 Jan 2023 06:59:08 +0000

git clone https://github.com/andiks2018/JvalleyExpress-jwtPostman.git express_jwt_2

buat file .env

DATABASE_URL="file:./db.sqlite"
PORT=8000
SECRET_KEY="masukanSecretKeyKamuTerserahApaAja"

npx prisma db push

selanjutnya kita akan buat relasi di scheme prisma, serta mengganti author dengan user_id

//schema.prisma

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "sqlite"
  url      = env("DATABASE_URL")
}

model Users {
  id        Int      @id @default(autoincrement())
  email     String   @unique
  password  String
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  //relation
  notes Notes[]
}

model Notes {
  id        Int      @id @default(autoincrement())
  title     String
  content   String
  user_id   Int
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  //relation
  user Users @relation(fields: [user_id], references: [id])
}

setelah merubah data di model schema prisma selanjutnya kita db push ulang

npx prisma db push
selanjutnya kita akan jalankan server dengan perintah

npm run dev

selanjutnya kita buat file test.rest sebelumnya kita sudah menginstal extension REST Client for Visual Studio Code.

//test.rest


###
POST http://localhost:8000/user/register
Content-Type: application/json

{
    "email":"andi@andi.com",
    "password": "cobapassword"
}

sebelumnya kita sudah membuat register user selanjutnya kita akan membuat login user di user_controller.js

//user_controller.js

import { request, response } from "express"
import db from "../../prisma/connection"
import jwt from "jsonwebtoken"
import env from "dotenv"
env.config()

// create user
export const user_register = async (req = request, res = response) => {
    try {

        // membaca request body
        const data = await req.body

        // tulis data dari body ke database
        const result = await db.users.create({
            data: data
        })

        const { SECRET_KEY } = process.env

        // generated token
        const token = jwt.sign({
            id: result.id,
            email: result.email
        }, SECRET_KEY)

        // kembalikan response json
        res.status(201).json({
            success: true,
            message: "user berhasil di tambahkan ke database",
            token: token
        })

    } catch (error) {
        res.status(500).json({
            success: false,
            error: error.message
        })
    }
}

//login user
export const user_login = async (req = request, res = response) => {
    try {

        //kita ambil body
        const data = await req.body

        //check email
        const checkEmail = await db.users.findUnique({
            where: {
                email: data.email
            }
        })

        //jika email tidak ditemukan di database
        if (!checkEmail) {
            return res.status(404).json({
                success: false,
                message: "email tidak ditemukan"
            })
        }

        //jika password tidak sama
        if (data.password !== checkEmail.password) {
            return res.status(401).json({
                success: false,
                message: "password kurang tepat"
            })
        }

        //generate token
        const token = jwt.sign({
            id: checkEmail.id,
            email: checkEmail.email
        }, process.env.SECRET_KEY)

        //kembalikan reseponse json
        res.status(500).json({
            success: true,
            message: "user berhasil di tambahkan ke database",
            token: token
        })

    } catch (error) {
        res.status(500).json({
            success: false,
            error: error.message
        })
    }
}

tambahkan user login

//user_routes.js

import express from "express"
import { user_login, user_register } from "../controllers/user_controllers"

const user_routes = express.Router()

// user register
user_routes.post("/user/register", user_register)
user_routes.post("/user/login", user_login)

export default user_routes

selanjutnya kita ke test.rest untuk menambahkan user login

//test.rest


### USER REGISTER
POST http://localhost:8000/user/register
Content-Type: application/json

{
    "email":"andi@andi.com",
    "password": "cobapassword"
}

### USER LOGIN

POST http://localhost:8000/user/login
Content-Type: application/json

{
    "email":"andi@andi.com",
    "password": "cobapassword"
}

kita tidak bisa register dengan email yang sama,

kalau kita cek password generate muncul user dan id

kita butuh generate req bdy

//user_mdw.js

import { request, response } from "express"
import jwt from "jsonwebtoken"
import env from "dotenv"
env.config()

const user_mdw = async (req = request, res = response, next) => {
    try {
        // coba check apakah ada authorization
        const authorization = await req.headers.authorization
        if (!authorization) {
            return res.status(401).json({
                success: false,
                message: "authorization tidak ditemukan !"
            })
        }
        const token = await authorization.split(" ")[1]
        // validasi token
        const verify = await jwt.verify(token, process.env.SECRET_KEY)
        if (!verify) {
            return res.status(401).json({
                success: false,
                message: "Token tidak terverifikasi!"
            })
        }

        /**
         * {
         *  "id" : 1,
         *  "email" : 'andi@andi.com'
         * }
         * 
         * lanjut boss..
         */

        //generate req body
        req.body.user_id = verify.id
        req.body.email = verify.email
        next()

    } catch (error) {
        res.status(401).json({
            success: false,
            error: error.message
        })
    }
}

export default user_mdw

lanjut ke test rest, tapi sebelumnya kita harus rubah data menjadi objek dengan inputan nilai title content dan user_id

//note_controller.js

import { request, response } from "express"
import db from "../../prisma/connection"

// read notes
export const notes_read = async (req = request, res = response) => {
    try {
        const result = await db.notes.findMany()
        res.status(200).json({
            success: true,
            notes: result
        })
    } catch (error) {
        res.status(500).json({
            success: false,
            error: error.message
        })
    }
}

// create note
export const notes_create = async (req = request, res = response) => {
    try {
        const data = await req.body
        const createNote = await db.notes.create({
            data: {
                title : data.title,
                content : data.content,
                uer_id : data.user_id
            }
        })
        res.status(201).json({
            success: true,
            message: "Berhasil menambahkan note ke database",
            note: createNote
        })
    } catch (error) {
        res.status(500).json({
            success: false,
            error: error.message
        })
    }
}

tadi ada beberapa error http yang salagh tulis, kemudian ketika send request create note katanya jwt must provider. solusinya tadi kita hapus file db.sqlite kemudian kita

npx prisma db push ulang

maka kemudian send request ulang , register, login, dan create note.

sampai disini selesai create note

selanjutnya kita akan baca datanya dimana note user itu hanya bisa membaca note yang dia buat. read note sebelumnya in bisa membaca semua note yang ada,

//notes_controllers.js

import { request, response } from "express"
import db from "../../prisma/connection"

// read notes
export const notes_read = async (req = request, res = response) => {
    try {
        const data = await req.body
        const result = await db.notes.findMany({
            where: {
                user_id : data.user_id
            }
        })
        res.status(200).json({
            success: true,
            notes: result
        })
    } catch (error) {
        res.status(500).json({
            success: false,
            error: error.message
        })
    }
}

// create note
export const notes_create = async (req = request, res = response) => {
    try {
        const data = await req.body
        console.info(data)
        const createNote = await db.notes.create({
            data: {
                title : data.title,
                content : data.content,
                user_id : data.user_id
            }
        })
        res.status(201).json({
            success: true,
            message: "Berhasil menambahkan note ke database",
            note: createNote
        })
    } catch (error) {
        res.status(500).json({
            success: false,
            error: error.message
        })
    }
}

//test.rest


### USER REGISTER
POST http://localhost:8000/user/register
Content-Type: application/json

{
    "email":"andi3@andi.com",
    "password": "cobapassword"
}

### USER LOGIN

POST http://localhost:8000/user/login
Content-Type: application/json

{
    "email":"andi3@andi.com",
    "password": "cobapassword"
}

### NOTE CREATE

POST http://localhost:8000/notes/create
Content-Type: application/json
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NCwiZW1haWwiOiJhbmRpM0BhbmRpLmNvbSIsImlhdCI6MTY3Mjk3OTU1M30.EE_pXrJpClcwz7fzO0jL37orfXsHXalyCP3BGtlIvok

{
    "title":"ini judul saya",
    "content": "ini content saya "
}

### NOTE READ
GET http://localhost:8000/notes/read
Content-Type: application/json

kalau seperti ini maka akan bisa membaca semua note yang sudah dibuat oleh semua user,

Create note user 6

Read note

cuman yang kita baca disini adalah semua note, sekarang kita pisahkan dengan middleware, kita notes_routes.js

//notes_routes.js

import express from "express"
import { notes_create, notes_read } from "../controllers/notes_controllers"
import user_mdw from "../middleware/user_mdw"

const notes_routes = express.Router()

// create 
notes_routes.post("/notes/create", user_mdw, notes_create)

// read 
notes_routes.get("/notes/read", user_mdw, notes_read)

export default notes_routes

lanjut kita ke test.rest lagi untuk membaca note, harusnya sekarang sudah tidak bisa lagi di akses, kecuali memasukkan token user loginnya.

error tidak bisa membaca note

sekarang kita sudah bisa akses note yang kita buat tadi. kita baru membuat satu note.

github repo

Express js jwt

Andi Ismail — Mon, 02 Jan 2023 17:13:24 +0000

mkdir express_jwt
npm init -y //akan menghasilkan package.json
npm install express dotenv prisma jsonwebtoken


npm install -D @babel/core @babel/node @babel/preset-env //akan menghasilkan node modules

npx prisma init

buat file .babelrc

//.babelrc

{
    "presets": ["@babel/preset-env"]
}

tambahkan dev

//package.json

{
  "name": "express_jwt",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"nodemon --exec babel-node ./src/index.js" //tambahkan ini 
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "dotenv": "^16.0.3",
    "express": "^4.18.2",
    "jsonwebtoken": "^9.0.0",
    "prisma": "^4.8.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.7",
    "@babel/node": "^7.20.7",
    "@babel/preset-env": "^7.20.2"
  }
}

selanjutnya buat folder sr, kemudian file index.js

// src/index.js

import express from "express"
import env from "dotenv"
env.config()

const app = express()

app.listen(8000, ()=>{
    console.info("server berjalan di port 8000")
})

coba jalankan server

npm run dev

selanjutnya kita ke env, kita akan ganti postgre

//env

DATABASE_URL="file:./db.sqlite"
PORT=8000

sekarang ke schema prisma

// schem.prisma

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "sqlite"
  url      = env("DATABASE_URL")
}

model Users {
  id        Int     @id @default(autoincrement())
  email     String  @unique
  password  String  
  createdAt DateTime  @default(now())
  updatedAt DateTime  @updatedAt
}

model Notes {
  id          Int @id   @default(autoincrement())
  title       String
  content     String
  author      String
  createdAt   DateTime   @default(now())
  updatedAt   DateTime  @updatedAt
}

port 8000 kita nonaktifkan dulu,

npx prisma db push //database is now sync with prisma

buat file baru di prisma

//connetions.js

import {PrismaClient} from "@prisma/client"
const db = new PrismaClient()
export default db

selanjutnya kita buat folder controllers didalam folder src

//user_controller.js

import { request, response } from "express";
import db from "../../prisma/connection";

//create user

export const user_register = async(req =request, res= response)=>{
    try{

        //membaca request body
        const data = await req.body

        //tulis data dari body ke database
        const result = await db.users.create({
            data : data
        })

        //kembalikan rsponse json 
        res.status(201).json({
            success: true,
            message : "user berhasil di tambahkan ke database "
        })

    } catch(error){
        res.status(500).json({
            success : false,
            error : error.message
        })
    }
}

selanjutnya kita buat routenya

//routes/user_routes.js

import express from "express"
import { user_register } from "../controllers/user_controllers"
const user_routes = express.Router()

//userRegister
user_routes.post("/user/register", user_register)

export default user_routes

selanjutnya kita kembali lagi ke index.js untuk menambahkan middleware dan routes

//index.js

import express from "express"
import env from "dotenv"
import user_routes from "./routes/user_routes"
env.config()

const app = express()

//middleware
app.use(express.urlencoded({extended: false}))
app.use(express.json())


//routes
app.use(user_routes)


app.listen(8000, ()=>{
    console.info("server berjalan di port 8000")
})

coba hentikan server port 8000 kemudian hidupkan kembali seharusnya tidak ada error.

kita akan coba test model yang sudah kita buat dengan post man :

new connection
buat 2 folder users dan notes
add request ganti namanya dengan user register
masukkan link http://localhost:8000/user/register
lanjut ke body : ganti jadi raw, json
kemudian send request, rresponse nya berada disamping kanan, bernilai true

konsep jwt

package library yang kita gunakan

kita import json webtoken di user controller
kita generate dulu secret password di sha256

copy password kita ke env

// .env

DATABASE_URL="file:./db.sqlite"
PORT=8000
SECRET_KEY = "822311a345980e7a0a2cdb7fd8c51d4c0fe302f671e619386f740b19d9ffa243" //paste disini

lanjut ke user_controller import env, generated token dan kembalikan respon token

//user_controllers.js
import { request, response } from "express";
import db from "../../prisma/connection";
import jwt from 'jsonwebtoken'
import env from 'dotenv'
env.config()

//create user
export const user_register = async(req =request, res= response)=>{
    try{

        //membaca request body
        const data = await req.body

        //tulis data dari body ke database
        const result = await db.users.create({
            data : data
        })


        //generated token 
        const token = jwt.sign({
            id : result.id,
            email : result.email
        }, process.env.SECRET_KEY)

        //kembalikan response json 
        res.status(201).json({
            success: true,
            message : "user berhasil di tambahkan ke database ",
            token : token
        })
    } catch(error){
        res.status(500).json({
            success : false,
            error : error.message
        })
    }
}

selanjutnya kita ke postman lagi unutk coba hit , jangan lupa untuk mengganti emailnya karena unique jadi gak boleh sma adengan email sebelumnya.

berhasil menambahkan email dan password baru.

kalau kita copy token kita yang ada di post man , kemudian kita pastekan ke jwt.io ternyata id email kita masih terbaca, makanya kita tidak bisa menyimpan password disini, kita simpannya di env, dengan nama secret_key

lanjut ke nottes

// src/controllers/notes_controllers.js

import {request, response} from "express"
import db from "../../prisma/connection"

//read notes
export const notes_read = async (req=request, res = response)=>{
    try{
        const result = await db.notes.findMany()
        res.status(200).json({
            success : true,
            notes : result
        })

    }catch(error){
        res.status(500).json({
            success : false,
            error : error.message
        })
    }
}

//create note
export  const notes_create = async (req=request, res = response)=>{
    try {
        const data = await req.body
        const createNote = await db.notes.create({
            data: data
        })
        res.status(201).json({
            success : true,
            message : "berhasil menambahkan note ke database",
            note : createNote
        })
    }catch(error){
        res.status(500).json({
            success : false,
            error : error.message
        })
    }
}

selesai membuat controller selanjutnya kita akan buat routesnya

//notes_routes.js

import express from 'express'
import { notes_create, notes_read } from '../controllers/notes_controllers'

const notes_routes = express.Router()

//create
notes_routes.post("/notes/create", notes_create)

//read
notes_routes.get("/notes/read", notes_read)

export default notes_routes

kemudian kita panggil di index js

//index.js

import express from "express"
import env from "dotenv"
import user_routes from "./routes/user_routes"
import notes_routes from "./routes/notes_routes"
env.config()

const app = express()

//middleware
app.use(express.urlencoded({extended: false}))
app.use(express.json())

//routes
app.use(user_routes)
app.use(notes_routes) //tambahkan ini 

app.listen(8000, ()=>{
    console.info("server berjalan di port 8000")
})

coba kita hit di postman
sebelumnya aku ada error di model notes, tertulis athoe, harusnya author dan ketika dirubah dia harus di db push ulang jangan lupa control save.

sekarang kita ke post man, sama seperti user register, kemudian kita hit dan berhasil

untuk raednya

selanjutnya kita butuh middleware untuk membatasi siapa saja yang bisa membuat dan read artikel. kita buat folder middleware.

// middleware/user_mdw.js

import {request, response} from 'express'
import jwt from 'jsonwebtoken'
import env from 'dotenv'
env.config()

const user_mdw = async (req=request, res= response, next)=>{

    //coba cek apaakah ada authorization
    const authorization = await req.headers.authorization

    if (!authorization){
        return res.status(401).json({
            success : false,
            message : "authorization tidak di temukan "
        })
    }
    const token = await authorization.split(" ")[1] //hati hati diantara spasi tanda petik  ada spasi

    //validation token 
    const verify = await jwt.verify(token, process.env.SECRET_KEY)

    if(!verify){
        return res.status(401).json({
            success : false,
            message : "Token tidak terverifikasi "
        })
    }

    next()
}

export default user_mdw

lanjut ke notes_routes.js, untuk menambahkan middlewarenya

//notes_routes.js

import express from 'express'
import { notes_create, notes_read } from '../controllers/notes_controllers'
import user_mdw from '../middleware/user_mdw'


const notes_routes = express.Router()

//create
notes_routes.post("/notes/create", user_mdw, notes_create) //tambahkan disini 

//read
notes_routes.get("/notes/read", notes_read)

export default notes_routes

authorization tidak ditemukan karena belum login.
kita pinjma token yang sudah kita buat sebelumnya.

berhasil ya, berarti sekarang kita sudah berhasil melakukan validasi user, mereka harus memiliki token dulu baru bisa akses create data.

di user_mdw.js kita tambahkan try and catch , sehingga kita ada error tidak error server,

//user_mdw.js

import { request, response } from "express";
import jwt from "jsonwebtoken";
import env from "dotenv";
env.config();

const user_mdw = async (req = request, res = response, next) => {
    try {
          //coba cek apaakah ada authorization
  const authorization = await req.headers.authorization;

  if (!authorization) {
    return res.status(401).json({
      success: false,
      message: "authorization tidak di temukan ",
    });
  }
  const token = await authorization.split(" ")[1];

  //validation token
  const verify = await jwt.verify(token, process.env.SECRET_KEY);

  if (!verify) {
    return res.status(401).json({
      success: false,
      message: "Token tidak terverifikasi ",
    });
  }

  next();
    } catch (error) {
        res.status(401).json({
            success : false,
            error : error.message
        })
    }
};

export default user_mdw;

repo github

Ghost cms javascript

Andi Ismail — Thu, 22 Dec 2022 00:43:23 +0000

install local

masuk menu developer

kita harus berpindah dari 18 mundur ke 16 node version, cara nvm download installernya instal ok.

mkdir ghost
npm install ghost-cli@latest -g
ghost install local

jalankan server dengan perintah

ghost start
`http://localhost:2368/ghost`

ghost stop
ghost help

Express js upload file Multer js

Andi Ismail — Tue, 20 Dec 2022 21:33:25 +0000

mkdir express_upload
cd express_upload
npm init -y

kita butuh multer

npm install express dotenv prisma multer
npx prisma init
npm i -D @babel/core @babel/node @babel/preset-env

kita akan gunakan post man,

kita buat file .babelrc

//.bablerc

{
    "presets": ["@babel/preset-env"]
}

selanjutnya kita akan buat folder src

selanjutnya kita akan hapus test diganti dengan dev

//package.json

{
  "name": "express_upload",
  "version": "1.0.0",
  "description": "",
  "main": "/src/index.js",
  "scripts": {
    "dev": "nodemon --exec babel-node ./src/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "dotenv": "^16.0.3",
    "express": "^4.18.2",
    "multer": "^1.4.5-lts.1",
    "prisma": "^4.7.1"
  },
  "devDependencies": {
    "@babel/core": "^7.20.5",
    "@babel/node": "^7.20.5",
    "@babel/preset-env": "^7.20.2"
  }
}

masuk ke controller buat file upload_controller

//upload_controller.js

import {request, response} from "express"

const upload_create = async (req = request, res = response)=>{
    try{
        const data = await req.body
        return res.status(201).json({
            success : true,
            data : data
        })
    }catch(err){
        return res.status(500).json({
            success : false,
            error : err.message
        })
    }
}
export default upload_create

selanjutnya kita akan buat upload_mdw.js

//upload_mdw.js

import multer from "multer";

const storage =multer.diskStorage({
    destination : (req, file, cb)=>{
        cb(null, './public/uploads')
    },
    filename : (req, file, cb)=>{
        cb (null, 'test.png')
    }
})

const upload_mdw = multer({storage : storage})

export default upload_mdw

selanjutnya kita akan buat rootnya

//upload_route.js

import express from 'express'
import upload_create from '../controllers/upload_controller'
import upload_mdw from '../middleware/upload_mdw'

const upload_route = express.Router()

//create upload
upload_route.post("/api/upload/create", upload_mdw.single('file'), upload_create)

export default upload_route

tambahkan 8000

//.env

DATABASE_URL="postgresql://johndoe:randompassword@localhost:5432/mydb?schema=public"
PORT=8000

selanjutnya kita ke index.js

//index.js

import express from 'express'
import env from 'dotenv'
import upload_route from './routes/upload_route'
env.config()

const app = express()
const {PORT} =process.env

app.use(express.static("../public"))
app.use(express.json())

app.use(upload_route)

app.listen(PORT, ()=>{
    console.info('server running...')
})

jalankan aplikasinya

npm run dev

selanjutnya kita akan ke postman, buat create new collection , upload folder, add request, post, lanjut ke body, klik rubah jadi form-data, uncentang description, key isi dengan file, kemudian valuenya, select files

berhasil menampilkan file upload, selanjutnya kita akan buat 2 folder public/uploads kosongan nanti akan terisi ketika kitta klik upload dari post man

kenapa nama file nya puploads karena folder yang kita buat nama filesnya adalah ./public/uploads ok, sekarang kita ke post man

sekarang file uploads terisi test.png.

dan kalau kita upload lagi maka akan menghasilkan test.png lagi dan niban data yang lama.

kita ganti 'test.png' menjadi original name

//upload_mdw.js

import multer from "multer";
//buat storagenya
const storage =multer.diskStorage({
    destination : (req, file, cb)=>{
        cb(null, './public/uploads')
    },
    filename : (req, file, cb)=>{
        cb (null, file.originalname) //ganti file ini
    }
})
const upload_mdw = multer({storage : storage})
export default upload_mdw

sekarang kita sudah bisa upload file sesuai dengan nama file aslinya.

git repo

Terima kasih.

Express postman

Andi Ismail — Mon, 12 Dec 2022 16:49:20 +0000

mkdir express_sample_api
npm init -y
npm install express dotenv prisma
npm install -D @babel/core @babel/node @babel/preset-env @faker-js/faker

npx prisma init

selanjutnya kita setup babel butuh file .babelrc

//.babelrc

{
    "presets": ["@babel/preset-env"]
}

//package.json

{
  "name": "express_sample_api",
  "version": "1.0.0",
  "description": "",
  "main": "/src/index.js",
  "scripts": {
    "dev": "nodemon --exec babel-node ./src/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "dotenv": "^16.0.3",
    "express": "^4.18.2",
    "prisma": "^4.7.1"
  },
  "devDependencies": {
    "@babel/core": "^7.20.5",
    "@babel/node": "^7.20.5",
    "@babel/preset-env": "^7.20.2",
    "@faker-js/faker": "^7.6.0"
  }
}

//.env

DATABASE_URL="file:./db.sqlite"
PORT=9000

//shema.prisma

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "sqlite"
  url      = env("DATABASE_URL")
}

model Notes{
  id          Int       @id @default(autoincrement())
  title       String    
  content     String
  author      String
  createdAt   DateTime  @default(now())
  updatedAt   DateTime  @updatedAt
}

//package.json

{
  "name": "express_sample_api",
  "version": "1.0.0",
  "description": "",
  "main": "/src/index.js",
  "scripts": {
    "dev": "nodemon --exec babel-node ./src/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "dotenv": "^16.0.3",
    "express": "^4.18.2",
    "prisma": "^4.7.1"
  },
  "devDependencies": {
    "@babel/core": "^7.20.5",
    "@babel/node": "^7.20.5",
    "@babel/preset-env": "^7.20.2",
    "@faker-js/faker": "^7.6.0"
  }
}

selanjutnya kita push modelnya ke database

npx prisma db push

selanjutnya kita buat file connection

//connection.js

import {PrismaClient} from "@prisma/client"
const db = new PrismaClient()

export default db

selanjutnya kita baut create dan read data

//note_controllers.js

import { request, response } from "express";
import db from "../../prisma/connection";

//create note 
export const note_create = async (req=request, res= response)=>{
    try{
        const data = await req.body
        const createNote = await db.notes.create({
            data : {
                title : data.title,
                content : data.content,
                author : data.author,
            }
        })
        return res.status(201).json({
            success :true,
            data : createNote
        })
    }catch(error){
        return res.status(500).json({
            success : false,
            error : error.message
        })
    }
}

//read note
export const note_read = async (req=request, res=response)=>{
    try{
        const {page= 1, limit = 10}= await req.query
        const skip = (page-1)* limit
        const result = await db.notes.findMany({
            skip : skip,
            take : parseInt(limit)

        })

        const totalResult = await db.notes.count()
        return res.status(200).json({
            success : true,
            current_page : parseInt(page),
            total_page : Math.ceil(totalResult/limit),
            data : result
        })
    }catch(error){
        return res.status(500).json({
            success : false,
            error : error.message
        })
    }
}

selanjutnya kita ke routes

//note_routes

import express from 'express'
import { note_create, note_read } from '../controllers/note_controllers'

const note_routes = express.Router()

//create note
note_routes.post("/api/note/create", note_create)

//read note
note_routes.get("/api/notes/read", note_read)

export default note_routes

//index.js

import express from 'express'
import env from 'dotenv'
import note_routes from './routes/note_routes'
env.config()

//environtment variable
const {PORT} = process.env
const app=express()

//mdw
app.use(express.json())

//routes
app.use(note_routes)

//listener
app.listen(PORT, ()=>{
    console.info("server beckend berjalan...")
})

jalankan server

npm run dev

//note_routes

import express from 'express'
import { note_create, note_read } from '../controllers/note_controllers'

const note_routes = express.Router()

//create note
note_routes.post("/api/note/create", note_create)

//read note
note_routes.get("/api/notes/read", note_read)

export default note_routes

create data

read data di hit

sekarang kita akan mneggunakan post man

create new collection ganti namanya
add request NOTE CREATE
kita lanjut ke body
jangan lupa save, di body tulis

{
    "title": "ini title",
    "content": "ini content",
    "author": "andiismail"
}

add request lagi sekarang kita bikin untuk
read notesnya

selanjutnya kita buat seedernya pakai data fakerjs

//notes_seed.js

import {faker} from "@faker-js/faker"

const note_seed = ()=>{
    const fake_title = faker.definitions.title
    const fake_content = faker.lorem.paragraph()
    const fake_author = faker.internet.userName()

    console.log({fake_title, fake_content, fake_author})
}

note_seed()

selanjutnya buat pemanggil seedernya di package.json

//package.json

{
  "name": "express_sample_api",
  "version": "1.0.0",
  "description": "",
  "main": "/src/index.js",
  "scripts": {
    "dev": "nodemon --exec babel-node ./src/index.js",
    "notes_seed": "babel-node ./src/seeds/notes_seed.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@prisma/client": "^4.7.1",
    "dotenv": "^16.0.3",
    "express": "^4.18.2",
    "prisma": "^4.7.1"
  },
  "devDependencies": {
    "@babel/core": "^7.20.5",
    "@babel/node": "^7.20.5",
    "@babel/preset-env": "^7.20.2",
    "@faker-js/faker": "^7.6.0"
  }
}

selanjutnya jalankan servernya

npm run notes_seed

//notes_seed.js

import {faker} from "@faker-js/faker"
import db from "../../prisma/connection"
const note_seed = ()=>{
    const fake_title = faker.definitions.title
    const fake_content = faker.lorem.paragraph()
    const fake_author = faker.internet.userName()

    //console.log({fake_title, fake_content, fake_author})
    db.notes.create({
        data : {
            title : fake_title,
            content : fake_content,
            author : fake_author
        }
    })
        .then(res=>{
            console.info(`Dibuat notes dengan author ${fake_author}`)
        })
        .catch(err=>{console.error(err.message)})
}

//note_seed()
for (let i = 0; i<=100; i++){
    note_seed()
}

jalankan npm run notes_seed

sekarang kita jalanakn server 9000
npm run dev

untuk mendapatkan data yang terbaru, kita tambahkan order by dari findMany() dan tambahkan juga total data.

//note_controllers.js

import { request, response } from "express";
import db from "../../prisma/connection";

//create note 
export const note_create = async (req=request, res= response)=>{
    try{
        const data = await req.body
        const createNote = await db.notes.create({
            data : {
                title : data.title,
                content : data.content,
                author : data.author
            }
        })
        return res.status(201).json({
            success :true,
            data : createNote
        })
    }catch(error){
        return res.status(500).json({
            success : false,
            error : error.message
        })
    }
}

//read note
export const note_read = async (req=request, res=response)=>{
    try{
        const {page= 1, limit = 10}= await req.query
        const skip = (page-1)* limit
        const result = await db.notes.findMany({
            skip : skip,
            take : parseInt(limit),
            orderBy : {
                id :"desc" // a-z "desc"
            }
        })

        const totalResult = await db.notes.count()
        return res.status(200).json({
            success : true,
            current_page : parseInt(page),
            total_page : Math.ceil(totalResult/limit),
            total_data : totalResult,
            data : result
        })
    }catch(error){
        return res.status(500).json({
            success : false,
            error : error.message
        })
    }
}

github repo

Express js pagination dengan prisma

Andi Ismail — Sun, 11 Dec 2022 14:11:04 +0000

Express pagination lanjutan penabahasan sebelumnya,

github repo sebelumnya disini

node module dan database tidak disertakan di github, jadi setelah

git clone

npm install
npx prisma db push

error environment tidak ditemukan, kita harus buat dulu envnya.

//.env

DATABASE_URL = "file:./db.sqlite"
PORT= 9000

coba kita jalankan kembali

npx prisma db push

sekarang kita jalankan server

npm run dev

server sudah berhasil berjalan...

kalau kita hit kembali dengan data yang sama maka akan error karena username dan email uniq.

//package.json

{
  "name": "express_faker",
  "version": "1.0.0",
  "description": "",
  "main": "/src/index.js",
  "scripts": {
    "dev": "nodemon --exec babel-node ./src/index.js",
    "users_seed" : "babel-node ./src/seeds/users_seed.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@prisma/client": "^4.7.1",
    "dotenv": "^16.0.3",
    "express": "^4.18.2",
    "prisma": "^4.7.1"
  },
  "devDependencies": {
    "@babel/core": "^7.20.5",
    "@babel/node": "^7.20.5",
    "@babel/preset-env": "^7.20.2",
    "@faker-js/faker": "^7.6.0"
  }
}

dipackage json kita sudah tambahkan user_seed untuk menambahkan 100 data faker.
matikan servernya dan ketikkan

npm run users_seed

sekarang dua server yang berjalan.

npm run users_seed
npm run dev

kalau kita hit di tester.rest maka akan produksi 100 data plus data input yang kita lakukan sebelumnya, oleh karenaya kita akan membuat pagination untuk memudah kinerja load data. kita akan ke controller user fokus pada user read

di findmany kasih objek take=10

//user_controller.js

import db from "../../prisma/connection"
import { request, response } from "express"

// create user
export const user_create = async (req = request, res = response) => {
    try {
        const data = await req.body
        const createUser = await db.users.create({
            data: data
        })
        return res.status(201).json({
            success: true,
            message: "User berhasil di buat"
        })
    } catch (error) {
        return res.status(500).json({
            success: false,
            error: error.message
        })
    }
}

// user read
export const user_read = async (req = request, res = response) => {
    try {
        const result = await db.users.findMany({
            take : 10 //tambahkan ini
        })
        return res.status(200).json({
            success: true,
            data: result
        })
    } catch (error) {
        return res.status(500).json({
            success: false,
            error: error.message
        })
    }
}

sekarang ke tester.rest kalau kita send request untuk read data, hasilya kita hanya akan melihat 10 data saja

kalau kita kasih take 10 dan skip 10 maka akan menampilkan 10 data di setiap halaman nnya.

//user_controller.js

import db from "../../prisma/connection"
import { request, response } from "express"

// create user
export const user_create = async (req = request, res = response) => {
    try {
        const data = await req.body
        const createUser = await db.users.create({
            data: data
        })
        return res.status(201).json({
            success: true,
            message: "User berhasil di buat"
        })
    } catch (error) {
        return res.status(500).json({
            success: false,
            error: error.message
        })
    }
}

// user read
export const user_read = async (req = request, res = response) => {
    try {
        const result = await db.users.findMany({
            take : 10,
            skip:10

        })
        return res.status(200).json({
            success: true,
            data: result
        })
    } catch (error) {
        return res.status(500).json({
            success: false,
            error: error.message
        })
    }
}

selanjutnya kita akan buat variable untuk page

//user_controller.js

import db from "../../prisma/connection"
import { request, response } from "express"

// create user
export const user_create = async (req = request, res = response) => {
    try {
        const data = await req.body
        const createUser = await db.users.create({
            data: data
        })
        return res.status(201).json({
            success: true,
            message: "User berhasil di buat"
        })
    } catch (error) {
        return res.status(500).json({
            success: false,
            error: error.message
        })
    }
}

// user read
export const user_read = async (req = request, res = response) => {
    try {

        // let page =1
        // let limit = 10
        let {page=1, limit=10}= req.query //menghasilkan string
        let skip = (page-1) * limit
        const result = await db.users.findMany({
            //take : 10,
            take : parseInt(limit),
            //skip:10
            skip:skip

        })
        return res.status(200).json({
            success: true,
            data: result
        })
    } catch (error) {
        return res.status(500).json({
            success: false,
            error: error.message
        })
    }
}

sekarang coba kita hit, tanpa query kita sebelumnya sudah memberikan nilai default 1-10.

berhasil

//user_controller.js

import db from "../../prisma/connection"
import { request, response } from "express"

// create user
export const user_create = async (req = request, res = response) => {
    try {
        const data = await req.body
        const createUser = await db.users.create({
            data: data
        })
        return res.status(201).json({
            success: true,
            message: "User berhasil di buat"
        })
    } catch (error) {
        return res.status(500).json({
            success: false,
            error: error.message
        })
    }
}

// user read
export const user_read = async (req = request, res = response) => {
    try {

        // let page =1
        // let limit = 10
        let {page=1, limit=10}= req.query //menghasilkan string
        let skip = (page-1) * limit
        const result = await db.users.findMany({
            //take : 10,
            take : parseInt(limit),
            //skip:10
            skip:skip
        })

        //informasi total data keseluruhan 
        const resultCount = await db.users.count()//integer jumlah total data user

        //generated total page
        const totalPage= Math.ceil(resultCount/limit)

        return res.status(200).json({
            success: true,
            current_page: page - 0, //ini -0 merubah menjadi integer
            total_page : totalPage,
            total_data : resultCount,
            data: result
        })
    } catch (error) {
        return res.status(500).json({
            success: false,
            error: error.message
        })
    }
}

code di atas akan menmpikan jumlah page, current page, total data dan total page.

berhasil.

github repo

Express js Faker js node js

Andi Ismail — Sun, 11 Dec 2022 11:41:42 +0000

mkdir express_faker
cd express_faker
npm init -y //agar jawab otomatis
`enter`

dot env agar kita dapat menggunakan file file yang ada di .env Faker akan mengenarete data faker tapi realistic

npm i @babel/core @babel/node @babel/preset-env @faker-js/faker

npx prisma init
code .

buat file .babelrc

//.babelrc

{
    "presets": ["@babel/preset-env"]
}

lanjut package jso kita hapus "test" dan

//package.json

{
  "name": "express_faker",
  "version": "1.0.0",
  "description": "",
  "main": "./src/index.js",
  "scripts": {
    "dev": "nodemon --exec babel-node ./src/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.20.5",
    "@babel/node": "^7.20.5",
    "@babel/preset-env": "^7.20.2",
    "@faker-js/faker": "^7.6.0",
    "dotenv": "^16.0.3",
    "express": "^4.18.2",
    "prisma": "^4.7.1"
  }
}

selanjuntya kita buka env

//.env

DATABASE_URL="file:./db.sqlite"
PORT=9000

selanjutnya ke schema.prisma

//schema.prisma

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "sqlite"
  url      = env("DATABASE_URL")
}


model Users {
  id          Int       @id @default(autoincrement())
  username    String    @unique
  email       String    @unique
  password    String
  createdAt   DateTime  @default(now())
  updatedAt   DateTime  @updatedAt
}

selanjutnya buat folder src > controllers || routes || seeds || index.js

npx prisma db push //ototmatis generate prisma client

selesai.
lanjut ke index.js

//index.js

import express from 'express'
import dotenv from 'dotenv'
import user_routes from './routes/user_routes'
dotenv.config()

const {PORT} =process.env
const app = express()

//middleware
app.use(express.json())

//buat route
app.use(user_routes)
// app.get("/api/users", (req, res)=>{
//     res.send("berhasil konek...")
// })

//listener
app.listen(PORT, ()=>{
    console.info("server berhasil dijalankan...")
})

npm run dev

buat file connection.js didalam folder prisma

//connection.js

import { PrismaClient } from "@prisma/client"

const db = new PrismaClient()
export default db

selanjutnya kita akan baut user_controller

//user.controller.js

import db from "../../prisma/connection"
import {request, response} from 'express'

//create user
export const user_create = async(req= request, res= response)=>{
    try{
        const data = await req.body
        const createUser = await db.users.create({
            data : data
        })
        return res.status(201).json({
            success: true,
            message : "user berhasil di buat"
        })
    }catch(error){
        return res.status(500).json({
            success : false,
            error : error.message
        })
    }
}

//user read
export const user_read = async(req= request, res= response)=>{
    try{
        const result = await db.users.findMany()
        return res.status(200).json({
            success: true,
            data : result
        })
    }catch(error){
        return res.status(500).json({
            success : false,
            error : error.message
        })
    }
}

//user_routes

import express from "express";
import { user_create, user_read } from "../controllers/user_controller";
const user_routes = express.Router()

//route create user
user_routes.post("/api/user/create", user_create)
user_routes.get("/api/users/read", user_read)

export default user_routes

selanjutnya kita import ke index.js

//index.js

import express from 'express'
import dotenv from 'dotenv'
import user_routes from './routes/user_routes'

dotenv.config()

const {PORT} =process.env
const app = express()

//middleware
app.use(express.json())

//buat route
app.use(user_routes)
// app.get("/api/users", (req, res)=>{
//     res.send("berhasil konek...")
// })

//listener
app.listen(PORT, ()=>{
    console.info("server berhasil dijalankan...")
})

selanjutnya kita akan melakukan testing, yang kita gunakan adalah extension dari vs code dengan nama rest client, buat file tester.rest

//tester.rest

### create data siswa

POST http://localhost:9000/api/user/create
Content-Type: application/json 

{
    "username" : "andiismail",
    "email" : "andi@andi.com",
    "password" : "Jl H. Midi Limo Depok"
}


### read all user
GET http://localhost:9000/api/users/read 
Content-Type: application/json

perhatikan untuk untuk email dan password gak boleh sama, karena di auniq sehingga hanya bisa ngehit sekali saja di send request, untuk yang kedua gunakan email dan password yang beda.

sekarang masuk ke pembahasan inti yaitu faker, dan disini kita butuh looping. Buat file users_seed.js di folder seeds
seeds.

//users_seed.js

import { faker } from "@faker-js/faker";

const fake_username = faker.name.fullName()
const fake_email = faker.internet.email()
const fake_password =faker.internet.password()

console.info({fake_username, fake_email, fake_password})

tambahkan di package.json

//package.json

{
  "name": "express_faker",
  "version": "1.0.0",
  "description": "",
  "main": "./src/index.js",
  "scripts": {
    "dev": "nodemon --exec babel-node ./src/index.js",
    "users_seed":"babel-node ./src/seeds/users_seed.js" //tambahkan yang ini
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.20.5",
    "@babel/node": "^7.20.5",
    "@babel/preset-env": "^7.20.2",
    "@faker-js/faker": "^7.6.0",
    "@prisma/client": "^4.7.1",
    "dotenv": "^16.0.3",
    "express": "^4.18.2",
    "prisma": "^4.7.1"
  }
}

jalankan npm run users_seed

berhasil mengenerate data name, email dan password.
sekarangkita looping hanya username

//users_seed.js

import { faker } from "@faker-js/faker";
import db from "../../prisma/connection";
// const fake_username = faker.internet.userName()
// const fake_email = faker.internet.email()
// const fake_password =faker.internet.password()
// console.info({fake_username, fake_email, fake_password})

const users_seed = ()=>{
    const fake_username = faker.internet.userName()
    const fake_email = faker.internet.email()
    const fake_password =faker.internet.password()

    db.users.create({
        data : {
            username : fake_username,
            email : fake_email,
            password : fake_password
        }
    })
    .then(res=>console.info(`username ${res.username} berhasil dibuat ...`))
    .catch(err=>console.error(err.message))
}
users_seed()

buat looping untuk 100 username fake

//users_seed.js

import { faker } from "@faker-js/faker";
import db from "../../prisma/connection";
// const fake_username = faker.internet.userName()
// const fake_email = faker.internet.email()
// const fake_password =faker.internet.password()
// console.info({fake_username, fake_email, fake_password})

const users_seed = ()=>{
    const fake_username = faker.internet.userName()
    const fake_email = faker.internet.email()
    const fake_password =faker.internet.password()

    db.users.create({
        data : {
            username : fake_username,
            email : fake_email,
            password : fake_password
        }
    })
    .then(res=>console.info(`username ${res.username} berhasil dibuat ...`))
    .catch(err=>console.error(err.message))
}
// users_seed()
for (let i=0; i<100; i++){
    users_seed()
}

sekarang hidupkan kembali server nodemonnya dengan

npm run dev

kalau kita read all user dengan hit send request maka akan terbaca 100 data.

github repo

Express js model routes controller

Andi Ismail — Tue, 06 Dec 2022 07:00:24 +0000

mkdir express_mrc
cd express_mrc
npm init -y
npm install express prisma dotenv
npm install -D @babel/core @babel/node @babel/preset-env
(babel hanya kita install di Develop saja, dikarenakan prisma masih menggunakan es-5 yang sintaksnya berbeda dengan react dan next js sudah menggunakan es-6)
npx prisma init

ganti database url menggunakan sqlite dan port 9000

//.env

DATABASE_URL="file:./db.sqlite"
PORT=9000

ganti provider data resource db dengan sqlite dan buat model data siswa

//schema.prisma

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "sqlite"
  url      = env("DATABASE_URL")
}

model DataSiswa {
  id                Int       @id @default(autoincrement())
  nama_lengkap      String    
  usia              Int
  alamat            String
  phone             String
  email             String    @unique
  nis               String
  createdAt         DateTime  @default(now())
  updatedAt         DateTime  @updatedAt
}

npx prisma db push

otomatis aka menjalankan generate, akan muncul otomatis db sqlite file di folder prisma

buat file baru connection.js yang berada di folder prisma

//connection.js

import { PrismaClient } from "@prisma/client";
const db = new PrismaClient()
export default db

buat file baru bernama .babelrc . babel adalah berfungsi sebagai compiler yang akan mengubah code kita sama dengan react dan next js

//.babelrc

{
    "presets":["@babel/preset-env"]
}

di package.json tambahkan src/index.js
sebelumnya install nodemon npm install -g nodemon secara global, cek apakah sudah terinstall nodemon nodemon -v kalau sudah terinstall gak usah npm install lagi untuk menjalankan server disisi development jadi ketika ada perubahan dia akan otomatis kerestart servernya gak usah manual stop server ketika melakukan perubahan disisi code

//package.json

{
  "name": "express_mrc",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "scripts": {
    "dev": "nodemon --exec babel-node ./src/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@prisma/client": "^4.7.1",
    "dotenv": "^16.0.3",
    "express": "^4.18.2",
    "prisma": "^4.7.1"
  },
  "devDependencies": {
    "@babel/core": "^7.20.5",
    "@babel/node": "^7.20.5",
    "@babel/preset-env": "^7.20.2"
  }
}

selesai tahap instalasi, selanjutnya buat folder utama src didalamnya terdapat folder controller dan folder routes, untuk modelnya sudah dibuatkan sama schema.prisma

//index.js

import express from 'express'
import env from 'dotenv'
env.config()

const app = express()
const PORT = process.env.PORT

//middleware
app.use(express.json())

//route
app.get("/", (req, res)=>{
    res.status(200).json({
        success :true,
        message : "Berhasil terhubung ke beckend"
    })

})

app.listen(PORT, ()=>{
    console.info("Server berhasil berjalan...")
})

env.config untuk membaca file .env tulisan PORT karena mengikuti file .env yang tulisannya besar semua PORT=9000. file .env .gitignore node module tidak di push ke github. middle ware json berfungsi menangkap body dengan bentuk json. route, method yang digunakan get, ada ufnction didalamnya ada request dan response, objek didalam method json . setiap memberikan respon kita kasih status, statusnya (200), menampilkan pesan success true

trakhir kita buat method listen POSRT console.info ('berhasil berjalan....)

jalankan app

npm run dev

menampilkan cmd dan localhost:9000

selanjutnya kita akan pisahkan controller dan route, buat siswa_controller.js

//siswa.controller.js

import {reques, request, response} from 'express'
import db from "../../prisma/connection"

//create data siswa
export const siswa_create = async(req=request, res=response)=>{
    try{
        const data = await req.body
        const createDataSiswa = await db.dataSiswa.create({
            data : data
        })
        return res.status(201).json({
            success :true,
            data : createDataSiswa
        })
    } catch (error){
        return res.status(500).json({
            success : false,
            error : error.message
        })
    }

}

//read data siswa
export const siswa_read = async (req=request, res=response)=>{
    try{
        const result = await db.dataSiswa.findMany()
        return res.status(200).json({
            success : true,
            data : result
        })
    }catch(error){
        return res.status(500).json({
            success : false,
            error : error.message
        })
    }
}

selesai controller, selanjutnya ke routes buat file siswa_routes.js

//routes/siswa_routes.js

import express from "express"
import { siswa_create, siswa_read } from "../controllers/siswa_controller"

const siswa_routes = express.Router()
siswa_routes.post("/api/siswa/create", siswa_create)

//route read siswa
siswa_routes.get("/api/siswa/read", siswa_read)

export default siswa_routes

routes sudah jadi, selanjutnya kita ganti routes yang ada di index

//index.js

import express from 'express'
import env from 'dotenv'
import siswa_routes from './routes/siswa_routes'
env.config()

const app = express()
const PORT = process.env.PORT

//middleware
app.use(express.json())

//route
app.use(siswa_routes)
// app.get("/", (req, res)=>{
//     res.status(200).json({
//         success :true,
//         message : "Berhasil terhubung ke beckend"
//     })
// })

app.listen(PORT, ()=>{
    console.info("Server berhasil berjalan...")
})

install rest client, untuk melakukan rest, bisa thunder client atau aplikasi terpisah seperti postman.

buat file baru tester.rest

//tester.rest

### create data siswa
//disini harusnya muncul tulisan send request
POST http://localhost:9000/api/siswa/create
Content-Type: application/json

//disini kasih kosong, untuk header

{
    "nama_lengkap" : "Andi Ismail",
    "usia" : 20,
    "alamat" : "Jl H. Midi Limo Depok",
    "phone" : "081212345678",
    "email" : "andi1@andi.com", //perhatikan ini uniq 
    "nis"   : "123456789"
}

tekan tulisan sent request nanti akan muncul respon disebelah kanannya dan berhasil menambahkan data.

sekarang kita tambahkan read data siswa

//tester.rest

### create data siswa

POST http://localhost:9000/api/siswa/create
Content-Type: application/json

{
    "nama_lengkap" : "Andi ",
    "usia" : 25,
    "alamat" : "Jl H. Midi Limo Depok",
    "phone" : "081212345678",
    "email" : "andi123@andi.com",
    "nis"   : "123456789"
}

### read data siswa
GET http://localhost:9000/api/siswa/read 
Content-Type: application/json

Berhasil membuat create data dan read data.

github repository

Cover letter

Andi Ismail — Sun, 04 Dec 2022 15:10:04 +0000

[Tunjukkan portofolio dengan skill yang diminta]
[Tanya ke klien, agar ada komunikasi]
[CTA]
[Nama]

[List semua portofolio]

My biggest laravel and vue project is https://produkmu.id, there I use Laravel 9.x and Vue 2.7. You can also read in my medium here: url. Working with 2.6 will be easy for me. Are you going to use latest Vue 3.0 for this project?

Contact me anytime and I will be more than happy to help you.

Andi

Below is my complete portofolio:
1.
2.

CONTOH UNTUK COVER LETTER BAGI YANG BELUM PUNYA SKILL, dan HANYA MEDIUM:

For laravel and vue, you can check in my https://medium.com/@andi/ysdkjhdu. I use Laravel 9 and Vue 2.7. Working with 2.6 will be easy for me. Are you going to use latest Vue 3.0 for this project?

Contact me anytime and I will be more than happy to help you.

Andi

Below is my complete portofolio:
1.
2.
3.

Express handle request body

Andi Ismail — Sat, 03 Dec 2022 08:06:22 +0000

git clone https://github.com/andiks2018/JvalleyExpress-membuatApi.git express_req_body
cd express_req_body
npm install //akan install deppendency yang kita butuhkan
dir
code .
npx prisma db push

ada error env prisma hilang sehingga db psuh gak bisa dilakukan, kita buat file baru namanya .env
npm install -g nodemon
npm run dev //menjalankan aplikasi

//.env

DATABASE_URL = "file:./db.slite" //database berbentuk file

sekarang kita ulangi kembali prisma db push

kita menggunakan nodemon untuk menjalankan express,

//package.json

{
  "name": "express_simpleapi",
  "version": "1.0.0",
  "description": "",
  "main": "app/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "nodemon --exec babel-node app/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@prisma/client": "^4.7.1",
    "cors": "^2.8.5",
    "dotenv": "^16.0.3",
    "express": "^4.18.2",
    "prisma": "^4.7.1"
  },
  "devDependencies": {
    "@babel/cli": "^7.19.3",
    "@babel/core": "^7.20.5",
    "@babel/node": "^7.20.5",
    "@babel/preset-env": "^7.20.2"
  }
}

kita buat file tester.rest

//tester.rest (akan muncul tulisan send request)

### create notes

POST http://localhost:9000/note/create?title=test title&content=ini kontentnya&author=andiismail

kita klik send request akan muncul response 200

sekarang kita buat read notenya, klik send request dan lihat responsnya

### read notes
GET http://localhost:9000/note/read

ini hasilnya

kita ganti const{title, content, author}= req.querymenjadi const{title, content, author}= req.body

untuk mnghabdle data json, kita perlu middle ware

//index.js

// sekaramg kit sudah bisa menggunakan es-6 di javascript
import express from "express";
import db from "../prisma/connection";

const app = express()

//midleware
app.unsubscribe(express.json())


//route
app.post("/note/create", async (req, res)=>{
    //console.log(req.headers)

    const{title, content, author}= req.body
    const createNote = await db.notes.create({
        data : {
            title : title,
            content : content,
            author:author
        }
    })
    res.status(200).json({
        //success :true,
        //message:"server berhsil terhubung"
        success : true,
        data : createNote  
    })
})

//params
app.get("/note/read", async(req, res)=>{
    const readNotes = await db.notes.findMany()

    res.status(200).json({
        success :true,
        data : readNotes
    })
})

//listener
app.listen(9000, ()=>{
    console.log('server beckend berjalan..')
})

kita sebelumnya telah merubah dari query menjadi body serta menabah middleware. selanjuntnya kita buat file note_routes.js

kita cut file di index.js get dan post (//params dan //route).

//route
app.post("/note/create", async (req, res)=>{
    //console.log(req.headers)

    const{title, content, author}= req.body
    const createNote = await db.notes.create({
        data : {
            title : title,
            content : content,
            author:author
        }
    })
    res.status(200).json({
        //success :true,
        //message:"server berhsil terhubung"
        success : true,
        data : createNote  
    })
})

//params
app.get("/note/read", async(req, res)=>{
    const readNotes = await db.notes.findMany()

    res.status(200).json({
        success :true,
        data : readNotes
    })
})

kita pindahkan ke note_routes.js ganti app jadi note_routs

//note_routes.js

import express from "express";
import db from "../../prisma/connection"
const note_routes = express.Router()

//route
note_routes.post("/note/create", async (req, res)=>{
    //console.log(req.headers)

    const{title, content, author}= req.body
    const createNote = await db.notes.create({
        data : {
            title : title,
            content : content,
            author:author
        }
    })
    res.status(200).json({
        //success :true,
        //message:"server berhsil terhubung"
        success : true,
        data : createNote  
    })
})

//params
note_routes.get("/note/read", async(req, res)=>{
    const readNotes = await db.notes.findMany()

    res.status(200).json({
        success :true,
        data : readNotes
    })
})

export default note_routes

kita kembali ke index.js

//index.js

import express from "express";
import note_routes from "./routes/note_routes";

const app = express()

//midleware
app.use(express.json())

//listener
app.listen(9000, ()=>{
    console.log('server beckend berjalan..')
})

masih error,

https://www.youtube.com/watch?v=l8WPWK9mS5M
https://www.youtube.com/watch?v=4T6EXrxwctI&t=4526s