JOURNAL OF TECHNOLOGY INFORMATION DOI: https://doi.org/10.37365/jti.v5i2.69

## PENGEMBANGAN APLIKASI WEB BERBASIS FLEXBOX UNTUK PENGELOLAAN JADWAL PRODUKSI DAN DOKUMEN DIGITAL MENGGUNAKAN FRAMEWORK BULMA DI PT. GRAMEDIA

## Goldie Gunadi
Program Studi Teknik Informatika STMIK Widuri Jakarta, Indonesia E-mail: send2goldie@gmail.com
Submission date: 2020-05-02
Accepted date: 2020-05-11

## ABSTRACT
PT. Gramedia is the largest printing service provider company in Indonesia. Besides in Jakarta, PT. Gramedia also opened several branches / sites in several regions, namely: Cikarang, Bandung, Surabaya, Medan, Bawen, Bali, Makassar and Palembang. The problem in this research is the process of delivering production schedule information and sending digital documents which are still carried out by production administration officers using fax machines, electronic mail (e-mail) and also messaging applications such as whatsapp. So that the production process at each site can run and well-coordinated applications are needed that can handle the production process and digital documents in PDF format that are needed as supporting information for centralized production. The application made consists of flexbox-based web applications and can be accessed by every user quickly and easily. The  Bulma  framework  is  needed  so  that  the  web  application  development  process  becomes  faster  and  more efficient, because Bulma provides various libraries and web application components needed. The resulting web application can solve the problem of PT. Gramedia, easy to use, has a responsive display with an attractive layout and has compatibility with various mobile devices in use today.
Keywords: Web Application, Bulma Framework, Flexbox, Responsive

## ABSTRAK
PT. Gramedia adalah sebuah perusahaan penyedia jasa cetak yang terbesar di Indonesia.  Selain di Jakarta, PT. Gramedia juga membuka sejumlah cabang/site di beberapa daerah, yaitu : Cikarang, Bandung, Surabaya, Medan, Bawen, Bali, Makassar dan Palembang. Permasalahan dalam penelitian ini ialah proses penyampaian informasi jadwal  produksi  dan  pengiriman  dokumen  digital  masih  dilakukan  secara  menual  oleh  petugas  administrasi produksi menggunakan mesin fax, surat elektronik (e-mail) dan juga aplikasi pengiriman pesan seperti whatsapp. Agar proses produksi di setiap site dapat berjalan dan terkoordinasi dengan baik dibutuhkan sebuah aplikasi yang dapat  mengelola  jadwal  proses  produksi  dan  dokumen-dokumen  digital  dengan  format  PDF  yang  diperlukan sebagai informasi pendukung produksi secara terpusat. Aplikasi yang dibuat berupa aplikasi web yang berbasis flexbox  dan dapat  diakses  oleh  setiap pengguna  dengan  cepat  dan  mudah.  Framework  Bulma  diperlukan agar proses pengembangan aplikasi web menjadi lebih cepat dan efisien, karena Bulma menyediakan berbagai pustaka dan  komponen-komponen  aplikasi  web  yang  dibutuhkan.  Aplikasi  web  yang  dihasilkan  dapat  mengatasi permasalahan PT. Gramedia, mudah digunakan, memiliki tampilan yang responsif dengan layout yang menarik serta memiliki kompatibilitas dengan berbagai perangkat mobile yang digunakan saat ini.
Kata Kunci: Aplikasi Web, Framework Bulma, Flexbox, Responsif

