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:

Contoh

<div class="w3-animate-opacity">..</div>
Cobalah sendiri "

Zoom di Elements

Memperbesar elemen dengan kelas w3-bernyawa-zoom:

Contoh

<div class="w3-animate-zoom">..</div>
Cobalah sendiri "

Elemen berputar

Berputar setiap elemen 360 derajat dengan kelas w3-spin:

Contoh

<div class="w3-spin">..</div>
Cobalah sendiri "

memudar Tak Terbatas

Contoh

<div class="w3-animate-fading">..</div>
Cobalah sendiri "

Selebihnya kamu belajar sendiri di documentasi resminya http://www.w3schools.com/ 

Share:

Selasa, 19 Januari 2016

Pengenalan W3.CSS Badges

Tokyo 6
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

Contoh

<div class="w3-tag w3-orange">London Zoo</div>
Cobalah sendiri "

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

66

Contoh

<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

66

Contoh

<p><span class="w3-badge w3-jumbo w3-padding-large w3-red">66</span></p>
Cobalah sendiri "

Menampilkan Tanda Besar

DALAM KASUS
KEADAAN 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/ 
Share:

Senin, 18 Januari 2016

Pengenalan w3.CSS

Apa W3.CSS?
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

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 »
 
Atau download w3.css dari w3css_downloads dan menambahkan link ke folder pada situs web Anda sendiri:

Contoh

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="/lib/w3.css">
  Cobalah sendiri »
Share:

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, melalui background-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 »
Beberapa gambar latar belakang dapat ditentukan baik menggunakan properti background individu (seperti di atas) atau 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

CSS3 background-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.
Diubah ukurannya 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.
Berikut adalah kode:

Contoh :
#div1 {
    background: url(img_flower.jpg);
    background-size: 100px 80px;
    background-repeat: no-repeat;
}
Cobalah sendiri »
Dua nilai lain yang mungkin untuk 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

The background-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 berikut menunjukkan bagaimana melakukannya; Menggunakan elemen html (elemen html selalu setidaknya ketinggian jendela browser). Kemudian mengatur latar belakang tetap dan berpusat di atasnya. Kemudian menyesuaikan ukurannya dengan properti background-size

Contoh :
html {
    background: url(img_flower.jpg) no-repeat center fixed;
    background-size: cover;
}
Cobalah sendiri »

CSS3 background-asal Properti

CSS3 background-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
Contoh berikut menggambarkan 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

CSS3 background-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
Contoh berikut menggambarkan background-clip properti:

Contoh :
#example1 {
    border: 10px dotted black;
    padding: 35px;
    background: yellow;
    background-clip: content-box;
}
Cobalah sendiri »

Share:

Rabu, 13 Januari 2016

Pengenalan CSS3 Images


Gambar CSS3 Border

Dengan CSS3 border-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

CSS3 border-image properti memungkinkan Anda untuk menentukan gambar yang akan digunakan sebagai pengganti perbatasan yang normal sekitar elemen.
Properti ini memiliki tiga bagian:
  1. Gambar untuk digunakan sebagai perbatasan
  2. Dimana untuk mengiris gambar
  3. Menentukan apakah bagian tengah harus diulang atau membentang
Kami akan menggunakan gambar berikut (disebut "border.png"):
Berbatasan
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 kode

Contoh :
#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 »
Di sini, bagian tengah gambar yang ditarik untuk membuat perbatasan:
Gambar sebagai perbatasan!
Berikut adalah kode

Contoh :
#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 »
 
Catatan 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 »


Share:

Selasa, 12 Januari 2016

Pengenalan CSS Styling Tables

Tampilan tabel HTML dapat sangat ditingkatkan dengan CSS:
 
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, menggunakan border properti.
Contoh di bawah menentukan batas hitam untuk <table>, <th>, dan <td> elemen: 

Contoh : 
table, th, td {
   border: 1px solid black;
}
Cobalah sendiri »
 
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

The border-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 border properti untuk <table>:

Contoh :
table {
    border: 1px solid black;
}
Cobalah sendiri »

Tabel Lebar dan Tinggi

Lebar dan tinggi tabel didefinisikan oleh width 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

The text-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

The vertical-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, gunakan padding 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

Contoh :
th {
    background-color: #4CAF50;
    color: white;
}
  Cobalah sendiri »

Selebihnya kamu Pelajari sendiri di dokumentasi resminya http://www.w3schools.com/css/css_table.asp

Share:

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.



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

  1. 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
  2. Persyaratan Cliend Xibo
  3. Personal Computer (PC)
  4. Koneksi Jaringan
  5. Ms Windows 2000 / Vista / XP
  6. Internet Explorer 7 atau 8
  7. Flash player 9 atau yang lebih baru
  8. Windows Media Player 11 atau yang lebih baru
  9. Powet Titik 2003 oer kemudian
  10. Media (LDC, Projector)

Fitur
File Support :
  • Image support (*.jpg , *.jpeg , *.png , *.bmp , *.gif)
  • Video support (*.wmv , *.avi , *.mpg , *.mpeg )
  • flas
  1. Schedule Management :Di gunakan untuk mengatur dan menanage layout yang tampil pada waktu tertentu pada setiap client
  2. Broadcast Viewer : digunakan untuk melihat layout yang aktif berdasarkan schedule
  3. Layout managemen : di gunakan untuk memanage layouting yang di tampilkan pada client.
  4. Libarary management : di gunakan untuk menyimpan file – file yang sering di gunakan .
  5. Template management : di gunakan untuk memanage template . Di sini kita bisa mengatur permission setiap tempate.
  6. User management : Kita bisa mengatur permission setiap user .Di samping itu kita bisa mengelompokkan user tertentu ke dalam beberapa group / kelompok.
  7. Log Viewer : di gunakan untuk membaca setiap kejadian dan aktifitas yang dilakukan oleh semua user.




@ ... @

Share:

Install Digital Signage menggunakan CMS Xibo di Linux mint

Cara meginstall Xibo di Debian Server :

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

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.

 

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~
@ ... @

Share: