RANCANG BANGUN ELECTRONIC OFFICE (E-OFFICE) DENGAN TEKNOLOGI AJAX.

SKRIPSI

Disusun Oleh :

MUHAMMAD HERMAWAN 0434010222

JURUSAN TEKNIK INFORMATIKA

FAKULTAS TEKNOLOGI INDUSTRI

UNIVERSITAS PEMBANGUNAN NASIONAL “VETERAN”

JAWA TIMUR

SKRIPSI

Diajukan Untuk Memenuhi Sebagai Persyaratan

Dalam Memperoleh Gelar Sarjana Komputer

Jurusan Teknik Informatika

Disusun oleh :

MUHAMMAD HERMAWAN

NPM. 0434010222

JURUSAN TEKNIK INFORMATIKA

FAKULTAS TEKNOLOGI INDUSTRI

UNIVERSITAS PEMBANGUNAN NASIONAL “VETERAN”

JAWA TIMUR

RANCANG BANGUN ELECTRONIC OFFICE (E-OFFICE)

DENGAN TEKNOLOGI AJAX

Disusun Oleh :

MUHAMMAD HERMAWAN

NPM. 0434010222

Telah disetujui untuk mengikuti Ujian Negara Lisan Gelombang II Tahun Akademik 2010/2011

Pembimbing Utama Pembimbing Pendamping

Gede Susrama MD, ST, M.Kom Wahyu S.J. Saputra, S.Kom NPT. 270 060 640 210 NPT. 386 081 002 951

Mengetahui,

Ketua Jurusan Teknik Informatika Fakultas Teknologi Industri UPN ”Veteran” Jawa Timur

Basuki Rachmat, S.Si, MT NIP. 369 070 602 13

DENGAN TEKNOLOGI AJAX

Disusun Oleh :

MUHAMMAD HERMAWAN

NPM. 0434010222

Telah dipertahankan di hadapan dan diterima oleh Tim Penguji Skripsi Jurusan Teknik Informatika Fakultas Teknologi Industri

Universitas Pembangunan Nasional ”Veteran” Jawa Timur Pada Tanggal 26 Nopember 2010

Pembimbing : Tim Penguji :

1. 1.

Gede Susrama MD, ST, M.Kom Gede Susrama MD, ST, M.Kom NPT. 270 060 640 210 NPT. 270 060 640 210

2. 2.

Wahyu S.J. Saputra, S.Kom Wahyu S.J. Saputra, S.Kom NPT. 386 081 002 951 NPT. 386 081 002 951

3.

Abdul Kadir, S.Kom

NPT. Mengetahui,

Dekan Fakultas Teknologi Industri

Universitas Pembangunan Nasional ”Veteran” Jawa Timur

Ir. Sutiyono, MT

FAKULTAS TEKNOLOGI INDUSTRI

KETERANGAN REVISI

Kami yang bertanda tangan di bawah ini menyatakan bahwa mahasiswa berikut:

Nama : Muhammad Hermawan

NPM : 0434010222

Jurusan : Teknik Informatika

Telah mengerjakan revisi/ tidak ada revisi*) pra rencana (design)/ skripsi ujian lisan gelombang II, TA 2010/2011 dengan judul:

”RANCANG BANGUN ELECTRONIC OFFICE (E-OFFICE)DENGAN TEKNOLOGI AJAX”

Surabaya, 10 Desember 2010 Dosen Penguji yang memerintahkan revisi:

{

}

1) Gede Susrama MD, ST, M.Kom

NPT. 270 060 640 210

{

}

2) Wahyu S.J. Saputra, S.Kom NPT. 386 081 002 951

{

}

3) Abdul Kadir, S.Kom NPT.

Mengetahui,

Pembimbing Utama Pembimbing Pendamping

Gede Susrama MD, ST, M.Kom Wahyu S.J. Saputra, S.Kom

KATA PENGANTAR

Dengan mengucapkan syukur kepada Tuhan Yang Maha Esa, atas rahmat

dan hidayah-Nya sehingga penulis dapat menyelesaikan tugas akhir dengan judul :

” RANCANG BANGUN ELECTRONIC OFFICE (E-OFFICE) DENGAN TEKNOLOGI AJAX ” Shalawat dan salam bagi Nabi Muhammad SAW beserta

keluarga dan para sahabatnya.

Penyelesaian tugas akhir ini tentunya tidak lepas dari bantuan, bimbingan,

dorongan dan doa dari berbagai pihak. Oleh karena itu, penulis mengucapkan

terima kasih yang sebanyak - banyaknya kepada :

1. Bapak Ir. Sutiyono, MT selaku Dekan Fakultas Teknologi Industri.

2. Bapak Basuki Rahmat, S.Si,MT selaku Ketua Jurusan Teknik Informatika.

3. Bapak Gede Susrama, MD, ST, M.Kom. selaku Pembimbing I. Terima

kasih banyak atas pengarahan, bimbingan, ilmu dan waktunya selama ini.

4. Bapak Wahyu S.J. Saputra, S.Kom. selaku Pembimbing II. Terima kasih

banyak atas pengarahan, bimbingan, ilmu dan waktunya selama ini.

5. Bapak Nur Cahyo Wibowo, S.Kom, M.Kom selaku Ketua Jurusan Sistem

Informasi

6. Bapak Chrystia Aji Putra, S.Kom selaku PIA tugas akhir jurusan TF

7. Bapak dan Ibu Dosen Jurusan Teknik Informatika yang telah memberikan

bekal ilmu pengetahuan.

ii

8. Teman-teman di kampus antara lain: Saefudin Esa, Yaldi, Erdian, Arif

Muchyidin, Ma’ruf, Arif Bahtiar, Iqbal, Helmy, Beny, Ucup, Fajar dan

teman-teman lain yang tidak bisa penulis sebutkan satu per satu terima

kasih atas kebersamaannya selama ini.

9. Ayahanda dan Ibunda tercinta, atas kasih sayang, doa dan dukungannya

yang selalu mengalir hingga detik ini. Semoga Allah SWT mengumpulkan

kita bersama kelak di surga.

10.Calon Istriku Annisa Fatmasyari beserta keluarganya yang tidak henti –

hentinya memberikan doa, dukungan dalam mengerjakan tugas akhir ini.

Penulis menyadari bahwa pembuatan laporan tugas akhir ini masih banyak

kekurangan dan kesempurnaannya. Seperti kata pepatah “Tak Ada Gading Yang

Tak Retak”, oleh sebab itu segala saran dan kritik yang bersifat membangun sangat penulis harapkan dari Bapak atau Ibu dosen pembimbing maupun dari

rekan-rekan sekalian demi perbaikan dan kesempurnaan laporan ini.

Akhirnya penulis berharap mudah-mudahan laporan tugas akhir ini dapat

bermanfaat bagi kita semua.

Surabaya, Nopember 2010

Muhammad Hermawan 0434010222

Kata pengantar ... i

Daftar isi ... iii

BAB I PENDAHULUAN ... 1.1 Latar Belakang ... 1

1.2 Perumusan Masalah ... 2

1.3 Batasan Masalah ... 2

1.4 Tujuan Penelitian ... 3

1.5 Manfaat Penelitian ... 3

1.6 Metodologi Penelitian ... 3

1.7 Sistematika Penulisan ... 5

BAB II TINJAUAN PUSTAKA ... 2.1 Konsep Dasar Website ... 7

2.1.1 Komponen Penyusunan Web ... 7

2.2 E-Office... 8

2.3 HTML ... 10

2.4 PHP ... 11

2.5 MySQL... 14

2.6 AJAX ... 20

2.7 Interaksi Manusia dan Komputer ... 25

BAB III ANALISA DAN PERANCANGAN SISTEM ... 3.1 Identifikasi Masalah... 29

3.2 Peracangan Sistem ... 29

3.2.1 Flowchart ... 30

3.2.2 Data Flow Diagram (DFD) ... 31

3.2.3 Entity Relationship Diagram (ERD) ... 36

3.3 Perancangan Antar Muka... 38

3.3.1 Tampilan Halaman Utama ... 38

3.3.2 Tampilan Halaman Surat ... 39

3.3.3 Tampilan Halaman Inventori ... 39

3.3.4 Tampilan Halaman Histori... 40

3.3.5 Tampilan Halaman Karyawan ... 40

BAB IV IMPLEMENTASI SISTEM... 4.1 Lingkungan Implementasi... 42

4.2 Implementasi Antarmuka... 42

4.2.1 Halaman Utama ... 42

4.2.2 Halaman Surat... 43

BAB V

UJI COBA DAN EVALUASI

5.1 Lingkungan Uji Coba... 47

5.2 Skenario Uji Coba... 47

5.3 Pelaksanaan Uji Coba ... 48

5.3.1 Uji Coba Membuka Setiap Tampilan Aplikasi ... 48

5.3.2 Uji Coba Menyimpan Data Surat... 54

5.3.3 Uji Coba Maintenance Data Inventori ... 59

5.3.4 Uji Coba Melakukan Perubahan Data Karyawan ... 64

5.4 Evaluasi... 66

BAB VI PENUTUP…... 6.1 Kesimpulan ... 67

6.2 Saran ... 68

DAFTAR PUSTAKA ... 69

Gambar 2.1 Arsitektur Model Tradisional... 21

Gambar 2.2 Arsitektur Model AJAX... 21

Gambar 2.3 Teknologi di balik AJAX... 23

Gambar 3.1 Flowchart website ... 31

Gambar 3.2 Context Diagram Aplikasi E-Office ... 32

Gambar 3.3 DFD Level 1 Aplikasi E-Office ... 33

Gambar 3.4 DFD Level 2 Pembuatan Data Aplikasi... 34

Gambar 3.5 DFD Level 2 Pencatatan Korespondensi dan Inventori ... 35

Gambar 3.6 DFD Level 2 Melihat Historis Inventori dan Korespondensi... 36

Gambar 3.7 CDM Aplikasi E-Office ... 37

Gambar 3.8 PDM Aplikasi E-Office ... 37

Gambar 3.9 Desain Tampilan Halaman Utama ... 38

Gambar 3.10 Desain Tampilan Halaman Surat ... 39

Gambar 3.11 Desain Tampilan Halaman Inventori ... 39

Gambar 3.12 Desain Tampilan Halaman Histori... 40

Gambar 3.13 Desain Tampilan Halaman Karyawan ... 40

Gambar 4.1 Tampilan Utama Aplikasi ... 43

Gambar 4.2 Halaman Surat... 43

