79
akan digunakan adalah Mozilla Firefox. Browser tersebut telah banyak digunakan oleh masyarakat luas.
4.3. Implementasi Aplikasi Desain Antar Muka
Pada sub bab implementasi desain antarmuka menjelaskan form apa saja yang terlihat dalam aplikasi tersebut yang menampilkan beberapa aplikasi form
yaitu:
4.3.1. Berbasis Website
Penggunaan sarana website sebagai antar muka sistem dikarenakan sistem ini terdiri atas Halaman Utama, Halaman Administrator dan Halaman User.
Halaman Utama adalah halaman yang pertama kali diakses oleh pengunjung website. Sedangkan Halaman Administrator adalah halaman bagi administrator
website untuk mengelola content website. Halaman Administrator diakses melalui back-end. Yang terakhir adalah Halaman User yang merupakan inti dari sistem
penyajian data ini.
4.3.1.1. Halaman Utama
Halaman Utama memiliki tampilan seperti yang ditunjukkan pada Gambar 4.1 berikut ini.
Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.
80
Gambar 4.1 Halaman Utama Link pada bagian Menu ditampilkan dengan menggunakan sintaks HTML
biasa. Hal ini dikarenakan link yang ada di Halaman Utama ini bersifat statis. Sedangkan potongan berita yang ditampilkan adalah berita yang diisikan oleh
administrator website dan disimpan ke dalam database. Kemudian untuk menampilkan potongan berita, seperti pada Gambar 4.1 di atas, digunakan
potongan script PHP berikut :
Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.
81
if _GET[module]==home{ terkini=mysql_queryselect
countkomentar.id_komentar as jml, judul, judul_seo, jam,berita.id_berita, hari, tanggal, gambar, isi_berita
from berita left join komentar on berita.id_berita=komentar.id_berita and aktif=Y group
by berita.id_berita DESC LIMIT 6 whilet=mysql_fetch_arrayterkini{tgl =
tgl_indot[tanggal]; echo table;
echo trtdspan class=dateimg src=f[folder]imagesclock.gif t[hari], tgl -
t[jam] WIBspanbr ; echo span class=judula href=berita-t[id_berita]-
t[judul_seo].htmlt[judul]aspanbr ; if t[gambar]={
echo span class=imageimg src=foto_beritasmall_t[gambar] width=110
border=0span; isi_berita = htmlentitiesstrip_tagst[isi_berita];
isi = substrisi_berita,0,220; isi = substrisi_berita,0,strrposisi, ;
echo isi ... a href=berita-t[id_berita]- t[judul_seo].htmlSelengkapnyaa bt[jml]
komentarb br tdtr
tablehr color=e0cb91 noshade=noshade ;
Variabel terkini digunakan untuk menyimpan berita yang diambil dari database. Kemudian statement for digunakan untuk menampilkan 220 kata
pertama saja dari keselururan berita. Dan berita selengkapnya dapat diakses melalui link yang disediakan pada sintaks a href=....
4.3.1.2. Halaman Login User
Setelah mengklik tulisan login makan user akan menuju halaman login. Di halaman login user memasukan username dan password,setelah itu halaman
login user akan memproses otentifikasinya, seperti pada gambar 4.2 berikut ini.
Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.
82
Gambar 4.2 Halaman Login Form Login bagi user yang telah terigistrasi dibuat dengan sintaks form
PHP dan dipadukan dengan sintaks HTML seperti berikut: echo img src=f[folder]imageslogin.png p
align=center; echo form name=login action=cek_login.php
method=POST labelUsername : input type=text
name=usernamelabel labelPassword : input type=password
name=passwordlabel input type=submit value=Login
table form;
echo phr color=e0cb91 noshade=noshade br ;
Ketika tombol Login ditekan, maka sesuai dengan action form Login di atas, module cek_login akan diakses dan inputan user akan dikirim dengan
metode POST. Pada module cek_login, inputan user tadi akan diperiksa dulu, apakah formatnya sudah benar atau belum dengan menggunakan fungsi
Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.
83
ctype_alnum yang akan memberikan nilai 0 atau FALSE apabila inputan mengandung karakter selain huruf dan angka. Hal ini untuk menanggulangi SQL
Injection. Setelah lolos dari filter, barulah username yang dimasukkan oleh user tadi
diperiksa apakah ada atau tidak di dalam database. Proses pemeriksaan ini sekaligus mengambil semua data user dari database, yang apabila proses login ini
berhasil, semua data tersebut akan langsung didaftarkan pada session untuk memberikan hak akses pada user. Selain username dan password, proses login
juga memeriksa status user aktif atau tidak, sebelum memberikan hak akses. Untuk lebih jelasnya dapat dilihat pada potongan script berikut ini:
username = anti_injection_POST[username]; pass = anti_injectionmd5_POST[password];
if ctype_alnumusername OR ctype_alnumpass{ echo Sekarang loginnya tidak bisa di injeksi lho.;
} else{
login=mysql_querySELECT FROM users WHERE username=username AND password=pass AND
blokir=N; ketemu=mysql_num_rowslogin;
d=mysql_fetch_arraylogin; guru=mysql_querySELECT FROM tabguru where
KodeGuru=username; r=mysql_fetch_arrayguru;
siswa=mysql_querySELECT FROM tabsiswa where NIS=username;
s=mysql_fetch_arraysiswa; if ketemu 0{
if d[level]==admin{ session_start;
_SESSION[username] = d[username]; _SESSION[namalengkap] = d[Nama_User];
_SESSION[passuser] = d[password]; _SESSION[leveluser] = d[level];
sid_lama = session_id; session_regenerate_id;
Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.
84
sid_baru = session_id; mysql_queryUPDATE users SET id_session=sid_baru
WHERE username=username; headerlocation:adminwebmedia.php?module=home;
} }
else{ echo link href=..configadminstyle.css
rel=stylesheet type=textcss; echo centerLOGIN GAGAL br
Username atau Password Anda tidak benar.br Atau account Anda sedang diblokir.br;
echo a href=index.phpbULANGI LAGIbacenter;
} }
Statement header ’location:usermedia.php?module=home’; di dalam potongan script di atas menandakan apabila user berhasil melakukan proses
Login, maka dia akan diarahkan pada halaman lain yang merupakan Halaman User.
4.3.1.3. Halaman User
Halaman User adalah halaman bagi user yang telah terdaftar dan telah berhasil melakukan proses Login. Halaman User ini digunakan oleh 2 kelompok
user, yaitu Admin dan Wali Murid. Perbedaan bagi kedua kelompok user itu ada pada menu yang ditampilkan. Untuk lebih jelas, perhatikan Gambar 4.2 dan
Gambar 4.3 berikut ini.
Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.
85
Gambar 4.2 Halaman User
Gambar 4.3 Halaman User Wali Murid Pada Halaman User Admin, menu yang ditampilkan hanyalah menu-menu
standar untuk mendapatkan data akademik tersebut, sedangkan pada Halaman
Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.
86
User Wali Murid terdapat menu lihat nilai Siswa yang ada pada Halaman User wali murid.
Pengadaan perbedaan menu di antara kedua kelompok user yang mengakses Halaman User ini hanya menggunakan statement WHERE pada query
SELECT yang digunakan pada potongan script berikut. if_SESSION[leveluser]==siswa{
sql=mysql_queryselect from menusiswa where aktif=Y order by urutan;
} while m=mysql_fetch_arraysql{
echo lia href=m[link]187; m[nama_modul]ali;
}
Penggunaan statement IF seperti pada potongan script di atas digunakan hampir pada setiap modul yang ada. Dengan cara ini, penulis hanya perlu
membuat satu Halaman User dengan menu yang dinamis bagi setiap kelompok user. Seperti pada fasilitas melihat nilai. Jika user adalah siswa, maka data nilai
akan langsung ditampilkan sesuai dengan id_user yang terdaftar pada session. Jika ternyata bukan siswa, maka user harus mengisi NIS dari data yang ingin dicari
terlebih dahulu. Menu User Wali Murid adalah menu yang diperuntukkan bagi user Wali
Murid yang ingin melihat informasi nilai siswa, maka mengklik menu lihat nilai. Seperti pada Gambar 4.4 berikut.
Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.
87
Gambar 4.4 Halaman Laporan Nilai Untuk Wali Murid Untuk melihat nilai siswa dengan cetak PDF, maka mengklik menu yang
cetak PDF. Seperti pada Gambar 4.5 berikut.
Gambar 4.5 Halaman Menu Lihat Nilai Cetak PDF
Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.
88
Dan apabila ingin menlihat nilai siswa dalam betuk Microsoft Excel, maka mengklik menu cetak Excel. Seperti pada gamabr 4.6 berikut.
Gambar 4.6 Halaman Menu Lihat Nilai Cetak Microsoft Excel
4.3.1.4. Halaman Login Admin
Halaman Administrator diakses melalui back-end seperti yang terlihat pada Gambar 4.7 berikut.
Gambar 4.7 Halaman Login Admin Script yang digunakan untuk membuat form Login di atas dan untuk
memeriksa dan menyaring inputan administrator sama persis dengan yang telah diimplementasikan pada Halaman User sebelumnya. Jika administrator berhasil
Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.
89
melewati proses Login ini, maka dia akan diarahkan pada Halaman Administrator yang berfungsi sebagai sarana pengelolaan konten website, terutama konten yang
disajikan pada user yang teregistrasi. Hal itu ditunjukkan dengan menu-menu yang tersedia bagi administrator, seperti yang terlihat pada Gambar 4.8 berikut ini.
Gambar 4.8 Halaman Administrator Sama seperti Halaman User, pada Halaman Administrator ini juga terdapat
lebih dari satu kelompok user yang bisa mengaksesnya, yaitu Administartor dan Siswa. Administrator di sini adalah super administrator yang “berkuasa” penuh
atas segala pengaturan konten website. Sedangkan siswa hanya dapat melihat nilai mata pelajaran.
Pada halaman administrator ini, administrator diberikan keleluasaan dalam navigasi halaman. Di bagian kiri disediakan menu-menu untuk mengatur konten
website, mulai dari manajemen sekolah terdiri dari manajemen user, manajemen
Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.
90
guru, manajemen siswa, manajemen mapel, manajemen kelas, manajemen nilai dan manajemen pengampu, sedangkan untuk manajemen terdiri dari profil
sekolah dan berita.
4.3.2. Berbasis SMS Gateway
Kategori