PERANCANGAN APLIKASI WEBSITE E-GOVERNMENT

PERANCANGAN APLIKASI WEBSITE E-GOVERNMENT PADA KANTOR PENGELOLA TEKNOLOGI INFORMASI (KPTI) DENGAN MENGGUNAKAN XHTML (STUDI KASUS: KANTOR WALIKOTA JAKARTA BARAT) Dikdik Permana Wigandi 103091029526 JURUSAN TEKNIK INFORMATIKA FAKULTAS SAINS DAN TEKNOLOGI UNIVERSITAS ISLAM NEGERI SYARIF HIDAYATULLAH JAKARTA 2008 i

PERANCANGAN APLIKASI WEBSITE E-GOVERNMENT PADA KANTOR PENGELOLA TEKNOLOGI INFORMASI (KPTI) DENGAN MENGGUNAKAN XHTML (STUDI KASUS: KANTOR WALIKOTA JAKARTA BARAT) Skripsi Sebagai Salah Satu Syarat untuk Memperoleh Gelar Sarjana Komputer Fakultas Sains dan Teknologi Universitas Islam Negeri Syarif Hidayatullah Jakarta Oleh : DIKDIK PERMANA WIGANDI 103091029526 TEKNIK INFORMATIKA FAKULTAS SAINS DAN TEKNOLOGI UNIVERSITAS ISLAM NEGERI SYARIF HIDAYATULLAH JAKARTA 2008 ii

PERANCANGAN APLIKASI WEBSITE E-GOVERNMENT PADA KANTOR PENGELOLA TEKNOLOGI INFORMASI (KPTI) DENGAN MENGGUNAKAN XHTML (STUDI KASUS: KANTOR WALIKOTA JAKARTA BARAT) Skripsi Sebagai Salah Satu Syarat untuk Memperoleh Gelar Sarjana Komputer Pada Fakultas Sains dan Teknologi Universitas Islam Negeri Syarif Hidayatullah Jakarta Oleh : Dikdik Permana Wigandi 103091029526 Menyetujui, Pembimbing I, Pembimbing II, Joko Adianto, M.InfSys Rizal Bahaweres, M.Kom Mengetahui, Ketua Program Studi Teknik Informatika Nurhayati, M.Kom NIP. 150 293 241 iii

PENGESAHAN UJIAN Skripsi ini yang berjudul Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi (KPTI) Dengan Menggunakan XHTML (Studi Kasus: Kantor Walikota Jakarta Barat). Telah diuji dan dinyatakan lulus dalam Sidang Munaqosyah Fakultas Sains dan Teknologi, Universitas Islam Negeri Syarif Hidayatullah Jakarta. Pada hari Selasa, tanggal 24 Juni 2008. Skripsi ini telah diterima sebagai salah satu syarat untuk memperoleh gelar Sarjana Strata Satu (S1) Program Studi Teknik Informatika. Jakarta, 24 Juni 2008 Tim Penguji, Penguji I, Penguji II, Nurhayati, M.Kom NIP. 150 293 241 Viva Arifin, MMSI NIP. 150 375 016 Pembimbing I, Pembimbing II, Joko Adianto, M.InfSys Rizal Bahaweres, M.Kom Ketua Program Studi Teknik Informatika Nurhayati, M.Kom NIP. 150 293 241 iv

PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS SAINS DAN TEKONOLOGI UIN SYARIF HIDAYATULLAH JAKARTA Dengan ini menyatakan bahwa skripsi yang ditulis oleh : Nama : Dikdik Permana Wigandi NIM : 103091029526 Semester : X ( Sepuluh ) Fakultas : Sains dan Teknologi Jurusan : Teknik Informatika Judul Skripsi : Perancangan Aplikasi Website E-Government Pada Kantor Pengelola Teknologi Informasi (KPTI) Dengan Menggunakan XHTML (Studi Kasus: Kantor Walikota Jakarta Barat) Dapat diterima sebagai syarat kelulusan untuk memperoleh gelar Sarjana Komputer pada program studi Teknik Informatika, Fakultas Sains dan Teknologi, Universitas Islam Negeri Syarif Hidayatullah Jakarta. Jakarta, Juni 2008 Menyetujui, Dosen Pembimbing Dosen Pembimbing I Dosen Pembimbing II Joko Adianto, M.InfSys Rizal Bahaweres, M.Kom Mengetahui, Dekan Ketua Program Studi Dr. Syopiansyah Jaya Putra, M.Sis Nurhayati, M.Kom NIP. 150 317 956 NIP. 150 293 241 v

