Download - STRAKOP Sistem Informasi dan SMS Gateway untuk …lppm.uns.ac.id/kinerja/files/luaran/lppm-luaran-2011... · Jika fasilitas SMS Gateway ... dirinya bisa menggunakan dan mengisi ...

vi

STRAKOPSistem Informasi dan SMSGateway untuk Koperasi

1

BAB 1

PERSIAPAN DAN PEMASANGANSISTEM

Untuk dapat menerapkan STRAKOP, maka ada beberapahal yang harus diperhatikan. Sistem ini merupakan aplikasi webyang berjalan pada sebuah browser (perambah). Pada dasarnyaaplikasi ini bisa diterapkan pada sebuah jaringan dengan publicIP, namun distribusi standar STRAKOP adalah aplikasi yangbersifat portable. Untuk selanjutnya STRAKOP hanya akandisebut dengan istilah aplikasi atau sistem saja.

1.1. KEBUTUHAN HARDWARE.

Untuk dapat menjalankan sistem ini secara tunggal,artinya tidak berada pada sebuah jaringan, dibutuhkan sebuahkomputer dengan spesifikasi minimum sebagai berikut.Processor : setara Pentium III 966 MhzRAM : 256MbHarddsik : 8GbMonitor : 15 inch, resolusi 1024x768 pixel.Modem : GSM/CDMA modem untuk SMS

Kebutuhan minimal di atas masih sesuai jika sistem akanditerapkan secara client-server pada sebuah jaringan lokal atauintranet. Jika fasilitas SMS Gateway digunakan, makadibutuhkan ruang untuk virtual memory sedikitnya 1Gb,disarankan agar virtual memory diatur setidaknya 1.5Gb.

1.2. KEBUTUHAN SOFTWARE.

Software pendukung untuk dapat menjalankan sistem iniadalah sistem operasi Windows XP dan sebuah browser. Sistem

BABI

2 BAB I | Persiapan dan Pemasangan Sistem

operasi Windows XP adalah minimum yang disarankan, danuntuk browser disarankan menggunakan Google Chrome. SelainChrome, browser yang lain bisa digunakan namun untukInternet Explorer (IE) tidak disarankan meskipun masih tetapbisa digunakan.

Jika sistem diterapkan untuk server, maka kebutuhansoftware seperti di atas, namun untuk client bisa digunakansistem operasi yang lain. Hal ini karena sistem inididistribusikan dalam paket yang secara aslinya dirancang untukberjalan pada sistem operasi Windows. Sehingga server yangmenjalankannya harus menggunakan sistem operasi Windows.

1.3. PEMASANGAN SISTEM

Karena sistem yang didistribusikan adalah sistem portable,maka cara pemasangannya menjadi sangat mudah. Sistem bisadijalankan dengan hanya sebuah flashdisk ataupun berada diharddisk. Langkah-langkah pemasangan sistem adalah sebagaiberikut.

1. Copy satu folder ‘STRAKOP’ secara utuh berikutseluruh isinya ke flashdisk atau ke harddisk, partisimanapun bisa digunakan. Di buku ini STRAKOPdiletakkan di drive C.

2. Buka folder ‘STRAKOP’yang telah berada di flashdiskatau di harddisk, kemudian jalankan Start.exe dengan caradouble-click.

Persiapan dan Pemasangan Sistem BAB I 3

Gambar 1. Start

3. Setelah Start dijalankan, maka akan muncul kotak dialogpemberitahuan bahwa Uniform Server dijalankan danpada sistem-tray akan muncul icon Uniform Server.Silakan klik OK pada kotak dialog.

Gambar 2. Kotak Dialog Uniform Server


Gambar 3. System-Tray Uniform Server

4. Klik kiri pada icon Uniform Server yang ada maka akanmuncul menu untuk Uniform Server.

5. Jalankan Apache Server dan MySQL Server secarabersamaan dengan memilih pilihan menu paling atas,yaitu Start UniServer (Apache MySQL) seperti padaGambar 5. Jalankan dengan klik kiri.

Persiapan dan Pemasangan Sistem BAB I 5

Gambar 4. Start UniServer

6. Setelah UniServer jalan maka otomatis akan langsungdibuka aplikasi STRAKOP pada browser bawaan.Disarankan mengatur browser bawaan menjadi Chrome.

7. Halaman login otomatis dibuka. Aplikasi STRAKOP siapdigunakan.

