LAPORAN PRAKTIK KERJA INDUSTRI (PRAKERIN)

MERANCANG APLIKASI MANAJEMEN FORM REPORTING

MAINTENANCE PT INDONESIA COMNETS PLUS (ICON+)

Disusun Oleh :

Rendi Purwito Armin : 2021100138

JURUSAN REKAYASA PERANGKAT LUNAK

YAYASAN SETYA BHAKTI
SMK TARUNA BHAKTI
TERAKREDITASI : “A” No. : 02.00/203/BAN-SM/XII/2018Izin No. :
421.4/1150/DISDIK/2004-NPSN: 20229232Program Studi Keahlian Teknik
Komputer & InformatikaKompetensi Keahlian : Rekayasa Perangkat
LunakJalan Pekapuran Kelurahan Curug – Kecamatan Cimanggis DepokKode
Pos 16953 Telp. (021)8744810Website : https://smktarunabhakti.net Email :
taruna@smktarunabhakti.net

2023
LEMBAR PENGESAHAN DARI PEMBIMBING PENULISAN

LAPORAN

Laporan Praktik Kerja Industri (PRAKERIN) telah diperiksa dan disahkan pada:

Pada Tanggal……………………Bulan……………………Tahun 2023

Pembimbing Penulisan Laporan,

Hesti Herawati, S.Kom

NIP. 19910122201307132

I
 LEMBAR PENGESAHAN DARI SEKOLAH

Laporan Praktik Kerja Industri (PRAKERIN) telah diperiksa dan disahkan pada:

Pada Tanggal……………………Bulan……………………Tahun 2023

Disetujui Oleh :

Waka Bidang Hubungan Industri Kepala Program RPL

Furida Lusi Siagian, S.E, S.Pd, M.Si Hesti Herawati, S.Kom

NIP: 19800508200501022 NIP: 19910122201307132

Kepala SMK Taruna Bhakti

Nursidik, ST.
NIP: 19790911200411201

II
 LEMBAR PENGESAHAN DARI INSTANSI

Laporan Praktik Kerja Industri (PRAKERIN) telah diperiksa dan disahkan pada:

Pada Tanggal……………………Bulan……………………Tahun 2023

Disetujui Oleh :

Penanggung Jawab Pembimbing Perusahaan

Heri Haryadi, S.Kom Rahmad Aloriadi, ST

III
 KATA PENGANTAR

Alhamdulillah, segala puji dan syukur kita panjatkan ke hadirat Allah SWT
yang telah memberikan kita semua limpahan rezeki dan karunia sehingga penulis
dapat membuat Laporan Praktik Kerja Industri (PRAKERIN) ini dengan baik.
Tujuan dari pembuatan Laporan PKL ini adalah untuk memenuhi syarat
kelulusan. Laporan ini dibuat berdasarkan pengalaman yang penulis dapatkan
selama melaksanakan Praktik Kerja Industri di PT Icon+.
Penulis juga mengucapkan terima kasih kepada semua pihak yang telah
membantu dan berkontribusi dalam pembuatan laporan praktik kerja industri ini.
Ucapan terima kasih itu disampaikan kepada:
1. Orang tua serta segenap keluarga yang telah mendukung saya.
2. Bapak Nursidik, ST selaku kepala sekolah SMK Taruna Bhakti.
3. Ibu Furida Lusi Siagian, M.Si selaku Wakil Hubungan Industri.
4. Ibu Hesti Herawati, selaku Kepala Program RPL dan Pembimbing Penulisan
Laporan.
5. … Selaku Penguji Laporan Prakerin
6. ... Selaku pemimpin PT. Indonesia Comnet Plus
7. Segenap Staff dan Karyawan di PT. Indonesia Comnet Plus
8. Dan semua rekan-rekan yang membantu saya dalam pembuatan laporan ini.

Penulis juga menyadari bahwa laporan ini masih jauh dari kata sempurna.
Oleh karena itu kritik dan saran sangat saya harapkan dari pembaca. Harapan
penulis semoga laporan yang dibuat berdasarkan pengalaman dan pengetahuan
yang didapatkan selama melaksanakan program PKL ini dapat bermanfaat bagi
semua pihak terutama bagi penulis dan bagi pelajar SMK Taruna Bhakti

IV
 DAFTAR ISI

LEMBAR PENGESAHAN DARI PEMBIMBING PENULISAN LAPORAN ..... I

LEMBAR PENGESAHAN DARI SEKOLAH ......................................................II
KATA PENGANTAR ...........................................................................................IV
DAFTAR ISI ...........................................................................................................V
DAFTAR TABEL ................................................................................................VII
DAFTAR GAMBAR ..........................................................................................VIII
DAFTAR LAMPIRAN ........................................................................................XII
BAB I PENDAHULUAN ......................................................................................1
1.1 Latar Belakang ...........................................................................................1
1.2 Maksud dan Tujuan Prakerin .....................................................................2
1.3 Waktu dan Tempat Pelaksanaan ................................................................2
1.4 Manfaat Prakerin ....................................................................................... 3
1.5 Dasar Pelaksanaan Prakerin .......................................................................3
1.6 Sejarah Perusahaan .................................................................................... 4
1.7 Struktur Organisasi Perusahaan .................................................................5
1.8 Jenis Produksi Perusahaan .........................................................................5
BAB II LANDASAN TEORI .................................................................................8
2.1 Rekayasa Perangkat Lunak ........................................................................8
2.2 Produk RPL ............................................................................................... 8
2.2.1 Sistem Informasi .............................................................................8
2.2.2 Aplikasi .........................................................................................10
2.3 Pemodelan Perangkat Lunak ................................................................... 12
2.3.1 ERD .............................................................................................. 12
2.3.2 DFD .............................................................................................. 13
2.3.3 UML ............................................................................................. 15
2.3.4 Rancangan User Iterface ...............................................................19
2.4 Metode Pengembangan Perangkat Lunak ............................................... 22
2.4.1 Waterfall ....................................................................................... 22
2.4.2 RAD ..............................................................................................23
2.4.3 Spiral .............................................................................................25

V
 2.4.4 Scrum ............................................................................................27
2.4.5 Agile ............................................................................................. 29
2.4.6 Prototype .......................................................................................30
2.5 Tools PengembanganPerangkat Lunak ....................................................32
2.5.1 Bahasa Pemrogramn ..................................................................... 32
2.5.2 Platform ........................................................................................ 35
2.5.3 Database ........................................................................................38
2.5.4 IDE ................................................................................................44
BAB III METODOLOGI PEELITIAN ................................................................ 48
3.1 Metode Pengembanga ..............................................................................48
3.1.1 Metode Pengembanan Yang DipilihError! Bookmark not defined.
3.1.2 Struktur Databas ............................Error! Bookmark not defined.
3.1.3 ERD ...............................................Error! Bookmark not defined.
3.1. FD ................................................... Error! Bookmark not defined.
3.1.4 Mockup ......................................... Error! Bookmark not defined.
3.2 Jadwal Pengembangan Aplikasi .............................................................. 62
BAB IV PEMBAHASAN .................................................................................... 63
4.1 Aplikasi Manajemen Form Reporting Maintenance ................................63
4.2 Alat dan Bahan ........................................................................................ 63
4.2.1 Alat ............................................................................................... 63
4.2.2 Bahan ............................................................................................ 64
4.3 Langkah Pembuatan Aplikasi ................................................................. 64
4.4 Hasil Tampila plikasi ...............................................................................80
BAB V PENUTUP ............................................................................................... 88
5.1 Kesimpulan .............................................................................................. 88
5.2 Saran ........................................................................................................ 88
DAFTAR PUSTAKA ............................................................................................90
LAMPIRAN-LAMPIRAN .................................................................................... 93
CV CREW ........................................................................................................... 137

VI
 DAFTAR TABEL

Tabel 3. 1 Jadwal Pengembangan Aplikasi............................................................62

Tabel 4. 1 Alat/Komponen.....................................................................................63
Tabel 4. 2 Bahan.................................................................................................... 64

VII
 DAFTAR GAMBAR

Gambar 2. 1 Konsep ERD ..................................................................................... 12

Gambar 2. 2 Contoh ERD ......................................................................................13
Gambar 2. 3 Konsep DFD ..................................................................................... 13
Gambar 2. 4 Contoh Diagram Konteks ................................................................. 14
Gambar 2. 5 Contoh DFD Level 1 .........................................................................14
Gambar 2. 6 Contoh DFD Level 2 .........................................................................15
Gambar 2. 7 Contoh Use Case Diagram ................................................................16
Gambar 2. 8 Contoh Activity Diagram ..................................................................17
Gambar 2. 9 Contoh Sequence Diagram ............................................................... 17
Gambar 2. 10 Contoh Class Diagram .................................................................... 18
Gambar 2. 11 Contoh Statemachine Diagram ....................................................... 18
Gambar 2. 12 Contoh Component Diagram .......................................................... 19
Gambar 2. 13 Metode Waterfall ............................................................................ 22
Gambar 2. 14 Metode RAD ...................................................................................24
Gambar 2. 15 Metode Spiral ..................................................................................26
Gambar 2. 16 Metode Scrum .................................................................................27
Gambar 2. 17 Metode Agile .................................................................................. 29
Gambar 2. 18 Metode Prototype ............................................................................31
Gambar 3. 1 Struktur Database ..............................................................................48
Gambar 3. 2 ERD .................................................................................................. 49
Gambar 3. 3 DFD Konteks .................................................................................... 49
Gambar 3. 4 Mockup Halaman Login ................................................................... 50
Gambar 3. 5 Mockup Halaman Forgot Password ..................................................50
Gambar 3. 6 Mockup Halaman Email Link Reset Passod .....................................51
Gambar 3. 7 Mockup Halaman Reset Password ................................................... 51
Gambar 3. 8 Mockup Halaman Dashboard Admin ............................................... 52
Gambar 3. 9 Mockup Halaman Dashboard Field Support .................................... 52
Gambar 3. 10 Mockup Halaman Tabel User ......................................................... 53
Gambar 3. 11 Mockup Halaman Create User ........................................................54
Gambar 3. 12 Mockup Halaman Edit User ........................................................... 54

VIII
Gambar 3. 13 Mockup HalamanTabel Form .........................................................55
Gambar 3. 14 Mockup Halaman Detail Form ....................................................... 55
Gambar 3. 15 Mockup Halaman Create Form .......................................................56
Gambar 3. 16 Mockup Halaman Edit Form .......................................................... 56
Gambar 3. 17 Mockup Halaman Print Form ......................................................... 57
Gambar 3. 18 Mockup Halaman Render Form ..................................................... 57
Gambar 3. 19 Mockup Halaman Feedback ........................................................... 58
Gambar 3. 20 Mockup Halaman Tabel Submission ..............................................58
Gambar 3. 21 Mockup Halaman Detail Submission ............................................. 59
Gambar 3. 22 Mockup Halaman Print Submission ............................................... 60
Gambar 3. 23 Mockup Halaman Tabel My Submission ....................................... 60
Gambar 3. 24 Mockup Halaman Detail My Submission .......................................61
Gambar 4. 1 Buat Project Baru ..............................................................................64
Gambar 4. 2 Layout Template Voler .....................................................................65
Gambar 4. 3 Migration Tabel User ........................................................................66
Gambar 4. 4 Controller Admin ..............................................................................66
Gambar 4. 5 Function Index User ..........................................................................66
Gambar 4. 6 Function Create User ........................................................................ 66
Gambar 4. 7 Function Edit User ............................................................................ 67
Gambar 4. 8 Function Delete User ........................................................................ 67
Gambar 4. 9 Route CRUD User ............................................................................ 67
Gambar 4. 10 View Halaman Tabel User ..............................................................68
Gambar 4. 11 View Halaman Create User ............................................................ 69
Gambar 4. 12 View Halaman Edit User ................................................................ 70
Gambar 4. 13 Controller Autentikasi .....................................................................70
Gambar 4. 14 Function Login ................................................................................70
Gambar 4. 15 Function Logout ..............................................................................71
Gambar 4. 16 Function Register ............................................................................71
Gambar 4. 17 Function Forget Password .............................................................. 72
Gambar 4. 18 Function Reset Password ................................................................ 72
Gambar 4. 19 Route Autentikasi ........................................................................... 72
Gambar 4. 20 View Halaman Login ......................................................................73

IX
Gambar 4. 21 View Halaman Register .................................................................. 74
Gambar 4. 22 View Halaman Forgot Password .................................................... 74
Gambar 4. 23 View Email Forgot Password ......................................................... 75
Gambar 4. 24 View Halaman Reset Password ...................................................... 76
Gambar 4. 25 View Dashboard Admin ................................................................. 77
Gambar 4. 26 View Dashboard Field Support .......................................................77
Gambar 4. 27 Install Plugin Formbuilder Laravel .................................................78
Gambar 4. 28 Publish View Dan Asset Vendor Formbuilder Laravel .................. 78
Gambar 4. 29 Function Print Form ........................................................................78
Gambar 4. 30 Function Print Submission ..............................................................78
Gambar 4. 31 Route Print Form dan Submission .................................................. 78
Gambar 4. 32 View Print Form ............................................................................. 78
Gambar 4. 33 View Print Submission ................................................................... 79
Gambar 4. 34 Tampilan Halaman Login ............................................................... 80
Gambar 4. 35 Tampilan Halaman Register ........................................................... 80
Gambar 4. 36 Tampilan Halaman Forgot Password ..............................................80
Gambar 4. 37 Tampilan Email Reset Password .................................................... 81
Gambar 4. 38 Tampilan Reset Password ...............................................................81
Gambar 4. 39 Tampilan Halaman Dashboard Admin ........................................... 82
Gambar 4. 40 Tampilan Halaman Dashboard Field Support ................................ 82
Gambar 4. 41 Tampilan Halaman Tabel User ....................................................... 82
Gambar 4. 42 Tampilan Halaman Create User ......................................................83
Gambar 4. 43 Tampilan Halaman Edit User ......................................................... 83
Gambar 4. 44 Tampilan Halaman Tabel Form ......................................................83
Gambar 4. 45 Tampilan Halaman Create Form .....................................................84
Gambar 4. 46 Tampilan Halaman Edit Form ........................................................ 84
Gambar 4. 47 Tampilan Halaman Preview Form ..................................................85
Gambar 4. 48 Tampilan Halaman Print Form ....................................................... 85
Gambar 4. 49 Tampilan Halaman Render Form ................................................... 85
Gambar 4. 50 Tampilan Halaman Feedback ......................................................... 86
Gambar 4. 51 Tampilan Halaman Tabel Submission ............................................86
Gambar 4. 52 Tampilan Halaman Detail Submission ........................................... 86

X
Gambar 4. 53 Tampilan Halaman Print Submission ............................................. 87
Gambar 4. 54 Tampilan Halaman Tabel My Submission ..................................... 87
Gambar 4. 55 Tampilan Halaman Detail My Submission .....................................87

XI
 DAFTAR LAMPIRAN

CV Crew
Kode Program
Lembar Bimbingan

XII
 BAB I

PENDAHULUAN

1.1 Latar Belakang

Prakerin atau praktik kerja industri dilakukan untuk mendidik dan

membimbing siswa dalam Dunia industri atau Dunia kerja yang sesuai
dengan kompetensi kejuruan masing-masing. Selain itu, prakerin
memberikan pengetahuan dalam dunia kerja agar dimasa mendatang para
siswa dapat bersaing dalam dunia industri yang semakin ketat seperti saat ini,
untuk mempersiapkan siswa agar memiliki kemampuan teknis dengan
wawasan yang luas dan fleksibel di era kemajuan teknologi dan ilmu
pengetahuan, meningkatkan kualitas Sekolah Menengah Kejuruan (SMK),
serta mengasah dan mengimplementasikan materi yang diperoleh siswa dari
sekolah masing-masing yang relevan dengan jurusannya.
Kegiatan Prakerin merupakan salah satu bentuk kegiatan dari sekian
banyak visi dan misi SMK Taruna Bhakti, mempersiapkan siswa dan siswi
untuk kemudian memasuki dunia industri dan usaha (DI/DU). Dunia industri
dan usaha tersebut tentu tidak mudah diperoleh, sehingga siswa perlu
memahami tidak hanya teori belajar tetapi juga pemahaman tentang
lingkungan yang akan mereka hadapi setelah lulus. Kegiatan prakerin
dilakukan sesuai dengan kemampuan dan kejuruan masing-masing siswa.

1
1.2 Maksud dan Tujuan Prakerin

Praktik Kerja Industri (PRAKERIN) merupakan suatu sistem

pembelajaran yang berlangsung di luar proses belajar mengajar dan
dilaksanakan pada perusahaan/industri atau lembaga yang relevan dengan
kompetensi masing masing siswa.
Secara umum pelaksanaan Praktik Kerja Industri dimaksudkan untuk
meningkatkan pengetahuan dan keterampilan siswa di bidang dan
kompetensi masing masing, menyesuaikan diri dengan situasi sebenarnya
dan menulis laporan yang berhubungan langsung dengan tujuan tertentu.
Setelah siswa selesai melaksanakan program Praktik Kerja Industri
secara khusus siswa diharapkan memperoleh pengalaman yang mencakup
tinjauan tentang perusahaan, dan kegiatan-kegiatan praktik yang
berhubungan langsung dengan kompetensi masing-masing siswa/i, dan
mempersiapkan para siswa/i untuk belajar bekerja secara mandiri maupun
bekerja dalam suatu tim dengan tujuan mengembangkan potensi dan keahlian
sesuai kompentesi masing-masing.

1.3 Waktu dan Tempat Pelaksanaan

1. Waktu
Waktu pelaksanaan Prakek Kerja Industri yang dilakukan kurang lebih
selama 6 bulan yang terhitung sejak tanggal 1 September 2022 sampai
dengan 28 Februari 2023 di PT Indonesia Comnets Plus. Adapun waktu
kerja yang dilakukan yaitu dari pukul 08.00-17.00 WIB terhitung dari hari
Senin sampai dengan hari Jumat (hari Sabtu libur).
2. Tempat
Praktek Kerja Industri ini dilaksanakan di PT Indonesia Comnets Plus
yang beralamat di Jalan Sigura-gura II No.2, RT.11/RW.1, Duren Tiga,
Kec. Pancoran, Kota Jakarta Selatan, Daerah Khusus Ibukota Jakarta
12760

2
1.4 Manfaat Prakerin

1. Manfaat Bagi Siswa

a. Menghasilkan Sumber Daya Manusia yang profesional
b. Mengenalkan siswa-siswi atau calon pekerja pada pekerjaan lapangan,
baik di perusahaan maupun di industri
c. Menambah pengalaman bekerja
d. Menambah ilmu, terlebih ilmu yang tidak didapatkan di sekolah
e. Melatih siswa untuk menjadi lebih disiplin dan bertanggung jawab
sebelum memasuki dunia kerja profesional

2. Manfaat Bagi Sekolah

a. Memberikan kontribusi dan tenaga kerja bagi perusahaan atau instansi
terkait
b. Dapat menyesuaikan program pendidikan sesuai dengan kebutuhan
lapangan kerja
c. Tujuan pendidikan tercapai, serta kredibilitas sekolah

3. Manfaat Bagi Industri

a. Dapat mengenal persis kualitas siswa yang berlatih di perusahaan dan
instansi
b. Mendukung program pemerintah
c. Mendapatkan tenaga kerja sementara sebagai sumber daya perusahaan

1.5 Dasar Pelaksanaan Prakerin

Praktik Kerja Industri (PRAKERIN) akan menjadi salah satu

penyelenggaraan pendidikan Sekolah Menengah Kejuruan (SMK) sesuai
dengan ketentuan - ketentuan yang tercantum dalam :
1. Undang-Undang No. 13 tahun 2003 tentang Ketenagakerjaan
khususnya pasal 21 – 30.

3
 2. Peraturan Menteri Tenaga Kerja dan Transmigrasi no.
Per.22/Men/IX/2009 tentang Penyelenggaraan Pemagangan di Dalam
Negeri.
3. Peraturan Magang di Luar Negeri Per.08/Men/V/2008 tentang Tata
cara perizinan dan penyelenggaraan Pemagangan di Luar Negeri.
4. Undang-Undang No. 3 tahun 1992 tentang jaminan sosial tenaga kerja.

1.6 Sejarah Perusahaan

PT. Indonesia Comnets Plus (ICON+) didirikan pada tanggal 3

Oktober 2000, PT Indonesia Comnet Plus (ICON+) berfokus pada
penyediaan jaringan, jasa, dan content telekomunikasi, khusus untuk
mendukung teknologi dan system informasi PT PLN (Persero) dan publik.
Untuk itu Perseroan mengadakan berbagai layanan unggulan seperti Clear
Channel, Multi Protocol Label Switching (MPLS), akses internet broadband,
Voice over Internet Protocol (VoIP), dan aplikasi perbankan Sebagai anak
perusahaan yang dimiliki sepenuhnya oleh PLN, pada awalnya PT. Indonesia
Comnets Plus (ICON+) berfokus untuk melayani kebutuhan PLN akan
jaringan telekomunikasi. Seiring dengan kebutuhan industri akan jaringan
telekomunikasi dengan tingkat availability dan reliability yang konsisten,
Perseroan melihat peluang baru untuk mengembangkan usahanya yaitu
dengan mengkomersialkan kelebihan kapasitas jaringan telekomunikasi
ketenagalistrikan serat optik milik PLN di Jawa dan Bali.
Berdasarkan pemikiran tersebut, ICON+ mulai menjalin kerjasama
dengan berbagai perusahaan, terutama yang kegiatan operasionalnya
membutuhkan jaringan telekomunikasi yang ekstensif dan handal. Hingga
saat ini Perseroan 40 melayani lebih dari 296 perusahaan di Indonesia, di
industri-industri utama yaitu telekomunikasi, perbankan, keuangan, dan
manufaktur. Dalam upaya menyediakan layanan yang handal selalu tersedia,
dan dengan down time minimal, sehingga memenuhi service level agreement,
PT. Indonesia Comnets Plus (ICON+) didukung oleh sumber daya manusia
yang kompeten dan berpengalaman serta jaringan serat optic sepanjang
hampir 8.000 km yang mencakup Jawa, Bali dan Sumatra.

4
 Sesuai dengan visi PT. Indonesia Comnets Plus (ICON+) yaitu
