DEV Community

Cover image for Next js Api Prisma SqLite
Andi Ismail
Andi Ismail

Posted on

Next js Api Prisma SqLite

https://nextjs.org/
https://www.postman.com/
https://www.prisma.io/
CRUD API POSTMAN

pnpm crate next-app next_simple_api
Typescrip > No 
Eslint > No
Enter fullscreen mode Exit fullscreen mode
//hello.js

https://nextjs.org/docs/api-routes/introduction
export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}
Enter fullscreen mode Exit fullscreen mode

Image Browser api

//hello.js

export default function handler(req, res) {
  res.status(200).json({
    name: "Andi Ismail",
    age: 36,
    jomblo: false,
  });
}
Enter fullscreen mode Exit fullscreen mode

Image browser edit

ctrl c mematikan server

pnpm install prisma
npx prisma init
Enter fullscreen mode Exit fullscreen mode

ganti psgresql ke sqlite

//.env

DATABASE_URL="file:./db.sqlite"
Enter fullscreen mode Exit fullscreen mode

selanjutnya kita buat model dan mengganti provider dari posgre ke sqlite

//schema.prisma

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

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

model Notes {
  //kolom         Tipe            Option
  id              Int             @id @default(autoincrement())
  title           String
  note            String
  author          String
  createdAt       DateTime        @default(now())
  updatedAt       DateTime        @updatedAt
}
Enter fullscreen mode Exit fullscreen mode

npx prisma generate
npx prisma db push

//package.json

{
  "name": "next_simple_api",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@prisma/client": "^4.6.1", //berhasil 
    "next": "13.0.3",
    "prisma": "^4.6.1",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  }
}
Enter fullscreen mode Exit fullscreen mode

buat file baru db.js di folder prisma

//db.js

import {PrismaClient} from "@prisma/client"
export const db = new PrismaClient()
Enter fullscreen mode Exit fullscreen mode

buat folder baru notes > create.js

//create.js
import { db } from "../../../prisma/db"; 

export default async function handler(req, res){

    if (req.method !== "POST"){
        return res.status(401).json({
            success : false,
            message : "method not allowed"
        })
    }
    try {
        const data = await req.body
        const createNote =await db.notes.create({
            data : data
        })
        return res.status(201).json({
            success : true,
            query : createNote
        })

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

Enter fullscreen mode Exit fullscreen mode

Image postman

dengan menggunakan postman kita akan menangkap req.body di create.js yang telah kita buat. di post man kita buat kita buat new collection, add folder, add request, di body rubah ke raw dan tipe data JSON

Image postman create note

Image error

error disini tertulis note seharusnya notes
const createNote = await db.notes.create({

//create.js

import { db } from "../../../prisma/db";

export default async function handler(req, res) {
  if (req.method !== "POST") {
    return res.status(401).json({
      success: false,
      message: "method not allowed",
    });
  }
  try {
    const data = await req.body;
    const createNote = await db.notes.create({
      data: data,
    });
    return res.status(201).json({
      success: true,
      query: createNote,
    });
  } catch (error) {
    return res.status(401).json({
      success: false,
      error: error.message,
    });
  }
}

Enter fullscreen mode Exit fullscreen mode

Image postman post pertama

selanjutnya kita lihat fitur dari prisma studio sam aseprti seperti php myadmin

npx prisma studio

Image Notes

cuman untuk data base tidak boleh serperti ini sehingga kita harus buat api sendiri.

//read.js

import {db} from "../../../prisma/db"

export default  async function handler (req, res){

    //check req method 
    if (req.method !== "GET"){
        return res.status(401).json({
            success : false,
            message : "req method not allowed"
        })
    }

    try {
        const result = await db.notes.findMany()
        return res.status(200).json({
            success :true,
            query : result
        })
    } catch (error){
        return res.status(401).json({
            success : false,
            error : error.message
        })
    }
}
Enter fullscreen mode Exit fullscreen mode

selanjutnya kita ke postman kembali, untuk menambhakan add request di folder notes, kita beri nama READ NOTES kemudian send

Image read

sekarang sudah bisa baca data di postman selanjutnya kita akan menambahkan delete data

//delete.js

import { db } from "../../../prisma/db"

export default async function handler (req, res){

    if(req.method !=="DELETE"){
        return res.status(401).json({
            success : false,
            message : "req method not allowed"
        })
    }

    try {

        //req query
        const {id} = await req.query
        const deleteNote = await db.notes.delete({
            where : {
                id : parseInt(id)
            }
        })
        return res.status(201).json({
            success : true,
            message : "Berhasil delete data",
            query : deleteNote
        })
    }

    catch (error) {
        return res.status(401).json({
            success : false,
            error : error.message
        })
    }
}
Enter fullscreen mode Exit fullscreen mode

selanjtunya kita ke postman lagi add request DELETE NOTE ubah get jadi DELETE masukkan url seperti read http://localhost:3000/api/notes/delete?id=1

Image delete

selanjutnya kita akan bikin yang terakhir yaitu delete.

//update.js

import { db } from "../../../prisma/db";

export default async function handler (req, res){

    if(req.method !=="PUT"){
        return res.status(401).json({
            success : false,
            message : "method not allowed"
        })
    }
    try {
        const {id} = await req.query
        const newData = await req.body
        const updateNote = await db.notes.update({
            where : {
                id : parseInt(id)
            },
            data : newData
        })
        return res.status(201).json({
            success : true,
            message : "data berhasil di update",
            query : updateNote
        })
    }
    catch (error){
        return res.status(401).json({
            success : false,
            error : error.message
        })
    }
}
Enter fullscreen mode Exit fullscreen mode

selanjutnya kita kepostman, add request ubah menjadi PUT, body > raw > JSON, masukkan url http://localhost:3000/api/notes/update?id=2

Image postman

Image prisma

https://github.com/andiks2018/JvalleyNext-CRUDApiPostmanPrisman.git

Top comments (0)