Langkah-langkah yang disajikan diatas hanya sebatas padapemasangan sistem informasi dan transasksi utama, sedangkanuntuk SMS Gateway akan dijelaskan pada Bab III.


Gambar 5. Form Login.

STRAKOP is the acronym Stranas TechnologyResearch Assistance for Koperasi.

It was developed by Team of Research, Sebelas MaretUniversity. It is prototyping and welcome for modifyingand adjustment in order to make it suits for somepurposes.

7

BAB 2

SISTEM INFORMASI DANTRANSAKSI

Sistem STRAKOP dirancang untuk digunakan oleh empatjenis pengguna, yaitu pengunjung, anggota, operator atau kasir,dan administrator. Di sini yang dimaksud dengan pengunjungadalah seluruh pengguna umum atau masyarakat umum. Di sinimeskipun ada sebutan anggota, namun yang dimaksud adalahseluruh nasabah atau seluruh pengguna jasa koperasi, yangdalam kenyataanya statusnya bisa berupa Anggota atau Non-Anggota.

2.1. BAGIAN PENGUNJUNG

Untuk pengunjung, seperti terlihat pad Gambar 5,maka username diisi dengan ‘visitor’dan password diisidengan ‘akses’. Menu yang bisa diakses oleh pengunjunghanyalah Pendaftaran dan Informasi.

Menu Informasi menyajikan informasi umumtentang koperasi yang bersangkutan. Menu Pendaftaran → Baru jika dipilih maka akan dibuka formulir pendaftaran.Calon pengguna jasa koperasi yang ingin mendaftarkandirinya bisa menggunakan dan mengisi formulir yangdisediakan.

BABII

8 BAB II | Sistem Informasi dan Transaksi

Gambar 6. Halaman untuk Pengunjung.

Gambar 7. Formulir Pendaftaran.

Sistem Informasi dan Transaksi BAB II 9

2.2. BAGIAN ANGGOTA

Setiap anggota atau pengguna jasa koperasi, akanmendapatkan nomor anggota yang terdiri atas 9 digitangka dengan format yymmddnnn, yy adalah tahunpendaftaran, mm adalah bulan pendaftaran, dd adalahtanggal pendaftaran, dan nnn adalah nomor urutpendaftaran. Contohnya nomor anggota 100912001 adalahanggota atau pengguna jasa yang mendaftar pada tahun2010, bulan 09, tanggal 12 dan 001 sebagai nomor urutpendaftaran pada hari itu. Nomor anggota ini digunakansebagai username untuk masuk ke sistem dan passwordstandar adalah 1234.

Gambar 8. Halaman untuk Anggota


Gambar 9. Rincian Saldo

Gambar 10. Rincian dan Status Pinjaman

Menu yang disediakan pada bagian anggota adalahPendaftaran, Lihat Saldo, dan lihat Pinjaman. MenuPendaftaran bisa digunakan untuk mendaftarkan oranglain, saudara atau tetangganya. Menu Lihat Saldodigunakan untuk melihat Saldo Simpanan dan menu Lihat


Pinjaman digunakan untuk melihat status 3 pinjamanterakhir.

2.3. BAGIAN OPERATOR/KASIR

Operator atau kasir bisa masuk ke sistem denganusername dan password khusus yang diperoleh dariAdminsitrator atau DBA (Database Administrator) sistem.Halaman Kasir memuat seluruh menu yang digunakanuntuk melayani transaksi anggota koperasi. Berikut inirincian dari menu kasir.

Tabel 1. Halaman kasir, Menu Pendafataran

Menu Utama Sub Menu KeteranganPendaftaran Baru Pendaftaran baru

pengguna jasakoperasi, baik sebagainon-anggota maupuncalon anggota atau

Non >> Calon Perubahan status, darinon-anggota menjadicalon anggota

Tabel 2. Halaman kasir, Menu SIMPAN

Menu Utama Sub Menu KeteranganSIMPAN Pokok Simpanan pokok

Wajib Simpanan wajibSukarela Simpanan sukarelaHUT Koperasi Simpanan Hari Ulang

Tahun KoperasiCek Saldo Lihat saldo simpanan

anggotaPenarikan Penarikan simpanan


Tabel 3. Halaman kasir, menu PINJAM

Menu Utama Sub Menu KeteranganPINJAM Baru Mencatat peminajman

baruAngsuran Mencatat angsuran

pinjaman