menjadi penyedia jaringan terkemuka di Indonesia, pada tahun 2008
Perseroan melakukan ekspansi konektifitas jaringan telekomunikasi ke Pulau
Sumatra dan wilayah wilayah terpencil di Indonesia, serta memaksimalkan
pendayagunaan hak jaringan ketenagalistrikan milik PLN yang mencakup
seluruh wilayah Nusantara, yaitu "Right of Ways" (RoW). Dengan semakin
berkembangannya perusahaan maka kini PT. Indonesia Comnets Plus
(ICON+) memiliki 9 kantor Regional yang tersebar di berbagai pulau di
Indonesia yaitu sebagai berikut :
1. RSBU (Regional Sumatera Bagian Utara)
2. RSBT (Regional Sumatera Bagian Timur)
3. RSBS (Regional Sumatera Bagian Selatan)
4. ROJB (Regional Officer Jakarta Banten)
5. RJBR (Regional Jawa Barat)
6. RJTY (Regional Jawa Tengan dan DIY)
7. RJTM (Regional Jawa Timur)
8. RBNT (Regional Bali dan Nusa Tenggara 41)
9. RINT (Regional Indonesia Timur)

1.7 Struktur Organisasi Perusahaan

Dalam Struktur Organisasi ICON+, dalam jajaran direktur terdapat

Direktur Utama membawahi Direktur Perencanaan dan Operasi Jaringan,
Direktur Niaga dan Pengembangan Bisnis, Direktur Solusi dan Operasi
Ketenagalistrikan dan Direktur Keuangan & HCM. Dalam Direktur Niaga
dan Pengembangan Bisnis membawahi beberapa bagian yaitu Ekonomi
Digital, Inkubator Bisnis, SSU Operasi Publik, SBU Solusi TIK Publik, dan
SBU Regional. Divisi MSRTI dibawahi oleh bagian SSU Operasi Publik.

1.8 Jenis Produksi Perusahaan

ICON+ sebelumnya memiliki produk dan layanan yang dibagi

menjadi empat kategori, yang terdiri dari ICONect, ICONWeb, ICONBase
dan ICONApps. Kemudian pada tahun 2021, ICON+ meluncurkan layanan

5
baru nya yaitu ICONNET, yang merupakan layanan fixed broadband internet,
khusus untuk pangsa pasar ritel atau biasa disebut dengan internet rumah.
Berikut penjelasan mengenai produk dan layanan yang dimiliki oleh ICON+:
1. ICONect
Merupakan solusi konektivitas yang memberikan nilai lebih
bagi pelanggan. Solusi yang diberikan berupa komunikasi data yang
menghubungkan lokasi pelanggan di berbagai wilayah Indonesia.
Jaringan end-to-end fiber optic akan menjamin kelancaran pertukaran
informasi yang cepat dan aman sesuai dengan kebutuhan pelanggan.
Produk dan layanan dalam kategori ini terbagi ke dalam beberapa sub
kategori sebagai berikut:
a. Clear Channel
b. Metro Ethernet
c. IP VPN
d. IP VSAT
2. ICONWeb
Merupakan Solusi akses internet tanpa batasan waktu dan
kuota yang menjangkau berbagai wilayah di Indonesia. Infrastruktur
serat optik mendukung koneksi yang cepat dan stabil, serta menjawab
kebutuhan komunikasi dengan intensitas tinggi. Produk dan layanan
dalam kategori ini terbagi ke dalam beberapa sub kategori sebagai
berikut:
a. Internet Corporate
b. IP TRANSIT/NAP (Network Access Point)
c. Indonesia Internet Exchange (IIX) Access
d. I-WIN
e. Hosting
3. ICONApps
Solusi layanan nilai tambah untuk Mendukung Proses Bisnis
Terintegrasi pelanggan dalam Menyediakan Pelayanan Terbaik.
Produk dan layanan dalam kategori ini terbagi ke dalam beberapa sub
kategori sebagai berikut:

6
 a. Video As a Service (VAAS)/I-SEE (ICON+ Surveillance for
Energy and Enterprise
b. Seat Management
c. Solusi Aplikasi dan Bisnis Proses Ketenagalistrikan
(PLN)/Non Ketenagalistrikan
4. ICONBase
Merupakan solusi efektif untuk pengelolaan infrastruktur
system dan data pelanggan, dengan tingkat keamanan premium bagi
korporasi. ICONBase didukung Data Center Tier-3 berlokasi di
dalam negeri. Produk dan layanan dalam kategori ini terbagi ke
dalam beberapa sub kategori sebagai berikut:
a. Data Center Colocation
b. ICONCloud Virtual Data Center
c. Manage Service Router
d. Managed Service PC dan Notebook
5. ICONNET
Layanan internet broadband dan internet broadband plus TV
dengan jaringan fiber optic yang andal.

7
 BAB II
LANDASAN TEORI

2.1 Rekayasa Perangkat Lunak

RPL merupakan sebuah disiplin ilmu yang berhubungan dengan

seluruh aspek produk perangkat lunak baik dari tahapan awal hingga ke
pemeliharaan dari perangkat lunak pasca produksi atau proses yang
terintegrasi dan menyeluruh dari segala aspek, mulai dari sebelum perangkat
lunak itu dibuat hingga selesai dan bahkan hingga tahap segala aspek. (Rizky
Wicaksono, 2017)
Karakteristik Perangkat Lunak lebih dikenal sebagai elemen logik
dari pada fisik, oleh karena itu perangkat lunak memiliki karakteristik yang
berbeda dari perangkat keras :
1. Perangkat lunak dikembangkan atau direkayasa, jadi tidak diproduksi
dalam pengertian klasik.
2. Merupakan produk yang unik (tidak ada seri produksi).
3. Perangkat lunak tidak pernah akan rusak karena selalu diperbaharui.
4. Perangkat lunak pada umumnya dibangun sesuai keinginan, jadi tidak
dibentuk dari komponen yang sudah ada.
5. Fleksibel, sehingga mudah dimodifikasi.
6. Dihubungkan (linked) dengan sistem komputer.

2.2 Produk RPL

2.2.1 Sistem Informasi

Sistem informasi adalah suatu sistem yang ada dalam organisasi

dengan mempertemukan kebutuhan pengolahan transaksi harian dan
mendukung kegiatan operasi serta bersifat manajerial serta strategi dari
organisasi dan tersedia untuk pihak luar organisasi sesuai dengan laporan-
laporan yang diperlukan.
Jika diartikan secara terpisah, pengertian sistem adalah sekelompok
elemen atau komponen yang digabungkan menjadi satu dengan tujuan

8
untuk mencapai tujuan tertentu. Sedangkan pengertian informasi adalah
sekumpulan data dan fakta yang telah melalui proses sehingga bisa
dimengerti oleh penerimanya. Berikut ini ada 7 jenis sistem informasi
yang paling sering digunakan dalam organisasi:
1. Sistem Informasi Manajemen
Jenis sistem informasi yang pertama adalah SIM (Sistem
Informasi Manajemen). Sesuai dengan namanya sistem ini
menyasar untuk kegiatan manajerial. Yang termasuk kedalam
manajerial adalah setiap orang yang memiliki kedudukan dalam
organisasi dan pekerjaan yang memiliki tanggung jawab untuk
manajemen pada suatu divisi atau bagian dalam perusahaan.
2. Sistem Informasi Akuntansi
Jenis yang kedua adalah sistem informasi akuntansi atau
disebut SIA. SIA merupakan implementasi sistem informasi yang
berhubungan dengan sistem akuntansi dari suatu organisasi atau
perusahaan. Akuntansi memiliki fungsi untuk melihat kondisi
keuangan suatu organisasi apakah sedang surplus atau minus.
Dengan adanya sistem informasi akuntansi ini akan
membantu tugasseorang akuntan untuk melakukan audit kondisi
keuangan perusahaan, menampilkan data-data pemasukan dan
pengeluaran, melihat keuntungandan kerugian bisnis, merapikan
pencatatan pelaporan keuangan dan masih banyak lainnya.
3. Sistem Informasi Keuangan
Sistem informasi keuangan merupakan sistem informasi
yang beradadibawah manajemen dengan fungsi untuk mengatur
keuangan perusahaan. Sistem informasi keuangan ini nantinya
akan terintegrasi dengan sisteminformasi akuntansi untuk masalah
pencocokan datanya.
4. Sistem Informasi Manufaktur
Untuk bisnis Anda yang bergerak dalam bidang manufaktur
atau produksi, memiliki sistem informasi manajemen ini adalah hal
yang wajib.

9
 5. Sistem Informasi Sumber Daya Manusia
Sistem informasi ini sering digunakan pada bagian HRD
dan personalia dalam perusahaan untuk menyimpan data diri
karyawan, gaji pokok, tunjangan, bonus, masa kerja, jabatan dan
lain sebagainnya.
Dengan adanya sistem informasi ini kerjaan dari bagian
SDM bisa lebih mudah. Selain itu sistem informasi sumber daya
manusia ini juga bisa dikombinasikan dengan sistem informasi
manajemen, keuangan dan lain sebagainnya.
6. Sistem Informasi Pemasaran
Sistem informasi pemasaran sangat penting bagi divisi
pemasaran dalam perusahaan. Dengan sistem pemasaran ini akan
membantu dalam proses pencatatan dan memberikan segala
informasi mengenai penjualan yang telah dilakukan dari
perusahaan.
7. Sistem Informasi Eksekutif
Nah yang terakhir adalah sistem informasi eksekutif.
Sistem informasi eksekutif dikembangkan dan juga digunakan
untuk mereka yang berada di level eksekutif dari suatu perusahaan.
Sistem informasi ini akan memberikan kemudahan dalam arus
informasi dari divisi di bawahnya kepada mereka.

2.2.2 Aplikasi

Yang dimaksud perangkat lunak aplikasi adalah program yang siap

untuk digunakan, dibuat untuk melaksanakan perintah penggunanya. Arti
lain dari aplikasi yaitu kumpulan program yang dibuat untuk melakukan
pekerjaan tertentu yang di instruksikan oleh penggunanya.
Atau dapat dikatakan juga aplikasi merupakan perangkat
lunak (software) yang di buat untuk membantu pekerjaan manusia. Selain
dapat membantu dan mempercepat proses pekerjaan manusia, aplikasi
juga dapat menghasilkan hasil yang lebih akurat dalam memecahkan
permasalahan.

10
 Lalu apakah itu aplikasi mobile? Aplikasi mobile adalah suatu
aplikasi yang memungkinkan penggunanya dapat melakukan mobilitas
(bergerak, berpindah-pindah) saat menggunakannya, misalnya seperti
penggunaan aplikasi pada handphone, perlengkapan PDA, dan sebagainya.
Dengan aplikasi mobile pengguna dapat melakukan berbagai macam
aktivitas misalnya seperti melakukan pengolahan data, hiburan, belajar,
dan melakukan aktivitas lainnya. Artinya dengan aplikasi mobile kita
dapat berpindah-pindah atau bergerak saat menggunakannya, misalnya
seperti aplikasi pada handphone kita dapat menggunakannya sambil
berjalan-jalan atau berpindah-pindah tempat.
Aplikasi memiliki karakteristik misalnya seperti: aplikasi itu
elemen logika jadi bukan elemen fisik seperti hardware, sehingga aplikasi
tidak memiliki wujud fisik. Aplikasi bisa di rekayasa ataupun di
kembangkan. Dan aplikasi bentuknya program dan tidak bisa di rakit
seperti hardware. Berikut jenis program aplikasi yang saat ini dapat
dibedakan menjadi beberapa jenis, diantaranya seperti:
1. Aplikasi Pengolah Kata
Yaitu aplikasi yang diunakan untuk melakukan pengolahan kata
atau naskah. Contohnya seperti Microsoft Word, Word Star, Open
Office Writer, Lotus Ami Pro, WordPerfect, dan sebagainya.
2. Aplikasi Spreadsheet
Yaitu program aplikasiyang dapat digunakan untuk mengolah data,
khususnya angka dalam bentuk kolom. Contohnya
seperti Microsoft Excell, Lotus Improv, OpenOffice Calc,
StarOffice Calc, Gnumeric, dan sebagainya.
3. Aplikasi Multimedia
Yaitu aplikasi yang daat digunakan untuk melakukan pengolahan
beberapa media informasi misalnya seperti teks, gambar, video,
audio, grafik dan sebagainya. Saat ini banyak sekali aplikasi
multimedia mulai dari hanya sekedar untuk melihat gambar, video
dan mendengarkan audio sampai yang dapat mengedit atau

11
 membuatnya. Contohnya seperti Adobe Flash Player, PowerDVD,
Windows Movie Marker, ACDsee, DirectX, dan sebagainya.
4. Aplikasi Presentasi
Yaitu aplikasi yang daat digunakan untuk melakukan presentasi,
misalnya seperti menampilkan materi dalam bentuk slide show.
Contohnya seperti Microsoft Power Point, OpenOffice Impress,
Silideshark dan sebagainya.
5. Aplikasi DBMS (Database Management System)
Yaitu aplikasi yang daat menyimpan data, mengolah data, dan
menghasilkan informasi. Program aplikasi Database Management
System (DBMS) ada yang gratis sampai yang berbayar. Contohnya
seperti MySQL, Microsoft Access, Oracle, SQL Server,
Foxpro, dan sebagainya.

2.3 Pemodelan Perangkat Lunak

2.3.1 ERD

Entity Relatonship Diagram (ERD) merupakan diagram sistem

pemodelan konseptual untuk menggambarkan struktur logis dari basis
data berbasis grafis. ERD dilakukan untuk pemodelan basis data relasional.
Kardinalitas relasi merujuk kepada hubungan maksimum yang terjadi dari
himpunan entitas yang satu ke himpunan entitas yang lain dan begitu juga
sebaliknya

Gambar 2. 1 Konsep ERD

12
 Gambar 2. 2 Contoh ERD

2.3.2 DFD

DFD adalah satu diagram yang menggambarkan aliran data dari

sebuah proses yang sering disebut dengan sistem informasi. Di dalam data
flow diagram juga menyediakan informasi mengenai input dan output dari
tiap entitas dan proses itu sendiri. Dalam diagram alir data juga tidak
mempunyai kontrol terhadap flow-nya, sehingga tidak adanya aturan
terkait keputusan atau pengulangan. Bentuk penggambaran berupa data
flowchart dengan skema yang lebih spesifik.

Gambar 2. 3 Konsep DFD

Data flow diagram terbagi menjadi tiga jenis, dimana setiap bagian
memiliki peran dan fungsinya masing-masing. Untuk pembuatannya
sendiri dapat menyesuaikan kebutuhan proyek dari manajemen tim-nya.
1. Diagram Level 0 (Diagram Konteks)
Diagram konteks atau level 0 merupakan diagram dengan
tingkatan paling rendah, dimana menggambarkan sistem
berinteraksi dengan entitas eksternal. Pada diagram konteks akan

13
 diberi nomor untuk setiap proses yang berjalan, dimulai dari angka
0 terlebih dahulu.
Jadi, untuk setiap aliran data akan langsung diarahkan menuju
sistem. Ciri dari diagram level 0 terletak pada tidak adanya
informasi yang terkait data yang tersimpan pada data store.

Gambar 2. 4 Contoh Diagram Konteks

2. Diagram Level 1
DFD level 1 merupakan lanjutan dari diagram konteks karena
setiap proses yang berjalan akan diperinci pada tingkatan ini
sehingga proses utama akan dipecah menjadi sub-sub proses yang
lebih kecil lagi.

Gambar 2. 5 Contoh DFD Level 1

14
 3. Diagram Level 2
DFD level 2 merupakan tingkat lanjutan dari level yang
sebelumnya, dimana pada fase ini akan dijelaskan lebih detail
terkait tiap prosesnya. Namun, untuk tingkatan ini jarang sekali
dikerjakan dan lebih banyak hanya menerapkan dua level di
bawahnya saja.

Gambar 2. 6 Contoh DFD Level 2

2.3.3 UML

UML (Unified Modelling Language) adalah suatu metode dalam

pemodelan secara visual yang digunakan sebagai sarana perancangan
sistem berorientasi objek.
UML juga dapat didefinisikan sebagai suatu bahasa standar
visualisasi, perancangan, dan pendokumentasian sistem, atau dikenal juga
sebagai bahasa standar penulisan blueprint sebuah software.
UML diharapkan mampu mempermudah pengembangan piranti
lunak (RPL) serta memenuhi semua kebutuhan pengguna dengan efektif,
lengkap, dan tepat. Hal itu termasuk faktor-faktor scalability, robustness,
security, dan sebagainya. UML dibagi menjadi beberapa jenis yang terdiri
dari:
1. Use Case Diagram
Use Case Diagram adalah satu jenis dari diagram UML
(Unified Modelling Language) yang menggambarkan hubungan

15
 interaksi antara sistem dan aktor. Use Case dapat mendeskripsikan
tipe interaksi antara si pengguna sistem dengan sistemnya. Use
Case merupakan sesuatu yang mudah dipelajari. Langkah awal
untuk melakukan pemodelan perlu adanya suatu diagram yang
mampu menjabarkan aksi aktor dengan aksi dalam sistem itu
sendiri, seperti yang terdapat pada Use Case.

Gambar 2. 7 Contoh Use Case Diagram

2. Activity Diagram
Activity diagram atau dalam bahasa Indonesia berarti
diagram aktivitas, merupakan sebuah diagram yang dapat
memodelkan berbagai proses yang tejadi pada sistem. Seperti
layaknya runtutan proses berjalannya suatu sistem dan
digambarkan secara vertikal. Activity diagram adalah salah satu
contoh diagram dari UML dalam pengembangan dari Use Case.

16
 Gambar 2. 8 Contoh Activity Diagram
3. Sequence Diagram
Sequence diagram merupakan diagram yang menjelaskan
interaksi objek berdasarkan urutan waktu. Sequence dapat
menggambarkan urutan atau tahapan yang harus dilakukan untuk
dapat menghasilkan sesuatu, seperti yang tertera pada Use Case
diagram.

Gambar 2. 9 Contoh Sequence Diagram

4. Class Diagram
Class diagram atau diagram kelas merupakan suatu diagram
yang digunakan untuk menampilkan kelas-kelas berupa pake-paket

17
 untuk memenuhi salah satu kebutuhan paket yang akan digunakan
nantinya.
Namun, pada Class diagram desain modelnya dibagi
menjadi 2 bagian. Class diagram yang pertama merupakan
penjabaran dari domain model yang merupakan abstraksi dari basis
data. Class diagram yang kedua merupakan bagian dari modul
program MVC pattern (Model View Controller), di mana terdapat
class boundary sebagai class interface, class control sebagai
tempat ditemukannya algoritma, dan class entity sebagai tabel
dalam basis data dan query program.

Gambar 2. 10 Contoh Class Diagram

5. Statemachine Diagram
Statemachine yaitu salah satu jenis diagram pada UML
yang berfungsi untuk menggambarkan transisi serta perubahan
pada suatu objek pada sistem.

Gambar 2. 11 Contoh Statemachine Diagram

18
 6. Component Diagram
Component diagram berfungsi untuk menggambarkan
software pada suatu sistem. Component diagram merupakan
penerapan pada piranti lunak atau software dari satu class maupun
lebih, dan biasanya berupa file data, source code,.exe, table,
dokumen, atau yang lainnya..

Gambar 2. 12 Contoh Component Diagram

2.3.4 Rancangan User Iterface

Menurut Wilbert O. Galitz, user interface adalah bagian dari

komputer dan perangkat lunak yang dapat dilihat, didengar, disentuh,
diajak bicara, dan yang dapat dimengerti secara langsung oleh manusia.
Dapat dikatakan user interface itu sebagai teknik dan mekanisme dari
tampilan antarmuka untuk berinteraksi dengan pengguna. Berdasarkan
pernyataan tersebut, maka dapat dikatakan bahwa user interface adalah
bagian dari komputer dan perangkat lunak yang mengatur tampilan
antarmuka untuk pengguna dan memfasilitasi interaksi yang
menyenangkan antara pengguna dengan sistem. User interface (UI) juga
bisa diartikan sebagai hasil akhir dari user experience (UX) yang dapat
dilihat.

19
 Perancangan antarmuka memiliki prinsip-prinsip yang harus dipenuhi
dalam pembangunannya, terdapat 17 prinsip umum yang melatar
belakangi perancangan user interface, yaitu sebagai berikut :
1. Kompatibilitas Pengguna (User Compatibility)
Antarmuka pengguna yan akan dibangun harus memenuhi prinsip
user compability, karena semua pengguna adalah tidak sama dan
semua pengguna tidak seperti pengembang. Para designer harus
paham tentang psikologi dasar pengguna tersebut.
2. Kompatibilitas Produk (Product Compatibility)
Kompabilitas antar prouk harus diperhatikan dan dipertahankan.
3. Kompatibilitas Tugas (Task Compability)
Struktur dan alur sistm harus sesuai dan mendukung tugas
pengguna
4. Kompatibilitas Alur Kerja (Workflow Compatibility)
Sistem harus diorganissikan dengan baik sehingga dapat
memfasilitasi transisi antar tugas pengguna
5. Konsistensi (Consistency)
Konsistensi membuat pegguna berfikir dengan menganalogikan
dan memprediksi bagaimana melakukan sesuatu yang belum
pernah dilakukan sebelumnya.
6. Keakraban (Familiarity)
Konsep, terminologi, pngaturannya di antarmuka harus yang
dipahami pengguna dengan baik.
7. Kesederhanaan (Simplicity)
Kesalahan umum yang tejadi pada perancangan antarmuka adalah
berusaha untuk menyediakan semua fungsionalitas.
8. Manipulasi langsung (Direct Manipulation)
Pengguna secara langsug dapat melihat aksinya pada objek yang
terlihat.
9. Kontrol (Control)

20
 Dapat membuat frustasidan demolarisasi bagi pengguna, jika
merasa dikontrol oleh mesin. Contohnya penggunaan tombol next
yang terlalu banyak.
10. What You See Is What You Get (WYSIWYG)
Adanya korespondensi stu ke satu antara informasi di layar dengan
informasi di printed-output atau file
11. Keluwesan (Flexibility)
Mengijinkan semakin bayak kontrol pengguna dan mengakomodir
keterampilan pengguna yang bervariasi
12. Tanggap (Responsiveness)
Komputer harus selalu erespon dengan segera setiap input dari
pengguna.
13. Teknologi tak terlihat (Invisible Technology)
Pengguna sebaiknya menetahui sedikit mungkin detil teknis
bagaimana sistem diimplementasikan. Contohnya pengguna tidak
perlu tau atau bingung mengenai proses download.
14. Kekokohan (Robustness)
Sistem sebaiknya mentoelir kesalahan manusia yang umum dan
tidak dapat dihindari, seperti lupa. Crash system harus
diminimalisir, menyediakan recovery yang mudah dipahami jika
terjadi crash.
15. Perlindungan (Protection)
Pengguna seharusnya meproteksi dari hasil-hasil yang
menyebabkan “bencana” karena kesalahan umum manusia (pelupa).
Contohnya pengguna lupa password maka seharusnya sistem
memproteksinya dengan fasilitas forgot password sehingga
kemungkinan kecil orang lain tidak dapat mengakses.
16. Mudah dipelajari (Easy of Learning)
Sistem mudah dipelajar bagi pengguna yang masih pemula.
17. Mudah digunakan (Easy of Use)
Sistem mudah digunakanbagi para pengguna yang sudah mahir.

21
2.4 Metode Pengembangan Perangkat Lunak

2.4.1 Waterfall

Waterfall adalah salah satu jenis model pengembangan aplikasi dan

termasuk ke dalam classic life cycle (siklus hidup klasik), yang mana
menekankan pada fase yang berurutan dan sistematis. Untuk model
pengembangannya, dapat dianalogikan seperti air terjun, dimana setiap
tahap dikerjakan secara berurutan mulai dari atas hingga ke bawah.

Gambar 2. 13 Metode Waterfall

Berikut tahapan-tahapan metode waterfall:
1. Requirement Analysis
Pada tahap ini pengembang harus mengetahui seluruh
informasi mengenai kebutuhan software seperti kegunaan software
yang diinginkan oleh pengguna dan batasan software.
Informasi tersebut biasanya diperoleh dari wawancara,
survey, ataupun diskusi. Setelah itu informasi dianalisis sehingga
mendapatkan data-data yang lengkap mengenai kebutuhan
pengguna akan software yang akan dikembangkan.
2. System dan Software Design
Tahap selanjutnya yaitu Desain. Desain dilakukan sebelum
proses coding dimulai. Ini bertujuan untuk memberikan gambaran
lengkap tentang apa yang harus dikerjakan dan bagaimana
tampilan dari sebuah sistem yang diinginkan.

22
 Sehingga membantu menspesifikan kebutuhan hardware
dan sistem, juga mendefinisikan arsitektur sistem yang akan dibuat
secara keseluruhan.
3. Implementation dan Unit Testing
Proses penulisan code ada di tahap ini. Pembuatan software
akan dipecah menjadi modul-modul kecil yang nantinya akan
digabungkan dalam tahap selanjutnya.
Dalam tahap ini juga akan dilakukan pemeriksaan lebih
dalam terhadap modul yang sudah dibuat, apakah sudah memenuhi
fungsi yang diinginkan atau belum.
4. Integration dan System Testing
Pada tahap keempat ini akan dilakukan penggabungan
modul-modul yang sudah dibuat sebelumnya. Setelah itu akan
dilakukan pengujian yang bertujuan untuk mengetahui apakah
software sudah sesuai desain yang diinginkan dan apakah masih
ada kesalahan atau tidak.
5. Operation dan Maintenance
Operation dan Maintenance adalah tahapan terakhir dari
metode pengembangan waterfall. Di sini software yang sudah jadi
akan dijalankan atau dioperasikan oleh penggunanya.

2.4.2 RAD

Rapid Appliction Development atau RAD adalah salah satu metode

pengembangan aplikasi yang kerap dipakai saat ini. Metode ini
menekankan pada proses pembuatan aplikasi berdasarkan pembuatan
prototype, iterasi, dan feedback yang berulang-ulang. Dengan begitu,
aplikasi yang dibuat bisa dikembangkan dan diperbaiki dengan cepat.
Sangat cocok dengan kebutuhan dan perkembangan dunia digital yang
super cepat.

23
 Gambar 2. 14 Metode RAD
Metode ini memiliki 4 tahap yaitu:
1. Menentukan kebutuhan proyek
RAD dimulai dengan menentukan kebutuhan sebuah proyek
(project requirements). Pada tahap ini, tim perlu menentukan
kebutuhan yang ingin dipenuhi dari sebuah proyek. Kebutuhan ini
tidak perlu spesifik. Tapi, sifatnya benar-benar umum dan
jumlahnya bisa banyak. Baru dari situ, tim akan menentukan mana
kebutuhan yang perlu diprioritaskan. Setelah mendapatkan
kebutuhan yang jelas, barulah tim menentukan hal-hal yang lebih
detail. Misalkan seperti tujuan, timeline, dan budget yang
diperlukan.
2. Membuat prototype
Hal yang selanjutnya dilakukan adalah membuat prototype.
Developer secepat mungkin akan membuat prototype dari aplikasi
yang diinginkan. Lengkap dengan fitur dan fungsi yang berbeda-
beda. Tujuannya, sekadar untuk mengecek apakah prototype yang
dibuat sudah sesuai dengan kebutuhan klien. Meski begitu, tahap
ini bisa saja dilakukan berulang-ulang.
Kadang juga melibatkan user untuk testing dan
memberikan feedback. Proses ini memungkinkan tim mempelajari
error yang mungkin muncul ke depannya. Ini berguna untuk
mengurangi error dan debugging. Lewat tahapan ini, tim developer

24
 memiliki modal untuk membuat aplikasi yang mudah dipakai,
stabil, tidak sering error, dan desainnya pun oke.
3. Rapid construction dan pengumpulan feedback
Setelah tahu aplikasi seperti apa yang ingin dibuat,
developer mengubah prototype ke bentuk aplikasi versi beta
sampai dengan final. Jadi, bisa dibilang tahap RAD inilah yang
cukup intens. Developer terus-menerus melakukan coding aplikasi,
melakukan testing sistem, dan integrasi dengan bagian-bagian
lainnya. Karena itulah, developer menggunakan tools dan
framework yang mendukung RAD agar cepat.
Apalagi proses ini terus diulang sambil terus
mempertimbangkan feedback dari klien. Baik itu soal fitur, fungsi,
interface, sampai keseluruhan aspek dari produk yang dibuat. Nah,
kalau prosesnya berjalan lancar, developer akan melanjutkan ke
langkah berikutnya. Yaitu, finalisasi produk atau implementasi.
Kalau pun tidak, proses ini kemungkinan akan terus diulang. Pun,
kalau apesnya aplikasi tidak menjawab kebutuhan, developer akan
kembali ke proses prototyping.
4. Implementasi atau penyelesaian produk
Di sini, tugas utama developer adalah menambal
kekurangan yang mungkin terjadi ketika proses pengembangan
aplikasi. Tugas ini termasuk melakukan optimasi untuk stabilitas
aplikasinya, memperbaiki interface, hingga melakukan
maintenance dan menyusun dokumentasi.

2.4.3 Spiral

Metode in mengadaptasi dua model perangkat lunak yang ada yaitu

model prototyping dengan pengulangannya dan model waterfall dengan
pengendalian dan sistematikanya. Model ini dikenal dengan sebutan Spiral
Boehm. Pengembang dalam model ini memadupadankan beberapa model
umum tersebut untuk menghasilkan produk khusus atau untuk menjawab
persoalan-persoalan tertentu selama proses pengerjaan proyek.

25
 Gambar 2. 15 Metode Spiral
Tahap-tahap model ini apat di jelaskan secara ringkas sebagai berikut :
1. Tahap Liason
Membangun komunikasi yang efektif antara developer dengan user
atau customer terutama mengenai kebutuhan dari customer.
2. Tahap Planning
Menentukan sumberdaya, perkiraan waktu pengerjaan, dan
informasi lainnya yang dibutuhkan untuk pengembangan software
3. Tahap Analisis Resiko
Mendefinisikan resiko,menentukan apa saja yang menjadi resiko
baik teknis maupun manajemen.
4. Tahap Rekayasa (engineering)
Membangun 1 atau lebihrepresentasi dari aplikasi secara teknikal
5. Tahap Konstruksi dan Pelepasan (release)
Develop software, testng, instalasi dan penyediaanuser / costumer
support seperti training penggunaan software serta dokumentasi
seperti buku manual penggunaan software
6. Tahap Evaluasi
Pelanggan/pemakai/penguna biasanya memberikan masukan
berdasarkan hasil yang didapat dari tahap engineering dan instalasi.

26
2.4.4 Scrum

Scrum adalah garis besar kerja, yang mana termasuk di dalamnya

ialah proses, metode, dan teknik, yang bertujuan untuk mengembangkan
sebuah produk. Dapat dikatakan pula bahwa scrumadalah kunci
terciptanya sebuah produk dengan perkembangan nilai setinggi mungkin,
yang dibuat dengan penuh kreativitas dan produktivitas.
Scrum adalah kerangka kerja yang dapat diaplikasikan dalam
pengembangan produk perangkat lunak, perangkat keras, aplikasi,
kendaraan tanpa pilot, layanan-layanan, operasional organisasi, dan hal-hal
lain yang biasa kita temui sehari-hari.
Bahkan dengan scrum kita dapat mengetahui seberapa efektif
manajemen produk dan hasil perkembangan produk tersebut secara real,
sehingga kita dapat mengambil langkah untuk melakukan meningkatkan
nilai dan kualitas produk.

Gambar 2. 16 Metode Scrum

Berikut tahapan-tahapan yang perlu dilakukan:
1. Menentukan tim
Dalam mengerjakan suatu project, tentu kamu membutuhkan
tim. Tahapan awal dalam memulai menerapkan metode Scrum
adalah dengan menentukan anggota tim. Biasanya, anggota tim tak
lebih dari 5-10 orang. Usahakan jumlah anggota seefektif dan
seefisien mungkin.
2. Menentukan waktu pengerjaan

27
 Selanjutnya, dalam project management ada yang dikenal
dengan sprint. Sprint sendiri serangkaian pekerjaan yang dilakukan
untuk menyelesaikan suatu masalah khususnya penciptaan produk
baru. Setelah menemukan tim, langkah menjalankan metode Scrum
selanjutnya adalah menentukan waktu pengerjaan atau sprint.
Biasanya, sprint berlangsung 7 hingga 30 hari.
3. Menentukan peran dalam tim
Agar dapat bekerja maksimal,suatu tim haruslah memiliki
struktur dan perannya masing-masing agar tidak tumpang tindih.
Dalam project management, biasanya terdapat peran penting yang
dimiliki oleh anggota tim. Peran ini adalah Scrum master, atau
menurut Solstice bisa juga disebut sebagai project manager.
Seorang Scrum master memastikan proyek berjalan dengan
lancar dan sesuai. Peran selanjutnya dalam menjalankan metode
Scrum adalah product owner, ia bertanggung jawab memastikan
produk yang dihasilkan sesuai dengan kualitas yang diinginkan.
4. Mengumpulkan berbagai permasalahan
Langkah berikutnya adalah mengumpulkan berbagai hal yang
didapat di lapangan. Dalam project management, hal ini disebut
sebagai backlog. Berbagai permasalahan atau backlog ini
kemudian dikumpulkan dan dibuat prioritas pengerjaannya.
5. Memulai sprint
Setelah semua langkah dijalankan, maka kamu bisa
langsung memulai sprint tersebut. Dalam melaksanakan sprint,
bisa saja ditemukan permasalahan atau backlog lain.
Komunikasikan hal ini dengan product owner apakah backlog
tersebut bisa dilaksanakan dalam sprint tersebut atau sprint
selanjutnya.

28
2.4.5 Agile

Metode Agile merupakan salah satu jenis metode dalam

pengembangan perangkat lunak. Biasanya sering disebut dengan SDLC
(Software Development Life Cycle). Metode ini sering digunakan oleh
startup maupun perusahaan besar dalam proses pengembangan software.
Agile Software Development adalah metodologi pengembangan
software yang didasarkan pada proses pengerjaan yang dilakukan berulang
dimana, aturan dan solusi yang disepakati dilakukan dengan kolaborasi
antar tiap tim secara terorganisir dan terstruktur.
Agile development sendiri merupakan model pengembangan
perangkat lunak dalam jangka pendek. Kemudian, membutuhkan adaptasi
yang cepat dalam mengatasi setiap perubahan. Nilai terpenting dari Agile
development ini adalah memungkinkan sebuah tim dalam mengambil
keputusan dengan cepat, kualitas dan prediksi yang baik,serta memiliki
potensi yang baik dalam menangani setiap perubahan.
Proses pengembangan Agile mengacu pada konsep dari Agile
Manifesto. Konsep tersebut dikembangkan oleh 14 tokoh terkenal dalam
industri software. Setelah mengenal apa itu Agile, selanjutnya masuk pada
pembahasan mengenai tujuan dari Agile development sendiri.
Pengembangan perangkat lunak Agile memiliki beberapa tahapan dalam
mengembangkan suatu proyek/perangkat lunak.

Gambar 2. 17 Metode Agile

29
 Tahapan-tahapan tersebt adalah sebagai berikut:
1. Perencanaan
Pada langkah ini pengembang dan klien membuat rencana tentang
kebutuhan dari perangkat lunak yang akan dibuat.
2. Implementasi
Bagian dari proses dimana programmer melakukan pengkodean
perangkat lunak.
3. Tes perangkat lunak
Disini perangkat lunakyang telah dibuat di tes oleh bagian kontrol
kualitas agar bug yang ditemukan bisa segera diperbaiki dan
kualitas perangkat lunak terjaga.
4. Dokumentasi
Setelah dilakukan tes erangkat lunak langkah selanjutnya yaitu
proses dokumentasi perangkat lunak untuk mempermudah proses
maintenanance kedepannya.
5. Deployment
Proses yang dilakukan oleh penjamin kualitas untuk menguji
kualitas sistem. Setelah sistem memenuhi syarat maka perangkat
lunak siap di deployment.
6. Pemeliharaan
Langkah terakhir yaitu pemeliharaan. Tidak ada perangkat lunak
yang 100% bebas dari bug, oleh karena itu sangatlah penting agar
perangkat lunak dipelihara secara berkala.

2.4.6 Prototype

Prototpe merupakan sebuah metode pengembangan software yang

cukup banyak digunakan.Dengan metode ini, pengembang dan pelanggan
bisa saling berinteraksi selama proses pengembangan software. Hal ini
tentu sangat menguntungkan dan semakin memudahkan dalam pembuatan
perangkat lunak.
Metode Prototype adalah teknik pengembangan sistem yang
menggunakan prototype untuk menggambarkan sistem sehingga klien atau

30
pemilik sistem mempunyai gambaran jelas pada sistem yang akan
dibangun oleh tim pengembang.
Prototype dalam bahasa Indonesia disebut purwarupa (rupa awal).
Prototype adalah rupa awal dari sistem yang menggambarkan rupa akhir
dari sebuah sistem.

Gambar 2. 18 Metode Prototype

Metode prototype setidaknya mempunyai 6 tahapan sebagai berikut:
1. Analisis kebutuhan
Tahapan metode prototype dimulai dari analisis kebutuhan.
Dalam tahap ini kebutuhan sistem didefinisikan dengan rinci.
Dalam prosesnya, klien dan tim developer akan bertemu untuk
mendiskusikan detail sistem seperti apa yang diinginkan oleh user.
2. Desain cepat
Tahap kedua adalah pembuatan desain sederhana yang akan
memberi gambaran singkat tentang sistem yang ingin dibuat.
Tentunya berdasarkan diskusi dari langkah 1 diawal.
3. Bangun prototipe

31
 Setelah desain cepat disetujui selanjutnya adalah
pembangunan prototipe sebenarnya yang akan dijadikan rujukan
tim programmer untuk pembuatan program atau aplikasi.
4. Evaluasi pengguna awal
Di tahap ini, sistem yang telah dibuat dalam bentuk
prototipe di presentasikan pada klien untuk di evaluasi. Selanjutnya
klien akan memberikan komentar dan saran terhadap apa yang
telah dibuat.
5. Memperbaiki prototipe
Jika klien tidak mempunyai catatan revisi dari prototipe
yang dibuat, maka tim bisa lanjut pada tahapan 6, namun jika klien
mempunyai catatan untuk perbaikan sistem, maka fase 4-5 akan
terus berulang sampai klien setuju dengan sistem yang akan
dikembangkan.
6. Implementasi dan pemeliharaan
Pada fase akhir ini, produk akan segera dibuat oleh para
programmer berdasarkan prototipe akhir, selanjutnya sistem akan
diuji dan diserahkan pada klien. Selanjutnya adalah fase
pemeliharaan agar sistem berjalan lancar tanpa kendala.

2.5 Tools PengembanganPerangkat Lunak

2.5.1 Bahasa Pemrogramn

Bahasa pemrograman adalah bahasa yang digunakan oleh

programmer untuk memberikan instruksi kepada komputer. Itulah kenapa
bahasa pemrograman tersusun dari sintaks yang merupakan perintah
komputer untuk menjalankan suatu program.
1. HTML
HTML (Hypertext Markup Language) adalah bahasa
markup yang digunakan untuk membuat halaman website. Isinya
terdiri dari berbagai kode yang dapat menyusun struktur suatu
website.

32
 HTML terdiri dari kombinasi teks dan simbol yang
disimpan dalam sebuah file. Dalam membuat file HTML, terdapat
standar atau format khusus yang harus diikuti. Format tersebut
telah tertuang dalam standar kode internasional atau ASCII
(American Standard Code for Information Interchange).
Dengan adanya HTML, pengguna dapat membuat atau
menyusun heading, paragraf, gambar, link, dan lainnya supaya
dapat dilihat banyak orang melalui halaman website. Untuk bisa
diakses secara umum, pengguna perlu membukanya lewat aplikasi
browser, seperti Internet Explorer, Chrome, atau Mozilla Firefox.
2. CSS
CSS adalah singkatan dari Cascading Style Sheets, yaitu
bahasa yang digunakan untuk menentukan tampilan dan format
halaman website. Dengan CSS, Anda bisa mengatur jenis font,
warna tulisan, dan latar belakang halaman.
CSS digunakan bersama dengan bahasa markup, seperti
HTML dan XML untuk membangun sebuah website yang menarik
dan memiliki fungsi yang berjalan baik. CSS juga berguna untuk
mengatasi keterbatasan HTML dalam mengatur format halaman
website.
3. Bootstrap
Bootstrap adalah framework web development berbasis
HTML, CSS, dan JavaScript yang dirancang untuk mempercepat
proses pengembangan web responsive dan mobile-first
(memprioritaskan perangkat seluler).
Selain bisa digunakan untuk mengembangkan website
dengan lebih cepat, Bootstrap adalah framework gratis yang
bersifat open-source. Script dan syntax yang disediakan Bootstrap
bisa diterapkan untuk berbagai komponen dalam desain web.
4. JavaScript
JavaScript adalah bahasa pemrograman populer yang
digunakan untuk membuat situs dengan konten website yang

33
 dinamis. Konten dinamis artinya konten dapat bergerak atau
berubah di depan layar tanpa perlu mereload halaman. Misalnya
saja, fitur slideshow foto, gambar animasi, pengisian poling, dan
lainnya.
5. PHP (Hypertext Preprocessor)
PHP adalah sebuah bahasa pemrograman server side
scripting yang bersifat open source.Sebagai sebuah scripting
language, PHP menjalankan instruksi pemrograman saat proses
runtime. Hasil dari instruksi tentu akan berbeda tergantung data
yang diproses. PHP merupakan bahasa pemrograman server-side,
maka script dari PHP nantinya akan diproses di server. Jenis
server yang sering digunakan bersama dengan PHP antara lain
Apache, Nginx, dan LiteSpeed.
6. Laravel
Laravel adalah framework berbasis bahasa pemrograman
PHP yang bisa digunakan untuk membantu proses pengembangan
sebuah website agar lebih maksimal. Dengan menggunakan
Laravel, website yang dihasilkan akan lebih dinamis.
Framework Laravel menggunakan struktur MVC (Model
View Controller). MVC merupakan model aplikasi yang
memisahkan antara data dan tampilan berdasarkan komponen
aplikasi. Dengan adanya model MVC, pengguna Laravel menjadi
lebih mudah dalam mempelajari Laravel. Serta menjadikan proses
pembuatan aplikasi berbasis website menjadi lebih cepat.
7. SQL
SQL atau Standard Query Language adalah bahasa
pemrograman yang digunakan untuk mengakses, mengubah, dan
memanipulasi data yang berbasis relasional pada sebuah sistem
database.

34
2.5.2 Platform

Dalam imu komputer, platform merupakan kombinasi antara

sebuah arsitektur perangkat keras dengan sebuah kerangka kerja perangkat
lunak (termasuk kerangka kerja aplikasi). Kombinasi tersebut
memungkinkan sebuah perangkat lunak, khusus perangkat lunak aplikasi,
dapat berjalan. Platform yang umum sudah menyertakan artsitektur, sistem
informasi, bahasa pemrograman dan antarmuka yang terkait (pustaka
sistem runtime atau antarmuka pengguna grafis) untuk komputer.
Platform adalah unsur yang penting dalam pengembangan
perangkat lunak. Platform mungkin dapat didefinisikan secara sederhana
sebagai tempat untuk menjalankan perangkat lunak. Penyelenggara
platform menyediakan pengembang perangkat lunak dengan kesepakatan
serangkaian kode logika yang akan berjalan secara konsisten sepanjang
platform ini berjalan diatas platform yang lainnya. Kode logika ini
mencakup bytecode, source code, dan kode mesin.
Platform terbagi menjadi beberapa macam jenis berikut jenis-jenis nya:
1. Technology Platform (Teknologi)
Blok bangunan atau layanan yang disediakan oleh
teknologi atau technology platform digunakan kembali dalam
berbagai macam barang. Pengembang pihak ketiga sering
memasukkan bagian bangunan dan layanan ini ke dalam produk
mereka, yang mendorong adopsi platform. Contoh platform
teknologi termasuk Amazon Web Services, Microsoft Azure, dan
Twilio.
2. Computing Platform (Komputasi)
Berbeda dengan teknologi platform, komputasi atau
computing platform memfasilitasi interaksi antara pengguna
platform dan pengembang pihak ketiga. Pengembang “memiliki”
pengguna dalam platform teknologi, sedangkan platform “memiliki”
pengguna dalam platform komputasi.
Apple iOS, Google Android, dan Microsoft Windows
adalah contoh platform komputasi yang memungkinkan

35
 pengembang untuk memperluas platform dengan kasus
penggunaan baru dan membuatnya lebih bermanfaat bagi
konsumen.
Contoh lain adalah komuter Dell yang menjalankan
Windows 10, yang dianggap beroperasi pada platform Windows.
3. Utility Platform (Utilitas)
Utilitas atau utility latform seringkali menarik konsumen
dengan memberikan layanan yang berharga dan, dalam banyak
kasus, gratis.
Dengan begitu banyak pngguna, platform ini tersedia untuk
jenis pemain kedua, dalam kasus Google Penelusuran, periklanan.
Contoh platform utilitas termasuk Google Search, Bing, dan Yahoo.
4. Interaction Networks (Jaringan Sosial)
Jaringan sosial atau iteraction networks. Jenis platform ini
memfasilitasi interaksi antara peserta tertentu (individu atau bisnis).
Pesan, percakapan telepon, gambar, dan transfer uang adalah
contoh interaksi digital. Jaringan interaksi termasuk Facebook,
WhatsApp, WeChat, dan Bitcoin.
5. Marketplaces (Pasar)
Pasar atau marketplace memfasilitasi transaksi antara
pemain sisi permintaan, disebut sebagai “pembeli,” dan peserta sisi
penawaran, disebut sebagai “penjual.” Harga untuk produk dan
layanan yang dipasok di platform biasanya ditetapkan oleh anggota
di sisi penawaran.
Contoh platform dua sii yang menghubungkan penawaran
dan permintaan termasuk eBay, Amazon Marketplace, dan
Facebook Marketplace.
6. On-Demand Platform (Layanan Berdasarkan Permintaan)
Jenis layanan berdasaran permintaan atau on-demand
service platform dirancang untuk memberikan layanan ujung ke
ujung melalui jaringan penyedia layanan independen atau
kontraktor.

36
 Ini terbilang sangat berbeda dengan marketplace. Di bawah
satu atap, platform layanan sesuai permintaan menyatukan
penemuan, pemesanan, pembayaran, pengiriman, sertifikasi, dan
konfirmasi layanan.
Platform menentukan haga, standar kualitas, dan prosedur
kepatuhan. Contoh platform layanan berdasarkan permintaan
antara lain Gojek, Grab, dan Maxim.
7. Konten atau Content Crowdsourcing Platform
Jenis konten atau contnt crowdsourcing platform ini adalah
tentang mengumpulkan materi dari subset pengguna, seperti video,
entri blog, ulasan, peringkat, dan sebagainya, dan kemudian
membagikan konten itu dengan seluruh basis pengguna platform.
Berbeda dengan jaringa interaksi, di mana keterlibatan
dimulai oleh satu akun, pengguna berinteraksi dengan platform,
dan interaksi berakar pada konten. Contoh platform content
crowdsourcing termasuk YouTube, Yelp, dan TripAdvisor.
8. Data Mining atau Harvest Platform (Pengambilan Data)
Pengambilan atau data ining (harvest) platform
menyediakan layanan yang menguntungkan pengguna dan
membuat data melalui penggunaan layanan platform. Pada
kenyataannya, bergabung dengan platform membutuhkan
komitmen untuk mengirimkan data.
Data yang dikumpulkan ari semua pengguna platform
didorong kembali ke layanan untuk membuatnya lebih bermanfaat
bagi pengguna. Contoh platform pengumpulan data termasuk Waze
dan OpenSignal.
9. Content Distribution Platform (Distribusi Konten)
Distribusi konten ataucontent distribution platform
menghubungkan pemilik konten yang ingin menawarkan konten
(atau iklan) kepada konsumen melalui platform distribusi konten.
Contoh platform distribusi konten termasuk Google AdSense,
Outbrain, dan MGID.

37
 10. Browser Platform
Platform browser merupkan sebuah pihak ketiga yang
dijalankan sebagai bagian dari peramban. Sehingga, beberapa
browser sekarang disebut sebagai platform karena mereka
digunakan sebagai basis untuk menjalankan program perangkat
lunak aplikasi lain.
11. Mobile Platform
Mobile Platform pada dsarnya adalah platform yang
memungkinkan perangkat lunak dan layanan dijalankan pada
perangkat. Contoh platform seluler termasuk Palm, BlackBerry,
iPhone, Android dan Windows Mobile. Sistem operasi seluler
menyediakan alat yang memungkinkan aplikasi berbagi data dan
layanan.
12. Digital Platform
Beberapa aplikasi dan umpukan perangkat lunak (software)
terkadang disebut sebagai platform digital. SQL, misalnya, adalah
program basis data (database) yang sering digunakan sebagai
lingkungan untuk menjalankan aplikasi CRM, analitik, dan
manajemen log lainnya.

2.5.3 Database

Database atau yang dikenal juga dengan istilah basis data adalah
sekumpulan data yang dikelola dengan sedemikian rupa berdasarkan
ketentuan tertentu yang saling berkaitan sehingga memudahkan dalam
pengelolaannya.
Lewat pengelolaan itulah pengguna bisa mendapatkan kemudahan
dalam mencari sebuah informasi, membuang informasi, maupun
menyimpan informasi.
Selain pengertian database diatas, terdapat pengertian lain dari
database yaitu sebuah sistem yang berguna untuk mengumpulkan file,
arsip, atau tabel yang disimpan dan terhubung dalam berbagai media
elektronik yang ada.

38
 Perangkat lunak khusus membutuhkan tempat untuk mengambil
dan menyimpan data serta informasi dari basis data. Hal itu sering disebut
sebagai data management system (DBMS) atau sistem manajemen basis
data. Database memiliki beberapa jenis dan fungsi yang beraneka macam.
Selama ini database mempunyai 5 jenis database yang beroperasi pada
perangkat.
Dari kelima jenis database tersebutlah, terdapat beberapa macam
produk yang mempunyai fungsi berbeda-beda. Berikut jenis-jenis database
beserta fungsinya.
1. Operational Database
Operational Database atau biasa dikenal dengan nama
database On Line Transaction Processing memiliki fungsi sebagai
suatu tempat untuk mengelola data dinamis secara langsung dan
real-time. Jenis ini memungkinkan para penggunanya untuk bisa
melihat, melakukan, dan memodifikasi data. Modifikasi data yang
dimaksud yakni dengan cara menambah atau mengubah, ataupun
menghapus data secara langsung lewat suatu perangkat keras yang
dipakai.
a. JSON
JSON atau JavaScript Object Notation merupakan
format file yang memakai teks guna melakukan pengiriman
data. Format tersebut biasa dipakai oleh pengguna untuk
melakukan pertukaran data layaknya berinteraksi cepat
melalui web browser maupun web server.
Sinkronisasi data dapat dikerjakannya secara real-time.
Format JSON sendiri berasal dari pemrograman JavaScript.
Melalui pembuatan tersebut JSON mempunyai sebuah format
bahasa yang berbeda dengan lainnya. Perlu diketahui bahwa
semua file JSON selalu memakai ekstensi khusus berupa
“.json”.

39
 b. XML
XML atau Extensible Markup Language merupakan
sebuah bahasa pada program markup yang mempunyai aturan
guna memberikan dua kode dokumen yang berbeda agar dapat
dibaca oleh manusia dan komputer.
Lewat XML tersebutlah, sistem ini akan menghasilkan
sebuah format data yakni teks yang bisa dipakai untuk
merepresentasikan sebuah struktur pada basis data. Selain itu,
sinkronisasi data pada sistem ini bisa dilakukan secara real-
time bagi para penggunanya.
Bahasa program ini sangat cocok dipakai untuk
menangani basis data pada web browser maupun web server.
Struktur yang digunakan XML dinilai banyak mempunyai
kesamaan dengan format JSON.
2. Database Warehouse
Database Warehouse merupakan sistem basis data yang
biasa dipakai untuk melakukan pelaporan dan analisis data. Sistem
ini juga dianggap sebagai komponen inti dari business intelligence.
Database Warehouse yaitu repository sentral data yang
terpadu yang berasal dari satu hingga lebih dari satu sumber yang
berbeda. Database tersebut juga mempunyai suatu tempat untuk
menyimpan data terkini. Serta sejarah satu tempat yang telah
dipakai untuk membuat sebuah laporan analisis.
Data yang tersimpan di warehouse mulanya diunggah dari
sistem operasi. Data tersebut dapat melalui penyimpanan
operasional yang memungkinkannya kamu untuk melakukan
pembersihan data. Proses tersebut digunakan sebagai operasi
tambahan guna memastikan kualitas data sebelum dipakai di
warehouse sebagai pelaporannya.
a. Microsoft SQL Server
Microsoft SQL Server adalah sistem basis data yang
dibentuk oleh Microsoft. Sebagai server database, sistem ini

40
 juga merupakan suatu produk dari perangkat lunak yang
memiliki tujuan untuk mengambil, dan menyimpan sebuah
data sesuai dengan permintaan pada aplikasi lainnya.
Hal itu memungkinkan dapat berjalan baik melalui
sebuah komputer yang sama ataupun komputer lainnya lewat
jaringan internet. Setidaknya Microsoft telah memasarkannya
sebanyak 12 edisi berbeda pada sistem Microsoft SQL Server
tersebut. Hal itu ditujukan guna memberikan pilihan bagi
pengguna. Serta untuk memenuhi kebutuhan yang berbeda
pula.
3. Distributed Database
Distributed Database merupakan suatu basis data dengan
perangkat penyimpanannya yang tidak terpasang pada sebuah
perangkat komputer maupun sejenisnya yang serupa.
Basis data ini disimpan di sejumlah perangkat komputer
yang terletak di tempat yang sama atau tersebar lewat jaringan
komputer lainnya yang saling berkaitan. Sistem ini berbeda dengan
sistem paralel yang terhubung erat dan bersistem pada data tunggal.
Sistem ini terdistribusi lewat suatu situs yang tergabung dan
tidak mempunyai sebuah komponen fisik.
Melalui administrator, basis data bisa mendistribusikan
sekumpulan data di sejumlah lokasi dengan letaknya yang berada
pada server jaringan terorganisir. Dengan, sistemnya yang cukup
unik, basis data yang terdistribusi tersebut dapat meningkatkan
kinerja bagi pengguna terakhir dan membiarkan transaksinya lewat
proses mesin yang cukup banyak.
a. Microsoft Access (Office)
Microsoft Access merupakan sistem DBMS yang
menyatukan antara Microsoft Jet Database Engine dengan alat
pengembangnya yakni perangkat lunak. Microsoft Access
menyimpan data dengan formatnya sendiri.

41
 Lewat software tersebutlah para pengguna bisa
mengimpor ataupun menghubungkan secara langsung ke data
yang telah tersimpan pada database lainnya. Microsoft Access
sangat cocok dipakai untuk sistem informasi dengan
distributed database. Sebab penyimpanan file tidak
membutuhkan server database aktif sehingga memiliki sifat
portable.
4. Relational Database
Relational Database atau basis data relasional merupakan
basis data yang mengorganisir berdasarkan pada model hubungan
data. Banyak sekali perangkat lunak yang memakai sistem ini
untuk mengatur dan memelihara basis data melalui hubungan
setiap data.
Pada biasanya, semua sistem memakai Structured Query
Language atau SQL sebagai bahasa pemrograman untuk
pemeliharaan basis data dan query.
a. MySQL
MySQL adalah sebuah DBMS (Database Management
System) menggunakan perintah SQL (Structured Query
Language) yang banyak digunakan saat ini dalam pembuatan
aplikasi berbasis website. MySQL dibagi menjadi dua lisensi,
pertama adalah Free Software dimana perangkat lunak dapat
diakses oleh siapa saja. Kedua adalah Shareware dimana
perangkat lunak berpemilik memiliki batasan dalam
penggunaannya.
MySQL termasuk ke dalam RDBMS (Relational
Database Management System). Sehingga, menggunakan
tabel, kolom, baris, di dalam struktur database -nya. Jadi,
dalam proses pengambilan data menggunakan metode
relational database serta menjadi penghubung antara
perangkat lunak dan database server.

42
b. PostgreSQL
PostgreSQL adalah relational database management
system atau RDBMS yang bersifat open source. Sistem
manajemen basis data satu ini menggunakan bahasa query
utama SQL, sama seperti MySQL.
Database PostgreSQL banyak digunakan pada
berbagai aplikasi mobile, web app, hingga aplikasi analytics.
PostgreSQL dapat mengolah data dalam tabel yang
mempunyai hubungan satu sama lain. Umumnya, manajemen
database ini banyak digunakan untuk berbagai aplikasi dengan
kebutuhan pengolahan data yang kompleks.
c. MariaDB
MariaDB merupakan sistem yang dikembangkan dari
MySQL. Pengembangan pada sistem ini bertujuan untuk
mempertahankan kompatibilitas tinggi dari sistem MySQL.
Serta sangat cocok digunakan dengan API MySQL.
MariaDB mempunyai mesin penyimpanan XtraDB
untuk mengganti InnoDB. Sistem ini dikembangkan secara
langsung oleh beberapa pengembang asli MySQL dengan
pihak cabang lainnya. Dengan tujuan agar tidak diakuisisi
oleh Oracle Corporation yang merupakan salah satu
kompetitornya.
d. MonggoDB
MongoDB merupakan sebuah software database yang
berorientasi pada dokumen open source, dan cross platform.
MongoDB memakai dokumen yang serupa dengan skema
JSON, oleh sebab itu sistemnya diklasifikasikan ke dalam
program basis data NoSQL.
e. Oracle Database
Oracle Database merupakan sistem relations database
selanjutnya yang diproduksi dan dipasarkan oleh perusahaan
bernama Oracle. Dalam pemakaiannya tersebut, sistem Oracle

43
 berfokus pada struktur memori server side sebagai sistem area
globalnya.
Sistem area global bisa menyimpan cache, informasi
pengguna, dan perintah SQL. Selain itu, sistem ini juga dapat
memungkinkan untuk menyimpan suatu riwayat transaksional
diantaranya yaitu redo log online.
5. End User Database
End-User Database adalah jenis database yang dibuat dan
diatur oleh pengguna akhir menggunakan perangkat atau
workstation sendiri. Jenis berkas data buatan sendiri dibuat dengan
prosedur tertentu. Berkas data lalu dikelola secara mandiri melalui
metode yang Anda gunakan. Basis data ini berlaku untuk dokumen
yang bersifat offline dan tersimpan di perangkat pribadi. Contoh
dari End-User Database adalah spreadsheet, word processing, dan
download file.

2.5.4 IDE

Integrated Dvelopment Environment (IDE) adalah software di

dalam lingkungan pengembangan (Development Environment) yang
berfungsi untuk memfasilitasi berbagai tool pemrograman dalam satu
aplikasi. IDE membantu developer mengembangkan software dengan
lebih mudah.
Sementara itu, Development Environment (DE) adalah ruang kerja
bagi para developer untuk menciptakan atau membuat perubahan pada
aplikasi tanpa memengaruhi produk yang sudah jadi. Perubahan ini bisa
mencakup maintenance, debugging, dan patching.
Beberapa contoh Integrted Development Environment adalah:
1. NetBeans
2. Microsoft Visual Studio
3. Adobe Flex Builder
4. Eclipse

44
Selain itu, IDE memilii sejumlah fitur yang bisa membantu meningkatkan
produktivitas kerja, seperti:
1. Code Editor
Biasanya digunakan untk menulis dan mengedit source code.
Beberapa IDE juga terintegrasi dengan editor teks seperti editor
HTML yang bisa menganalisis kata kunci dan error syntax.
2. Code Completion
Dikenal sebagai code pompt, fitur ini berfungsi untuk menganalisis
seluruh kode guna mengidentifikasi dan menyisipkan komponen
kode yang kurang atau hilang. Pekerjaan bisa selesai lebih cepat,
dan bug atau error juga bisa diminimalkan.
3. Compiler
Menerjemahkan plain tet (teks biasa) menjadi bahasa
pemrograman seperti JavaScript dan Python agar bisa diproses oleh
komputer.
4. Debugger
Membantu developer menmukan dan memperbaiki error kode
dalam aplikasi atau website selama fase pengujian. Misalnya,
debugging website WordPress akan memastikan fungsi dan
performanya sudah cukup bagus sebelum dionlinekan dan bisa
diakses oleh pengunjung.
5. Tool Build Automation
Berfungsi untuk mengotmatiskan proses pembuatan dan
pengembangan software, seperti proses compile kode sumber
menjadi machine code, membuat package binary code, dan
menjalankan uji otomatis.
6. Dukungan Bahasa Pemrograman
Sebagian besar IDE ditjukan bagi bahasa pemrograman khusus.
Xcode, contohnya, digunakan untuk mengembangkan macOS
dengan bahasa Objective-C dan Swift. Namun, beberapa IDE juga
menawarkan banyak bahasa seperti Eclipse dan Komodo IDE.
7. Version Control

45
 Developer bisa menggunkan fitur ini untuk melacak perubahan
yang sudah dibuat. Version control juga membantu Integrated
Development Environment terhubung dengan repositori sumber
yang digunakan developer.
Beberapa jenis IDE jug menawarkan beragam fitur untuk membuat
aplikasi yang berkualitas dalam cara yang lebih efisien. Beberapa jenis
Integrated Development Environment yang ada saat ini adalah:
1. Multilanguage
Mendukung banyak program bahasa yang bisa membantu
pemula meningkatkan skill. Misalnya, Visual Studio adalah salah
satu contoh Integrated Development Environment multilanguage
terpopuler yang menawarkan fitur-fitur canggih serta setup
ekstensi dan upgrade yang mudah.
2. Mobile Development
Secara khusus dibangun untuk mobile development, seperti
AppCode dan Android Studio. Beberapa Integrated Development
Environment, terutama IDE multilanguage, mendukung plugin
mobile development seperti Real-Time Chat dan File Manager.
3. Language Specific
Dirancang untuk developer software yang bekerja
menggunakan satu bahasa. Contohnya, Jikes dan Jcreator dibuat
untuk Java, dan Idle untuk Python.

46
4. Cloud Based
Menyediakan fitur built-in untuk pair programming real-
time dengan feedback langsung yang memungkinkan developer
membuat software hanya menggunakan browser sehingga mereka
bisa mengakses kode secara remote (jarak jauh).
5. HTML
Digunakan untuk mengembangkan aplikasi HTML seperti
Notepad++, Atom, dan Adobe DreamWeaver CC. Tool ini
mengotomatiskan banyak tugas dalam web development.

47
 BAB III

METODOLOGI PENELITIAN

3.1 Metode Pengembangan Waterfall

1. Analisis Kebutuhan
Pada tahap analisi ini, berfungsi untuk merencanakan rancangan
pembuatan software atau aplikasi. Dimulai dari perencanaan persiapan
database, estimasi waktu pengerjaan, kebutuhan, dan lain – lain. Pada
tahap ini seorang project manager harus memikirkan matang – matang
rencana pengerjaan project. Sehingga untuk kedepannya dilakukan dengan
baik. Dan komunikasi berjalan dengan lancar dari developer dengan user.
2. Desain
Selanjutnya, setelah melakukan perencanaan dengan baik. Tahap
berikutnya adalah proses desain aplikasi. Tahap ini, pengembang akan
merencanakan seluruh sistem dan merencanakan alur algoritma dengan
baik dan maksimal.
a. Struktur Database

Gambar 3. 1 Struktur Database

48
b. ERD

Gambar 3. 2 ERD
c. DFD

Gambar 3. 3 DFD Konteks

49
d. Mockup
1. Halaman Login

Gambar 3. 4 Mockup Halaman Login

2. Halaman Forgot Password

Gambar 3. 5 Mockup Halaman Forgot Password

50
3. Halaman Email Link Reset Password

Gambar 3. 6 Mockup Halaman Email Link Reset Passod

4. Halaman Reset Password

Gambar 3. 7 Mockup Halaman Reset Password

51
5. Halaman Dashboard Admin

Gambar 3. 8 Mockup Halaman Dashboard Admin

6. Halaman Dashboard Field Support

Gambar 3. 9 Mockup Halaman Dashboard Field Support

52
7. Halaman Tabel User

Gambar 3. 10 Mockup Halaman Tabel User

53
8. Halaman Create User

Gambar 3. 11 Mockup Halaman Create User

9. Halaman Edit User

Gambar 3. 12 Mockup Halaman Edit User

54
10. Halaman Tabel Form

Gambar 3. 13 Mockup HalamanTabel Form

11. Halaman Detail Form

Gambar 3. 14 Mockup Halaman Detail Form

55
12. Halaman Create Form

Gambar 3. 15 Mockup Halaman Create Form

13. Halaman Edit Form

Gambar 3. 16 Mockup Halaman Edit Form

56
14. Halaman Print Form

Gambar 3. 17 Mockup Halaman Print Form

15. Halaman Render Form

Gambar 3. 18 Mockup Halaman Render Form

57
16. Halaman Feedback

Gambar 3. 19 Mockup Halaman Feedback

17. Halaman Tabel Submission

Gambar 3. 20 Mockup Halaman Tabel Submission

58
18. Halaman Detail Submission

Gambar 3. 21 Mockup Halaman Detail Submission

59
19. Halaman Print Submission

Gambar 3. 22 Mockup Halaman Print Submission

20. Halaman Tabel My Submission

Gambar 3. 23 Mockup Halaman Tabel My Submission

60
 21. Halaman Detail My Submission

Gambar 3. 24 Mockup Halaman Detail My Submission

3. Implementasi
Tahap ketiga adalah implementasi program. Setelah berhasil
menentukan desain awal dari pengembangan aplikasi, selanjutnya Dalam
tahap ini masuk pada penulisan kode dengan menggunakan Bahasa
pemrograman tertentu. Semisal pada pembuatan aplikasi Manajemen Form
Reporting Maintenance ini menggunakan Bahasa pemrograman HTML,
CSS, Javascript, PHP, SQL, Apache, dan framework Laravel.
4. Testing
Melakukan pengujian secara komprehensif pada sistem software
untuk memastikan bahwa sistem tersebut sesuai dengan spesifikasi dan
kebutuhan yang telah ditentukan dengan cermat. Ini bertujuan untuk
memastikan bahwa sistem memenuhi standar dan memiliki performa yang
optimal sehingga sesuai dengan harapan pengguna.
5. Maintenance
Apabila saat proses penggunaan aplikasi muncul sebuah
problematika baru, maka user dapat memberikan feedback kepada tim
developer. Dan selanjutnya dapat dilakukan tahap maintance atau
perbaikan. Pada tahap ini, tim developer berusaha menambahkan fitur
untuk mengatasi permasalahan dari user.

61
3.2 Jadwal Pengembangan Aplikasi

Tabel 3. 1 Jadwal Pengembangan Aplikasi

No Kegiatan Sep Okt Nov Des Jan Feb

1 Membuat Struktur Database
2 Membuat ERD
3 Membuat DFD
4 Membuat Desain Mockup
5 Menginstal laravel
6 Membuat CRUD user
7 Membuat form builder
Menambahkan Autentikasi
8
Multi user
9 Responsif
10 Pengujian aplikasi

62
 BAB IV

PEMBAHASAN

4.1 Aplikasi Manajemen Form Reporting Maintenance

Aplikasi Manajemen Form Reporting Maintenance merupakan web

yang dikembangkan untuk memanajemen form laporan maintenance PT
Indonesia Comnets Plus. Aplikasi ini memiliki dua user yaitu admin dan
field support dengan privilage berupa:
1. Admin
a. Melihat data user, form, dan submission
b. Menambahkan user dan form
c. Mengedit data user dan form
d. Menghapus data user, form, dan submission
e. Melihat detail user, form, dan submission
f. Export form dan submission ke dalam bentuk pdf
2. Field Support
a. Mengisi form
b. Mengedit submission yang baru diisi
c. Melihat detail submission sendiri

4.2 Alat dan Bahan

4.2.1 Alat

Tabel 4. 1 Alat/Komponen

No Nama Alat/Komponen/Bahn Spesifikasi Minimal

- Prosesor : Dual Core 2,4 GHz
1 Laptop
- RAM : 2 GB

2 Wifi Penghubung ke internet

- Vsual Studio Code
3 Aplikasi Tools Pemrograman
- CMD

63
 4 Bahasa Pemrograman - Laravel

4.2.2 Bahan

Tabel 4. 2 Bahan
1 Aplikasi Server Basis Data Database Server
2 Aplikasi Pendukung Web Server

4.3 Langkah Pembuatan Aplikasi

1. Membuat projek baru di Terminal (CMD) dengan nama "maintenance-

management"

Gambar 4. 1 Buat Project Baru

64
2. Mengatur layout template voler

Gambar 4. 2 Layout Template Voler

65
3. Menambahkan field role di migration tabel user

Gambar 4. 3 Migration Tabel User

4. Membuat admin controller

Gambar 4. 4 Controller Admin

5. Membuat function crud user pada admin controller

Gambar 4. 5 Function Index User

Gambar 4. 6 Function Create User

66
 Gambar 4. 7 Function Edit User

Gambar 4. 8 Function Delete User

6. Mengatur route crud user

Gambar 4. 9 Route CRUD User

67
7. Membuat view halaman tabel user

Gambar 4. 10 View Halaman Tabel User

68
8. Membuat view halaman create user

Gambar 4. 11 View Halaman Create User

69
9. Membuat view halaman edit user

Gambar 4. 12 View Halaman Edit User

10. Membuat controller untuk autentikasi

Gambar 4. 13 Controller Autentikasi

11. Membuat function login, register, forgot password, reset password dan
logout

Gambar 4. 14 Function Login

70
Gambar 4. 15 Function Logout

Gambar 4. 16 Function Register

71
 Gambar 4. 17 Function Forget Password

Gambar 4. 18 Function Reset Password

12. Membuat route login, register, forgot password, reset password dan logout

Gambar 4. 19 Route Autentikasi

72
13. Membuat view halaman login

Gambar 4. 20 View Halaman Login

73
14. Membuat view halaman register

Gambar 4. 21 View Halaman Register

15. Membuat view forgot password

Gambar 4. 22 View Halaman Forgot Password

74
16. Membuat view email forgot password

Gambar 4. 23 View Email Forgot Password

75
17. Membuat view halaman reset password

Gambar 4. 24 View Halaman Reset Password

76
18. Membuat view dashboard admin dan dashboard field support

Gambar 4. 25 View Dashboard Admin

Gambar 4. 26 View Dashboard Field Support

77
19. Menginstal plugin formbuilder laravel

Gambar 4. 27 Install Plugin Formbuilder Laravel

20. Mempublish view beserta asset pada vendor formbuilder laravel

Gambar 4. 28 Publish View Dan Asset Vendor Formbuilder Laravel

21. Membuat function print form

Gambar 4. 29 Function Print Form

22. Membuat function print submission

Gambar 4. 30 Function Print Submission

23. Membuat route print form dan submission

Gambar 4. 31 Route Print Form dan Submission

24. Membuat view print form

Gambar 4. 32 View Print Form

78
25. Membuat view print submission

Gambar 4. 33 View Print Submission

79
4.4 Hasil Tampilan Aplikasi

1. Login

Gambar 4. 34 Tampilan Halaman Login

2. Register

Gambar 4. 35 Tampilan Halaman Register

3. Forgot Password

Gambar 4. 36 Tampilan Halaman Forgot Password

80
4. Email Reset Password

Gambar 4. 37 Tampilan Email Reset Password

5. Reset Password

Gambar 4. 38 Tampilan Reset Password

81
6. Dashboard Admin

Gambar 4. 39 Tampilan Halaman Dashboard Admin

7. Dashboard Field Support

Gambar 4. 40 Tampilan Halaman Dashboard Field Support

8. Tabel User

Gambar 4. 41 Tampilan Halaman Tabel User

82
9. Create User

Gambar 4. 42 Tampilan Halaman Create User

10. Edit User

Gambar 4. 43 Tampilan Halaman Edit User

11. Tabel Form

Gambar 4. 44 Tampilan Halaman Tabel Form

83
12. Create Form

Gambar 4. 45 Tampilan Halaman Create Form

13. Edit Form

Gambar 4. 46 Tampilan Halaman Edit Form

84
14. Preview Form

Gambar 4. 47 Tampilan Halaman Preview Form

15. Print Form

Gambar 4. 48 Tampilan Halaman Print Form

16. Render Form

Gambar 4. 49 Tampilan Halaman Render Form

85
17. Feedback

Gambar 4. 50 Tampilan Halaman Feedback

18. Tabel Submission

Gambar 4. 51 Tampilan Halaman Tabel Submission

19. View Detail Submission

Gambar 4. 52 Tampilan Halaman Detail Submission

86
20. Print Submission

Gambar 4. 53 Tampilan Halaman Print Submission

21. Tabel My Submission

Gambar 4. 54 Tampilan Halaman Tabel My Submission

22. View Detail My Submission

Gambar 4. 55 Tampilan Halaman Detail My Submission

87
 BAB V

PENUTUP

5.1 Kesimpulan

Setelah melakukan praktik kerja industri selama enam bulan di PT

Indonesia Comnets Plus (ICON+), kami berhasil membuat sebuah aplikasi
manajemen form reporting maintenance yang bertujuan untuk membantu
perusahaan dalam mengelola laporan perawatan yang dilakukan pada
peralatan teknologi informasi.
Dan diharapkan aplikasi manajemen form reporting maintenance ini
dapat membantu PT Indonesia Comnets Plus (ICON+) dalam
mengoptimalkan pengelolaan laporan perawatan peralatan teknologi
informasi secara efisien dan efektif. Selain itu, proses pengembangan
aplikasi ini juga membantu kami dalam memperdalam pengetahuan dan
keterampilan kami dalam bidang pemrograman dan pengembangan aplikasi
web.

5.2 Saran

Berdasarkan laporan praktik kerja industri yang telah kami buat,

ditemukan bahwa aplikasi yang kami buat masih memiliki kekurangan
terutama pada tampilan yang kurang user friendly. Namun, meskipun
demikian, aplikasi ini tetap memiliki potensi untuk meningkatkan efisiensi
dan produktivitas dalam pengelolaan laporan di perusahaan. Saran yang
dapat kami berikan yaitu:
1. Memperbaiki tata letak halaman agar informasi terstruktur dengan
baik dan mudah diakses oleh pengguna.
2. Menerapkan desain UI/UX yang lebih modern dan user friendly agar
mudah dipahami dan digunakan oleh pengguna.
3. Mengoptimalkan performa aplikasi agar lebih cepat dan stabil dalam
penggunaannya.

88
4. Melakukan pelatihan dan edukasi kepada pengguna agar lebih efektif
dalam penggunaan aplikasi ini.
Dengan demikian, aplikasi manajemen form reporting PT
Indonesia Comnets Plus dapat terus dikembangkan dan ditingkatkan untuk
memenuhi kebutuhan perusahaan dalam mengelola laporan dengan lebih
efisien dan produktif.

89
 DAFTAR PUSTAKA

Muhammad RobithAdani. 2021. Dta Flow Diagra(DFD): Pengertian, Jenis,

Fungsi & Contoh. https://wwwsekawanmedia.co.id/blog/dfd-adalah/

Rendi Juliarto. 2021. Apa itu UML? Beserta Pengertian dan Contohnya.
https://www.dicoding.com/blog/apa-itu-uml/

Bitlabs Academy. 2020, Apa itu RAD? Mengenal Salah Satu Metode
Pengembangan Aplikasi. https://bitlabs.id/blog/rad-adalah/

Deva Abel Khan. 2021. Rekayasa Perangkat Lunak Kelas XII. Depok:
MEMBUAT WEB PORTAL BERITA PERGAULAN BEBAS (2021)

Andan Susanto. 2014. Rekayasa Perangkat Lunak Kelas XI

Iqbal Musyaffa. 2022. Metode Pengembangan Agile : Pengertian, Tahapan, dan

Keuntungan. https://fittechinova.com/blog/detail/metode-pengembangan-agile-
pengertian-tahapan-dan-keuntungan

BSI Today. 2022. Mengenal Metode Prototype Kelebihan Dan Kekurangan.

https://bsi.today/metode-prototype/

Muhammad Ariffudin. 2022. Bahasa Pemrograman: Pengertian, Fungsi, Jenis,

dan 15+ Contohnya!. https://www.niagahoster.co.id/blog/bahasa-pemrograman/

Putri Aprilia. 2021. Apa itu HTML? Berikut Fungsi dan Cara Kerjanya!.
https://www.niagahoster.co.id/blog/html-adalah/
Aldwin Nayoan. 2022. Apa Itu CSS? Pengertian, Fungsi, dan Contohnya.
https://www.niagahoster.co.i/blog/pengertian-css/

90
Faradilla A. 2022. Apa Itu Bootstrap? Pengertian, Fungsi, dan Kelebihannya.
https://www.hostinger.co.id/tutorial/apa-itu-bootstrap

Putri Aprilia. 2022. Apa itu JavaScript? Berikut adalah Fungsi, Manfaat, dan Cara
Kerjanya!. https://www.niagahoster.co.id/blog/javascript-adalah/

Salmaa Awwaabiin. 2021. Pengertian PHP, Fungsi dan Sintaks Dasarnya.

https://www.niagahoster.co.id/blog/pengertian-php/

M Ali Maksum. 2022. Apa itu Laravel? Pengertian, Fitur dan Kelebihannya.
https://www.dewaweb.com/blog/apa-itu-laravel/

Dewaweb Team. 2022. SQL: Pengertian, Fungsi Beserta Perintah Dasarnya.

https://www.dewaweb.com/blog/sql-pengertian-fungsi-beserta-perintah-dasarnya/

Dhia Amira. 2022. Arti Platform dari Pengertian hingga Jenisnya, Ketahui Juga
Platform Digital yang Sedang Populer Saat Ini. https://plus.kapanlagi.com/arti-
platform-pengertian-jenis-dan-platform-digital-yang-sedang-populer-saat-ini-
dde1f2.html

Hanif Sri Yulianto. 2022. Pengertian Platform dan Fungsinya dalam Teknologi.
https://www.bola.com/ragam/read/4986302/pengertian-platform-dan-fungsinya-
dalam-teknologi

Lely Azizah. 2022. Apa itu Database? Jenis, Fungsi, dan Manfaatnya.
https://www.gramedia.com/best-seller/apa-itu-database/#Apa_Itu_Database

Muhammad Robith Adani. 2020. Mengenal MySQL: Pengertian, Fungsi, serta

Kelebihannya. https://www.sekawanmedia.co.id/blog/pengertian-mysql/

Elly Santi. 2022. PostgreSQL Adalah: Pengertian, Fungsi, Kelebihannya.

https://idwebhost.com/blog/postgresql-adalah/

91
Faradilla A. 2022. Apa Itu Integrated Development Environment (IDE)? Yuk,
Simak!. https://www.hostinger.co.id/tutorial/integrated-development-
environment-adalah

92
 LAMPIRAN-LAMPIRAN

1. Auth Controller
<?php
namespace App\Http\Controllers;
use Carbon\Carbon;
use App\Models\User;
use Illuminate\Support\Str;
use Illuminate\Http\Rqest;
use App\Mail\ResetPasswordMail;
use Illuminate\Support\Facades\DB;
use Illuminate\Suport\Facades\Auth;
us Illuminate\Support\FacadesHash;
use Illuminate\SupportFacades\Mail;
use App\Notificatons\NewUserNotification;
class AuhController extends Controller{
// Login
public function login()
return view('auth.login');}
public function authenticate(Request $request ){
$this->validate $request, [
'email' => 'required|email:dns',
'password' => 'required']);
$remember_me = $request->has('remember_me') ? true : false;
if (Auth::attempt(['email' => $request->input('email'), 'password' => $request->input('password')],
$remember_me)){
if(auth()->user()->role == 'admin'){
$request->session()->regenerate();
return redirect()->intended('/admin');
}else{
$request->session()->regenerate();
return redirect()->intended('/dashboard');}}
return back()->with('error', 'Login failed! Please try again');}
// Log Out
public function logout(Request $request){
Auth::logout();
return redirect('/');}
// Register
public function register(){
return view('auth.registration');}
public function storeregister(Request $request){
$request->validate([
'name' => 'required',
'email' => 'required|email|unique:users',
'no_telepon' => 'required',
'password' => 'required',

93
'alamat' => 'required']);
$user = new User;
$user->name = $request->name;
$user->role = 'field_support';
$user->email = $request->email;
$user->password = Hash::make($request->password);
$user->save();
$notification = User::first();
$notification->notify(new NewUserNotification($user));
return redirect("/")->with('succes', 'User registered successfully');}
// Forgot Password
public function showForgetPasswordForm(){
return view('auth.forget-password');}
private function generateToken(){
$key = config('app.key');
if (Str::startsWith($key, 'base64:')) {
$key = base64_decode(substr($key, 7));}
return hash_hmac('sha256', Str::random(40), $key);}
public function submitForgetPasswordForm(Request $request){
$user = User::where('email',$request->email)->first();
$generateToken = $this->generateToken();
DB::table('password_resets')->insert([
'email' => $request->email,
'token' => $generateToken,
'created_at' => Carbon::now()]);
$token = DB::table('password_resets')->where('token', $generateToken)->first();
Mail::to($user->email)->send(new ResetPasswordMail($user,$token->token));
return redirect()->back()->with("message","Your reset link is being sent to your email");}
// Reset Password
public function showResetPasswordForm($token) {
$buttonReset = DB::table('password_resets')->where('token',$token)->first();
if(!$buttonReset || Carbon::now()->subMinutes(10) > $buttonReset->created_at){
// $buttonReset->delete();
return redirect()->route('forget.password.get')->with('error','Invalid password reset link or link expired.');
}else{
return view('auth.reset-password',[
'token' => $token]);}}
public function submitResetPasswordForm($token, Request $request){
$buttonReset = DB::table('password_resets')->where('token',$token)->first();
if(!$buttonReset || Carbon::now()->subMinutes(10) > $buttonReset->created_at){
return redirect()->route('forget.password.get')->with('error','Invalid password reset link or link expired.');
}else{
if(strcmp($request->get('confirm_password'), $request->get('new_password'))){
return redirect()->back()->with("error","Your confirm password does not matches with your new password. Please
try again.");}
$tokens = DB::table('password_resets')->where('token',$token);
$reset_password = $tokens->first();
$user = User::all()->where('email', $reset_password->email)->first();
if($user->email != $request->get('email')){

94
 return redirect()->back()->with("error","Enter your correct email.");
}else{
$tokens->delete();
$user->update([
'password' => bcrypt($request->new_password)]);
return redirect('/')->with("success","Password changed successfully!");}}}}

2. Admin Controller
<?php
namespace App\Http\Controllers;
use App\Models\User;
use PDF;
use Illuminate\Http\Request;
use jazmy\FormBuilder\Models\Form;
use Illuminate\Support\Facades\Hash;
use App\Notifications\NewUserNotification;
use App\Notifications\DeleteUserNotification;
use App\Notifications\UpdateUserNotification;
use Illuminate\Support\Facades\Notification;
class AdminController extends Controller{
public function __construct(){
$this->middleware('auth');}
public function dashboard(){
$notifications = auth()->user()->unreadNotifications;
$numberOfNotifications = auth()->user()->unreadNotifications->count();
$form = Form::all();
return view('admin.dashboard', compact('notifications','numberOfNotifications', 'form'));}
public function markNotif(Request $request){
auth()->user()
->unreadNotifications
->when($request->input('id'), function ($query) use ($request) {
return $query->where('id', $request->input('id'));})
->markAsRead();
return response()->noContent();}
// User CRUD
public function index(Request $request){
$users = User::All()->sortBy('name');
return view('admin.user.index', compact('users'));}
public function create(){
return view('admin.user.create',[
'user' => User::all()]);}
public function store(Request $request){
$request->validate([
'name' => 'required',
'role' => 'required',
'email' => 'required|email|unique:users',
'password' => 'required']);
$user = new User;

95
 $user->name = $request->name;
$user->role = $request->role;
$user->email = $request->email;
$user->password = Hash::make($request->password);
$user->save();
$notification = User::where('role', 'admin')->get();
$notification->each->notify(new NewUserNotification($user));
return redirect()->route('user.index')->with('success','User created successfully!');}
public function edit($id){
return view('admin.user.edit',[
'user' => User::find($id)]);}
public function update(Request $request, $id){
$user = user::find($id);
$this->validate($request,[
'name' => ['required'],
'role' => ['required'],
'email' => ['required'],]);
$input = $request->all();
$input['name'] = $request['name'];
$input['role'] = $request['role'];
$input['email'] = $request['email'];
$user->update($input);
$notification = User::where('role', 'admin')->get();
$notification->each->notify(new UpdateUserNotification($user));
return redirect()->route('user.index')->with('success','User updated successfully!');}
public function destroy($id){
$user = User::where('id', $id)->firstOrFail();
$user->delete();
$notification = User::where('role', 'admin')->get();
$notification->each->notify(new DeleteUserNotification($user));
return redirect()->route('user.index')->with('success','User deleted successfully!');}}

3. Form Controller
<?php
/*--------------------
https://github.com/jazmy/laravelformbuilder
Licensed under the GNU General Public License v3.0
Author: Jasmine Robinson (jazmy.com)
Last Updated: 12/29/2018
----------------------*/
namespace jazmy\FormBuilder\Controllers;
use Throwable;
use App\Models\User;
use PDF;
use Illuminate\Http\Request;
use jazmy\FormBuilder\Helper;
use Illuminate\Support\Facades\DB;
use jazmy\FormBuilder\Models\Form;
use App\Http\Controllers\Controller;

96
use App\Notifications\NewFormNotification;
use Illuminate\Support\Facades\Notification;
use App\Notifications\DeleteFormNotification;
use App\Notifications\UpdateFormNotification;
use jazmy\FormBuilder\Events\Form\FormCreated;
use jazmy\FormBuilder\Events\Form\FormDeleted;
use jazmy\FormBuilder\Events\Form\FormUpdated;
use jazmy\FormBuilder\Requests\SaveFormRequest;
class FormController extends Controller{
public function __construct(){
$this->middleware('auth');}
// Index
public function index(Request $request){
$pageTitle = "Forms";
$forms = Form::getForUser(auth()->user());
if($request->has('view_deleted')){
$forms = Form::onlyTrashed()->get();}
return view('admin.forms.index', compact('pageTitle', 'forms'));}
// Create
public function create(){
$pageTitle = "Create New Form";
$saveURL = route('formbuilder::forms.store');
// get the roles to use to populate the make the 'Access' section of the form builder work
$form_roles = Helper::getConfiguredRoles();
return view('admin.forms.create', compact('pageTitle', 'saveURL', 'form_roles'));}
public function store(SaveFormRequest $request){
$user = $request->user();
$input = $request->merge(['user_id' => $user->id])->except('_token');
DB::beginTransaction();
// generate a random identifier
$input['identifier'] = $user->id.'-'.Helper::randomString(20);
$form = Form::create($input);
try {
// dispatch the event
event(new FormCreated($form));
$notification = User::where('role', 'admin')->get();
$notification->each->notify(new NewFormNotification($form));
DB::commit();
return response()
->json([
'success' => true,
'details' => 'Form successfully created!',
'dest' => route('formbuilder::forms.index'),]);
} catch (Throwable $e) {
info($e);
DB::rollback();
return response()->json(['success' => false, 'details' => 'Failed to create the form.']);}}
// Show
public function show($id){

97
$user = auth()->user();
$form = Form::where('id', $id)->with('user')
->withCount('submissions')
->firstOrFail();
$pageTitle = "Preview Form";
return view('admin.forms.show', compact('pageTitle', 'form'));}
// Edit
public function edit($id){
$user = auth()->user();
$form = Form::where(['user_id' => $user->id, 'id' => $id])->firstOrFail();
$pageTitle = 'Edit Form';
$saveURL = route('formbuilder::forms.update', $form);
// get the roles to use to populate the make the 'Access' section of the form builder work
$form_roles = Helper::getConfiguredRoles();
return view('admin.forms.edit', compact('form', 'pageTitle', 'saveURL', 'form_roles'));}
// Update
public function update(SaveFormRequest $request, $id){
$user = auth()->user();
$form = Form::where(['user_id' => $user->id, 'id' => $id])->firstOrFail();
$input = $request->except('_token');
if ($form->update($input)) {
// dispatch the event
event(new FormUpdated($form));
$notification = User::where('role', 'admin')->get();
$notification->each->notify(new UpdateFormNotification($form));
return response()
->json([
'success' => true,
'details' => 'Form successfully updated!',
'dest' => route('formbuilder::forms.index'),]);
} else { response()->json(['success' => false, 'details' => 'Failed to update the form.']);}}
// Delete
public function destroy($id){
$user = auth()->user();
$form = Form::where(['user_id' => $user->id, 'id' => $id])->firstOrFail();
$form->delete();
// dispatch the event
event(new FormDeleted($form));
$notification = User::where('role', 'admin')->get();
$notification->each->notify(new DeleteFormNotification($form));
return back()->with('success', "'{$form->name}' deleted.");}
// List
public function formList(){
$forms = Form::all();
return view('user.dashboard', [
'forms' => $forms]);}
// PDF
public function pdf($identifier){
$form = Form::where('identifier', $identifier)->firstOrFail();

98
 return view('admin.forms.form-pdf', compact('form'));}}

4. Render Form Controller

<?php
/*--------------------
https://github.com/jazmy/laravelformbuilder
Licensed under the GNU General Public License v3.0
Author: Jasmine Robinson (jazmy.com)
Last Updated: 12/29/2018
----------------------*/
namespace jazmy\FormBuilder\Controllers;
use Throwable;
use App\Models\User;
use App\Events\Submitted;
use Illuminate\Http\Request;
use jazmy\FormBuilder\Helper;
use Illuminate\Support\Facades\DB;
use jazmy\FormBuilder\Models\Form;
use App\Http\Controllers\Controller;
use jazmy\FormBuilder\Models\Submission;
use App\Notifications\NewSubmissionNotification;
class RenderFormController extends Controller{
public function __construct(){
$this->middleware('public-form-access');}
// Render
public function render($identifier){
$form = Form::where('identifier', $identifier)->firstOrFail();
$pageTitle = "{$form->name}";
return view('user.render.index', compact('form', 'pageTitle'));}
// Submit
public function submit(Request $request, $identifier){
$form = Form::where('identifier', $identifier)->firstOrFail();
DB::beginTransaction();
$notification = User::where('role', 'admin')->get();
try { $input = $request->except('_token');
// check if files were uploaded and process them
$uploadedFiles = $request->allFiles();
foreach ($uploadedFiles as $key => $file) {
// store the file and set it's path to the value of the key holding it
if ($file->isValid()) {
$input[$key] = $file->store('fb_uploads', 'public');}}
$user_id = auth()->user()->id ?? null;
$submission = $form->submissions()->create([
'user_id' => $user_id,
'content' => $input,]);
$notification->each->notify(new NewSubmissionNotification($submission));
DB::commit();
return redirect()->route('formbuilder::form.feedback', $identifier)->with('success', 'Form successfully submitted.');
}catch (Throwable $e){

99
 info($e);
DB::rollback();
return back()->withInput()->with('error', Helper::wtf());}}
public function feedback($identifier){
$form = Form::where('identifier', $identifier)->firstOrFail();
$pageTitle = "Form Submitted!";
return view('user.render.feedback', compact('form', 'pageTitle'));}}

5. Submission Controller
<?php
/*--------------------
https://github.com/jazmy/laravelformbuilder
Licensed under the GNU General Public License v3.0
Author: Jasmine Robinson (jazmy.com)
Last Updated: 12/29/2018
----------------------*/
namespace jazmy\FormBuilder\Controllers;
use App\Models\User;
use Illuminate\Http\Request;
use jazmy\FormBuilder\Helper;
use jazmy\FormBuilder\Models\Form;
use App\Http\Controllers\Controller;
use jazmy\FormBuilder\Models\Submission;
use App\Notifications\DeleteSubmissionNotification;
class SubmissionController extends Controller{
public function __construct(){
$this->middleware('auth');}
// Index
public function index($form_id, Request $request){
$user = auth()->user();
$form = Form::where(['user_id' => $user->id, 'id' => $form_id])
->with(['user'])->firstOrFail();
$submissions = $form->submissions()
->with('user')->latest()->get();
// get the header for the entries in the form
$form_headers = $form->getEntriesHeader();
$pageTitle = "{$form->name}";
return view( 'admin.submissions.index',
compact('form', 'submissions', 'pageTitle', 'form_headers'));}
// Show
public function show($form_id, $submission_id){
$submission = Submission::with('user', 'form')->where([
'form_id' => $form_id,
'id' => $submission_id,
])->firstOrFail();
$form_headers = $submission->form->getEntriesHeader();
$pageTitle = "View Submission";
return view('admin.submissions.show', compact('pageTitle', 'submission', 'form_headers'));}
// Delete

100
 public function destroy($form_id, $submission_id){
$submission = Submission::where(['form_id' => $form_id, 'id' => $submission_id])->firstOrFail();
$submission->delete();
$notification = User::where('role', 'admin')->get();
$notification->each->notify(new DeleteSubmissionNotification($submission));
return redirect()
->route('formbuilder::forms.submissions.index', $form_id)
->with('success', 'Submission successfully deleted.');}
// PDF
public function pdf($id){
$submission = Submission::where('id', $id)->firstOrFail();
$form_headers = $submission->form->getEntriesHeader();
return view('admin.submissions.pdf', compact('submission', 'form_headers'));}}

6. My Submission Controller
<?php
/*--------------------
https://github.com/jazmy/laravelformbuilder
Licensed under the GNU General Public License v3.0
Author: Jasmine Robinson (jazmy.com)
Last Updated: 12/29/2018
----------------------*/
namespace jazmy\FormBuilder\Controllers;
use Throwable;
use App\Models\User;
use Illuminate\Http\Request;
use jazmy\FormBuilder\Helper;
use Illuminate\Support\Facades\DB;
use App\Http\Controllers\Controller;
use jazmy\FormBuilder\Models\Submission;
use App\Notifications\UpdateSubmissionNotification;
use Illuminate\Support\Str;
class MySubmissionController extends Controller{
public function __construct(){
$this->middleware('auth');
// only allow submission edit on forms that allow it
$this->middleware('submisson-editable')->only(['edit', 'update']);}
// Index
public function index(){
$user = auth()->user();
$submissions = Submission::getForUser($user);
$pageTitle = "My Submissions";
return view('user.my_submissions.index', compact('submissions', 'pageTitle'));}
// Show
public function show($id){
$user = auth()->user();
$submission = Submission::where(['user_id' => $user->id, 'id' => $id])
->with('form')
->firstOrFail();

101
 $form_headers = $submission->form->getEntriesHeader();
$pageTitle = "View Submission";
return view('user.my_submissions.show', compact('submission', 'pageTitle', 'form_headers'));}
// Edit
public function edit($id){
$user = auth()->user();
$submission = Submission::where(['user_id' => $user->id, 'id' => $id])
->with('form')->firstOrFail();
// load up my current submissions into the form json data so that the
// form is pre-filled with the previous submission we are trying to edit.
$submission->loadSubmissionIntoFormJson();
$pageTitle = "Edit My Submission for '{$submission->form->name}'";
return view('user.my_submissions.edit', compact('submission', 'pageTitle'));}
// Update
public function update(Request $request, $id){
$user = auth()->user();
$submission = Submission::where(['user_id' => $user->id, 'id' => $id])->firstOrFail();
DB::beginTransaction();
try { $input = $request->except(['_token', '_method']);
// check if files were uploaded and process them
$uploadedFiles = $request->allFiles();
foreach ($uploadedFiles as $key => $file) {
// store the file and set it's path to the value of the key holding it
if ($file->isValid()) {
$input[$key] = $file->store('fb_uploads', 'public');}}
$submission->update(['content' => $input]);
$notification = User::where('role', 'admin')->get();
$notification->each->notify(new UpdateSubmissionNotification($submission));
DB::commit();
return redirect()
->route('formbuilder::my-submissions.index')
->with('success', 'Submission updated.');
} catch (Throwable $e) {
info($e);
DB::rollback();
return back()->withInput()->with('error', Helper::wtf());}}
// Delete
public function destroy($id){
$user = auth()->user();
$submission = Submission::where(['user_id' => $user->id, 'id' => $id])->firstOrFail();
$submission->delete();
return redirect()
->route('formbuilder::my-submissions.index')
->with('success', 'Submission deleted!');}}

7. Model User
<?php
namespace App\Models;
// use Illuminate\Contracts\Auth\MustVerifyEmail;

102
 use Laravel\Sanctum\HasApiTokens;
use Illuminate\Notifications\Notifiable;
use jazmy\FormBuilder\Traits\HasFormBuilderTraits;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
class User extends Authenticatable{
use HasApiTokens, HasFactory, Notifiable, HasFormBuilderTraits;
protected $fillable = [ 'name', 'role', 'email', 'password' ];
protected $hidden = [ 'password', 'remember_token' ];
protected $casts = [ 'email_verified_at' => 'datetime' ];}

8. Model Form
<?php
/*--------------------
https://github.com/jazmy/laravelformbuilder
Licensed under the GNU General Public License v3.0
Author: Jasmine Robinson (jazmy.com)
Last Updated: 12/29/2018
----------------------*/
namespace jazmy\FormBuilder\Models;
use Illuminate\Support\Collection;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Notifications\Notifiable;
class Form extends Model{
use Notifiable;
const FORM_PUBLIC = "PUBLIC";
const FORM_PRIVATE = "PRIVATE";
public static $visibility_options = [
['id' => self::FORM_PUBLIC, 'name' => self::FORM_PUBLIC.' (available to all users)'],
['id' => self::FORM_PRIVATE, 'name' => self::FORM_PRIVATE.' (available to only logged in users)'],];
protected $guarded = [
'id', 'created_at', 'updated_at',];
protected $dates = ['deleted_at'];
protected $casts = ['allows_edit' => 'boolean'];
public function user(){
return $this->belongsTo(config('formbuilder.models.user'));}
public function submissions(){
return $this->hasMany(Submission::class);}
public function scopePublic($query){
return $query->where('visibility', self::FORM_PUBLIC);}
public function getFormBuilderArrayAttribute($value) : array{
return json_decode($this->attributes['form_builder_json'], true);}
public function allowsEdit() : bool{
return $this->allows_edit;}
public function isPublic() : bool{
return $this->visibility === self::FORM_PUBLIC;}
public function isPrivate() : bool{
return $this->visibility === self::FORM_PRIVATE;}
public function hasCustomSubmitUrl() : bool{

103
 return ! empty($this->custom_submit_url);}
public static function getForUser($user){
return static::withCount('submissions')
->orderBy('name')->get();}
public function getEntriesHeader() : Collection{
return collect($this->form_builder_array)
->filter(function ($entry) {
return ! empty($entry['name']);})
->map(function ($entry) {
return ['name' => $entry['name'],
'label' => $entry['label'] ?? null,
'type' => $entry['type'] ?? null,];});}}

9. Model Submission
<?php
/*--------------------
https://github.com/jazmy/laravelformbuilder
Licensed under the GNU General Public License v3.0
Author: Jasmine Robinson (jazmy.com)
Last Updated: 12/29/2018
----------------------*/
namespace jazmy\FormBuilder\Models;
use Illuminate\Support\Str;
use Illuminate\Support\HtmlString;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Support\Facades\Storage;
use Illuminate\Notifications\Notifiable;
class Submission extends Model{
use Notifiable;
protected $table = 'form_submissions';
protected $guarded = [
'id', 'created_at', 'updated_at',];
protected $casts = [
'content' => 'array',];
public function user(){
return $this->belongsTo(config('formbuilder.models.user'));}
public function form(){
return $this->belongsTo(Form::class);}
public static function getForUser($user){
return static::where('user_id', $user->id)->with('form')->latest()->get();}
public function loadSubmissionIntoFormJson() : void{
$submission_content = $this->content;
$n = collect($this->form->form_builder_array)
->map(function ($entry) use ($submission_content) {
if (! empty($entry['name']) &&
array_key_exists($entry['name'], $submission_content)) {
// the field has a 'name' which means it is not a header or paragraph
// and the user previously have an entry for that field in the $submission_content
$current_submitted_val = $submission_content[$entry['name']] ?? '';

104
if ((empty($entry['value']) && empty($entry['values']))) {
// for input types that do not get their values from a 'values' array
// set the staight 'value' string and move on
$entry['value'] = $current_submitted_val;
} else if (! empty($entry['values'])) {
// this will hold what will think is the value of the 'other' input
// in a checkbox-group that allows the 'other' option
$otherInputVal = null;
// manipulate the values array so we can preselect the entries that
// were chosen in the submission we have on file.
if (is_array($current_submitted_val)) {
$entry['values'] = collect($entry['values'])
->map(function ($v) use ($current_submitted_val) {
// if this value in the 'values' array is in the
// previous selection made by the user in their
// submission, we will add the selected and checked
// flag to the value so that it will be pre-selected
// when we render the form
if (in_array($v['value'], $current_submitted_val)) {
$v['selected'] = true;
$v['checked'] = 'checked';}
return $v;})
->toArray();}
// check if the 'other' input option is available
if (! empty($entry['other']) && $entry['other'] === true) {
// let's attempt to get the value that was provided via the
// 'other' input field of a checkbox-group
// get the submitted value that is not part of the 'values'
// array for this entry
$values_names = collect($entry['values'])
->map(function ($v) {
return $v['value'];})
->toArray();
$other = collect($current_submitted_val)
->filter(function ($sv) use ($values_names) {
return ! in_array($sv, $values_names);})
->values();
$otherInputVal = $other[0] ?? null;}
// still set the value on the entry as we have it
$entry['value'] = $otherInputVal ?? $current_submitted_val;}}
return $entry;});
$this->form->form_builder_json = $n;}
public function renderEntryContent($key, $type = null, $limit_string = false) : HtmlString{
$str = '';
if(! empty($this->content[$key]) &&
is_array($this->content[$key])) {
$str = implode(', ', $this->content[$key]);
} else {$str = $this->content[$key] ?? '';}
if ($limit_string) {

105
 $str = Str::limit($str, 20, '');}
// if the type is 'file' then we have to render this as a link
if ($type == 'file') {
if(isset($this->content[$key])){
$file_link = Storage::url($this->content[$key]);
$str = "<a href='{$file_link}'>{$str}</a>";
} else {$str = "No file";}}
return new HtmlString($str);}}

10. Migration User

<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration{
public function up(){
Schema::create('users', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->enum('role', ['admin','field_support']);
$table->string('email')->unique();
$table->timestamp('email_verified_at')->nullable();
$table->string('password');
$table->rememberToken();
$table->timestamps();});}
public function down(){
Schema::dropIfExists('users');}};

