Aplikasi Pembelajaran Matakuliah Psikiatri Pada Fakultas Kedokteran Berbasis Android

(1)

L

A

M

P

I

R

A

(2)

(3)

(4)

LAMPIRAN

Listing Program

index.js

var app = {

// Application Constructor initialize: function() { this.bindEvents(); },

// Bind Event Listeners //

// Bind any events that are required on startup. Common events are:

// 'load', 'deviceready', 'offline', and 'online'. bindEvents: function() {

document.addEventListener('deviceready', this.onDeviceReady, false);

},

// deviceready Event Handler //

// The scope of 'this' is the event. In order to call the 'receivedEvent'

// function, we must explicitly call 'app.receivedEvent(...);' onDeviceReady: function() {

app.receivedEvent('deviceready'); },

// Update DOM on a Received Event receivedEvent: function(id) {

// event yang harus ada ketika aplikasi pertama kali dimulai

document.addEventListener('deviceready', onDeviceReady,

false);

// fungsi yang dipanggil ketika event berhasil di panggil function onDeviceReady(){

// menguji apakah plugin sqilte sudah terpasang, jika sudah panggil fungsi successCall, jika tidak panggil fungsi errorCall

window.sqlitePlugin.echoTest(successCall, errorCall); var uq;

var istilah; var arti; var namaobat; var pjl; var i;

// fungsi yang dipanggil pada pengujian plugin sqlite function successCall(){

// create database baru, jika berhasil panggil fungsi successCd, jika tidak panggil fungsi errorCd

var db = window.sqlitePlugin.openDatabase({name: 'psikiatri.db', location: 'default'}, successCd, errorCd);

}

(5)