Gambar 4.3 Halaman Inventori... 44

Gambar 4.4 Tampilan Halaman Histori Surat ... 45

Gambar 4.5 Halaman Histori Inventori ... 45

Gambar 4.6 Halaman Karyawan... 46

Gambar 5.1 Spesifikasi Perangkat Keras Uji Coba ... 47

Gambar 5.2 Tampilan Utama Aplikasi ... 49

Gambar 5.3 Tampilan Halaman Surat ... 49

Gambar 5.4 Menu Pengaturan Tampilan ... 50

Gambar 5.5 Tampilan Home ... 50

Gambar 5.6 Halaman Histori Surat... 51

Gambar 5.7 Halaman Kategori Surat... 51

Gambar 5.8 Halaman Inventori... 52

Gambar 5.9 Halaman Histori Inventori ... 52

Gambar 5.10 Halaman Jenis Barang... 53

Gambar 5.11 Halaman Karyawan... 53

Gambar 5.12 Tampilan Halaman Surat ... 54

Gambar 5.13 Form Penambahan Data Surat ... 55

Gambar 5.14 Fitur Pemilihan Tanggal ... 55

Gambar 5.15 Form Edit Data Surat ... 56

Gambar 5.16 Form Seleksi Data Surat Ditampilkan ... 56

Gambar 5.17 Tampilan Histori Surat... 57

Gambar 5.18 Form Seleksi Data... 57

Gambar 5.19 Halaman Kategori Surat... 58

Gambar 5.20 Form Tambah Kategori Surat ... 58

vi

Gambar 5.25 Form Seleksi Data Histori Inventori ... 61

Gambar 5.26 Form Tambah Histori Inventori ... 62

Gambar 5.27 Form Edit Histori Inventori ... 62

Gambar 5.28 Tampilan Jenis Barang... 63

Gambar 5.29 Form Tambah Jenis Barang ... 63

Gambar 5.30 Form Jenis Barang Baru... 64

Gambar 5.31 Tampilan Data Karyawan ... 64

Gambar 5.32 Form Tambah Karyawan ... 65

ABSTRAK

Siklus kinerja dalam suatu perusahaan tak akan terlepas dari proses pencatatan surat-menyurat atau yang dikenal dengan korespondensi. Kegiatan-kegiatan dalam suatu perusahaan umumnya diawali dengan Kegiatan-kegiatan korespondensi. Salah satu kegiatan dalam perusahaan tersebut adalah proses keluar masuk barang. Oleh karena itu sebelum terjadi proses keluar masuk barang, dilakukan kegiatan korespondensi terlebih dahulu.

Apabila korespondensi telah dilakukan dengan baik maka kegiatan keluar masuk barang dapat dilakukan. Hal ini akan menunjukkan bahwa sistem keluar masuk barang dalam perusahaan tersebut telah berjalan dengan baik. Sedangkan hasil korespondensi tersebut membantu pihak manajemen untuk memantau arus informasi yang terjadi dalam perusahaan.

Untuk itu perlu dibuat sebuah media guna membantu mempermudah proses korespondensi dan keluar masuk barang serta mengurangi penggunaan kertas. Dengan adanya media ini diharapkan juga dapat mempercepat proses pengolahan data pendukung yang dibutuhkan pihak manajemen. Apabila data pendukung dapat dihasilkan dengan cepat maka pihak manajemen juga dapat segera menarik kesimpulan akan kinerja perusahaan dalam suatu periode.

1.1 Latar belakang

Siklus kinerja dalam suatu perusahaan tak akan terlepas dari proses

pencatatan surat-menyurat atau yang dikenal dengan korespondensi.

Kegiatan-kegiatan dalam suatu perusahaan umumnya diawali dengan Kegiatan-kegiatan

korespondensi. Salah satu kegiatan dalam perusahaan tersebut adalah proses

keluar masuk barang. Oleh karena itu sebelum terjadi proses keluar masuk barang,

dilakukan kegiatan korespondensi terlebih dahulu.

Apabila korespondensi telah dilakukan dengan baik maka kegiatan keluar

masuk barang dapat dilakukan. Hal ini akan menunjukkan bahwa sistem keluar

masuk barang dalam perusahaan tersebut telah berjalan dengan baik. Sedangkan

hasil korespondensi tersebut membantu pihak manajemen untuk memantau arus

informasi yang terjadi dalam perusahaan.

Untuk itu perlu dibuat sebuah media guna membantu mempermudah

proses korespondensi dan keluar masuk barang serta mengurangi penggunaan

kertas. Dengan adanya media ini diharapkan juga dapat mempercepat proses

pengolahan data pendukung yang dibutuhkan pihak manajemen. Apabila data

pendukung dapat dihasilkan dengan cepat maka pihak manajemen juga dapat

segera menarik kesimpulan akan kinerja perusahaan dalam suatu periode.

Perkembangan teknologi informasi dan komunikasi saat ini semakin

berkembang dengan pesat. Kondisi tersebut membuat perusahaan yang tidak dapat

memanfaatkan perkembangan tersebut akan tertinggal dalam kompetisi global

yang semakin ketat. Bagi perusahaan yang dapat memanfaatkan perkembangan ini

akan siap menghadapi segala perubahan yang dapat tejadi dalam kompetisi global.

Hal ini disebabkan perusahaan akan selalu mendapat perkembangan informasi

terbaru dengan menerapkan teknologi-teknologi terbaru. Kegiatan korespondensi

yang umum pada perusahaan dilakukan secara manual dan menggunakan banyak

bahan kertas.

1.2 Perumusan Masalah

Berdasarkan latar belakang yang telah dijelaskan diatas, maka dapat

dirumuskan beberapa permasalahan dalam tugas akhir ini, yaitu :

a) Bagaimana merancang sebuah media untuk memudahkan proses

korespondensi.

b) Bagaimana merancang sebuah media untuk melakukan pencatatan

informasi keluar masuk barang.

c) Bagaimana merancang sebuah media perkantoran yang mengurangi

penggunaan bahan kertas.

1.3 Batasan Masalah

Pada pembuatan aplikasi ini perlu didefinisikan batasan masalah mengenai

sejauh mana pembuatan aplikasi ini akan dikerjakan. Beberapa batasan masalah

tersebut antara lain :

a) Aplikasi dirancang hanya menangani penyimpanan dan pendistribusian

b) Aplikasi dirancang menggunakan bahasa pemrograman PHP.

c) Aplikasi dirancang menggunakan database MySQL.

d) Beberapa bagian dari aplikasi yang dirancang akan menerapkan teknologi

Asynchronouse JavaScript and XML (AJAX).

e) Aplikasi ini diuji coba dengan melakukan hosting.

1.4 Tujuan Penelitian

Tujuan dari pembuatan media ini adalah membuat sebuah aplikasi untuk

mempermudah proses pencatatan surat-menyurat atau korespondensi dan

pencatatan informasi keluar masuk barang serta mengurangi penggunaan kertas

dalam suatu siklus pekerjaan.

1.5 Manfaat Penelitian

Tugas Akhir ini dapat menjadi salah satu media yang mempermudah proses

korespondensi dan pencatatan informasi keluar masuk barang serta penerapan

konsep perkantoran elektronik atau yang lebih dikenal dengan sebutan E-Office.

Tugas Akhir ini juga dapat menjadi salah satu referensi sumber ilmu bagi

mahasiswa yang ingin menambah pengetahuannya dalam bidang pengembangan

aplikasi khususnya bahasa pemrograman PHP serta teknologi AJAX.

1.6 Metodologi Penelitian

Langkah-langkah yang ditempuh untuk keperluan pembuatan tugas akhir ini

a) Studi Literatur

Mengumpulkan referensi baik dari buku maupun internet. Sebagai acuan

untuk referensi tentang rancang bangun e-office dengan teknologi AJAX.

b) Perancangan Sistem

Melakukan analisa awal tentang sistem yang akan dibuat yaitu suatu

pemecahan masalah yang dilakukan untuk rancang bangun e-office

dengan teknologi AJAX.

Perancangan sistem meliputi:

1) Pembuatan DFD (Data Flow Diagram) untuk menggambarkan arus

data serta proses pengolahan data yang ada pada sistem yang akan

dibuat.

2) Pembuatan dan perancangan sistem menggunakan bahasa

pemrograman PHP.

c) Implementasi dan uji coba

Melakukan uji coba pada aplikasi yang telah dibuat atau dibangun dengan

beberapa skenario mencari kelebihan dan kelemahannya. Mencoba segala

kemungkinan kesalahan yang terjadi, sehingga dapat melakukan perbaikan

serta mengatasinya dengan mempertimbangkan pada batasan atau kendala

yang ada.

d) Pembuatan Kesimpulan

Dalam bagian akhir tugas akhir dibuat kesimpulan dan saran sesuai dengan

1.7 Sistematika Penulisan

Sistematika penulisan laporan/buku pada tugas akhir ini adalah sebagai

berikut:

BAB I : PENDAHULUAN

Bab ini berisi tentang deskripsi umum skripsi yang meliputi latar

belakang, perumusan masalah, batasan masalah, tujuan dan

manfaat, serta metodologi dan sistematika pembahasan.

BAB II : TINJAUAN PUSTAKA

Bab ini berisi mengenai konsep dan teori pembelajaran yang

menjadi landasan pembuatan skripsi antara lain: Web, database

MySQL, dan bahasa pemrograman PHP, teknologi AJAX.

BAB III : ANALISA DAN PERANCANGAN SISTEM

Pada tahap ini akan dibuat deskripsi umum sistem serta dilakukan

analisa kebutuhan sistem, selain itu juga dilakukan perancangan

aplikasi yang akan dibuat, sehingga dihasilkan disain antarmuka

dan proses-prosesnya.

BAB IV : IMPLEMENTASI PROGRAM

Bab ini membahas tentang implementasi dari analisa sistem ke

dalam sebuah bahasa pemrograman sehingga terbentuk suatu

BAB V : UJI COBA DAN EVALUASI SISTEM

Bab ini menjelaskan tentang ujicoba dan evaluasi rancang bangun

e-office dengan teknologi AJAX. Khususnya pada proses penyimpanan dan distribusi surat, sehingga dapat diketahui apakah

aplikasi tersebut telah memenuhi tujuan yang diharapkan. Dari

proses ini akan didapatkan evaluasi program sehingga dapat

dilakukan suatu perbaikan.

BAB VI : KESIMPULAN DAN SARAN

