Bab 4 Hasil dan Pembahasan 4.1 Implementasi Aplikasi...

34
66 Bab 4 Hasil dan Pembahasan 4.1 Implementasi Aplikasi Dengan Zend Framework Karena Zend Framework merupakan framework MVC maka kita cukup melakukan coding pada 3 folder yaitu: Simpeg.com/application/controllers => untuk menyimpan controller Simpeg.com/application/models => untuk menyimpan model Simpeg.com/application/views => untuk menyimpan views Pada dasarnya model bertugas untuk melakukan query data ke tabel basis data seperti (insert, update, delete, select, find, dan lain-lain). Sedangkan controller bertugas untuk menerima request dan memberikan respon. Controller dapat mengatur view yang ditampilkan dan memilih model mana yang akan dipakai. Yang terakhir view digunakan untuk menampilkan tampilan ke web browser.

Transcript of Bab 4 Hasil dan Pembahasan 4.1 Implementasi Aplikasi...

Page 1: Bab 4 Hasil dan Pembahasan 4.1 Implementasi Aplikasi ...repository.uksw.edu/bitstream/123456789/2375/5/T1_672005176_BAB IV.pdf · Implementasi (Simpeg) dan Penjelasan koding berdasarkn

66

Bab 4

Hasil dan Pembahasan

4.1 Implementasi Aplikasi Dengan Zend

Framework

Karena Zend Framework merupakan framework MVC

maka kita cukup melakukan coding pada 3 folder yaitu:

‐ Simpeg.com/application/controllers =>

untuk menyimpan controller

‐ Simpeg.com/application/models =>

untuk menyimpan model

‐ Simpeg.com/application/views =>

untuk menyimpan views

Pada dasarnya model bertugas untuk melakukan query

data ke tabel basis data seperti (insert, update, delete, select,

find, dan lain-lain). Sedangkan controller bertugas untuk

menerima request dan memberikan respon. Controller dapat

mengatur view yang ditampilkan dan memilih model mana

yang akan dipakai. Yang terakhir view digunakan untuk

menampilkan tampilan ke web browser.

Page 2: Bab 4 Hasil dan Pembahasan 4.1 Implementasi Aplikasi ...repository.uksw.edu/bitstream/123456789/2375/5/T1_672005176_BAB IV.pdf · Implementasi (Simpeg) dan Penjelasan koding berdasarkn

67

Untuk penggunaan framework Zend diperlukan sedikit

pengaturan pada file http.conf yang terdapat pada directory

xampp\apache\conf. Pengaturan dilakukan dengan cara

menghilangkan tanda # pada baris LoadModule

rewrite_module modules/modrewrite.so dan LoadModule

setenvif_module modules /mod_setenvif.so seperti yang

terlihat pada Gambar 13.

Gambar 13 Pengaturan file httpd.conf

Zend_Controller pada framework zend dirancang

untuk mendukung alamat pengaksesan website dengan bersih

(clean URL). Untuk mengaktifkannya, semua permintaan

halaman diharus kan untuk melalui file yang bernama

index.php yang di kenal dengan bootstrapper. Fasilitas ini

memberikan akses untuk menangani semua alamat website

dan untuk memastikan bahwa semua variabel atau kondisi

telah diatur dengan benar. Fasilitas ini diaktifkan

menggunakan file .htaccess seperti terlihat pada Gambar 14.

#LoadModule proxy_module modules/mod_proxy.so #LoadModule proxy_ajp_module modules/mod_proxy_ajp.so #LoadModule proxy_balancer_module modules/mod_proxy_balancer.so #LoadModule proxy_connect_module modules/mod_proxy_connect.so #LoadModule proxy_ftp_module modules/mod_proxy_ftp.so #LoadModule proxy_http_module modules/mod_proxy_http.so LoadModule rewrite_module modules/mod_rewrite.so LoadModule setenvif_module modules/mod_setenvif.so #LoadModule speling_module modules/mod_speling.so

Page 3: Bab 4 Hasil dan Pembahasan 4.1 Implementasi Aplikasi ...repository.uksw.edu/bitstream/123456789/2375/5/T1_672005176_BAB IV.pdf · Implementasi (Simpeg) dan Penjelasan koding berdasarkn

68

Gambar 14 Pengaturan File .htaccess

Maksud dari Gambar 14 adalah untuk setiap alamat

akan dialihkan ke file index.php.

Sebagai conth kita ambil IndexController.php

Kode 1 berfungsi untuk pemanggilan IndexController

diatas dapat dijelaskan bahwa class IndexController extends

Zend_Controller_Action akan menentukan pemanggilan

layout yang akan dipakai oleh view dan fungsi pada baris ke

SetEnv APPLICATION_ENV development RewriteEngine On RewriteCond % {REQUEST_FILENAME} -s [OR] RewriteCond % {REQUEST_FILENAME} -l [OR] RewriteCond % {REQUEST_FILENAME} -d RewriteRule ^.* $ - [NC,L] RewriteRule ^.* index.php [NC,L] Php_flag shourt_open_tags on