Tabel 4. Halaman kasir, menu UserLog

Menu Utama Sub Menu KeteranganUserLog View Melihat catatan

kegiatan kasir

Tabel 5. Halaman kasir, menu Cari Peminjaman

Menu Utama Sub Menu KeteranganCaripeminjaman

- Cari data peminjaman

Formulir untuk transaksi simpan disediakan bagianralat jenis simpanan jika kasir salah memilih menu.Fasilitas ini juga mempermudah kasir jika ingin berganti-ganti jenis simpanan tanpa perlu memilih menu lagi,cukup diganti nomor anggota dan besar nominal simpan.Nominal simpan ditulis dengan angka tanpa tanda titiksebagai pemisah besaran mata uang, misal Rp1,350.000,00 cukup ditulis 1350000. Setiap formulir sudahjelas komponen yang harus dimasukkan. Setiap formulirjuga disediakan dua tombol, tombol sebelah kiri untukmenyimpan atau mengeksekusi transaksi, sedangkantombol sebelah kanan adalah tombol Reset untukmengosongkan formulir.

Untuk menu Cek Saldo, cukup diisi dengan nomoranggota yang ingin dilihat saldonya. Menu untuk


penarikan mirip dengan menu simpanan, hanya saja padamenu simpanan yang diisikan adalah besar simpanansedangkan pad amenu penarikan adalah besar penarikan.

Menu UserLog secara otomatis akan menampilkandaftar kegiatan yang dilakukan oleh kasir bersangkutan.Setiap kegiatan kasir akan dicatat agar seluruh transaksibisa dilakukan penjejakan dan perbandingan.

Menu Cari Peminjaman jika dipilih maka akandibuka jendela baru untuk melakukan pencarian.Disediakan dua pilihan pencarian, yaitu berdasar nomoranggota dan berdasar nomor pinjaman, tetapi tidak bolehkeduanya digunakan bersamaan.

Gambar 11. Menu perubahan Non >> Calon Anggota


Gambar 12. Menu Simpanan Pokok

Gambar 13. Menu Cek Saldo dan hasilnya.


Gambar 14. Menu Penarikan.

Gambar 15. Menu Cari Peminjaman dan hasilnya.


2.4. BAGIAN ADMINISTRATOR

Username dan password standar bawaan sistemadalah sama yaitu, admin. Antarmuka untuk administratordibuat sederhana dengan tujuan untuk memperingan bebansistem. Selain itu, dalam sistem ini, administratordiharapkan sekaligus menjadi seorang DBA denganmemanfaatkan phpMyAdmin yang sudah tersedia padamenu Uniform Server.

Gambar 16. Halaman administrator

Menu SMS Gateway Management digunakan untukpengaturan SMS Gateway. Untuk lebih jelasnya akandijelaskan pada Bab II.

17

BAB 3

SMS GATEWAY

STRAKOP memiliki SMS Gateway yang telahterintegrasi. Fasilitas ini digunakan untuk memberi layanankepada pengguna jasa koperasi dengan berbasis pada ShortMessage Service (SMS). Pengaturan SMS gateway berada dimenu SMS Gateway Management. Untuk saat ini ada duasubmenu utama, yaitu submenu Setup Gammu dan submenuSMS Gateway Monitor.

Gambar 17. SMS Gateway Management.

BABIII

18 BAB III | SMS Gateway

3.1. SETUP GAMMU

Menu ini digunakan untuk melakukan pemasangandan pengaturan Gammu sebagai service untuk penerimaandan pengiriman SMS. Jika menu ini dipilih maka akandibukakan Gammu 1.25 Easy Installer V1.0 pada jendelabaru.

Gambar 18. Gammu 1.25 Easy Installer V1.0

Dalam installer ini sudah diberikan langkah-langkahurut untuk menjalankan SMS Gateway. Langkah 1 sampaidengan 8 digunakan untuk menguji sistem apakah sudahdiatur dengan benar. Jika pengaturan sudah benar makalangkah cukup diulang langkah 4, yaitu Membuat ServiceGammu, dan langkah 5 yaitu Menjalankan ServiceGammu. Selama SMS Gateway aktif maka service tidakboleh dihentikan.

SMS Gateway BAB III 19

SMS Gateway ini membutuhkan sebuah modemyang terpasang pada komputer yang dijadikan sebagaiserver aplikasi STRAKOP. Untuk mengetahui nomor portyang digunakan, bisa dilihat dari System Properties yangada di sistem operasi Windows.