## PENDAHULUAN
Didirikan  pada  tahun 1972  sebagai  salah satu unit bisnis Kompas Gramedia, PT. Gramedia telah  membuktikan  dirinya  sebagai  salah  satu perusahaan  penyedia  jasa  cetak  terkemuka  di Indonesia.
PT. Gramedia yang kini lebih dikenal dengan nama Gramedia Printing terus mengembangkan bisnisnya,  baik  di  Indonesia  maupun  di  pasar Internasional.  Berbagai  jenis  produk  cetak  yang dihasilkan  oleh  PT.  Gramedia  diantaranya  adalah berupa  surat  kabar/koran,  tabloid,  majalah,  buku, material promosi dan lain-lain.
JOURNAL OF TECHNOLOGY INFORMATION DOI: https://doi.org/10.37365/jti.v5i2.69
PT.  Gramedia  berpusat  di  Palmerah, Jakarta dan untuk memenuhi kebutuhan konsumennya,  PT.  Gramedia  juga  membuka sejumlah  cabang/site  di  beberapa  daerah,  yaitu:
Cikarang,  Bandung,  Surabaya,  Medan,  Bawen,
Bali, Makassar dan Palembang.
Permasalahannya adalah, proses penyampaian  informasi  jadwal  produksi  dan pengiriman  dokumen  digital  masih  dilakukan secara menual  oleh  petugas administrasi  produksi menggunakan mesin fax, surat elektronik (e-mail) dan  juga  aplikasi  pengiriman  pesan  seperti whatsapp. Hal ini mengakibatkan proses pengendalian  dan  pengelolaan  terhadap  informasi jadwal serta dokumen-dokumen digital pendukung proses  produksi  tersebut  menjadi  sulit  karena dikelola  oleh  masing-masing  site  secara  terpisah.
Proses  tersebut  akan  menjadi  lebih  lama  apabila terdapat revisi terhadap jadwal dan/atau informasi produksi  serta  permintaan  ulang  data/informasi dari  site  ke  pusat.  Untuk  mengatasi  hal  tersebut diperlukan  sebuah  aplikasi  yang  dapat  mengelola jadwal  produksi  dan  dokumen-dokumen  digital pendukung  produksi  yang  diperlukan  oleh  setiap site. Site dapat melihat jadwal dan juga informasi produksi setiap saat secara cepat dan dimana saja. Dokumen-dokumen digital disajikan dalam bentuk dokumen PDF sehingga dapat mudah diakses oleh setiap perangkat baik PC maupun laptop/notebook.
Tujuan dari penelitian ini untuk memastikan  proses  produksi  berjalan  sesuai dengan  permintaan  konsumen,  percetakan  pusat (Jakarta)  akan  melakukan  penjadwalan  proses produksi dan mendistribusikan data atau informasi konfigurasi halaman cetak dan surat perintah kerja (SPK)  produksi  yang  berupa  dokumen  digital  ke masing-masing site yang memerlukannya.
Framework Bulma adalah sebuah framework  CSS  yang  dapat  digunakan  untuk membuat sebuah aplikasi website berbasis flexbox ( flexible  box )  secara  mudah  dan  cepat  karena framework  tesebut  menyediakan  berbagai  macam komponen serta fitur-fitur yang dibutuhkan dalam pembuatan  website.  Penggunaan  framework Bulma  diharapkan  dapat  mempercepat  proses pembuatan  aplikasi  penjadwalan  dan  pengelolaan dokumen digital proses produksi yang dibutuhkan oleh PT. Gramedia, disamping itu juga menjadikan tampilan  aplikasi  lebih  menarik,  responsif  serta mudah  digunakan  oleh  pemakai  (Sidik,  n.d.) (Somya & Nathanael, 2019).