Kode 1 untuk pemanggilan IndexController.php <?php class IndexController extends Zend_Controller_Action { public function init() { $this->_helper->layout->setLayout('home'); } public function indexAction() { // action body $this->active['a'] = 'current_page_item'; $this->view->active = $this->active; $odb = new Application_Model_DbTable_Halaman();

$this->view->title = 'Selamat Datang'; $this->view->konten = $odb->gethome(); $this->view->latestnews = $odb->getberita(); } }

Page 4: Bab 4 Hasil dan Pembahasan 4.1 Implementasi Aplikasi ...repository.uksw.edu/bitstream/123456789/2375/5/T1_672005176_BAB IV.pdf · Implementasi (Simpeg) dan Penjelasan koding berdasarkn

69

delapan dalam koding 1 adalah fungsi yang dipanggil

pertama, akan memanggil view dengan data getHome () dan

getBerita();, kemudian pada koding 1 pada baris ke delapan

public function indexAction() adalah fungsi untuk memanggil

Application_Model_DbTable_Halaman yaitu model tabel

halaman pada basis data.

Sedangkan Kode 2 adalah Model Halaman.php

Dari Kode 2 model halaman diatas dapat dijelaskan

bahwa pada baris kedua adalah setiap model harus extends

Kode 2 model halaman <?php class Application_Model_DbTable_Halaman extends Zend_Db_Table_Abstract { protected $_name = 'halaman'; protected $_primary = 'idhalaman'; public function getkonten(){ $select = $this->select()->from($this,array('home','berita_terbaru','visi_misi','tupoksi','kontak_kami')) ->where('idhalaman =?',1); $halaman = $this->fetchRow($select); return $halaman->toArray(); } public function gethome(){ $select = $this->select()->from($this,array('home')) ->where('idhalaman =?',1); $halaman = $this->fetchRow($select); return $halaman->home; } public function getberita(){ $select = $this->select()->from($this,array('berita_terbaru')) ->where('idhalaman =?',1); $halaman = $this->fetchRow($select); return $halaman->berita_terbaru; }

Page 5: Bab 4 Hasil dan Pembahasan 4.1 Implementasi Aplikasi ...repository.uksw.edu/bitstream/123456789/2375/5/T1_672005176_BAB IV.pdf · Implementasi (Simpeg) dan Penjelasan koding berdasarkn

70

atau sesuai berada dalam tabel-tabel yang ada dalam database

tabel pada Zend. Pada pemanggilan diatas yang dituju adalah

halaman maka pada baris ke empat dalam koding diatas

adalah nama dari tabel data basenya yaitu protected

$_name = 'halaman';, selanjutnya pada baris baris ke lima

protected $_primary = 'idhalaman'; berfungsi untuk

menentukan primary key nya. Sebagai contoh pada baris ke

19 pada koding diatas public function getberita() adalah

fungsi untuk mendapatkan halaman berita dan pada baris ke

20 adalah koding untuk melakukan select berita terbaru.

Page 6: Bab 4 Hasil dan Pembahasan 4.1 Implementasi Aplikasi ...repository.uksw.edu/bitstream/123456789/2375/5/T1_672005176_BAB IV.pdf · Implementasi (Simpeg) dan Penjelasan koding berdasarkn

71

4.2 Implementasi Basisdata

Untuk implementasi basis data beserta tabel tabelnya

dapat dilihat pada lampiran. Pengaturan untuk implementasi

basis data dapat di lihat pada gambar script aplication.ini

dibawah ini:

Pengaturan untuk implementasi basis data

Setelah dilakukan implementasi basis data dan tabel-

tabelnya selanjutnya dilakukan pengaturan untuk

menghubungkan basis data yang sudah dibuat dengan aplikasi

yang dibuat. Pengaturan ini dilakukan pada file aplication.ini

yang terdapat dalam aplication/configs.

Kode 3. Implementasi basis data [production] phpSettings.display_startup_errors = 0 phpSettings.display_errors = 0 includePaths.library = APPLICATION_PATH "/../library"

bootstrap.path = APPLICATION_PATH "/Bootstrap.php" bootstrap.class = "Bootstrap" appnamespace = "Application" resources.frontController.controllerDirectory = APPLICATION_PATH "/controllers" resources.frontController.params.displayExceptions = 0 resources.layout.layoutPath = APPLICATION_PATH "/layouts/scripts/" [staging : production] [testing : production] phpSettings.display_startup_errors = 1 phpSettings.display_errors = 1 [development : production] phpSettings.display_startup_errors = 1 phpSettings.display_errors = 1 resources.frontController.params.displayExceptions =1 resources.db.adapter = PDO_MYSQL resources.db.params.host = localhost resources.db.params.username = root resources.db.params.password = resources.db.params.dbname = simpeg

Page 7: Bab 4 Hasil dan Pembahasan 4.1 Implementasi Aplikasi ...repository.uksw.edu/bitstream/123456789/2375/5/T1_672005176_BAB IV.pdf · Implementasi (Simpeg) dan Penjelasan koding berdasarkn

72

4.3 Implementasi Model View Controller

(MVC)

Implementasi Model View Controller (MVC) pada

aplikasi yang dirancang menunjukan proses yang terjadi.

Seperti tlah dijelaskan pada bab sbelumnya bahwa dalam

MVC terdapat request, control view dan modell dimana ketiga

komponen utama tersebut memiliki hubungan dalam proses

yang berjalan pada aplikasi ini. Implementasi MVC dapat

dilihat pada gambar 13 dibawah ini:

Gambar 15. Implementasi Model View Controler (MVC)

Dari Gambar 15 diatas adalah gambar arsitektur dari

Model View Controller (MVC), dapat dijelaskan bahwa

pertama-tama user akan membuka Url, pada kontrol

pengolahan data akan memproses permintaan yang dilakukan

oleh user tersebut dengan mengirimkan data kepada model

yang menangani database setelah itu akan dikembalikan

Page 8: Bab 4 Hasil dan Pembahasan 4.1 Implementasi Aplikasi ...repository.uksw.edu/bitstream/123456789/2375/5/T1_672005176_BAB IV.pdf · Implementasi (Simpeg) dan Penjelasan koding berdasarkn

73

kepada kontrol pengolahan data dan setelah diproses

selanjutnya akan menampilkan view aplikasi sesuai dengan

permintaan user tersebut, setelah itu di proses dikembalikan

kepada user tersebut.

Dari arsitektur yang telah dibuat dapat dilihat direktori

dalam file htddocs adalah tempat dimana model dari arsitektur

Model View Controller (MVC) berada dan dapat dilihat pada

gambar berikut:

Gambar 16. Model View Controller (MVC) pada direktori

Dari Gambar 16 adalah cara kerja arsitektur MVC

pada framework Zend yang telah dibuat dijelaskn bahwa

ketika suatu alamat url dibuka, sebenarnya yang diakses

adalah sebuah controller yang berada dalam lokasi

controllers) dan aksi (berada dalam class controller) serta

