perancangan aplikasi website e-government pada kantor teknologi informasi kpti dengan...

51
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

Upload: vuongkhuong

Post on 02-May-2019

215 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

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

Page 2: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

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

Page 3: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

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

Page 4: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

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

Page 5: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

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

Page 6: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

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

Page 7: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

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 berbeda-

beda 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

Page 8: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

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

Page 9: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

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

Page 10: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

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

Page 11: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

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

Page 12: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

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

Page 13: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

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

Page 14: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

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

Page 15: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

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

Page 16: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

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

Page 17: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

(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

Page 18: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

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

Page 19: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

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

Page 20: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

Tabel 4.19 Login_Saran ...................................................................................... 97

Tabel 4.20 Pengujian Aplikasi dengan Metode Black Box ................................ 125

xx

Page 21: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

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

Page 22: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

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

Page 23: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

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

Page 24: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

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

Page 25: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

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

xxv

Page 26: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

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

Page 27: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

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

Page 28: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

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

Page 29: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

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

Page 30: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

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

Page 31: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

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

Page 32: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

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 berbeda-

beda 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

Page 33: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

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

Page 34: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

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

Page 35: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

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

Page 36: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

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

Page 37: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

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

Page 38: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

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

Page 39: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

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

Page 40: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

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

Page 41: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

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

Page 42: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

(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

Page 43: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

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

Page 44: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

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

Page 45: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

Tabel 4.19 Login_Saran ...................................................................................... 97

Tabel 4.20 Pengujian Aplikasi dengan Metode Black Box ................................ 125

xx

Page 46: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

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

Page 47: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

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

Page 48: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

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

Page 49: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

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

Page 50: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

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

Page 51: Perancangan Aplikasi Website E-Government Pada Kantor Teknologi Informasi KPTI Dengan ...repository.uinjkt.ac.id/dspace/bitstream/123456789/13101... · 2013-04-24 · Dengan ini menyatakan

xxv