PERNYATAAN DENGAN INI SAYA MENYATAKAN BAHWA SKRIPSI INI BENAR- BENAR HASIL KARYA SENDIRI YANG BELUM PERNAH DIAJUKAN SEBAGAI SKRIPSI ATAU KARYA ILMIAH PADA PERGURUAN TINGGI ATAUPUN LEMBAGA MANAPUN. Jakarta, Juni 2008 Dikdik Permana Wigandi 103091029526 vi

ABSTRAK Dikdik Permana Wigandi, Perancangan Aplikasi Website E-Government Pada Kantor Pengelola Teknologi Informasi (KPTI) Dengan Menggunakan XHTML (Studi Kasus: Kantor Walikota Jakarta Barat) (Di Bawah Bimbingan Joko Adianto, M.InfSys dan Rizal Bahaweres, M.Kom). Semakin berkembangnya teknologi pemrograman web terutama dengan hadirnya XHTML yang diharapkan dapat menggantikan web yang berbasis HTML, dengan menggunakan Captcha sebagai salah satu fitur keamanan web yang ada pada saat ini, membuat perkembangan aplikasi-aplikasi web semakin interaktif dan dinamis. Hal ini menyebabkan masyarakat terutama pemerintah menggunakan teknologi tersebut untuk membantu kegiatan kedinasan dan mendapatkan informasi yang dibutuhkan oleh tiap pegawai pemerintah maupun masyarakat. Oleh karena itu, penulis membuat web KPTI dengan menggunakan XML untuk mengamankan beberapa isi dari web KPTI dengan mengambil Captcha sebagai keamanan form dan login pada web KPTI, penggunaan JavaScript untuk validasi form, pemakaian fungsi htmlentities() pada setiap form untuk mencegah eksekusi tag-tag HTML, pembatasan hak akses yang berbedabeda pada setiap form aplikasi web KPTI, dan menggunakan CSS untuk mengatur tampilan web KPTI. Dalam pengembangan sistem, penulis menggunakan metode increment dengan alat bantu analisis pemodelan UML. Kata Kunci: XHTML, Captcha, XML, JavaScript, CSS, dan UML. xxv + 201 halaman; 60 gambar + 21 tabel + 4 lampiran Daftar pustaka: 30 (1996-2007) vii

KATA PENGANTAR Puji serta syukur kami panjatkan ke Hadirat Allah SWT karena atas berkat dan rahmat-nya, penulis dapat menyelesaikan dan menyusun skripsi ini. Adapun judul dari skripsi ini adalah Perancangan Aplikasi Website E-Government Pada Kantor Pengelola Teknologi Informasi (KPTI) Dengan Menggunakan XHTML (Studi Kasus: Kantor Walikota Jakarta Barat). Penyusunan skripsi ini tidak mungkin dapat penulis laksanakan dengan baik tanpa bantuan dari berbagai pihak yang terkait. Untuk itu penulis ingin mengucapkan banyak terima kasih secara khusus kepada beberapa pihak, antara lain : 1. Dr. Syopiansyah Jaya Putra, M.Sis, selaku Dekan Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta. 2. Ibu Nurhayati, M.Kom, selaku Ketua Program Studi Teknik Informatika dan Ibu Viva Arifin, MMSI, selaku Sekretaris Program Studi Teknik Informatika. 3. Bapak Joko Adianto, M.InfSys dan Bapak Rizal Bahaweres, M.Kom selaku Dosen Pembimbing, yang telah memberikan bimbingan, waktu dan perhatiannya dalam penyusunan skripsi ini. 4. Ayahanda Badrudin dan Ibunda tercinta Inne Fatimah, serta adikku Desty Purwanti yang tak henti-hentinya memberikan dukungan baik moril maupun materiil bagi penulis dalam menyelesaikan skripsi ini dan untuk seseorang yang sangat berarti dalam hidupku. viii