akan mengirimkan variabel dan nilai variabel jika ada. Secara

Page 9: Bab 4 Hasil dan Pembahasan 4.1 Implementasi Aplikasi ...repository.uksw.edu/bitstream/123456789/2375/5/T1_672005176_BAB IV.pdf · Implementasi (Simpeg) dan Penjelasan koding berdasarkn

74

default, jika tidak menuliskan nama yang dituju, maka

dianggap mengakses Controller Index (Index Controller).

Serta jika tidak jika tidak menulikskan aksinya, maka

dianggap mengakses aksi Index (indexAction). Setelah itu aksi

index action dalam IndexCotroller) akan memanggil view

dengan nama index.phtml untuk ditampilkan.

Namun, jika diketahui nama Controller, aksi dan

variabel yang dikirimkan, maka akan dilakukan proses

pengolahan data yang berupa variabel yang dituju.

Pengolahan data disini bisa saja membutuhkan atau

berhubungan dengan data dalam basis data. Oleh sebab itu

Controller akan memanggil Model yang berada dalam lokasi

Models. Hal ini disebabkan karena Contoller tidak boleh

mengandung kode program untuk mengakses basis data.

Sehingga Controller melalui aksinya akan memanggil Model,

karena didalam model terdapat fungsi-fungsi khusus untuk

penanganan basis data. Jadi, dari mekanisme kinerja MVC ini,

setiap Controller mempunyai satu folder dan setiap aksi

memiliki tampilan sendiri yang diletakan dalam folder view.

Page 10: Bab 4 Hasil dan Pembahasan 4.1 Implementasi Aplikasi ...repository.uksw.edu/bitstream/123456789/2375/5/T1_672005176_BAB IV.pdf · Implementasi (Simpeg) dan Penjelasan koding berdasarkn

75

Implementasi (Simpeg) dan Penjelasan koding berdasarkn

MVC

Tampilan Home Simpeg

Gambar 17. Tampilan Home Simpeg

Gambar 17 diatas menunjukan tampilan awal dari

aplikasi simpeg yang sudah dibuat. Tampilan awal dari

simpeg diatas menunjukan tampilan home dari aplikasi web

yang dirancang.

Kode 4 diatas dapat dijelaskan: pada baris pertama

adalah berfungsi sebagai controller, pada kode yang berada

Kode 4 pemanggilan home public function indexAction() { $this->active['a'] = 'current_page_item'; $this->view->active = $this->active; $odb = new Application_Model_DbTable_Halaman $this->view->title = 'Selamat Datang'; $this->view->konten = $odb->gethome(); $this->view->latestnews = $odb->getberita(); }

Page 11: Bab 4 Hasil dan Pembahasan 4.1 Implementasi Aplikasi ...repository.uksw.edu/bitstream/123456789/2375/5/T1_672005176_BAB IV.pdf · Implementasi (Simpeg) dan Penjelasan koding berdasarkn

76

dalam kurung kurawal adalah action body yaitu body dari

halaman home, pada baris 3 adalah aktif menu yang ada pada

menu 1, baris 4 berfungsi untuk set nilai aktif, pada baris ke 5

adalah fungsi untuk membuat model halaman, pada baris ke 6

berfungsi untuk memberikan title, baris ke 7 berfungsi

mengambil data home dari model dan pada baris 8 untuk

mengambil data berita dari model.

Kode 5 diatas dapat dijelsakan: pada baris 1adalah