function successCd(db){ // membuka koneksi

db.transaction(function(tx){ // create table istilah

tx.executeSql('CREATE TABLE IF NOT EXISTS

tbl_istilah (id_istilah integer primary key autoincrement, nm_istilah text, pjl text)', [], function(tx, result){

// alert('success create table istilah'); }, function(error){

alert('failed create table istilah'); });

// create table obat

tx.executeSql('CREATE TABLE IF NOT EXISTS tbl_obat (id_obat integer primary key autoincrement, nm_obat text, pjl_obat text)', [], function(tx, result){

// alert('success create table obat'); }, function(error){

alert('failed create table obat'); });

// create table obat

tx.executeSql('CREATE TABLE IF NOT EXISTS

tbl_penyakit (id_penyakit integer primary key autoincrement, nm_penyakit text, pjl_penyakit text)', [], function(tx, result){ // alert('success create table penyakit'); }, function(error){

alert('failed create table penyakit'); });

// insert to table istilah

tx.executeSql("INSERT INTO tbl_istilah (id_istilah, nm_istilah, pjl) VALUES(1, 'Afek', 'Manifestasi eksternal dari emosi yang dapat diamati.'),(2, 'Afek tidak serasi ', 'Emosi yang diekspresikan oleh pasien berbeda jauh dari yang diharapkan pada situasi tersebut (misalnya berbinar-binar, afek bahagia ketika menggambarkan kehilangan yang menyakitkan).'),(3, 'Afek tumpul', 'Kisaran respons emosional pasien sangat terbatas; kisaran normal emosi (tertawa atau tampak sedih pada saat yang tepat) tidak ditemui; merupakan gejala negatif pada skizofrenia.'),(4, 'Agitasi psikomotor', 'Peningkatan aktivitas motorik secara keseluruhan; muncul pada manik.'),(5, 'Agnosia', 'Kehilangan kemampuan untuk mengenali benda, orang, suara, bau, atau stimulus sensorik lain yang bukan disebabkan karena gangguan sensorik.'),(6, 'Akatisia', 'Perasaan gelisah yang subjektif dan tidak menyenangkan yang mengakibatkan ketidakmampuan untuk duduk tenang atau kebutuhan untuk melangkah bolak-balik.'),(7, 'Anhedonia', 'Ketidakmampuan untuk merasakan kesenangan ketika melakukan aktivitas-aktivitas yang biasanya disenangi.'),(8, 'Aritmomania', 'Suatu kompulsi yang melibatkan menghitung.'),(9, 'Asosiasi bebas', 'Proses dalam psikoanalisis dimana pasien diundang untuk mengatakan apapun yang ada didalam pikirannya.'),(10, 'Bicara sirkumstansial', 'Cara bicara yang tidak berhubungan satu sama lain dan memakan waktu lama untuk mencapai maksud yang ingin disampaikan.')", [], successX, errorX);

// insert to table obat

(6)

antagonis 5HT2.'),(3, 'SSRI (sitalopram, fluvoksamin, fluoksetin, setralin, dan paroksetin)', 'Golongan antidepresanyang paling

sering diresepkan di negara-negara maju.'),(4, 'Antimanik

(Litium)', 'Penstabil mood yang paling umum dijumpai. Obat ini digunakan sebagai profilaksispada gangguan afektif berulang (unipolar dan bipolar), penatalaksanaan akut untuk manik, dan sebagai tambahan obat antidepresan pada depresi resisten.'),(5, 'Terapi Elektrokonvulsif (ECT)', 'Penatalaksanaan yang mencetuskan efek yang kompleks, termasuk pelepasan neurotransmiter, peningkatan sementara pada permeabilitas sawar darah-otak, sekresi hormon hipotalamus dan hipofisis, dan pengaturan reseptor neurotransmiter yang serupa dengan yang dicetuskan oleh obat antidepresan.'),(6, '<i>Eye movement desensitization and reprocessing (EMDR)</i>', 'Suatu penatalaksanaanpsikoterapi yang bertujuan untuk membantu pasien mengakses dan memproses ingatan traumatik dengan tujuan menyelesaikannya secara emosional.')", [], successX, errorX); // insert to table penyakit

tx.executeSql("INSERT INTO tbl_penyakit (id_penyakit, nm_penyakit, pjl_penyakit) VALUES(1, 'Demensia','<p>Demensia atau yang biasa disebut pikun merupakan suatu sindrom meliputi gangguan memori, bahasa, pemikiran, dan penilaian yang menyebabkan menurunnya kemampuan hidup sehari-hari dan perilaku yang abnormal. Demensia menjadi lebih sering seiring peningkatan usia, biasanya jarang ditemukan sebelum usia 65 tahun. Namun pada populasi 65 tahun keatas

mengenai 5%, usia 75 tahun 10%, dan usia 85 tahun

25%.</p><br><br><b>Klasifikasi :</b><br><b>1. Demensia Alzheimer (Alzheimer’s disease, AD)</b><p>Penyebab demensia tipe Alzheimer belum diketahui namun secara monokular penanda penyakit ini ditandai dengan adanya deposit amiloid. 40% pasien memiliki riwayat keluarga demensia Alzheimer. Gangguan ini diturunkan dalam keluarga melalui gen autosom dominan yang berhubungan dengan kromosom 14 dan 21. Gen untuk protein perkusor amiloid terdapat pada kromosom 21.</p><br><p>Gambaran kasar neuroanatomi pasien penyakit Alzheimer adalah atrofi difus dengan sulkus korteks yang mendatar dan ventrikel serebri yang melebar. Pasien dengan demensia Alzheimer mengalami ketidakseimbangan produksi β amiloid dengan pembersihan β amiloid. Temuan Mikroskopik Alzheimer berupa plak senilis, hilangnya neuron terutama di korteks dan hipokampus, hilangnya sinaps hingga 50% dikorteks. Plak Senilis atau disebut plak amiloid merupakan indikasi adanya Alzheimer. Neurotransmiter yang berhubungan dengan patofisiologi penyakit Alzheimer adalah asetilkolin dan norepinefrin yang menjadi hipoaktif.</p><br><p> Penurunan konsentrasi kolin asetiltranferase yang merupakan enzim untuk sintesis asetil kolin menunjukkan berkurangnya jumlah neuron kolinergik yang tersedia. Penurunan aktivitas norepinefrin menunjukkan berkurangnya neuron yang mengandung norepinefrin di lokus cerelus. Diketahui juga glutamat, somatostatin dan kortikotropin mengalami penurunan konsentrasi pada penyakit Alzheimer. Penyebab lainnya oleh karena normalitas regulasi metabolisme membran fosfolipid menjadi kaku. Keracunan aluminium juga dianggap sebagai penyebab Alzheimer.</p><br><b>2. Demensia Vaskular</b><p>Paling sering ditemukan pada pria terutama dengan riwayat hipertensi dan penyakit kardiovaskular sebelumnya. Gangguan ini terutama mempengaruhi pembuluh serebral yang berukuran kecil dan sedang kemudian mengalami infark oleh karena oklusi pembuluh darah oleh plak ateriosklorotik dan tromboemboli

menyebabkan lesi di parenkim yang tersebar secara luas

(7)

(8)

}); }