Bab ini berisi tentang kesimpulan yang dapat diambil dari

permasalahan dan program dalam tugas akhir ini serta berisi

tentang saran-saran yang dapat digunakan untuk perbaikan dan

7

2.1 Konsep Dasar Website

Web merupakan salah satu layanan yang tersedia dan sekarang digunakan

secara meluas di seluruh dunia adalah layanan world wide web atau sering hanya

disebut dengan web saja. Web bisa dikatakan sebagai koleksi dokumen atau arsip

yang terdapat pada internet yang saling terhubung dan memungkinkan pengguna

untuk melihat, mencari atau mengambil informasi yang tersedia.

Website merupakan sebuah halaman statis yang hanya menampilkan informasi kepada pengguna. Pengguna dapat melihat dan mengambil informasi

yang disediakan pada website. Berbeda dengan website, web application

merupakan rangkaian halaman yang bersifat dinamis yang memungkinkan

pengguna melakukan suatu aksi pada sebuah web application. Website lebih

merupakan layanan berbasis informasi sedangkan web application merupakan

layanan berbasis task (aksi) (Sutarman 2003).

2.1.1. Komponen penyusun Web

Untuk mengembangkan sebuah halaman web baik sebagai website atau

web application perlu diperhatikan komponen penyusun sebuah halaman web. komponen penyusun ini akan bekerja sama untuk memberikan layanan web

HyperText Markup Language (HTML) dan Cascading Style Sheet (CSS) merupakan komponen-komponen yang terkait dengan penyajian informasi dalam

sebuah halaman web browser.

Web Browser merupakan aplikasi yang digunakan untuk mengakses halaman web. Contoh web browser misalnya Internet Explorer dan Netscape

Navigator. Internet Explorer dikembangkan oleh Microsoft yang merupakan perusahaan perangkat lunak terbesar di dunia pada saat ini. Sedangakan Netscape

Navigator dikembangkan oleh Netscape.

2.2. E-Office

Otomatisasi sangat berkaitan erat dengan mekanisasi dan komputerisasi.

Hal ini mengisyaratkan bahwa otomatisasi berarti penggunaan alat-alat mekanis

dan lebih khususnya komputer. Dengan kata lain, membahas otomatisasi berarti

mengupas berbagai peralatan mekanis dan komputer, tentu saja dengan tetap

memperhatikan relevansinya dengan objek yang diotomatisasi, dalam hal ini

perkantoran (Waluto, D. E., 2000).

Perkantoran, sebagaimana telah diuraikan pada sub bab latar belakang,

merupakan kegiatan yang berhubungan dengan pelayanan (services) dalam

perolehan, pencatatan, penyimpanan, penganalisaan, dan pengkomunikasian

informasi. Cakupan aktivitas perkantoran meliputi kegiatan-kegiatan seperti

pencatatan, pembuatan dan pengolahan naskah (word processing);

penyajian/display, pengelompokan/sortir, dan kalkulasi data (spreadsheet);

(appointment); presentasi; korespondensi; dokumentasi; dan sebagainya (Waluto,

D. E., 2000)

Otomatisasi perkantoran berarti pengalihan fungsi manual peralatan kantor

yang banyak menggunakan tenaga manusia kepada fungsi-fungsi otomatis dengan

menggunakan peralatan mekanis khususnya komputer. Waluto (2000)

menegaskan bahwa era otomatisasi perkantoran dimulai bersamaan dengan

berkembangnya teknologi informasi, penggunaan perangkat komputer untuk

keperluan perkantoran.

Otomatisasi perkantoran sering juga diistilahkan dengan kegiatan

perkantoran elektronis (electronic office/e-office). Perkantoran elektronis adalah

aplikasi perkantoran yang mengganti proses administrasi berbasis manual ke

proses berbasis elektronis dengan memnfaatkan fasilitas jaringan lokal (LAN).

Electronic Office (e-office) adalah suatu sistem yang berhubungan dengan administrasi, secara maya memusatkan komponen-komponen sebuah organisasi

dimana data, informasi, dan komunikasi dibuat melalui media telekomunikasi

(Waluto, D. E., 2000).

Electronic dalam E-Office dapat berarti bahwa semua pekerjaan yang berhubungan dengan administrasi perkantoran dikerjakan secara elektronis dan

menggunakan bantuan alat komunikasi dan sistem informasi. Dengan

perkembangan teknologi telekomunikasi saat ini, jaringan broadband

berkecepatan tinggi, dan internet, maka perkantoran telah menjadi elektronis

secara elektronik. Pekerjaan kantor yang selama beberapa dekade dilakukan

menerapkan kantor maya. Kantor elektronis menggunakan teknologi komunikasi

untuk menyediakan layanan administrasi perkantoran secara elektronis kepada

siapa saja, dimana saja, dan tiap saat.

Konsep yang digunakan dalam pembuatan website ini adalah konsep

Electronic Office (E-Office). Konsep E-Office ini memberi pengertian bahwa kegiatan perkantoran akan dilakukan dengan meningkatkan penerapan teknologi

informasi. Prinsip utama dalam konsep E-Office ini adalah mengurangi

penggunaan kertas dan melakukan segala komunikasi perkantoran secara

elektronik.

Perkembangan konsep E-Office ini untuk meningkatkan efektifitas dan

efisiensi kegiatan perkantoran khususnya pelayanan antar bagian. Dengan

peningkatan efektifitas dan efisiensi ini dapat menekan biaya perkantoran yang

dikeluarkan dan mengurangi penggunaan kertas secara drastic. Namun, kegiatan

pencetakan kertas tetap harus ada yang dilakukan khususnya pada dokumen yang

membutuhkan otentifikasi berupa tanda tangan.

2.3. HTML

Hypertext Markup Language (HTML) adalah suatu bahasa yang digunakan untuk menulis halaman web. HTML dirancang untuk digunakan tanpa

tergantung pada suatu platform tertentu (platform independent) (Sutarman,

2003:47). HTML merupakan pengembangan dari standar pemformatan dokumen

teks yaitu Standart Generalized Markup Language (SGML). Dokumen HTML

adalah suatu dokumen teks biasa, dan disebut sebagai markup language karena

tampilan suatu teks dan tingkat kepentingan dari teks tersebut dalam suatu

dokumen.

Ciri utama dokumen HTML adalah adanya tag dan elemen. Elemen dalam

dokumen HTML dikategorikan menjadi dua yaitu elemen <HEAD> yang

berfungsi memberikan informasi tentang dokumen tersebut dan elemen <BODY>

yang menentukan bagaimana isi suatu dokumen ditampilkan oleh browser, seperti

paragraf, list (daftar), tabel dan lain-lain. Sedangkan tag dinyatakan dengan tanda

lebih kecil “<” (tag awal) dan tanda lebih besar “>” (tag akhir). Dalam

penggunaannya sebagian besar kode HTML tersebut harus terletak di antara tag

kontainer. Yaitu diawali dengan <namatag> dan diakhiri dengan </namatag>

(terdapat tanda “/”) (Sutarman, 2003:49-50).

HTML dengan eXtensible Markup Language (XML) sama-sama

merupakan bahasa penandaan (markup language). Penandaan ini dilakukan

dengan memberi tag yang biasanya di dokumen HTML berfungsi untuk mengatur

penampilan dokumen pada browser. Sedangkan pada XML, penandaannya juga

digunakan tag, hanya saja fungsinya yang berbeda yaitu untuk menetapkan sifat

suatu informasi. Jadi, HTML digunakan untuk mengatur tampilan informasi,

sedangkan XML untuk menciptakan, berbagai, dan memproses informasi

(Sutarman, 2003:48).

2.4. PHP

Professional Home Page (PHP) adalah salah satu bahasa server-side yang didesain khusus untuk aplikasi web (Sutarman, 2003:108). PHP dapat disisipkan

dieksekusi di server, sehingga yang dikirimkan ke browser adalah ”hasil jadi”

dalam bentuk HTML, dan kode PHP yang dibuat tidak akan terlihat. Yang

membedakan PHP dengan bahasa pemrograman lain adalah adanya tag penentu,

yaitu diawali dengan “<?” atau “<?php” dan diakhiri dengan “?>”.

PHP termasuk dalam Open Source Product. Hal ini menjadikan source

code yang ada dapat dirubah dan didistribusikan secara bebas. PHP juga diedarkan dan dapat diperoleh secara gratis. PHP dapat dijalankan di berbagai web

server misalnya IIS, Apache, PWS, dan lain-lain.

Menurut Sutarman (2003:109), beberapa kelebihan dari PHP adalah

sebagai berikut:

 PHP mudah dibuat dan kecepatan akses tinggi

 PHP dapat berjalan dalam web server yang berbeda dan dalam sistem operasi yang berbeda pula. PHP dapat berjalan di sistem

operasi UNIX, Windows dan Macintosh.

 PHP diterbitkan secara gratis

 PHP juga dapat berjalan pada web server Microsoft Personal Web Server, Apache, IIS, Xitami dan sebagainya.

 PHP adalah termasuk bahasa yang embedded (bisa ditempel atau diletakkan dalam tag HTML).

 PHP termasuk server-side programming. Sistem database yang didukung oleh PHP adalah:

 Oracle

 Sybase

 MySQL

 Solid

 Generic ODBC

 Postgres SQL

PHP adalah bahasa (scripting language) yang dirancang secara khusus

untuk penggunaan pada web. PHP adalah tool Anda untuk pembuatan halaman

web dinamis, kaya akan fitur yang membuat perancangan web dan pemrograman lebih mudah, PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995.

pada waktu itu PHP masih bernama FI (Form Interpreted), yang wujudnya berupa

sekumpulan script yang digunakan untuk mengolah data form dari web. Dia juga

menyebutnya sebagai tools Professional Home Page. PHP juga mendukung

penggunaan database seperti MySQL, PostgreSQL, mSQL, Oracle. Untuk dapat

menjalankan PHP melalui browser, maka diharuskan terlebih dahulu terpasang

web server (misalnya Apache), karena PHP adalah server side scripting language, artinya adalah scripting language yang dijalankan pada sisi server. Pada PHP

tersedia untuk hampir semua platform termasuk Linux dan Windows. Seperti

halnya dengan program open source lainnya, PHP dibuat dibawah lisensi GNU

(General Public Lisence).

PHP dapat digunakan bersama dengan HTML sehingga memudahkan dalam

membangun aplikasi web. PHP juga dapat digunakan untuk melakukan perubahan