## METODE PENELITIAN
Unified  Modeling  Language (UML) adalah  suatu  bahasa  yang  digunakan  untuk menentukan, memvisualisasikan, membangun, dan mendokumentasikan  suatu  sistem  informasi  atau
perangkat  lunak.  UML  dikembangkan  sebagai suatu  alat  untuk  analisis  dan  desain  berorientasi objek (James Rumbaugh, Ivar Jacobson, 1999).
UML  adalah  himpunan  struktur  dan teknik untuk pemodelan desain program berorientasi  objek  (OOP)  serta  aplikasinya  (Sani, 2018).
UML adalah metodologi untuk mengembangkan  sistem  OOP  dan  sekelompok perangkat  tool  untuk  mendukung  pengembangan sistem  tersebut.  UML  mulai  diperkenalkan  oleh Object  Management  Group ,  sebuah  organisasi yang telah mengembangkan model, teknologi, dan standar OOP sejak tahun 1980-an. Sekarang UML sudah  mulai  banyak  digunakan  oleh  para  praktisi OOP. UML merupakan dasar bagi perangkat ( tool ) desain  berorientasi  objek  dari  IBM.  Namun demikian UML dapat digunakan untuk memahami dan  mendokumentasikan  setiap  sisteminformasi. Penggunaan UML dalam industri terus meningkat. Ini merupakan standar terbuka yang menjadikannya  sebagai  bahasa  pemodelan  yang umum dalam  industri peranti lunak dan pengembangan sistem (Munawar, 2018).
Sebuah aktivitas dapat direalisasikan oleh satu use case atau lebih. Aktivitas menggambarkan proses  yang  berjalan,  sementara use  case menggambarkan  bagaimana  aktor  menggunakan sistem  untuk  melakukan  aktivitas. Decision digunakan untuk menggambarkan  behaviour  pada kondisi  tertentu.  Untuk  mengilustrasikan  proses- proses  paralel  ( fork dan join )  digunakan  titik sinkronisasi  yang  dapat  berupa  titik,  garis horizontal  atau  vertikal.  Diagram  Activity  dapat dibagi  menjadi  beberapa object  swimlane untuk menggambarkan  objek  mana  yang  bertanggung jawab untuk aktivitas tertentu.

## HASIL DAN PEMBAHASAN
Berikut  adalah  hasil  dari  proses  analisa dan pengambangan perangkat lunak

## Identifikasi Kebutuhan Pengguna
Berikut adalah kebutuhan fungsional dan non fungsional perangkat lunak :
1. Kebutuhan Fungsional
a. Terdapat prose login dan logout pengguna.
b. Terdapat  2  tipe  pengguna,  yaitu  :  pengguna biasa dan administrator.
c. Pengguna  biasa  dan  administrator  dapat melihat planboard dan melihat file digital.
d. Administrator  dapat  mengelola  jadwal  mesin dan dokumen digital.
e. Administrator  dapat  mengelola  master  data  : site, mesin, produk dan pengguna
2. Kebutuhan Non Fungsional
a. Menggunakan DBMS : SQL Server 2008.

## JOURNAL OF TECHNOLOGY INFORMATION
DOI: https://doi.org/10.37365/jti.v5i2.69
b. Aplikasi  berbasis  web  menggunakan  bahasa pemrograman PHP dan Apache Web Server.
c. Dapat diakses menggunakan komputer desktop maupun laptop.
d. Dapat  dijalankan  menggunakan  browser Google Chrome dan Mozilla Firefox.
e. Data  digital  dalam  bentuk  dokumen  format PDF  dan  dapat  diakses/ditampilkan  melalui browser.
f. Menggunakan  arsitektur  JSON  dalam  proses pengiriman data yang berasal dari basis data ke halaman tampilan web.
g. Tampilan  halaman  web  yang  responsif  dan mudah digunakan.

## Rancangan Diagram UML
1. Diagram Use Case
Sumber : (Goldie Gunadi, 2019) Gambar 1. Diagram Use Case
2. Diagram Activity
a. Diagram Activity Planboard
b. Diagram Activity Kelola Jadwal Mesin
Sumber : (Goldie Gunadi, 2019)
Gambar 3. Diagram Activity Kelola Jadwal Mesin
c. Diagram Activity Lihat File Digital
Sumber : (Goldie Gunadi, 2019) Gambar 4. Diagram Activity Lihat  File Digital

## JOURNAL OF TECHNOLOGY INFORMATION
DOI: https://doi.org/10.37365/jti.v5i2.69

## d. Diagram Activity Kelola File Digital
Sumber : (Goldie Gunadi, 2019) Gambar 5. Diagram Lihat Kelola File Digital

## 3. Diagram Sequence
Sumber : (Goldie Gunadi, 2019) Gambar 6. Diagram Sequence Planboard
a. Diagram Sequence Lihat File Digital
Sumber : (Goldie Gunadi, 2019) Gambar 7. Diagram Sequence Lihat File Digital
b. Diagram Sequence Kelola Jadwal Mesin
Sumber : (Goldie Gunadi, 2019) Gambar 8. Diagram Sequence Lihat File Digital
c. Diagram Sequence Kelola File Digital
Sumber : (Goldie Gunadi, 2019) Gambar 9. Diagram Sequence Kelola File Digital
Diagram Relasi Basis Data
Sumber : (Goldie Gunadi, 2019) Gambar 10. ERD

