Contoh Kasus
Disini saya akan mencoba membuat blueprint website sistem pemesanan tiket kereta api dan sedikit contoh implementasinya.
Analisis Kebutuhan
-
Pengguna dapat melihat ketersediaan jadwal kereta api dengan memilih:
- stasiun awal,
- stasiun akhir,
- tanggal berangkat,
- jumlah dewasa, dan
- jumlah bayi.
-
Jadwal kereta api dapat diurutkan berdasarkan jam keberangkatan, durasi perjalanan, kelas, dan harga.
-
Pengguna dapat memesan tiket kereta api melalui sistem dengan melengkapi data-data pemesan:
- Sebutan/Panggilan (tuan, nona, nyonya)
- Nama Lengkap
- Jenis Identitas (KTP, Paspor)
- Nomor Identitas
- Nomor HP
- Alamat
-
Pengguna dapat memilih nomor kursi sesuai dengan ketersediaan kursi kosong.
-
Pengguna mendapatkan nomor pemesanan dan nomor kursi setelah melakukan pemesanan.
-
Pengguna dapat mendaftar (register) dan masuk (login) pada sistem.
-
Pengguna yang terdaftar ataupun tidak terdaftar dapat melihat jadwal dan melakukan pemesanan tiket kereta api.
-
Pengguna yang terdaftar dapat melihat riwayat pemesanan tiket kereta api yang pernah dilakukan sebelumnya.
-
Terdapat fitur untuk mengecek pemesanan dengan memasukan kode pemesanan.
-
Setiap kereta api memiliki informasi berupa:
- Nama kereta api
- Daftar kereta, dengan informasi:
- Kode kereta
- Kelas kereta
- Harga perjalanan pada kereta berdasarkan jadwal dan jurusan
-
Setiap stasiun kereta api memiliki informasi berupa:
- Kode stasiun
- Nama stasiun
- Nama kota/kabupaten
Rancangan Basis Data
table KeretaApi {
id int [pk]
nama varchar(255) [not null]
}
table Kereta {
id int [pk]
id_kereta_api int [ref: > KeretaApi.id]
kode varchar(255) [not null]
}
table Kelas {
id int [pk]
id_kereta int [ref: > Kereta.id]
label varchar(255) [not null]
harga numeric [not null, default: 0]
}
table NomorKursi {
id int [pk]
id_kelas int [ref: > Kelas.id]
label varchar(255) [not null]
}
table Stasiun {
id int [pk]
kode varchar(5) [not null]
nama varchar(255) [not null]
kota_kabupaten varchar(255) [not null]
}
table Jurusan {
id int [pk]
id_kereta int [ref: > Kereta.id]
id_stasiun_awal int [ref: > Stasiun.id]
id_stasiun_akhir int [ref: > Stasiun.id]
}
table Jadwal {
id int [pk]
id_jurusan int [ref: > Jurusan.id]
jadwal_berangkat timestamp
jadwal_tiba timestamp
sisa_kursi int [not null, default: 0]
}
table NomorKursiDijual {
id int [pk]
id_nomor_kursi int [ref: > NomorKursi.id]
id_jadwal int [ref: > Jadwal.id]
kunci boolean [not null, default: false]
}
table Pengguna {
id int [pk]
nama varchar(255) [not null]
email varchar(255) [not null]
nomor_hp varchar(255)
password varchar(255) [not null]
alamat text
}
enum SebutanPemesan {
TUAN
NONA
NYONYA
}
enum JenisIdentitasPemesan {
KTP
PASPOR
}
table Pemesanan {
id int [pk]
id_pemesan int [ref: > Pengguna.id]
kode varchar(7) [not null]
sebutan SebutanPemesan [not null]
nama_lengkap varchar(255) [not null]
jenis_identitas JenisIdentitasPemesan [not null]
nomor_identitas varchar(16) [not null]
nomor_hp varchar(20) [not null]
email varchar(255) [not null]
alamat text
}
table ItemPemesanan {
id int [pk]
id_nomor_kursi_dijual int [ref: > NomorKursiDijual.id]
id_pemesanan int [ref: > Pemesanan.id]
kode_boarding_pass varchar(24) [not null]
sebutan SebutanPemesan [not null]
nama_lengkap varchar(255) [not null]
jenis_identitas JenisIdentitasPemesan [not null]
nomor_identitas varchar(16) [not null]
}Rancangan Proses
Autentikasi (Masuk/Daftar)
Proses masuk dan daftar dimisalkan cukup sederhana seperti pada alur proses di bawah.
Halaman Jadwal Kereta
Ketika pengguna masuk ke halaman daftar jadwal kereta, pengguna harus memilih asal, tujuan stasiun keberangkatan, dan filter lainnya. Sistem kemudian menampilkan data sesuai filter yang dipilih.
Halaman Pemesanan Tiket
Sebelum memesan tiket kereta api, pengguna harus login terlebih dahulu. Jika pengguna belum login maka pengguna diarahkan ke halaman login. Pada halaman pemesanan tiket kereta api, pengguna mengisi seluruh data-data yang diperlukan.
Sistem kemudian mengecek pemesanan pengguna apakah dapat diproses atau tidak. Ketika pemesanan berhasil dilakukan, pengguna akan diarahkan ke halaman detail transaksi pemesanan.
Halaman Daftar Transaksi
Hanya pengguna yang telah login yang dapat mengakses halaman daftar transaksi.
Halaman Detail Transaksi
Hanya pengguna yang telah login yang dapat mengakses halaman detail transaksi. Sistem akan mengecek
apakah transaksi dengan id yang diminta ada pada pengguna tersebut.
Spesifikasi API
Berikut spesifikasi API ketika pertama kali melakukan pengambilan data dari flowchart builder.
title: Sistem Pemesanan Tiket Kereta API
paths:
/login:
post:
summary: Login dengan email dan password
/register:
post:
summary: Daftar pengguna baru
/jadwal:
get:
summary: |-
Cari jadwal kereta
berdasarkan filter
/pemesanan:
post:
summary: |-
Pemesanan tiket jadwal
kereta api.
/transaksi:
get:
summary: Daftar transaksi pengguna
/transaksi/:id:
get:
summary: Detail transaksiBerikut gambaran spesifikasi API setelah dilengkapi:
title: Sistem Pemesanan Tiket Kereta API
paths:
/login:
post:
summary: Login dengan email dan password
parameters:
data:
type: LoginPayload
required: true
in: body
return:
type: AuthResponse
required: true
/register:
post:
summary: Daftar pengguna baru
parameters:
data:
type: RegisterPayload
required: true
in: body
return:
type: AuthResponse
required: true
/jadwal:
get:
summary: |-
Cari jadwal kereta
berdasarkan filter
parameters:
id_stasiun_awal:
type: number
required: true
in: query
id_stasiun_akhir:
type: number
required: true
in: query
tanggal_berangkat:
type: string
in: query
tanggal_tiba:
type: string
in: query
return:
type: Jadwal
array: true
required: true
/pemesanan:
post:
summary: |-
Pemesanan tiket jadwal
kereta api.
parameters:
authorization:
type: string
required: true
in: header
data:
type: PemesananPayload
required: true
in: body
return:
type: Pemesanan
required: true
/transaksi:
get:
summary: Daftar transaksi pengguna
parameters:
authorization:
type: string
required: true
in: header
return:
type: Pemesanan
array: true
required: true
/transaksi/:id:
get:
summary: Detail transaksi
parameters:
authorization:
type: string
required: true
in: header
id:
type: number
required: true
in: path
return:
type: Pemesanan
required: true
schemas:
LoginPayload:
properties:
email:
type: string
required: true
password:
type: string
required: true
RegisterPayload:
properties:
fullname:
type: string
required: true
address:
type: string
required: true
phone_number:
type: string
required: true
email:
type: string
required: true
password:
type: string
required: true
AuthResponse:
properties:
token:
type: string
required: true
user:
type: Pengguna
required: true
DataPemesan:
properties:
sebutan:
type: enum
required: true
enum:
- Tuan
- Nona
- Nyonya
nama_lengkap:
type: string
required: true
jenis_identitas:
type: enum
required: true
enum:
- KTP
- Paspor
nomor_identitas:
type: string
required: true
nomor_hp:
type: string
required: true
email:
type: string
required: true
alamat:
type: string
ItemPemesananPayload:
properties:
label_nomor_kursi:
type: string
required: true
sebutan:
type: enum
required: true
enum:
- Tuan
- Nona
- Nyonya
nama_lengkap:
type: string
required: true
jenis_identitas:
type: enum
required: true
enum:
- KTP
- Paspor
nomor_identitas:
type: string
required: true
PemesananPayload:
properties:
id_jadwal:
type: number
required: true
data_pemesan:
type: DataPemesan
required: true
item_pemesanan:
type: ItemPemesananPayload
array: true
required: trueDeploy Library
Library versi 1.0.0 berhasil di-deploy.
Implementasi
Backend
Berikut ini contoh implementasi dari API login.
import { Backend } from 'blueprint-sistem-pemesanan-tiket-kereta-api-1/engine';
import { AppDataSource } from './data-source';
import { Pengguna } from 'blueprint-sistem-pemesanan-tiket-kereta-api-1/model';
import crypto from 'crypto';
const port = 9000;
const param: Backend.SystemParam = {
port,
async beforeStart() {
await AppDataSource.initialize();
}
};
new Backend.Engine().init(param).then((engine: Backend.Engine) => {
engine.implement({
path: '/login',
method: 'post',
async fn(param) {
const user: Pengguna | null = await AppDataSource.getRepository(Pengguna).findOne({
where: {
email: param.body.data.email
}
});
if (!user) {
throw new Error(`404: Email not found`);
}
const request_password_hash = crypto.createHash('sha256').update(param.body.data.password).digest("hex");
if (request_password_hash !== user.password) {
throw new Error(`401: Password salah`);
}
return {
user,
token: '<sample jwt token>'
};
}
});
});Tampilan keseluruhan implementasi backend
Contoh hasil pemanggilan API menggunakan curl
Frontend
Berikut contoh halaman login menggunakan ReactJS dan TailwindCSS.
import { API, Schema } from 'blueprint-sistem-pemesanan-tiket-kereta-api-1/driver';
export default function LoginPage() {
const [loading, setLoading] = useState<boolean>(false);
const [data, setData] = useState<Schema.LoginPayload>({
email: '',
password: ''
});
async function submitLogin() {
if (loading) {
return;
}
const caller = API
.Driver
.instance()
.init({ base_url: 'http://localhost:9000' })
.driver
.post['/login']();
try {
const res: Schema.AuthResponse = await caller({
body: {
data: data
}
});
} catch (err: any) {
alert(err.toString());
}
}
return (
<div className={`w-screen h-screen flex items-center justify-center`}>
<div className={`w-[400px] p-[24px] rounded-xl flex flex-col gap-[18px] bg-slate-200`}>
<input
type={'email'}
className={`p-[12px] rounded-md`}
placeholder={'Email'}
value={data.email}
onChange={e => setData({ ...data, email: e.target.value })} />
<input
type={'password'}
className={`p-[12px] rounded-md`}
value={data.password}
placeholder={'Password'}
onChange={e => setData({ ...data, password: e.target.value })} />
<button
className={`bg-blue-500 text-white p-[12px] rounded-md`}
onClick={submitLogin}>
{ loading ? 'Loading...' : 'Login' }
</button>
</div>
</div>
);
}Simpulan
Melalui contoh kasus di atas, Pagonila dapat membantu mengorganisir kode antara backend dan frontend agar komunikasi kedua sistem tetap konsisten dan rapi. Selain itu Pagonila juga melakukan dokumentasi data dan proses selama proses pembuatan model data, alur proses, dan spesifikasi API.