database, menciptakan database dan mengerjakan perhitungan matematika. Kode program PHP dapat ditulis menyatu dengan tag HTML dalam file. Kode PHP

disisipkan diantara tag <body> dengan tag </body> dalam tag HTML. Isi dari tag PHP merupakan script dari PHP yang akan diproses. Web server akan menjalankan PHP untuk menerjemahkan bagian halaman tersebut. Dengan kata

lain PHP mengolah data, MySQL adalah pusat data, dan HTML menampilkan

data. PHP memiliki kelebihan antara lain :

 Bahasa pemrograman PHP adalah sebuah bahasa script yang tidak melakukan sebuah kompilasi dalam penggunaannya.

 Web server yang mendukung PHP dapat ditemukan dimana-mana dari mulai IIS sampai dengan apache, dengan konfigurasi yang relatif

mudah.

 Dalam sisi pemahaman, PHP adalah bahasa scripting yang mirip dengan C++.

 Merupakan open source, artinya anda bisa mendapatkannya tanpa harus membayarnya.

 Aman, pengguna tidak melihat kode PHP, karena kode yang

ditampilkan pada browser adalah kode HTML.

2.5. MySQL

MySQL termasuk jenis Relational Database Management System

(RDBMS). Sehingga istilah seperti tabel, baris dan kolom tetap digunakan dalam

MySQL. Pada MySQL sebuah database mengandung beberapa tabel, satu tabel

Dalam konteks bahasa SQL, pada umumnya informasi tersimpan dalam

tabel-tabel yang secara logik merupakan struktur dua dimensi yang terdiri atas

baris-baris data (row atau record) yang berada dalam satu atau lebih kolom

(column). Baris pada tabel sering disebut sebagai instance dari data sedangkan

kolom sering disebut sebagai attributes atau field.

Data yang terdapat dalam tabel berupa field-field yang berisi nilai dari data

tersebut. Nilai data dalam field ini memiliki tipe sendiri-sendiri. Untuk mengelola

database MySQL ada beberapa cara yaitu melalui prompt DOS (tool command line) dan dapat juga dengan menggunakan program utility seperti PHPMyAdmin, MySQLGUI, MySQL Manager Java Based, MySQL Administrator for Windows.

Tool command line MySQL merupakan suatu shell SQL client sederhana, utiliti ini memungkinkan penggunaan secara interaktif dan non-interaktif. Untuk

menggunakan tool ini, caranya buka DOS prompt, kemudian aktifkan mysql.exe

di direktori tempat install MySQL.

SQL adalah suatu bahasa permintaan yang telah distandarkan untuk semua program pengakses database seperti oracle, postgreSQL, SQL server, dan

lain-lain. Ada beberapa fungsi yang digunakan dalam pembuatan aplikasi antara PHP

dan MySQL. Fungsi tersebut sangat erat kaitannya dengan query SQL. Akan

tetapi, kita tidak dapat langsung menggunakan perintah SQL pada script PHP.

Disini fungsi MySQL inilah yang digunakan sebagai penghubung antar SQL

sehingga query tersebut dapat dijalankan pada admin dan dapat dilihat hasilnya

oleh user.

Di dalam MySQL tersedia query untuk membuat fungsi search, jumlah,

ditulis melalui script Mysql_query dengan code select, insert, delete, update, dan

sintax-sintax lainnya. Dengan kata lain MySQL adalah sebuah sistem manajemen

database. Database adalah merupakan sekumpulan data yang terstruktur untuk menambah, mengakses, dan memproses data yang tersimpan dalam database

komputer, dibutuhkan sebuah sistem database manajemen seperti MySQL. Sejak

komputer menjadi alat yang sangat bagus untuk menangani sejumlah besar data,

sebagai utility yang stand-alone atau sebagai bagian dari suatu aplikasi.

MySQL adalah sebuah program pembuat database yang bersifat open

source, artinya siapa saja boleh menggunakannya dan tidak dicekal. MySQL sebenarnya produk yang berjalan pada platform Linux. Karena sifatnya yang open

source, MySQL dapat dijalankan pada semua platform baik Windows maupun Linux.

MySQL termasuk jenis RDBMS (Relational Database Management

System). Selain itu, MySQL juga merupakan program pengakses database yang bersifat jaringan sehingga dapat digunakan untuk aplikasi multi user (banyak

pengguna). Saat ini database MySQL telah digunakan hampir oleh semua

programmer database, apalagi dalam pemrograman web. Kelebihan lain dari

MySQL adalah dapat menggunakan bahasa Query standar yang dimiliki SQL.

Perangkat Lunak tersebut dikembangkan oleh perusahaan di Swedia yaitu MySQL

AB. MySQL tersedia sebagai perangkat lunak gratis dibawah lisensi GNU

General Public Lisence (GPL), tetapi mereka juga menjual dibawah lisensi komersial untuk kasus-kasus dimana penggunaannya tidak cocok dengan

Terdapat beberapa API Aplication Programming Interface tersedia yang

memungkinkan aplikasi-aplikasi computer yang ditulis dalam berbagai bahasa

pemrograman untuk dapat mengakses basis data MySQL antara lain : bahasa

pemrograman C, C++, C#, bahasa pemrograman Eiffel, smaltak, java, Lisp, PHP.

Sebuah antarmuka ODBC memanggil MyODBC yang memungkinkaan setiap

bahasa pemrograman yang mendukung ODBC untuk berkomunikasi dengan basis

data MySQL. Kebanyakan kode sumber MySQL dalam ANSI C.

SQL adalah suatu bahasa permintaan yang telah distandarkan untuk semua

program pengakses database seperti Oracle, PostgreSQL, SQL Server, dan

lain-lain. Ada beberapa fungsi yang digunakan dalam pembuatan aplikasi antara PHP

dan MySQL. Fungsi tersebut sangat erat kaitannya dengan query SQL. Di

dalam MySQL tersedia query untuk membuat fungsi search, jumlah, update,

ataupun edit data dari database, namun pada script PHP dapat langsung ditulis

melalui script query Mysql dengan code select, insert, delete, update, dan

sintax-sintax lainnya. Dengan kata lain MySQL adalah sebuah sistem manajemen

database. Database adalah merupakan sekumpulan data yang terstruktur untuk menambah, mengakses, dan memproses data yang tersimpan dalam database

komputer, dibutuhkan sebuah sistem database manajemen seperti MySQL. Sejak

komputer menjadi alat yang sangat bagus untuk menangani sejumlah besar data,

sebagai utility yang stand-alone atau sebagai bagian dari suatu aplikasi. Selain itu

 Portability

MySQL dapat berjalan stabil pada berbagai sistem operasi seperti

Windows, Linux, FreeBSD, Mac Os X Server, Solaris, Amiga, dan

masih banyak lagi.

 Open Source

MySQL didistribusikan secara open source (gratis), dibawah lisensi

GPL sehingga dapat digunakan secara cuma-cuma.

 Multiuser

MySQL dapat digunakan oleh beberapa user dalam waktu yang

bersamaan tanpa mengalami masalah atau konflik.

 Performance tuning

MySQL memiliki kecepatan yang menakjubkan dalam menangani

query sederhana, dengan kata lain dapat memproses lebih banyak SQL

persatuan waktu.

 Column types

MySQL memiliki tipe kolom yang sangat kompleks, seperti signed /

unsigned integer, float, double, char, text, date, timestamp, dan

lain-lain.

 Command dan functions

MySQL memiliki operator dan fungsi secara penuh yang mendukung

 Security

MySQL memiliki beberapa lapisan sekuritas seperti level subnetmask,

nama host, dan izin akses user dengan sistem perizinan yang mendetail

serta password terenkripsi.

 Scalability dan limits

MySQL mampu menangani database dalam skala besar, dengan

jumlah records lebih dari 50 juta dan 60 ribu tabel serta 5 milyar baris.

Selain itu batas indeks yang dapat ditampung mencapai 32 indeks pada

tiap tabelnya.

 Connectivity

MySQL dapat melakukan koneksi dengan client menggunakan

protokol TCP/IP, Unix soket (UNIX), atau Named Pipes (NT).

 Localisation

MySQL dapat mendeteksi pesan kesalahan pada client dengan

menggunakan lebih dari dua puluh bahasa. Meskipun demikian, bahasa

Indonesia belum termasuk didalamnya.

 Interface

MySQL memiliki interface (antar muka) terhadap berbagai aplikasi

dan bahasa pemrograman dengan menggunakan fungsi API

(Application Programming Interface).

 Clients dan tools

MySQL dilengkapi dengan berbagai tool yang dapat digunakan untuk

administrasi database, dan pada setiap tool yang ada disertakan

 Struktur tabel

MySQL memiliki struktur tabel yang lebih fleksibel dalam menangani

ALTER TABLE, dibandingkan database lainnya semacam

PostgreSQL ataupun Oracle.

2.6. AJAX

Asynchronouse JavaScript and XML (AJAX) diperkenalkan oleh Jesse James Garret dari Adaptive Path pada tahun 2005 melalui artikel yang berjudul

”AJAX: A New Approach to Web Application”. Pada artikelnya, Garret yakin

bahwa aplikasi web dapat menutup jurang pemisah antara web dan aplikasi

desktop (Sunyoto, 2007:159).

AJAX bukanlah bahasa pemrograman baru, tetapi merupakan teknik baru

penggunaan standar yang telah ada. Dengan AJAX, aplikasi web yang dibuat akan

dapat menjadi lebih baik, cepat dan menambah unsur user-friendly serta interaktif.

AJAX berbasiskan pada JavaScript dan request HTTP.

Pengembangan website model tradisional bekerja secara synchronously

antara aplikasi dengan server. Cara bekerjanya adalah web browser akan

mengirim data ke web server, selanjutnya web server akan memberi respon dan

seluruh halaman akan di-refresh. Pada model ini, web server akan memberikan

respon berisi seluruh halaman website terhadap request dari web browser. Proses

ini akan berlangsung terus sesuai dengan aktivitas dari user. Cara kerja seperti ini

akan menjadi masalah saat user menginginkan respon yang cepat dari website.

Gambar 2.1 Arsitektur Model Tradisional

Pengembangan website model AJAX bekerja secara asynchronously yang

berarti mengirim dan menerima data dari user ke server tanpa perlu me-load

kembali seluruh halaman melainkan hanya pada bagian yang diperlukan. Pada

model AJAX, aksi dari sisi klien dibagi menjadi dua bagian, yaitu layer user