System Properties bisa dipanggil dengan hot-key‘Win + PauseBreak’atau lewat Control Panel → System.Setelah dibuka System Properties, pilih tab Hardware danklik tombol Device Manager. Setelah dibuka DeviceManager, klik kiri pada Port. Di bagin Port disajikanbeberapa device yang terpasang dengan nomor port yangdigunakan. Silakan cari modem yang telah digunakan dancatat nomor port-nya. Dalam buku ini digunakan modemWavecom Fastrack dan terpasang pada port COM3.

Dalam installer ini cukup langkah pertama yangharus disesuaikan, yaitu pada setting Gammurc. Isikandengan port yang sesuai dan jenis koneksi yangdigunakan. Detail tentang koneksi bisa didownloadlangsung dari sistem dengan klik pada submenu LihatJenis Connection yang berada pada bagian paling bawah.

Gambar 19. System Properties –Tab Hardware


Gambar 20. Device Manager

Gambar 21. Setting Gammurc.

SMS Gateway BAB III 21

Langkah selanjutnya tinggal diikuti dan tidak perluada yang diganti, keculai kalau berbeda dengan nilaisebelumnya. Penting untung diingat bahwa pada langkahke tiga, Setting Konfigurasi SMSDRC, nama databasetidak boleh diganti, biarkan tetap ‘kopstranas’.

3.2. SMS GATEWAY MONITOR

Menu ini digunakan untuk SMS traffic monitoring,baik SMS yang diterima maupun SMS yang dikirimkan.Sistem secara otomatis akan memilah-milah SMSberdasar action dan isinya. Sistem secara otomatis bisamengenali SMS dengan kode tertentu untuk selanjutnyaakan memilih respon yang sesuai.

Gambar 22. SMS Gateway Monitor


Fasilitas yang bisa digunakan oleh pengguna SMSGateway antara lain adalah informasi dengan mengetik‘INFO’, meminta menu penggunaan dengan mengetik‘MENU’dan melakukan transfer dengan mengetik SMSdengan format ‘T nomor_anggota_pengirim passwordnomor_anggota_penerima nominal_transfer’, seluruhbagian dipisahkan dengan spasi. Seluruh SMS daripengguna dikirim nomor SMS center yang terpasang padamodem.

PENTING!!!

Saat menjalankan Gammu 1.25 Easy Installer V1.0, pastikanmodem telah terpasang dan dikenali sistem. Lakukaninstalasi modem dan drivernya dengan benar. Informasimengenai istalasi modem silakan bisa diperoleh dari vendorprodusen modem yang Anda gunakan.

23

KODE PENGEMBANGAN

index.php<?phpecho "<script>

var target=\"main/login/log.html\"window.location=target

</script>Jika Anda membaca ini artinya browser yg Anda gunakan

mencegah agar tidak langsung redirect.<br>Untuk masuk silakan klik di <a

href=\"main/login/log.html\">sini</a>";?>

Directory main

a.php //halaman utama sistem<?php//checking user sessionsession_start();if(empty($_SESSION['username'])){

header("Location:login/log.html");}elseif(isset($_SESSION['jenisUser'])){

$juser=$_SESSION['jenisUser'];if (isset($_SESSION['username'])){

$username=$_SESSION['username'];}switch ($juser){

case '0':header("Location:admin/admin.php");break;//case '1':include

'../daftar/upgradeanggota.php';break;}

}?>

24 Kode Pengembangan

<html><head><title>Strako</title><script type="text/javascript" src="js/selectmenu.js"></script><script type="text/javascript"src="js/animatedcollapse.js"></script><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/bottomdock.js"></script><script type="text/javascript" src="js/ajaxform.js"></script><script>setInterval("Simpan();",3000);setInterval("Pinjam();",2000);setInterval("Tarik();",1000);setInterval("Angsur();",3000);setInterval("waktu();",1000);$(function(){

Simpan=function(){$("#bottomBarRefresh-

left").load('autorefresh/isi.php?q=s');}Pinjam=function(){

$("#bottomBarRefresh-center2").load('autorefresh/isi.php?q=p');

}Tarik=function(){

$("#bottomBarRefresh-center1").load('autorefresh/isi.php?q=tr');

}Angsur=function(){

$("#bottomBarRefresh-right").load('autorefresh/isi.php?q=ang');

}waktu=function(){

$("#bottomBar-rightcontent").load('autorefresh/isi.php?q=t');

}

Kode Pengembangan 25

});</script>