## JOURNAL OF TECHNOLOGY INFORMATION
DOI: https://doi.org/10.37365/jti.v5i2.69
Tampilan Login
Sumber : (Goldie Gunadi, 2019) Gambar 11. Tampilan Antarmuka Login Pengguna

## Tampilan Menu Utama
Sumber : (Goldie Gunadi, 2019) Gambar 12. Tampilan Antarmuka Menu Utama
Tampilan Planboard

## Pengujian Aplikasi
Pengujian  aplikasi  dilakukan  dengan menggunakan metode Black Box.
Pengujian Login Tabel 1. Hasil Pengujian Login Skenario Pengujian Hasil Diharapkan Hasil Pengujian Uji login sukses Login berhasil masuk ke halaman plaboard Sudah Sesuai Uji login gagal Login gagal, tampilkan konfirmasi. Sudah Sesuai
Sumber :(Goldie Gunadi, 2019)
Pengujian Planboard Tabel 2. Hasil Pengujian Planboard Skenario Pengujian Hasil Diharapkan Hasil Pengujian Tampilkan Planboard Tampilan planboard berdasarkan tanggal dan site default terpilih. Sudah Sesuai Filter planboard berdasarkan tanggal dan site Tampilan planboard berdasarkan filter tanggal dan site. Sudah Sesuai Pilih Produk pada planboard untuk menampilkan File Digital Tampilan halaman yang berisi tampilan file digital untuk produk yang dipilih. Sudah Sesuai

## Sumber : (Goldie Gunadi, 2019)

## Pengujian Lihat File Digital
Tabel 3. Hasil Pengujian Lihat File Digital Skenario Pengujian Hasil Diharapkan Hasil Pengujian Menampilkan setiap dokumen digital PDF sesuai  produk yang dipilih pada planboard Tampilan dokumen digital sesuai dengan produk yang terpilih pada planboard.. Tampilan file digital dalam bentuk PDF. Sudah Sesuai Sumber :  (Goldie Gunadi, 2019) Pengujian Jadwal Mesin
Tabel 4. Hasil Pengujian Jadwal Mesin
Sumber : (Goldie Gunadi, 2019) Gambar 13. Tampilan Antarmuka Planboard Skenario Pengujian Hasil Diharapkan Hasil Pengujian Tampilkan Jadwal Mesin Tampilan jadwal mesin berdasarkan tanggal dan site default terpilih. Sudah Sesuai