interface dan layer AJAX. Ketika user mengklik sebuah link atau mengirimkan sebuah form maka input tersebut akan ditangani oleh layer AJAX dan

diinteraksikan dengan server. Kegiatan ini kemudian dilanjutkan dengan

meng-update user interface. Jadi, dalam AJAX, interaksi user interface secara logika terpisah dengan interaksi jaringan. Gambar 2.2 berikut menggambarkan arsitektur

website model AJAX.

Menurut Sunyoto (2005, 162) ada beberapa poin penting untuk

menggambarkan AJAX sebagai berikut:

 Layer AJAX tidak memerlukan komunikasi dengan server

(contohnya untuk validasi form karena dapat ditangani sepenuhnya

oleh client-side).

 Oleh karena request antara layer AJAX dan server berupa bagian kecil dari informasi (tidak komplit satu halaman) maka sering

digunakan untuk interaksi dengan database sehingga waktu render

dan waktu pengiriman menjadi pendek.

 Layer User Interface (UI) secara langsung tergantung pada respons server sehingga user dapat melanjutkan interaksi dengan sebuah halaman selama aktivitas dikerjakan di background (background

process). Berarti, untuk beberapa interaksi, waktu tunggu user hampir tidak ada.

 Komunikasi antar halaman dan server tidak selama memerlukan AJAX untuk mengubah perubahan UI. Contoh, beberapa aplikasi

menggunakan AJAX untuk notifikasi dengan halaman, tetapi tidak

melakukan apa pun terhadap response dari server.

Selanjutnya Sunyoto juga memaparkan penjelasan mengenai teknologi di

XML and XSLT

XML HttpRequest

JavaScript

XHTML and CSS XHTML

DOM

AJAX Web Application

Model

Gambar 2.3 Teknologi di balik AJAX

 Extensible HyperText Markup Language (XHTML) adalah bahasa markup seperti HTML, tetapi dengan gaya bahasa lebih baik. XHTML digunakan untuk membuat halaman web dan

dokumen-dokumen lain yang dapat ditampilkan dalam browser.

 Cascading Style Sheets (CSS) adalah sebuah mekanisme sederhana untuk memberikan style (seperti font, warna, jarak spasi, dll.)

kepada dokumen web yang ditulis dalam HTML atau XML

(termasuk beberapa variasi bahasa XML seperti XHTML dan

SVG).

 JavaScript adalah bahasa scripting kecil, ringan, berorientasi objek dan lintas platform. JavaScript tidak dapat berjalan dengan baik

sebagai bahasa mandiri, melainkan dirancang untuk ditanamkan

pada produk.

 Document Object Model (DOM) adalah sebuah Application Program Interface (API) untuk dokumen HTML dan XML. DOM menyediakan representasi dokumen secara terstruktur,

dimungkinkan untuk mengubah isi dan presentasi visual.

 Extensible Markup Language (XML) adalah bahasa markup untuk keperluan umum yang disarankan oleh W3C untuk membuat

dokumen markup keperluan khusus. Keperluan utama XML adalah

untuk pertukaran data antar sistem yang beraneka ragam.

 Extensible Stylesheet Language Transformation (XSLT) adalah sebuah bahasa berbasis XML untuk transformasi dokumen XML.

XSLT biasanya digunakan untuk mengubah skema XML ke

halaman web atau dokumen PDF.

 Objek XMLHttpRequest berkemampuan melakukan pertukaran

data secara asinkron dengan web server. AJAX menggunakan

obyek XMLHttpRequest untuk melakukan pertukaran data dengan

web server.

 JavaScript Object Notation (JSON) yaitu format pertukaran data komputer yang ringan dan mudah. Keuntungan JSON

dibandingkan dengan XML adalah pada proses penerjemahan data

menggunakan JavaScript. JavaScript dapat menerjemahkan JSON

2.7. Interaksi Manusia dan Komputer

Menurut Rizky (2006:4) Human Computer Interaction (HCI) atau Interaksi

Manusia dan Komputer (IMK) adalah sebuah disiplin ilmu yang mempelajari

desain, evaluasi, implementasi dari sistem komputer interaktif untuk dipakai oleh

manusia, beserta studi tentang faktor-faktor utama dalam lingkungan interaksinya.

Di dalam proses implementasinya IMK dipengaruhi berbagai macam faktor.

Menurut Rizky (2006:5) faktor-faktor tersebut antara lain:

1. Organisasi

Yang dimaksud sebagai organisasi dalam lingkup ini adalah tempat kerja

bagi para pengguna, yang nantinya akan membawa efek terhadap tugas serta

tanggung jawab yang harus diemban oleh pengguna. Selain itu, kebijakan dari

organisasi tersebut juga sangat mempengaruhi implementasi dari IMK.

2. Lingkungan

Lingkungan sekitar pengguna dapat menjadi sebuah faktor yang

mempengaruhi dari subyektifitas penilaian sebuah desain. Sebuah aplikasi yang

didesain dalam sebuah lingkungan yang bising atau ramai, akan sangat berbeda

dengan sebuah aplikasi yang memang ditujukan untuk pengguna yang berada

dalam lingkungan yang lebih tenang.

3. Kesehatan

Faktor yang satu ini seringkali terlupakan oleh para programmer saat

melakukan perancangan antar muka dalam kaitannya dengan IMK. Faktor

kesehatan yang dimaksud bisa berupa kombinasi warna dalam desain antar muka

bagi pengguna dengan intensitas yang sangat tinggi yang dapat mengakibatkan

yang dapat mengakibatkan kelelahan pada tangan saat bekerja dengan frekuensi

yang sangat akut.

4. Pengguna

Faktor pengguna merupakan salah satu faktor yang sangat kompleks, karena

selain dari tingkat pendidikan dan pemahaman masing-masing pengguna yang

dipastikan berbeda, faktor ini juga dipicu oleh kenyamanan yang dipastikan

subyektif dalam penilaiannya, juga faktor pengalaman dan trauma khusus bagi

para pengguna yang sebelumnya telah memakai sebuah aplikasi dengan desain

antar muka tertentu.

5. Kenyamanan

Faktor kenyamanan merupakan faktor dependan dari berbagai faktor lain,

seperti faktor lingkungan dan faktor pengguna. Faktor ini sangat relatif ukurannya

dibanding faktor yang lain.

6. Antar muka

Sebuah antar muka dalam konteks IMK bukanlah satu-satunya faktor utama

tetapi menjadi faktor yang terpenting.

7. Kendala

Dalam proses desain dan implementasi sebuah aplikasi yang dianggap ideal,

tiap tim ataupun individu yang terlibat di dalamnya pasti terlibat dengan berbagai

macam kendala yang akan menghambat proses interaksi di dalamnya. Kendala

yang dibahas dalam IMK lebih banyak mengacu kepada kendala teknis, seperti

waktu pengerjaan, biaya yang harus dikeluarkan, lingkungan yang ditempati oleh

pengguna serta peralatan atau komputer yang digunakan dalam melakukan

8. Produktifitas

Desain antar muka dapat menjadi salah satu pemicu produktifitas, tetapi bukan

menjadi satu-satunya faktor yang harus diperhitungkan. Karena dengan desain

antar muka yang dianggap nyaman oleh pengguna, diharapkan pengguna tidak

lagi dikacaukan dengan pemikiran terhadap desain antar muka aplikasi dan dapat

lebih berkonsentrasi terhadap hal lain yang lebih dapat memacu produktifitasnya.

IMK terdiri dari komponen-komponen sebagai berikut:

1. Interaksi

Yang dimaksud interaksi dalam konteks IMK adalah komunikasi apapun

yang terjadi antara manusia dan komputer. Jenis-jenis komunikasi antara lain:

command entry, menus and navigation, forms and spreadsheets, question and answer dialogue, natural language dialogue, WIMP dan direct manipulation. (Rizky, 2006:8).

2. Manusia

Dalam hal ini unsur manusia adalah pengguna yang dapat berupa seseorang

ataupun sekelompok pengguna yang bekerja dalam sebuah tim atau organisasi dan

saling berkaitan dalam mengerjakan tugas tertentu. Manusia dalam konteks IMK

merupakan faktor utama yang perlu diperhatikan dalam konteks psikologi yang

disebut sebagai cognitive psychology. Hal ini dikarenakan bahwa tiap manusia

atau pengguna berada dalam strata yang berbeda, terutama dari segi pemahaman,

level pendidikan, tradisi serta sensor indra yang dimiliki masing-masing

3. Komputer

Dalam konteks IMK, komputer bisa diartikan sebagai perangkat keras

ataupun perangkat lunak dari berbagai macam jenis yang nantinya akan

berinteraksi dengan unsur manusia. Sehingga komputer akan dipandang sebagai

