Jumat, 22 Januari 2016
Kamis, 21 Januari 2016
Rabu, 20 Januari 2016
Pengenalan w3.CSS Animate
Dengan animasi W3.CSS Anda dapat meluncur dan memudar dalam elemen HTML.
Slide di Elements
Slide dalam elemen dari atas, bawah, kiri atau kanan layar dengan w3-animate- kelas *:Kelas | mendefinisikan | |
---|---|---|
w3-bernyawa-top | Menjiwai elemen 300px dari atas layar ke 0px | Cobalah |
w3-bernyawa-bottom | Menjiwai elemen 300px dari bagian bawah layar untuk 0px | Cobalah |
w3-bernyawa-kiri | Menjiwai elemen 300px dari kiri layar untuk 0px | Cobalah |
w3-bernyawa-benar | Menjiwai elemen 300px dari kanan layar untuk 0px | Cobalah |
Fade di Elements
Memudar dalam elemen dengan kelas w3-bernyawa-opacity:Zoom di Elements
Memperbesar elemen dengan kelas w3-bernyawa-zoom:Elemen berputar
Berputar setiap elemen 360 derajat dengan kelas w3-spin:memudar Tak Terbatas
Contoh
<div class="w3-animate-fading">..</div>
Cobalah sendiri "Selebihnya kamu belajar sendiri di documentasi resminya http://www.w3schools.com/
Selasa, 19 Januari 2016
Pengenalan W3.CSS Badges
Tokyo 6
London 8
Komentar Selengkapnya Kemudian!
KEADAAN DARURAT
RUN BUAT APA!
London 8
Contoh
<p>Tokyo <span class="w3-badge
w3-red">6</span></p>
<p>London <span class="w3-badge
w3-teal">8</span></p>
Cobalah sendiri " Menampilkan Tag sebagai Masuk
Kebun Binatang London
Menampilkan Tag di Row a
S
SEBUAH
L
E
Contoh
<div class="w3-tag w3-red">S</div>
<div class="w3-tag w3-black" >A</div>
<div
class="w3-tag w3-yellow">L</div>
<div class="w3-tag w3-black">E</div>
Cobalah sendiri " menampilkan Tag
Berita Bagian New!Komentar Selengkapnya Kemudian!
Contoh
<p>News Section <span class="w3-tag w3-yellow">New!</span></p>
<p>Comments <span
class="w3-tag w3-teal">More Later!</span></p>
Cobalah sendiri " Menampilkan Tanda Jalan
Falcon Ridge Parkway
Contoh
<div class="w3-tag w3-round w3-green" style="padding:3px 3px">
<div
class="w3-tag w3-round w3-green" style="border:1px solid white">
Falcon
Ridge Parkway
</div>
</div>
Cobalah sendiri " Menampilkan Tags Besar
66Contoh
<span class="w3-tag w3-jumbo w3-padding-large w3-blue">66</span>
<div class="w3-tag w3-red">
<span class="w3-jumbo">49</span><span
class="w3-xlarge">,99</span>
</div>
Cobalah sendiri " Menampilkan Lencana Besar
66Menampilkan Tanda Besar
DALAM KASUSKEADAAN DARURAT
RUN BUAT APA!
Contoh
<span class="w3-tag w3-xxlarge w3-padding w3-orange w3-center">
IN CASE OF<br>
EMERGENCY<br>
RUN LIKE HELL !
</span>
Cobalah sendiri "
Selebihnya kamu belajar sendiri di documentasi resminya http://www.w3schools.com/
Senin, 18 Januari 2016
Pengenalan w3.CSS
Apa W3.CSS?
W3.CSS adalah kerangka CSS kecil, cepat, dan modern dengan built-in responsif.
Untuk menggunakan W3.CSS di situs web Anda, hanya menambahkan link ke "w3.css" dari halaman web Anda:
Atau download w3.css dari w3css_downloads dan menambahkan link ke folder pada situs web Anda sendiri:
W3.CSS adalah kerangka CSS kecil, cepat, dan modern dengan built-in responsif.
- Dirancang untuk menjadi lebih kecil dan lebih cepat dari kerangka CSS lainnya.
- Dirancang untuk menjadi lebih mudah untuk belajar, dan lebih mudah digunakan daripada kerangka CSS lainnya.
- Dirancang untuk memberikan CSS kesetaraan untuk semua perangkat: PC, laptop, tablet, dan ponsel.
- Dirancang untuk menggunakan CSS standar saja (Tidak perlu untuk jQuery atau JavaScript).
- Dirancang untuk mempercepat aplikasi HTML seluler.
W3.CSS adalah Gratis
W3.CSS bebas untuk menggunakan. Tidak ada lisensi yang diperlukan.Mudah digunakan
Buatlah sesederhana mungkin, tetapi tidak sederhana.
Albert Einstein
Albert Einstein
Untuk menggunakan W3.CSS di situs web Anda, hanya menambahkan link ke "w3.css" dari halaman web Anda:
Contoh
<!DOCTYPE html>
<html>
<meta
name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://www.w3schools.com/lib/w3.css">
Cobalah sendiri »Contoh
<!DOCTYPE html>
<html>
<meta
name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="/lib/w3.css">
Cobalah sendiri »
Sabtu, 16 Januari 2016
Jumat, 15 Januari 2016
Kamis, 14 Januari 2016
Pengenalan CSS3 Backgrounds
Backgrounds CSS3
CSS3 berisi beberapa sifat latar belakang baru, yang memungkinkan kontrol yang lebih besar dari elemen latar belakang.Dalam bab ini Anda akan belajar bagaimana menambahkan beberapa gambar latar belakang untuk satu elemen.
Anda juga akan belajar tentang mengikuti sifat CSS3 baru:
-
background-size
-
background-origin
-
background-clip
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.Nomor diikuti oleh -webkit-, moz, atau -o- menentukan versi pertama yang bekerja dengan awalan.
Property | ||||||
---|---|---|---|---|---|---|
background-image (with multiple backgrounds) |
4.0 | 12.0 | 9.0 | 3.6 | 3.1 | 11.5 |
background-size | 4.0 1.0 -webkit- |
12.0 | 9.0 | 4.0 3.6 -moz- |
4.1 3.0 -webkit- |
10.5 10.0 -o- |
background-origin | 1.0 | 12.0 | 9.0 | 4.0 | 3.0 | 10.5 |
background-clip | 4.0 | 12.0 | 9.0 | 4.0 | 3.0 | 10.5 |
CSS3 Beberapa Backgrounds
CSS3 memungkinkan Anda untuk menambahkan beberapa gambar latar belakang untuk elemen, melaluibackground-image
properti. Gambar latar belakang yang berbeda dipisahkan dengan koma, dan gambar ditumpuk di atas satu sama lain, di mana gambar pertama adalah yang paling dekat dengan penonton.
Contoh berikut memiliki dua gambar latar belakang, gambar pertama adalah bunga (selaras ke bawah dan kanan) dan gambar kedua adalah latar belakang kertas (disesuaikan dengan pojok kiri):
Contoh :
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
Cobalah sendiri » background
properti steno. Contoh berikut menggunakan
background
properti steno (hasil yang sama seperti contoh di atas):Contoh :
#example1 {
background: url(img_flwr.gif) right bottom
no-repeat, url(paper.gif) left top repeat;
}
Cobalah sendiri » CSS3 Latar Belakang Ukuran
CSS3background-size
properti memungkinkan Anda untuk menentukan ukuran gambar latar belakang. Sebelum CSS3, ukuran gambar latar belakang adalah ukuran sebenarnya dari gambar. CSS3 memungkinkan kita untuk menggunakan kembali gambar latar belakang dalam konteks yang berbeda.
Ukuran bisa ditentukan dalam panjang, persentase, atau dengan menggunakan salah satu dari dua kata kunci: berisi atau penutup.
Contoh berikut mengubah ukuran gambar latar belakang untuk jauh lebih kecil dari gambar asli (menggunakan piksel):
Asli gambar latar belakang:
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Aliquam Erat volutpat.Ut enim ad minim WISI veniam, Quis nostrud Exerci tasi ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Aliquam Erat volutpat.Ut enim ad minim WISI veniam, Quis nostrud Exerci tasi ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Contoh :
#div1
{
background: url(img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}
Cobalah sendiri » background-size
yang contain
dan cover
The
contain
kata kunci skala gambar latar belakang untuk menjadi sebesar mungkin
(tapi baik lebar dan tinggi yang harus muat di dalam area konten).
Dengan demikian, tergantung pada proporsi gambar latar belakang dan
daerah posisi latar belakang, mungkin ada beberapa daerah latar belakang
yang tidak tercakup oleh gambar latar belakang. The
cover
kunci skala gambar latar belakang sehingga area konten benar-benar
tertutup oleh gambar latar belakang (baik lebar dan tingginya sama
dengan atau melebihi area konten). Dengan demikian, beberapa bagian dari gambar latar belakang mungkin tidak terlihat di daerah posisi latar belakang. Contoh berikut menggambarkan penggunaan
contain
dan cover
Contoh :
#div1
{
background: url(img_flower.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#div2
{
background: url(img_flower.jpg);
background-size: cover;
background-repeat: no-repeat;
}
Cobalah sendiri » Tentukan Ukuran Multiple Images Background
Thebackground-size
properti juga menerima beberapa nilai untuk ukuran latar belakang
(menggunakan daftar dipisahkan koma), ketika bekerja dengan beberapa
latar belakang. Contoh berikut telah tiga gambar latar belakang tertentu, dengan nilai background-ukuran yang berbeda untuk setiap gambar:
Contoh :
#example1 {
background: url(img_flwr.gif) left top
no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top
repeat;
background-size: 50px, 130px, auto;
}
Cobalah sendiri » Full Size Background Image
Sekarang kita ingin memiliki gambar latar belakang pada situs Web yang mencakup seluruh jendela browser setiap saat.Persyaratan adalah sebagai berikut:
- Isi seluruh halaman dengan gambar (tidak ada ruang putih)
- Gambar skala yang diperlukan
- Gambar pusat pada halaman
- Jangan menyebabkan scrollbar
Contoh :
html {
background: url(img_flower.jpg) no-repeat
center fixed;
background-size: cover;
}
Cobalah sendiri » CSS3 background-asal Properti
CSS3background-origin
properti menentukan mana gambar latar belakang diposisikan. Properti mengambil tiga nilai yang berbeda:
- perbatasan-kotak - gambar latar belakang dimulai dari sudut kiri atas dari perbatasan
- padding-box - (default) gambar latar belakang mulai dari sudut kiri atas padding tepi
- konten-kotak - gambar latar belakang dimulai dari sudut kiri atas konten
background-origin
properti:Contoh :
#example1
{
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
Cobalah sendiri » CSS3 background-clip Properti
CSS3background-clip
properti menentukan daerah lukisan latar belakang. Properti mengambil tiga nilai yang berbeda:
- border-box - (default) latar belakang dicat ke tepi luar perbatasan
- padding-box - latar belakang dicat ke tepi luar padding
- konten-kotak - latar belakang dicat dalam kotak konten
background-clip
properti:Contoh :
#example1
{
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
Cobalah sendiri »Rabu, 13 Januari 2016
Pengenalan CSS3 Images
Gambar CSS3 Border
Dengan CSS3border-image
properti, Anda dapat mengatur gambar untuk digunakan sebagai perbatasan sekitar elemen. Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.Nomor diikuti oleh -webkit-, moz, atau -o- menentukan versi pertama yang bekerja dengan awalan.
Property | ||||||
---|---|---|---|---|---|---|
border-image | 16.0 4.0 -webkit- |
12.0 | 11.0 | 15.0 3.5 -moz- |
6.0 3.1 -webkit- |
15.0 11.0 -o- |
CSS3 border-image Properti
CSS3border-image
properti memungkinkan Anda untuk menentukan gambar yang akan digunakan sebagai pengganti perbatasan yang normal sekitar elemen. Properti ini memiliki tiga bagian:
- Gambar untuk digunakan sebagai perbatasan
- Dimana untuk mengiris gambar
- Menentukan apakah bagian tengah harus diulang atau membentang
The
border-image
properti mengambil gambar dan irisan menjadi sembilan bagian, seperti papan tic-tac-toe. Kemudian menempatkan sudut di sudut-sudut, dan bagian tengah yang berulang atau membentang seperti yang Anda tentukan.Catatan: Untuk
border-image
untuk bekerja, elemen juga membutuhkan border
set properti! Di sini, bagian tengah gambar diulang untuk membuat perbatasan:
Gambar sebagai perbatasan!
Berikut adalah kodeContoh :
#borderimg
{
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
30 round; /* Safari 3.1-5 */
-o-border-image: url(border.png)
30 round; /* Opera 11-12.1 */
border-image: url(border.png)
30 round;
}
Cobalah sendiri »
Gambar sebagai perbatasan!
Berikut adalah kodeContoh :
#borderimg
{
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
30 stretch; /* Safari 3.1-5 */
-o-border-image: url(border.png)
30 stretch; /* Opera 11-12.1 */
border-image: url(border.png)
30 stretch;
}
Cobalah sendiri » Tip: border-image properti sebenarnya adalah singkatan untuk properti the border-image-source , border-image-slice , border-image-width , border-image-outset and border-image-repeat properties. |
CSS3 border-image - Nilai Iris Berbeda
Nilai slice yang berbeda benar-benar mengubah tampilan perbatasan:Contoh 1:
border-image: url (border.png) 50 putaran;
Contoh 2:
border-image: url (border.png) 20% putaran;
Contoh 3:
border-image: url (border.png) 30% putaran;
Berikut adalah kode:Contoh :
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
50 round; /* Safari 3.1-5 */
-o-border-image: url(border.png)
50 round; /* Opera 11-12.1 */
border-image: url(border.png)
50 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 20% round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 20% round; /* Opera 11-12.1 */
border-image: url(border.png) 20% round;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
30% round; /* Safari 3.1-5 */
-o-border-image: url(border.png)
30% round; /* Opera 11-12.1 */
border-image: url(border.png)
30% round;
}
Cobalah sendiri »Selasa, 12 Januari 2016
Pengenalan CSS Styling Tables
Tampilan tabel HTML dapat sangat ditingkatkan dengan CSS:
Contoh di bawah menentukan batas hitam untuk <table>, <th>, dan <td> elemen:
Contoh :
Perhatikan bahwa tabel dalam contoh di atas memiliki batas ganda. Hal ini karena kedua tabel dan <th> dan <td> elemen memiliki perbatasan yang terpisah.
Contoh :
Contoh di bawah set lebar tabel untuk 100%, dan ketinggian <th> elemen untuk 50px:
Contoh :
Secara default, isi dari <th> elemen adalah pusat-aligned dan isi dari <td> elemen yang tersisa-blok.
Contoh berikut kiri meluruskan teks dalam <th> elemen:
Contoh :
Secara default, alignment vertikal dari konten dalam sebuah tabel adalah tengah (untuk kedua <th> dan <td> elemen).
Contoh berikut menetapkan alignment teks vertikal ke bawah untuk <td> elemen:
Contoh :
Contoh :
Perusahaan | Kontak | Negara |
---|---|---|
Alfreds Futterkiste | Maria Anders | Jerman |
Berglunds snabbköp | Christina Berglund | Swedia |
Centro comercial Moctezuma | Francisco Chang | Mexico |
Ernst Handel | Roland Mendel | Austria |
Pulau Perdagangan | Helen Bennett | Inggris |
Königlich Essen | Philip Cramer | Jerman |
Tertawa Bacchus Winecellars | Yoshi Tannamuri | Kanada |
Magazzini Alimentari Riuniti | Giovanni Rovelli | Italia |
Tabel Borders
Untuk menentukan batas tabel dalam CSS, menggunakanborder
properti. Contoh di bawah menentukan batas hitam untuk <table>, <th>, dan <td> elemen:
Contoh :
Perhatikan bahwa tabel dalam contoh di atas memiliki batas ganda. Hal ini karena kedua tabel dan <th> dan <td> elemen memiliki perbatasan yang terpisah.
Perkecil Tabel Borders
Theborder-collapse
properti menetapkan apakah perbatasan tabel harus runtuh ke dalam perbatasan tunggal:Contoh :
table
{
border-collapse: collapse;
}
table, th, td
{
border: 1px solid black;
}
Cobalah sendiri »
Jika Anda hanya ingin perbatasan di sekitar meja, hanya menentukan
Contoh :
border
properti untuk <table>:Contoh :
table
{
border: 1px solid black;
}
Cobalah sendiri » Tabel Lebar dan Tinggi
Lebar dan tinggi tabel didefinisikan olehwidth
dan height
sifat. Contoh di bawah set lebar tabel untuk 100%, dan ketinggian <th> elemen untuk 50px:
Contoh :
table
{
width: 100%;
}
th
{
height: 50px;
}
Cobalah sendiri » Penyelarasan Horizontal
Thetext-align
properti menetapkan alignment horizontal (seperti kiri, kanan, atau tengah) dari konten dalam <th> atau <td>. Secara default, isi dari <th> elemen adalah pusat-aligned dan isi dari <td> elemen yang tersisa-blok.
Contoh berikut kiri meluruskan teks dalam <th> elemen:
Contoh :
th
{
text-align: left;
}
Cobalah sendiri » Keselarasan vertikal
Thevertical-align
properti menetapkan alignment vertikal (seperti atas, bawah, atau tengah) dari konten dalam <th> atau <td>. Secara default, alignment vertikal dari konten dalam sebuah tabel adalah tengah (untuk kedua <th> dan <td> elemen).
Contoh berikut menetapkan alignment teks vertikal ke bawah untuk <td> elemen:
Contoh :
td
{
height: 50px;
vertical-align: bottom;
}
Cobalah sendiri » Tabel Padding
Untuk mengontrol ruang antara perbatasan dan konten dalam sebuah tabel, gunakanpadding
properti pada <td> dan <th> elemen:Contoh :
th, td
{
padding: 15px;
text-align: left;
}
Cobalah sendiri »Table Color
Contoh di bawah menentukan warna dan teks latar belakang warna <th> elemen:First Name | Last Name | Savings |
---|---|---|
Peter | Griffin | $100 |
Lois | Griffin | $150 |
Joe | Swanson | $300 |
Selebihnya kamu Pelajari sendiri di dokumentasi resminya http://www.w3schools.com/css/css_table.asp
Senin, 11 Januari 2016
Pengenalan Digital Signage & Xibo
Pengertian Digital Signage
"Digital Signage adalah
bentuk layar elektronik yang menunjukkan informasi, iklan dan pesan
lainnya. Tanda-tanda digital (seperti LCD, LED, plasma display, atau
gambar diproyeksikan) dapat ditemukan dalam lingkungan publik dan
swasta, seperti toko ritel dan bangunan perusahaan "
Digital Signage merupakan sebuah istilah yang biasa di gunakan untuk rangakain iklan digital.
Di dalam teknologi digital signage ini biasanya terdiri dari 2 layer yaitu Backend dan Frontend . Dari sisi backend biasanya adalah sebuah aplikasi yang berjalan pada web server , sedangkan pada sisi frontend biasanya yang sering kita lihat dengan media yang di gunakan biasanya LCD Monitor.
Di dalam teknologi digital signage ini biasanya terdiri dari 2 layer yaitu Backend dan Frontend . Dari sisi backend biasanya adalah sebuah aplikasi yang berjalan pada web server , sedangkan pada sisi frontend biasanya yang sering kita lihat dengan media yang di gunakan biasanya LCD Monitor.
Kelabihan dan Kekurangan dari Digital Signage
~Keuntungan
utama dari tanda digital adalah bahwa sangat mudah untuk memperbarui
konten secara teratur untuk tetap segar dan menarik.
Kelebihan menggunakan Digital Signage :
- Advertise lebih komunikatif dan mengesankan
- Meningkatkan daya saing (brand image) serbuah produk
- Iklan bersifat dinamis , sehingga kita bisa mengaturnya kapanpun , dimanapun
- Menyuguhkan informasi secara up to date
Kekurangan menggunakan Digital Signage :
- Biaya advertise lebih mahal
- Perawatan lebih sulit dibandingkan dengan perawatan advertise biasa , karena biasanya digita signage di letakkan di tempat – tempat umum
Pengertian Xibo
XIBO adalah Solusi Open Source Digital Signage. Ini terdiri dari server aplikasi, yang ditulis dalam PHP, dan aplikasi client.
XIBO merupakan
salah satu aplikasi digital signage. Xibo bersifat Free dan Open Source
, sehingga kita bisa menggunakannya secara gratis.
Persyaratan Xibo
- Persyaratan Xibo
Web Server (Apache 2 atau IIS)
MySQL 5.0 atau yang lebih tinggi
PHP 5.3.3 atau yang lebih tinggi
PHP5-MySQL - Persyaratan Cliend Xibo
- Personal Computer (PC)
- Koneksi Jaringan
- Ms Windows 2000 / Vista / XP
- Internet Explorer 7 atau 8
- Flash player 9 atau yang lebih baru
- Windows Media Player 11 atau yang lebih baru
- Powet Titik 2003 oer kemudian
- Media (LDC, Projector)
Fitur
File Support :
- Image support (*.jpg , *.jpeg , *.png , *.bmp , *.gif)
- Video support (*.wmv , *.avi , *.mpg , *.mpeg )
- flas
- Schedule Management :Di gunakan untuk mengatur dan menanage layout yang tampil pada waktu tertentu pada setiap client
- Broadcast Viewer : digunakan untuk melihat layout yang aktif berdasarkan schedule
- Layout managemen : di gunakan untuk memanage layouting yang di tampilkan pada client.
- Libarary management : di gunakan untuk menyimpan file – file yang sering di gunakan .
- Template management : di gunakan untuk memanage template . Di sini kita bisa mengatur permission setiap tempate.
- User management : Kita bisa mengatur permission setiap user .Di samping itu kita bisa mengelompokkan user tertentu ke dalam beberapa group / kelompok.
- Log Viewer : di gunakan untuk membaca setiap kejadian dan aktifitas yang dilakukan oleh semua user.
Referensi : Wikipedia Xibo (Manual)
@ ... @
Install Digital Signage menggunakan CMS Xibo di Linux mint
Cara meginstall Xibo di Debian Server :
1. Buka Terminal mu
2. Kemudian masuk ke dalam menu yang tadi kita Download
# cd Downloads
3. Kita Copy dengan perintah seperti di bawah ini
# scp xibo-cms-1.7.1.zip risma@10.62.1.5:/home/risma
4. Setelah itu kamu buka terminal baru dan masuk kedalam root server
# ssh risma@10.62.1.5
5. Lalu kamu Copy ke dalam direktory /var/www/html/
# cp xibo-cms-1.7.1.zip /var/www/html/
6.Kemudian kamu masuk ke /var/www/html/
# cd /var/www/html/
7. Karena aplikasi yang saya download berbentuk file .zip maka saya harus mengextraknya dengan perintahnya sebagai berikut:
# unzip xibo-cms-1.7.1.zip
9. Setelah itu tambahkan perintah sebagai berikut, lihat gambar dibawah ini.
# chown -R www-data:www-data xibo-cms-1.7.1
10. Setelah itu buat sebuah database baru bernama xibo-cms-1.7.1 kemudian klik create, lihat gambar dibawah ini.
11. Setelah itu di url tulis alamat alamat IP/xibo-cms-1.7.1
Misal 10.62.1.5/xibo-cms-1.7.1 lihat gambar dibawah ini.
12. Kemudian akan muncul gambar seperti dibawah ini lalu klik Next.
13. Setelah itu pilih Use en existing database di isi sesuai dengan tadi kamu install, setelah itu dibagain Host isi localhost, kemudian dibagain Database name isi xibo-cms-1.7.1, lalu dibagain Database Username isi root, kemudain dibagain Database password ini kamu isi sama dengan password database kamu, setelah itu klik Next. Lihat gambar dibawah ini.
14. Setelah itu dibagain Admin username kamu isi root kemudain Admin password isi dengan password admin kamu, lihat gambar dibawah ini.
15. Setelah itu buka terminal mu lagi dan buat sebuah direktori baru bernama xibo-cms-1.7.1 di dalam direktori media, berikut perintahnya
# mkdir /media/xibo-cms-1.7.1
16. Setelah itu tambahkan script sebagai berikut, lihat gambar dibawah ini
# chown -R www-data:www-data /media/xibo-library
17. Setelah itu dibagain Library Location, isi/media/xibo-library kemudian dibagain Server key, Server key akan muncul secara otomatis setelah itu klik Next. Lihat gambar dibawah ini.
19. Gambar dibawah ini merupakan CMS Xibo yang telah berhasi saya buat, lihat gambar dibawah ini.
Download terlebih dulu aplikasi xibo klik disini
1. Buka Terminal mu
2. Kemudian masuk ke dalam menu yang tadi kita Download
# cd Downloads
3. Kita Copy dengan perintah seperti di bawah ini
# scp xibo-cms-1.7.1.zip risma@10.62.1.5:/home/risma
4. Setelah itu kamu buka terminal baru dan masuk kedalam root server
# ssh risma@10.62.1.5
5. Lalu kamu Copy ke dalam direktory /var/www/html/
# cp xibo-cms-1.7.1.zip /var/www/html/
6.Kemudian kamu masuk ke /var/www/html/
# cd /var/www/html/
7. Karena aplikasi yang saya download berbentuk file .zip maka saya harus mengextraknya dengan perintahnya sebagai berikut:
# unzip xibo-cms-1.7.1.zip
8. Setelah itu tambahkan perintah sebagai berikut, lihat gambar dibawah ini.
# chmod 755 xibo-cms-1.7.1
# chown -R www-data:www-data xibo-cms-1.7.1
10. Setelah itu buat sebuah database baru bernama xibo-cms-1.7.1 kemudian klik create, lihat gambar dibawah ini.
11. Setelah itu di url tulis alamat alamat IP/xibo-cms-1.7.1
Misal 10.62.1.5/xibo-cms-1.7.1 lihat gambar dibawah ini.
12. Kemudian akan muncul gambar seperti dibawah ini lalu klik Next.
13. Setelah itu pilih Use en existing database di isi sesuai dengan tadi kamu install, setelah itu dibagain Host isi localhost, kemudian dibagain Database name isi xibo-cms-1.7.1, lalu dibagain Database Username isi root, kemudain dibagain Database password ini kamu isi sama dengan password database kamu, setelah itu klik Next. Lihat gambar dibawah ini.
14. Setelah itu dibagain Admin username kamu isi root kemudain Admin password isi dengan password admin kamu, lihat gambar dibawah ini.
15. Setelah itu buka terminal mu lagi dan buat sebuah direktori baru bernama xibo-cms-1.7.1 di dalam direktori media, berikut perintahnya
# mkdir /media/xibo-cms-1.7.1
16. Setelah itu tambahkan script sebagai berikut, lihat gambar dibawah ini
# chown -R www-data:www-data /media/xibo-library
17. Setelah itu dibagain Library Location, isi/media/xibo-library kemudian dibagain Server key, Server key akan muncul secara otomatis setelah itu klik Next. Lihat gambar dibawah ini.
18. Setelah itu dibagain Username isi nama user yang tadi kamu buat misalnya root, setelah itu isi password user kamu, lihat gambar dibawah ini, kemudian klik Login
19. Gambar dibawah ini merupakan CMS Xibo yang telah berhasi saya buat, lihat gambar dibawah ini.
~ Selesai~
@ ... @