5. Ibu Nur Aripiani yang telah membimbing dan memberikan sedikit ilmunya kepada penulis sehingga penulis dapat menyelesaikan skripsi ini. 6. Seluruh Staff KPTI di Walikota Jakarta Barat, yang telah memberikan waktu, tempat, dukungan, dan materi bagi penulis selama menyelesaikan skripsi disana. 7. Seluruh Dosen Teknik Informatika yang tidak dapat penulis sebutkan satu persatu yang telah memberikan ilmu dan bimbingannya selama penulis menyelesaikan studi di Teknik Informatika. 8. Seluruh Staff Jurusan Teknik Informatika dan Staff akademik FST yang telah membantu penulis dalam masa perkuliahan. 9. Saudara dan handai taulan yang telah turut serta membantu dan mendukung penulis dalam rangka menyelesaikan skripsi ini. 10. Teman-teman Teknik Informatika angkatan 2003 khususnya kelas A, B, C dan D, yang telah melewatkan waktu bersama selama masa kuliah. 11. Teman-teman penulis yang lain yang tidak bisa disebutkan namanya satu per satu yang selalu memberi dukungan kepada penulis sehingga skripsi ini dapat terselesaikan dengan baik. ix

Penulis menyadari masih banyak sekali kekurangan dari skripsi ini, dan penulis terbuka terhadap segala saran dan kritik yang membangun. Akhir kata penulis mempersembahkan skripsi ini dengan segala kelebihan dan kekurangannya, semoga dapat bermanfaat bagi kita semua, amien. Jakarta, Juni 2008 Penulis x

DAFTAR ISI Halaman Sampul... i Halaman Judul... ii Lembar Pengesahan Pembimbing... iii Surat Keterangan... iv Lembar Pengesahan Ujian... v Lembar Pernyataan... vi Abstrak... vii Kata Pengantar... viii Daftar Isi... xi Daftar Tabel... xviii Daftar Gambar... xxi Daftar Lampiran... xxv BAB I PENDAHULUAN... 1 1.1 Latar Belakang Masalah... 1 1.2 Rumusan Masalah... 2 1.3 Batasan Masalah... 3 1.4 Tujuan Penelitian... 4 1.5 Manfaat Penelitian... 5 1.5.1 Bagi Penulis... 5 xi

1.5.2 Bagi Universitas...5 1.5.3 Bagi Pengguna... 5 1.6 Metodologi Penelitian... 6 1.6.1 Metode Pengembangan Sistem... 6 1.7 Tinjauan Pustaka... 7 1.8 Sistematika Penulisan... 8 BAB II LANDASAN TEORI... 10 2.1 Definisi E-Government... 10 2.1.1 Definisi E-Government... 10 2.2 XHTML... 10 2.2.1 Sekilas tentang XHTML... 10 2.2.2 Keuntungan Menggunakan XHTML... 11 2.3 JavaScript... 12 2.4 XML... 12 2.5 Apache... 13 2.6 PHP... 13 2.7 MySQL... 14 2.7.1 Keunggulan MySQL... 14 2.8 Captcha... 14 2.9 Integrasi Data dan Nota Dinas... 15 2.10 Unified Modeling Language (UML)... 15 2.10.1 Gambaran Umum UML... 15 xii

2.10.2 Notasi Dasar UML... 16 2.10.3 Diagram UML...17 2.11 Menggunakan Rekayasa Web...22 2.11.1 Atribut pada Aplikasi dan Sistem Berbasis Web... 22 2.11.2 Layer-layer WebApp Engineering... 23 2.11.3 Web Engineering Process... 23 2.11.4 Formulating Sistem Berbasis Web... 25 2.11.5 Kelompok Web Engineering... 26 2.11.6 Requirement Analysis untuk WebApps... 26 2.11.7 Content Model... 28 2.11.8 Interaction Model... 28 2.11.9 Functional Model... 30 2.11.10 Configuration Model... 30 2.11.11 Relationship-Navigation Analysis... 31 2.11.12 Desain dan Kualitas WebApp... 31 2.11.13 Desain Goals... 32 2.11.14 WebE Design Pyramid... 33 2.11.15 konsep-konsep Testing untuk WebApps... 34 2.11.16 Proses Testing... 35 BAB III METODOLOGI PENELITIAN... 36 3.1 Metodologi Penelitian... 36 3.2 Hipotesis Penelitian... 37 xiii