sebuah alat yang akan berinteraksi terhadap manusia sebagai pengguna. (Rizky,

3.1. Identifikasi Masalah

Rancang Bangun Electronic Office (E-Office) dengan teknologi

AJAX pada penelitian ini dirancang untuk mempermudah proses korespondensi

pada suatu perusahaan. Salah satu kelebihan apabila korespondensi tercatat

dengan baik adalah kinerja perusahaan tersebut akan terukur dengan baik. Hal ini

disebabkan proses penelusuran suatu surat akan lebih cepat karena telah tercatat

dalam sistem.

Disamping mempermudah proses korespondensi, aplikasi web ini juga

diharapkan dapat mencatat informasi keluar masuknya barang. Dengan adanya

pencatatan informasi keluar masuk barang ini, dapat membantu pihak manajemen

untuk mengambil keputusan khususnya dalam hal pengeluaran barang.

Selain mempermudah proses korespondensi dan membantu pihak

manajemen dalam mengambil keputusan mengenai pengeluaran barang,

perancangan aplikasi ini ditujukan untuk mengurangi penggunaan bahan kertas.

Apabila penggunaan bahan kertas ini dapat dikurangi, maka pengeluaran biaya

perusahaan juga dapat dikurangi. Hal ini akan mempengaruhi pada laporan

keuangan perusahaan melalui penghematan dan pendapatan.

3.2. Perancangan Sistem

Setelah menganalisa permasalahan yang telah dijelaskan diatas maka

tahapan selanjutnya adalah melakukan perancangan sistem, dimana pada tahap

perancangan sistem ini meliputi pembuatan Flowchart, Data Flow Diagram

(DFD), dan Entity Relationship Diagram (ERD).

3.2.1. Flowchart

Berdasarkan identifikasi masalah di atas, maka dapat dirancang diagram

alir atau flowchart dari aplikasi website yang akan dibuat. Flowchart yang dibuat

akan menggambarkan keseluruhan proses yang terjadi pada website. Proses

pembuatan flowchart menggunakan software Microsoft Office Visio 2003.

Gambar 3.1 Flowchart website

3.2.2. Data Flow Diagram (DFD)

Data Flow Diagram (DFD) merupakan alat perancangan sistem yang berorientasi pada alur data dengan konsep dekomposisi. Penggunaan DFD adalah

untuk menggambarkan analisa maupun rancangan sistem yang mudah

program. Selain itu DFD merupakan suatu model data atau proses yang dibuat

untuk menggambarkan darimana asal data dan kemana tujuan data yang keluar

dari sistem, dimana suatu data disimpan, proses apa yang menghasilkan data

tersebut, interaksi antara data yang tersimpan dan proses yang dikenakan pada

data tersebut. Untuk membuat DFD digunakan aplikasi ProcessAnalyst dari paket

tool desain sistem Power Designer 6.

a. Context Diagram

Context Diagram merupakan gambaran umum sistem dari aplikasi yang akan dibuat. Gambaran umum ini menjelaskan hubungan antara entitas

luar sistem dengan sistem serta aliran informasi antara sistem dengan

entitas luar. Gambar 3.2 berikut merupakan Context Diagram dari aplikasi

E-Office.

ID Surat Pinjam ID Inventori

Data Historis Inventori Data Surat Pinjam

Data Historis Inventori Data Inventori Data Surat Pinjam

Data Surat Data Kategori Surat

Data Tipe Barang Data Merk Barang Data Jenis Barang Data Karyawan

0

Aplikasi EOffice

+

Administrator Manajer

Gambar 3.2 Context Diagram Aplikasi E-Office

b. DFD Level 1 Aplikasi E-Office

DFD Level 1 merupakan gambaran dari proses-proses utama yang ada di

dalam sistem. DFD Level 1 Aplikasi E-Office terdiri dari tiga proses

utama yaitu proses Pembuatan Data Aplikasi, Pencatatan Korespondensi

dan Inventori, Melihat Historis Inventori dan Korespondensi. DFD Level 1

Gambar 3.3 DFD Level 1 Aplikasi E-Office

c. DFD Level 2 Pembuatan Data Aplikasi

DFD Level 2 Pembuatan Data Aplikasi merupakan tingkatan dari DFD

yang menggambarkan proses lebih detil dari proses Pembuatan Data

Aplikasi. DFD Level 2 Pembuatan Data Aplikasi digambarkan pada

gambar 3.4.

Data Surat Pinjam ID Surat Pinjam Data Historis Inventori

ID Inventori Data Inventori

Data Inventori Data Surat Pinjam Data Surat

Data Jenis Baran Data Merk Barang Data Tipe Barang Data Kategori Surat Data Kategori Surat

Data Tipe Barang Data Merk Barang

Data Jenis Barang Data Karyawan

ID Inventori ID Surat Pinjam

Data Historis Inventori Data Surat Pinjam ata Historis Inventori

Data Inventori Data Surat Pinjam

Data Surat

Data Kategori Surat Data Tipe Barang Data Merk Barang Data Jenis Barang Data Karyawan AdministratorAdministrator Administrator Administrator Administrator Administrator AdministratorAdministrator

1 1 Karyawan

2 Jenis Barang

Administrator

Pembuatan Data

Aplikasi 3 Merk Barang

4 Tipe Barang

+

5 Kategori Surat

2

Pencatatan Korespondensi dan

Inventori

6 Surat

7 Surat Pinjam

+ 8 Inventori

9Inventori Historis 3 Manajer Manajer Manajer Manajer Melihat Historis Inventori dan Korespondensi +

Data Kategori Surat Data Tipe Barang

Data Merk Barang Data Jenis Barang

Data Karyawan

Data Kategori Surat Data Tipe Barang Data Merk Barang Data Jenis Barang

Data Karyawan 1 1 Karyawan Maintenance Data Karyawan 2 Maintenance Data Jenis Barang

2 Jenis Barang

3 Maintenance

Data Merk Barang AdministratorAdministratorAdministrator

Administrator Administrator

3 Merk Barang

4 Maintenance

Data Tipe Barang

4 Tipe Barang

5 Maintenance Data Kategori

Surat

5 Kategori Surat

Gambar 3.4 DFD Level 2 Pembuatan Data Aplikasi

d. DFD Level 2 Pencatatan Korespondensi dan Inventori

DFD Level 2 Pencatatan Korespondensi dan Inventori merupakan

tingkatan dari DFD yang menggambarkan proses lebih detil dari proses

Pencatatan Korespondensi dan Inventori. DFD Level 2 Pencatatan

Data Inventori Data Surat Pinjam

Data Surat

Data Inventori Data Inventori

Data Tipe Barang Data Merk Barang Data Jenis Barang Data Surat Pinjam

Data Surat Data Kategori Surat

AdministratorAdministrator Administrator

5 Kategori Surat

4 Tipe Barang 3 Merk Barang 2 Jenis Barang

6 Surat 7 Surat Pinjam

8 Inventori 9 Inventori Historis 1

Mencatat Korespondensi

2

Mencatat Inventori

Gambar 3.5 DFD Level 2 Pencatatan Korespondensi dan Inventori

e. DFD Level 2 Melihat Historis Inventori dan Korespondensi

DFD Level 2 Melihat Historis Inventori dan Korespondensi merupakan

tingkatan dari DFD yang menggambarkan proses lebih detil dari proses

Melihat Historis Inventori dan Korespondensi. DFD Level 2 Melihat

Data Historis Inventori ID Inventori

Data Historis Inventori Data Surat Pinjam

ID Surat Pinjam

Data Historis Inventori ID Inventori Data Surat Pinjam ID Surat Pinjam 1

7 Surat Pinjam 7 Surat Pinjam Mencari Data Korespondensi Manajer Manajer ManajerManajer 2 Administrator

99 Inventori HistorisInventori Historis Mencari Data

Inventori

Gambar 3.6 DFD Level 2 Melihat Historis Inventori dan Korespondensi

3.2.3. Entity Relationship Diagram (ERD)

Gambaran mengenai perancangan struktur keseluruhan basis data

ditunjukkan melalui Entity Relationship Diagram (ERD). Rancangan ini tidak

bergantung terhadap software yang mendefinisikan struktur penyimpanannya

secara fisik. Proses pembuatan ERD menggunakan aplikasi DataArchitect dari

paket tool desain sistem Power Designer 6. Hasil perancangan ERD sistem

aplikasi yang akan dibuat ini digambarkan berupa Conceptual Data Model (CDM)

Mempros es Terdiri Mempuny ai Mempros es Mempuny ai Terdiri Memilik i Memilik i Jenis_Barang Kategori_Surat ID_Jenis ID_Kategori Nama_Jenis Nama_Kategori Merk_Barang ID_Merk

Surat _{Karyaw an}

Nama_Merk Surat_Pinjam ID_Surat _NIK ID_Pinjam No_Surat Asal_Surat Perihal_Surat Sc an_Surat

Nama_Kary aw an Tanggal_Lahir Jenis_Kelamin Alamat_Rumah No_Telepon No_Handphone Tipe_Barang ID_Tipe Nama_Tipe Keadaan_Barang Inventori

Histori_Inventori _{ID_Inv entori}

ID_His tori Serial_Number

MAC Status Tgl_Pinjam Status_Surat Tujuan Keterangan

Gambar 3.7 CDM Aplikasi E-Office

NIK = NIK ID_SURAT = ID_SUR AT ID_KATEGORI = ID _KATEG ORI

NI K = NI K

ID_I NVENTO RI = I D_INVENTORI

I D_TIPE = ID _TIPE ID_MERK = ID_MERK

JENIS_BA RANG KATEGORI_SURAT

ID_JENIS varchar(5) ID_KA TEGORI varchar(5)

NAMA_JENIS varchar(200) NAMA_KATEGORI varchar(30)

I D_J ENIS = I D_J ENIS

MERK_BARANG KARY AWAN _{ID_MERK varchar(5)} NIK varchar(5) ID_JENIS varchar(5) NAMA_MERK varchar(100) SURAT NAMA_KARYAWAN varchar(100)

TANGGAL_LAHIR date JENIS_KELAMIN char(1) ALAMAT_RUMAH varchar(300) NO_TELEPON varchar(10) NO_HANDPHONE varchar(15) ID_SURAT varchar(5)

ID_KA TEGORI varchar(5) NO_SURAT varchar(30) ASAL_SURAT varchar(50) PERIHAL_SURAT varchar(100) SCAN_SURAT <undefined> TIPE_BARANG ID_TIPE varchar(5) ID_MERK varchar(5) NAMA_TIPE varchar(100) KEADAAN_BARANG varchar(50) HISTORI_INVENTORI

SURAT_PINJAM ID_HISTORI varchar(5) ID_INVENTORI varchar(5) NIK varchar(5) STATUS varchar(10) ID_PINJAM varchar(5) INVENTORI ID_INVENTORI varchar(5) ID_TIPE varchar(5) SERIA L_NUMBER varchar(20) MAC varchar(20) ID_SURAT varchar(5) NIK varchar(5) TGL_PINJAM date STATUS_SURAT varchar(10) TUJUAN varchar(100) KETERANGAN varchar(100)

3.3.

E-Off iliki beberapa halaman yang akan dibuat yaitu:

i

an perancangan dan penjelasan dari tampilan halaman

.3.1. Tampilan Halaman Utama

Gambar 3.9 Desain Tampilan Halaman Utama

Perancangan Antar Muka

Untuk memudahkan pembuatan aplikasi khususnya dalam desain tampilan,

maka dibuat perancangan antar muka terlebih dahulu. Hasil perancangan ini

selanjutnya digunakan sebagai panduan dalam membuat tampilan aplikasi

ice. Aplikasi E-Office mem

a) Halaman Utama

b) Halaman Surat

c) Halaman Inventor

d) Halaman Histori

e) Halaman Karyawan

Berikut ini merupak

website yang akan dibuat.

3 Nama Perusahaan L N ogin Menu ama Password Login

Gambar 3.9 di atas menggambarkan desain tampilan halaman utama dari

Nama Perusahaan

Menu Tampilan Surat

Nama Perusahaan

Menu Daftar Inventori

i area kanan halaman utama, terdapat kotak untuk

.3.2. Tampilan Halaman Surat

Gambar 3.10 Desain Tampilan Halaman Surat

