(Part 1) Membuat CRUD sederhana menggunakan Node Js, Express Js, Prisma, dan PostgreSQL
Tags: node, prisma, postgres, express
Published: 2022-11-13 08:41:39

## Persiapan
Sebelum kita mulai membuat CRUD sederhana ini, kalian diharuskan sudah menginstall beberapa alat yang akan digunakan, berikut adalah alatnya:
1. [Node Js](https://nodejs.org/en/)
2. [PostgreSQL](https://www.postgresql.org/download/)
3. [Postman](https://www.postman.com/downloads/) atau [Insomnia](https://insomnia.rest/download)

## 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
![Install express](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ou7myv6mqbk2ecetliqc.png)
- 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
```

![Success install express](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ti0s24x9ljg5orv5xn9t.png)


--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
![Project pertama dibuka](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2vgjfj7hbj9uhojl58kh.png)
- 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 ke module](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/viyb5glkwa92sjevwo7b.png)
- Ubah nama file www pada folder bin menjadi www.js, dan ubah isinya menjadi ES6
![ubah www jadi es6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pyadtje2wjo1mwwi967c.png)
- 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"
  },
```

![Package json es6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nkshusxk2j53ljo9hl3g.png)
- 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

![first run](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vutgbdwm78kym60t2ux0.png)

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

![Generate file baru dengan nama schema.prisma](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lumhc3epsnfhhma7xlj0.png)
- 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
![Setting postgresql](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/21jzeb2nqmlmz24gibl8.png)
- 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](https://www.prisma.io/docs/concepts/components/prisma-schema/relations)

Selanjutnya, untuk penjelasan model Post kalian dapat membaca [disini](https://www.prisma.io/docs/getting-started/quickstart)
- 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
![Prisma studio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nu3kc2kwgq2i40kb3sc8.png)
Lalu coba klik pada user, maka akan menampilkan data pada tabel user

![Prisma studio user model](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ta91u1qe9wpo9vrf49ou.png)

### 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](https://github.com/whytrno/dev.to-crud-prisma/tree/part1)