3.3 Waktu dan Lokasi Penelitian... 37 3.3.1 Waktu Pelaksanaan... 37 3.3.2 Lokasi Penelitian...37 3.4 Peralatan Penelitian...37 3.4.1 Perangkat Keras... 38 3.4.2 Perangkat Lunak... 38 3.5 Metode Penelitian... 38 3.5.1 Teknik Pengumpulan Data...... 38 3.5.2 Pengembangan Sistem... 39 3.5.2.1 Requirement... 39 3.5.2.2 Analisis... 39 3.5.2.3 Perancangan Sistem... 40 3.5.2.4 Implementasi Sistem... 41 3.5.2.5 Testing... 41 BAB IV HASIL DAN PEMBAHASAN... 44 4.1 Requirement... 45 4.1.1 Sekilas Tentang KPTI... 45 4.2 Analisis... 47 4.2.1 Diagram Konteks... 47 4.2.2 Mengidentifikasi Use Case dan Aktor... 48 4.2.3 Mendeskripsikan Use Case Tingkat Analisis... 50 4.2.4 Identifikasi Kelas Pada Use Case... 57 xiv

4.3 Perancangan Sistem... 59 4.3.1 Deskripsi Use Case Tingkat Perancangan... 60 4.3.2 State Machine Diagram... 68 4.3.2.1 State Machine Diagram Menambah Kotak Saran.... 69 4.3.2.2 State Machine Diagram Login Kotak Saran..... 70 4.3.2.3 State Machine Diagram Mencari Kotak Saran... 71 4.3.2.4 State Machine Diagram Mengedit Kotak Saran... 72 4.3.2.5 State Machine Diagram Menghapus Kotak Saran... 73 4.3.2.6 State Machine Diagram Logout Kotak Saran... 74 4.3.2.7 State Machine Diagram Login Nota Dinas... 75 4.3.2.8 State Machine Diagram Membuat Nota Dinas... 76 4.3.2.9 State Machine Diagram Mencari Nota Dinas... 77 4.3.2.10 State Machine Diagram Mendownload Nota Dinas... 78 4.3.2.11 State Machine Diagram Logout Nota Dinas... 79 4.3.3 Sequence Diagram...... 79 4.3.3.1 Sequence Diagram Menambah Kotak Saran... 80 4.3.3.2 Sequence Diagram Login Kotak Saran... 81 4.3.3.3 Sequence Diagram Mencari Kotak Saran... 82 4.3.3.4 Sequence Diagram Mengedit Kotak Saran... 83 4.3.3.5 Sequence Diagram Menghapus Kotak Saran... 84 4.3.3.6 Sequence Diagram Login Nota Dinas... 85 4.3.3.7 Sequence Diagram Membuat Nota Dinas... 86 xv

4.3.3.8 Sequence Diagram Attach Nota Dinas... 87 4.3.3.9 Sequence Diagram Mencari Nota Dinas... 88 4.3.3.10 Sequence Diagram Mendownload Nota Dinas... 89 4.3.4 Activity Diagram... 89 4.3.4.1 Activity Diagram Aplikasi Nota Dinas..... 90 4.3.4.2 Activity Diagram Aplikasi Kotak Saran User... 91 4.3.4.3 Activity Diagram Aplikasi Kotak Saran Admin... 92 4.3.5 Perancangan Database... 93 4.3.5.1 Diagram ERD (Entity Relationship Diagram)..... 94 4.3.5.2 Struktur Data... 94 4.4 Implementasi Sistem...... 97 4.4.1 Instalasi XAMPP v.1.6.3 a... 97 4.4.2 Tambahan Setting pada File PHP.ini... 99 4.4.3 Proses Pembuatan File XML ke dalam Web KPTI... 100 4.4.4 Pembuatan Database Aplikasi Nota Dinas dan Kotak Saran pada PHP MyAdmin... 115 4.4.5 Captcha Sebagai Fitur Keamanan untuk Form-form Login dan Form Input pada Aplikasi Web KPTI... 118 4.4.5.1 Analisis Captcha... 118 4.4.6 Pembuatan Interface Mengubah File XML... 119 4.4.7 Tampilan Layar Perancangan Aplikasi Website E-Government Pada Kantor Pengelola Teknologi Informasi (KPTI) Dengan Menggunakan XHTML xvi