ah area kanan pada halaman ini memuat tampilan surat yang

.3.3. Tampilan Halaman Inventori

Gambar 3.11 Desain Tampilan Halaman Inventori

nama perusahaan. Bagian kiri halaman utama akan ditampilkan menu apabila

telah dilakukan proses login. D

mengisi nama dan password.

3

Pada gambar 3.10 menunjukkan desain tampilan halaman surat. Secara

garis besar desain halaman ini tidak jauh berbeda dengan desain halaman utama.

Perbedaannya hanyal

ada pada basis data.

Gambar 3.11 menampilkan desain halaman inventori dimana area sebelah

kanan berisi informasi tentang inventori barang yang ada pada perusahaan.

3.3.4. Tampilan Halaman Histori

Nama Perusahaan

Daftar Histori Inventori Menu

Gambar 3.12 Desain Tampilan Halaman Histori

Gambar 3.12 menampilkan desain halaman histori dimana area sebelah

kanan berisi daftar histori inventori yang dimiliki perusahaan. Melalui daftar

inventori ini pihak manajemen dapat mengetahui kondisi inventori dan segera

mengambil keputusan apabila diperlukan.

3.3.5. Tampilan Halaman Karyawan

Nama Perusahaan

Menu Daftar Karyawan

Pada gambar 3.13 ditunjukkan desain tampilan halaman karyawan dimana

halaman ini menunjukkan daftar nama para karyawan perusahaan. Apabila nama

tersebut dipilih maka akan muncul window baru yang berisi informasi mengenai

karyawan yang dipilih tersebut. Daftar karyawan ini yang nantinya akan

4.1. Lingkungan Implementasi

Perancangan Aplikasi Electronic Office (E-Office) dengan teknologi

AJAX diimplementasikan pada sistem komputer dengan spesifikasi sebagai

berikut:

Sistem operasi : Microsoft Windows Xp Service Pack 2 Jenis komputer : Pentium(R) 4 CPU 2,26 GHz

Prosesor : AMPTRON

RAM : 1 Gb

Hard Disk : 40 GB

4.2. Implementasi Antarmuka

Pada bagian ini akan dijelaskan tentang implementasi antarmuka dari

aplikasi yang dibuat. Implementasi antarmuka yang telah dibuat yaitu:

1) Halaman Utama

2) Halaman Surat

3) Halaman Inventori

4) Halaman Histori

5) Halaman Karyawan

4.2.1. Halaman Utama

Halaman utama ini merupakan tampilan yang pertama kali ditemui

pengguna aplikasi saat aplikasi pertama kali dibuka. Pada tampilan ini akan

terlihat judul aplikasi pada bagian atas dan bagian untuk memasukkan username

dan password. Tampilan ini ditunjukkan dengan gambar 4.1.

Gambar 4.1 Tampilan Utama Aplikasi

4.2.2. Halaman Surat

Halaman surat adalah halaman yang berisi daftar data surat yang telah

disimpan pada aplikasi ini. Gambar 4.2 menunjukkan halaman surat ini.

4.2.3. Halaman Inventori

Disamping data surat, aplikasi E-Office juga menyimpan data inventori

produk yang dimiliki perusahaan. Gambar 4.3 berikut menunjukkan halaman

inventori pada aplikasi E-Office.

Gambar 4.3 Halaman Inventori

4.2.4. Halaman Histori

Halaman histori ini menyimpan data-data histori baik data histori surat

Gambar 4.4 Tampilan Halaman Histori Surat

Sementara pada gambar 4.5 berikut menampilkan halaman histori inventori.

4.2.5. Halaman Karyawan

Halaman karyawan merupakan bagian untuk menyimpan data-data

karyawan. Data karyawan ini akan digunakan untuk mengisi data penanggung

jawab suatu surat. Tampilan halaman karyawan ditunjukkan pada gambar 4.6.

5.1. Lingkungan Uji Coba

Pada bagian ini akan dijelaskan mengenai spesifikasi perangkat keras yang

digunakan dalam uji coba dan setiap langkah yang dilakukan dengan screenshot

setiap fungsi aplikasi. Uji coba ini dilakukan dengan menggunakan spesifikasi

perangkat keras sebagai berikut:

Sistem operasi : Microsoft Windows Xp Service Pack 2 Jenis komputer : Pentium(R) 4 CPU 2,26 GHz

Prosesor : AMPTRON

RAM : 1 Gb

Hard Disk : 40 GB

Gambar 5.1 Spesifikasi Perangkat Keras Uji Coba

5.2. Skenario Uji Coba

Untuk memastikan bahwa aplikasi yang dibuat ini telah berjalan dengan

lancar maka dilakukan serangkaian uji coba. Skenario uji coba yang disusun oleh

penulis adalah sebagai berikut:

1. Uji coba membuka setiap tampilan aplikasi untuk mengetahui apakah

aplikasi telah berjalan sesuai dengan alur aplikasi yang telah dibuat.

2. Uji coba menyimpan data surat dengan mengunggah file surat berupa

gambar atau hasil scan. Form penyimpanan data surat ini menerapkan

teknologi AJAX.

3. Uji coba menyimpan, mengubah dan mencari data inventori dimana

form yang digunakan merupakan implementasi teknologi AJAX.

4. Uji coba melakukan perubahan data pada data karyawan.

5.3. Pelaksanaan Uji Coba

Bagian ini memaparkan proses pelaksanaan uji coba sesuai dengan

skenario yang telah dijelaskan pada sub bab sebelumnya. Dalam pemaparannya

juga disertakan gambar-gambar hasil pelaksanaan uji coba. Pelaksanaan uji coba

ini dilakukan dengan mengunggah aplikasi dengan hosting pada alamat

http://binatama.batiktulismadura.net.

5.3.1 Uji Coba Membuka Setiap Tampilan Aplikasi

Dalam pelaksanaan uji coba ini dilakukan beberapa proses berikut:

1) Membuka aplikasi untuk pertama kali otomatis akan muncul tampilan

utama. Gambar 5.2 berikut menunjukkan tampilan utama dari aplikasi

Gambar 5.2 Tampilan Utama Aplikasi

2) Selanjutnya dapat melihat tampilan berikutnya yaitu tampilan halaman

surat. Tampilan ini ditunjukkan pada gambar 5.3.

Gambar 5.3 Tampilan Halaman Surat

3) Berikutnya klik link Menu pada bagian kanan atas untuk menampilkan

Gambar 5.4 Menu Pengaturan Tampilan

4) Dilanjutkan dengan klik link Home dimana akan memunculkan

Halaman informasi perusahaan dan aplikasi. Hasilnya ditunjukkan

pada gambar 5.5 berikut.

5) Kemudian dilakukan uji coba klik link histori surat untuk

memunculkan halaman histori surat. Hasilnya ditunjukkan pada

gambar 5.6 berikut.

Gambar 5.6 Halaman Histori Surat

6) Lalu dilanjutkan klik link Kategori Surat untuk memunculkan tampilan

penambahan kategori surat. Hasil kegiatan ini ditunjukkan pada

gambar 5.7.

7) Berikutnya klik link Inventory pada bagian kolom kiri untuk

menampilkan Inventori. Hasilnya dapat dilihat pada gambar 5.8.

Gambar 5.8 Halaman Inventori

8) Selanjutnya klik link History Inventory untuk memunculkan tampilan

histori inventori. Hasilnya ditunjukkan pada gambar 5.9.

9) Lalu klik link Jenis Barang untuk melihat data jenis kelompok barang

yang dimiliki oleh perusahaan. Hasilnya ditampilkan pada gambar 5.10

berikut.

Gambar 5.10 Halaman Jenis Barang

10)Dilanjutkan klik link Karyawan untuk menampilkan data karyawan

perusahaan. Hasilnya ditunjukkan pada gambar 5.11.

5.3.2 Uji Coba Menyimpan Data Surat

Pada proses ini dilakukan uji coba dengan menyimpan data surat beserta

fitur-fiturnya. Hal ini dilakukan guna mengetahui apakah fungsi data surat yang

dibuat dengan menerapkan teknologi AJAX dapat berjalan seperti seharusnya.

Proses yang dilakukan adalah sebagai berikut:

1) Klik link Surat pada kolom menu kiri sehingga akan muncul tampilan

halaman surat. Hal ini ditunjukkan pada gambar 5.12 berikut.

Gambar 5.12 Tampilan Halaman Surat

2) Lalu klik icon Add ( ) untuk memunculkan sebuah form guna

menambahkan data surat yang akan disimpan. Hasilnya terlihat pada

gambar 5.13. Pada form yang menerapkan teknologi AJAX ini terdapat

tombol unggah ( ) yang digunakan untuk menyimpan file

teks / gambar hasil scan surat. Disamping itu untuk tanggal digunakan

fitur teknologi AJAX untuk pemilihan tanggalnya. Fitur ini

Gambar 5.13 Form Penambahan Data Surat

Gambar 5.14 Fitur Pemilihan Tanggal

3) Apabila dibutuhkan perubahan data surat maka klik icon edit ( )

untuk menampilkan form Edit Data. Hasilnya dapat dilihat pada

gambar 5.15. Tampilan form ini sama dengan Form Tambah Data.

Apabila ingin melihat tampilan file teks / gambar surat, dilakukan klik

jenis filenya. Jika file ternyata tidak sesuai, file dapat diganti dengan

menghapusnya terlebih dulu dan unggah file yang baru.

Gambar 5.15 Form Edit Data Surat

4) Data surat yang ditampilkan juga dapat diseleksi dengan klik icon filter

( ) pada tampilan halaman surat. Hasilnya akan muncul seperti

gambar 5.16.

Gambar 5.16 Form Seleksi Data Surat Ditampilkan

5) Usai melakukan penambahan atau perubahan data dapat dilihat

historinya dengan klik link histori surat dan hasilnya dapat dilihat pada

Gambar 5.17 Tampilan Histori Surat

6) Histori surat juga dapat diseleksi data yang ingin ditampilkan. Untuk

proses seleksi ini klik icon filter ( ) sehingga akan tampil form

seperti pada gambar 5.18.

Gambar 5.18 Form Seleksi Data

7) Data surat yang akan disimpan dikelompokkan berdasarkan kategori

suratnya. Untuk menambahkan kategori surat ini terdapat halamannya

sendiri yang dapat ditampilkan dengan klik link Kategori Surat.

Gambar 5.19 Halaman Kategori Surat

8) Untuk menambahkan data baru kategori surat dapat dilakukan dengan

