This is an open access article under the CC BY SA license. (https://creativecommons.org/licenses/by-sa/4.0/) 393

## J-INTECH (Journal of Information and Technology)
Terakreditasi Kemendikbud SK No. 204/E/KPT/2022 E-ISSN: 2580-720X || P-ISSN: 2303-1425

## Middleware untuk Otomatisasi dan Sinkronisasi Digital Signage pada AplikasiXibo
Claradisha Helenora Dade 1 , Bagus Kristomoyo Kristanto 2 * 1,2 Sekolah Tinggi Informatika & Komputer Indonesia, Informatika, Malang, Indonesia
Informasi Artikel Abstrak Diterima: 08-01-2024 Direvisi: 17-01-2024 Diterbitkan: 19-01-2024 Aplikasi digital signage Xibo adalah salah satu platform yang digunakan untuk mengelola dan menampilkan konten multimedia pada layar digital. Namun, kompleksitas alur kerja dalam penggunaan Xibo seringkali menjadi hambatan. Dalam rangka mengatasi tantangan ini, penelitian ini memberi solusi yaitu, Xibo Middleware, sebuah aplikasi perantara berbasis website yang dikembangkan menggunakan PHP dan framework CodeIgniter 3. Xibo Middleware bertujuan untuk mengatasi masalah kompleksitas alur kerja dalam penggunaan Xibo. Fungsinya adalah sebagai jembatan antara pengguna dan Xibo API, dengan antarmuka yang lebih sederhana. Aplikasi ini dirancang untuk mempermudah manajemen konten hingga penjadwalan konten multimedia ke display dalam pengaplikasian digital signage . Fokus utama penelitian ini adalah pada penyederhanaan dan pengoptimalan penggunaan Xibo dalam manajemen konten digital signage. Kata Kunci Xibo, Digital Signage, Middleware, Aplikasi.
*Email Korespondensi: bagus.kristanto@stiki.ac.id

## Abstract
The Xibo digital signage application is a platform used to manage and display multimedia content on digital screens. However, the complexity of the workflow in using Xibo is often an obstacle. In order to overcome this challenge, this research provides a solution, namely, Xibo Middleware, a website-based intermediary application developed using PHP and the CodeIgniter 3 framework. Xibo Middleware aims to overcome the problem of workflow complexity in using Xibo. Its function is as a bridge between users and Xibo API, with a simpler interface. This application is designed to simplify content management and scheduling of multimedia content to display in digital signage applications. The main focus of this research is on the simplification and quality of using Xibo in digital signage content management.

## 1. Pendahuluan
Teknologi Komputer dan informasi saat ini memegang peranan yang penting bagi efektivitas pekerjaan, salah satunya dalam penyebaran informasi dan pesan. Penyampaian informasi yang akurat, cepat, dan menarik sangat membantu dalam menyampaikan informasi kepada khalayak ramai. Penyampaian yang akurat dan menarik akan membuat khalayak ramai tertarik untuk mendengarkan dan memperhatikan apa yang sedang disampaikan.
Di era modern seperti sekarang ini banyak penyampaian informasi yang menarik berupa video yang ditayang melalui TV plasma pada berbagai tempat, seperti di pusat perbelanjaan, Bandara, lingkungan kampus, dan masih banyak lagi. Untuk penayangan video ini digunakan cara manual dengan menggunakan flashdisk
maupun kabel HDMI yang disambungkan dengan TV ke Laptop. Hal ini menyebabkan kekurangan dalam hal efisiensi.
Digital signage hadir sebagai tren baru yang menawarkan sebuah teknologi, format, dan cara berpikir yang lebih kreatif untuk membantu dalam hal penyebaran informasi. Digital Signage adalah penafsiran yang luas dari suatu media baru yang mengambil alih media konvensional dengan aplikasi serta teknologi yang memiliki banyak variasi. (Fachrurrazi & Hizli, 2021) . Digital Signage mempunyai kemampuan dalam mengubah pesan, informasi, dan data secara visual serta terintegrasi. Hal ini memberikan pengalaman visual yang baru dan menyenangkan bagi orang yang melihat dimana pesan dan informasi disajikan dalam bentuk multimedia Informasi tersebut dikemas dalam bentuk gambar, video, teks berjalan, grafik, jadwal, berita, dan perkiraan cuaca. Semuanya disajikan secara dinamis melalui perangkat display elektronik seperti LCD TV, Monitor TV Plasma, Proyektor, dan Digital Billboard bahkan Mobile Phone. Dalam hal pengolahan data informasi dan pesan, digital signage memiliki kemampuan yang baik dalam menyusun playlist, merancang layout, mengelola sumber daya, dan mengatur jadwal tampil serta menampilkan informasi hanya pada layar tertentu yang sudah ditentukan sebelumnya. Fungsinya sebagai pengelola konten digital terprogram memungkinkan tampilan informasi atau pesan kepada target penonton dengan efisiensi, kecepatan, ketepatan, dan kehandalan.
Xibo merupakan sebuah aplikasi Digital Signage Open Source yang dikelola oleh organisasi yang dikenal sebagai Spring Signage. Berawal pada tahun 2004, Xibo mulanya merupakan sebuah inisiatif dari James Packer di lingkungan universitas (Garner, 2017) . Xibo diatur secara terpusat melalui sebuah antarmuka administrasi berbasis website dimana berfungsi sebagai sistem pengelolaan konten untuk mengatur berbagai jenis konten melalui web browser yang terhubung ke internet. Xibo sendiri. Xibo sendiri perlu di-install atau ditaruh ke dalam server sehingga konten dapat diakses oleh layar yang telah terhubung pada server. Konten atau informasi ini kemudian disebarkan melalui jaringan lokal atau internet ke berbagai perangkat yang terhubung, seperti TV, Proyektor, dan lainnya.
Menurut (Hantono, B. S., & Putra, G. D. ,2014) dan ( Achrurrazi, S., & Hizli, H. ,2021), Xibo memiliki banyak keunggulan sebagai open source untuk digital signage, tetapi dibalik itu xibo memiliki alur yang cukup panjang dan kompleks, dimulai dari mengunggah konten yang berupa media seperti gambar maupun video, menambahkan media pada playlist, membuat design layout, menghubungkan layout dengan playlist, mempublikasi layout, lalu menjadwalkan layout pada display atau Xibo Client yang telah terdaftar. Untuk itu perlu dilakukan pembelajaran tersendiri untuk mempelajari alur dari Xibo, dan hal ini membuat efisiensi maupun efektifitas dari Xibo berkurang, karena mengahabiskan banyak waktu dan juga tenaga.
Tujuan pembuatan middleware sebagai penghubung xibo dengan server dan beragam teknologi lain yang membuat proses implementasi digital signage lebih mudah dilakukan oleh pengguna. Middleware diperlukan diperlukan untuk menyederhanakan fungsionalitas dari Xibo dan menjembataninya dengan pengguna. Middleware adalah istilah yang merujuk pada perangkat lunak, khususnya aplikasi web, yang digunakan oleh berbagai aplikasi yang berbeda untuk berkomunikasi. Perangkat lunak ini memiliki peran penting dalam memungkinkan interaksi yang cerdas dan efisien antara aplikasi, mendorong inovasi yang lebih cepat. Middleware berperan sebagai penghubung antara beragam teknologi, alat, dan basis data, memungkinkan integrasi tanpa batas ke dalam satu sistem.

## 2. Metode Penelitian
Dalam penelitian ini, penulis melakukan analisis data menggunakan pendekatan kualitatif. Saryono (2010) menjelaskan bahwa penelitian kualitatif bertujuan untuk menginvestigasi, menemukan, menggambarkan, dan menjelaskan kualitas atau karakteristik dari pengaruh sosial yang tidak dapat dijelaskan, diukur, atau diuraikan melalui pendekatan kuantitatif. Data yang diperoleh dalam penelitian ini akan diorganisir secara sistematis berdasarkan hasil observasi, catatan lapangan, dan wawancara. Proses ini melibatkan pengelompokan data yang diperoleh, penyajian data dengan lebih rinci, pemilihan informasi yang relevan untuk diteliti lebih lanjut, serta pembuatan kesimpulan yang dapat dipahami dan bermanfaat.
Gambar 2. Alur pembuatan konten digital signage pada Middleware
Metodologi yang dipakai dalam pengembangan sistem ini adalah Software Development Life Cycle (SDLC) khususnya metode Waterfall. Model ini adalah pendekatan sistematis terhadap pengembangan perangkat lunak, yang terdiri dari beberapa tahapan, yakni Perencanaan, Analisis, Perancangan, Implementasi, dan Ujicoba. (Pressman, R.S.2015.)
 Planing, bagian awal dari proyek perangkat lunak. Pertama, mempersiapkan semua hal yang diperlukan untuk menyelesaikan proyek.
 Analysis, tahap ini melibatkan analisis semua aspek pembuatan proyek atau pengembangan perangkat lunak. Tujuan dari tahap ini adalah untuk memahami sistem saat ini, menemukan masalah, dan menemukan solusi.
 Design, tahap ini menerjemahkan data yang telah diperiksa ke dalam bentuk yang dapat dipahami oleh pengguna.
 Implementation dan Uji Coba, tahap ini meliputi pengujian sistem, program, atau aplikasi setelah penyelesaian pembuatan dan penerapan disebut implementasi dan pengujian..

## 3. Hasil dan Pembahasan

## 3. 1. Identifikasi Masalah
Dalam pengelolaan konten digital signage, ditemukan sejumlah permasalahan yang mempengaruhi penggunaan efektif aplikasi Xibo. Salah satu permasalahan utama terletak pada kompleksitas alur kerja yang diperlukan dalam proses pengelolaan konten. Alur kerja ini melibatkan serangkaian langkah yang kompleks, seperti mengunggah manual konten seperti gambar atau video, menyusun konten dalam playlist, mendesain layout yang menarik, menghubungkan layout dengan playlist yang sesuai, dan menjadwalkan tampilan pada perangkat pemutar Xibo. Pengguna juga menghadapi kesulitan dalam menjelajahi antarmuka Xibo, terutama karena struktur menu dan submenu yang rumit, sehingga menghambat kemudahan dalam menemukan fungsi yang diinginkan. Dampak dari permasalahan ini termasuk penurunan efisiensi dalam pengelolaan konten, potensi terjadinya kesalahan dalam mengatur tampilan, dan adanya rasa frustrasi di pihak pengguna.

## 3. 2. Pemecahan Masalah
Dalam menghadapi kerumitan alur kerja di aplikasi Xibo untuk pengelolaan konten digital signage, solusi yang ditawarkan meliputi pengembangan sebuah aplikasi middleware berbasis website. Aplikasi ini bertujuan untuk mengatasi kesulitan yang ditemui pengguna dalam langkah-langkah kompleks dalam Xibo. Dalam perbandingan dengan alur kerja pada aplikasi Xibo menurut (Garner,2017) , berikut adalah perbandingan langkah-langkah utama antara kedua xibo dan perancangan middlewarei:
a. Xibo

## b. Middleware
Dalam perbandingan diatas , dapat dilihat bahwa alur kerja yang diterapkan oleh Aplikasi Middleware terlihat lebih sederhana dan terpusat pada tahapan-tahapan inti. Hal ini berpotensi mengurangi kompleksitas yang dihadapi oleh pengguna dalam mengelola konten digital signage. Dengan mengeliminasi beberapa tahap yang ditemukan dalam Aplikasi Xibo.
Gambar 1. Alur pembuatan konten digital signage pada Xibo
This is an open access article under the CC BY SA license. (https://creativecommons.org/licenses/by-sa/4.0/) 396

## 3. 3. Perancangan Sistem

## 3.3.1 Alur Program
Gambar diatas merupakan gambaran dari pengguna berinteraksi dengan middleware melalui antarmuka pengguna. Middleware melakukan sinkronisasi awal dengan Xibo API untuk mengambil data awal dan menyimpannya dalam database middleware. Pengguna memberikan input yang akan divalidasi dan disimpan dalam database. Middleware melakukan sinkronisasi periodik (perbahuruan berkala) dengan Xibo API untuk memperbarui data di middleware berdasarkan perubahan yang terjadi di Xibo. Konten layout dikirimkan ke display sesuai dengan jadwal yang telah ditentukan. Middleware juga dapat melacak dan memantau penggunaan display. Data yang terkait dengan manajemen dan pengaturan lainnya juga disimpan dalam database middleware.

## 3.3.2 Activity Diagram
Activity diagram [ada gambar 4 berikut menunjukan langkah dari proses login oleh pengguna hingga mendapatkan access token dari Xibo API dan gambar 5 adalah langkah dari proses penambahan media baru oleh pengguna.
Gambar 3. Cara kerja Middleware Gambar 4. Diagram aktivitas Login dan permintaan access token Gambar 5. Diagram aktivitas penambahan media
This is an open access article under the CC BY SA license. (https://creativecommons.org/licenses/by-sa/4.0/) 397
Activity diagram pada gambar 6 diatas menunjukan langkah dari proses penambahan layout baru oleh pengguna. Activity diagram pada gambar 7 diatas menunjukan langkah dari proses penjadwalan event baru konten digital signage oleh pengguna.

## 3. 4. Implementasi

## 3.4.1. Spesifikasi Produk
3.4.2. Bahasa Pemrograman : PHP 3.4.3. Framework : CodeIgniter 3.4.4. Text Editor : Visual Studio Code 3.4.5. Browser : Google Chrome 3.4.6. API testing : Postman

## 3.4.7. Implementasi Database
Implementasi database pada penelitian ini menggunakan database Management System (DBMS) MySQL yang tergambar sebagai berikut:
Gambar 6. Diagram aktivitas penambahan layout
Gambar 7. Diagram aktivtas pembuatan event baru
Gambar 8. Diagram aktivtas pembuatan event baru

## 3.4.8. Implementasi Program
1. Autentikasi.
Dibuat pada controller AuthController.php untuk mendapatkan access token pada dari Xibo, yang nantinya digunakan untuk authorisasi pada setiap pemanggilan endpoint.
2. Media Digunakan S3 cloud storage sebagai media penyimpnan. Untuk media berupa gambar menggunakan fungsi ‘UploadImage’, untuk memanggilnya pada controller digunakan objek ‘$This->S3”. Fungsi ini menerima file yang diunggah dari form bernama 'mediaFile' dan kemudian mengunggahnya ke penyimpanan S3 menggunakan objek S3. Kemudian menggunakan ‘cUrl’ untuk membuat permintaan ‘HTTP POST’ ke Xibo. Pada ‘CURLOPT_POSTFIELDS’ data di kirim dalam bentuk permintaan ‘POST’. Data yang dikirim berisi URL gambar (url), tipe gambar (type), dan nama gambar opsional (optionalName). rawurlencode() digunakan untuk mengkodekan URL gambar untuk dikirimkan dalam permintaan. Dan untuk authorization dengan Xibo di atur pada ‘CURLOPT_HTTPHEADER’ menggunakan session ‘$This – session – userdata(‘access_token’)’.

## Gambar 9. Login dan autentikasi dengan Xibo API
Gambar 10. Unggah Media
Gambar 13. Full Calender

## 3. Layout
Dibuat pada DesignLayoutController, sebagai tempat peletakan media pada layout agar dapat di tayangkan. Untuk memasukan media pada layout yang diinginkan, terlebih dahulu dilakukan pemanggilan media dari Xibo API dengan HTTP Request GET. Kemudian menggunakan perulangan foreach untuk mengiterasi setiap elemen dalam variabel ‘$name’. Hanya data dengan tipe media ‘image’ atau ‘video’ yang akan diambil dan ditampilkan sebagai opsi dalam dropdown list.
4. Scheedule
Dibuat pada ScheduleController, untuk mendapatkan data Event dengan menggunakan HTTP Reqest GET.
Gambar 12. GET Event
‘response’ yang diperoleh saat melakukan pemanggilan pemanggilan API diubah dengan json_decode untuk menjadi bentuk objek PHP. Menggunakan pengulangan foreach dalam melakukan iterasi objek ‘result’ untuk mengambil nilai ‘title’, ‘fromDt’, ‘toDt’ yang akan digunakan se bagai judul dan tanggal awal dan akhir event. Kemudia menggunakan Full Calender untuk menampilkan Event sesuai jadwal tayang yang telah dibuat oleh pengguna.

## Gambar 11. Media to Layout

## 3. 5. Uji Coba
Bagian ini menjelaskan tentang ujicoba yang dilakukan terhadap produk yang dihasilkan. Ujicoba software dapat dilakukan pada lingkungan yang sebenarnya maupun dengan menggunakan metode backbox testing.

## Tabel 1. Hasil Uji coba
No Skenario Uji Tindakan Ekspektasi Hasil Status Uji 1 Login dan Autentikasi dengan Xibo API Memasukkan informasi login valid Pengguna berhasil masuk ke aplikasi, dan mendapatkan akses token, yang bisa digunakan setiap kali melalukan pemanggilan endpoint API Berhasil Memasukkan informasi login tidak valid Pengguna gagal masuk, pesan kesalahan. Gagal 2 Manajemen Media Menambahkan media gambar baru Media gambar berhasil ditambahkan Berhasil Menambahkan media video baru Media video berhasil ditambahkan Berhasil Menghapus media Media berhasil dihapus Berhasil Melihat daftar media dalam tabel Daftar media ditampilkan dengan benar Berhasil 3 Manajemen Layout Membuat layout baru Layout baru berhasil dibuat Berhasil Menambahkan media atau widget ke layout Media/widget berhasil ditambahkan Berhasil Mengubah status layout menjadi publish Layout berhasil dipublikasikan Berhasil Mengubah status layout menjadi draft Layout berhasil diubah menjadi draft Berhasil Menghapus layout Layout berhasil dihapus Berhasil Melihat daftar layout dalam tabel Daftar layout ditampilkan dengan benar Berhasi 4 Manajemen Jadwal (Schedule) Melihat jadwal event yang telah dibuat Jadwal event ditampilkan dengan benar Berhasil Membuat jadwal baru Jadwal baru berhasil dibuat Berhasil

## 4. Kesimpulan
Berdasarkan hasil pengerjaan Tugas Akhir ini, penulis menyimpulkan bahwa penelitian ini berhasil mencapai tujuannya dalam mengembangkan aplikasi middleware yang efisien sebagai alternatif untuk meningkatkan pengelolaan layout digital signage. Implementasi middleware ini membawa manfaat signifikan dengan menyederhanakan langkah-langkah dalam proses pembuatan konten hingga penayangan konten.
This is an open access article under the CC BY SA license. (https://creativecommons.org/licenses/by-sa/4.0/) 401
Pengembangan aplikasi Xibo Middleware perlu pengembangan lanjutan dari middleware ini, diantaranya adalah :
1. Pengembangan fitur design, yang memungkinkan pengguna dapat melihat preview dari layout yang di buatnya.
2. Penambahan fitur manajemen display dari middleware.
3. Penambahan fitur menejemen user dengan register.

## 5. Referensi
Ariawan, K. U. (2016). Unjuk Kerja Aplikasi Digital Signage XIBO Pada Proses Pembuatan Papan Pengumuman Digital Di Jurusan Teknik Elektro. Jurnal Pendidikan Teknologi dan Kejuruan , 50-60.
Bauer, C., Garaus, M., Strauss, C., & Wagner, U. (2018). Research Directions for Digital Signage Systems in Retail. Procedia Computer Science , 503-506.
Fachrurrazi, S., & Hizli, H. (2021). Digital Signage Sebagai Media Layanan Informasi. Jurnal Sistem Informasi , 33-43.
Garner, D. (2017). What Is Xibo? | Xibo Open Source Digital Signage.
Hantono, B. S., & Putra, G. D. (2014). Analisis Unjuk Kerja Aplikasi Digital Signage XIBO Pada Single Board Computer Raspberry Pi. Seminar Nasional Teknologi Informasi dan Multimedia , 1.14-23-1.14-28.
Khaere, R., & Taylor, R. N. (2004). Extending the Representational State Transfer (REST) Architectural Style for Decentralized Systems. International Conference on Software Engineering , 428–437.
Kurniawan, D., Bhawiyuga, A., & Siregar, R. A. (2018). Pengembangan Perangkat Middleware Web of Things (WoT) Berbasis Arsitektir Publish Subscribe Menggunakan Protokol REST HTTP. Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer , 4966-4974.
Laudon, K. C., & Laudon, J. P. (2016). Management Information Systems: Managing the Digital Firm. Pearson .
Ningrum, K. P. (2022). Digital Signage : Makna, Strategi Pembuatan Pesan, Dan Implementasi Oleh Dentsu Agency. Media Bahasa, Sastra, dan Budaya Wahana .
Paramitha, I. A., Wiharta, D. M., & Arsa, I. M. (2022). Perancangan dan Implementasi RESTful API pada Sistem Informasi Manajemen Dosen Universitas Udayana. Jurnal SPEKTRUM , 15-23.
Risamena, V. J., Anasthasia, K. I., & Wirastuti, N. M. (2013). Penyisipan Konten Elektro News Menggunakan XIBO Digital Signage. Prosiding Conference on Smart-Green Technology in Electrical and Information System Bali , 109-113.
Pressman, R.S.2015. Rekayasa Perangkat Lunak: Pendekatan Praktisi Buku I. Yogtakarta : Andi
Rochimah, S., & Bowo, K. A. (2006). Perangkat Lunak 'Digital Signage Manager'. Jurnal Ilmiah Teknologi Informasi , 66 – 72.
Rusdan, M., & Damayanti, S. E. (2017). Implementasi Sistem Digital Signage Menggunakan Aplikasi Open Source Xibo-Digital Signage (Studi Kasus : Universitas Widyatama). CITISEE , 327-332.
Wardhana, W. G., Arwani, I., & Rahayudi, B. (2020). Implementation Teknologi Restful Web Service Dalam Pengembangan Sistem Informasi Perekaman Prestasi Mahasiswa Berbasis Website (Studi Kasus: Fakultas Teknologi Pertanian Universitas Brawijaya). Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer , 680-689.
Wijaya, D. R. (2013). Pengembangan Layanan Digital Signage Untuk Penyebaran. Digital Information & Systems Conference .
Wijaya, T. (2017). Perancangan Middleware Untuk Menghubungkan Sistem Informasi Dagang dengan Aplikasi E-Faktur Dari Direktorat Jendral Pajak. CCIT , 35-45.