11. Migration Form

<?php
/*--------------------
https://github.com/jazmy/laravelformbuilder
Licensed under the GNU General Public License v3.0
Author: Jasmine Robinson (jazmy.com)
Last Updated: 12/29/2018
----------------------*/
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateFormsTable extends Migration{
public function up(){
Schema::create('forms', function (Blueprint $table) {
$table->increments('id');
$table->unsignedBigInteger('user_id')->nullable();
$table->string('name');
$table->string('visibility');
$table->boolean('allows_edit')->default(false);
$table->string('identifier')->unique();
$table->text('form_builder_json')->nullable();
$table->timestamps();

106
 $table->foreign('user_id')->references('id')->on('users')->onDelete('CASCADE');});}
public function down(){
Schema::dropIfExists('forms');}}

12. Migration Submission

<?php
/*--------------------
https://github.com/jazmy/laravelformbuilder
Licensed under the GNU General Public License v3.0
Author: Jasmine Robinson (jazmy.com)
Last Updated: 12/29/2018
----------------------*/
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateFormSubmissionsTable extends Migration{
public function up(){
Schema::create('form_submissions', function (Blueprint $table) {
$table->increments('id');
$table->unsignedInteger('form_id');
$table->unsignedBigInteger('user_id')->nullable();
$table->text('content');
$table->timestamps();
$table->foreign('form_id')->references('id')->on('forms')->onDelete('CASCADE');
$table->foreign('user_id')->references('id')->on('users')->onDelete('CASCADE');});}
public function down(){
Schema::dropIfExists('form_submissions');}}