untuk mengambil home, baris ke 3 berfungsi mengambil home

dari database, pada baris ke 4 berfungsi untuk membuat dalam

bentuk row dan baris ke lima berfungsi untuk mengembalikan

nilai ke pemanggil fungsi.

Penjelasan dari kode 6 adalah untuk menampilakan

halaman home.

Kode 5 Model Halaman Application_Model_DbTable_Halaman public function gethome() { $select = $this->select()->from($this,array('home')) ->where('idhalaman =?',1); $halaman = $this->fetchRow($select); return $halaman->home; }

Kode 6 untuk View <? php echo $this->konten;?> </div>

Page 12: Bab 4 Hasil dan Pembahasan 4.1 Implementasi Aplikasi ...repository.uksw.edu/bitstream/123456789/2375/5/T1_672005176_BAB IV.pdf · Implementasi (Simpeg) dan Penjelasan koding berdasarkn

77

Tampilan Home Visi & Misi

Gambar 18 Tampilan Profile Dinas BKD

Pada tampilan halaman profile Dinas BKD seperti

terlihat pada Gambar 18 diatas berisi visi dan misi dan berita

terbaru dari Dinas BKD Kabpaten Wamena. Untuk

pemanggilan halaman profile dapat dilihat pada potongan

kodie berikut:

Page 13: Bab 4 Hasil dan Pembahasan 4.1 Implementasi Aplikasi ...repository.uksw.edu/bitstream/123456789/2375/5/T1_672005176_BAB IV.pdf · Implementasi (Simpeg) dan Penjelasan koding berdasarkn

78

Dari kode 7 diatas dapat dijelaskan pada baris pertama

adalah fungsi untuk memanggil index controll profile aatau

pemanggilan halaman profile. Pada baris ke 10 berfungsi

untuk model halaman profil dan pada baris 18 kode view

index/profile .html berfungsi untuk menampilkan halaman

profile.

Kode 7 Index Controller Profile IndexController.php public function profileAction() { $this->active['b'] = 'current_page_item'; $this->view->active = $this->active; $odb = new Application_Model_DbTable_Halaman(); $this->view->title = 'Visi dan Misi'; $this->view->konten = $odb->getvisimisi(); $this->view->latestnews = $odb->getberita(); } Model => Halaman.php => Application_Model_DbTable_Halaman public function getvisimisi(){ $select = $this->select()->from($this,array('visi_misi')) ->where('idhalaman =?',1); $halaman = $this->fetchRow($select); return $halaman->visi_misi; } View => index/profile.html <div> <?php echo $this->konten;?> </div>

Page 14: Bab 4 Hasil dan Pembahasan 4.1 Implementasi Aplikasi ...repository.uksw.edu/bitstream/123456789/2375/5/T1_672005176_BAB IV.pdf · Implementasi (Simpeg) dan Penjelasan koding berdasarkn

79

Tampilan Home pegawai

Gambar 19. Tampilan Home pegawai

Pada tampilan home pegawai user dapat melihat data

pegawai yang ada pada Dinas BKD Kaabupaten Wamena

secara lengkap mulai dari Nip, Nama, Status, Pegawai, Unit.

Pada Home pegawai ini juga user dapat melihat berita terbaru

yang terdapat di kolom sebelah kiri. Berikut ini adalah kode

yang digunakan untung menampilakan halaman home

pegawai pada Gambar 19.

Kode 8 Controller home pegawai public function pegawaiAction() { $this->active['c'] = 'current_page_item'; $this->view->active = $this->active; $odb = new Application_Model_DbTable_Halaman(); $this->view->title = 'Data Pegawai'; $this->view->latestnews = $odb->getberita(); $pegawai = new Application_Model_DbTable_Pegawai(); $pensiun = $pegawai->daftarpegawai('pensiun'); $aktif = $pegawai->daftarpegawai(null); $this->view->datapegawai = array_merge($pensiun,$aktif); }

Page 15: Bab 4 Hasil dan Pembahasan 4.1 Implementasi Aplikasi ...repository.uksw.edu/bitstream/123456789/2375/5/T1_672005176_BAB IV.pdf · Implementasi (Simpeg) dan Penjelasan koding berdasarkn

80

Kode 8 diatas dapat dijelaskan bahwa publick function

pegawaiAction() pada baris pertama adalah fungsi untuk

memanggil halaman pegawai.

Berikut ini adalah kode pemanggilan untuk model

database pada tampilan home pegawai pada halaman awal.

Dari kode 9 diatas dapat dijelaskan pada baris pertama

adalah fungsi untuk palikasi model database pegawai yang

terdapat pada model tabel database aplikasi dan pada baris

kedua adalah fungsi untuk mengambil daftar pegawai dalam

database sistem.

Dari potongan kode pada kode 10 diatas adalah

menunjukan index pegawai pada tampilan home pegawai,

baris kedua berfungsi untuk menampilkan data pegawai pada

halaman daftar pegawai pada home pegawai.

Kode 9 Model Home Pegawai Application_Model_DbTable_Pegawai class Application_Model_DbTable_Pegawai extends Zend_Db_Table_Abstract { public function daftarpegawai($status) }

Kode 10 View Home Pegawai index/pegawai.html <?php if(!empty($this->datapegawai)):?> <?php $i=1;foreach($this->datapegawai as $s):?>

Page 16: Bab 4 Hasil dan Pembahasan 4.1 Implementasi Aplikasi ...repository.uksw.edu/bitstream/123456789/2375/5/T1_672005176_BAB IV.pdf · Implementasi (Simpeg) dan Penjelasan koding berdasarkn

81

4.4 Implementasi (Simpeg)

Tampilan Home

Gambar 20. Tampilan Home Simpeg BKD Kabupaten Wamena

Gambar 20 diatas menunjukan tampilan awal dari

aplikasi simpeg yang sudah dibuat. Tampilan awal dari

simpeg diatas menunjukan tampilan home dari aplikasi web

yang dibuat, dan ada juga profile kantor, pegawai dan kontak

terhadap Dinas BKD Kabupaten Wamena. Pada menu konten

terdapat informasi berita terbaru dan informasi kepegawaian

pada dinas BKD Kabupaten Wamena, pada menu konten juga

terdapat menu gallery, menu link tautan dan menu log in

sistem.

Page 17: Bab 4 Hasil dan Pembahasan 4.1 Implementasi Aplikasi ...repository.uksw.edu/bitstream/123456789/2375/5/T1_672005176_BAB IV.pdf · Implementasi (Simpeg) dan Penjelasan koding berdasarkn

82

Tampilan Menu Administrator

Gambar 21. Tampilan Halaman depan administrator

Pada Gambar 21 diatas adalah gambar halaman

tampilan awal untuk administrator setelah melakukan log in

terlebih dahulu sebagai administrator. Pada tampilan ini

administrator dapat melakkan penambahan informasi,

pengeditan dan penyimpanan informasi yang menyangkut

kegiatan administratif yang berlangsung di lingkungan Dinas

BKD.

Page 18: Bab 4 Hasil dan Pembahasan 4.1 Implementasi Aplikasi ...repository.uksw.edu/bitstream/123456789/2375/5/T1_672005176_BAB IV.pdf · Implementasi (Simpeg) dan Penjelasan koding berdasarkn

83

Tampilan Menu Kepala Dinas

Gambar 22. Tampilan Form Kepala Dinas

Pada Gambar 22 diatas adalah gambar menu daftar

pegawai pada halaman utama dari Kepala Dinas, setelah

membuka halaman utama home kepala dinas boleh melihat

daftar seluruh pegawai yang ada pada Kantor Dinas BKD.

Page 19: Bab 4 Hasil dan Pembahasan 4.1 Implementasi Aplikasi ...repository.uksw.edu/bitstream/123456789/2375/5/T1_672005176_BAB IV.pdf · Implementasi (Simpeg) dan Penjelasan koding berdasarkn

84

Tampilan Home Pegawai

Gambar 23. Tampilan awal pegawai

Gambar 23 diatas adalah tampilan awal bagi pegawai

dimana pegawai setelah melakukan log in dapat melihat menu

yang ada pada aplikasi simpeg untuk pegawai.

4.5 Pengujian Aplikasi

Pada bagian ini dilakukan pengujian aplikasi yang

dibuat menggunakan framework Zend. Pengujian dilakukan

dengan menggunakan data-data yang ada pada Kantor Dinas

BKD Kabupaten Wamena.

Page 20: Bab 4 Hasil dan Pembahasan 4.1 Implementasi Aplikasi ...repository.uksw.edu/bitstream/123456789/2375/5/T1_672005176_BAB IV.pdf · Implementasi (Simpeg) dan Penjelasan koding berdasarkn

85

Form Log in

Tampilan awal pada saat user mengakses aplikasi

adalah halaman log in. Penanganan log in dibuat

menggunakan kode program dalam framework Zend dan

mendapatkan hasi seperti yang terlihat pada Gambar 24

dibawah ini:

Gambar 24 Form log in user

Penjelasan dari Gambar 24 diatas adalah setelah user

melihat tampilan awal pada tampilan home, user dapat

melakukan log in kedalam system diamana login system

hanya ada tiga pengguna yang memiliki hak akses yaitu

administrator, kepala dinas dan pegawai. Untuk melakukan

log in, user harus memiliki User Name, password, dan log in

sebagai administraor, kepala dinas atau pegawai yang terdapat

dalam database sistem. Berikut dibawah ini adalah potongan

koding untuk form log in:

Page 21: Bab 4 Hasil dan Pembahasan 4.1 Implementasi Aplikasi ...repository.uksw.edu/bitstream/123456789/2375/5/T1_672005176_BAB IV.pdf · Implementasi (Simpeg) dan Penjelasan koding berdasarkn

86

Penjelasan dari kode 11 diatas adalah setelah user

melihat tampilan awal pada tampilan home, user dapat

melakukan log in kedalam sistem diamana login sistem hanya

ada tiga pengguna yang memiliki hak akses yaitu

administrator, kepala dinas dan pegawai. Untuk melakukan

log in, user harus memiliki akun sendiri.

Kode 11. Proses log in user public function init() { /* Form Elements & Other Definitions Here ... */ $this->setName('login') ->setAttrib('onsubmit','return checkempty()') ->setAttrib('title','.: Login :.'); $username = new Zend_Form_Element_Text('username'); $username->setLabel('Username : ') ->setRequired(true) ->setAttrib('onkeyup','return checknum(this,this.value)') ->addErrorMessage('*Kosong'); $password = new Zend_Form_Element_Password('password'); $password->setLabel('Password : ') ->setRequired(true) ->addErrorMessage('*Kosong'); $pilihan = new Zend_Form_Element_Select('pilihan'); $opt = array(''=>'-pilih-','pegawai'=>'Pegawai','kadinas'=>'Kepala Dinas','administrator'=>'Administrator'); $pilihan->setLabel('Login Sebagai : ') ->setRequired(true) ->addMultiOptions($opt) ->addErrorMessage('*kosong'); $submit = new Zend_Form_Element_Button('submit'); $submit->setLabel('Masuk') ->setAttrib('class','ui') ->setAttrib('type','submit') ->removeDecorator('DtDdWrapper') >setDecorators(array('ViewHelper',array('HtmlTag',array('tag'=>'div')))); $this->addElements(array($username,$password,$pilihan,$submit ));

Page 22: Bab 4 Hasil dan Pembahasan 4.1 Implementasi Aplikasi ...repository.uksw.edu/bitstream/123456789/2375/5/T1_672005176_BAB IV.pdf · Implementasi (Simpeg) dan Penjelasan koding berdasarkn

87

Tampilan form administrator

Gambar 25. Tampilan form administrator saat memili daftar pegawai

Jika user sebagai administrator maka akan ditampilkan

halaman utama untuk administrator seperti yang terlihat pada

Gambar 25.

Form administrator untuk proses daftar pegawai

Gambar 26. Form Daftar pegawai bagi administrator

Page 23: Bab 4 Hasil dan Pembahasan 4.1 Implementasi Aplikasi ...repository.uksw.edu/bitstream/123456789/2375/5/T1_672005176_BAB IV.pdf · Implementasi (Simpeg) dan Penjelasan koding berdasarkn

88

Pada form daftar pegawai dalam Gambar 26 diatas

adalah pada menu berisi home, pegawai yang berisi daftar

pegawai dan daftar pegawai pensiun, pada menu juga terdapat

pengumuman serta akun dan log out. Pada menu daftar

pegawai terdapat nama pegawai yang berwarna merah, jika

kursor diarahkan pada nama tersebut maka akan tampil menu

dari riwayat kepegawaian dan biodata dari pegawai yang

dituju.

Form tambah pegawai

Gambar 27. Form tamba pegawai dan biodata pegawai

Page 24: Bab 4 Hasil dan Pembahasan 4.1 Implementasi Aplikasi ...repository.uksw.edu/bitstream/123456789/2375/5/T1_672005176_BAB IV.pdf · Implementasi (Simpeg) dan Penjelasan koding berdasarkn

89

Pada Gambar 27 adalah form tambah pegawai dan

biodata pegawai yang hanya bisa diakses oleh seorang

administrator dalam menginputkan data-data dari staf

kepegawaian yang bekerja pada Dinas BKD kabupaten

Wamena dan juga proses hapus, dan simpan data dari

pegawai. Pada form tambah data pegawai terdapat menu

pegawai dan dalam menu pegawai juga terdapat dua sub menu

yaitu daftar pegawai dan daftar pegawai pensiun, pada tab

berikutnya adalah menu pengumuman yang akan diisi oleh

administrator untuk di umumkan, pada tab berikutnya adalah

menu akun dimana administrator dapat mengganti user name

atau password dan jabatan dari admin sendiri, tombol biru

yang berada diujung adalah tombol unutk log out dari form

administrator.

Form tampilan utama Kepala Dinas

Gambar 28. Tampilan form utama Kepala Dinas

Page 25: Bab 4 Hasil dan Pembahasan 4.1 Implementasi Aplikasi ...repository.uksw.edu/bitstream/123456789/2375/5/T1_672005176_BAB IV.pdf · Implementasi (Simpeg) dan Penjelasan koding berdasarkn

90

Pada form tampilan utama Kepala Dinas seprti yang

terlihat pada Gambar 28 diatas berisi halaman awal yaitu

home yang berisi daftar pengumuman dan berita terbaru. Pada

menu pegawai terdapat sub menu yaitu daftar pegawai dan

daftar pegawai yang pensiun, berikutnya juga terdapat menu

akun yang berisi nama kepala dinas, user name, pasword, dan

jabatan dimana user sebagai kepala dinas dapat merubahnya

kapan saja.

Menu Daftar Pegawai pada tampilan form Kepala Dinas

Gambar 29. Tampilan Menu Daftar Pegawai

Dapat dilihat pada Gambar 29 diatas adalah tampilan

sub menu dari menu pegawai yaitu daftar pegawai dimana

kepala dinas dapat melihat seluruh pegawai pada Dinas BKD

dan juga dapat mengedit menambah atau menghapus

pegawainya. Pada daftar pegawai jika kursor diarahkan pada

Page 26: Bab 4 Hasil dan Pembahasan 4.1 Implementasi Aplikasi ...repository.uksw.edu/bitstream/123456789/2375/5/T1_672005176_BAB IV.pdf · Implementasi (Simpeg) dan Penjelasan koding berdasarkn

91

nama pegawai maka secara otomatis sistem akan

menampilkan seluruh biodata dari pegawai yang dituju, selain

itu juga tersedi menu untuk melakukan log out.

Form tampilan utama pegawai Setlah melakukan log in pegawai sistem akan

menampilkan tampilan utama dari form utama pegawai,

seperti yang terlihat pada gambar 30 .

Menu Form pegawai

Gambar 30. Form pegawai pada menu pegawai Dapat dilihat dalam Gambar 30 bahwa didalam form

utama pegawai terdapaat menu pegawai yang berisi biodata

pegawai, riwayat kepangkatan, riwayat jabatan, riwayat

pendidikan, riwayat pekerjaan, riwayat cuti, absensi, dan data

keluarga dan berikutnya ada menu akun yang berisikan

Page 27: Bab 4 Hasil dan Pembahasan 4.1 Implementasi Aplikasi ...repository.uksw.edu/bitstream/123456789/2375/5/T1_672005176_BAB IV.pdf · Implementasi (Simpeg) dan Penjelasan koding berdasarkn

92

personalisasi dari pegawai dan pegawai juga dapat melakukan

perubahan pasword dan user name melalui menu ini. Pada

tampilan form pegawai juga disediakan tombol untuk log out

dari aplikasi layanan pegawai.

Dalam form tampilan utama pegawai seperti pada

Gambar 30 diatas juga dapat dilihat menu yang terdapat

dalam form tampilan pegawai adalah menu akun

(personalisasi) dari pegawai. Kode menu personalisasi sperti

pada potongan brikut ini:

Page 28: Bab 4 Hasil dan Pembahasan 4.1 Implementasi Aplikasi ...repository.uksw.edu/bitstream/123456789/2375/5/T1_672005176_BAB IV.pdf · Implementasi (Simpeg) dan Penjelasan koding berdasarkn

93

Kode menu personalisasi

Pada kode menu personalisasi diatas fungsi yang akan

memanggil class dari form personalisasi pada zend framework

Kode 12. Menu personalisasi <?php class Application_Form_Personalisasi extends Zend_Form { public function init() { $this->setName('personalisasi'); $id = new Zend_Form_Element_Hidden('id'); $id->removeDecorator('Label'); $jabatan = new Zend_Form_Element_Text('jabatan'); $jabatan->setLabel('Jabatan') ->setAttrib('style','width:200px;background:#CCF') ->setAttrib('onkeydown','return false'); $nama = new Zend_Form_Element_Text('nama'); $nama->setLabel('Nama') ->setRequired(true) ->addFilter('StripTags') ->addFilter('StringTrim') ->addValidator('NotEmpty') ->setAttrib('style','width:200px') ->addErrorMessage('*Nama tidak boleh kosong'); $username = new Zend_Form_Element_Text('username'); $username->setLabel('Username')->setRequired(true) ->addFilter('StripTags') ->addFilter('StringTrim') ->addValidator('NotEmpty') ->setAttrib('style','width:200px') ->addErrorMessage('*Username tidak boleh kosong'); $password = new Zend_Form_Element_Text('password'); $password->setLabel('Password') ->setRequired(true) ->addFilter('StripTags') ->addFilter('StringTrim') ->addValidator('NotEmpty') ->setAttrib('style','width:200px') ->addErrorMessage('*Password tidak boleh kosong'); ); $submit = new Zend_Form_Element_Button('submit'); $submit->setLabel('Ubah') ->setAttrib('class','save') ->setAttrib('type','submit') ->removeDecorator('DtDdWrapper'); $this->addElements(array($id,$nama,$jabatan, $username,$password,$submit)); }}

Page 29: Bab 4 Hasil dan Pembahasan 4.1 Implementasi Aplikasi ...repository.uksw.edu/bitstream/123456789/2375/5/T1_672005176_BAB IV.pdf · Implementasi (Simpeg) dan Penjelasan koding berdasarkn

94

adalah class Application_Form_Personalisasi extends

Zend_Form dimana form personalisasi harus extends Zend

_Form yaitu fungsi tersebut akan memanggil class aplikasi

untuk personalisasi yang sudah dibuat

Form tampilan personalisasi pegawai

Gambar 31. Form tampilan personalisasi pegawai

Dapat dilihat pada Gambar 31 bahwa pada menu

personalisasi pegawai terdapat data akun dari pegawai yang

bisa dilakukan untuk proses log in, pada tampilan ini juga

user dapat menggunakan tombol ubah untuk mengubah

personalisasi dari pegawai jika itu diperlukan oleh pegawai

yang bersangkutan. Pada tampilan personalisasi pegawai juga

Page 30: Bab 4 Hasil dan Pembahasan 4.1 Implementasi Aplikasi ...repository.uksw.edu/bitstream/123456789/2375/5/T1_672005176_BAB IV.pdf · Implementasi (Simpeg) dan Penjelasan koding berdasarkn

95

disediakan tombol log out untuk keluar dari aplikasi Simpeg

