LAPORAN PRAKTIK MAGANG

PENGEMBANGAN FRONT-END
INFORMASI PENGAJUAN REVIEWER
APLIKASI WEB E-HTA RSUD Dr.
SOETOMO SURABAYA

Jl. Mayjen Prof. Dr. Moestopo No.6-8, Airlangga, Kec. Gubeng,

Surabaya, Jawa Timur
( Tanggal 16 Februari – 16 Juni 2023 )

Oleh :
M. Zainul Ulum
NIM : 20050974028

UNIVERSITAS NEGERI SURABAYA

FAKULTAS TEKNIK
PRODI S1 PENDIDIKAN TEKNOLOGI INFORMASI
2023
 LEMBAR PENGESAHAN

PENGEMBANGAN FRONT-END INFORMASI PENGAJUAN REVIEWER

APLIKASI WEB E-HTA RSUD Dr. SOETOMO SURABAYA
Oleh :

M. Zainul Ulum NIM. 20050974028

Disetujui dan disahkan sebagai

Laporan Magang Mandiri

Surabaya, 20 Juli 2023

Disetujui,
Kepala Instalasi Teknologi Dosen Pembimbing Magang
Komunikasi dan Informasi RSUD Dr. Program Studi S1 - Teknik
Soetomo Informatika

Jemmy Andijaya Sutantio, dr., Sp.B., Ramadhan Cakra Wibawa, S.Pd.,

M.Ked.Klin. M.Kom.
NIP. 19900318 202012 1 006 NIP. 202111098

Disahkan,
Koordinator Progam Studi S1 - Pendidikan Teknologi Informasi

Drs. Bambang Sujatmiko, M.T.

NIP. 196505191992021001

ii
 ABSTRAKSI

Salah satu area yang terus berkembang dalam dunia kesehatan

adalah Evaluasi Teknologi Kesehatan (Health Technology
Assessment) atau HTA. HTA merupakan proses penilaian
sistematis yang digunakan untuk mengevaluasi keefektifan,
keamanan, dan efisiensi teknologi kesehatan, termasuk obat-
obatan, peralatan medis, dan prosedur medis. Salah satu alur
penilaian evaluasi aplikasi HTA pada RSUD Dr. Soetomo adalah
pengajuan reviewer. Pengajuan reviewer pada HTA adalah proses
penilaian dan review terhadap pengajuan dokumen oleh
Reviewer. Untuk mendukung proses evaluasi HTA, RSUD Dr.
Soetomo telah mengembangkan aplikasi web E-HTA. Front-end
merupakan sebuah tampilan dari suatu website yang akan
dilihat secara langsung oleh pengguna website. Front-End pada
halaman pengajuan reviewer telah dikembangkan sesuai dengan
kebutuhan yang ada namun kekurangan dari segi tampilannya
yang bisa di tinggkatkan lagi.

Kata kunci : HTA, Pengajuan Reviewer, Front-End

iii
 KATA PENGANTAR

Puji syukur Alhamdulillah penulis panjatkan kehadirat Allah

SWT yang telah memberikan rahmat dan hidayah-Nya sehingga
penulis dapat menyelesaikan laporan magang dengan judul
“Pegembangan Front-End Informasi Pengajuan Reviewer Aplikasi
Web E-HTA RSUD Dr. Soetomo Surabaya” dapat diselesaikan
dengan baik. Maksud dari penyusunan laporan Praktik Magang
ini yaitu unyuk memenuhi mata kuliah Praktik Magang.

Dalam kesempatan ini penulis dengan tulus hati

mengucapkan terimakasih kepada:

1. Dr. Maspiyah, M.Kes. selaku Dekan Fakultas Teknik

Universitas Negeri Surabaya.
2. Drs. Bambang Sujatmiko, M.T. selaku Koorditator Program
Studi S1 - Pendidikan Teknologi Informasi.
3. Ramadhan Cakra Wibawa, S.Pd., M.Kom. selaku Dosen
Pembimbing Praktik Magang.
4. Septiansyah Argi Gumilar, S.Kom., M.M.T. selaku
Pembimbing Praktik Magang di ITKI RSUD Dr. Soetomo.

Penulis menyadari bahwa laporan Praktik Magang ini masih

jauh dari sempurna. Oleh karena itu penulis mengharapkan kritik
dan saran yang bersifat membantu. Semoga laporan Praktik
Magang ini dapat memberikan manfaat bagi penulis dan semua
pihak yang mempelajarinya. Amin.

Surabaya, 20 Juli 2023

Penulis

iv
 DAFTAR ISI

LEMBAR PENGESAHAN .................................................................. ii

ABSTRAKSI ......................................................................................... iii
KATA PENGANTAR ......................................................................... iv
DAFTAR ISI .......................................................................................... v
DAFTAR GAMBAR ........................................................................... vii
DAFTAR TABEL ................................................................................. ix
DAFTAR PROGRAM .......................................................................... x
DAFTAR LAMPIRAN ........................................................................ xi
BAB I ...................................................................................................... 1
PENDAHULUAN ................................................................................ 1
A. Latar Belakang ......................................................................... 1
B. Tujuan ....................................................................................... 2
C. Manfaat ..................................................................................... 2
BAB II ..................................................................................................... 5
KAJIAN PUSTAKA ............................................................................. 5
A. E-HTA ....................................................................................... 5
B. Pengajuan Reviewer ............................................................... 5
C. Visual Studio Code ................................................................. 6
D. XAMPP ..................................................................................... 7
E. HTML ....................................................................................... 8
F. CSS ............................................................................................ 9
G. Bootstrap .................................................................................. 9
H. Metronic ..................................................................................10
v
BAB III ..................................................................................................13
PELAKSANAAN DAN PEMBAHASAN ........................................13
A. Profil Perusahaan ...................................................................13
1. RSUD Dr. Soetomo Surabaya ...........................................13
2. Instalasi Teknologi Komunikasi dan Informasi RSUD Dr.
Soetomo Surabaya ......................................................................16
3. Visi dan Misi Perusahaan .................................................17
B. Deskripsi Pelaksanaan Kegiatan Industri ...........................18
1. Tempat dan Waktu Pelaksanaan .....................................18
2. Kegiatan Praktik Magang .................................................20
3. Keterlibatan Mahasiswa ..................................................25
4. Faktor – Faktor Pendukung dan Penghambat ...............25
C. Pembahasan ............................................................................26
1. Identifikasi Masalah ..........................................................26
2. Analisis Kebutuhan ...........................................................29
3. Implementasi ......................................................................30
BAB IV ..................................................................................................49
KESIMPULAN DAN SARAN ...........................................................49
A. Kesimpulan .............................................................................49
B. Saran ........................................................................................49
DAFTAR PUSTAKA ...........................................................................51
KODE PROGRAM ..............................................................................53
LAMPIRAN .........................................................................................67

vi
 DAFTAR GAMBAR

Gambar 3.1. Logo RSUD Dr. Soetomo .............................................13

Gambar 3.2. Struktur Organisasi RSUD Dr. Soetomo ...................15
Gambar 3.3. Logo ITKI .......................................................................16
Gambar 3.4. Strukrur Organisasi ITKI .............................................17
Gambar 3.5. Gedung ITKI .................................................................19
Gambar 3.6. Tempat Praktik Magang ..............................................19
Gambar 3.7. Kegiatan Praktik Magang ............................................20
Gambar 3.8. Card Pencarian HTA lama ..........................................27
Gambar 3.9. Card Informasi HTA lama ..........................................27
Gambar 3.10. Status dan Tindakan HTA lama ...............................28
Gambar 3.11. Halaman Penilaian HTA lama ..................................28
Gambar 3.12. Penilaian Uislider HTA lama ....................................29
Gambar 3.13. Penilaian RadioButton HTA lama ............................29
Gambar 3.14. Hasil Card Pencarian .................................................30
Gambar 3.15. Hasil Pencarian Tanggal ............................................31
Gambar 3.16. Hasil Pilih Jenis Pengajuan .......................................31
Gambar 3.17. Hasil Pilih Status.........................................................32
Gambar 3.18. Hasil Pilih Unit Kerja .................................................33
Gambar 3.19. Hasil Nama Pengajuan ..............................................33
Gambar 3.20. Hasil Nomor Pengajuan ............................................34
Gambar 3.21. Hasil Tampilan Card Informasi ................................34
Gambar 3.22. Hasil Tombol Cetak, Simpan, Simpan PDF ............35
Gambar 3.23. Hasil Tampilan Tabel .................................................36
Gambar 3.24. Hasil Tampilan Paginator dan Informasi ................36
Gambar 3.25. Hasil Tampilan Jumlah Data.....................................37
Gambar 3.26. Hasil Tampilan Status dan Tindakan ......................38
Gambar 3.27. Hasil Halaman Penilaian ...........................................39
Gambar 3.28. Tampilan Informasi Pngajuan ..................................39
Gambar 3.29. Tampilan Tabel Dokumen Litelatur ........................40
Gambar 3.30. Tampilan Detail Produk ............................................40
Gambar 3.31. Tampilan Informasi Alasan Revisi ...........................41
Gambar 3.32. Tampilan Penilaian Uislider .....................................41
Gambar 3.33. Penilaian Radio Button ..............................................42
Gambar 3.34. Tampilan Resume Penilaian .....................................42
Gambar 3.35. Tampilan Pemberitahuan Tersimpan ......................43