13. Migration Notifikasi

<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration{
public function up(){
Schema::create('notifications', function (Blueprint $table) {
$table->uuid('id')->primary();
$table->string('type');
$table->morphs('notifiable');
$table->text('data');
$table->timestamp('read_at')->nullable();
$table->timestamps();});}
public function down(){
Schema::dropIfExists('notifications');}};

14. Routes
<?php use Illuminate\Support\Facades\Route;
use App\Http\Controllers\AuthController;
use App\Http\Controllers\AdminController;
use jazmy\FormBuilder\Controllers\FormController;

107
 use jazmy\FormBuilder\Controllers\SubmissionController;
// Auth
Route::get('/', [AuthController::class, 'login']);
Route::post('/', [AuthController::class, 'authenticate'])->middleware('guest');
Route::get('/logout',[AuthController::class,'logout']);
Route::get('/register', [AuthController::class, 'register'])->middleware('guest');
Route::post('/register', [AuthController::class, 'storeregister'])->middleware('guest');
Route::get('/forget-password', [AuthController::class, 'showForgetPasswordForm'])->name('forget.password.get')-
>middleware('guest');
Route::post('/forget-password', [AuthController::class, 'submitForgetPasswordForm'])-
>name('forget.password.post')->middleware('guest');
Route::get('/reset-password/{token}', [AuthController::class, 'showResetPasswordForm'])-
>name('reset.password.get');
Route::post('/reset-password/{token}', [AuthController::class, 'submitResetPasswordForm'])-
>name('reset.password.post');
// Dashboard Admin
Route::get('/admin', [AdminController::class, 'dashboard'])->name('admin-dashboard')->middleware('admin');
// Mark read notification
Route::post('/mark-as-read', [AdminController::class, 'markNotif'])->name('markNotif');
// Dashboard User
Route::get('/dashboard', [FormController::class, 'formList'])->name('dashboard');
// Admin CRUD User
Route::get('/admin/user', [AdminController::class, 'index'])->name('user.index')->middleware('admin');
Route::get('/admin/user/pdf', [AdminController::class, 'pdf'])->middleware('admin');
Route::get('/admin/user/create', [AdminController::class, 'create'])->middleware('admin');
Route::post('/admin/user', [AdminController::class, 'store'])->middleware('admin');
Route::get('/admin/user/{id}/edit', [AdminController::class, 'edit'])->middleware('admin');
Route::post('/admin/user/{id}', [AdminController::class, 'update'])->middleware('admin');
Route::delete('/admin/user/{id}', [AdminController::class, 'destroy'])->name('delUser')->middleware('admin');
// Print
Route::get('/form-builder/forms/pdf/{id}', [FormController::class, 'pdf'])->name('formpdf')->middleware('admin');
Route::get('/admin/submission/pdf/{id}', [SubmissionController::class, 'pdf'])->middleware('admin');