function errorCd(){

alert('failed create DB'); }

function errorCall(){

alert('error adding plugin sqlite'); }

}

$(document).on('pagecreate','#home', function(){

document.addEventListener("backbutton", function(e){ if($.mobile.activePage.is('#home')){

e.preventDefault(); }

else {

parent.history.back(); }

}, false);

$('#keluar').on('click', function(){ navigator.app.exitApp();

}); });

$(document).on('pageinit','#pageistilah',function(){

db = window.sqlitePlugin.openDatabase({name: 'psikiatri.db', location: 'default'}, successPi, errorPi);

function successPi(db){

db.transaction(function(tx){ $('#cl').empty();

$('#cl').on('taphold', '.cl', function(event) {

// alert($(this).attr('uq'));

uq = $(this).attr('uq');

istilah = $(this).attr('istilah'); arti = $(this).attr('arti');

$('.ui-bar-i h1').css({"background":"#000"});

// alert(istilah); // alert(arti);

$('.hapus-icon').toggle(); $('.edit-icon').toggle(); $('.tambah-icon').toggle(); });

$('#page').pagination({

dataSource: function(done){

tx.executeSql("SELECT * FROM tbl_istilah ORDER BY nm_istilah ASC", [], function(tx, results){

var len = results.rows.length; result = [];

(9)

data-iconpos="right"><h3 class="cl"

uq="'+results.rows.item(i).id_istilah+'"

istilah="'+results.rows.item(i).nm_istilah.split("-").join(" ")+'" arti="'+results.rows.item(i).pjl+'">'+results.rows.item(i).nm_isti lah.split("-").join("

")+'</h3><p>'+results.rows.item(i).pjl+'</p></div>'); };

done(result); }, function(err){}); },

pageSize:20,

showPageNumbers: false,

callback: function(data, pagination){ // template method of yourself var html = data;

$('#cl').html(html).collapsibleset('refresh'); }

});

}, function(err){

alert('error - ' + JSON.stringify(err)); });

}

function errorPi(err){

alert('error openDatabase - ' + JSON.stringify(err));

}

$('#save').on('click', function(){ var nama = $('#istilah').val(); var arti = $('#arti').val();

var method = $('#popup_dialog').attr('data-method');

// alert(method); // alert(nama); // alert(arti); // alert(uq);

if(method == 'edit'){

db.transaction(function(tx){

tx.executeSql("UPDATE tbl_istilah SET nm_istilah = ?, pjl = ? WHERE id_istilah =

?",[nama,arti,uq],successX, errorX);

},function(err){alert('error db - '+ JSON.stringify(err))});

$('#popup_dialog').attr('data-method','save'); $('#istilah').val('');

$('#arti').val('');

$('.hapus-icon').toggle(); $('.edit-icon').toggle(); $('.tambah-icon').toggle(); }else if(method == 'save'){ db.transaction(function(tx){

tx.executeSql("INSERT INTO tbl_istilah

(nm_istilah, pjl) VALUES (?,?)", [nama,arti], successX, errorX); }, function(err){

(10)

});

function successX(result){ if(method == 'save'){

alert('success input data'); }else{

alert('success update data'); }

db.transaction(function(tx){ $('#cl').empty();

$('#page').pagination({

dataSource: function(done){ tx.executeSql("SELECT * FROM tbl_istilah ORDER BY nm_istilah ASC", [], function(tx, results){ var len =

results.rows.length;

result = [];

for (var i = 0; i < len; i++) { result.push('<div

data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right"><h3 class="cl"

uq="'+results.rows.item(i).id_istilah+'" istilah="'+results.rows.item(i).nm_istilah+'"

arti="'+results.rows.item(i).pjl+'">'+results.rows.item(i).nm_isti lah+'</h3><p>'+results.rows.item(i).pjl+'</p></div>');

};

pageSize:20,

callback: function(data, pagination){ // template method of yourself

var html = data;

});

}, function(err){ alert('error - ' + JSON.stringify(err));

}); }

function errorX(err){

alert('error - ' + JSON.stringify(err)); }

} });

$('#delete').on('click', function(){

var answer = confirm('Are you sure delete data ? ');

if(answer == true){

tx.executeSql('DELETE FROM tbl_istilah WHERE id_istilah = ?',[uq],successX, errorX);

(11)

function successX(result){

alert('success delete data'); db.transaction(function(tx){ $('#cl').empty();

$('#page').pagination({ dataSource: function(done){

tx.executeSql("SELECT * FROM tbl_istilah ORDER BY nm_istilah ASC", [], function(tx, results){

var len = results.rows.length;

result = [];

for (var i = 0; i < len; i++) {

result.push('<div data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right"><h3 class="cl"

uq="'+results.rows.item(i).id_istilah+'" istilah="'+results.rows.item(i).nm_istilah+'"

arti="'+results.rows.item(i).pjl+'">'+results.rows.item(i).nm_isti lah+'</h3><p>'+results.rows.item(i).pjl+'</p></div>');

};

pageSize:20,

callback: function(data, pagination){

// template method of yourself

var html = data;

});

}, function(err){ alert('error - ' + JSON.stringify(err));

}); }

function errorX(err){

alert('error - ' + JSON.stringify(err));} $('.hapus-icon').toggle();

$('.edit-icon').toggle(); $('.tambah-icon').toggle(); }else{

//nothing action }

});

$('#edit').on('click', function(){ $('#istilah').val(istilah); $('#arti').val(arti);

$('#popup_dialog').attr('data-method','edit'); $('#popup_dialog').popup('open'); });

});

(12)

cari.js

$(document).on('pagecreate','#pagepencarian',function(){

db = window.sqlitePlugin.openDatabase({name: 'psikiatri.db', location: 1}, successPi, errorPi);

function successPi(db){ $('#set').empty();

tx.executeSql("SELECT * FROM tbl_istilah", [], function(tx,result){

var len = result.rows.length; for (var i = 0; i < len; i++) {

$('#set').append('<div data-role="collapsible" collapsed-icon="carat-d" expanded-icon="carat-u" data-iconpos="right"><h3

class="cl">'+result.rows.item(i).nm_istilah+'</h3><p>'+result.rows .item(i).pjl+'</p></div>').end().trigger("create");

};

$('.cl').hide();

$('div[data-role=collapsible]').collapsible({refresh:true});

$('[data-role="listview"]').refresh(); },function(err){alert('error')});

}); }

$('input').on('click',function(){ $('.cl').show();

});

function errorPi(){}

// var cari = $('#search1').val(); });

shareSosmed.js

$(document).on('pagecreate','#detailpenyakit', function(){ var arr_tmp;

var len; var arr;

$('#share').on('click', function(){

window.plugins.socialsharing.share($('#content').text()); });

});

$(document).on('pageload','#detailpenyakit', function(){ alert($('#content').text());

(13)

index.html

<!DOCTYPE html>

<title>Aplikasi Pembelajaran Psikiatri</title>

</div>

src="js/shareSosmed.js"></script> <script type="text/javascript">

$(document).bind("mobileinit", function(){

$.mobile.page.prototype.options.domCache = false; });

$(document).bind("mobileinit", function(){ $.mobile.defaultPageTransition = 'none'; });

$('div').on('pagehide', function(event, ui){ var page = jQuery(event.target);

if(page.attr('data-cache') == 'never'){ page.remove();

}; }); </script>

src="js/pagination.min.js"></script>

(function () { 'use strict';

if (!('addEventListener' in window)) { return;

(14)

var htmlElement = document.querySelector('html'); function touchStart () {

document.querySelector('html').classList.remove('hover-active'); htmlElement.removeEventListener('touchstart', touchStart);

}

htmlElement.addEventListener('touchstart', touchStart);

}()); </script> </body>

</html>

daftaristilah.html

<!DOCTYPE html>

<body>

<h3>Daftar Istilah</h3> <div class="tambah-icon">

</div>

</div>

<li><a href="index.html" data-icon="home">Beranda</a></li>

</ul> </div> </div>

(15)

</div>

<div data-role="header" id="pop"> <h3>Tambah Istilah</h3>

</div>

<div role="main" class="ui-content" data-theme="b"> <h5 class="ui-title">Istilah</h5>

<a href="#" id="save" class="btn ui-btn-inline ui-btn-i" data-rel="back">Simpan</a>

</div>

<a href="#" class="ui-btn ui-btn-inline

ui-btn-i right" data-rel="back">Batal</a>

</div>

</div> </div>

</div>

</div> </body> </html>

jenisobat.html

<!DOCTYPE html>

<body>

<h3>Jenis Obat</h3>

</div>

</div>

(16)

<ul>

</ul> </div> </div>

<h3>Tambah Jenis Obat</h3> </div>

<input type="text" name="namaobat"

id="namaobat" value=""><br>

<h5 class="ui-title">Penjelasan</h5> <textarea cols="40" rows="8" name="penjelasan" id="penjelasan"></textarea><br>

<a href="#" id="save"

class="ui-btn ui-btn-inline ui-btn-i" data-rel="back">Simpan</a>

</div>

<a href="#" class="btn

ui-btn-inline ui-btn-i right" data-rel="back">Batal</a>

</div>

</div> </div>

</div>

jenispenyakit.html

<!DOCTYPE html> <html>

<head>

<body>

(17)

<div data-role="header" data-theme="i"

<h3>Tambah Jenis Penyakit</h3> </div>

<div role="main" class="ui-content" data-theme="b"> <h5 class="ui-title">Nama Penyakit</h5>

<h5 class="ui-title">Penjelasan</h5>

(18)

menuutama.html

<head>

<body>

<li><a href="" id="keluar">Keluar</a></li> </ul>

</div>

<div class="ui-bar index" style="text-align:center"><a href="pengenalan.html"><img

src="img/pengenalan.png"/><br><b>Psikiatri ?</b></a></div> </div>

<div class="ui-bar index" style="text-align:center"><a href="daftaristilah.html"><img

src="img/daftar_istilah.png"/><br><b>Daftar Istilah</b></a></div> </div>

<div class="ui-bar index" style="text-align:center"><a href="jenisobat.html"><img

src="img/jenis_obat.png"/><br><b>Jenis Obat</b></a></div> </div>

<div class="ui-bar index" style="text-align:center"><a href="jenispenyakit.html"><img

src="img/diagnosis.png"/><br><b>Jenis Penyakit</b></a></div> </div>

<div class="ui-bar index" style="text-align:center"><a href="pencarian.html"><img

src="img/pencarian.png"/><br><b>Pencarian</b></a></div> </div>

<div class="ui-bar index" style="text-align:center"><a href="tentang.html"><img

src="img/about.png"/><br><b>Tentang</b></a></div> </div>

</div> </div>

(19)

pencarian.html

<head>

<body>

<h3>Pencarian</h3>

</ul> </div> </div>

<div role="collapsible-set"

enhanced="true" input="#search1" filter="true" data-filter-reveal="true" id="cl">

<ul role="listview" data-filter="true" reveal="true"

data-filter-placeholder="Cari Istilah..." data-inset="true" id="set"> </ul>

</div> </div>

pengenalan.html

<head>

<body>

<h3>Psikiatri ?</h3>

<li><a href="index.html" data-icon="home" data-dom-cache="false">Beranda</a></li>

(20)

</ul> </div> </div>

<h2>Apa itu <r>PSIKIATRI ??</r></h2> <img src="img/logo.png">

<p>Psikiatri adalah salah satu ilmu dalam bidang kedokteran. Psikiatri adalah ilmu yang membahas tentang

<r>kejiwaan</r>. Aplikasi ini dibuat dengan tujuan untuk

mempermudah mahasiswa/mahasiswi kedokteran dalam mempelajari ilmu kedokteran. Dalam aplikasi ini terdapat istilah kata dalam

psikiatri, jenis obatnya dan jenis penyakit dalam psikiatri, sehingga mahasiswa/mahasiswi tidak perlu lagi membawa buku yang berat dan tebal.</p>

</div> </div>

tampilpenyakit.html

<head>

<body>

</body> </html>

tentang.html

<head>

(21)

<h3>Tentang Aplikasi</h3> <div data-role="navbar">

<ul>

</ul> </div> </div>

<h2>Tentang Aplikasi</h2>

<p>Aplikasi ini dibuat dengan menggunakan bahasa pemrograman <r>HTML5</r>, <r>CSS3</r>, dan <r>JavaScript</r>, dengan menggunakan teknik sistem penyimpanan data berbasis <i>local storage</i> yang mana konsepnya adalah menyimpan data kedalam memori penyimpanan <i>device</i> itu sendiri, sehingga tidak diperlukan lagi jaringan internet untuk menampilkan data-data yang tersipan dalam data-database.</p>

</div> </div>

config.xml

<?xml version='1.0' encoding='utf-8'?>

<widget id="com.cahayamanik.lab" version="0.0.1" xmlns="http://www.w3.org/ns/widgets"

xmlns:cdv="http://cordova.apache.org/ns/1.0"> <name>Psikiatri</name>

A sample Apache Cordova application that responds to the deviceready event.

</description>

Apache Cordova Team </author>

(22)

<allow-intent href="https://*/*" /> <allow-intent href="tel:*" />

<allow-intent href="sms:*" /> <allow-intent href="mailto:*" /> <allow-intent href="geo:*" /> <platform name="android">

<allow-intent href="market:*" />

</platform>

<allow-intent href="itms:*" /> <allow-intent href="itms-apps:*" /> </platform>

style.css

@media all and (min-width: 1001px){ img{

width: 100%; height: 100%; }

#btn_mulai{

position: absolute; width: 35%;

height: 7%; bottom: 5%;

margin-right: 30%; margin-left: 25%; }

}

@media all and (max-width:1000px) and (min-width: 700px){ img{

(23)

#btn_mulai{

margin-right: 30%; margin-left: 30%; }

}

@media all and (max-width: 700px) and (min-width: 320px){ img{

width: 100%; height: 100%; }

#btn_mulai{

margin-right: 30%; margin-left: 0; }

}

@media all and (max-width: 310px) and (min-width: 240px){ img{

width: 100%; height: 100%; }

#btn_mulai{

height: 7%; bottom: 194px; left: 0;

} }

#btn_mulai{

position: absolute; top: 50%;

left: 50%;

transform: translate(-50%,-50%);

-webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); }

h3 {

display: block; font-size: 1.17em;

(24)

font-weight: bold;

font-family: Comic Sans MS; }

#page1{

background-position:center center; background-attachment:fixed;

background-size:100% 100%; }

#home{

background-position:center center; background-attachment:fixed;

background-size:100% 100%; }

.ui-page-theme-b .ui-btn, html .ui-bar-b .ui-btn, html .ui-body-b btn, html body group-theme-b btn, html head+body btnbtn-b, page-theme-b btn:visited, html bar-b .ui-btn:visited, html .ui-body-b .ui-.ui-btn:visited, html body .ui-group-theme-b .ui-btn:visited, html head+body .ui-btn.ui-btn-b:visited{

background-color: #fff; border-color: #1f1f1f; color: #fff;

text-shadow: 0 1px 0 #111; box-shadow: none;

}

.ui-page-theme-a .ui-btn, html .ui-bar-a .ui-btn, html .ui-body-a btn, html body group-theme-a btn, html head+body btnbtn-a, page-theme-a btn:visited, html bar-a .ui-btn:visited, html .ui-body-a .ui-.ui-btn:visited, html body .ui-group-theme-a .ui-btn:visited, html head+body .ui-btn.ui-btn-a:visited {

background-color: #ffffff; border: none;

color: #333; box-shadow: none;

font-family: Comic Sans MS; font-size: 12px;

}

.ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a

.ui-panel-wrapper{

background: #fff; }

.cahyo{

position: relative; }

(25)

position: absolute; top: 0px;

right: 0px; width: 50px; height: 42px;

background-size: 50px 42px; cursor: pointer;

}

.share{

.share-ikon{

background-size: 20px 21px; cursor: pointer;

}

.menu-utama-cahaya{ display: none; margin: 0px; padding: 0px;

right: 10px; z-index: 99;

background-color: #f5f5f5; border: 1px transparent; border-radius: 2%;

text-align: left; }

.menu-utama-cahaya li{ margin: 0px; padding: 0px; display: block; }

.menu-utama-cahaya a{ display: block;

text-decoration: none; color: #333333;

padding: 10px;

font-family: Comic Sans MS; font-size: 15px;

(26)

.menu-utama-cahaya a:active{ background-color: #DADADA; color: #000000;

}

a.ui-btn.ui-btn-inline.ui-btn-i { background-color: #1D6FA5; color: #fff;

}

a.ui-btn.ui-btn-inline.ui-btn-i.right { float: right;

}

.menu-utama-cahaya img{ width: 25px; height: 25px;

padding-right: 25px; padding-top: 2px; }

.ui-header navbar .ui-btn, .ui-footer title~navbar btn, header title~navbar grid-duo btn, .ui-footer .ui-navbar .ui-grid-duo .ui-btn, .ui-header .ui-title~.ui-navbar .ui-grid-duo .ui-block-a:first-child .ui-btn, .ui-footer .ui-title~.ui-navbar .ui-grid-duo .ui-block-a:first-child .ui-btn, .ui-header .ui-title~.ui-navbar .ui-grid-duo block-a:first-child+block-b btn, footer title~navbar .ui-grid-duo .ui-block-a:first-child+.ui-block-b .ui-btn {

border-top-width: 5px;

background-color: #1D6FA5;

border-color: black;

}

.ui-listview>.ui-li-static, .ui-listview>.ui-li-divider,

.ui-listview>li>a.ui-btn {

border-width: 1px 0 0; border-style: none; }

.ui-listview>.ui-li-static, .ui-listview>.ui-li-divider,

.ui-listview>li>a.ui-btn {

border-width: 1px 0 0; border-style: none; }

.tambah{

.arti{

text-align: center; }

(27)

background-repeat: no-repeat; background-size: 50px 42px; cursor: pointer;

background-color: #1D6FA5; }

.edit-icon{

background-color: #1D6FA5; display: none;

}

.hapus-icon{

background-color: #1D6FA5; display: none;

}

.arti h2{

text-align: center;

font-family: Segoe Print; font-size: 20PX;

}

.arti p{

text-align: justify; font-family: Segoe Print; font-size: 15px;

}

.arti img{

width: 60%; }

(28)

.tentang{

text-align: center; background-color: #fff; }

.tentang h2{

text-align: center;

font-family: Segoe Print; font-size: 20PX;

}

.tentang p{

text-align: left;

font-family: Segoe Print; font-size: 15px;

}

.tentang img{ width: 60%; }

r{color: red;}

.ui-navbar li .ui-btn{

border-color: #ffffff; }

p {

display: block;

-webkit-margin-before: 0em; -webkit-margin-after: 0em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; }

.logo{

/*.logo-icon{

left: 0px; width: 50px; height: 42px;

background-size: 50px 42px; }

*/

.ui-collapsible-themed-content .ui-collapsible-content{ border-style: none;

(29)

.ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper{

text-shadow: none; color: #333;

}

h3.ui-title { color: #fff; }

a.ui-link.ui-btn.ui-btn-icon-top{ text-shadow: none;

color: #fff; }

.cahyo.ui-header.ui-bar-i {

border-bottom: 1px solid #fff; border-right: none;

border-left: none; border-top: none; }

.ui-footer.ui-bar-i { border-bottom: none; border-right: none; border-left: none;

border-top: 1px solid #fff; }

a.ui-link.ui-btn.ui-shadow.ui-corner-all { background-color: transparent;

color: #fff; }

div#header {

border: 1px solid #1D6FA5; }

.logo.ui-header.ui-bar-i {

.ui-header.ui-bar-i {

.ui-page-theme-a .ui-btn:focus, html .ui-bar-a .ui-btn:focus, html body-a btn:focus, html body group-theme-a .ui-btn:focus, html head+body .ui-btn.ui-btn-a:focus, .ui-page-theme-a .ui-focus, html .ui-bar-a .ui-focus, html .ui-body-a .ui-focus, html body .ui-group-theme-a .ui-focus, html head+body .ui-btn-a.ui-focus, html head+body .ui-body-a.ui-focus{

(30)

-moz-box-shadow: 0 0 12px #fff; box-shadow: 0 0 12px #fff; }

.hover-active .mybutton:hover { box-shadow: 1px 1px 1px #000; }

.paginationjs ul{

text-align: center; padding: 20px; color: #fff; }

.paginationjs ul li.disabled a{ background-color: #35a; }

.paginationjs ul li{

display: inline-block; }

.paginationjs ul li a{ padding: 15px; overflow: hidden;

background-color: #38f; text-decoration: none; color: transparent; }

.paginationjs ul li a:hover{ color: transparent; }

.paginationjs ul li.paginationjs-prev a{

background-image: url("img/icons-png/arrow-l-white.png"); background-repeat: no-repeat;

background-size: 13px 13px;

background-position: center center; }

.paginationjs ul li.paginationjs-next a{

background-image: url("img/icons-png/arrow-r-white.png"); background-repeat: no-repeat;

background-size: 13px 13px;

background-position: center center; }

.paginationjs ul li:nth-child(1){ margin-right: 2px;

}

(31)

a.ui-collapsible-heading-toggle.ui-btn.ui-icon-carat-d.ui-btn-icon-right.ui-btn-inherit{

(32)

(33)