vii
Gambar 3.36. Tampilan Halaman Lihat Pengajuan .......................43
Gambar 3.37. Tampilan Informasi Pengajuan Lolos Review ........44
Gambar 3.38. Tampilan Penilaian Lolos Review ............................45
Gambar 3.39. Tampilan Informasi Pengajuan Direkomendasikan
...............................................................................................................46
Gambar 3.40. Tampilan Hasil Rekomendasi ...................................46
Gambar 3.41. Alasan Revisis Dokumen Lanjutan ..........................47
Gambar 3.42. Tampilan Alasan Ditolak...........................................48

viii
 DAFTAR TABEL

Tabel 3.1. Kegiatan Praktik Magang ................................................21

ix
 DAFTAR PROGRAM

Kode Program 1. Fungsi Tanggal .....................................................53

Kode Program 2. JavaScript Fungsi Tanggal ..................................53
Kode Program 3. Jenis Pengajuan, Status, dan Unit Kerja ............54
Kode Program 4. Nama Pengajuan dan Nomer Pengajuan ..........55
Kode Program 5. Card Informasi dan Tabel ...................................55
Kode Program 6. Tindakan Status ....................................................56
Kode Program 7. Pagginator .............................................................57
Kode Program 8. Footer Informasi ...................................................57
Kode Program 9. Informasi Pengajuan Penilaian ..........................58
Kode Program 10. Tabel Studi Litelatur ..........................................58
Kode Program 11. Tabel Dokumen Operasional dan Dokumen
Aspek Sosio-Ekonomi .........................................................................59
Kode Program 12. Alasan Revisi ......................................................59
Kode Program 13. Penilaian Uislider ...............................................60
Kode Program 14. Total Penilaian ....................................................60
Kode Program 15. Penilaian Radio Button ......................................61
Kode Program 16. Total Nilai Keseluruhan ....................................61
Kode Program 17. Modal Resume Penilaian ..................................62
Kode Program 18. Revisi Dokumen .................................................62
Kode Program 19. JavaScript Sweetalert .........................................63
Kode Program 20. JavaScript Alasan Revisi....................................63
Kode Program 21. JavaScript Uislider .............................................64
Kode Program 22. JavaScript Switch Radio Button .......................64
Kode Program 23. JavaScript Total Nilai .........................................65
Kode Program 24. JavaScript.............................................................65

x
 DAFTAR LAMPIRAN

Lampiran 1. Surat Permohonan Ijin Kegiatan Praktik Magang ...67

Lampiran 2. Surat Ijin Praktik Magang ...........................................68
Lampiran 3. Surat Balasan Praktik Magang ....................................69
Lampiran 4. Rekapitulasi Kegiatan Praktik Magang .....................70
Lampiran 5. Lembar Penilaian Peserta Praktik Magang ...............75
Lampiran 6. Dokumentasi Kegiatan Praktik Magang ...................77

xi
 BAB I
PENDAHULUAN

A. Latar Belakang
Rumah Sakit Umum Daerah (RSUD) Dr. Soetomo Surabaya
merupakan salah satu rumah sakit terkemuka di wilayah Surabaya
dan sekitarnya. Sebagai institusi pelayanan kesehatan yang terus
berupaya meningkatkan kualitas layanan kepada pasien, RSUD
Dr. Soetomo telah mengimplementasikan berbagai inovasi
teknologi dalam proses pengelolaan informasi medis.

Salah satu area yang terus berkembang dalam dunia kesehatan

adalah Evaluasi Teknologi Kesehatan (Health Technology
Assessment – HTA). HTA merupakan proses penilaian sistematis
yang digunakan untuk mengevaluasi keefektifan, keamanan, dan
efisiensi teknologi kesehatan, termasuk obat-obatan, peralatan
medis, dan prosedur medis.(Draborg et al., 2005). Implementasi
HTA memungkinkan RSUD Dr. Soetomo untuk memastikan
bahwa teknologi kesehatan yang digunakan di rumah sakit ini
memiliki manfaat yang maksimal bagi pasien.

Untuk mendukung proses evaluasi HTA, RSUD Dr. Soetomo

telah mengembangkan aplikasi web e-HTA. Aplikasi ini dirancang
untuk memfasilitasi pengajuan dan penilaian teknologi kesehatan
oleh reviewer yang berkompeten di rumah sakit. Namun, saat ini
terdapat beberapa kendala dalam pengembangan front-end
aplikasi web e-HTA yang mempengaruhi pengalaman pengguna
dan efisiensi proses.

Dalam laporan praktik magang ini, akan dilakukan

pengembangan front-end informasi pengajuan reviewer aplikasi
web e-HTA RSUD Dr. Soetomo Surabaya. Tujuan dari
pengembangan ini adalah meningkatkan tampilan antarmuka
pengguna (user interface) serta memperbaiki navigasi dan
fungsionalitas aplikasi. Dengan demikian, diharapkan pengguna,

1
2

terutama para reviewer, dapat dengan mudah mengajukan dan

meninjau teknologi kesehatan melalui aplikasi web e-HTA ini.

Pengembangan front-end informasi pengajuan reviewer

aplikasi web e-HTA RSUD Dr. Soetomo Surabaya diharapkan
dapat memberikan manfaat yang signifikan dalam meningkatkan
efisiensi dan kualitas proses evaluasi HTA di rumah sakit ini.
Selain itu, laporan praktik magang ini juga memberikan
kesempatan bagi penulis untuk mendapatkan pengalaman dan
pemahaman yang lebih dalam mengenai pengembangan aplikasi
web dalam konteks pelayanan kesehatan.

B. Tujuan

1. Tujuan Umum
Untuk mengembangkan front-end pada halaman
informasi pengajuan reviewer aplikasi e-HTA RSUD Dr.
Soetomo Surabaya.
2. Tujuan Khusus
a. Membuat tampilan antarmuka (user interface)
halaman informasi pengajuan reviewer aplikasi e-
HTA RSUD Dr. Soetomo Surabaya.
b. Memastikan bahwa informasi yang diperlukan untuk
pengajuan reviewer aplikasi web E-HTA tersedia
secara akurat dan terkini.

C. Manfaat

Adapun manfaat yang dapat diperoleh dari kegiatan

magang ini adalah :
1. Bagi Mahasiswa
a. Menambah wawasan pengetahuan dan pengalaman
selaku generasi muda yang di didik untuk siap terjun
langsung di masyarakat khususnya pada lingkungan
kerja.
 3

b. Peserta magang dapat belajar untuk lebih professional

dalam mengerjakan setiap pekerjaan.
c. Mempermudah dan dapat meningkatkan
keterampilan dan kreativitas diri dalam lingkungan
yang sesuai dengan ilmu yang dimilikinya.
d. Lebih memahami isu-isu yang akan dihadapi dalam
praktek dunia kerja.
2. Bagi Program Studi
a. Laporan magang dapat menjadi salah satu proses
penilaian dan evauasi penilaian terhadap kualitas
pengajaran.
b. Mendapatkan masukan yang bermanfaat utuk
penyempurnaan kurikulum yang sesuai dengan
kebutuhan lapangan kerja.
3. Bagi Instansi Tempat Magang
a. RSUD Dr. Soetomo dapat memanfaatkan tenaga
terdidik dalam membantu menyelesaikan tugas-tugas
operasional untuk kebutuhan di unit kerja masing-
masing.
b. Menciptakan kerjasama yang saling menguntungkan
dan bermanfaat antara RSUD Dr. Soetomo dengan
fakultas Teknologi Informasi.
4

