Tahap Instalasi Xibo CMS 2.0.

Bahan software yang di butuhkan

a. Browser (Chrome, Firefox, dll)

b. Xampp v.3.2.4
untuk mengunduhnya silahkan kunjungi link berikut : https://www.apachefriends.org/.
Xampp tersebut sudah mendukung php versi 7.2.26 dan juga MariaDB
c. Xibo v.2.0.6
untuk mengunduhnya silahkan kunjungi link berikut :
https://github.com/xibosignage/xibo-cms/releases.

Langkah – langkah :

1. Instal Xampp v.7.2.26

a. Download Xampp v.7.2.26

b. Buka file
download
Xampp

Ketika di klik dua kali pada file akan tampil gambar seperti gambar di atas. Seperti
biasanya, klik next sampai proses penginstalaan berjalan seperti gambar di bawah.
 Tunggu sampai proses instalasi selesai. Setelah instalasi selesai akan tampil gambar
seperti gambar di bawah.

Setelah sampai pada langkah seperti gambar di atas, klik finish.

c. Buka control panel

Langkah selanjutnya buka control panel Xampp, seperti gambar di bawah.

 Ketika control panel telah terbuka, lalu klik start pada Module Apache dan MySQL.
Ketika modul telah berjalan maka aka nada tanda hijau pada module seperti gambar
di bawah.

Setelah proses berjalan, langkah selanjutnya adalah instalasi Xibo v.2.0.6

2. Instalasi Xibo v.2.0.6

a. Downoad Paket Xibo CMS v.2.0.6
Download dan ekstrak paket xibo 2.0.6, sepeti pada gambar di bawah.
Pindahkan ekstrasi Xibo 2.0.6 ke folder Xampp => htdocs. Lalu ganti nama folder
xibo-cms-2.0.6 menjadi xibo, agar lebih mudah dalam mengakses.
 Menjadi

Setelah selesai mengubah maka langkah selanjutnya kita buka control panel xampp.

b. Buka cpntrol panel xampp

Jika control panel xampp belum terbuka, maka buka dan pastikan module Apache dan
MySQL telah aktif seperti gambar di bawah.

Jika telah aktif, langkah selanjutnya kita buka browser.

c. Buka browser dan akses xibo melalui browser

Pada langkah ini saya memakai browser Chrome, tida ada ketentuan untuk harus
memakai chrome, semua tergantung kenyamanan anda mamkai browser apa.
Ketika tampil banyak folder seperti di atas maka klik pada folder web/ dan akan
tampil seperti gambar di bawah

Pada tampilan di atas terdapat item dan status, kita di haruskan memastikan semua
status pada tanda centang seperti gambar di bawah.
Pastikan semua status pada tanda centang, lalu klik next pada button di bawah
seperti.
d. Pembuatan databse Xibo
Sebelum meangkah ke tahap selanjutnya, kita buat database xibo pada localhost
dengan cara buka phpmyadmin seperti gambar di bawah.

Setelah itu kita buat data base dengan cara klik pada menu baru yang ada pada tab
kiri atas
Maka akan tampil form seperti gambar di bawah.

Isi form denga nama database yang akan d buat, di sini kami akan membuatnya denga
naa xibo. Setelah diisi klik buat, dan database akan tampil di tab kiri samping seperti
di bawah.

Stelah database selesai di buat kita masuk ke instalasi xibo yang tadi dan isikan form
yang terkait.
e. Proses Instalasi Xibo
Masuk pada instlasi xibo dan pilih tab Existing karena kita telah membuat database
xibo pada langkah sebelumnya. Dan isi sesuai dengan apa yang telah kita buat tadi
sepeti pada gambar di bawah ini.

Ketika data telah selesai, lalu klik next. Stelah langkah ini kita akan di mintai mengisi
nama username dan password untuk masuk pada xibo seterusnya.
 Isi sesuai yang anda inginkan, lalu klik lanjut.
Stelah itu, kita akan masuk di form penyimpanan file xibo, di sini buat folder di mana
pun lalu copy lokasi folder tersebut ke dalam form Lokasi Pustaka dan isikan Server
key sesuai dengan apa yang anda inginkan seperti gambar di bawah.

Lalu klik lanjut.

f. Instalasi berhasil
Ketika pada langkah telah seleai dan berhasil, maka akan tampil form login sepperti
gambar di bawah.
 g. Tampilan awal dasbord Xibo
Ketika telah berhasil login anda akan di tmpilkan dengan tamilan awal xibo seperti
gambar di bawah.

3. Masalah – masalah yang mungkin terjadi pada proses instalasi

a. SOAP Extension
 Gambaran masalah
Masalah ini terjadi karena adanya extensi kode yang belum di inputkan dalam file
config php.ini
 Penyelesaian
Buka file php.ini denga cara klik config di action Apache pada control panel
Xampp seperti gambar di bawah.

Klik dan pilih PHP(php.ini) seperti gambar di bawah.

 Buka dan cari kode ;extension=soap lalu hilangkan kode “ ; ” pada kode tersebut.
Setelah itu simpan file php.ini dan jalankan ulang module Apache.

b. Large file Upload

 Secara umum, gambaran masalah pada point ini sama sperti pada point A, cara
penyelesaian nya sama dengan point A, bedanya pada file.ini cari kode
upload_max_filesize=40M lalu ubah nilai menjadi 512 seperti gambar di
bawah.

 Secara umum, gambaran masalah pada point ini sama sperti pada point A, cara
penyelesaian nya sama dengan point A, bedanya pada file.ini cari kode
post_max_filesize=128M lalu ubah nilai menjadi 512 seperti gambar di
bawah.

Lalu simpan file php.ini dan jalankan ulang module Apache.

4. Pengoprasian xibo
a. Membuat layout
Pilih menu layout pada grup design  klik add layout

Ketika di klik add layout akan tampil tampilan seperti dibawah ini :

Keterangan :
 form nama untuk menamai layout.
 form tags untuk menandai layout ketika dicari.
 Form template digunakan untuk memilih template yang pernah digunakan
form ini boleh diisi atau tidak.
 form resolusi ini harus dipilih sesuai dengan layar yang akan digunakan untuk
menampilkan layout. Setelah semua form telah diisi maka klik save pada
kanan bawah.
Setelah klik save maka akan tampil tampilan seperti gambar di bawah.

Jika keluar notifikasi untuk checkout maka klik button checkout maka akan tampil
seperti gambar dibawah.

Pada pada gambar diatas terdapat tiga tab menu, tahap pertama yang berada di atas
kiri itu sebagai preview layout, pada tab yang kanan terdapat menu edit layout yang
berisi background color dan background image. Background color dapat digunakan
untuk mengubah warna pada background layout. Background image digunakan untuk
mengubah background layout menjadi gambar.

Untuk mengubah background image klik add a new background image pada menu
edit layout. Setelah diklik keluar tab file explore, kemudian pilih gambar yang ingin
anda gunakan. Ketika gambar telah ditemukan maka klik open pada battenfeld
Explorer, setelah itu akan tampil seperti gambar dibawah.
Di samping gambar terdapat form kosong dan dapat diisi nama gambar(optional).
Setelah dinamai klik button upload yang berwarna biru pada kanan form. Setelah
diklik upload lalu klik save maka akan tampil seperti gambar di bawah.

Tab yang ketiga berisi preview layout dan daftar region yang telah ditambahkan.
Seperti gambar dibawah :
Untuk menambah region klik menu tool pada fotbar tampilan xibo. Pada tab tool
terdapat set region, audio, empty dates, transition in, transition out, dan permission.
Seperti gambar dibawah :

Untuk menambahkan widget klik menu widget pada footbar tampilan xibo. Pada tab
widget, terdapat widget untuk menambah informasi pada xibo. Seperti gambar di
bawah :

Untuk mengedit posisi region, klik gambar dipojok kanan seperti gambar dibawah :
Maka akan tampil seperti gambar dibawah :

Klik pada region, maka akan tampil seperti gambar dibawah :

Untuk mengatur posisi region, ada dua cara yaitu :

 Dengan mengklik tombol pada tab positioning di menu region option
Kemudian edit posisi top, left dan width dari regionnya sesuai keinginan.
 Langsung dengan menggeser regionnya, yaitu arahkan kursor pada region di
pojok bawah pada region untuk mengatur ukuran dari region sedangkan untuk
menggeser dengan mengklik dua kali bada region dan kemudian tinggal
menggesernya.
Setelah selesai mengedit klik save. Untuk menambahkan region baru, klik add
dipojok kiri bawah seperti gambar dibawah ini :

Setelah diklik add maka akan muncul seperti gambar dibawah :

Untuk mengedit posisi region yang kedua dan seterusnya sama dengan yang pertama.
Disini kami menggunakan 5 region dan tampilannya menjadi seperti gamabar
dibawah ini :
Setelah pengeditan region selesai, langkah selanjutnya yaitu memasukkan widgets
dengan mengklik tab widgets kemudian tambahkan widgets dengan cara drag and
drop widgets pada region sesuai dengan keinginan.

Disini kami akan menggunakan widgets untuk memasukkan video, text dan jam.
Pertama kami memasukkan widgets video seperti gambar dibawah ini :
Setelah di drag and drop akan muncul pop up seperti gambar di bawah :

Di dalam pop up tersebut terdapat extensions video apa saja yang bisa diupload dan
ukuran maksimum dari video, klik add file untuk memilih file video. Setelah video
dipilih maka akan tampil seperti gambar dibawah ini :

Kemudian klik tombol upload yang dilingkari merah seperti gambar diatas. Setelah
berhasil terupload klik DONE.

Catatan : unutkukuran video diusahakan HD dengan resolusi 1280x720 pixel

Jika video sudah terupload dan ingin memakainnya kembali, tinggal kita buka view
library seperti gambar dibawah ini :

Setelah diklik view library maka akan muncul pop up seperti gambar dibawah ini :

Klik ikon (+) yang ada di sebelah kanan video yang dilingkari merah seperti pada
gambar diatas. Setelah diklik ikon (+) maka tinggal memilih region mana yang akan
diberi video tersebut
Setelah dipilih maka akan menjadi seperti gambar dibawah ini :

