JOBSHEET DASAR PROGRAM KEAHLIAN

REKAYASA PERANGKAT LUNAK

JUDUL TUGAS/PROYEK : NODE JS

1. IDENTITAS JOBSHEET
Nama Penyusun : MGMP RPL
Satuan Pendidikan : SMKN 1 PONOROGO
Mata Pelajaran : Program Keahlian RPL
Tahun Penyusunan : 2024/2025
Fase / Kelas : F/11
Elemen : Node JS/Backend
Alokasi Waktu : 12

2. CAPAIAN PEMBELAJARAN

Pada akhir fase F, peserta didik mampu memahami konsep dan menerapkan perintah
HTML, CSS, pemrograman Javascript, bahasa pemrograman server-side serta
implementasi framework pada pembuatan web statis dan dinamis untuk beragam
kebutuhan yang kontekstual. Selain itu, peserta didik juga mampu mendokumentasikan
serta mempresentasikan web statis dan dinamis yang telah dikembangkan.

3. TUJUAN PEMBELAJARAN
- memahami konsep API, Restful API.
- Memahami dasar pembutan expres js
- Membuat api untuk get,post,put, delete.

4. ALAT DAN BAHAN

a. Komputer / Laptop
b. Text Editor (VS Code / Sublime Text / Notepad++)
c. plugins Thunder Client di VS Code
d. Materi dan tutorial dokumentasi express js
(https://expressjs.com/en/starter/installing.html)

5. ASPEK KESELAMATAN DAN KESEHATAN KERJA

a. Pastikan posisi duduk ergonomis untuk menghindari cedera
b. Istirahatkan mata setiap 20 menit dengan melihat objek jauh
c. Jaga kebersihan dan kerapihan area kerja
d. Gunakan perlatan elektronik sesuai dengan petunjuk penggunaan

6. PETUNJUK
a. Awali setiap aktivitas dengan do'a, semoga berkah dan mendapat kemudahan.
b. Pahami tujuan, dasar teori, dan latihan-latihan praktikum dengan baik dan benar.
 c. Kerjakan tugas-tugas praktikum dengan baik, sabar, dan jujur.
d. Tanyakan kepada guru apabila ada hal-hal yang kurang jelas.

7. DASAR TEORI
a. API
API singkatan dari Application Programming Interface adalah kumpulan aturan /
code yang membuat 2 program atau lebih dapat berkomunikasi. API menjadi
jembatan antar sistem yang menghubungkan client (program yang membutuhkan
data) dengan server (database).

Biar lebih kebayang gimana implementasi API di real case, yuk cermati beberapa
contoh API di bawah ini:

API Qantas
Qantas adalah maskapai penerbangan asal Australia yang menyediakan layanan
booking tiket melalui website mereka. Qantas juga menyediakan API berisi data
pemesanan tiket pesawat bagi platform lain, sehingga kita bisa melihat jadwal
keberangkatan, harga tiket, dan ketersediaan kursi dari aplikasi lain.

API Facebook
Pernah menggunakan akun Facebook untuk login ke sebuah platform? Facebook
menyediakan API untuk mengintegrasikan akun user ke aplikasi dan web service
lainnya. Facebook API biasanya digunakan sebagai fitur login with Facebook,
menampilkan fanpage atau profile Facebook user di website atau platform berjualan
lainnya.

API Google Maps

Seperti yang sudah dicontohkan pada awal artikel, Google Maps menyediakan
API berisi data peta yang dapat digunakan aplikasi ojek online dan pesan antar
makanan. Fitur dalam API Google Maps menyediakan penghitungan jarak, pemilihan
rute, dan kondisi lalu lintas yang memudahkan tim developer untuk memasukan fitur-
fitur ini ke dalam aplikasi mereka.

IMDb API
IMDb atau Internet Movie Database adalah situs web seputar perfilman berisi
rincian aktor, sutradara, scriptwriter, tahun dan tanggal rilis, rating, dan sebagainya.
IMDb juga menyediakan API yang digunakan untuk ulasan film pada aplikasi
streaming film dan website penyedia tontonan film.

WordPress REST API

Apakah kamu salah satu pengguna berbagai plugin WordPress? Ribuan plugin ini
muncul karena WordPress menyediakan API untuk dapat dihubungkan dengan
aplikasi / website lain. Database WordPress yang bersifat open source ini membantu
para developer dalam mengintegrasikan platform mereka dengan WordPress.
b. Cara Kerja API
Setelah memahami apa itu API beserta gambaran penggunaannya melalui
beberapa contoh di atas, kamu perlu tau bagaimana cara kerja API.‍

API memungkinkan komunikasi antar platform melalui siklus request - respons.

Aplikasi yang membutuhkan data dari layanan atau server lain (client) mengirimkan
permintaan, yang disampaikan melalui protokol API, dan data yang diperlukan
dikirim kembali dari server.‍

Client dapat berkomunikasi dengan server, memanipulasi data, mengambil data

yang ada di server tersebut tanpa merusak atau merubah data asli di dalam server. Hal
ini dimungkinkan karena adanya protocol yang mengatur, sehinga API tidak akan
merubah apapun di luar aturan yang berlaku.

c. API Protocol
Seperti yang dijelaskan dalam cara kerja API, ketika client melakukan request
maka API akan datang ke server dengan serangkaian panggilan. Nah dalam proses ini
terdapat aturan yang mengatur penggunaan dan penerapan panggilan.

Sekumpulan aturan untuk mengatur penggunaan database dalam server ini

dinamakan API Protocol. API Protocol mendefinisikan perintah yang diterima dan
tipe data yang diperlukan, sekaligus menetapkan standar tertentu untuk penggunaan
API.
d. RESTful API
Ada berbagai API Protocol yang bisa kamu gunakan seperti SOAP, REST, JSON-
RPC, gRPC, GraphQL, XML-RPC, Apache Thrift. Kali ini API Protocol yang akan
kita bahas lebih mendalam adalah REST API.‍

REST atau Representational State Transfer adalah gaya arsitekturial dan

pendekatan komunikasi yang bersifat stateless dan menggunakan HTTP/HTTPS
untuk transmisi data. API yang menggunakan protokol REST disebut RESTful API.
e. Endpoint
Endpoint adalah Uniform Resource Locator (URL) yang bertindak sebagai kontak
antara klien API dan server API. ReST API pada umumnya memiliki banyak
endpoint yang sesuai dengan sumber daya yang tersedia. API endpoint bekerja
dengan menghubungkan klien API dan server API serta menangani transfer data di
antara keduanya.

f. Express js
 Express.js adalah framework web app untuk Node.js yang ditulis dengan bahasa
pemrograman JavaScript. Framework open source ini dibuat oleh TJ Holowaychuk
pada tahun 2010 lalu.

Express.js adalah framework back end. Artinya, ia bertanggung jawab untuk

mengatur fungsionalitas website, seperti pengelolaan routing dan session, permintaan
HTTP, penanganan error, serta pertukaran data di server.

Nah, framework yang satu ini punya arsitektur MVC (Model View Controller).
Dengan begitu, setiap data diolah pada Model, dihubungkan melalui Controller, lalu
ditampilkan menjadi informasi melalui View.

8. Langkah Kerja

Membuat Folder
Gambar Langkah-langkah
1. install thunder client di vs code
dengan cara tekan ctrl+shift+x
ketikkan thunder client dan
install /gambar belum
2. Buka explorer pada drive d: atau
selain c dan kemudian buat folder
baru dengan nama perpus
Kemudian di dalam folder
bukutamu membuat folder backend
dan frontend
3. masuk dalam folder backend dan
buka terminal dan ketikan npm init
4. masukkan package name default
enter, kemudian version enter,
untuk description bisa di isi bisa
dikosongi dengan langsung
menekan enter, untuk entry point
isikan dengan app.js, test command
 tekan enter, git repository tekan
enter bisa di isikan nanti, keyword
kosong, author isikan nama kalian,
licence tekan enter, jika muncul Is
this OK ?(yes) tekan enter.

5. install 5 package express,mysql2l,

body-parser yang berfungsi untuk ,
dengan cara mengetikkan perintah
berikut di terminal

npm install express

mysql2 body-parser
multer

6. membuat folder src dan didalam

folder src ada folder controllers,
models,routes, middleware,
migration dengan cara mengetikkan
perintah ini di terminal
mkdir src\controllers tekan enter
mkdir src\models tekan enter
mkdir src\routes tekan enter
mkdir src\middleware tekan enter
mkdir src\migration tekan enter
 7. buka vscode dengan cara
mengetikan perintah ini di terminal
code . enter
8. buat file app.js di dalam folder src

9. buka vscode dengan cara

mengetikan perintah ini di terminal
code . enter

Membuat Model, Controller, Routes pada user

10. Dalam pengembangan aplikasi,
koneksi ke database adalah
langkah penting. Mari kita buat
file db.js di folder models untuk
menghubungkan aplikasi kita
ke MySQL. Berikut adalah
langkah-langkahnya.
Parameter Koneksi
Ada empat parameter utama
yang perlu kita isi:

Host: Karena kita

menggunakan server lokal, kita
akan mengisi dengan localhost.
User: Jika Anda menggunakan
XAMPP, biasanya user-nya
 adalah root.
Password: Untuk default
password XAMPP, biarkan
kosong.
Database: Anda bisa
menentukan nama database
sesuai keinginan. Dalam contoh
ini, kita akan menggunakan
perpusrendra_db yang
merupakan kombinasi nama
database perpus dengan inisial
nama Anda.

11. Isikan file app.js dengan isi

berikut.

12. jalankan server dengan

mengetikkan node src/app.js.

13. membuat file routes.js yang

digunakan untuk menentukan
entry point yang digunakan di
folders routes. Membuat file
user.js di folder models yang
digunakan untuk operasi yang
berhubungan dengan database
khususnya tabel users.
Membuat file migration.js
digunakan untuk pembuatan
database, dan tabel jika belum
terbuat akan otomatis membuat.
Membuat userController.js
untuk untuk penghubung
antara userRoutes.js(pengatur
endpoint users) dan user.js yang
berisi dengan operasi-operasi
sql di tabel users. Membuat file
 authMiddleware.js yang
digunakan untuk membuat
token ketika login dan
mencocokkan token yang
dikirim dari frontend, dan
bertugas untuk menghapus
token ketika melakukan proses
logout.

14. Isikan file migration yang

masih kosong dengan script di
sebelah.
Penjelasannya membuat
cosntanta konekMysql yang
berfungsi konek ke mysql.

15. di baris selanjutnya kita

membuat arrow function yang
bernama createUserTable
dengan parameter koneksi.
function ini digunakan untuk
membuat table user, dan
function ini akan dipanggil di
function migration
16. di baris selanjutnya kita
membuat arrow function yang
bernama migration. function ini
digunakan untuk
mengkoneksikan ke mysql dan
melakukan pembuatan database
jika database yang kita
difinisikan belum dibuat. jika
sudah berhasil membuat
membuat constanta koneksi
yang import ke file db dengan
perintah require. selanjutnya
memanggil function
createUserTable dan
 mengisikan dengan koneksi.
dan terakhir mengakhiri
koneksi yang ke mysql.
17. edit app.js dengan
menambahkan di line 3
membuat konstanta migration
require dari file migration, dan
line 7 mengeksekusi konstanta
migration. di terminal yang tadi
kalian tekan ctrl+c untuk
mengakhiri
dan jalankan lagi dengan
menekan node src/app.js

18. buka file user.js dan isikan

function selectUser dengan
parameter callback. function ini
digunakan untuk menampilkan
semua record di tabel user.

19. membuat file userController

disimpan di folder controllers,
file ini digunakan untuk
mengontroll segala sesuatu
yang berhubungan dengan table
user, untuk step saat ini kita
membuat function index yang
digunakan untuk menampilkan
semua data dari tabel users. di
function ini kita memanggil
function selectUser dari file
user.js yang sudah kita import
di line 1
20. buka file routes.js dan isikan
seperti source di sebelah. Di
line pertama kita membuat
konstanta express untuk
menampung hasil import dari
package express. kemudian
 membuat konstanta router yang
digunakan untuk menampung
package router. di line 4 kita
membuat endPoint dengan
alamat /users dan methode get.
jadi ketika ada request dengan
methode get, dengan alamat
localhost:3000/api/users maka
akan mengeksekusi function
index yang berada di
userController.js

21. edit file app.js tambahkan

konstanta routes yang import
dari file routes.js dari folder
routes di line 4. dan
menggunakan routes dalam
applikasi di line10. kemudian
kita coba lagi dengan
mengetikkan node src/app.js
22. buka thunder client dan isikan
alamatnya dengan
http://localhost:3000/api/users
dengan methode get, nanti akan
muncul hasil kosong karena
tabel users masih kosong
records

Menambahkan data users

23. install package baru bcryptjs

digunakan untuk mengenkripsi
password
24. Edit file user.js tambahkan
constanta bcrypt dengan
mengimport package bcryptjs.
dan menambahkan arrow
function yang bernama
insertUser dengan parameter
nama, email, password dan
 callback. untuk pertama kali
kita cek password ada atau
tidak jika kosong maka akan
mengirimkan error password
harus di isi. kalau kosong tidak
kosong maka membuat
hashedpassword yang
digunakan untuk menampung
password yang sudah di
enkripsi dengan metode hash.
25. Edit file userController.js buat
arrow function bernama
storeUser yang berisikan
pemanggilan function
insertUser dari user.js

26. Edit file routes.js dengan

menambahkan method post
dengan alamat /users dengan
memanggil function storeUser
di userController
27. Stop server dengan menekan
ctrl+c kemudian, jalankan lagi
dengan menekan node
src/app.js
28. Buka thunder client dan
membuat request baru dan
mengisikan dengan method
post dan url
http://localhost:3000/api/users
dan mengisikan di body dengan
json seperti ini
{
"nama":"joko susilo",
"email":"a1@da.com",
 "password": "asolole"
}

29. buat request baru atau buka

request yang menggunakan
methode get dengan alamat
localhost/api/users untuk
memastikan data yang
dimasukkan apakah benar
sudah tersimpan

Ambil data user berdasarkan id

30. edit user.js, tambahkan arrow
function selectUserById dengan
juga tambahkan di
module.export
31. edit file userController.js
tambahkan function showUser
yang digunakan untuk
memanggil function
selecUserById yang berada di
user.js, serta tambahkan
module.export untuk showUser

32. edit file routes.js di line 7 untuk

alamat nya /users/:id dengan
methode get
untuk tanda :id artinya
mendeklarasikan sebuah
parameter yang namanya id
yang nantinya bisa
dimanfaatkan di sisi backend

33. Stop server dengan menekan

ctrl+c kemudian, jalankan lagi
dengan menekan node
 src/app.js

34. Lakukan langkah 28, untuk

mengisikan data lebih dari satu
user. dan pastikan untuk nama
email berbeda karena untuk
email bersifat unique tidak
boleh ada yang sama, lakukan
pengisian beberapa kali untuk
bisa membedakan select all user
dan select berdasarkan id
35. sekarang kita lakukan buat new
request di thunder client beri
nama showuser dan isikan
methode get, dan alamatnya
localhost:3000/api/users/1
Update data users
36. edit user.js tambahkan function
updateUser dengan parameter
id,nama,email,password dan
callback. disini ada dua proses
jika passwordnya kosong
berarti field password tidak ikut
di rubah, kalau isi password
ikut di ubah. jangan lupa
tambahkan nama function ke
dalam module.export

37. edit userController buat

function updateUser, untuk
const id diambil dari params,
untuk nama,email, password
diambil dari body.

38. edit routes.js, isikan setting end

point dengan method put dan
memakai parameter id di line 8

39. Stop server dengan menekan

ctrl+c kemudian, jalankan lagi
dengan menekan node
src/app.js
40. untuk mencoba edit, kita
melakukan select user
berdasarkan id terlebih dahulu

41. disini kita mau merubah nama

dan email dan password user
dengan id 1
 42. Kita coba select user by id
apakah datanya benar-benar
berubah

Menghapus data user berdasarkan id

43. edit user.js tambahkan function
deleteUser dengan parameter id
untuk menghapus data user

44. edit userController.js tambahkan

function destroyUser dengan
parameter id, serta menambahkan
untuk module.export

45. edit routes.js tambahkan endpoint

dengan method delete dan
alamatnya /users/:id di line 9

46. Stop server dengan menekan ctrl+c

kemudian, jalankan lagi dengan
menekan node src/app.js

47. buka thunder client dan tuliskan

alamat nya
localhost:3000/api/user/1 dan
method delete

48. untuk cek apakah datanya bener2

hilang kita bisa tuliskan alamat
nya localhost:3000/api/user/1 dan
method get

9. Tugas
 LAMPIRAN
Gambar Lampiran 1
Gambar Lampiran 3
Gambar Lampiran 2
Gambar Lampiran 4