Halaman Ini Sengaja Dikosongkan

 BAB II
KAJIAN PUSTAKA

A. E-HTA

E-HTA adalah aplikasi yang digunakan oleh Komite HTA

(Health Technology Assessment) di RSUD Dr. Soetomo sebagai
asesmen terhadap pengajuan pengadaan alat Kesehatan, obat dan
revisi dokumen PPK (Panduan Praktek Klinik) oleh user KSM
(Kelompok Staf Medis). Aplikasi ini menunjang kebutuhan
manajemen rumah sakit dalam mengambil keputusan apakah
sebuah alat Kesehatan dan obat tersebut perlu untuk diadakan di
rumah sakit atau tidak dengan mempertimbangkan prinsip
keadilan, social dan finansial.(O’Donnell et al., 2009)

HTA bertujuan untuk mengumpulkan bukti-bukti ilmiah dan

mempertimbangkan aspek klinis, ekonomi, etika, dan sosial untuk
membantu pengambilan keputusan dalam perawatan kesehatan.
Oleh karena itu E-HTA menjadi wadah dalam menunjang
kebutuhan pengadaan, aplikasi ini masuk dalam rangkaian
kegiatan SCM (Supply Chain Management) di RSUD Dr. Soetomo
Surabaya.

HTA bermanfaat untuk peningkatan kualitas pelayanan di

rumah sakit. HTA dapat mencegah intervensi dan campur tangan
pihak lain dalam pelayanan. HTA dapat digunakan untuk
mengembangkan dan memperbaiki berbagai standar (SPO),
pedoman dan kebijakan untuk meningkatkan kualitas pelayanan
Kesehatan.

B. Pengajuan Reviewer

Pengajuan reviewer e-HTA (Health Technology Assessment)

adalah proses penilaian dan review terhadap pengajuan dokumen
oleh Reviewer. Reviewer yaitu user yang melakukan penilaian
5
6

terhadap pengajuan. Reviewer adalah individu yang memiliki

keahlian dan pengetahuan yang relevan dalam bidang teknologi
kesehatan dan HTA. Tugas utama reviewer adalah untuk
mengevaluasi teknologi kesehatan yang akan dipertimbangkan
dalam konteks kebijakan kesehatan, termasuk aspek klinis,
ekonomi, etika, dan sosial.

Reviewer akan melakukan penilaian terhadap pengajuan yang

lolos verifikasi. Ada dua keputusan yang terjadi yaitu revisi
dokumen lanjutan atau lolos review. Jika revisi dokumen lanjutan
maka pengaju wajib melakukan revisi sesuai arahan dan akan
diverifikasi ulang oleh verifikator dan Kembali dilakukan
penilaian oleh reviewer yang ditentukan verifikator Jika lolos
review, maka pengajuan lanjut ke verifikator kepala.

Pengajuan reviewer pada e-HTA bertujuan untuk memastikan

bahwa evaluasi teknologi kesehatan dilakukan dengan tingkat
keakuratan, keberlanjutan, dan independensi yang tinggi. Melalui
kontribusi para reviewer yang berkualifikasi, e-HTA dapat
memberikan rekomendasi yang berharga dan informasi yang
dibutuhkan dalam pengambilan keputusan yang berkaitan
dengan penggunaan teknologi kesehatan dalam konteks
perawatan kesehatan.

C. Visual Studio Code

Visual Studio Code (VS Code) adalah salah satu editor

kode sumber yang populer dan kuat yang dikembangkan oleh
Microsoft. VS Code telah mendapatkan popularitas yang
signifikan di kalangan pengembang perangkat lunak dan
pemrogram karena memiliki fitur yang kuat dan ekosistem yang
luas. VS Code didukung oleh berbagai ekstensi yang
memungkinkan pengembang untuk menyesuaikan dan
 7

memperluas fungsionalitas editor sesuai dengan kebutuhan

pengembangan mereka.

VS Code menawarkan antarmuka pengguna yang intuitif,

ringan, dan responsif, yang membuatnya menjadi pilihan yang
populer di kalangan pengembang. Mereka juga mencatat bahwa
VS Code mendukung banyak bahasa pemrograman dan
menyediakan fitur-fitur seperti penyorotan sintaks, pemecahan
kode, debugging, dan integrasi dengan sistem kontrol versi, yang
membuatnya menjadi pilihan yang cocok untuk pengembangan
perangkat lunak.

VS Code memiliki dukungan yang kuat untuk pengembangan

web. Mereka menyoroti fitur-fitur seperti IntelliSense
(penyelesaian otomatis kode), kemampuan debugging, integrasi
dengan Node.js dan TypeScript, serta banyaknya ekstensi tersedia
untuk pengembangan web yang membuat VS Code menjadi
pilihan yang unggul untuk pengembang web.

D. XAMPP

XAMPP adalah salah satu paket perangkat lunak yang

populer untuk pengembangan web lokal yang terdiri dari
beberapa komponen utama, yaitu Apache, MySQL, PHP, dan Perl.
XAMPP dirancang untuk memudahkan pengembang web dalam
mengatur dan menjalankan lingkungan pengembangan web yang
lengkap di komputer lokal tanpa perlu menginstal dan
mengkonfigurasi setiap komponen secara terpisah.

XAMPP telah menjadi salah satu alat penting dalam

pengembangan web karena menyediakan cara yang mudah dan
cepat untuk membuat server web lokal. Dalam penelitian mereka,
mereka menggunakan XAMPP sebagai platform pengembangan
untuk membangun dan menguji aplikasi web yang kompleks.
XAMPP memberikan fleksibilitas yang tinggi dalam mengatur dan
8

mengonfigurasi komponen server seperti Apache, MySQL, dan

PHP, serta menyediakan antarmuka pengguna yang sederhana
dan intuitif.

XAMPP sangat berguna dalam mengembangkan dan menguji

aplikasi web berbasis PHP dan MySQL. Mereka mencatat bahwa
dengan XAMPP, pengembang dapat dengan mudah membuat
server web lokal dengan konfigurasi yang tepat untuk
mendukung pengembangan dan pengujian aplikasi. Selain itu,
XAMPP juga menyediakan alat-alat penting seperti phpMyAdmin
yang memudahkan pengelolaan dan manipulasi basis data
MySQL.

E. HTML

HTML (Hypertext Markup Language) adalah bahasa markup

yang penting dalam pengembangan front-end. Dalam
pengembangan front-end, HTML digunakan untuk membangun
struktur dasar halaman web. HTML mengatur elemen-elemen
dasar seperti judul, paragraf, tautan, gambar, formulir, tabel, dan
banyak lagi, yang membentuk konten dan struktur halaman
web.(Chastro & Darmawan, 2020)

HTML berfungsi sebagai tulang punggung dalam

membangun struktur informasi halaman web. Pengembang
menggunakan elemen HTML untuk mengorganisir dan
memformat konten sehingga dapat ditampilkan dengan jelas oleh
browser. Setiap elemen HTML memiliki peran dan fungsi tertentu
dalam membentuk tampilan dan struktur halaman web.

Dalam pengembangan front-end, HTML berperan penting

dalam membangun struktur dasar halaman web. HTML
digunakan untuk mengatur elemen-elemen fundamental seperti
heading (judul), paragraph (paragraf), hyperlink, gambar,
formulir, tabel, dan banyak lagi. Dengan menggunakan elemen
 9

HTML yang sesuai, pengembang dapat membangun tata letak dan

hierarki yang terstruktur untuk konten halaman web.

F. CSS

CSS (Cascading Style Sheets) adalah bahasa pemrograman

yang digunakan untuk mengatur tampilan dan gaya visual dari
halaman web. Dalam pengembangan front-end, CSS memainkan
peran penting dalam membuat halaman web terlihat menarik,
konsisten, dan mudah dibaca oleh pengguna. Dengan CSS,
pengembang dapat mengatur warna, tata letak, ukuran teks, jenis
huruf, dan berbagai aspek lainnya dari elemen-elemen halaman
web.(Chastro & Darmawan, 2020)

Salah satu keunggulan CSS adalah kemampuannya dalam

pemisahan antara struktur dan presentasi halaman web. Dengan
menggunakan CSS, pengembang dapat memisahkan kode HTML
yang bertanggung jawab atas struktur dan konten dari kode CSS
yang bertanggung jawab atas tampilan dan gaya. Ini
memungkinkan perubahan tampilan dan gaya halaman web dapat
dilakukan dengan mudah tanpa harus menyentuh ulang struktur
HTML, sehingga mempercepat dan mempermudah proses
pengembangan dan pemeliharaan.