15. View Login

<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign in - Voler Admin Dashboard</title>
<link rel="stylesheet" href="/template/dist/assets/css/bootstrap.css">
<link rel="shortcut icon" href="/template/dist/assets/images/favicon.svg" type="image/x-icon">
<link rel="stylesheet" href="/template/dist/assets/css/app.css">
{{-- Toastr CSS CDN --}}
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.css" rel="stylesheet" />
{{-- JQUERY CDN --}}
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
{{-- Toastr JS CDN --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

108
<script>
toastr.options = {
"closeButton": true,
"debug": false,
"newestOnTop": false,
"progressBar": false,
"positionClass": "toast-top-full-width",
"preventDuplicates": false,
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"}
</script> <style>
.toast{ max-width: 100%;
margin-top: 50px;}
@media screen and (max-width: 640px) {
#auth{ padding-top: 150px}
a{ text-decoration: none; } } </style> </head>
<body> @if (Session::has('error'))
<script> toastr.error("{!! Session::get('error') !!}") </script>
@endif
@if (Session::has('success'))
<script> toastr.success("{!! Session::get('success') !!}") </script>
@endif
<div id="auth">
<div class="container">
<div class="row">
<div class="col-md-5 col-sm-12 mx-auto">
<div class="card">
<div class="card-body">
<div class="text-center mb-3">
<img src="/img/logo.png" height="70" class='mb-3'>
<p class="text-dark" style="font-weight: 500">Please enter your credentials below.</p></div>
<form action="/" method="POST">
@csrf
<div class="form-group position-relative has-icon-left">
<label for="email">Email</label>
<div class="position-relative">
<input type="text" class="form-control @error('email') is-invalid @enderror"
id="email" name="email" autofocus required>
<div class="form-control-icon">
<i data-feather="user"></i></div>
@error('email')
<div class="invalid-feedback">

109
 {{ $message }} </div>
@enderror </div> </div>
<div class="form-group position-relative has-icon-left mb-3">
<div class="clearfix">
<label for="password">Password</label> </div>
<div class="position-relative">
<input type="password" class="form-control" id="password" name="password"
required>
<div class="form-control-icon">
<i data-feather="lock"></i> </div> </div> </div>
<div class='form-check clearfix mb-4'>
<div class="checkbox float-left">
<input type="checkbox" id="remember_me" class='form-check-input' name="remember_me" value="1">
<label for="remember_me">Remember me</label> </div>
<div class="float-right">
<a href="{{ route('forget.password.get') }}">Forgot Password?</a> </div> </div> <div class="d-flex justify-
content-between">
<a href="/register" class="align-items-baseline">Don't have an account?</a>
<button class="btn btn-primary float-right font-weight-bold" type="submit">Login</button>
</div></form></div></div></div></div></div></div>
<script src="/template/dist/assets/js/feather-icons/feather.min.js"></script>
<script src="/template/dist/assets/js/app.js"></script>
<script src="/template/dist/assets/js/main.js"></script></body></html>

16. View Register

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign in - Voler Admin Dashboard</title>
<link rel="stylesheet" href="/template/dist/assets/css/bootstrap.css">
<link rel="shortcut icon" href="/template/dist/assets/images/favicon.svg" type="image/x-icon">
<link rel="stylesheet" href="/template/dist/assets/css/app.css">
<style>@media screen and (min-width: 360px) {
.card-body{ padding: 1.5rem 1rem;}
a{text-decoration: none;}
textarea{ border: 1px solid #DFE3E7;
border-radius: 0.25rem;}}
</style> </head>
<body> <div id="auth">
<div class="container">
<div class="row">
<div class="col-md-5 col-sm-12 mx-auto">
<div class="card ">
<div class="card-body">
<div class="text-center mb-3">
<img src="/img/logo.png" height="70" class='mb-4'>
<p class="text-dark" style="font-weight: 500; font-size: 16px">Please fill the form to register.</p></div>
<form action="/register" method="POST">

110
 @csrf
<div class="form-group">
<label for="name-column">Name</label>
<input type="text" id="name-column" class="form-control"
name="name">
@if ($errors->has('name'))
<span class="text-danger">{{ $errors->first('name') }}</span>
@endif
</div><div class="form-group">
<label for="password-column">Password</label>
<input type="password" id="password-column" class="form-control"
name="password">
@if ($errors->has('password'))
<span class="text-danger">{{ $errors->first('password') }}</span>
@endif
</div><div class="form-group">
<label for="email-column">Email</label>
<input type="email" id="email-column" class="form-control"
name="email">
@if ($errors->has('email'))
<span class="text-danger">{{ $errors->first('email') }}</span>
@endif
</div><div class="clearfix">
<a href="/">Have an account? Login</a>
<button class="btn btn-primary float-right" type="submit">Register</button>
</div></form></div></div></div></div></div></div>
<script src="/template/dist/assets/js/feather-icons/feather.min.js"></script>
<script src="/template/dist/assets/js/app.js"></script>
<script src="/template/dist/assets/js/main.js"></script>
</body></html>

17. View Forgot Password

<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign in - Voler Admin Dashboard</title>
<link rel="stylesheet" href="/template/dist/assets/css/bootstrap.css">
<link rel="shortcut icon" href="/template/dist/assets/images/favicon.svg" type="image/x-icon">
<link rel="stylesheet" href="/template/dist/assets/css/app.css">
{{--! Toastr CSS CDN --}}
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.css" rel="stylesheet" />
{{--! JQUERY CDN --}}
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
{{--! Font Awesome --}}
<script src="https://kit.fontawesome.com/e5a524ad24.js"></script>
{{--! Toastr JS CDN --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script>

111
toastr.options = {
"closeButton": true,
"debug": false,
"newestOnTop": false,
"progressBar": false,
"positionClass": "toast-top-full-width",
"preventDuplicates": false,
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"} </script>
<style> .toast{
max-width: 100%;
margin-top: 50px;}
#auth{
padding-top: 150px;}
@media screen and (min-width: 360px) {
a{text-decoration: none;}} </style> </head> <body>
@if (Session::has('message'))
<script> toastr.success("{!! Session::get('message') !!}") </script>
@endif
<div id="auth">
<div class="container">
<div class="row">
<div class="col-md-5 col-sm-12 mx-auto">
<div class="card">
<div class="card-body">
<div class="text-center mb-3">
<img src="/img/logo.png" height="70" class='mb-3'>
<p class="text-dark" style="font-weight: 500; font-size: 15px">Please enter your email to receive password reset
link.</p></div>
<form action="{{ route('forget.password.post') }}" method="POST">
@csrf
<div class="form-group position-relative has-icon-left">
<label for="email">Email</label>
<div class="position-relative">
<input type="email" class="form-control @error('email') is-invalid @enderror"
id="email" name="email" autofocus required>
<div class="form-control-icon">
<i data-feather="user"></i> </div>
@error('email')
<div class="invalid-feedback">
{{ $message }} </div>
@enderror </div> </div>

112
 <div class="clearfix mt-3">
<button class="btn btn-primary col-12" type="submit">Send Reset Password Link</button> </div>
<div class="mt-4">
<a href="/" style="vertical-align: middle">
<i class="fa-solid fa-chevron-left"></i>
Back To Login </a> </div> </form> </div> </div> </div> </div> </div> </div>
<script src="/template/dist/assets/js/feather-icons/feather.min.js"></script>
<script src="/template/dist/assets/js/app.js"></script>
<script src="/template/dist/assets/js/main.js"></script> </body> </html>

18. View Reset Password

<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign in - Voler Admin Dashboard</title>
<link rel="stylesheet" href="/template/dist/assets/css/bootstrap.css">
<link rel="shortcut icon" href="/template/dist/assets/images/favicon.svg" type="image/x-icon">
<link rel="stylesheet" href="/template/dist/assets/css/app.css">
{{-- Toastr CSS CDN --}}
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.css" rel="stylesheet" />
{{-- JQUERY CDN --}}
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
{{-- Toastr JS CDN --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script> toastr.options = {
"closeButton": true,
"debug": false,
"newestOnTop": false,
"progressBar": false,
"positionClass": "toast-top-full-width",
"preventDuplicates": false,
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut" } </script> <style>
.toast{
max-width: 100%;
margin-top: 50px; }
@media screen and (min-width: 360px) {
#auth{ padding-top: 120px; } } </style> </head> <body>
@if (Session::has('success'))
<script> toastr.success("{!! Session::get('success') !!}") </script>
@endif

113
@if (Session::has('error'))
<script> toastr.error("{!! Session::get('error') !!}") </script>
@endif
<div id="auth">
<div class="container">
<div class="row">
<div class="col-md-5 col-sm-12 mx-auto">
<div class="card">
<div class="card-body">
<div class="text-center mb-4">
<img src="/img/logo.png" height="70" class='mb-3'>
<p class="text-dark" style="font-weight: 500; font-size: 15px">Please enter your email and your new password</p>
</div>
<form action="/reset-password/{{ $token }}" method="POST">
@csrf
<input type="hidden" name="token" value="{{ $token }}">
<div class="form-group position-relative has-icon-left">
<label for="email">Email</label>
<div class="position-relative">
<input type="text" class="form-control @error('email') is-invalid @enderror"
id="email" name="email" autofocus required>
<div class="form-control-icon">
<i data-feather="user"></i> </div>
@error('email')
<div class="invalid-feedback">
{{ $message }} </div>
@enderror </div> </div>
<div class="form-group position-relative has-icon-left">
<label for="password">New Password</label>
<div class="position-relative">
<input type="password" class="form-control @error('new_password') is-invalid @enderror"
id="new_password" name="new_password" autofocus required>
<div class="form-control-icon">
<i data-feather="lock"></i> </div>
@error('new_password')
<div class="invalid-feedback">
{{ $message }} </div>
@enderror </div> </div>
<div class="form-group position-relative has-icon-left">
<label for="password-confirm">Confirm Password</label>
<div class="position-relative">
<input type="password" class="form-control @error('confirm_password') is-invalid @enderror"
id="password-confirmation" name="confirm_password" autofocus required>
<div class="form-control-icon">
<i data-feather="lock"></i> </div>
@error('confirm_password')
<div class="invalid-feedback">
{{ $message }} </div>
@enderror </div> </div>

114
 <div class="clearfix">
<button class="btn btn-primary float-right" type="submit">Reset Password</button> </div> </form> </div>
</div> </div> </div> </div> </div>
<script src="/template/dist/assets/js/feather-icons/feather.min.js"></script>
<script src="/template/dist/assets/js/app.js"></script>
<script src="/template/dist/assets/js/main.js"></script> </body> </html>

19. View Dashboard Admin

@extends('layouts.app')
@section('title', 'Dashboard')
@section('css')
<style>
.overflow-auto{
height: 50vh; }
@media screen and (min-width: 1280px){
.mark-as-read{
float: right; } }
@media screen and (max-width: 640px) {
#main .main-content {
padding: 1rem 1rem; }
.container-fluid {
margin: 0;
padding: 0; }
.alert{ padding: 1rem;
margin: 0.5rem; }
.alert::after {
content: "";
clear: both;
display: table; } } </style>
@endsection
@section('content')
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header mb-3 d-flex pt-3">
<h5 class="fw-bold">Notifications ({{$numberOfNotifications}})</h5> </div>
<div class="card-body">
@if ($numberOfNotifications<=3)
<div> @foreach($notifications as $notification)
<div class="alert alert-light-info text-dark fs-6" role="alert">
<p class="notif">
[{{ $notification->created_at }}] User <b>{{ $notification->data['name'] }}</b>
{{ $notification->data['message'] }} <b>{{ $notification->data['subject'] }}</b> </p>
<a href="#" class="mark-as-read fw-bolder" data-id="{{ $notification->id }}" id="markAsRead">
Mark as read </a> </div>
@endforeach </div>
@else
<div class="overflow-auto" >

115
@foreach($notifications as $notification)
<div class="alert alert-light-info text-dark fs-6" role="alert">
<p class="notif">
[{{ $notification->created_at }}] User <b>{{ $notification->data['name'] }}</b>
{{ $notification->data['message'] }} <b>{{ $notification->data['subject'] }}</b> </p>
<a href="#" class="mark-as-read fw-bolder" data-id="{{ $notification->id }}" id="markAsRead">
Mark as read </a> </div>
@endforeach </div>
@endif
@if ($numberOfNotifications==0)
<p class="fs-5 align-middle text-center mt-3 fw-normal text-danger">There is no new notifications</p>
@endif </div>
@if ($numberOfNotifications>0)
<div class="card-footer mt-3">
<a href="#" id="mark-all" class="float-end fw-bold me-4">
Mark all as read </a> </div>
@endif </div> </div> </div> </div>
@endsection
@section('javascript')
<script> function sendMarkRequest(id = null) {
return $.ajax("{{ route('markNotif') }}", {
method: 'POST',
data: { _token: '{{ csrf_token() }}', id } }); }
$(function () {
$('.mark-as-read').click(function (e) {
e.preventDefault();
swal({ icon: "warning",
title: "Are you sure?",
text: "Mark this notification as read?",
buttons: true,
dangerMode: true
}).then((isConfirm) => {
if (isConfirm) {
let request = sendMarkRequest($(this).data('id'));
request.done(() => {
$(this).parents('div.alert').remove(); }); } }); });
$('#mark-all').click(function (e) {
e.preventDefault();
swal({ icon: "warning",
title: "Are you sure?",
text: "Mark all notification as read?",
buttons: true,
dangerMode: true
}).then((isConfirm) => {
if (isConfirm) {
let request = sendMarkRequest();
request.done(() => {
$('div.alert').remove(); }) } }); }); }); </script>
@endsection

116
20. View Tabel User
@extends('layouts.app')
@media screen and (max-width: 640px) {
#main .main-content {
padding: 1rem 1rem; }
.container-fluid {
margin: 0;
padding: 0; }
.card-body{
padding-bottom: 0.5rem } } </style>
@endsection
@section('content')
@if (Session::has('success'))
<script> toastr.success("{!! Session::get('success') !!}") </script>
@endif
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header d-flex justify-content-between">
<h5 class="fw-bold">Users</h5>
<div class="btn-toolbar" role="toolbar">
<div class="btn-group" role="group" aria-label="Third group">
<a href="/admin/user/create" class="btn btn-primary btn-sm" title="Add a New User">
Create </a> </div> </div> </div>
<div class="card-content">
<div class="card-body">
<div class="table-responsive">
<table class="table table-striped" id="table">
<thead> <tr>
<th class="five">#</th>
<th class="twenty-five">Name</th>
<th class="twenty-five">Role</th>
<th>Email</th>
<th data-sortable="false" class="five">Action</th> </tr> </thead>
<tbody> @foreach ($users as $user) <tr>
<td> {{ $loop->iteration }} </td>
<td> {{ $user->name }} </td>
<td>{{ (ucfirst(str_replace('_', ' ', $user->role)))}}</td>
<td>{{ $user->email }}</td>
<td> <a href="/admin/user/{{ $user->id }}/edit" class="btn btn-primary btn-sm"
title="Edit user '{{ $user->name }}'">
<i class="fa-solid fa-pencil"></i> </a>
<form action="{{ route('delUser', $user) }}" method="POST" class="d-inline-block">
@csrf
@method('DELETE')
<button type="submit" class="btn btn-danger btn-sm" id="deleteButton"
data-message="Delete user '{{ $user->name }}' ?"

117
 title="Delete user '{{ $user->name }}'">
<i class="fa fa-trash-o"></i> </button> </form> </td> </tr>
@endforeach </tbody> </table> </div> </div> </div> </div> </div> </div> </div> </div>
@endsection
@section('javascript')
{{--! DataTables & Plugins --}}
{{-- <script src="/adminlte/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="/adminlte/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="/adminlte/plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
<script src="/adminlte/plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script> --}}
{{--! Adminlte JS --}}
{{-- <script src="/adminlte/js/adminlte.js"></script> --}}
@endsection

21. View Create User

@extends('layouts.app')
@section('css')
<style> @media screen and (max-width: 640px) {
#main .main-content {
padding: 1rem 1rem; }
.container-fluid{
padding: 0; }
.card-body{
padding: 0.5rem; }
.card-footer{
padding: 0.5rem; }
option{
font-size: 1rem; } }
</style>
@endsection
@section('content')
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header d-flex justify-content-between">
<h5 class="card-title fw-bold">Add User</h5>
<div class="btn-toolbar" role="toolbar">
<div class="btn-group" role="group" aria-label="Third group"> </div> </div> </div>
<div class="card-body">
<form action="/admin/user" method="POST" id="myForm">
@csrf
<div class="mb-4">
<label for="name" class="form-label">Name</label>
<input type="text" class="form-control" id="name" name="name" autocomplete="off">
@error('name')
<div class="text-danger">
{{ $message }} </div>
@enderror </div>

118
 <div class="mb-4 d-flex flex-column">
<label for="role" class="form-label">Role</label>
<select name="role" class="selectpicker">
<option selected>Select Role</option>
<option value="admin">Admin</option>
<option value="field_support">Field Support</option> </select> </div>
<div class="mb-4">
<label for="email" class="form-label">Email</label>
<input type="text" class="form-control" id="email" name="email" autocomplete="off">
@error('email')
<div class="text-danger">
{{ $message }} </div>
@enderror </div>
<div class="mb-4">
<label for="password" class="form-label">Password</label>
<input type="text" class="form-control" id="password" name="password" autocomplete="off">
@error('password')
<div class="text-danger">
{{ $message }} </div>
@enderror </div> </form> </div>
<div class="card-footer">
<div class="btn-footer d-flex justify-content-end">
<a href="/admin/user" class="btn btn-danger me-1 cancel-button">
Cancel </a>
<button type="submit" class="btn btn-primary" id="submitButton">Submit</button> </div> </div> </div> </div>
</div> </div>
@endsection

22. View Edit User

@extends('layouts.app')
@section('css')
<style> @media screen and (max-width: 640px) {
#main .main-content {
padding: 1rem 1rem; }
.container-fluid{
padding: 0; }
.card-body{
padding: 0.5rem; }
.card-footer{
padding: 0.5rem; }
select{ border: 1px solid #ced4da;
border-radius: 0.25rem;
padding: 0.25rem } } </style>
@endsection
@section('content')
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card">

119
 <div class="card-header d-flex justify-content-between">
<h5 class="card-title fw-bold">Edit User</h5> </div>
<div class="card-body">
<form action="/admin/user/{{ $user->id }}" method="POST" id="editForm">
@csrf
<div class="mb-4">
<label for="name" class="form-label">Name</label>
<input type="text" class="form-control" id="name" name="name" autocomplete="off" value="{{$user->name}}">
</div>
<div class="mb-4 d-flex flex-column">
<label for="role" class="form-label">Role</label>
<select name="role">
<option selected>{{(ucfirst(str_replace('_', ' ', $user->role)))}}</option>
<option value="admin">Admin</option>
<option value="field_support">Field Support</option> </select> </div>
<div class="mb-4">
<label for="email" class="form-label">Email</label>
<input type="text" class="form-control" id="email" name="email" autocomplete="off" value="{{$user->email}}">
</div> </form> </div>
<div class="card-footer">
<div class="btn-footer d-flex justify-content-end">
<a href="/admin/user" class="btn btn-danger me-1 cancel-button">
Cancel </a>
<button type="submit" class="btn btn-primary" id="submitEditButton">Submit</button> </div> </div> </div>
</div> </div> </div>
@endsection

23. View Tabel Form

@extends('formbuilder::layout')
@section('css')
<style>
@media screen and (max-width: 640px) {
#main .main-content {
padding: 1rem 1rem; }
.container-fluid{
padding: 0; }
.card-body{
padding-bottom: 0.5rem } }
</style>
@endsection
@section('content')
@if (Session::has('success'))
<script>
toastr.success("{!! Session::get('success') !!}")
</script>
@endif
<div class="container-fluid">
<div class="row">
<div class="col-12">

120
 <div class="card">
<div class="card-header d-flex justify-content-between ">
<h5 class="fw-bold"> Forms </h5>
<div class="btn-toolbar" role="toolbar">
<div class="btn-group" role="group" aria-label="Third group">
<a href="{{ route('formbuilder::forms.create') }}" class="btn btn-primary btn-sm" title="Add a New Form">
Create </a> </div> </div> </div>
<div class="card-content">
<div class="card-body">
<div class="table-responsive">
<table class="table table-striped" id="table">
<thead> <tr>
<th class="five">#</th>
<th class="twenty-five">Name</th>
<th>Allows Edit?</th>
<th class="ten">Submissions</th>
<th class="twenty-five">Created On</th>
<th class="twenty-five" data-sortable="false">Actions</th> </tr> </thead> <tbody>
@foreach($forms as $form)
<tr> <td>{{ $loop->iteration }}</td>
<td>{{ $form->name }}</td>
<td>{{ $form->allowsEdit() ? 'YES' : 'NO' }}</td>
<td>{{ $form->submissions_count }}</td>
<td>{{ $form->created_at->toDayDateTimeString() }}</td>
<td> <a href="{{ route('formbuilder::forms.submissions.index', $form) }}" class="btn btn-primary btn-sm"
title="View submissions for form '{{ $form->name }}'">
<i class="fa fa-th-list"></i> </a>
<a href="{{ route('formbuilder::forms.show', $form) }}" class="btn btn-primary btn-sm" title="Preview form
'{{ $form->name }}'">
<i class="fa fa-eye"></i> </a>
<a href="{{ route('formbuilder::forms.edit', $form) }}" class="btn btn-primary btn-sm" title="Edit form '{{ $form-
>name }}'">
<i class="fa fa-pencil"></i> </a>
<form action="{{ route('formbuilder::forms.destroy', $form) }}" method="POST" id="deleteFormForm_{{ $form-
>id }}" class="d-inline-block">
@csrf
@method('DELETE')
<button type="submit" class="btn btn-danger btn-sm confirm-form" data-form="deleteFormForm_{{ $form-
>id }}" data-message="Delete form '{{ $form->name }}'?" title="Delete form '{{ $form->name }}'">
<i class="fa fa-trash-o"></i> </button> </form> </td> </tr>
@endforeach </tbody> </table> </div> </div> </div> </div> </div> </div> </div>
@endsection