<script type="text/javascript">animatedcollapse.addDiv('Anggota','fade=1,speed=400,group=Menu')animatedcollapse.addDiv('Simpan','fade=1,speed=400,group=Menu,persist=1,hide=1')animatedcollapse.addDiv('Pinjam','fade=0,speed=400,group=Menu,hide=1')animatedcollapse.addDiv('Cari','fade=0,speed=400,group=Menu,hide=1')animatedcollapse.addDiv('UserLog','fade=0,speed=400,group=Menu,hide=1')

animatedcollapse.ontoggle=function($, divobj, state){ //fireseach time a DIV is expanded/contracted

//$: Access to jQuery//divobj: DOM reference to DIV being expanded/

collapsed. Use "divobj.id" to get its ID//state: "block" or "none", depending on state

}animatedcollapse.init()</script>

<link href="css/myStyle.css" rel="stylesheet" type="text/css"></head><body><?phpinclude 'config/config.php';$sql="SELECT * FROM setup";$result = mysql_query($sql);$i=0;while($row = mysql_fetch_array($result)){

$setup[$i]=$row[2];$i=$i+1;


}?><div id="topBar" class="fixed-position">

<div id="topBar-content"><div id="topBar-namaKop">

Koperasi <?php echo $setup[0];?></div><div id="topBar-alamatKop">

<?php echo $setup[1];?><br>Akta Pendirian: <?php echo $setup[2];?>

</div></div>

</div><?php$tahun=date(y);$sqlB="SELECT * FROM bunga WHERE Tahun=$tahun";$resultB = mysql_query($sqlB);$i=0;while($rowB = mysql_fetch_array($resultB)){

$kdBunga[$i]=$rowB[0];$besar[$i]=$rowB[1];$i=$i+1;

}?><div id="bottomBarRefresh" class="fixed-position"><div>

<div id="bottomBarRefresh-left">SIMPAN:</div><div id="bottomBarRefresh-center1">PENARIKAN:</div>

</div><div id="bottomBarRefresh-center2">PINJAM:


</div><div id="bottomBarRefresh-right">ANGSURAN:</div>

</div>

<div id="bottomBar" class="fixed-position"><div id="bottomBar-leftcontent">

<?php echo 'BUNGA:: Sim '.$besar[0].'% | Pin'.$besar[1].'%';?>

</div><div id="bottomBar-rightcontent">

Time</div><div id="bottomBar-footer">

Program ini dikembangkan oleh Tim Peneliti UNSSurakarta, 2010

</div></div><?php

?><div id="wrapper">

<div id="leftpanel"><div id="menuPlace">

<?phpswitch($juser){

case '3':include 'user/operator.php';break;case '999':include

'user/anggota.php';break;case '-555':include

'user/visitor.php';break;}?>

</div><div id="userLog">


</div>

</div></div>

<div id="container"><div id="logPlace">

<?phpif

(isset($_SESSION['username'])){echo 'User:

<strong>'.$_SESSION['username'].'</strong> [<ahref="login/secure.php?logout">Logout</a>]';

}else{echo 'User: [<a

href="login/index.html">Login</a>]';}

?></div><div id="active"><div id="activeContainer" align="center">

</div></div>

</div>

</div>

</body></html>


3.3. SUBDIRECTORY CSS

myStyle.cssbody {

background-color:#F4F7FB;font: 73% "Trebuchet MS", Tahoma, Arial,

Helvetica, sans-serif;}

/******** TOP DOCKING **************/#topBar {background-color:#D8E7FE;border-bottom: 8px solid #4A81DE ;top: 0px ;font-family: verdana, arial ;text-align: center;color:#567EDC;height: 68px ;position: fixed ;width: 100% ;z-index: 1000 ;}#topBar-content{margin: 2px 2px 2px 2px ;/*border:1px solid; border-color:gray;*/}#topBar-namaKop {padding: 0px 10px 0px 10px;font-size: 25px ;font-weight:bold;}#topBar-alamatKop {text-align:center;font-size: 12px ;font-weight:normal;


margin: 4px 20px 1px 20px ;}

/*************** BOTTOM DOCKING ***************/#bottomBarRefresh {/*border-top: 1px solid #567EDC ;*/bottom: 46px ;font-family: verdana, arial ;font-weight:bold;height: 90px ;position: fixed ;width: 100% ;z-index: 1000 ;}