Dalam keseluruhan, CSS adalah bahasa pemrograman yang

kuat dan penting dalam pengembangan front-end. Dengan
kemampuannya dalam mengatur tampilan dan gaya visual
halaman web, serta konsep pemisahan struktur dan presentasi,
CSS memberikan fleksibilitas, efisiensi, dan konsistensi dalam
pembangunan situs web yang menarik dan responsif.

G. Bootstrap

Bootstrap adalah kerangka kerja (framework) front-end yang

populer dan open-source yang digunakan untuk membangun
10

situs web yang responsif dan menarik. Dikembangkan oleh

Twitter, Bootstrap menyediakan serangkaian komponen, gaya,
dan utilitas yang siap digunakan, yang memungkinkan
pengembang untuk dengan cepat merancang dan
mengembangkan antarmuka yang konsisten di seluruh proyek.

Dengan Bootstrap, pengembang dapat memanfaatkan sistem

grid yang fleksibel, komponen UI yang kaya, dan gaya prabuilt
yang responsif untuk membangun tampilan yang responsif di
berbagai perangkat. Bootstrap juga menyediakan kumpulan ikon
vektor, pengaturan gaya tombol, formulir, navigasi, dan banyak
lagi, yang dapat digunakan dengan mudah dan disesuaikan sesuai
kebutuhan proyek. Selain itu, Bootstrap juga mendukung
penggunaan JavaScript dengan komponen seperti carousel,
modals, dropdowns, dan lain-lain, yang memberikan
interaktivitas yang lebih pada situs web. Dengan kelebihan-
kelebihan tersebut, Bootstrap mempercepat proses
pengembangan, meningkatkan efisiensi, dan memastikan
konsistensi tampilan di seluruh situs web yang
dibangun.(Suprayogi & Rahmanesa, 2019)

H. Metronic

Metronic adalah template admin responsif yang sangat

populer dalam pengembangan front-end. Template ini
menyediakan antarmuka admin yang canggih dan profesional
untuk berbagai jenis aplikasi web. Dengan desain yang modern
dan tampilan yang menarik, Metronic memastikan pengalaman
pengguna yang baik dan memudahkan pengembang untuk
membangun antarmuka yang terstruktur dan mudah digunakan.

Salah satu keunggulan Metronic adalah responsif, yang berarti

tampilannya dapat menyesuaikan diri dengan berbagai perangkat
dan ukuran layar. Ini memungkinkan aplikasi yang dibangun
 11

dengan Metronic tetap terlihat dan berfungsi dengan baik di

desktop, tablet, dan perangkat mobile. Selain itu, Metronic juga
menawarkan berbagai fitur dan komponen yang siap digunakan,
seperti tabel, formulir, grafik, kalender, dan peta. Dengan fitur-
fitur ini, pengembang dapat dengan cepat membangun aplikasi
yang lengkap dan dapat diandalkan.(R et al., 2016)
12

Halaman Ini Sengaja Dikosongkan

 BAB III
PELAKSANAAN DAN PEMBAHASAN

A. Profil Perusahaan

1. RSUD Dr. Soetomo Surabaya

RSUD Dr. Soetomo adalah rumah sakit umum daerah di

Surabaya yang merupakan pusat rujukan medis dengan
fasilitas modern dan tenaga medis berkualitas. Selain
menyediakan layanan medis yang komprehensif, rumah sakit
ini juga berperan sebagai institusi pendidikan dan penelitian,
memberikan pelatihan kepada mahasiswa kedokteran, dan
aktif dalam pengembangan ilmu pengetahuan medis. Dengan
komitmen dalam pelayanan sosial, RSUD Dr. Soetomo juga
membantu pasien yang kurang mampu secara finansial.
Dengan reputasi yang baik dan kontribusinya dalam bidang
kesehatan, RSUD Dr. Soetomo telah menjadi salah satu rumah
sakit terkemuka di Surabaya dan wilayah sekitarnya.

Gambar 3.1. Logo RSUD Dr. Soetomo

13
14

Dua buah tangan berjabat melambangkan kepercayaan

dan kerja sama yang baik dari pimpinan dengan seluruh
jajaran RSUD Dr. Soetomo. Bentuk dari jabat tangan dibuat
bulat tidak kaku ditujukan pada sikap RSUD Dr. Soetomo
yang tidak ada memiliki batasan/border dari seluruh jajaran
RSUD Dr. Soetomo dalam memberikan pelayanan maksimal
secara profesional dan integritas yang tinggi. Simbol palang
pada logo RSUD Dr. Soetomo ini menunjukkan komitmen,
etika, netral, tulus tidak membedakan ras, agama, maupun
status sosial dalam memberikan pelayanan terbaik untuk
seluruh pasien. Pengikat dari keseluruhan makna yang ingin
disampaikan pada logo baru RSUD Dr. Soetomo ini adalah
simbol hati. Seluruh pelayanan, inovasi, profesionalisme, dan
sikap RSUD Dr. Soetomo dilakukan dengan penuh cinta kasih
kepada sesama. Berlandaskan pelayanan sepenuh hati, RSUD
Dr. Soetomo terus melakukan inovasi dengan menyematkan
simbol hati tersebut pada simbol jabat tangan. Profesional
dalam bekerja, berintegrasi, dan penuh cinta kasih.

RSUD Dr. Soetomo adalah rumah sakit pendukung

Pemerintah Provinsi (Pemprov) yang menyelenggarakan
sebagian urusan dibidang pelayanan kesehatan, yang
dipimpin oleh seorang Direktur yang berada di bawah dan
bertanggung jawab kepada Gubernur melalui Sekretaris
Daerah.

RSUD Dr. Soetomo mempunyai tugas melaksanakan

upaya kesehatan secara berdaya dengan mengutamakan
upaya penyembuhan (kuratif) dan pemulihan (rehabilitatif)
yang dilaksanakan secara serasi dan terpadu dengan upaya
promotif, pencegahan dan penyelenggaraan upaya rujukan
serta penyelenggaraan pendidikan, pelatihan tenaga
kesehatan, penelitian dan pengembangan dibidang kesehatan.
 15

RSUD Dr. Soetomo sebagai rumah sakit milik Pemprov

Jawa Timur (Jatim) yang memiliki peran dan fungsi sebagai
penyelenggaraan pelayanan medik, pelaksanaan fasilitasi
penyelenggaraan pendidikan bagi calon dokter, dokter
spesialis, sub spesialis dan tenaga medis lainnya,
penyelenggaraan penelitian dan pengembangan kesehatan,
dan lain-lain.

Berikut adalah gambar struktur organisasi dan

penjabarannya di RSUD Dr. Soetomo.

Gambar 3.2. Struktur Organisasi RSUD Dr. Soetomo

Struktur organisasi RSUD Dr. Soetomo mengikuti

Peraturan Gubernur Jawa Timur Nomor 113 Tahun 2021
Tentang Nomenklatur, Susunan Organisasi, Uraian Tugas dan
Fungsi Serta Tata Kerja Rumah Sakit Umum Daerah Dr.
Soetomo. Dalam struktur organisasi, Direktur RSUD Dr.
Soetomo dibantu oleh 4 wakil direktur. Masing-masing wakil
direktur membawahi bagian/bidang dan instalasi-instalasi.
Kelompok Staf Medis (KSM), komite-komite dan Satuan
16

Pengawas Internal (SPI) berada di bawah koordinasi dengan

direktur.

2. Instalasi Teknologi Komunikasi dan Informasi RSUD Dr.

Soetomo Surabaya

Gambar 3.3. Logo ITKI

Instalasi Teknologi Komunikasi dan Informasi (ITKI) di RSUD

Dr. Soetomo merupakan departemen yang bertanggung jawab
atas pengelolaan sistem teknologi informasi dan komunikasi di
rumah sakit. Mereka mengelola infrastruktur teknologi, sistem
informasi rumah sakit, keamanan data, dukungan teknis, serta
berperan dalam pengembangan dan inovasi teknologi untuk
meningkatkan efisiensi dan kualitas pelayanan di RSUD Dr.
Soetomo. Berikut adalah gambar struktur organisasi ITKI.
 17

Gambar 3.4. Strukrur Organisasi ITKI

ITKI bertanggung jawab kepada Wakil Direktur Umum dan