klik icon Add ( ) sehingga akan muncul form Tambah Kategori

seperti ditunjukkan pada gambar 5.20. Sementara untuk mengubah

data yang sudah ada dapat dilakukan dengan klik icon Edit ( ) yang

akan memunculkan form Edit Kategori seperti pada gambar 5.21.

Gambar 5.21 Form Edit Kategori Surat

5.3.3 Uji Coba Maintenance Data Inventori

Uji coba selanjutnya setelah dapat dipastikan bagian data surat telah

berfungsi sebagaimana seharusnya maka dilakukan pengujian maintenance data

inventori. Proses pengujiannya sebagai berikut:

1) Klik link Inventori pada kolom menu kiri sehingga akan muncul

tampilan halaman inventori. Hal ini ditunjukkan pada gambar 5.22

berikut.

2) Data inventori yang ditampilkan juga dapat diseleksi dengan klik icon

filter ( ) pada tampilan halaman inventori. Hasilnya akan muncul

seperti gambar 5.23.

Gambar 5.23 Form Seleksi Data Inventori

3) Usai melakukan seleksi data, dapat dilihat historinya dengan klik link

histori inventori dan hasilnya dapat dilihat pada gambar 5.24.

4) Data histori inventori yang ditampilkan juga dapat diseleksi dengan

klik icon filter ( ) pada tampilan halaman histori inventori.

Hasilnya akan muncul seperti gambar 5.25.

Gambar 5.25 Form Seleksi Data Histori Inventori

5) Untuk menambahkan data baru histori inventori dapat dilakukan

dengan klik icon Add ( ) sehingga akan muncul form Tambah

Histori Inventori seperti ditunjukkan pada gambar 5.26. Sedangkan

untuk mengubah data yang sudah ada dapat dilakukan dengan klik icon

Edit ( ) yang akan memunculkan form Edit Histori Inventori seperti

Gambar 5.26 Form Tambah Histori Inventori

Gambar 5.27 Form Edit Histori Inventori

6) Dalam menambahkan data inventori maupun histori inventori, terdapat

data jenis barang. Data mengenai jenis barang ini dapat dilihat dengan

klik link Jenis Barang. Hasil tampilannya dapat dilihat pada gambar

Gambar 5.28 Tampilan Jenis Barang

7) Apabila akan menambahkan data barang, klik icon Add ( ) yang

akan memunculkan form Tambah Jenis Barang. Form ini ditampilkan

pada gambar 5.29. Pada form ini juga terdapat link Jenis Baru dan

Merek Baru dimana kedua link tersebut digunakan untuk

menambahkan data baru mengenai jenis barang atau merek barang

sesuai jenisnya. Penambahan data baru ini dilakukan pada form

tersendiri yang ditunjukkan dengan gambar 5.30.

Gambar 5.30 Form Jenis Barang Baru

5.3.4 Uji Coba Melakukan Perubahan Data Karyawan

Proses ini untuk mengetahui apakah data karyawan dapat ditampilkan

sesuai dengan alur aplikasi yang telah dibuat sebelumnya. Tampilan data

karyawan ini ditunjukkan pada gambar 5.31 berikut.

Untuk menambahkan data baru karyawan dapat dilakukan dengan klik

icon Add ( ) sehingga akan muncul form Tambah Karyawan seperti

ditunjukkan pada gambar 5.32. Sedangkan untuk mengubah data yang sudah ada

dapat dilakukan dengan klik icon Edit ( ) yang akan memunculkan form Edit

Karyawan seperti pada gambar 5.33 berikut. Kedua form ini merupakan salah satu

penerapan teknologi AJAX dalam aplikasi yang dibuat.

Gambar 5.32 Form Tambah Karyawan

5.4. Evaluasi

Hasil evaluasi terhadap rangkaian proses uji coba yang dilakukan

menunjukkan bahwa aplikasi telah dapat digunakan dengan lancar. Hal ini

ditunjukkan dengan berjalannya aplikasi sesuai dengan alur yang telah dirancang

sebelumnya. Disamping itu beberapa fitur khusus termasuk penerapan teknologi

AJAX juga telah berfungsi dengan baik.

Dengan berhasilnya serangkaian uji coba yang dilakukan terhadap aplikasi

maka aplikasi telah dapat digunakan sebagai media untuk mempermudah proses

korespondensi. Disamping itu aplikasi ini juga dapat digunakan untuk melakukan

pencatatan informasi keluar masuk barang. Hal ini diharapkan dapat

meningkatkan efektifitas kinerja perusahaan serta mengurangi penggunaan bahan

6.1. Kesimpulan

Setelah dilakukan proses perancangan, pembuatan dan serangkaian

uji coba aplikasi e-office dengan teknologi AJAX dapat diambil beberapa

kesimpulan sebagai berikut:

1) Perancangan dan pembuatan aplikasi e-office dengan teknologi

AJAX. Digunakan perpaduan bahasa pemrograman PHP dan

database MySQL dalam merancang dan membuat aplikasi ini.

2) Aplikasi ini telah di-hosting dan dapat berjalan dengan baik.

3) Aplikasi yang telah dibuat dapat digunakan sebagai media untuk

mempermudah proses korespondensi

4) Aplikasi yang dibuat dapat menjadi salah satu media untuk

pencatatan informasi keluar masuk barang.

5) Aplikasi yang dibuat dapat menjadi salah satu media untuk

mengurangi penggunaan bahan kertas.

6.2. Saran

Berdasarkan proses yang dilakukan dalam perancangan aplikasi

e-office dengan teknologi AJAX ini, timbul beberapa saran yang dapat digunakan untuk pengembangan aplikasi ini. Saran-saran tersebut adalah

sebagai berikut:

1) Dibuatkan username khusus untuk jajaran manajemen sehingga

dapat melihat langsung hasil proses korespondensi dan

pencatatan informasi keluar masuk barang.

2) Penggunaan proses validasi dalam setiap perubahan data guna

Rizky, S., 2006, Interaksi Manusia dan Komputer, Sekolah Tinggi

Manajemen Informatika & Teknik Komputer, Surabaya.

Sunyoto, A., 2007, AJAX Membangun Web dengan Teknologi

Asynchronouse JavaScript dan XML, Penerbit ANDI, Yogyakarta.

Sutarman, 2003, Membangun Aplikasi Web dengan PHP dan MySQL,

Graha Ilmu, Yogyakarta.

Waluto, D. E., 2000, Teknologi Perkantoran Modern: Wacana tentang

Kantor Maya. Pengembangan Alat dan Lab Jurusan Administrasi Niaga, Politeknik Negeri Semarang, Semarang.

64

Gambar 5.30 Form Jenis Barang Baru

5.3.4 Uji Coba Melakukan Perubahan Data Karyawan

Proses ini untuk mengetahui apakah data karyawan dapat ditampilkan sesuai dengan alur aplikasi yang telah dibuat sebelumnya. Tampilan data karyawan ini ditunjukkan pada gambar 5.31 berikut.

65

Untuk menambahkan data baru karyawan dapat dilakukan dengan klik icon Add ( ) sehingga akan muncul form Tambah Karyawan seperti ditunjukkan pada gambar 5.32. Sedangkan untuk mengubah data yang sudah ada dapat dilakukan dengan klik icon Edit ( ) yang akan memunculkan form Edit Karyawan seperti pada gambar 5.33 berikut. Kedua form ini merupakan salah satu penerapan teknologi AJAX dalam aplikasi yang dibuat.

Gambar 5.32 Form Tambah Karyawan

66

5.4. Evaluasi

Hasil evaluasi terhadap rangkaian proses uji coba yang dilakukan menunjukkan bahwa aplikasi telah dapat digunakan dengan lancar. Hal ini ditunjukkan dengan berjalannya aplikasi sesuai dengan alur yang telah dirancang sebelumnya. Disamping itu beberapa fitur khusus termasuk penerapan teknologi AJAX juga telah berfungsi dengan baik.

Dengan berhasilnya serangkaian uji coba yang dilakukan terhadap aplikasi maka aplikasi telah dapat digunakan sebagai media untuk mempermudah proses korespondensi. Disamping itu aplikasi ini juga dapat digunakan untuk melakukan pencatatan informasi keluar masuk barang. Hal ini diharapkan dapat meningkatkan efektifitas kinerja perusahaan serta mengurangi penggunaan bahan kertas.

BAB VI

PENUTUP

6.1. Kesimpulan

Setelah dilakukan proses perancangan, pembuatan dan serangkaian uji coba aplikasi e-office dengan teknologi AJAX dapat diambil beberapa kesimpulan sebagai berikut:

1) Perancangan dan pembuatan aplikasi e-office dengan teknologi AJAX. Digunakan perpaduan bahasa pemrograman PHP dan database MySQL dalam merancang dan membuat aplikasi ini. 2) Aplikasi ini telah di-hosting dan dapat berjalan dengan baik. 3) Aplikasi yang telah dibuat dapat digunakan sebagai media untuk

mempermudah proses korespondensi

4) Aplikasi yang dibuat dapat menjadi salah satu media untuk pencatatan informasi keluar masuk barang.

5) Aplikasi yang dibuat dapat menjadi salah satu media untuk mengurangi penggunaan bahan kertas.

68

6.2. Saran

Berdasarkan proses yang dilakukan dalam perancangan aplikasi e-office dengan teknologi AJAX ini, timbul beberapa saran yang dapat digunakan untuk pengembangan aplikasi ini. Saran-saran tersebut adalah sebagai berikut:

1) Dibuatkan username khusus untuk jajaran manajemen sehingga dapat melihat langsung hasil proses korespondensi dan pencatatan informasi keluar masuk barang.

2) Penggunaan proses validasi dalam setiap perubahan data guna meningkatkan keamanan data.

DAFTAR PUSTAKA

Rizky, S., 2006, Interaksi Manusia dan Komputer, Sekolah Tinggi Manajemen Informatika & Teknik Komputer, Surabaya.

Sunyoto, A., 2007, AJAX Membangun Web dengan Teknologi Asynchronouse JavaScript dan XML, Penerbit ANDI, Yogyakarta.

Sutarman, 2003, Membangun Aplikasi Web dengan PHP dan MySQL, Graha Ilmu, Yogyakarta.

Waluto, D. E., 2000, Teknologi Perkantoran Modern: Wacana tentang Kantor Maya. Pengembangan Alat dan Lab Jurusan Administrasi Niaga, Politeknik Negeri Semarang, Semarang.