Setelah video berhasil diupload, sekarang kita akan memasukkan widgets untuk text
seperti gambar dibawah ini :

Setelah itu untuk mengedit teksnya klik pada ikon edit yang dilingkari merah seperti
gambar dibawah ini :
Setelah diklik akan muncul tampilan seperti dibawah ini :

Masukkan teks sesuai dengan keinginan dan jika ingin menambahkan effect tinggal
pindah pada tap effect yang ada dimenu edit text seperti gambar dibawah ini :

Setelah itu pilih effect yang diinginkan kemusian klik save.

Setelah menambahkan teks berhasil, kemudian kita masukkan widgets untuk
menambahkan gambar seperti dibawah ini :

Setelah di drag and drop, akan muncul pop up seperti gambar dibawah ini :

Di dalam pop up tersebut terdapat extensions untuk file gambar dan maksimum
ukuran gambar. Untuk memasukkan file gambar klik add file dan pilih gambar yang
diinginkan. Setalah gambar dipilih akan tampil seperti gambar dibawah ini :

Setelah itu klik ikon upload yang dilingkari merah seperti gambar diatas. Setealh
berhasil upload klik DONE.
Setelah selesai di atur semua, maka tinggal klik publish layout seperti gambar
dibawah ini :
b. Import file layout xibo (memasukkan template layout yang sudah ada)
Berikut ini cara untuk melakukan import layout yang sudah ada pada xibo

1. Siapkan file yang akan diimport ke xibo. File tersebut harus berfomat .zip
berikut ini contoh file yang dapat di import di xibo

2. Kemudian masuk pada jendel layout xibo  kemudian klik tombol import
pada pojok kanan atas

3. Pilih add zip file untukmemasukkan file zip yang sudah dipersiapkan tadi.
 4. Silahkan beri nama sesuai keinginan atau juga bisa dikosongi. Bila dikosongi
nama layout nanti akan sama seperti nama file import.

5. Kemudian pilih Start upload bila layout yang ingin import dalam jumlah
besar (lebih dari 1 layout). Dan bila layout yang ingin diimport hanya 1 maka
pilih botton upload yang berwarna biru terletak di samping ukuran file.

6. Kemudian pilih botton done disamping kanan bawah. Maka proses import
telah selesai.

5. Menghubungan Xibo Client dengan Cms Xibo

a. Pada sisi xibo Client (Client)
Download & Install xibo client. Untuk alamat download : https://xibo.org.uk/xibo-for-
windows

Bila sudah diinstall maka tampilan awal akan seperti berikut :

Keterangan :
 CMS Address : Alamat server CMS Xibo. Contohnya https://localhost
 Key : kunci yang dibuat oleh server CMS tujuannya supaya tidak
sembarangan client yang dapat terhubung. Pada tutorial diatas
Key yang dibuat adalah unp
 Local Library : Tempat menyimpan file-file Xibo yang akan
ditampilkan pada sisi Client. Siapkan satu folder kosong dan beri
nama file xibo pada Client. Isikan local library dengan alamat
folder yang telah dibuat sebelumnya. Contohnya : folder file xibo
diletakkan pada directory C:/ maka penulisannya pada local
library akan seperti ini : C:\file xibo

Kemudian pilih save

Setelah klik save maka ada beberapa masalah yang akan keluar :
 Xibo client siap dijalankan apabila tampilannya akan seperti berikut.

Langsung saja klik Launch Client

 Xibo client sedang menunggu izin dari server Xibo (CMS Xibo)

 CMS Address salah

 Key yang dimasukkan Salah

b. Pada sisi Server (CMS Xibo)
Masuk jendela display pada CMS Xibo. Maka tampilan awal jika terdapat
perangkat yang terhung akan seperti ini :

Di gambar diatas terdapat 1 perangkat yang sudah terhung namun belum

mendapat izin (authorised).

Untuk memberi izin klik botton dropdown yang terdapat pada row menu.

Jika menu dropdown sudah tampil pilih authorise.

Maka Perangkat sudah siap menerima Layout yang ingin ditampilkan Server.
6. Membuat Schedule (Penjadwalan) pada CMS Xibo (Server)
Pilih jendela schedule. Maka tampilan awal akan seperti berikut :

Pilih menu Add Event untuk membuat schedule

yang akan keluar seperti berikut :

Keterangan :
 Event type : Model tampilan yang akan ditampilkan di
client. Pilih campaign/layout
 Display : Perangkat yang akan menerima jadwal penayangan.
 Dayparting : Model waktu penayangan. Pilih custom
 Start time : Waktu start penayangan (mulai). Berisi
tanggal dan waktu.
 End time : Waktu end penayangan (pengakhiran).
Berisi tanggal dan waktu.
 Layout/campaign : layout mana yang akan ditampilkan.
 Run at CMS Time : jika Dicentang maka akan otomatis
terdapat waktu dalam tayangan xibo pada sisi client.

Klik Save untuk menyimpan pengaturan schedule penayangan Xibo.