Operasional Rumah Sakit Umum Daerah (RSUD) Dokter (Dr.)
Soetomo dalam melaksanakan tupoksinya. ITKI dipimpin oleh
Kepala instalasi dengan dibantu wakil kepala, 3 unit dan 8 sub
unit. Dalam struktur organisasi ITKI terdapat 13 jabatan, yaitu
Kepala ITKI, Wakil Kepala ITKI, Unit Infrastruktur, Unit Aplikasi
dan Unit Administrasi.

3. Visi dan Misi Perusahaan

a. Visi RSUD Dr. Soetomo
Visi dari RSUD Dr. Soetomo adalah Menjadi rumah sakit
tersier yang terpercaya, aman, bermutu tinggi dan
mandiri.
b. Misi RSUD Dr. Soetomo
Misi dari RSUD Dr. Soetomo adalah sebagai berikut :
1) Menyelenggarakan pelayanan dan jejaring pelayanan
sebagai rumah sakit rujukan tersier yang aman,
18

bermutu tinggi dan terjangkau;

2) Menyelenggarakan pendidikan dan penelitian tenaga
kesehatan yang berintegritas tinggi, profesional,
inovatif dan melakukan jejaring pendidikan
penelitian yang terintegrasi (Academic Medical Care),
pusat pengembangan bidang kesehatan yang
bermutu tinggi serta mewujudkan Sumber Daya
Manusia (SDM) yang handal;
3) Mewujudkan kehandalan sarana dan prasarana
penunjang pelayanan yang terstandar serta
lingkungan kerja yang aman dan nyaman; dan
4) Menyelenggarakan tata kelola organisasi yang
terintegrasi, efektif efisien dan akuntabel.

B. Deskripsi Pelaksanaan Kegiatan Industri

1. Tempat dan Waktu Pelaksanaan

Tempat pelaksanaan Praktik Magang ini dilaksanakan di

instalasi teknologi komunikasi dan informasi tepatnya pada
tanggal 16 Februari – 16 Juni 2023 di RSUD Dr. Soetomo
Surabaya, lokasi di Jl. Mayjen Prof. Dr. Moestopo No.6-8,
Airlangga, Kec. Gubeng, Surabaya, Jawa Timur.
 19

Gambar 3.5. Gedung ITKI

Gambar 3.6. Tempat Praktik Magang

20

Sedangkan, waktu pelaksanaan kegiatan Praktik Magang

adalah sebagai berikut :

Hari Kerja : Senin – Jumat

Jam Kerja : Pukul 08.00 s.d 16.00 WIB
Kegiatan Praktik Magang / Magang ini berlangsung
selama empat bulan, dimulai tanggal 16 Februari s.d 16 Juni
2023.

2. Kegiatan Praktik Magang

Salah satu kegiatan dari Praktik Magang ini adalah

pengembangan front-end aplikasi e-HTA. Front-end aplikasi
adalah tampilan visual dan antarmuka pengguna yang
memungkinkan pengguna aplikasi untuk berinteraksi dan
menggunakan fitur-fitur yang disediakan. Dalam konteks e-
HTA, aplikasi ini dirancang untuk membantu dalam proses
penilaian teknologi kesehatan, termasuk evaluasi efektivitas,
keamanan, dan ekonomi dari teknologi kesehatan yang ada
atau yang baru.

Gambar 3.7. Kegiatan Praktik Magang

 21

Berikut merupakan tabel jadwal kegiatan Praktik Magang

di Instalasi Teknologi Komunikasi dan Informasi RSUB Dr.
Soetomo Surabaya.

Tabel 3.1. Kegiatan Praktik Magang

No Tanggal Uraian Kegiatan

1 16 Februari 2023 Pembekalan alur sistem aplikasi
Pendampingan Sistem EMR di
2 17 Februari 2023 Istalasi Rawat Jalan Poli Onkologi
Bedah.
Pendampingan Sistem EMR di
3 20 Februari 2023 Istalasi Rawat Jalan Poli Onkologi
Bedah.
Pendampingan Sistem EMR di
4 21 Februari 2023 Istalasi Rawat Jalan Poli Onkologi
Bedah.
Pendampingan Sistem EMR di
5 22 Februari 2023 Istalasi Rawat Jalan Poli Onkologi
Bedah.
Pendampingan Sistem EMR di
6 23 Februari 2023 Istalasi Rawat Jalan Poli Onkologi
Bedah.
Pendampingan Sistem EMR di
7 24 Februari 2023 Istalasi Rawat Jalan Poli Onkologi
Bedah.
Pendampingan Sistem EMR di
8 27 Februari 2023
Istalasi Rawat Inap Bedah.
Pendampingan Sistem EMR di
9 28 Februari 2023
Istalasi Rawat Inap Bedah.
Pendampingan Sistem EMR di
10 01 Maret 2023
Istalasi Rawat Inap Bedah.
Pendampingan Sistem EMR di
11 02 Maret 2023
Istalasi Rawat Inap Bedah.
Pendampingan Sistem EMR di
12 03 Maret 2023
Istalasi Rawat Inap Bedah.
13 06 Maret 2023 Membuat tampilan User Interface
22

halaman user profil menggunakan

HTML dengan bantuan template
Metronic.
14 07 Maret 2023 Diklat Online
Mempresentasikan hasil
pembuatan halaman user profil
15 08 Maret 2023 menggunakan HTML dengan
bantuan template metronic yang
telah dikerjakan sebelumnya.
Pembagian kelompok dan
merancang tampilan user interface
Penampisan Ulkus Decubitus pada
16 09 Maret 2023
Immobilisasi dengan menggunakan
skala neuron pada EMR
menggunakan php.
Mempresentasikan hasil tugas yang
sebelumnya diberikan dan diberi
tugas baru yaitu membuat front
17 10 Maret 2023
end untuk Assesment Awal Medis
Dialisis pada EMR menggunakan
php.
Membuat tampilan user interface
untuk Assesment Awal Medis
18 13 Maret 2023
Dialisis pada EMR menggunakan
php.
Membuat tampilan user interface
untuk Assesment Awal Medis
19 14 Maret 2023
Dialisis pada EMR menggunakan
php.
Pengecekan proges tugas
20 15 Maret 2023 sebelumnya dan diberikan tugas
baru yaitu mengolah Database.
Peserta Magang Diberi tugas untuk
21 16 Maret 2023 memasukan data yang sudah
diberikan kedalam Excel.
Peserta Magang Diberi tugas untuk
22 17 Maret 2023
memasukan data yang sudah
 23

diberikan kedalam Excel.

Peserta Magang Diberi tugas untuk
23 20 Maret 2023 memasukan data yang sudah
diberikan kedalam Excel.
Peserta Magang Diberi tugas untuk
24 21 Maret 2023 memasukan data yang sudah
diberikan kedalam Excel.
Mempresentasikan tugas membuat
tampilan user interface untuk
25 24 Maret 2023
Assesment Awal Medis Dialisis
pada EMR menggunakan php.
Merancang Sistem e-HTA berbasis
26 27 Maret 2023 web untuk menu Pengajuan Obat
menggunakan php.
Merancang Sistem e-HTA berbasis
27 28 Maret 2023 web untuk menu Pengajuan Obat
menggunakan php.
Merancang Sistem e-HTA berbasis
28 29 Maret 2023 web untuk menu Pengajuan Obat
menggunakan php.
Merancang Sistem e-HTA berbasis
29 30 Maret 2023 web untuk menu Pengajuan Obat
menggunakan php.
Merancang Sistem e-HTA berbasis
30 31 Maret 2023 web untuk menu Pengajuan Obat
menggunakan php.
Merancang Sistem e-HTA berbasis
web untuk menu Pengajuan Obat
31 03 April 2023
menggunakan php dan
mengumpulkan di GitHub.
Mempresentasikan hasil tugas
merancang Sistem e-HTA berbasis
32 04 April 2023
web untuk menu Pengajuan Obat
menggunakan php.
Merancang Sistem e-HTA berbasis
33 05 April 2023 web untuk halaman Pengajuan
Reviewer menggunakan php
24

dengan bantuan metronic.

