(Part 1) Membuat CRUD sederhana menggunakan Node Js, Express Js, Prisma, dan PostgreSQL

Persiapan

Sebelum kita mulai membuat CRUD sederhana ini, kalian diharuskan sudah menginstall beberapa alat yang akan digunakan, berikut adalah alatnya:

1. Node Js
2. PostgreSQL
3. Postman atau Insomnia

Pembuatan Program

Install express generator

Setelah anda sudah mempersiapkan alat yang digunakan, yang pertama kalian lakukan adalah menginstall express generator, dimana nanti kita akan menggunakan express generator agar kita tidak perlu mengkonfigurasi server atau hal lainnya, karena itu akan ditangani oleh express generator tersebut.

• Jalankan command berikut pada terminal kalian

npm install -g express-generator

• Setelah selesai, coba kalian jalankan command berikut pada terminal kalian

express -h

Jika terminal menampilkan seperti berikut, maka express generator kalian berhasil diinstal

• Setelah express generator berhasil diinstall, sekarang kita persiapkan folder dengan nama bebas yang digunakan untuk menampung projek kita nantinya, setelah itu buka terminal pada folder tersebut dan jalankan perintah berikut

express --no-view --git

--no-view digunakan untuk membuat project express generator tanpa view, karena disini kita akan membuat backend untuk Rest Api
--git digunakan untuk membuat git ignore agar saat nanti kita push kedalam github, file atau folder yang tidak penting akan tidak ikut ter push ke dalam repositori

• Setelah itu buka vscode atau code editor lainnya pada project tersebut, jika anda menggunakan vscode, kalian dapat membuka project tersebut melalui command berikut

code .

Menginstall package yang diperlukan

• Setelah project berhasil dibuka, maka tampilannya adalah seperti berikut
• Setelah itu install beberapa package, menggunakan command berikut

npm i nodemon prisma @prisma/client

npm i merupakan perintah yang digunakan untuk menginstall package node, npm i juga merupakan kependekan dari npm install
nodemon merupakan package node yang digunakan untuk melakukan refresh server pada setiap perubahan code yang dilakukan
prisma merupakan package node ORM (Object Relational Mapping) yang mempermudah kita para developer dalam berinteraksi dengan database
@prisma/client merupakan package node tambahan dari prisma agar kita bisa menggunakan perintah tambahan dari prisma seperti prisma studio

Mengubah project menjadi ES6

Pada project ini, saya menggunakan ES6 untuk mempermudah developing saya

• Pada file package.json, tambahkan baris berikut

"type": "module",

Sehingga akan menjadi seperti berikut

• Ubah nama file www pada folder bin menjadi www.js, dan ubah isinya menjadi ES6
• Ubah file app.js menjadi ES6 seperti berikut

import express from 'express'
import path from 'path'
import cookieParser from 'cookie-parser'
import logger from 'morgan'
import { fileURLToPath } from 'url'

import indexRouter from './routes/index.js'
import usersRouter from './routes/users.js'

var app = express();

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
app.use(express.static(path.join(__dirname, '../public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);

export default app

• Ubah folder router file index.js dan users.js menjadi seperti berikut

import express from 'express'
let router = express.Router()

/* GET home page. */
router.get('/', function (req, res, next) {
  res.render('index', { title: 'Express' });
});

export default router

• Pada package.json ubah key scripts menjadi seperti berikut

  "scripts": {
    "start": "node ./bin/www.js",
    "dev": "nodemon ./bin/www.js"
  },

• Jalankan project pada terminal menggunakan command berikut

npm run dev

• Buka browser dan buka localhost:3000, jika tampilannya adalah seperti berikut, maka project anda berhasil diubah menjadi ES6

Kalian jangan bingung dahulu, intinya ES6 dapat mempermudah kita dalam melakukan developing pada project javascript

Persiapan prisma

• Jalankan command berikut pada terminal kalian

npx prisma init --datasource-provider postgresql

setelah menjalankan perintah tersebut, seharusnya akan generate file baru

1. Pada folder prisma dengan nama schema.prisma
2. File .env pada folder root

• Setelah itu, pahami file schema.prisma. Disitu tertera url = env("DATABASE_URL"), yang berarti url database diambil dari file env, agar mengamankan autentikasi database kita. Lalu kita buka file .env pada folder root, lalu ubah database url menggunakan kredensial postgresql anda

postgresql://username:password@host/nama-database?schema=public

prisma akan otomatis membuat database, sehingga kita tidak perlu membuat database secara manual pada postgres

• Setelah kita mengubah database url pada file .env, selanjutnya kita buka lagi file schema.prisma, lalu tambahkan kode berikut pada akhir code

model User {
  id    Int     @id @default(autoincrement())
  email String  @unique
  name  String?
  posts Post[]
}

model Post {
  id        Int     @id @default(autoincrement())
  title     String
  content   String?
  published Boolean @default(false)
  author    User    @relation(fields: [authorId], references: [id])
  authorId  Int
}

model User berarti kita akan membuat tabel User dengan ketentuan berikut

1. id tipe data Int dan merupakan id(primary key) dan default value nya adalah autoincrement, yang berarti setiap data baru maka nilai id akan ditambah
2. email tipe data string dan merupakan unique, sehingga pada tabel user ini, tidak boleh ada data email yang sama
3. name tipe data string dan terdapat tanda "?", yang berarti kolom ini optional sehingga boleh diisi dan juga boleh kosong
4. posts Post[], berarti kolom posts ini adalah relasi kedalam tabel Post dan memiliki relasi 1 to Many. Jika anda ingin membaca mengenai relasi, kalian dapat membaca disini

Selanjutnya, untuk penjelasan model Post kalian dapat membaca disini

• File schema.prisma merupakan file yang berisikan konfigurasi untuk menyambungkan ke database dan juga berisikan model model yang digunakan untuk membuat tabel. Setelah itu jalankan command berikut untuk melakukan migrate

npx prisma migrate dev

Setelah itu masukan nama migrate yang kalian inginkan, misalnya create_user_and_post_table, setelah itu tekan enter

• Setelah melakukan migrate, seharusnya tabel telah dibuat pada database kita. Kita dapat mengecek apakah tabel sudah berhasil dibuat atau belum dengan membuka terminal baru lalu jalankan command berikut

npx prisma studio

tunggu sampai proses selesai, lalu prisma akan membuka browser otomatis untuk menampilkan data pada database kita

Lalu coba klik pada user, maka akan menampilkan data pada tabel user

Penutup

Kita telah berhasil mempersiapkan project kita, dan juga membuat tabel menggunakan bantuan prisma melalui file schema.prisma. Selanjutnya kita akan membuat fungsi CRUD menggunakan prisma.
Jika kalian terdapat kesusahan dalam mengikuti tutorial ini, kalian dapat mengunduh source code part 1 ini disini