## JOURNAL OF TECHNOLOGY INFORMATION
DOI: https://doi.org/10.37365/jti.v5i2.69
Filter jadwal mesin berdasarkan tanggal dan site Tampilan jadwal mesin berdasarkan filter tanggal dan site.
Sudah Sesuai Menambahkan jadwal mesin Jadwal mesin ditambahkan ke dalam basis data. Tampilan jadwal mesin diperbaharui. Menampilkan konfirmasi. Sudah
Sesuai
Menghapus jadwal mesin Jadwal mesin dihapus dari dalam basis data. Dokumen digital yang berhubungan dengan
jadwal tersebut juga dihapus.Tampilan jadwal mesin diperbaharui. Menampilkan konfirmasi. Sudah Sesuai
Melakukan upload dokumen digital produk terpilih pada jadwal mesin dalam bentuk PDF. Dokumen digital berhasil disimpan. Pembaharuan data jadwal mesin pada basis data. Tampilan jadwal mesin diperbaharui. Menampilkan konfirmasi.
Sudah
Sesuai Menghapus dokumen digital produk terpilih pada jadwal mesin. Dokumen digital berhasil dihapus. Pembaharuan data jadwal mesin pada basis data. Tampilan jadwal mesin diperbaharui. Menampilkan konfirmasi. Sudah Sesuai Menampilkan dokumen digital produk terpilih pada jadwal mesin. Dokumen digital ditampilkan pada halaman baru. Sudah Sesuai Sumber : (Goldie Gunadi, 2019) Pengujian Kelola Data Master (Data Site, Data

## Mesin, Data Produk, Data Pengguna)
Tabel 5 Hasil Pengujian Jadwal Mesin Skenario Pengujian Hasil Diharapkan Hasil Pengujian Tampilkan Kelola Data. Menampilkan data dari basis data. Menampilkan konfirmasi. Sudah Sesuai Menambahkan Data Site Menampilkan  Form Input. Sudah Sesuai
Menyimpan  data  ke dalam basis data. Tampilan  Data  Site diperbaharui. Menampilkan konfirmasi. Mengubah Data Site. Menampilkan  Form Edit. Memperbaharui  data dalam basis data. Tampilan Data diperbaharui. Menampilkan konfirmasi. Sudah Sesuai Menghapus Data Site. Menghapus data dalam basis data. Tampilan Data diperbaharui. Menampilkan konfirmasi. Sudah Sesuai
Sumber : (Goldie Gunadi, 2019)

## KESIMPULAN
Kesimpulan  pengambangan  aplikasi  web berbasis  flexbox  untuk  pengelolaan  jadwal produksi dan dokumen digital, diantaranya:
Aplikasi  web  berbasis  flexbox  memiliki tampilan  yang  lebih  interaktif  dan  mudah digunakan  serta  dapat  diakses  oleh  perangkat  PC maupun  laptop/notebook  sehingga mempermudah pengguna  dalam  mengelola  dan  melihat  jadwal produksi  maupun  dokumen  digital.  Penggunaan framework  Bulma  menjadikan  proses  pembuatan aplikasi  lebih  cepat  dan  mudah  dan  tampilan aplikasi  menjadi  lebih  menarik  dan  responsif. Metode  pertukaran  data  dengan  format  JSON digunakan  untuk  menyajikan  data  yang  diperoleh dari  basis  data  SQL  Server  ke  tampilan  aplikasi. Membuat  aplikasi  web  menjadi  lebih  terstruktur dan  mudah  dikelola.  Dengan  adanya  aplikasi  ini mempermudah  proses  pengelolaan  dokumen digital  dengan  format  PDF  menjadi  lebih  mudah, cepat  dan  efisien.  Dan  Applikasi  dibuat  dengan menggunakan dua hak akses yakni untuk pengguna biasa  dan  administrator,  dimana  masing-masing memiliki  fungsi  atau  kewenangan  yang  berbeda, hal ini diperlukan dari sisi keamanan data.

## DAFTAR PUSTAKA
Goldie  Gunadi.  (2019). Pengembangan  Aplikasi Web  Berbasis  Flexbox  Untuk  Pengelolaan Jadwal  Produksi  Dan  Dokumen  Digital Menggunakan  Framework  Bulma  DI  PT.
GRAMEDIA .
James  Rumbaugh,  Ivar  Jacobson,    and  G.  B. (1999). The  Unified  Modeling  Language Reference Manual . Addison.

## JOURNAL OF TECHNOLOGY INFORMATION
DOI: https://doi.org/10.37365/jti.v5i2.69
Munawar.  (2018). Analisis  Perancangan  Sistem Berorientasi  Objek  dengan  UML (1st  ed.). Informatika. Sani, A. (2018). Analisa Penjualan Retail Dengan Metode Association  Rule  Untuk  Association
Rule Untuk Pengambilan Keputusan
Strategis Perusahaan : 2 (June 2016), 34–50.
Sidik,  B.  (n.d.).  Pemrograman  Web  dengan  PHP.
In 2012 . Informatika.
Somya,  R.,  &  Nathanael,  T.  M.  E.  (2019). Pengembangan  Sistem  Informasi  Pelatihan Berbasis Web Menggunakan Teknologi Web Service  Dan  Framework  Laravel. Jurnal
Techno  Nusa  Mandiri , 16 (1),  51–58. https://doi.org/10.33480/techno.v16i1.164

## JOURNAL OF TECHNOLOGY INFORMATION
DOI: https://doi.org/10.37365/jti.v5i2.69