Merancang Sistem e-HTA berbasis
web untuk halaman Pengajuan
34 06 April 2023
Reviewer menggunakan php
dengan bantuan metronic.
Merancang Sistem e-HTA berbasis
web untuk halaman Pengajuan
35 10 April 2023
Reviewer menggunakan php
dengan bantuan metronic.
Merancang Sistem e-HTA berbasis
web untuk halaman Pengajuan
36 11 April 2023
Reviewer menggunakan php
dengan bantuan metronic.
Merancang Sistem e-HTA berbasis
web untuk halaman Pengajuan
37 12 April 2023
Reviewer menggunakan php
dengan bantuan metronic.
Merancang Sistem e-HTA berbasis
web untuk halaman Pengajuan
38 13 April 2023
Reviewer menggunakan php
dengan bantuan metronic.
Merancang Sistem e-HTA berbasis
web untuk halaman Pengajuan
39 14 April 2023
Reviewer menggunakan php
dengan bantuan metronic.
Mempresentasikan hasil tugas
merancang Sistem e-HTA berbasis
40 17 April 2023 web untuk halaman Pengajuan
Reviewer menggunakan php
dengan bantuan metronic.
Pengecekan final hasil tugas
merancang Sistem e-HTA berbasis
web untuk halaman Pengajuan
41 18 April 2023
Reviewer menggunakan php
dengan bantuan metronic lalu
dikumpulkan di GitHub.
42 26 April 2023 Peserta Magang Belajar framework
 25

Laravel yang dibantu oleh

pendamping Praktik Magang.
Peserta Magang Belajar framework
43 27 April 2023 Laravel yang dibantu oleh
pendamping Praktik Magang.
Membuat project menggunakan
44 28 April 2023
framework Laravel.
Mahasiswa menemui Dosen
45 06 Juni 2023 Pembimbing untuk melakukan
bimbingan Laporan Magang.
46 07 Juni 2023 Menyusul Laporan Magang.
Mahasiswa menemui Dosen
47 13 Juni 2023 Pembimbing untuk melakukan
bimbingan Laporan Magang.
48 15 Juni 2023 Menyelesaikan Laporan Magang.

3. Keterlibatan Mahasiswa
Selama Mahasiswa melakukan Praktik Magang (PI),
Mahasiswa lebih banyak melakukan instruksi yang diberikan
dari pihak ITKI serta mengikuti setiap kegiatan yang
dilaksanakan. Hal tersebut meliputi pendampingan aplikasi
EMR kepada perawat yang ditempatkan pada Poli Onkologi
Bedah dan Instansi Rawat Inap Bedah dimana mahasiswa
terlibat langsung apabila terdapat perawat yang
membutuhkan bantuan, terlibat langsung dalam
pegembangan tampilan front-end aplikasi EMR dan HTA
yang dibagi menjadi beberapa kelompok, serta belajar tentang
Laravel.

4. Faktor – Faktor Pendukung dan Penghambat

a. Faktor Pendukung

Selama melaksanakan Praktik Magang di Instalasi

Teknologi Komunikasi dan Informasi RSUD Dr. Soetomo
Surabaya, ada beberapa faktor pendukung yang
26

membantu kelancaran dalam melakukan kegiatan praktik

sebagai berikut:

1) Telah menempu mata kuliah Analisis dan

Perancangan Sistem, Pemrograman Web, dan
Rekayasa Prangkat Lunak.
2) Ruangan yang bersih dan cukup nyaman untuk
melakukan pekerjaan.
3) Adanya kerjasama yang baik dengan pembimbing
Praktik Magang.

b. Faktor Penghambat
Selama melaksanakan Praktik Magang di Instalasi
Teknologi Komunikasi dan Informasi RSUD Dr. Soetomo
Surabaya, ada beberapa factor yang menghambat dalam
melakukan kegiatan praktik sebagai berikut:

1) Lokasi gedung ITKI ke Poli Onkologi Bedah cukup

jauh sehingga meghambat mobilitas.
2) Lokasi gedung ITKI ke istansi rawat jalan bedah
cukup jauh serta jarak antar ruangan tidak berdekatan
sehingga menghambat mobilitas.
3) Dalam melakukan Praktik Magang banyak
menganggurnya.

C. Pembahasan
1. Identifikasi Masalah
Berdasarkan arahan dari pembimbing ITKI, maka
identifikasi masalah halaman Informasi Pengajuan Reviewer
aplikasi e-HTA yang akan dibuat adalah.

a. Pada card pencarian terdapat fungsi tanggal

menggunakan datapickr, sedangkan jenis pengajuan,
 27

status, dan unit kerja menggunakan select to, serta nama

dan nomer pengajuan menggunakan textbox. Terdapat
tombol cari pada bagian bawah card pencarian. Bisa
dilihat pada gambar 3. 8 untuk tampilan aplikasi HTA
lama.

Gambar 3.8. Card Pencarian HTA lama

b. Pada card informasi terdapat fungsi cetak, simpan, dan

simpan pdf dan terdapat tabel berisi nomer pengajuan,
jenis pengajuan, waktu, nama pengajuan, unit kerja,
status, tindakan.

Gambar 3.9. Card Informasi HTA lama

28

c. Semua status ditampilkan di tabel. Setiap status

mempunyai tindakan yang berbeda. Lolos verivikasi
tindakannya penilian. Penilaian mengunakan uislider
dan radio button. Berikut tampilan HTA lama.

Gambar 3.10. Status dan Tindakan HTA lama

Gambar 3.11. Halaman Penilaian HTA lama

 29

Gambar 3.12. Penilaian Uislider HTA lama

Gambar 3.13. Penilaian RadioButton HTA lama

2. Analisis Kebutuhan
Berikut adalah data dan aplikasi yang dibutuhkan dalam
pegembangan front-end aplikasi e-HTA halaman Informasi
Pengajuan Reviewer.
30

a. Visual Studio Code

b. XAMPP
c. Google Chrome
d. Metronic

3. Implementasi
a. Card Pencarian
Card Pencarian merupakan bagian teratas dari
halaman pengajuan reviewer. Card ini berfungsi untuk
mencari dokumen data data yang akan dilakukan review.

Gambar 3.14. Hasil Card Pencarian

1) Tanggal
Fungsi tanggal digunakan untuk menentukan tanggal
dalam rentan tertentu dan mengunakan plungin
Datepicker jenis Selecting Multiple Dates. Pencarian
tanggal ini digunakan untuk mencari dokumen dalam
rentan tanggal tersebut, seghingga mempermudah user
untuk mencari dokumen. Gambar 3. 15 menunjukan hasil
dari pencarian tanggal yang dibuat oleh peserta Praktik
Magang.
 31

Gambar 3.15. Hasil Pencarian Tanggal

2) Jenis Pengajuan
Fungsi jenis pengajuan digunakan untuk menentukan
jenis pengajuan terdapat beberapan pilihan yaitu
alat/teknologi Kesehatan, dokumen PPK, dan Obat.
Menggunkan plungin Select2 untuk memberi kotak
pilihan dan pencarian. Berikut tampilannya. Gambar 3. 16
menunjukan hasil dari pencarian jenis pengajuan yang
dibuat oleh peserta Praktik Magang.

Gambar 3.16. Hasil Pilih Jenis Pengajuan

32

3) Status
Pada Status terdapat pilihan yaitu Lolos Verivikasi,
Lolos Review, Direkomendasikan, Revisi Dokumen
Lanjutan, dan Ditolak. Digunakan untuk mencari
dokumen berdasarkan status tertentu yang ingin di cari
oleh user. Menggunkan plungin Select2 untuk memberi
kotak pilihan dan pencarian. Gambar 3. 17 menunjukan
hasil dari pencarian status yang dibuat oleh peserta
Praktik Magang.

Gambar 3.17. Hasil Pilih Status

4) Unit Kerja
Pada Unit Kerja digunkan untuk menentukan Unit
Kerja, terdapat pilihannya yaitu KSM Andrologi, KSM
Neurologi, dan semua. Menggunkan plungin Select2
untuk memberi kotak pilihan dan pencarian. Gambar 3.
18 menunjukan hasil dari pencarian Unit Kerja yang
dibuat oleh peserta Praktik Magang.
 33

Gambar 3.18. Hasil Pilih Unit Kerja

5) Nama Pengajuan
Nama Pengajuan digunakan untuk memasukan
nama dari jenis pengajuan yang dicari. Menggunkan
Textbox untuk input nama. Gambar 3. 19 menunjukan
hasil dari input Nama Pengajuan yang dibuat oleh
peserta Praktik Magang.

Gambar 3.19. Hasil Nama Pengajuan

6) Nomer Pengajuan
Nomer Pengajuan digunakan untuk memasukan
nomer dari jenis pengajuan yang dicari. Menggunkan
Textbox untuk input nama. Gambar 3. 20 menunjukan
hasil dari input Nomor Pengajuan yang dibuat oleh
peserta Praktik Magang.
34

