4.3.6. Perancangan User Interface
1. Halaman login
Gambar. 4.52. Perancangan Halaman Login
2. Halaman Utama Admin
Gambar. 4.53. Perancangan Halaman Homepage Admin
3. Halaman Utama Manajemen User
Gambar. 4.54. Perancangan Halaman Manajemen User
4. Halaman Manajemen Bagian
Gambar. 4.55. Perancangan halaman manajemen bagian
5. Halaman Manajemen Jabatan
Gambar. 4.56. Perancangan halaman manajemen jabatan
6. Halaman Manajemen Root Jabatan
Gambar. 4.57. Perancangan Halaman Root Jabatan
7. Halaman Tambah User
Gambar. 4.58. Perancangan halaman tambah user
8. Halaman Ubah User
Gambar. 4.59. Perancangan halaman ubah user
9. Halaman Tambah dan Edit Bagian
Gambar. 4.60. Perancangan halaman tambah dan edit bagian
10. Halaman Tambah dan Edit Jabatan
Gambar. 4.61. Perancangan halaman Tambah dan edit jabatan
11. Halaman Tambah Root Jabatan
Gambar. 4.62. Perancangan halaman tambah root jabatan
12. Halaman Edit Root Jabatan
Gambar. 4.63. Perancangan halaman edit root jabatan
13. Halaman Utama List Data Surat Eksternal, Internal, dan Keluar
Gambar. 4.64. Perancangan halaman utama list data surat eksternal, internal dan keluar
14. Halaman Tambah Surat Eksternal
Gambar. 4.65. Perancangan halaman tambah surat eksternal
15. Halaman Ubah Surat Eksternal
Gambar. 4.66. Perancangan halaman ubah surat eksternal
16. Halaman Tambah Surat Internal
Gambar. 4.67. Perancangan halaman tambah surat internal
17. Halaman Ubah Surat Internal
Gambar. 4.68. Perancangan Halaman ubah surat internal
18. Halaman Tambah dan Ubah Surat Keluar
Gambar. 4.69. Perancangan halaman tambah dan ubah surat keluar
19. Halaman Utama Menu Disposisi
Gambar. 4.70. Perancangan halaman utama menu disposisi
20. Halaman Utama Menu Histori
Gambar. 4.71. Perancangan halaman utama menu histori
21. Halaman Utama Menu Laporan
Gambar. 4.72. Perancangan halaman utaman menu laporan
22. Halaman Utama Homepage Pada User
Gambar. 4.73. Perancangan halaman utama homepage user
23. Halaman Profil
Gambar. 4.74. Perancangan halaman profil
24. Halaman Ubah profil
Gambar. 4.75. Perancangan halaman ubah profil
25. Halaman Ubah Password
Gambar. 4.76. Perancangan halaman ubah password
26. Halaman Menu Notifikasi Surat Eksternal dan Internal
Gambar. 4.76. Perancangan halaman menu notifikasi surat eksternal dan internal
27. Halaman Inbox Notifikasi Surat Eksternal dan Internal
Gambar. 4.78. Perancangan halaman inbox notifikasi surat eksternal dan internal
28. Halaman Disposisi Notifikasi Surat Eksternal dan Internal
Gambar. 4.79. Perancangan halaman disposisi notifikasi surat eksternal dan internal
4.4. Implementasi
Pada tahap ini dilaksanakan implementasi dari rancangan-rancangan, baik rancangan basis data, rancangan aplikasi, maupun rancangan tampilan.
4.4.1. Bahasa Pemrograman dan Komponen
Bahasa pemrograman dan komponen-komponen yang digunakan dalam pengembangan sistem ini adalah:
1. Application server : Apache 2.2.17
2. PHP version 5.3.5
3. MySql version 5.5.8
4. Framework: Codeigniter 2.0.2
4.4.2. Struktur File
Karena aplikasi ini merupakan penerapan dari Codeigniter framework, maka dalam penyusunan struktur file juga harus mengikuti standar baku yang
dimiliki codeigniter framework itu sendiri. Tabel. 4.28. Struktur file
Struktur file Keterangan
manajemen_suratapplicationconfig Konfigurasi aplikasi, server, dan
database manajemen_suratapplicationcontrollers Source code logika control aplikasi
manajemen_suratapplicationmodels Source code
fungsi-sungsi pengelolaan struktur data
manajemen_suratapplicationviews Source code
tampilan manajemen_suratapplicationlibraries
Source code library tambahan
4.4.3. Alur Kerja CodeIgniter Framework
Secara umum alur kerja framework Codeigniter adalah sebagai berikut:
Gambar. 4.80. Alur kerja framework Codeigniter Index.php
merupakan front controller atau file yang berhubungan langsung dengan user. Saat user membuka index.php dan melakuka request,
maka akan dicek melalui router alamat yang dimasukkan oleh user tersebut. Bila ada paca cache data, maka akan langsung menuju ke Caching dan kembali
lagi ke user. Bila pada cache tidak ada makan akan diteruskan ke security untuk menvalidasi, menyaring, dan mengamankan informasi yang dimasukkan
user bila ada. Lalu dari security informasi tersebut dikirim ke application
controller . Di application controller, informasi dan data akan diolah. Bila
diperlukan, application controller akan berhubungan dengan models, libraries, helpers, plugins,
atau skrip lainnya. Application controller akan mengirimkan respon ke view untuk ditampilkan ke user. View akan disimpan di cache bila
berikutnya melakuka request yang sama. Sehingga mempercepat proses. Setelah di cache, maka akan ditampilkan informs kepada user.
Dalam implementasinya pada sistem informasi manajemen surat dan pengarsipan dapat diuraikan sebagai berikut:
a. Routing
Ketika pertama kali mengakses aplikasi melalui web browser, maka halaman yang pertama dipanggil adalah halaman index.php pada folder
aplikasi. Setelah itu file index.php melakukan routing ke controller yang telah di config oleh programmer pada file manajemen_suratapplicationconfig
routes.php dimana isinya adalah sebagai berikut: ?php if definedBASEPATH exitNo direct
script access allowed; route[default_controller] = login;
Dari code di atas, maka sistem akan menjalankan controller login.php
yang bersisi sebagai berikut: ?php if definedBASEPATH exitNo direct
script access allowed; class Login extends CI_Controller {
public function index {
cssHeader = link rel=stylesheet href=.base_url.csslogin.css;
cssHeader .= link rel=stylesheet href=.base_url.csslogin.css;
data[cssHeader] = cssHeader; this-load-modelmodel_user;
data[resultDir] = this-model_user- get_bagian;
data[resultJab] = this-model_user- get_jabatan;
this-load-viewloginindex,data; }
public function cek {
this-load-modelmodel_login; this-model_login-cek_login;
} }
?
Dari code controller login.php pada baris terakhir dari function index, sistem memanggil file manajemen_suratapplicationviewsloginindex.php
yang berisi sebagai berikut: DOCTYPE html PUBLIC -W3CDTD XHTML 1.0
TransitionalEN http:www.w3.orgTRxhtml1DTDxhtml1-
transitional.dtd html xmlns=http:www.w3.org1999xhtml
head meta http-equiv=Content-Type content=texthtml;
charset=utf-8 titleManajemen Surat PT xyztitle
link rel=stylesheet href=?php echo base_url;?csslogin.css
script var animasi1 = Sistem Informasi Manajemen Surat;
var animasi2 = PT XYZ ; var delay = 500;
b1; function b2
{
ID = setTimeoutb1,delay; document.title = animasi1;
} function b1
{
ID = setTimeoutb2,delay; document.title = animasi2;
} script
head body
div id=login_box
form action=?php echo site_urllogincek;? name=frmLogin
method=post
table width=350 border=0 tr
td colspan=3 id=iconh1Login Aplikasih1td
tr tr
td width=122labelUsernamelabeltd
td width=14:td td width=250input type=text
name=username id=username td tr
tr tdlabelPasswordlabeltd
td:td
tdinput type=password name=password id=password td
tr tr
tdlabelJabatanlabeltd td:td
td
?php echo this-fungsi- create_comboboxXjabatan,resultJab,i
d_jabatan,nama_jabatan,,,;?
td tr
tr td colspan=3nbsp;td
tr tr
td colspan=3 align=center
input type=submit value=login id=tombol nbsp;nbsp;nbsp;
input type=reset value=cancel id=tombol
td tr
table
div align=centerfont color=FF0000 size=+1?php echo this-session-
flashdataerrorLogin;?fontdiv
form div
body html
Jadi secara singkat proses routing framework codeigniter yaitu ketika user
mengakses aplikas pada web browser, maka sistem akan memanggil controller
yang telah di set pada file config routes. Setelah itu controller
memanggil file view, jadi halaman yang tampil paa web browser adalah file view
yang ditentukan controller.
b. Sistem Informasi Data
Dalam sebuah sistem informasi tentunya ada proses create, update, delete,
dan view data. Pada penerapannya dengan framework codeigniter keempat proses tersebut tidak berbeda jauh karena sama-sama melibatkan
controller sebagai logika sistem, model sebagai query database dan view
sebagai tampilan, sehingga penulis hanya akan menjelaskan proses view data dan sebagai contoh pada saat view data user dengan aktornya adalah admin.
Saat akan melakukan view data, maka admin diharuskan login terlebih dahulu. Setelah login, admin memilih menu user management, kemudian
mengklik menu user. Pada menu view data user, web browser mendapatkan link
“…manajemen_suratindex.phpuserget_user”, dari link tersebut dapat dijelaskan bahwa sistem akan menuju “function get_user” yang berada dalam
file controller “admin” sebagai berikut: ?php
class User extends CI_Controller { public function get_user {
kategori=this-input-postkategori;echo kategori;
cari=this-input-postcari; ifkategori== and cari=={
this-db-selecta.id_user,a.username, a.nik,a.password, a.nama_user,
b.nama_bagian, a.last_login,a.authority; this-db-frommst_user a,mst_bagian b;
this-db-wherea.id_bagian =b.id_bagian; this-db-order_bya.id_user,DESC;
}elseifkategori= and cari={
this-db-selecta.id_user,a.username, a.nik,a.password, a.nama_user,
b.nama_bagian, a.last_login,a.authority; this-db-frommst_user a,mst_bagian b;
this-db-wherea.id_bagian =b.id_bagian; this-db-likekategori,cari;
this-db-order_bya.id_user,DESC;
}elseifkategori==semua and cari=={ this-db-selecta.id_user,a.username,
a.nik,a.password, a.nama_user, b.nama_bagian, a.last_login,a.authority;
this-db-frommst_user a,mst_bagian b; this-db-wherea.id_bagian =b.id_bagian;
this-db-order_bya.id_user,DESC;
} getData = this-db-get;
a = getData-num_rows;echo a; config[base_url]=base_url.index.phpuserget
_user; set the base url for pagination config[total_rows] = a; total rows
config[per_page] = 10; the number of per page for pagination
config[uri_segment] = 3; see from base_url. 3 for this case
config[full_tag_open] = p; config[full_tag_close] = p;
this-pagination-initializeconfig;
initialize pagination data[title] = menampilkan isi user;
data[list_user] = this-model_user- get_allconfig[per_page],this-uri-
segment3,kategori,cari; this-load-viewheader,data;
this-load-viewuserindex, data,a; this-load-viewfooter;
}
Pada baris “data[list_user] = this-model_user- get_allconfig[per_page],this-uri-segment3,
kategori,cari; ”, fungsi get_user pada controller user ini akan
memanggil fungsi get_all pada file model_user.php yang terletak di manajemen_userapplicationmodels… yang isinya sebagai berikut:
?php class Model_user extends CI_Model {
public function get_allperPage,uri,kategori, cari {
ifkategori== and cari=={ this-db-selecta.id_user,a.username,a.nik,
a.password, a.nama_user, b.nama_bagian, a.last_login,a.authority;
this-db-frommst_user a,mst_bagian b; this-db-wherea.id_bagian = b.id_bagian;
this-db-order_bya.id_user,DESC; getData = this-db-get, perPage, uri;
ifgetData-num_rows 0 return getData-result_array;
else return null;
}elseifkategori= and cari={ this-db-selecta.id_user,a.username,a.nik,
a.password, a.nama_user, b.nama_bagian, a.last_login,a.authority;
this-db-frommst_user a,mst_bagian b; this-db-wherea.id_bagian = b.id_bagian;
this-db-likea..kategori,cari; this-db-order_bya.id_user,DESC;
getData = this-db-get, perPage, uri; ifgetData-num_rows 0
return getData-result_array; else
return null;
}elseifkategori==semua{ this-db-selecta.id_user,a.username,a.nik,
a.password, a.nama_user, b.nama_bagian, a.last_login,a.authority;
this-db-frommst_user a,mst_bagian b; this-db-wherea.id_bagian = b.id_bagian;
this-db-order_bya.id_user,DESC; getData = this-db-get, perPage, uri;
ifgetData-num_rows 0 return getData-result_array;
else return null;
} }
Pada baris code diatas terdapat tiga query dalam sql yang dapat dilakukan
yaitu ketika parameter kategori dan cari kosong, maka akan menjalankan
query “SELECT a.id_user, a.username, a.nik, a.password, a.nama_user,
b.nama_bagian, a.last_login, a.authority FROM mst_user a, mst_bagian b WHERE a.id_bagian = b.id_bagian ORDER BY a.id_user DESC”, kemudian
jika parameter kategori dan cari tidak kosong, maka akan menjalankan query “SELECT a.id_user, a.username, a.nik, a.password, a.nama_user,
b.nama_bagian, a.last_login, a.authority FROM mst_user a, mst_bagian b WHERE a.id_bagian = b.id_bagian LIKE a. kategori, cari ORDER BY
a.id_user DESC”, dan ketika parameter kategori berisi ‘semua’, maka ajan menjalankan query “SELECT a.id_user, a.username, a.nik, a.password,
a.nama_user, b.nama_bagian, a.last_login, a.authority FROM mst_user a, mst_bagian b WHERE a.id_bagian = b.id_bagian ORDER BY a.id_user
DESC”. Kembali lagi pada fungsi get_user pada controller user, setelah
memanggil query database dilanjutkan memanggil file view pada baris “this-load-viewuserindex, data,a;”. Baris
tersebut memanggil file index.php pada folder “manajemen_userapplication viewuser” yang nantinya akan ditampilkan di web browser yang berisi
sebagai berikut: div id=main-content
br div class=product-main
div class=judul align=center style=
width:780px;h2MANAGE USERh2div table
form method=post name=frmCari id=frmCari onsubmit=return val_cari; action=?php
echo site_urluserget_user; ? bcari :b
select name=kategori id=kategori onchange=enabledisabletext;
option value=kosong:: pilih ::option option value=semuasemuaoption
option value=niknikoption option value=nama_usernama user
option option value=jenis_kelaminjenis kelamin
option select
input type=text name=cari id=cari size=15
input type=submit value=cari form
tablenbsp; form name=frmCetakALLUser id=frmCetakALLUser
method=post action=?php echo site_urlusercetak_ALLuser; ?
input type=submit value=cetak ALL ke ms.excel
form br
form name=frmCetakUser id=frmCetakUser method=post action=?php echo
site_urlusercetak_user; ? table width=108 border=0 style=border:solid
1px; tr
th width=4Noth th width=4NIKth
th width=11Usernameth th width=14Nama Userth
th width=18Nama Bagianth th width=24Last Aktifitasth
th colspan=3 align=center style=
padding-left:50px; valign=middle ?php
ifauthority==1{ ?
a href=?php echo base_url;?index.php
userindexaddimg src=?php echo base_url;?images2.png
border=0a
?php }
? td
tr ?php
banyakData=countlist_user; ifbanyakData 0{
no=1; foreachlist_user as us{
ifno2==0{ bcg=CCC;
}else{ bcg=FFF;
} ?
tr bgcolor=?php echo bcg;? td?php echo no;?td
td?php echo us[nik];?td td?php echo us[username];?td
td?php echo us[nama_user];?td td?php echo us[nama_bagian];?td
td?php echo us[last_login];?td input type=hidden name=id[] id=id
value=?php echo us[id_user];? td width=6
?php ifauthority==1{
? a href=?php echo base_url;?index.php
userindexedit?php echo us[id_user];?img src=?php echo
base_url;?images12.png border=0a
?php }
?
td td width=13
?php ifauthority==1{
ifus[authority]==1{ ?
a href= onclick=return confirmdata ini tidak boleh di hapusimg
src=?php echo base_url;?images8.png
border=0a
?php }else{
?
a href=?php echo base_url;?index.php userdelete?php echo us[id_user];?
onclick=return confirmanda yakin akan menghapus data ini?img src=?php
echo base_url;?images8.png border=0a
?php }
} ?
td td width=6
?php
authority= this-session- userdataauthority;
ifauthority==1 || authority==0{ ?
?php atts = array
width = 320, height = 350,
scrollbars = yes, status = yes,
resizable = yes, screenx = 400,
screeny = 250 ;
Echo anchor_popupuserdetail.us
[id_user]., detail user, atts;? td
?php }
? tr
?php no++;
} }else{
? tr
td colspan=8 style=padding-left:150px;
color:F00strongtidak ada data usertd
tr ?php
} ?
Kategori