#bottomBarRefresh table th{font-size:10px;text-align:left;font-weight:bold;}#bottomBarRefresh table td{font-size:10px;}

#bottomBarRefresh-left{float:left;width:22%;height: 80px ;background-color: #D8E7FE;margin: 2px 0 3px 0 ;border:2px solid #ffffff;/*padding: 10px 10px 10px 10px;*/}

#bottomBarRefresh-center1{float:left;


width:22%;height: 80px;background-color: #D8E7FE;margin: 2px 0px 3px 5px ;border:2px solid #ffffff;}

#bottomBarRefresh-center2{float:left;width:30%;height: 80px;background-color: #D8E7FE;margin: 2px 0px 3px 5px ;border:2px solid #ffffff;}

#bottomBarRefresh-right{float:right;width:22%;height: 80px;background-color: #D8E7FE;margin: 2px 12px 3px 0px ;border:2px solid #ffffff;/*padding: 10px 10px 10px 10px;*/}

#bottomBar {background-color: #D8E7FE;border-top: 1px solid #567EDC ;bottom: 0px ;font-family: tahoma, verdana, arial ;font-size: 20px ;font-weight:bold;height: 45px ;position: fixed ;width: 100% ;


z-index: 1000 ;}#bottomBar-leftcontent {float:left;margin: 2px 1px 3px 20px ;/*padding: 10px 10px 10px 10px;*/}

#bottomBar-rightcontent {float:right;margin: 2px 20px 3px 20px ;/*padding: 10px 10px 10px 10px;*/}#bottomBar-footer {clear:right;text-align:right;font-size: 10px ;font-weight:normal;color: #ffffff ;margin: 4px 20px 0 20px ;background: #567EDC ;}

div#wrapper{/*border:1px solid; border-color:gray;*/ margin:80px 0 0 0; text-align:left;/* background: #E4DCB2 url(../images/bgd.jpg) repeat;*/}

div#container{float:right;width:84%;margin-top: 0px;border:1px solid #4A81DE;}


div#logPlace{padding:5px 10px 3px;font-size:15px;text-align:right;}

div#active{background: #ffffff url(../images/logo.jpg) no-repeat center;min-height:250px;margin: 0 8px 8px 8px;}

div#activeContainer{background-color: #ffffff;margin: 0 8px 8px 8px;}

div#leftpanel{float:left;width:15%;margin:0;}

div#menuPlace{font-size:17px;font-weight:bold;font-family: arial, tahoma, verdana;border-left:1px dotted #567EDC;}

div#userLog{margin-top:10px;font-family: tahoma, verdana, arial;}

div#trans{margin:5px 0 0 0;


padding:5px 0 5px 10px;background-color: #ffffff;color:#567EDC;font-weight:bold;}

.mainMenu a{display: block;border: 1px solid #567EDC ;background-color:#D8E7FE;text-decoration: none;margin: 0 0 2px;color:#567EDC;}

.menu a{font-size:15px;font-weight:normal;display: block;background-color:#F4F7FB;text-decoration: none;}

.menu {margin: 0 0 0;padding: 0;list-style: none;

}

.menu ul{margin: 2px 0;list-style: none;}

.menu li {padding: 0;


margin: 2px 0 0 15px;background-color:#F4F7FB;

}

.big1 input{font-size:30px;}

.big2 input{font-size:50px;}

.big {font-size:20px;}

log.cssbody {background-color: #F4F7FB;font-family:Verdana, Arial, Helvetica, sans-serif;font-size:11px;}

div#judul{width:600px;height:40px;margin:0 auto;padding:20px 0 5px 10px;text-align:center;font-weight : bold;font-size:20px;color:#567EDC;}.sub{margin-top:5px;font-size:14px;


}

div#login{width:300px;background : #D8E7FE;margin:0 auto;margin-top:50px;padding:5px 0 5px 10px;border: 5px solid #ffffff;text-align:left;color:#686455;}

div#reg{width:450px;background : #E4DCB2;margin:0 auto;margin-top:50px;padding:5px 0 5px 10px;border: 5px solid #9C9473;text-align:left;color:#686455;}

.title {margin-bottom: 15px;}.buttondiv {margin-top: 10px;}.messagebox{

position:absolute;width:100px;margin-left:30px;border:1px solid #c93;background:#ffc;


padding:3px;}.messageboxok{

position:absolute;width:auto;margin-left:30px;border:1px solid #349534;background:#C9FFCA;padding:3px;font-weight:bold;color:#008000;

}.messageboxerror{

position:absolute;width:auto;margin-left:30px;border:1px solid #CC0000;background:#F7CBCA;padding:3px;font-weight:bold;color:#CC0000;

}

3.4. SUBDIRECTORY LOGIN

log.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><title>Login :: Strakop</title><meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">


});}else{

$("#msgbox").fadeTo(200,0.1,function() //startfading the messagebox

{//add message and change the class of the box

and start fading$(this).html('Maaf username dan password

tidak sesuai..').addClass('messageboxerror').fadeTo(900,1);});

}

});return false; //not to post the form physically

});//now call the ajax also focus move from$("#password").blur(function(){