Gambar 3.20. Hasil Nomor Pengajuan

b. Card Informasi
Card Informasi merupakan bagian utama dari
halaman pengajuan reviewer. Card ini berfungsi untuk
menampilkan tabel yang memuat beberapa informasi
mengenai dokumen yang telah dicari. Pada card ini user
bisa melakukan beberapa tindakan.

Gambar 3.21. Hasil Tampilan Card Informasi

1) Cetak
Merupakan Tombol yang digunakan untuk
mencetak atau berfungsi sebagai tombol print untuk
 35

tabel yang dicari. Icon digunakan sebagai tampilan dan

diberi fungsi button.

2) Simpan
Merupakan Tombol yang digunakan untuk
menyimpan data tabel yang dicari kedalam computer.
Icon digunakan sebagai tampilan dan diberi fungsi
button.

3) Simpan PDF
Merupakan Tombol yang digunakan untuk
menyimpan data tabel dengan format PDF. Icon
digunakan sebagai tampilan dan diberi fungsi button.

Gambar 3. 22 menunjukan tampilan dari tombol

Cetak, Simpan, dan Simpan PDF yang dibut oleh peserta
pratik industry.

Gambar 3.22. Hasil Tombol Cetak, Simpan, Simpan PDF

4) Tabel
Pada card informasi terdapat tabel yang
menampilkan beberapa informasi pengajuan rivewer
yang telah di inputkan pada card pencarian diantaranya
yaitu Nomer Pengajuan, Jenis Pengajuan, Waktu, Nama
Pengajuan, Unit Kerja, Status, dan Tindakan. Setiap
tindakan dan status mempunyai fungsi dan tampilan
36

yang berbeda. Gambar 3. 23 menunjukan hasil tampilan

tabel yang dibuat oleh peserta Praktik Magang.

Gambar 3.23. Hasil Tampilan Tabel

5) Footer
Card footer adalah elemen yang digunakan dalam
desain kartu (card) pada antarmuka pengguna. Card
footer terletak di bagian bawah kartu dan biasanya berisi
informasi tambahan yang relevan dengan konten atau
konteks kartu tersebut.

Gambar 3.24. Hasil Tampilan Paginator dan Informasi

Pada Gambar 3. 24 menampilkan footer Card

Informasi yang terdapat paginator dan beberapa tulisan
keterangan. Dalam paginator ini terdapat tombol untuk
merubah halaman ke halaman selanjutnya atau
sebelumnya. Terdapat juga beberapa nomor halaman
 37

untuk berpindah halaman. Pada bagian keterangan

menampilkan ketrangan terkait pengajuan. Paginator ini
juga menampilkan data dari jumlah data yang dicari
seperti pada gambar 3. 25

Gambar 3.25. Hasil Tampilan Jumlah Data

c. Tindakan Status Penilaian

Tindakan Status Penilaian merupakan setatus dari
dakumen dan beberapa tindakan sesuai status yang bisa
dilakukan oleh user untuk melakukan penilaian dan
melihat hasil dari penilaian. Berikut beberapa status dan
tindakan yang bisa dilakukan. Gambar 3. 26 menunjukan
tampilan status dan tindakan yang dibuat oleh peserta
Praktik Magang.
38

Gambar 3.26. Hasil Tampilan Status dan Tindakan

1) Lolos Verivikasi
Lolos Verivikasi merupakan status yang di tampilkan
ketika data sudah berhasil diverivikasi oleh user tapi
belum dilakukan review maka tindakannya berupa
penilaian. Pada halaman penilaian terdapat informasi
pengajuan dan penilaian. Gambar 3. 27 menunjukan
tampilan halaman penilaian yang dibuat oleh peserta
Praktik Magang.
 39

Gambar 3.27. Hasil Halaman Penilaian

a) Informasi Pengajuan
Pada informasi pengajaun terdapat data ajuan yang
berisi informasi status pengajuan, nomor pengajuan dan
waktu pengajuan. Terdapat juga data pengaju yang berisi
informasi nama, NIP/NIPTT-PK, jabatan, dan unit kerja.
Terdapat juga dokumen tingkat keterbutuhan yang berisi
informasi nama pengajuan, apakah alat/teknologi
Kesehatan ini baru?, latar belakang, indikasi, dan jumlah
kasus.

Gambar 3.28. Tampilan Informasi Pngajuan

40

Terdapat dokumen studi literatur yang berisikan tabel

data studi litelatur yang ketika tabel di klik maka muncul
modal seperti gambar 3. 29. Didalam modal user bisa
melihat beberapa data dan file yang telah diunggah.

Gambar 3.29. Tampilan Tabel Dokumen Litelatur

Terdapat juga tabel tentang dokumen operasional dan

dokumen aspek sosio-ekonomi. Ketika tabel di klik
muncul modal yang menampilkan detail produk, untuk
tampilannya seperti pada gambar 3. 30.

Gambar 3.30. Tampilan Detail Produk

 41

Pada bagian bawah terdapat informasi alasan revisi

dokumen awal, alasan revisi dokumen lanjutan seperti
pada gambar 3. 31.

Gambar 3.31. Tampilan Informasi Alasan Revisi

b) Penilaian
Pada card penilaian terdapat beberapa pertanyaan
penilaian yang bisa diisi oleh user. Penilaian
menggunakan JavaScript dengan plugin uislider, minimal
nilai 0 dan maksimal nilai 10, serta terdapat total score dari
penilaian seperti pada gambar 3. 32.

Gambar 3.32. Tampilan Penilaian Uislider

42

Terdapat juga pertanyaan penilaian menggunakan

plugin radio button sebagai penilaian, dan terdapat
jumlah penilaian serta nilai total. Semua penilaian
dihitung nilai keseluruhan menggunakan JavaScript.
Berikut gambar 3. 33 menampilkan penilaian dengan
radio button.

Gambar 3.33. Penilaian Radio Button

Terakhir terdapat button selanjutnya yang ketika

diklik muncul modal yang menampilkan data resume
penilaian dan terdapat ckeditor untuk alasan revisi jika
ada seperti pada gambar 3. 34

Gambar 3.34. Tampilan Resume Penilaian

 43

Serta ketika disimpan muncul pemberitahuan

tersimpan atau sweetalert seperti gambar 3. 35 dan button
Kembali yang Kembali ke halaman informasi pengajuan
reviewer.

Gambar 3.35. Tampilan Pemberitahuan Tersimpan

2) Lolos Review
Lolos Review merupakan status yang ditampilkan
ketika data sudah berhasil diverivikasi dan di review oleh
user. Sedangkan tindakannya menampilkan halaman
yang berisi data pengajuan seperti gambar 3. 36 yang
didalamnya terdapat informasi mengenai pengajuan dan
penilaian.

Gambar 3.36. Tampilan Halaman Lihat Pengajuan

44

a. Informasi Pengajuan
Pada informasi pengajaun terdapat data ajuan yang
berisi informasi status pengajuan, nomor pengajuan dan
waktu pengajuan. Terdapat juga data pengaju yang berisi
informasi nama, NIP/NIPTT-PK, jabatan, dan unit kerja.
Terdapat juga dokumen tingkat keterbutuhan yang berisi
informasi nama pengajuan, apakah alat/teknologi
Kesehatan ini baru?, latar belakang, indikasi, dan jumlah
kasus.

Gambar 3.37. Tampilan Informasi Pengajuan Lolos Review

Terdapat dokumen studi literatur yang berisikan tabel

data studi litelatur yang ketika tabel di klik maka muncul
modal berupa tabel yang memuat data dan didalam
modal user bisa melihat file yang telah diunggah.
Terdapat juga tabel tentang dokumen operasional dan
dokumen aspek sosio-ekonomi. Ketika tabel di klik
muncul modal yang menampilkan detail produk. Serta
terdapat data alasan revisi dokumen awal.

b. Data Penilaian
Pada data penilaian terdapat tempilan atau rekapan
nilai serta total nilai dan nilai keseluruhan dari data yang
telah di review oleh user serta terdapat alasan revisi
 45

dokumen lanjutan. Terdapat button kembali yang ketika

diklik kembali ke halaman informasi pengajuan reviewer.

Gambar 3.38. Tampilan Penilaian Lolos Review

3) Direkomendasikan
Status Direkomendasikan merupakan status yang
keluar ketika dokumen diterima verivikasi oleh user.
Ketika tindakannya di buka maka akan muncul status
verivikasi revisi dokumen lanjutan yang memuat halaman
berisi informasi pengajuan, data penilaian, dan data hasil
rekomendasi.