24. View Create Form

@extends('formbuilder::layout')
@section('css')
<style>
.btn{ margin-left: 0.20rem; }
@media screen and (max-width: 640px) {

121
#main .main-content {
padding: 1rem 1rem; }
.container-fluid{
padding: 0; }
.card-body{
padding: 0.5rem; }
.alert{
padding: 1rem; }
.card-footer{
padding: 0.5rem;}
.btn-footer{
justify-content: space-between !important; }
.btn{
padding: 0.375rem 1.15rem; }
.form-wrap.form-builder .frmb-control li:before {
font-size: 25px; } } </style>
@endsection
@section('content')
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header d-flex justify-content-between">
<h5 class="card-title fw-bold">
{{ $pageTitle ?? '' }} </h5>
<div class="btn-toolbar" role="toolbar">
<div class="btn-group" role="group" aria-label="Third group"> </div> </div> </div>
<form action="{{ route('formbuilder::forms.store') }}" method="POST" id="createFormForm">
@csrf
<div class="card-body">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="name" class="col-form-label">Form Name</label>
<input id="name" type="text" class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }}" name="name"
value="{{ old('name') }}" required autofocus placeholder="Enter Form Name">
@if ($errors->has('name'))
<span class="invalid-feedback" role="alert">
<strong class="text-danger">{{ $errors->first('name') }}</strong> </span>
@endif </div> </div>
<div class="col-md-4">
<div class="form-group">
<label for="visibility" class="col-form-label">Form Visibility</label>
<select name="visibility" id="visibility" class="form-control" required="required">
<option value="">Select Form Visibility</option>
@foreach(jazmy\FormBuilder\Models\Form::$visibility_options as $option)
<option value="{{ $option['id'] }}">{{ $option['name'] }}</option>
@endforeach </select>
@if ($errors->has('visibility'))

122
 <span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('visibility') }}</strong> </span>
@endif </div> </div>
<div class="col-md-4" style="display: none;" id="allows_edit_DIV">
<div class="form-group">
<label for="allows_edit" class="col-form-label">
Allow Submission Edit </label>
<select name="allows_edit" id="allows_edit" class="form-control" required="required">
<option value="0">NO (submissions are final)</option>
<option value="1">YES (allow users to edit their submissions)</option> </select>
@if ($errors->has('allows_edit'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('allows_edit') }}</strong> </span>
@endif </div> </div> </div>
<div class="row">
<div class="col-12">
<div class="alert alert-info" role="alert">
<i class="fa fa-info-circle"></i>
Click on or drag and drop components onto the main panel to build your form content. </div>
<div id="fb-editor" class="fb-editor"></div> </div> </div> </div> </form>
<div class="card-footer" id="fb-editor-footer" style="display: none;">
<div class="btn-footer d-flex justify-content-end">
<a href="{{ route('formbuilder::forms.index') }}" class="btn btn-danger">
Cancel </a>
<button type="button" class="btn btn-primary fb-clear-btn">
Clear Form </button>
<button type="button" class="btn btn-primary fb-save-btn">
Save Form </button> </div> </div> </div> </div> </div> </div>
@endsection
@push(config('formbuilder.layout_js_stack', 'scripts'))
<script type="text/javascript">
window.FormBuilder = window.FormBuilder || {}
window.FormBuilder.form_roles = @json($form_roles); </script>
<script src="{{ asset('/vendor/formbuilder/js/create-form.js') }}{{ jazmy\FormBuilder\Helper::bustCache() }}"
defer></script>
@endpush

25. View Edit Form

@extends('formbuilder::layout')
@section('css')
<style>
.btn{ margin-left: 0.20rem; }
@media screen and (max-width: 640px) {
#main .main-content {
padding: 1rem 1rem; }
.container-fluid{
padding: 0; }
.card-body{
padding: 0.5rem; }

123
.alert{ padding: 1rem; }
.card-footer{
padding: 0.5rem; }
.btn-footer{
justify-content: space-between !important; }
.btn{ padding: 0.375rem 1.15rem; }
.form-wrap.form-builder .frmb-control li:before {
font-size: 25px; } } </style>
@endsection
@section('content')
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header d-flex justify-content-between">
<h5 class="card-title fw-bold">
{{ $pageTitle ?? '' }} </h5> </div>
<form action="{{ route('formbuilder::forms.update', $form) }}" method="POST" id="createFormForm" data-form-
method="PUT">
@csrf
@method('PUT')
<div class="card-body">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="name" class="col-form-label">Form Name</label>
<input id="name" type="text" class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }}" name="name"
value="{{ old('name') ?? $form->name }}" required autofocus placeholder="Enter Form Name">
@if ($errors->has('name'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('name') }}</strong> </span>
@endif </div> </div>
<div class="col-md-4">
<div class="form-group">
<label for="visibility" class="col-form-label">Form Visibility</label>
<select name="visibility" id="visibility" class="form-control" required="required">
<option value="">Select Form Visibility</option>
@foreach(jazmy\FormBuilder\Models\Form::$visibility_options as $option)
<option value="{{ $option['id'] }}" @if($form->visibility == $option['id']) selected @endif>
{{ $option['name'] }} </option>
@endforeach </select>
@if ($errors->has('visibility'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('visibility') }}</strong> </span>
@endif </div> </div>
<div class="col-md-4" @if($form->isPublic()) style="display: none;" id="allows_edit_DIV" @endif>
<div class="form-group">
<label for="allows_edit" class="col-form-label">
Allow Submission Edit </label>

