mkdir express_simpleApi
cd express_simpleApi
npm init -y //akan menjawab yes untuk semua pertanyaan
npm install express dotenv prisma cors
npm install -D @babel/core @babel/node @babel/preset-env @babel/cli
karena express masih menggunakan javascript es-5 maka kita gunakan babel sebagai compiler agar bisa digunakan es-6.
npm install -D //artinya kita menginstall aplikasi hanya sampai di tahap develop, nanti akan di generate menajdi apk biasa
buat file .babelrc
// .babelrc
{
"presets": ["@babel/preset-env"]
}
kita rubah package.json kita akan gunakan node monitor
//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": {
"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 install nodemon
npm install -g nodemon
kita buat file index js dalam folder app
//index.js
// sekaramg kit sudah bisa menggunakan es-6 di javascript
import express from "express";
const app = express()
//listener
app.listen(9000, ()=>{
console.log('server beckend berjalan....')
})
ini hasilnya
//index.js
// sekaramg kit sudah bisa menggunakan es-6 di javascript
import express from "express";
const app = express()
app.get("/", (req, res)=>{
res.status(200).send("server terhubung..")
})
//listener
app.listen(9000, ()=>{
console.log('server beckend berjalan..')
})
ganti menggunakan bectick
app.get("/", (req, res)=>{
res.status(200).send(`
<h1>Hello Express JS</h1>
`)
})
kita tidak menggunakan send tapi json.
//route
app.get("/", (req, res)=>{
res.status(200).json({
success :true,
message:"server berhasil terhubung"
})
})
install json view extension chrome, hasilnya jadi beda.
selanjutnya kita ke network, refresh akan muncul localhost, klik 2 kali
kita akan baca hasil dari req dengan console.log
//route
app.get("/", (req, res)=>{
console.log(req.headers) //lihat hasil req
res.status(200).json({
success :true,
message:"server berhsil terhubung"
})
})
hasil dari console log tidak terlihat di inspect disisi client, melainkan disisi beckend /terminal.
sekarang kita coba kirim query, kita akan coba menampilkan query dan title
//route
app.get("/note/create", (req, res)=>{
//console.log(req.headers)
const{title, content}= req.query
res.status(200).json({
//success :true,
//message:"server berhsil terhubung"
success : true,
data : {
title : title,
content : content
}
})
})
masih kosong, kita harus ini title dan contentnya. isi http://localhost:9000/note/create?title=ini title&content=ini content blog saya
kemudian enter
kita sudah berhasil menangkap query dan sekarang kita akan menangkap params, kita masih menggunakan method get. params=1
//params
app.get("/note/read/:id", (req, res)=>{
const {id} = req.params
res.status(200).json({
success :true,
data : {
id:id
}
})
})
sekarang kita ke prisma jalankan dengan
npx prisma init
//env
DATABASE_URL="file:./db.sqlite"
//schema.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
}
`npx prisma db push`
selanjutnya kita jalankan prisma db push, maka dan otomatis akan mengenerate prisma tanda berhasil akan muncul file db.sqlite
selanjutnya kita buat connection.js
//connection.js
import {PrismaClient} from "@prisma/client"
const db = new PrismaClient
export default db
sebenarnya bisa langsung mengganti get ke post tapi tidak kelihatan disi client , jadi pakai get aja dulu. app.get("/note/create",
//index.js
// sekaramg kit sudah bisa menggunakan es-6 di javascript
import express from "express";
import db from "../prisma/connection";
const app = express()
//route
app.get("/note/create", async (req, res)=>{
//console.log(req.headers)
const{title, content, author}= req.query
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/:id", 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..')
})
data masih 0
sekarang kita isi, cara isinya di urlnya %20 = spasi
sekarang kita buka lagi note read sudah terisi sesuai dengan apa yan gkita inputkan
sekarang kita buka read note maka akan muncul dua data
//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"
}
}
Top comments (0)