(Studi Kasus: Walikota Jakarta Barat).... 121 4.4.7.1 Tampilan Layar Index pada Home KPTI... 121 4.4.7.2 Tampilan Layar Login Edit Data XML... 123 4.5 Testing... 123 4.5.1 Objektif Testing... 124 4.5.2 White Box... 124 4.5.3 Black Box... 125 4.5.4 Pengujian Kesesuaian Hasil Sistem dengan Rancangan... 125 BAB V PENUTUP... 133 5.1 Kesimpulan... 133 5.2 Saran... 134 DAFTAR PUSTAKA... 135 Lampiran A... 137 Lampiran B... 139 Lampiran C... 141 Lampiran D... 142 xvii

DAFTAR TABEL Tabel 2.1 Tabel Simbol Activity Diagram... 20 Tabel 4.1 Perbedaan Obyek-obyek dalam Model Bisnis dan Model Sistem... 48 Tabel 4.2 Requirement Aktor dan Use Case... 49 Tabel 4.3 Spesifikasi Naratif untuk Use Case Membuat Kotak Saran Tingkat Analisis... 51 Tabel 4.4 Spesifikasi Naratif untuk Use Case Login Kotak Saran Tingkat Analisis... 52 Tabel 4.5 Spesifikasi Naratif untuk Use Case Mencari Kotak Saran Tingkat Analisis... 53 Tabel 4.6 Spesifikasi Naratif untuk Use Case Mengedit Kotak Saran Tingkat Analisis... 54 Tabel 4.7 Spesifikasi Naratif untuk Use Case Login Nota Dinas Tingkat Analisis... 55 Tabel 4.8 Spesifikasi Naratif untuk Use Case Membuat Nota Dinas Tingkat Analisis... 56 xviii

Tabel 4.9 Kandidat Class Entitiy pada Aplikasi Nota Dinas dan Kotak Saran pada KPTI Kodya Jakarta Barat... 57 Tabel 4.10 Spesifikasi Naratif untuk Use Case Membuat Kotak Saran Tingkat Perancangan... 60 Tabel 4.11 Spesifikasi Naratif untuk Use Case Login Kotak Saran Tingkat Perancangan... 61 Tabel 4.12 Spesifikasi Naratif untuk Use Case Mencari Kotak Saran Tingkat Perancangan... 62 Tabel 4.13 Spesifikasi Naratif untuk Use Case Mengedit Kotak Saran Tingkat Perancangan... 63 Tabel 4.14 Spesifikasi Naratif untuk Use Case Login Nota Dinas Tingkat Perancangan... 64 Tabel 4.15 Spesifikasi Naratif untuk Use Case Membuat Nota Dinas Tingkat Perancangan... 65 Tabel 4.16 Informasi_Nota... 95 Tabel 4.17 Login_Nota... 96 Tabel 4.18 Data_Saran... 96 xix

Tabel 4.19 Login_Saran... 97 Tabel 4.20 Pengujian Aplikasi dengan Metode Black Box... 125 xx

DAFTAR GAMBAR Gambar 2.1 Sejarah Perkembangan Web... 11 Gambar 2.2 Notasi Actor pada UML... 16 Gambar 2.3 Notasi Class pada UML... 16 Gambar 2.4 Notasi Use Case pada UML... 17 Gambar 2.5 Diagram-diagram pada UML Versi 2.0... 18 Gambar 2.6 Use Case Model... 18 Gambar 2.7 Sebuah Class dalam UML... 19 Gambar 2.8 Simbol-simbol yang ada pada Sequence Diagram... 21 Gambar 2.9 Simbol Statechart Diagram... 21 Gambar 2.10 Penambahan Detail ke State... 22 Gambar 2.11 Web Engineering Process... 25 Gambar 2.12 Quality Requirement Tree... 32 Gambar 2.13 WebE Design Pyramid... 33 Gambar 3.1 Alur Kerja Penelitian... 36 Gambar 3.2 Fase-fase Pembangunan Aplikasi Website KPTI Kodya xxi