124
 <select name="allows_edit" id="allows_edit" class="form-control" required="required">
<option value="0" @if($form->allows_edit == 0) selected @endif>
NO (submissions are final) </option>
<option value="1" @if($form->allows_edit == 1) selected @endif>
YES (allow users to edit their submissions) </option> </select>
@if ($errors->has('allows_edit'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('allows_edit') }}</strong> </span>
@endif </div> </div> </div>
<div class="row">
<div class="col-12">
<div class="alert alert-info" role="alert">
<i class="fa fa-info-circle"></i>
Click on or Drag and drop components onto the main panel to build your form content. </div>
<div id="fb-editor" class="fb-editor"></div> </div> </div> </div> </form>
<div class="card-footer" id="fb-editor-footer" style="display: none;">
<div class="btn-footer d-flex justify-content-end">
<a href="{{ route('formbuilder::forms.index') }}" class="btn btn-danger">
Cancel </a>
<button type="button" class="btn btn-primary fb-clear-btn">
Clear Form </button>
<button type="button" class="btn btn-primary fb-save-btn">
Save Form </button> </div> </div> </div> </div> </div> </div>
@endsection
@push(config('formbuilder.layout_js_stack', 'scripts'))
<script type="text/javascript">
window.FormBuilder = window.FormBuilder || {}
window.FormBuilder.form_roles = @json($form_roles);
window._form_builder_content = {!! json_encode($form->form_builder_json) !!} </script>
<script src="{{ asset('vendor/formbuilder/js/create-form.js') }}{{ jazmy\FormBuilder\Helper::bustCache() }}"
defer></script>
@endpush

26. View Detail Form

@extends('formbuilder::layout')
@section('css')
<style>
.btn-toolbar{
justify-content: center; }
.btn-group{
display: flex; }
@media screen and (max-width: 640px){
#main .main-content {
padding: 1rem 1rem; }
.container-fluid{
padding: 0; }
.col-md-4{
order: -1;
margin-bottom: 1rem; }

125
.card-body{
padding: 0.5rem; } } </style>
@endsection
@section('content')
<div class="container-fluid">
<a href="{{ route('formbuilder::forms.index') }}" class="btn btn-primary mb-2" >
<i class="fa-solid fa-chevron-left"></i>
Back To Forms</a>
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card ">
<div class="card-header ">
<h5 class="card-title">
Form Preview for <strong>'{{ $form->name }}'</strong> </h5>
<div class="btn-group" role="group">
<a href="{{ route('formbuilder::forms.submissions.index', $form) }}" class="btn btn-primary" title="View
Submissions">
View Submissions </a>
<a href="{{route('formpdf', $form->identifier)}}" class="btn btn-primary" title="Print Form" target="_blank">
Print Form </a>
<a href="{{ route('formbuilder::forms.edit', $form) }}" class="btn btn-primary" title="Edit Form">
Edit Form </a> </div>
<div class="btn-toolbar " role="toolbar"> </div> </div>
<div class="card-body">
<div id="fb-render"></div> </div> </div> </div>
<div class="col-md-4">
<div class="card">
<div class="card-header">
<h5 class="card-title ">
Details </h5> </div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<strong>Public URL: </strong>
<a href="{{ route('formbuilder::form.render', $form->identifier) }}" class="float-right" target="_blank">
{{$form->identifier}} </a> </li>
<li class="list-group-item">
<strong>Visibility: </strong> <span class="float-right">{{ $form->visibility }}</span> </li>
<li class="list-group-item">
<strong>Allows Edit: </strong>
<span class="float-right">{{ $form->allowsEdit() ? 'YES' : 'NO' }}</span> </li>
<li class="list-group-item">
<strong>Owner: </strong> <span class="float-right">{{ $form->user->name }}</span> </li>
<li class="list-group-item">
<strong>Current Submissions: </strong>
<span class="float-right">{{ $form->submissions_count }}</span> </li>
<li class="list-group-item">
<strong>Last Updated On: </strong>
<span class="float-right">
{{ $form->updated_at->toDayDateTimeString() }} </span> </li>

126
 <li class="list-group-item">
<strong>Created On: </strong>
<span class="float-right">
{{ $form->created_at->toDayDateTimeString() }}</span> </li> </ul> </div> </div> </div> </div>
@endsection
@push(config('formbuilder.layout_js_stack', 'scripts'))
<script type="text/javascript">
window._form_builder_content = {!! json_encode($form->form_builder_json) !!} </script>
<script src="{{ asset('vendor/formbuilder/js/preview-form.js') }}{{ jazmy\FormBuilder\Helper::bustCache() }}"
defer></script>
@endpush

27. View Print Form

<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
{{--! Bootstrap --}}
<link rel="stylesheet" href="/bootstrap/dist/css/bootstrap.css">
{{--! Voler CSS --}}
<link rel="stylesheet" href="/template/dist/assets/css/app.css">
<link rel="stylesheet" type="text/css"
href="{{ asset('/vendor/formbuilder/css/styles.css') }}{{ jazmy\FormBuilder\Helper::bustCache() }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/template/dist/assets/css/app.css">
<style> body {
margin: 50px; }
@media print{
.btn{ display: none; } }
.form-control {
display: block;
width: 100%;
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
.form-control[type=file] {
overflow: hidden; }

127
.form-control[type=file]:not(:disabled):not([readonly]) {
cursor: pointer; }
.form-control::-webkit-file-upload-button {
padding: 0.400rem 1rem;
margin: -0.375rem -0.75rem;
-webkit-margin-end: 0.75rem;
margin-inline-end: 0.75rem;
color: #212529;
background-color: #e9ecef;
pointer-events: none;
border-color: inherit;
border-style: solid;
border-width: 0;
border-inline-end-width: 1px;
border-radius: 0;
-webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-
shadow 0.15s ease-in-out;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow
0.15s ease-in-out; }
.form-control::file-selector-button {
padding: 0.400rem 0.75rem;
margin: -0.375rem -0.75rem;
-webkit-margin-end: 0.75rem;
margin-inline-end: 0.75rem;
color: #212529;
background-color: #e9ecef;
pointer-events: none;
border-color: inherit;
border-style: solid;
border-width: 0;
border-inline-end-width: 1px;
border-radius: 0;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow
0.15s ease-in-out; } </style> </head> <body>
<button onclick="window.print()" class="btn btn-primary mb-3">Print</button>
<div id="fb-render"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.js" referrerpolicy="no-referrer"></script>
<script type="text/javascript">
window.FormBuilder = {
csrfToken: '{{ csrf_token() }}' } </script>
<script src="{{ asset('/vendor/formbuilder/js/jquery-ui.min.js') }}" defer></script>
<script src="{{ asset('/vendor/formbuilder/js/sweetalert.min.js') }}" defer></script>
<script src="{{ asset('/vendor/formbuilder/js/jquery-formbuilder/form-builder.min.js') }}" defer></script>
<script src="{{ asset('/vendor/formbuilder/js/jquery-formbuilder/form-render.min.js') }}" defer></script>
<script src="{{ asset('/vendor/formbuilder/js/parsleyjs/parsley.min.js') }}" defer></script>
<script src="{{ asset('/vendor/formbuilder/js/clipboard/clipboard.min.js') }}?b=ck24" defer></script>
<script src="{{ asset('/vendor/formbuilder/js/script.js') }}{{ jazmy\FormBuilder\Helper::bustCache() }}" defer>
</script>
<script type="text/javascript">

128
 window._form_builder_content = {!! json_encode($form->form_builder_json) !!} </script>
<script src="{{ asset('vendor/formbuilder/js/preview-form.js') }}{{ jazmy\FormBuilder\Helper::bustCache() }}"
defer> </script> </body> </html>

28. View Render Form

@extends('formbuilder::layout')
@section('css')
<style>
@media screen and (max-width: 640px){
.card-body{
padding: 0.5rem; }
.card-footer{
padding: 0.5rem; } } </style>
@endsection
@section('content')
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-md-12">
<div class="card">
<div class="card-header d-flex justify-content-between">
<h5 class="card-title fw-bold">{{ $pageTitle }}</h5> </div>
<form action="{{ route('formbuilder::form.submit', $form->identifier) }}" method="POST" id="submitForm"
enctype="multipart/form-data">
@csrf
<div class="card-body">
<div id="fb-render"></div> </div>
<div class="card-footer d-flex justify-content-end">
<a href="{{ url()->previous() }}" class="btn btn-danger me-1" title="Back To Dashboard">
Cancel </a>
<button id="Submit" type="submit" class="btn btn-primary confirm-form " data-form="submitForm">Submit
Form </button>
<noscript>
<p>This site is best viewed with Javascript. Please allow javascript to run.</p> </noscript> <script>
$(function(){
$('#Submit').attr('disabled', false);
var $input = $('<button id="Submit" type="submit" class="btn btn-primary confirm-form float-end" data-
form="submitForm"> <i class="fa fa-submit"></i> Submit Form </button>');
$input.appendTo($("#formSubmit"));
$('#Submit').attr('data-message', "Submit your entry for '{{ $form->name }}'?"); }); </script> </div> </form>
</div> </div> </div> </div>
@endsection
@push(config('formbuilder.layout_js_stack', 'scripts'))
<script type="text/javascript">
window._form_builder_content = {!! json_encode($form->form_builder_json) !!} </script>
<script src="{{ asset('/vendor/formbuilder/js/render-form.js') }}{{ jazmy\FormBuilder\Helper::bustCache() }}"
defer></script> @endpush

29. View Feedback

@extends('formbuilder::layout')
@section('content')

129
 <div class="container-fluid">
<div class="row justify-content-center">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<h3 class="text-center text-success">
Your entry for <strong>{{ $form->name }}</strong> was successfully submitted. </h3> </div>
<div class="card-footer float-end">
<div class="btn-footer float-end">
@auth <a href="{{ route('formbuilder::my-submissions.index') }}"
class="btn btn-primary" title="Go To My Submissions">
<i class="fa fa-th-list"></i> </a> @endauth
<a href="/dashboard" class="btn btn-primary" title="Return Home">
<i class="fa fa-home"></i> </a> </div> </div> </div> </div> </div> </div>
@endsection

30. View Tabel Submission

@extends('formbuilder::layout')
@section('css')
<style> @media screen and (max-width: 640px){
#main .main-content {
padding: 1rem 1rem; }
.container-fluid{
padding: 0; }
.card-body{
padding-bottom: 0.5rem; } } </style>
@endsection
@section('content')
@if (Session::has('success'))
<script> toastr.success("{!! Session::get('success') !!}") </script>
@endif
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<a href="{{ route('formbuilder::forms.index') }}" class="btn btn-primary mb-2" >
<i class="fa-solid fa-chevron-left"></i>
Back To Forms </a>
<div class="card">
<div class="card-header d-flex justify-content-between">
<h5 class="card-title">
Submitted Entries for <strong>'{{ $pageTitle }}'</strong> ({{ $submissions->count() }}) </h5>
<div class="btn-toolbar" role="toolbar">
<div class="btn-group" role="group" aria-label="Third group"> </div> </div> </div>
<div class="card-content">
<div class="card-body">
<div class="table-responsive">
<table class="table d-table table-striped" id="table">
<thead> <tr> <th class="five">#</th>
<th class="fifteen">User Name</th>

130
 <th class="ten">Submitted On</th>
<th class="ten">Last Updated On</th>
<th class="five" data-sortable="false">Actions</th> </tr> </thead>
<tbody> @foreach($submissions as $submission)
<tr> <td>{{ $loop->iteration }}</td>
<td>{{ $submission->user->name ?? 'n/a' }}</td>
<td>{{ $submission->created_at }}</td>
<td>{{ $submission->updated_at }}</td>
<td> <a href="{{ route('formbuilder::forms.submissions.show', [$form, $submission->id]) }}"
class="btn btn-primary btn-sm" title="View submission">
<i class="fa fa-eye"></i> </a>
<form action="{{ route('formbuilder::forms.submissions.destroy', [$form, $submission]) }}"
method="POST" id="deleteSubmissionForm_{{ $submission->id }}"
class="d-inline-block">
@csrf
@method('DELETE')
<button type="submit" class="btn btn-danger btn-sm confirm-form"
data-form="deleteSubmissionForm_{{ $submission->id }}"
data-message="Delete this submission?" title="Delete submission">
<i class="fa fa-trash-o"></i>
</button> </form> </td> </tr>
@endforeach
</tbody> </table> </div> </div> </div> </div> </div> </div> </div>
@endsection

31. View Detail Submission

@extends('formbuilder::layout')
@section('css')
<style> .btn-group{
display: flex; }
.confirm-form{
border-top-left-radius: 0;
border-bottom-left-radius: 0;
padding: 6px 120px; }
@media screen and (max-width: 640px){
#main .main-content {
padding: 1rem 1rem; }
.container-fluid{
padding: 0; }
.col-md-4{
order: -1;
margin-bottom: 1rem; }
.card-body{
padding: 0.5rem; }
.confirm-form{
border-top-left-radius: 0;
border-bottom-left-radius: 0;
padding: 6px 25px; } } </style>
@endsection

131
@section('content')
<div class="container-fluid">
<a href="{{ route('formbuilder::forms.submissions.index', $submission->form->id) }}" class="btn btn-primary mb-
2" >
<i class="fa-solid fa-chevron-left"></i>
Back To Submissions </a>
<div class="row ">
<div class="col-md-8">
<div class="card">
<div class="card-header">
<h5 class="card-title">
Viewing Submission <strong>({{ $submission->id }})</strong> for form <strong>'{{ $submission->form-
>name }}'</strong> </h5>
<div class="btn-group" role="group" aria-label="First group">
<a href="/admin/submission/pdf/{{$submission->id}}" class="btn btn-primary" title="Print Form"
target="_blank">
Print Submission </a>
<form action="{{ route('formbuilder::forms.submissions.destroy', [$submission->form, $submission]) }}"
method="POST" id="deleteSubmissionForm_{{ $submission->id }}">
@csrf
@method('DELETE')
<button type="submit" class="btn btn-danger confirm-form" data-form="deleteSubmissionForm_{{ $submission-
>id }}" data-message="Delete submission" title="Delete this submission?">
Delete Submission </button> </form> </div> </div>
<ul class="list-group list-group-flush">
@foreach($form_headers as $header)
<li class="list-group-item">
<strong>{{ $header['label'] ?? ucwords($header['name']) }}: </strong>
<span class="">
{{ $submission->renderEntryContent($header['name'], $header['type']) }}</span></li>
@endforeach </ul> </div> </div>
<div class="col-md-4">
<div class="card">
<div class="card-header">
<h5 class="card-title">Details</h5> </div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<strong>Form: </strong>
<span class="float-right">{{ $submission->form->name }}</span> </li>
<li class="list-group-item">
<strong>Submitted By: </strong>
<span class="float-right">{{ $submission->user->name ?? 'Guest' }}</span> </li>
<li class="list-group-item">
<strong>Last Updated On: </strong>
<span class="float-right">{{ $submission->updated_at->toDayDateTimeString() }}</span> </li>
<li class="list-group-item">
<strong>Submitted On: </strong>
<span class="float-right">{{ $submission->created_at->toDayDateTimeString() }}</span> </li> </ul> </div>
</div> </div> </div>

132
 @endsection

32. View Print Submission

<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
{{--! Form Builder CSS --}}
@stack('styles')
{{--! Bootstrap --}}
<link rel="stylesheet" href="/bootstrap/dist/css/bootstrap.css">
{{--! Voler CSS --}}
<link rel="stylesheet" href="/template/dist/assets/css/app.css">
{{--! Font Awesome --}}
<script src="https://kit.fontawesome.com/e5a524ad24.js"></script>
<style> body{
margin: 50px; }
.table, tr, td{
border: 2px solid; }
@media print{
.btn{ display: none; } } </style> </head>
<body> <button onclick="window.print()" class="btn btn-primary mb-3">Print</button>
<ul class="list-group list-group-flush">
<table class="table">
@foreach($form_headers as $header)
<tr> <td class="p-2 w-25">
<strong class="">{{ $header['label'] ?? ucwords($header['name']) }}: </strong> </td>
<td class="p-2">
<p> {{ $submission->renderEntryContent($header['name'], $header['type']) }} </p> </td> </tr>
@endforeach </table> </ul> </body> </html>

33. View Dashboard Field Support

@extends('layouts.app')
@section('title', 'Dashboard')
@section('content')
<div> @foreach ($forms as $form)
<div class="col border border-2 border-dark m-2">
<a href="{{ route('formbuilder::form.render', $form->identifier) }}" class="text-decoration-none fs-4 m-2">
{{$form->name}} </a> </div>
@endforeach </div>
@endsection

34. View Tabel MySubmission

@extends('formbuilder::layout')
@section('css')
<style> @media screen and (max-width: 640px){
.card-body{
padding-bottom: 0.5rem; } } </style>

133
 @endsection
@section('content')
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-md-12">
<div class="card">
<div class="card-header d-flex justify-content-between">
<h5 class="card-title fw-bold">
{{ $pageTitle }} ({{ $submissions->count() }}) </h5></div>
<div class="card-content">
<div class="card-body">
@if($submissions->count())
<div class="table-responsive">
<table class="table d-table table-striped pb-0 mb-0" id="table">
<thead> <tr> <th class="five">#</th>
<th class="">Form</th>
<th class="twenty-five">Created On</th>
<th class="twenty-five">Updated On</th>
<th class="fifteen" data-sortable="false">Actions</th> </tr> </thead>
<tbody> @foreach($submissions as $submission)
<tr> <td>{{ $loop->iteration }}</td>
<td>{{ $submission->form->name }}</td>
<td>{{ $submission->created_at->toDayDateTimeString() }}</td>
<td>{{ $submission->updated_at->toDayDateTimeString() }}</td>
<td> <a href="{{ route('formbuilder::my-submissions.show', [$submission->id]) }}"
class="btn btn-primary btn-sm" title="View submission">
<i class="fa fa-eye"></i> </a>
@if($submission->form->allowsEdit())
<a href="{{ route('formbuilder::my-submissions.edit', [$submission->id]) }}"
class="btn btn-primary btn-sm" title="Edit submission">
<i class="fa fa-pencil"></i> </a>
@endif </td> </tr>
@endforeach
</tbody> </table> </div>
@else
<h4 class="text-danger text-center">
No submission to display. </h4>
@endif
</div></div></div></div></div> </div>
@endsection

35. View Edit MySubmission

@extends('formbuilder::layout')
@section('css')
<style> @media screen and (max-width: 640px) {
.card .card-body{
padding: 0.5rem; }
.card-footer{
padding: 0.5rem; } } </style>

134
 @endsection
@section('content')
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card mb-5">
<div class="card-header d-flex justify-content-between">
<h5 class="card-title">
Edit My Submission for <strong>{{ $submission->form->name }}</strong> </h5>
<div class="btn-toolbar" role="toolbar">
<div class="btn-group" role="group" aria-label="Third group"> </div> </div> </div>
<form action="{{ route('formbuilder::my-submissions.update', $submission->id) }}" method="POST"
id="submitForm" enctype="multipart/form-data">
@csrf
@method('PUT')
<div class="card-body">
<div id="fb-render"></div> </div>
<div class="card-footer d-flex justify-content-end">
<a href="{{ route('formbuilder::my-submissions.index') }}" class="btn btn-danger me-1" >
Cancel</a>
<button type="submit" class="btn btn-primary confirm-form" data-form="submitForm" data-message="Submit
update to your entry for '{{ $submission->form->name }}'?">
Submit Form
</button></div></form></div></div></div></div>
@endsection
@push(config('formbuilder.layout_js_stack', 'scripts'))
<script type="text/javascript">
window._form_builder_content = {!! json_encode($submission->form->form_builder_json) !!} </script>
<script src="{{ asset('vendor/formbuilder/js/render-form.js') }}{{ jazmy\FormBuilder\Helper::bustCache() }}"
defer></script>
@endpush

36. View Detail MySubmission

@extends('formbuilder::layout')
@section('css')
<style> .btn-group{
display: flex;}
@media screen and (max-width: 640px) {
.col-md-4{
order: -1;
margin-bottom: 1rem; }}
</style>
@endsection
@section('content')
<div class="container-fluid">
<a href="{{ route('formbuilder::my-submissions.index') }}" class="btn btn-primary mb-2" >
<i class="fa-solid fa-chevron-left"></i>
Back To My Submissions</a>
<div class="row justify-content-center">

135
<div class="col-md-8">
<div class="card rounded-0">
<div class="card-header">
<h5 class="card-title">
Viewing my submission for form
<strong>{{ $submission->form->name }}</strong></h5>
<div class="btn-group" role="group" aria-label="First group">
@if($submission->form->allowsEdit())
<a href="{{ route('formbuilder::my-submissions.edit', $submission) }}" class="btn btn-primary" title="Edit this
submission">
Edit Submission</a>
@endif </div></div>
<ul class="list-group list-group-flush">
@foreach($form_headers as $header)
<li class="list-group-item">
<strong>{{ $header['label'] ?? ucwords($header['name']) }}: </strong>
<span class="float-right">{{ $submission->renderEntryContent($header['name'], $header['type']) }}</span></li>
@endforeach
</ul></div></div>
<div class="col-md-4">
<div class="card rounded-0">
<div class="card-header">
<h5 class="card-title">Details</h5></div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<strong>Form: </strong>
<span class="float-right">{{ $submission->form->name }}</span></li>
<li class="list-group-item">
<strong>Submitted By: </strong>
<span class="float-right">{{ $submission->user->name ?? 'Guest' }}</span></li>
<li class="list-group-item">
<strong>Last Updated On: </strong>
<span class="float-right">{{ $submission->updated_at->toDayDateTimeString() }}</span></li>
<li class="list-group-item">
<strong>Submitted On: </strong>
<span class="float-right">{{ $submission->created_at->toDayDateTimeString() }}</span>
</li></ul></div></div></div></div>
@endsection

136
CV CREW

137