$("#login_form").trigger('submit');});

});</script><link href="../css/log.css" rel="stylesheet" type="text/css"></head><body><div id="judul">Strakop<div class="sub">Perangkat LunakKoperasi<br><br>Login Form</div></div><div id="login"><form method="post" action="" id="login_form"><div align="center"><div class="title" > Silakan Anda masukkan username danpassword</div>

<div >


User Name : <input name="username" type="text"id="username" value="" maxlength="20" />

</div><div style="margin-top:5px" >

Password :

<input name="password" type="password" id="password"value="" maxlength="20" />

</div><div class="buttondiv">

<input name="Submit" type="submit" id="submit"value="Login" style="margin-left:-10px; height:23px" /> <spanid="msgbox" style="display:none"></span>

</div>Untuk pengunjung online silakan masukkan user User Name :<em>visitor</em> dan Password <em>akses</em><br></div></form></div></body></html>

ajax_login.php<?php session_start();// Developed by Roshan Bhattarai// Visit http://roshanbh.com.np for this script and more.// This notice MUST stay intact for legal use

//Connect to database from hereinclude '../config/config.php';

//get the posted values


$user_name=htmlspecialchars($_POST['user_name'],ENT_QUOTES);$pass=$_POST['password'];

//now validating the username and password from user tabel$sql="SELECT kdUser,loginName,loginPass FROM userWHERE loginName='".$user_name."'";$result=mysql_query($sql);$row=mysql_fetch_array($result);

//if username existsif(mysql_num_rows($result)>0){

//compare the passwordif(strcmp($row['loginPass'],$pass)==0){

echo "yes";//now set the session from here if needed$_SESSION['username']=$user_name;$_SESSION['jenisUser']=$row['kdUser'];//set cookiessetcookie("user", $user_name);

}else{echo "no";

}}else{

//try to acces member tabel$sql="SELECT kdAnggota, pass FROM anggota WHERE

kdAnggota='".$user_name."'";$result=mysql_query($sql);$row=mysql_fetch_array($result);//if member existif(mysql_num_rows($result)>0){

//compare the password//compare the passwordif(strcmp($row['pass'],$pass)==0){

echo "yes";//now set the session from here if needed


$_SESSION['username']=$user_name;$_SESSION['jenisUser']=999;//set cookiessetcookie("user", $user_name);

}else{echo "no";

}}else{

//try detect serious visitorif(($user_name=='visitor')AND($pass=='akses')){

echo "yes";//now set the session from here if needed$_SESSION['username']=$user_name;$_SESSION['jenisUser']=-555;//set cookiessetcookie("user", $user_name);

}else{echo "no";

}}

}?>

secure.php<?php session_start();// Developed by Roshan Bhattarai// Visit http://roshanbh.com.np for this script and more.// This notice MUST stay intact for legal use

// if session is not set redirect the userif(empty($_SESSION['user']))

header("Location:log.html");

//if logout then destroy the session and redirect the userif(isset($_GET['logout'])){


session_destroy();header("Location:../login/log.html");

}

echo "<a href='secure.php?logout'><b>Logout<b></a>";echo "<div align='center'>You Are inside secured Page</a>";?>

3.5. SUBDIRECTORY CONFIG

config.php<?php$host = 'localhost';$user = 'root';$pass = 'root';$db = 'kopstranas';

$connect = mysql_connect($host,$user,$pass);if (!$connect)

{die('Tidak bisa tersambung ke database server: ' .

mysql_error());}

$db_select = mysql_select_db($db) or die("Database tidakada");

?>