yang sudah dirancang.

4.6 Analisa Unjuk Kerja Aplikasi

Analisa untuk Kerja aplikasi menggunakan bantuan

Software Web Aplicationa Testing 7.5 pro (WAPT). WAPT

sendiri merupakan alat uji yang dilakukan untuk menguji

performa sebuah aplikasi web, server web yang berjalan pada

jaringan internet dengan antar muka web. Hasil dari pengujian

menggunakan software ini dapat digunakan untuk

menganalisa performa dari sebuah aplikasi web. Pada gambar

dibawah ini disajikan gambar grafik yang menunjukan hasil

pengujian menggunakan WAPT yang di simulasikan

menggunakan 8 user.

Page 31: Bab 4 Hasil dan Pembahasan 4.1 Implementasi Aplikasi ...repository.uksw.edu/bitstream/123456789/2375/5/T1_672005176_BAB IV.pdf · Implementasi (Simpeg) dan Penjelasan koding berdasarkn

96

Gambar 32 . Grafik 1 unjuk kerja aplikasi

Dengan grafik pada Gambar 32 , grafik 1 diatas dapat

dijelaskan tentang unjuk kerja aplikasi yang meliputi waktu

response yg dibutuhkan oleh seorang user untuk menunggu

response dari server, waktu download yang dibutuhkan oleh

user dan banyaknya halaman web yang dapat dieksekusi tiap

detik, dan user yang aktif dalam mengakses aplikasi. Waktu

eksekusi (sumbu x) berbanding dengan waktu untuk

melakukan pengujian aplikasi (sumbu y).

- Pages per Second

Pages per Second yang dimaksud adalah banyaknya

halaman web yang dapat dieksekusi tiap detik. Hal ini terlihat

pada grafik gambar diatas dimana tiap interval waktu tertentu

terjadi perubahan pages per second berkisar antara 0,00:00 -0,

06:39 detik.

Page 32: Bab 4 Hasil dan Pembahasan 4.1 Implementasi Aplikasi ...repository.uksw.edu/bitstream/123456789/2375/5/T1_672005176_BAB IV.pdf · Implementasi (Simpeg) dan Penjelasan koding berdasarkn

97

- Avg response time, sec

Avg response time, sec yang dimaksud adalah waktu

rata-rata response dari banyaknya halaman web yang dapat

dieksekusi tiap detik. Hal ini terlihat pada Gambar 32 grafik

unjuk kerja aplikasi yaitu berkisar anatara 0:00:05-0:01:19 per

detik.

- Active Users

Active user yang dimaksud adalah bayaknya user yang

aktif dalam mengakses aplikasi web. Pada percobaan ini

dilakukan terhadap 8 user.

Analisa pengukuran bandwidth

Hasil analisa dari grafik pengujian aplikasi, dapat

diketahui semakin banyak user yang melakukan aktivitas

semakin lama resposnse dari server.

Gambar grafik pengukuran bandwidth dari seluruh

aktifitas pada aplikasi dapat di lihat pada grafik pengukurran

bandwith dibawah ini:

Page 33: Bab 4 Hasil dan Pembahasan 4.1 Implementasi Aplikasi ...repository.uksw.edu/bitstream/123456789/2375/5/T1_672005176_BAB IV.pdf · Implementasi (Simpeg) dan Penjelasan koding berdasarkn

98

Gambar 33 grafik 2. Pengukuran bandwith

 Dengan grafk pada Gambar 33 grafik 2 pengukuran

bandwith dapat dijelaskan tentang bandwith aplikasi yang

berjalan pada jaringan meliuti kecepatan server dalam

penerimaan dan pengiriman, total kecepatan pengiriman dan

penerimaan pada user, dan user yang aktif pada jaringan.

- Sent

Hasil pada grafik menunjukan berapa banyak kbits

per second yang dikirim oleh server. Pengiriman data yang

dikirimkan oleh server cenderung tidak stabil.

- Receive

Hasil pada grafik menunjukan berapa banyak kbits

perdetik yang diterimah oleh server. Penerimaan data yang

dikirimkan oleh user kepada server cenderung tidak stabil.

Page 34: Bab 4 Hasil dan Pembahasan 4.1 Implementasi Aplikasi ...repository.uksw.edu/bitstream/123456789/2375/5/T1_672005176_BAB IV.pdf · Implementasi (Simpeg) dan Penjelasan koding berdasarkn

99

- Sent per User

Sent per User yang dimaksudkan adalah kecepatan

pengiriman pada user. Hal iini terlihat pada grafik 2 dimana

untuk tiap interval waktu tertentu terjadi perubahan

pengiriman.

- Receive per per User

Receive per user yang dimaksudkan adalah kecepatan

penerimaan pada masing masing user yang terliha pada

grafik 2 dimana pada interval tertentu terjadi perubahan

penerimaan.

- Active user

Active user yang dimaksud adalah pengguna yang

sedang melakukan proses pengiriman atau penerimaan pada

sistem yang telah di buat. Interval waktu sering berubah dan

berkisar antara 0:00:00 – 0:01:19 per detik