Persiapan
Sebelum kita mulai membuat CRUD sederhana ini, kalian diharuskan sudah menginstall beberapa alat yang akan digunakan, berikut adalah alatnya:
- Node Js
- PostgreSQL
- 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
- Pada folder prisma dengan nama schema.prisma
- 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
- 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
- email tipe data string dan merupakan unique, sehingga pada tabel user ini, tidak boleh ada data email yang sama
- name tipe data string dan terdapat tanda "?", yang berarti kolom ini optional sehingga boleh diisi dan juga boleh kosong
- 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
Top comments (0)