Jakarta Barat... 43 Gambar 4.1 Ilustrasi Flow Sistem Web KPTI Kodya Jakarta Barat... 44 Gambar 4.2 Diagram Konteks... 47 Gambar 4.3 Use Case Diagram... 50 Gambar 4.4 Class Diagram Tingkat Analisis... 58 Gambar 4.5 Class Diagram Tingkat Perancangan... 67 Gambar 4.6 State Machine Diagram Menambah Kotak Saran... 69 Gambar 4.7 State Machine Diagram Login Kotak Saran... 70 Gambar 4.8 State Machine Diagram Mencari Kotak Saran... 71 Gambar 4.9 State Machine Diagram Mengedit Kotak Saran... 72 Gambar 4.10 State Machine Diagram Menghapus Kotak Saran... 73 Gambar 4.11 State Machine Diagram Logout Kotak Saran... 74 Gambar 4.12 State Machine Diagram Login Nota Dinas... 75 Gambar 4.13 State Machine Diagram Membuat Nota Dinas... 76 Gambar 4.14 State Machine Diagram Mencari Nota Dinas... 77 Gambar 4.15 State Machine Diagram Mendownload Nota Dinas... 78 Gambar 4.16 State Machine Diagram Logout Nota Dinas... 79 xxii

Gambar 4.17 Sequence Diagram Menambah Kotak Saran... 80 Gambar 4.18 Sequence Diagram Login Kotak Saran... 81 Gambar 4.19 Sequence Diagram Mencari Kotak Saran... 82 Gambar 4.20 Sequence Diagram Mengedit Kotak Saran... 83 Gambar 4.21 Sequence Diagram Menghapus Kotak Saran... 84 Gambar 4.22 Sequence Diagram Login Nota Dinas... 85 Gambar 4.23 Sequence Diagram Membuat Nota Dinas... 86 Gambar 4.24 Sequence Diagram Attach Nota Dinas... 87 Gambar 4.25 Sequence Diagram Mencari Nota Dinas... 88 Gambar 4.26 Sequence Diagram Mendownload Nota Dinas... 89 Gambar 4.27 Activity Diagram Aplikasi Nota Dinas... 90 Gambar 4.28 Activity Diagram Aplikasi Kotak Saran User... 91 Gambar 4.29 Activity Diagram Aplikasi Kotak Saran Admin... 92 Gambar 4.30 Entity Relationship Diagram... 94 Gambar 4.31 Mencari Aplikasi XAMPP pada Menu Start Program... 98 Gambar 4.32 XAMPP Control Panel... 99 Gambar 4.33 Struktur.xml dalam Bentuk Tree View... 101 xxiii

Gambar 4.34 Sejarah.xml dalam Bentuk Tree View... 102 Gambar 4.35 Divisi.xml dalam Bentuk Tree View... 102 Gambar 4.36 Misi.xml dalam Bentuk Tree View... 103 Gambar 4.37 Tujuan.xml dalam Bentuk Tree View... 104 Gambar 4.38 Perda.xml dalam Bentuk Tree View... 105 Gambar 4.39 Agenda.xml dalam Bentuk Tree View... 106 Gambar 4.40 Pemberitahuan.xml dalam Bentuk Tree View... 106 Gambar 4.41 Source Code Proses Memilih File XML... 120 Gambar 4.42 Tampilan Memilih File XML... 120 Gambar 4.43 Source Code Proses Edit File XML... 121 Gambar 4.44 Tampilan Layar Index KPTI... 122 Gambar 4.45 Tampilan Layar Login Edit Data XML... 123 xxiv

DAFTAR LAMPIRAN Lampiran A... 137 A1. Use Case Diagram yang Lengkap... 137 A2. Class Diagram Tingkat Perancangan yang Lengkap... 138 Lampiran B... 139 B1. Struktur Organisasi Walikota Jakarta Barat... 139 B2. Struktur Organisasi KPTI Kodya Jakarta Barat... 140 Lampiran C... 141 C1. Wawancara dengan Ibu Nur Aripiani Selaku Pembimbing Riset di KPTI.. 141 C2. Wawancara dengan Bapak Herman Selaku Staf Jaringan di KPTI... 141 Lampiran D... 142 D1. Source Code Web KPTI... 142 D2. Source Code Aplikasi Berita... 177 D3. Source Code Aplikasi Nota Dinas... 184 D4. Source Code Aplikasi Kotak Saran... 193 xx v