Pada informasi pengajaun terdapat informasi

menganai data ajuan, data pengaju, dokumen tingkat
kebutuhan, dokumen studi litelatur yang menampilka
tabel data studi litelatur yang ketika di buka maka muncul
modal berupa tabel yang memuat data dan didalam
modal user bisa melihat file yang telah diunggah, terdapat
juga tabel tentang dokumen operasional dan dokumen
aspek sosio-ekonomi. Ketika tabel di klik muncul modal
yang menampilkan detail produk. Serta terdapat data
alasan revisi dokumen awal.
46

Gambar 3.39. Tampilan Informasi Pengajuan Direkomendasikan

Pada data penilaian memuat informasi data penilaian

atau rekap penilaian dan terdapat alasan revisi dokumen
lanjutan. Terakhir terdapat data nilai dari hasil
rekomendasi. Terdapat button kembali yang ketika diklik
kembali ke halaman informasi pengajuan reviewer.

Gambar 3.40. Tampilan Hasil Rekomendasi

4) Revisi Dokumen Lanjutan

Revisi Dokeumen Lanjutan merupakan status yang
keluar ketika dokumen memerlukan revisi lanjutan.
Tindakannya hanya bisa lihat pengajuan akan tetapi
terdapat perbedaan dimana dokumen yang lolos terdapat
 47

data nilai dan dokumen yang tidak lolos tidak

menampilkan data nilai.

Pada informasi pengajaun terdapat informasi

menganai data ajuan, data pengaju, dokumen tingkat
kebutuhan, dokumen studi litelatur yang menampilka
tabel data studi litelatur yang ketika di buka maka muncul
modal berupa tabel yang memuat data dan didalam
modal user bisa melihat file yang telah diunggah, terdapat
juga tabel tentang dokumen operasional dan dokumen
aspek sosio-ekonomi. Ketika tabel di klik muncul modal
yang menampilkan detail produk. Serta terdapat data
alasan revisi dokumen awal.

Pada data penilaian memuat informasi data penilaian

atau rekap penilaian dan terdapat alasan revisi dokumen
lanjutan. Terdapat button kembali yang ketika diklik
kembali ke halaman informasi pengajuan reviewer.

Gambar 3.41. Alasan Revisis Dokumen Lanjutan

5) Ditolak
Ditolak merupakan status yang ditampilkan ketika
dokumen tidak lolos verivikasi. Tindaknnya sama seperti
revisi dokumen lanjutan akan tetapi terdapat alasan
48

kenapa dokumen ditolak. Selain itu terdapat informasi

pengajuan yang menampilkan data ajuan, data pengaju,
dokumen tingkat keterbutuhan, tabel dokumen studi
litelatur, tabel dokumen oprasional dan dokumen aspek
sosio-ekonomi dan data penelaian yang berisi hasil
penilaian serta hasil keseluruhan nilai.

Gambar 3.42. Tampilan Alasan Ditolak

 BAB IV
KESIMPULAN DAN SARAN

A. Kesimpulan
Hasil pegembangan Front-End halaman Pengajuan Reviewer
berdasarkan tujuan dan rumusan masalah maka :

1. Hasil dari pegembangan Front-End yang telah dibuat oleh

penulis, penulis telah memastikian bawah dengan
mengembangkan front-end, halaman informasi pengajuan
reviewer memiliki tampilan antarmuka (user interface) yang
lebih baik dan menarik. Hal ini akan membantu meningkatkan
daya tarik dan kesan positif bagi pengguna. Tampilan
antarmuka yang dibuat lebih responsive dari aplikasi E-HTA
sebelumnya karena menggunakan template dari metronic.
2. Tampilan antarmuka yang dibuat memastikan informasi yang
diperlukan untuk pengajuan reviewer aplikasi e-HTA tersedia
dengan akurat, dan terkini. Pengguna akan dapat dengan
mudah menemukan informasi yang dibutuhkan tanpa
kesulitan. Dibandinkan dengan halman penilaian aplikasi E-
HTA yang lama penilaian yang telah dibuat oleh penulis lebih
akurat dengan menggunakan uislider dan radio button yang
merupakan komonen yang lebih terkini untuk penilaian.

B. Saran
Front-end halaman Informasi Pengajuan Reviewer ini telah
berhasil dibuat dan dapat berjalan sesuai dengan rancangan
pembuatannya. Namun halaman ini masih berupa front-end yang
belum bisa digunakan keseluruhan, dan memerlukan back-end
untuk logika bisnis dan pegelolahan data.

49
50

Halaman Ini Sengaja Dikosongkan

 DAFTAR PUSTAKA

C. Chastro and E. Darmawan, “Perbandingan Pengembangan

Front End Menggunakan Blade Template dan Vue Js,” J.
Strateg. Maranatha, vol. 2, no. 2, pp. 302–313, 2020.
B. Suprayogi and A. Rahmanesa, “Penerapan Framework
Bootstrap Dalam Sistem Informasi Pendidikan Sma Negeri 1
Pacet Cianjur Jawa Barat,” Tematik, vol. 6, no. 2, pp. 23–30,
2019, doi: 10.38204/tematik.v6i2.244.
J. C. O’Donnell, S. V. Pham, C. L. Pashos, D. W. Miller, and M. D.
Smith, “Health technology assessment: Lessons learned
from around the world - An overview,” Value Heal., vol. 12,
no. SUPPL. 2, pp. S1–S5, 2009, doi: 10.1111/j.1524-
4733.2009.00550.x.
E. Draborg, D. Gyrd-Hansen, P. B. Poulsen, and M. Horder,
“International comparison of the definition and the practical
application of health technology assessment,” Int. J. Technol.
Assess. Health Care, vol. 21, no. 1, pp. 89–95, 2005, doi:
10.1017/S0266462305050117.
S. R, W. S. C, S. H. F, and A. S. P, “Recommendations Based on the
Florida Citrus Rootstock Selection Guide Using a Web-
server Application of Artificial Intelligence,” pp. 90–94, 2016.

51
52

Halaman Ini Sengaja Dikosongkan

 KODE PROGRAM

Kode Program 1. Fungsi Tanggal

Kode Program 2. JavaScript Fungsi Tanggal

53
54

Kode Program 3. Jenis Pengajuan, Status, dan Unit Kerja

 55

Kode Program 4. Nama Pengajuan dan Nomer Pengajuan

Kode Program 5. Card Informasi dan Tabel

56

Kode Program 6. Tindakan Status

 57

Kode Program 7. Pagginator

Kode Program 8. Footer Informasi

58

Kode Program 9. Informasi Pengajuan Penilaian

Kode Program 10. Tabel Studi Litelatur

 59

Kode Program 11. Tabel Dokumen Operasional dan Dokumen Aspek

Sosio-Ekonomi

Kode Program 12. Alasan Revisi

60

Kode Program 13. Penilaian Uislider

Kode Program 14. Total Penilaian

 61

Kode Program 15. Penilaian Radio Button

Kode Program 16. Total Nilai Keseluruhan

62

Kode Program 17. Modal Resume Penilaian

Kode Program 18. Revisi Dokumen

 63

Kode Program 19. JavaScript Sweetalert

Kode Program 20. JavaScript Alasan Revisi

64

Kode Program 21. JavaScript Uislider

Kode Program 22. JavaScript Switch Radio Button

 65

Kode Program 23. JavaScript Total Nilai

Kode Program 24. JavaScript

66

Halaman Ini Sengaja Dikosongkan

 LAMPIRAN

Lampiran 1. Surat Permohonan Ijin Kegiatan Praktik Magang

67
68

Lampiran 2. Surat Ijin Praktik Magang

 69

Lampiran 3. Surat Balasan Praktik Magang

70

Lampiran 4. Rekapitulasi Kegiatan Praktik Magang

71
72
73
74
 75

Lampiran 5. Lembar Penilaian Peserta Praktik Magang

76
 77

Lampiran 6. Dokumentasi Kegiatan Praktik Magang

1. Pembekalan Kegiatan Magang

2. Pembagian Kelompok Tugas

78

3. Evaluasi sebelum pulang

4. Pengecekan Aplikasi EMR pada poli dan Instalasi Rawat

Inap
 79

5. Kegiatan Pegembangan Front-End Aplikasi HTA

6. Belajar Laravel

7. Foto Bersama Peserta Magang dan Pembimbing