Muhammad Iqbal Fst

PENGEMBANGAN WEB PORTAL UNIVERSITAS MENGGUNAKAN JQUERY PADA STMIK ISLAM INTERNASIONAL JAKARTA

Oleh; Muhammad Iqbal 106091002951

PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS SAINS DAN TEKNOLOGI UNIVERSITAS ISLAM NEGERI SYARIF HIDAYATULLAH JAKARTA 2011 M/ 1432 H

Pengembangan Web Portal Universitas Menggunakan Jquery Pada STMIK Islam Internasional Jakarta

Skripsi Sebagai Salah Satu Syarat untuk Memperoleh Gelar Sarjana Komputer Fakultas Sains dan Teknologi Universitas Islam Negeri Syarif Hidayatullah Jakarta

Oleh : Muhammad Iqbal 106091002951

PROGRAM STUDI TEKNIK INFORMATIKA INFORMATIKA FAKULTAS SAINS DAN TEKNOLOGI UNIVERSITAS UNIVERSITAS ISLAM NEGERI SYARIF HIDAYATULLAH JAKARTA 2011 M/ 1432 H

Pengembangan Web Portal Universitas Menggunakan JQuery Pada STMIK Islam Internasional Jakarta

Skripsi Sebagai Salah Satu Syarat untuk Memperoleh Gelar Sarjana Komputer Fakultas Sains dan Teknologi Universitas Islam Negeri Syarif Hidayatullah Jakarta Oleh: Muhammad Iqbal 106091002951 Menyetujui,

Pembimbing I

Pembimbing II

Yusuf Durachman M.Sc, MIT  NIP. 19710522 200604 20 0604 1 002

Arini, M.T  NIP. 19760131200912 1976013120 0912 2 001

Mengetahui, Ketua Program Studi Teknik Informatika,

Yusuf Durrachman, M.sc., M.I.T. M. I.T. NIP.197110522 200604 1 002

PENGESAHAN UJIAN

Skripsi yang berjudul “ Pengembangan Web Portal Universitas Menggunakan JQuery Pada STMIK Islam Internasional Jakarta” , telah diuji dan dinyatakan lulus dalam Sidang Munaqosah Fakultas Sains dan Teknologi Universitas Islam Negeri Syarif Hidayatullah Jakarta, pada hari Jumat tanggal 23 September 2011. Skripsi ini telah diterima sebagai salah satu syarat untuk memperoleh gelar Sarjana Komputer  pada Program Teknik Informatika Jakarta, 23 September 2011 Tim Penguji,

Penguji II

Penguji I

Dewi Khairani, M.Sc  NIP. 19820522 201101 201 101 2 001 Pembimbing I

Tim Pembimbing, Fenty Eka Muzzayyana, M.Kom

Yusuf Durrachman M.Sc, MIT  NIP. 19710522 200604 1 002

 NIP. 19760805 2009112 200 9112 2 003 Pembimbing II

Mengetahui,

Arini, M.T  NIP. 19760131 200912 2009 12 2 001

Dekan Fakultas Sains Dan Teknologi

Ketua Program Studi Teknik Informatika

DR. Syopiansyah Jaya Putra, M.Sis  NIP. 19680117 200112 20011 2 1 001

Yusuf Durrachman M.Sc, M.I.T.  NIP. 19710522 200604 1 002 0 02

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 ATAU LEMBAGA MANAPUN.

Jakarta, September 2011

Muhammad Iqbal

ABSTRAK Muhammad Iqbal, Pengembangan Web Portal Universitas Menggunakan JQuery Pada STMIK Islam Internasional Jakarta dibawah bimbingan Yusuf Durachman M.Sc, MIT dan Arini, M.T

Informasi yang cepat, tepat dan menyajikan data-data yang lengkap adalah suatu hal yang dibutuhkan oleh perguruan tinggi untuk mempermudah kelangsungan kegiatan perkuliahan. Kesulitan pengelolaan web portal yang dialami oleh administrator, dan belum adanya sistem pendaftaran mahasiswa baru di STMIK Islam Internasional Jakarta, membuat dikembangkannya suatu sistem informasi yang membantu dalam mengatasi permasalahan yang dialami oleh STMIK Islam Internasional Jakarta. Sistem informasi tersebut bernama Web Portal yang  pembuatannya menggunakan teknologi JQuery sebagai library javascript yang dapat mempermudah dan mempercepat developer web dalam membuat kode Javascript. Penelitian yang penulis lakukan menggunakan metode pengembangan sistem FAST ( Framework for the Applications of Sytems Thinking ) yang merupakan sebuah metode yang memiliki pendekatan lebih detail dengan perencanaan yang baik dan co cok untuk pembuatan berbagai jenis aplikasi. Sebagai hasil dari tugas akhir ini adalah mengembangkan web portal STMIK Islam Internasional menjadi lebih mudah digunakan dan juga mempermudah proses pendaftaran mahasiswa baru, yaitu sistem pendaftaran mahasiswa baru secara online. Pengembangan ke depan dari aplikasi ini diharapkan tidak hanya sebatas sistem web portal saja akan tetapi dapat diintegrasikan ke sistem-sistem lainnya yaitu pada sistem dibuat satu buah sistem login yang dapat mengakses ke semua sistem yang ada.

Kata Kunci: Pengelolaan Web, Sistem Pendaftaran Online  , Web Portal, JQuery, F ramework for the Appli cations of Sytems Th in ki ng. xxiv halaman + 172 halaman + 95 gambar + 4 Lampiran Daftar pustaka : 24 (2004-2010)

KATA PENGANTAR  Segala puji hanya milik Allah Subhanahu wa Ta’aala. Shalawat dan salam semoga senantiasa dilimpahkan kepada Rasulullah shallallaahu’alaihi wa sallam,

kepada keluarga, dan kepada para Sahabatnya. Alhamdulillah, dengan taufiq, pertolongan, dan rahmat Allah Subhanahu wa Ta’aala, skripsi yang berjudul

“

Pengembangan Web Portal Universitas

Menggunakan Jquery pada STMIK Islam Internasional Jakarta   telah dapat ”

 penulis selesaikan dengan baik. Adanya perbaikan dan berbagai tambahan dalam skripsi ini menunjukan  bahwa manusia bersifat lemah dan tidak dapat berbuat sempurna, karena kesempurnaan itu hanya milik Allah Ta’aala. Imam al -Muzani, sahabat Imam asySyafi’i pernah berkata “Seandainya sebuah kitab dilihat dan dibaca (berulang -ulang)

sebanyak tujuh puluh kali, niscaya akan tetap didapati kesalahan di dalamnya karena Allah Ta’ala tidak menginginkan ada satu kitab manapun yang sempurna

keshalihannya kecuali Kitab- Nya yang mulia” Dalam

pelaksanaan pembuatan skripsi ini penulis mendapatkan banyak

 bantuan baik dari

segi moral dan

material.

Oleh karena

itu penulis

ingin

mengucapkan terimakasih kepada: 1.

Bapak DR. IR. Syopiansyah Jaya Putra, M.Sis. selaku Dekan Fakultas Sains dan Teknologi Universitas Islam Negeri Syarif Hidayatullah Jakarta.

2.

Bapak Yusuf Durachman, M.Sc dan Ibu Viva Arifin, MMSI selaku Ketua dan Sekretaris Program Studi Teknik Informatika.

3.

Bapak Yusuf Durachman, M.Sc dan Ibu Arini, M.T, M.Eng selaku dosen

 pembimbing skripsi. 4.

Kedua orang tua penulis H. Umar Fauzi dan Hj. Rosmaliati yang selalu memberikan dukungan dan doa restu kepada penulis dalam berbagai bentuk. Terimakasih telah menjadi penyemangat di setiap waktu.

5.

Febrina Rizky Syaharani yang selalu memberikan semangat dalam pembuatan skripsi ini.

6.

Ferry Siswoyo, Imam Muzakkir, Wahyudianto, Arif Kunto, Iche Berlyanti, Widodo, Widarto dan teman-teman lain yang

telah mau membantu dan

 bertukar ilmu dengan penulis. 7. Semua pihak yang telah membantu dan tidak bisa penulis sebutkan satu per satu disini. Penulis menyadari bahwa di dalam penulisan skripsi ini masih banyak kekurangan. Maka dari itu saran yang

membangun penulis

harapkan

untuk

 perbaikan dimasa yang akan datang.

Ciputat, September 2011

Muhammad Iqbal

DAFTAR ISI

Halaman Halaman Judul .................. ............................................................................ ii Lembar Persetujuan Pembimbing...... ............................................................ iii Lembar Persetujuan Penguji........ .................................................................. iv Lembar Pernyataan ........ .............................................................................. v Abstrak ........ ................................................................................................ vi Kata Pengantar ........ ..................................................................................... vii Daftar Isi. ...................................................................................................... ix Daftar Gambar ....... ...................................................................................... xvi Daftar Tabel ........ ......................................................................................... xx Daftar Simbol................................................................................................ xxii Daftar Istilah........ ......................................................................................... xxiv

BAB I

PENDAHULUAN ........................................................................ .......1

1.1. Latar Belakang ..............................................................................1 1.2. Rumusan Masalah ........................................................................ 3 1.3. Batasan Masalah ......................................................................... 3 1.4. Tujuan Penelitian ..........................................................................4 1.5. Manfaat Penelitian ........................................................................5 1.5.1. Bagi Penulis .......................................................................5 1.5.2. Bagi Universitas ........................................................5

15.3. Bagi Pengguna ...............................................................

6

1.6. Metodologi Penelitian .......................................................................6 1.6.1. Metode Pengumpulan Data ........................................... 6 1.6.2. Metode Pengembangan Sistem ............................................... 8 1.7. Sistematika Penulisan ............................................................ .......... 8

BAB II LANDASAN TEORI ................................................................................ 10

2.1. Konsep Dasar Internet ......................................................................... 10 2.2. Konsep Dasar Web Portal ..................................................................... 10 2.3. Pengantar Pemograman Web ................................................................ 11 2.4. Konsep Metodologi ............................................................................. 12 2.4.1. Metode Pengumpulan Data ....................................................... 12 2.4.2. Framework for the Applications of Sytems Thinking................ 13 2.4.2.1. Definisi Ruang Lingkup ............................................... 15 2.4.2.2. Analisis Permasalahan .................................................. 16 2.4.2.3. Analisis Kebutuhan ....................................................... 16 2.4.2.4. Desain Logikal .............................................................. 17 2.4.2.5. Analisis Keputusan ....................................................... 18 2.4.2.6. Desain Fisik dan Integrasi ............................................. 19 2.4.2.7. Konstruksi dan Pengujian ............................................. 19 2.4.2.8. Instalasi dan Pengujian ................................................. 20 2.5. Bagan Alir (Flowchart) ....................................................................... 21 2.6. Tool Perancangan Sistem .................................................................... 22

2.6.1. Data Flow Diagram (DFD) ....................................................... 22 2.6.2. Entity Relationship Diagram (ERD) ......................................... 23 2.6.3. State Transition Diagram (STD) ............................................... 23 2.7. Desain Perancangan Sistem ................................................................ 23 2.7.1. Desain Data ............................................................................... 23 2.7.2. Desain Arsitektur ...................................................................... 24 2.7.3. Desain Prosedural ..................................................................... 24 2.7.4. Desain Interface ......................................................................... 24 2.8. Perangkat Lunak Pengembangan Sistem ............................................ 25 2.8.1. Javascript ................................................................................... 25 2.8.2. JQUERY ................................................................................... 25 2.8.3. PHP ............................................................................................ 33 2.8.4. MYSQL ..................................................................................... 34 2.8.5. Apache Web Server ................................................................... 35 2.8.6. Cascading Style Sheet(CSS) ...................................................... 36 2.8.7. Adobe Photoshop CS4 ............................................................... 37 2.9. Pengelolaan Database .......................................................................... 38 2.10. Studi Sejenis ...................................................................................... 40

BAB III METODOLOGI PENELITIAN ............................................................. 44

3.1. Metode Pengumpulan Data ..................................................................

44

3.1.1. Studi Lapangan ..........................................................................

44

a. Observasi ................................................................................

44

 b. Wawancara .............................................................................

45

3.1.2. Studi Pustaka .............................................................................

46

3.1.3. Studi Literatur ............................................................................

46

3.1.4. Studi Kelayakan .........................................................................

48

3.2. Metode Pengembangan Sistem ............................................................ 49 3.2.1. Definisi Ruang Lingkup ……....................................................

50

3.2.2. Analisis Permasalahan ...............................................................

50

3.2.3. Analisis Kebutuhan ....................................................................

51

3.2.4. Desain Logikal ...........................................................................

51

3.2.5. Analisis Keputusan ....................................................................

52

3.2.6. Desain Fisik dan Integrasi..........................................................

52

3.2.7. Konstruksi dan Pengujian ..........................................................

53

3.2.8. Instalasi dan Pengiriman ............................................................

53

3.3. Alasan Pemilihan Metode .................................................................... 54 3.3.1. Kelebihan Metode FAST ...........................................................

54

3.3.2. Kelemahan Metode FAST .........................................................

55

3.4. Kerangka Berpikir ............................................................................

59

BAB IV HASIL DAN PEMBAHASAN ……………………................................60

4.1. Gambaran STMIK Islam Internasional Jakarta ...................................

60

4.1.1. Kursus Yang Ditawarkan ...........................................................60 4.1.2. Program Studi ............................................................................ 61 4.1.3. Tahun Akademik ....................................................................... 61

4.1.5. Visi dan Misi ............................................................................. 61 4.1.5.1. Visi ................................................................................ 61 4.1.5.2. Misi ............................................................................... 62 4.1.6. Strutur Organisasi ............................................................ 63 4.2. Definisi Ruang Lingkup ...................................................................... 64 4.3. Analisis Permasalahan ......................................................................... 65 4.3.1. Analisis Sistem Berjalan ............................................................ 65 4.3.1.1. Proses Web Portal Halaman User ................................. 66 4.3.1.2. Proses Web Portal Halaman Administrator .................. 67 4.3.1.3. Proses Pendaftaran Mahasiswa Baru ............................ 67 4.3.2. Identifikasi Masalah .......................................................... 68 4.3.3. Pemecahan Masalah .................................................................. 70 4.3.4. Uraian Singkat Sistem yang diusulkan ...................................... 70 4.3.4.1. Proses Web Portal Halaman User …............................. 70 4.3.4.2. Proses Web Portal Halaman Administrator................... 72 4.3.4.3. Proses Pendaftaran Mahasiswa Baru Secara Online ..... 73 4.4. Analisis Kebutuhan ..............................................................................

75

4.5. Desain Logikal .....................................................................................

76

4.5.1. Perancangan Data Flow Diagram (DFD) .................................. 76 4.5.1.1. Rancangan Diagram Konteks......................................... 77 4.5.1.2. Rancangan Diagram Level 1 yang diusulkan ............... 78 4.5.1.3. Rancangan Diagram Level 2 yang diusulkan ................ 79 4.5.2. Perancangan Entity Relationship Diagram (ERD) .................... 92

4.5.3. Normalisasi ................................................................................ 94 4.5.4. Perancangan State Transition Diagram (STD) ............... ..100 4.5.4.1. Rancangan STD Menu Utama ........................ 100 4.5.4.2. Rancangan STD Masukan User ........................103 4.5.4.3. Rancangan STD Masukan Pada Admin ....... .....

105

4.6. Analisa Keputusan .......................................................................111 4.6.1. Sistem Yang Digunakan ..................................................111 4.6.2. Kepemilikan Perangkat Lunak ..........................................112 4.6.3. Desain Sistem ................................................................112 4.6.4. Teknologi yang dihasilkan dari aplikasi ............................112 4.6.5. Analisis Kelayakan ........................................................112 4.7. Desain Fisik dan Integrasi ......................................................119 4.7.1. Spesifikasi Database 119 4.7.2. Perancangan Antarmuka .....................................................131 4.7.2.1. Rancangan Interface Halaman User ..................131 4.7.2.2. Rancangan Interface Halaman Admin ...............135 4.8. Konstruksi dan Pengujian .............................................................142 4.8.1. Konstruksi Perangkat Lunak .........................................142 4.8.2. Hardware .....................................................................143 4.8.3. Pengujian Mandiri ........................................................144 4.8.4. Pengujian Penerimaan ..................................................147 4.9. Instalasi dan Pengiriman ............................................................149 4.8.1. Login .....................................................................................149

4.8.2. Control Panel ................................................................151 4.8.3. Membuat Database MySQL .........................................153 4.8.4. Konfigurasi Koneksi Database My SQL ........................157

BAB V KESIMPULAN DAN SARAN .......................................................170 DAFTAR PUSTAKA ................................................................................172 LAMPIRAN-LAMPIRAN

DAFTAR GAMBAR

Halaman Gambar 2.1. Aliran Tiap-Tiap Fase Metodologi FAST...................................... 14 Gambar 2.2. Struktur Model Analisis . ............................................................. 22 Gambar 2.3. Perbandingan Framework Javascript ……………………. ........... 31 Gambar 2.4. Perbandingan Framework Javascript dari Segi Fitur …………. ... 32 Gambar 2.5. Perbandingan Framework Javascript dari Segi Dukungan Web Browser ..........................................................................................33 Gambar 2.6. Lingkungan Kerja Adobe Photoshop 4.0 ………………………...38 Gambar 3.1. Kerangka Berpikir...........................................................................59 Gambar 4.1. Struktur Organisasi IIUC ............................................................. 63 Gambar 4.2. Proses Sistem Berjalan Web Portal .............................................. 66 Gambar 4.3. Proses Sistem Berjalan Administrator Web Portal ....................... 67 Gambar 4.4. Proses Sistem Berjalan Pendaftaran Mahasiswa Baru ................... 68 Gambar 4.5. Proses Sistem Web Portal yang Diusulkan..................................... 72 Gambar 4.6. Proses Administrator Web Portal yang Diusulkan ........................ 73 Gambar 4.7. Proses Sistem Pendaftaran Mahasiswa Baru Secara Online yang diusulkan ..................................................................................... 75 Gambar 4.8. Diagram Konteks Web Portal ...................................................... 78 Gambar 4.9. DFD Level 1 yang Diusulkan ....................................................... 79 Gambar 4.10. DFD Level 2 Proses 1.0 ............................................................... 80 Gambar 4.11. DFD Level 3 Proses 1.1 ............................................................ 81

Gambar 4.12. DFD Level 3 Proses 1.2 ............................................................ 81 Gambar 4.13. DFD Level 3 Proses 1.3................................................................82 Gambar 4.14. DFD Level 2 Proses 2.0 ............................................................ 82 Gambar 4.15. DFD Level 3 Proses 2.1 ...............................................................83 Gambar 4.16. DFD Level 3 Proses 2.2 ............................................................ 84 Gambar 4.17. DFD Level 2 Proses 3.0 ............................................................ 85 Gambar 4.18. DFD Level 3 Proses 3.1 ............................................................ 86 Gambar 4.19. DFD Level 3 Proses 3.2 ............................................................ 86 Gambar 4.20. DFD Level 3 Proses 3.3 ............................................................ 87 Gambar 4.21. DFD Level 2 Proses 4.0 ............................................................ 88 Gambar 4.22. DFD Level 3 Proses 4.1 ............................................................ 89 Gambar 4.23. DFD Level 3 Proses 4.2 ............................................................ 89 Gambar 4.24. DFD Level 3 Proses 4.3 ............................................................ 90 Gambar 4.25. DFD Level 2 Proses 5.0 ............................................................ 91 Gambar 4.26. DFD Level 3 Proses 5.1 ............................................................ 92 Gambar 4.27. DFD Level 3 Proses 5.2 ............................................................ 92 Gambar 4.28. DFD Level 2 Proses 6.0 ............................................................ 93 Gambar 4.29. Model Entity Relationship Diagram (ERD) ............................... 94 Gambar 4.30. Model Logical Record Structure (LRS)...................................... 95 Gambar 4.31. STD Menu Utama User .............................................................. 106 Gambar 4.32. STD Menu Utama Admin ......................................................... 107 Gambar 4.33. STD Menu Utama Kiri .............................................................. 108 Gambar 4.34. STD Menu Why IIUC ................................................................ 108

Gambar 4.35. STD Menu Program Studi.............................................................109 Gambar 4.36. STD Menu Pendaftaran ............................................................. 109 Gambar 4.37. STD Menu Fasilitas ......................................................................110 Gambar 4.38. STD Menu Berita ...................................................................... 110 Gambar 4.39. STD Menu Tentang Kami ............................................................111 Gambar 4.40. STD Menu Galeri Foto .................................................................111 Gambar 4.41. STD Menu Hubungi Kami ...........................................................112 Gambar 4.42. STD Input Pendaftaran .................................................................113 Gambar 4.43. STD Input Pencarian ....................................................................113 Gambar 4.44. STD Input Komentar ....................................................................113 Gambar 4.45. STD Input Hubungi Kami.............................................................114 Gambar 4.46. STD Input Login ......................... .................................................114 Gambar 4.47. STD Input Modul....................................................................... 115 Gambar 4.48. STD Input Agenda ..................................................................... 115 Gambar 4.49. STD Input Berita ....................................................................... 116 Gambar 4.50. STD Input Validasi ...................................................................... 116 Gambar 4.51. STD Input Partner IIUC ............................................................ 117 Gambar 4.52. STD Input File Upload ............................................................. 117 Gambar 4.53. STD Input Sekilas Info ............................................................. 118 Gambar 4.54. STD Input Album ...................................................................... 118 Gambar 4.55. STD Input Galeri Foto ................................................................. 119 Gambar 4.56. STD Input Menu Utama ............................................................. 119 Gambar 4.57. STD Input Sub Menu ................................................................. 120

Gambar 4.58. STD Input Halaman Statis ............................................................120 Gambar 4.59. Rancangan Layar Halaman Home User  ...................................... 141 Gambar 4.60. Rancangan Layar Halaman Why IIUC .........................................142 Gambar 4.61. Rancangan Layar Halaman Program Studi ................................. 142 Gambar 4.62. Rancangan Layar Halaman Pendaftaran .................................... 143 Gambar 4.63. Rancangan Layar Halaman Berita .............................................. 143 Gambar 4.64. Rancangan Layar Halaman Profil .............................................. 144 Gambar 4.65. Rancangan Layar Halaman Galeri Foto ..................................... 144 Gambar 4.66. Rancangan Layar Halaman Hubungi Kami ................................ 145 Gambar 4.67. Rancangan Layar Halaman Pendaftaran Online .......................... 145 Gambar 4.68. Rancangan Layar Halaman Home Admin................................... 146 Gambar 4.69. Rancangan Layar Halaman Admin Modul.................................. 147 Gambar 4.70. Rancangan Layar Halaman Admin Agenda ................................ 147 Gambar 4.71. Rancangan Layar Halaman Admin Berita .................................. 148 Gambar 4.72. Rancangan Layar Halaman Admin Komentar ............................ 148 Gambar 4.73. Rancangan Layar Halaman Admin Partner  IIUC ....................... 149 Gambar 4.74. Rancangan Layar Halaman Admin Download............................ 149 Gambar 4.75. Rancangan Layar Halaman Admin Hubungi Kami ..................... 150 Gambar 4.76. Rancangan Layar Halaman Admin Sekilas Info ......................... 150 Gambar 4.77. Rancangan Layar Halaman Admin Album ................................. 150 Gambar 4.78. Rancangan Layar Halaman Admin Galeri Foto .......................... 150 Gambar 4.79. Rancangan Layar Halaman Admin Menu Utama ....................... 152 Gambar 4.80. Rancangan Layar Halaman Admin Validasi ............................... 152

Gambar 4.81. Rancangan Layar Admin Halaman Statis.....................................153 Gambar 4.82. Halaman login Cpanel iiuc.ac.id................................................. 160 Gambar 4.83. Halaman awal Cpanel iiuc.ac.id....................................................161 Gambar 4.84. Menu Cpanel File Manager ....................................................... 163 Gambar 4.85. Pilih Direktori file Cpanel iiuc.ac.id..............................................163 Gambar 4.86. Menu Upload File Manager  Cpanel ............................................164 Gambar 4.87. Menu MySQL Database Cpanel iiuc.ac.id ..................................165 Gambar 4.88. Memasukkan Database Portal di CPanel......................................165 Gambar 4.89. Membuat User Untuk database Portal di CPanel .........................166 Gambar 4.90. Memilih User Untuk Database Portal di Cpanel...........................166 Gambar 4.91. Tampilan Data Database dan Users di Cpanel iiuc.ac.id..............167 Gambar 4.92. Menu PhpMyadmin di Cpanel iiuc.ac.id.......................................167 Gambar 4.93. PhpMyadmin di Cpanel iiuc.ac.id ................................................168 Gambar 4.94. Web Portal STMIK Islam Internasional Jakarta...........................168

DAFTAR TABEL Halaman Tabel 3.1. Perbandingan dengan penelitian sebelumnya......................................47 Tabel 3.2. Penelitian yang dilakukan penulis ..................................................... 48 Tabel 3.3. Perbandingan Metode Pengembangan Sistem ................................. 55 Tabel 4.1. Cause and Effect Analysis ....................................................................69 Tabel 4.2. Tabel data_pribadi Unnormalized  .................................................... 95 Tabel 4.3. Tabel data_pribadi Normal 1 (1NF) .................................................. 97 Tabel 4.4. Tabel data_pribadi 2NF................ .................................................... 98 Tabel 4.5. Tabel pilihan_program 2NF ..............................................................99 Tabel 4.6. Tabel asal_sekolah 2NF....................................................................99 Tabel 4.7. Tabel data_orang_tua 2NF.................................................................. 99 Tabel 4.8. Tabel alamat_orang_tua.2NF...............................................................99 Tabel 4.9. Candidate System Matrix ................................................................113 Tabel 4.10. Feasibility Analysis Matrix ...........................................................115 Tabel 4.11. Tabel Agenda ...............................................................................120 Tabel 4.12. Tabel berita ..................................................................................120 Tabel 4.13. Tabel kategori...............................................................................121 Tabel 4.14. Tabel album..................................................................................121 Tabel 4.15. Tabel gallery ................................................................................122 Tabel 4.16. Tabel banner  .................................................................................122 Tabel 4.17. Tabel download ............................................................................123 Tabel 4.18. Tabel menu utama ........................................................................123

Tabel 4.19. Tabel sub menu ............................................................................124 Tabel 4.20. Tabel halaman statis .....................................................................124 Tabel 4.21. Tabel hubungi...............................................................................125 Tabel 4.22. Tabel komentar .............................................................................125 Tabel 4.23. Tabel modul ................................................................................ 126 Tabel 4.24. Tabel sekilas info.......................................................................... 126 Tabel 4.25. Tabel user .................................................................................... 127 Tabel 4.26. Tabel Status User.......................................................................... 127 Tabel 4.27. Tabel data_pribadi ........................................................................ 128 Tabel 4.28. Tabel pilihan_program.................................................................. 129 Tabel 4.29. Tabel asal_sekolah ....................................................................... 129 Tabel 4.30. Tabel data_orang_tua ................................................................... 130 Tabel 4.31. Tabel alamat_orang_tua ................................................................ 131 Tabel 4.32. Daftar Tools Pengembangan Perangkat Lunak Sistem................... 143 Tabel 4.33. Hasil Pengujian Mandiri Halaman User  ........................................ 144 Tabel 4.34. Hasil Pengujian Mandiri Halaman Admin..................................... 147 Tabel 4.35. Pengujian Penerimaan Sistem ....................................................... 148

DAFTAR SIMBOL Data Flow Diagram (DFD) Simbol Nama Proses

Data Flow

Data Store

External Entity

Fungsi Mengubah suatu data dari suatu  bentuk menjadi bentuk yang lain.

Menunjukkan perpindahan data dari satu bagian ke bagian lain dalam suatu sistem Tempat penyimpanan data dalam suatu sistem Menunjukkan suatu organisasi atau perseorangan yang memasukkan data ke sistem

Sumber : (Ladjamudin) Entity Relationship Diagram (ERD) Simbol Nama Entity

Atribute Relasi

Fungsi Merupakan obyek yang mewakili sesuatu dalam dunia nyata dan dapat dibedakan antara satu dengan lainnya Merupakan karakteristik dari sebuah entitas Menghubungkan antar beberapa entitas

Sumber : (http://blog.re.or.id/erd-entity-relationship-diagram.htm)

State Transition Diagram (STD) Simbol Nama Aktifitas

State Awal

State Akhir

 Flow

Fungsi perilaku spesifikasi yang menggambarkan sekuensial serta langkah-langkah prosedur komputasi. Menunjukkan tempat dimana eksekusi program dimulai ketika sebuah activity dipanggil menyebabkan  penghentian eksekusi  paksa semua flow dalam activity dan berakhirnya  pelaksanaan activity Mendeskripsikan sumber dan target dari berbagai  jenis informasi

Sumber : (http://blog.re.or.id/std-state-transition-diagram.htm)

DAFTAR ISTILAH

 Blackbox

Suatu jenis pengujian perangkat lunak berdasarkan dengan input, output pemakai.

Coding

Tahapan

dimana

pengembangan

software

melakukan

software

melakukan

 pembangunan aplikasi.  Design

Tahapan

dimana

pengembangan

 perancangan. Testing

Tahapan dimana pengembangan software melakukan uji coba terhadap aplikasi.

User

Pengguna dari sistem

User Friendly

Bersahabat untuk digunakan, sehingga user mudah untuk menggunakan.

 FAST

Framework for Application of System Thingking

Statis

Tidak dapat diperbaharui oleh user. Hanya dapat di update oleh Admin.

Pengembangan

Melakukan perubahan pada sistem lama dengan sistem yang  baru.

Web Portal

Merupakan sistem informasi berbasis web yang menyediakan informasi serta akses ke beberapa fitur sistem lain

JQuery

library (framework) javascript BAB I

PENDAHULUAN

1.1.

Latar Belakang Masalah

Dunia teknologi informasi saat ini semakin berkembang dan maju. Dalam  penyebaran informasi yang sangat cepat dan luas, salah satu media informasi yang efektif adalah internet. Telah diakui banyak kalangan bahwa internet adalah salah satu media informasi yang cukup efektif dan murah dalam hal penyebarluasan informasi,

baik

dibidang

pendidikan

maupun

dibidang

berita.

Untuk

menyebarluaskan informasi di internet adalah dengan menggunakan website (Winanto, 2008:3). Website yang baik adalah website yang banyak kunjungi oleh pengunjungnya.

Salah satu aspek yang harus dipertimbangkan adalah tampilan dari website tersebut yang interaktif dan menarik atau lebih dikenal Web 2.0. Untuk membuat website yang interaktif dan menarik diperlukan banyak modul dan fungsi yang terdiri dari  banyak baris kode. Diperlukan framework atau library untuk mempermudah dalam  pembuatan modul dan fungsi. Sehingga waktu pembuatan bisa lebih efisien. Salah satu library yang sedang popular sekarang adalah JQuery (Hakim,2009:12). JQuery adalah suatu library (framework)  javascript yang menekankan  bagaimana interaksi antara javascript dengan HTML. JQuery pertama kali dikembangkan pada tahun 2005 oleh John Resig dan dirilis pada 14 Januari 2006 dan kemudian berkembang pesat dan populer digunakan di berbagai website sampai dengan sekarang. Pada kenyataan seiring dengan perkembangannya jQuery tidak 1 hanya menjadi  framework   untuk javascript tetapi juga memiliki kelebihan dan

kehandalan yang lain, sehingga banyak digunakan oleh para pengembang web. Salah satunya dapat diterapkan pada pembuatan website universitas. STMIK Islam Internasional Jakarta adalah lembaga pendidikan swasta yang terdaftar di Kopertis III Jakarta. STMIK Islam Internasional Jakarta memberikan  perhatian serius pada pendidikan dan pelajaran kehidupan, tidak hanya untuk kebutuhan akademik mahasiswanya tetapi juga kehidupan agama dan moral sebagai individu dan anggota masyarakat islam internasional. STMIK Islam Internasional Jakarta juga memberikan pelayanan, kepedulian untuk mendidik, melatih dan menanamkan nilai-nilai luhur untuk laki-laki dan perempuan muda. Sebagai salah satu universitas yang baru berdiri pada tahun 2008, kebutuhan akan informasi yang cepat dan tepat sangat diperlukan untuk menyajikan data-data yang

lengkap,

mempermudah

kelangsungan

pembelajaran

akademik,

dan

mempercepat pengolahan data mahasiswa, khususnya pengelolaan web portal, dan sistem pendaftaran online. Hal inilah yang mendasari pentingnya web portal sebagai gerbang media informasi, sehingga penulis mengangkat permasalahan ini yang diberi  judul ”Pengembangan Web Portal Universitas menggunakan JQuery pada STMIK Islam Internasional Jakarta”.

1.2.

Rumusan Masalah

Didasari oleh latar belakang masalah tersebut, maka penulis mengambil tema  pembuatan web portal dengan menggunakan  framework   JQuery. Adapun masalah yang dibahas adalah sebagai berikut ini: a) Bagaimana membangun sebuah sistem yang menyajikan data-data yang lengkap dan mempermudah kelangsungan pembelajaran yang dibutuhkan STMIK Islam Internasional Jakarta?  b) Bagaimana membangun dan mengimplementasikan sebuah sistem web  berbasis JQuery yang lebih user freindly, serta aplikasi berita, kotak saran, info akademik dan lain-lain sebagai pelayanannya? c) Bagaimana membangun sistem pendaftaran secara online untuk  penerimaan mahasiswa baru?

1.3.

Batasan Masalah

Penulis membatasi ruang lingkup permasalahan tugas akhir ini agar tidak terjadi kerancuan dalam pembahasan yang meliputi : 1. Analisis dan perancangan proses bisnis yang akan digunakan pada sistem ini disesuaikan dengan proses bisnis yang ada di STMIK Islam Internasional Jakarta. 2. Proses yang akan penulis bahas yaitu proses yang berada pada halaman user dan proses yang ada pada halaman admin. 3. Proses pendaftaran online hanya sampai administrator mengirim kartu  pendaftaran kepada mahasiswa, dan mahasiswa dapat melakukan ujian masuk STMIK Islam Internasional Jakarta.

4. Dalam melakukan perancangan aplikasi, penulis menggunakan Data Flow  Diagram (DFD) sebagai tools desain aplikasinya.

5. Pengguna sistem ini nantinya adalah administrator website, mahasiswa dan calon mahasiswa, dosen dan pegawai STMIK Islam Internasional Jakarta. 6. Sisi keamanan yang penulis lakukan adalah mendisable edit username, menghindari

Spam   dengan

Captcha,

menghindari

XSS

Attack,

menghindari SQL Injection, mencegah browsing folder secara langsung, menutup celah aplikasi download dan validasi data menggunakan Javascript. 7. Pengembangan terhadap data-data yang disajikan adalah data mengenai  profil, info akademik, berita, gambaran program studi, fasilitas dan hubungi kami. 8. Dalam hal mempermudah proses pembelajaran dilakukan pembuatan link  ke sistem e-learning .

1.4.

Tujuan Penelitian

a. Adapun tujuan penelitian ini adalah untuk memberikan sumbangan pikiran dalam penggunaan sistem komputer, yang ditujukan untuk pencarian informasi yang mempunyai sifat online  dalam efisiensi waktu, sehingga  pihak yang berwenang dan membutuhkan informasi tidak mengalami kesulitan untuk memperolehnya.

 b. Memberikan informasi Pendaftaran bagi mahasiswa baru dan juga informasi-informasi lainnya yang dibutuhkan oleh mahasiswa dan masyarakat pada umumnya. c. Kehadiran Website Portal Informasi ini, diharapkan dapat membantu masyarakat untuk mendapatkan informasi aktual seputar kegiatan-kegiatan di Kampus STMIK Islam Internasional Jakarta. d. Mengimplementasikan

keilmuan

yang

didapat

selama

mengikuti

 perkuliahan khususnya dalam pengembangan sistem web portal.

1.5.

Manfaat Penelitian

Sesuai dengan permasalahan dan tujuan penelitian yang sudah disebutkan,  banyak manfaat yang dapat penulis petik dalam penyusunan skripsi ini, diantaranya adalah: 1.5.1. Bagi Penulis

a. Dapat menerapkan ilmu-ilmu yang diperoleh selama kuliah.  b. Menambah pengetahuan penulis tentang teknologi informasi, khususnya dalam membangun sebuah aplikasi web menggunakan JQuery. 1.5.2. Bagi Universitas

a. Mengetahui kemampuan mahasiswa dalam menguasai materi teori yang telah diperoleh selama kuliah.  b. Mengetahui kemampuan mahasiswa dalam menerapkan ilmunya dan sebagai bahan evaluasi.

c. Memberikan

gambaran

tentang

kesiapan

mahasiswa

dalam

menghadapi dunia kerja dari hasil yang diperoleh selama belajar / kuliah. 1.5.3. Bagi Pengguna

a. Membantu

pengguna

mendapatkan

informasi

aktual

seputar

kegiatan-kegiatan di Kampus STMIK Islam Internasional Jakarta.  b. Membantu STMIK Islam Internasional Jakarta dalam melakukan  pemasaran dan promosi. c. Memberikan kemudahan kepada calon mahasiswa baru, dan pegawai dalam proses pendaftaran dengan adanya fitur pendaftaran online. d. Memberikan kemudahan kepada masyarakat pada umumnya dengan adanya web portal STMIK Islam Internasional ini.

1.6.

Metodologi Penelitian

Adapun metode penelitian yang penulis lakukan dalam pembuatan skripsi ini  penulis melakukan riset di STMIK Islam Internasioanal Jakarta adalah : 1.6.1.

Metode Pengumpulan Data a.

Studi Lapangan

1. Observasi Selama riset penulis melakukan pengamatan langsung terhadap kegiatan yang dilakukan oleh staff pengurus harian yang bertugas melaksanakan kegiatan pokok. 2. Wawancara

Penulis melakukan tanya jawab langsung dengan staf  pengurus,

pegawai

dan

pimpinan

STMIK

Islam

Internasional Jakarta.

b.

Studi Pustaka

Dengan metode studi pustaka ini, penulis mendapat sumber data dari buku-buku atau referensi yang berkaitan dengan  perancangan sistem.

c.

Studi Literatur

Dengan metode studi literatur ini, penulis mendapat sumber data

dari

makalah-makalah

atau

karya

ilmiah

yang

 berhubungan dengan studi literatur pada skripsi, jurnal atau referensi yang berkaitan dengan perancangan sistem. . d.

Studi Kelayakan

Dengan metode studi kelayakan ini, penulis dapat menentukan kemungkinan apakah pengembangan aplikasi/sistem layak dilakukan. 1.6.2. Metode Pengembangan Sistem

Metode

Penembangan

sistem

yang

penulis

lakukan

menggunakan metode FAST ( Framework for the Applications of Sytems Thinking ) dan menggunakan perkakas utama dalam analisis

dan perancangannya yaitu Data Flow Diagram (DFD), Entity Relationship Diagram (ERD), dan State Transition Diagram (STD).

1.7.

Sistematika Penulisan

Dalam penulisan skripsi ini penulis akan membagi sistematika penulisan dalam lima bab, dimana satu dan yang lainnya saling berhubungan. Adapun sistematika penulisan skripsi ini adalah sebagai berikut :

BAB I

PENDAHULUAN

Bab ini berisi pendahuluan yang terdiri dari latar belakang, rumusan masalah,  batasan masalah, tujuan penelitian, manfaat penelitian, metodologi penelitian, tinjauan pustaka, dan sistematika penulisan. BAB II

LANDASAN TEORI

Pada bab ini diuraikan teori yang diperlukan dalam penyusunan dan penulisan skripsi. BAB III

METODE PENELITIAN

Dalam bab ini penulis memaparkan mengenai metode yang penulis gunakan dalam pencarian data maupun metode untuk pengembangan system yang dilakukan  pada penelitian ini. BAB IV

HASIL DAN PEMBAHASAN

Bab ini berisi tentang hasil yang dicapai setelah melalui tahapan-tahapan yang telah dilalui sebelumnya serta memberikan tampilan-tampilan dari web yang dibuat, tinjauan organisasi, permasalahan dan alternatif permasalahan dalam

“Pengembangan Web Portal Universitas Menggunakan JQuery pada STMIK Islam

Internasional Jakarta”. Dalam bab ini juga dibahas mengenai arsitektur dan proses  publikasi web yaitu berupa nama domain, kapasitas hosting dan analisa biaya. BAB V

PENUTUP

Pada bab ini penulis menyampaikan kesimpulan dari hasil penelitian yang telah dilaksanakan serta saran-saran yang berhubungan dengan pembangunan  program yang dibutuhkan untuk pengembangan sistem yang lebih baik lagi.

Daftar Pustaka Lampiran .

BAB II LANDASAN TEORI

2.1. Konsep Dasar Internet

Internet adalah sebuah sistem komunikasi global yang menghubungkan komputer-komputer dan jaringan-jaringan komputer di seluruh dunia. Ketika komputer terhubung secara global dengan menggunakan TCP / IP sebagai protocol  pertukaran paket data ( packet switching communication protocol ). (Melwin Syafrizal, 2005:195). Sedangkan menurut Budi Sutedjo Dharma Oetomo, Ester Wibowo, Edhie Hartono, dan Samuel Prakoso (2007:117), Internet merupakan sekumpulan jaringan yang terhubung satu dengan lainnya, dimana jaringan menyediakan sambungn menuju global informasi. Dari definisi diatas dapat disimpulkan bahwa melalui internet para pengguna dapat saling berhubungan melalui jaringan-jaringan komputer yang terkoneksi.

2.2. Konsep Dasar Web Portal

Web Portal adalah situs web yang menyediakan kemampuan tertentu yang dibuat sedemikian rupa mencoba menuruti selera para pengunjungnya. Web Portal merupakan sistem informasi berbasis web yang menyediakan informasi serta akses ke beberapa fitur sistem lain. Kemampuan portal yang lebih spesifik adalah  penyediaan kandungan informasi yang dapat diakses menggunakan beragam 10

 perangkat, misalnya komputer pribadi, komputer jinjing (notebook), PDA (Personal Digital Assistant), atau bahkan telepon genggam. Web Portal merupakan media untuk mengakses informasi dari internet,  berbeda dengan blog, portal menyediakan beragam layanan/aplikasi seperti email,  berita, info harga, hiburan dan lain-lain.

2.3. Pengantar Pemograman Web

Ada 2 kategori dalam pemograman web, yaitu pemograman client side  dan  server side (Wahana Komputer, 2006:3-7) :

1. Client Side Pada pemograman client side,  perintah-perintah program ( script) dijalankan web browser , sehingga ketika client   meminta dokumen  script maka  script dapat

didownload   dari  server 

kemudian dijalankan pada web browser yang

 bersangkutan. Program web yang tergolong dalam client side adalah HTML dan XTHML. 2. Server Side Pada pemograman  server side,  perintah-perintah program ( script) dijalankan di web  server, kemudian hasil dikirimkan ke web browser dalam bentuk HTML

 biasa. Program web yang tergolong server side adalah  Page Hypertext  Prepocessor (PHP), Active Server Page (ASP). 2.4. Konsep Metodologi 2.4.1. Metode Pengumpulan Data

Metode pengumpulan data dalam penelitian ini meliputi dua aspek yaitu (Nasir, 2003: 186): 1. Studi Lapangan Penelitian

lapangan

adalah

cara

pengambilan

data

dengan

menggunakan mata, tanpa ada pertolongan alat standar untuk keperluan tersebut. 2. Studi Kepustakaan Studi kepustakaan ini merupakan penelitian yang dilakukan dengan mengumpulkan data, membaca, mencatat, mempelajari buku-buku literatur serta sumber data lainnya yang berkaitan dengan masalah yang diteliti. 3. Studi Literatur Studi literatur dalam sebuah penelitian berguna untuk mendapatkan gambaran yang menyeluruh tentang apa yang sudah dikerjakan orang lain dan bagaimana orang mengerjakannya, kemudian seberapa berbeda  penelitian yang akan kita lakukan. Penting karena untuk menghindari usaha yang sebenarnya sudah pernah dilakukan orang lain dan bisa digunakan pada penelitian kita untuk menghemat waktu, tenaga dan biaya. Penting juga untuk memberi arah  penelitian selanjutnya yang perlu dilakukan untuk melanjutkan misi  penelitian (Gufron, 2009:3). 4. Studi Kelayakan

Tahapan studi kelayakan merupakan tahapan dimana dilakukan suatu studi yang akan digunakan untuk menentukan kemungkinan apakah  pengembangan aplikasi/sistem layak dilakukan.

2.4.2. F ramework for the Appli cations of Sytems Thin kin g   (FAST)

 Framework for the Applications of Sytems Thinking   (FAST) adalah

sebuah kerangka cerdas untuk penerapan pemikiran sistem. FAST merupakan metodologi hipotesis yang dibuat untuk tujuan pembelajaran. Selain itu, FAST  juga merupakan gabungan praktik-praktik terbaik yang ditemui dalam banyak metodologi referensi dan komersial. Metode ini dapat menghasilkan sistem informasi dengan kualitas yang  baik dalam waktu yang singkat. (Whitten dan Bentley, 2007:81). Metode FAST mempunyai 8 tahapan utama yang terlihat pada Gambar 2.1

Gambar 2.1 Aliran tiap-tiap fase dalam metodologi FAST Sumber: (whitten dan Bentley, 2007:89)

Model Pengembangan FAST memiliki 8 fase yaitu fase pendefinisian ruang lingkup (Scope Definition), fase analisis masalah ( Problem Analysis), fase analisis kebutuhan ( Requirement Analysis), fase perancangan logical ( Logical  Design), fase analisis keputusan ( Decision Analysis), fase perancangan fisik

( Physical Design), fase konstruksi dan pengujian (Construction and Testing ), dan fase instalasi dan pengiriman ( Installation and Delivery). Berikut adalah  penjelasan masing-masing fase dalam penelitian ini (Whitten & Bentley, 2007:89) :

2.4.2.1. Scope Defi ni ti on   (Definisi Ruang Lingkup)

Fase pertama proyek adalah definisi lingkup. Pada fase ini didefinisikan lingkup proyek dan masalah-masalah, kesempatan  perintah yang diterima yang memicu

dan

proyek tersebut. Fase definisi

lingkup juga menetapkan rencana proyek dalam artian skala, strategi  pengembangan, jadwal, persyaratan-persyaratan sumber daya, dan anggaran (Whitten & Bentley, 2007:183). Fase

definisi

lingkup

didasari

oleh

kombinasi

masalah,

kesempatan, dan perintah (batasan dan visi). Hasil terpenting dari definisi lingkup adalah pernyataan masalah ( problem statement ), yaitu pandangan umum yang diungkapkan

dengan jelas dan singkat tentang masalah,

kesempatan, dan perintah yang memicu proyek.

Output dari tahap ini adalah kerangka PIECES. Kerangka ini menyediakan sketsa yang bagus untuk  problem statement . Tujuannya  bukan untuk memecahkan masalah, kesempatan dan perintah tetapi hanya mengkatalogkan dan mengkategorisasikan. Selain itu juga diidentifikasikan batasan proyek yang diusulkan. Contoh dari batasan adalah batas anggaran, tenggat waktu, sumberdaya manusia, kebijakan  bisnis atau peraturan pemerintah, dan standar teknologi (Whitten & Bentley, 2007:183).

2.4.2.2. Probl em An alysis   (Analisis Masalah)

Tahap  problem analysis menganalisa mendalam tentang masalah yang mendasari sehingga dikerjakannya proyek. Prasyarat untuk tahap  problem analysis adalah cakupan dan pernyataan masalah sebagaimana

didefinisikan dan disetujui pada tahap scope definition. Hasil dari tahapan ini adalah peningkatan performa sistem yang akan memberikan keuntungan dari segi bisnis perusahaan. Hasil lain dari tahapan ini adalah sebuah laporan yang menerangkan tentang problems, causes, effects, dan solution benefits.

2.4.2.3. Requi rements An alysis   (Analisis Kebutuhan)

Tahap

requirements

analysis 

ini

mendefinisikan

dan

memprioritaskan kebutuhan proyek. Secara sederhana, requirements

analysis  adalah untuk mengetahui apa yang dibutuhkan atau diinginkan

dari sistem baru. Ini tahap yang paling penting dari sistem proyek. Prasyarat untuk tahap analisis kebutuhan adalah tujuan-tujuan  perbaikan sistem hasil dari tahap  problem analysis. Untuk mendapatkan daftar kebutuhan-kebutuhan, tim proyek bekerja dengan para pengguna sistem untuk mengidentifikasi kebutuhan dan prioritas. Informasi ini dikumpulkan dengan cara wawancara, kuesioner, dan memfasilitasi  pertemuan. Produk jadi dari fase analisis kebutuhan adalah pernyataan  persyaratan bisnis yang akan memenuhi sasaran peningkatan sistem yang diidentifikasi didalam fase sebelumnya.

2.4.2.4. L ogical Design   (Desain Logikal)

Tahap logical design menerjemahkan kebutuhan ke dalam model sistem. Tahapan ini menggambarkan suatu solusi dan teknis serta metodologi. Metodologi yang berbeda-beda akan memerlukan atau merekomendasikan jumlah dan derajat pemodelan desain sistem yang  berbeda pula. Prasyarat untuk logical design adalah daftar kebutuhan yang didapatkan dari tahapan requirements analysis. Hal-hal yang dilakukan dalam tahapan ini adalah: 1. Menggambar model data yang menggambarkan data dan kebutuhan informasi. 2. Menggambarkan model proses yang menggambarkan kebutuhan

3. Menggambarkan model interface yang menggambarkan proyek dan kebutuhan interface.

2.4.2.5.

 (Analisis Keputusan) Decision A nal ysis 

 Decision Analysis  ialah melakukan analisa terhadap keputusan

yang akan diambil berdasarkan solusi-solusi yang ditawarkan. Dalam analisis

keputusan,

umumnya

terdapat

berbagai

alternatif

untuk

mendesain sistem informasi yang baru. Berdasarkan kebutuhan sistem dan model sistem yang didapatkan  pada tahapan requirements analysis  dan logical design, maka akan ada  banyak cara untuk merancang suatu sistem untuk memenuhi kebutuhan tersebut. Ada beberapa hal yang harus diperhatikan dalam tahapan ini yaitu: 1. Berapa banyak sistem akan dikomputerisasi. 2. Apakah

kita

sebaiknya

membeli

software

atau

mengembangkannya sendiri. 3. Apakah kita sebaiknya mendesain sistem untuk jaringan internal atau berbasis web. 4. Teknologi informasi apa yang dapat digunakan dalam apilkasi ini.

Tujuan dari tahap ini adalah: (1) Mengidentifikasi beberapa solusi teknis, (2) Analisis kelayakan, dan (3) Merekomendasikan sistem yang akan dirancang. Tim proyek biasanya mencari solusi-solusi yang paling layak yang menawarkan kombinasi terbaik dari kalayakan teknis, operasional, ekonomi, jadwal dan risiko. Keputusan dibuat tentang teknologi yang akan digunakan sebagai bagian dari arsitektur aplikasi. Pada tahap ini ditentukan bahasa pemrograman, tools dalam pembangunan dan database yang akan digunakan.

2.4.2.6. Physical D esign and I ntegrati on   (Desain Fisik dan Integrasi)

Setelah mendapatkan persetujuan dari pemilik sistem pada tahapan decision

analysis, maka

akhirnya sistem yang baru dapat

dirancang. Tujuan tahap  physical design and integration  adalah mengubah kebutuhan ke dalam spesifikasi desain fisik yang akan memandu sistem konstruksi. Pada tahap ini dilakukan: (1) spesifikasi desain database fisik, (2)  proses bisnis fisik dan spesifikasi desainperangkat lunak, (3) spesifikasi antarmuka pengguna. Ada dua filosofi desain fisik ekstrem. (1) Desain spesifikasi: model sistem fisik dan spesifikasi diproduksi sebagai serangkaian tertulis, (2) Desain prototyping : lebih lengkap tapi aplikasi dibangun dan

disempurnakan berdasarkan masukan dari pengguna dan desainer lainnya.

2.4.2.7.

Constr ucti on and Testi ng   (Konstruksi dan Pengujian)

Tujuan tahap construction and testing  ada dua: (1) untuk membangun dan menguji sistem yang memenuhi kebutuhan dan spesifikasi desain fisik, dan (2) untuk mengimplementasikan interface antara sistem baru dan sistem yang ada. Selain itu, membantu dalam  persiapan untuk pelatihan dan sistem operasi. Tahap konstruksi melibatkan instalasi perangkat lunak yang dibeli. Tim proyek harus membangun atau menginstal: 1. Database  : untuk mendukung data operasional, analisis data dan mendukung keputusan kebutuhan. 2. Paket perangkat lunak : Program aplikasi yang dibangun sesuai dengan desain fisik dari tahap sebelumnya. 3. User in terf ace sistem: User interface  harus dibangun dan diuji untuk kegunaan dan stabilitas. Sistem untuk interface sistem harus dibangun atau diimplementasikan dengan menggunakan teknologi aplikasi integrasi. Salah satu aspek yang paling penting dari construction and testing  adalah melakukan pengujian dari kedua komponen sistem individual dan sistem secara keseluruhan. Setelah diuji siap untuk instalasi dan  pengiriman. Pada tahapan construction  penulis melakukan pembangunan

 perangkat lunak yang biasa disebut coding   dan melakukan pengujian  perangkat lunak kepada user  yaitu pihak dari STMIK.

2.4.2.8. I nstallati on and Deli very    (Instalasi dan Pengiriman)

Tahap installation and delivery  berfungsi untuk memasukan sistem ke dalam operasi. Pembangun sistem menginstal sistem dari lingkungan pengembangannya ke dalam lingkungan produksi. Para analis sistem harus melatih para pengguna sistem, menuliskan berbagai macam manual pnegguna dan kontrol produksi, mengkonversi database yang ada menjadi database baru, dan melakukan pengujian sistem final. Prasyarat fase Installation and delivery adalah fase konstruksi dan  pengujian.  Installation and delivery  juga melibatkan individu pelatihan yang akan menggunakan sistem dan mengembangkan dokumentasi untuk membantu

para

pengguna

sistem.

Tahap

implementasi

biasanya

mencakup beberapa bentuk kajian untuk menilai keberhasilan proyek sistem selesai. Kegiatan ini mempromosikan perbaikan proses dan manajemen proyek masa depan.

2.5.

Bagan Alir ( Flowchart  )

Bagan alir ( flowchart ) adalah bagian yang menunjukkan alir didalam program atau prosedur sistem secara logika. Bagan alir digunakan terutama untuk alat bantu komunikasi dan untuk dokumentasi.

Bagan alir sistem (System Flowchart ) merupakan bagan yang menunjukkan arus pekerjaan secara keseluruhan dari sistem. Bagan ini menjelaskan urutan-urutan dari prosedur-prosedur yang ada di dalam sistem. Bagan alir sistem menunjukkan apa yang dikerjakan oleh sistem.

2.6. Tool Perancangan Sistem

Entity Relationship Diagram

Data Dictionary

Data Flow Diagram

State Transition Diagram

Gambar 2.2 Struktur Model Analisis

(Pressman, 2002:354)

2.6.1. Data Flow Diagram (DFD)

 Data Flow Diagram   (DFD) adalah suatu grafis diagram yang

menggunakan beberapa symbol sederhana sampai pada menggambarkan alir data diantara entitas eksternal, pengolahan aktifitas, dan mengatur penggunaan dari alat-alat masukan atau pengeluaran (O’Brien, 2005:G-5). DFD melayani dua tujuan : (1) untuk memberikan indikasi mengenai  bagaimana data ditransformasi pada saat bergerak melalui sistem, dan (2) untuk

menggambarkan fungsi-fungsi yang mentransformasi aliran data (Pressman, 2002). 2.6.1.1. Diagram Konteks Diagram konteks adalah diagram yang terdiri dari suatu proses dan menggambarkan ruang lingkup suatu sistem. Diagram konteks menggambarkan seluruh input ke sistem

atau output ke sistem

(Ladjamudin, 2005:64).

2.6.2. Entity Relationship Diagram (ERD)

ERD menurut Jeffrey L. Whitten (2004:45). Diagram hubungan data digunakan untuk menggambarkan hubungan antara data store yang ada di dalam diagram aliran data.  Entity Relationship Diagram  (ERD) adalah suatu data perencanaan dan

merupakan alat pengembangan sistem yang model hubungannya berada diantara satu kesatuan dalam satu proses bisnis (O’Brien, 2005:G -7).

2.6.3. State Transition Diagram (STD)

State Transition Diagram (STD) mempresentasikan tingkah laku dari suatu

sistem

dengan

menggambarkan

keadaannya

dan

kejadian

yang

menyebabkan sistem mengubah keadaan. STD juga menunjukkan bahwa aksi diambil sebagai akibat dari suatu kejadian khusus (Pressman, 2002:373).

2.7. Desain Perancangan Sistem

2.7.1. Desain Data

Desain data mentransformasi model domain informasi yang dibuat selama analisis ke dalam struktur data yang akan diperlukan untuk mengimplementasi perangkat lunak. Objek dan hubungan data yang ditetapkan dalam diagram hubungan entitas (ERD) dan isi data detail yang digambarkan didalam kamus data, menjadi basis bagi aktivitas desain data(Pressman, 2002:400). 2.7.2. Desain Arsitektur

Desain arsitektur

menentukan hubungan diantara elemen-elemen

struktural utama dari program. Representasi desain tersebut kerangka kerja modular dari sebuah program komputer dapat diperoleh dari model-model analisis dan interaksi subsistem yang ditentukan dalam model analisis (Pressman, 2002:400). 2.7.3. Desain Prosedural

Desain Prosedural mentransformasi elemen-elemen structural dari arsitektur program ke dalam suatu deskripsi dari komponen-komponen  perangkat lunak. Informasi yang diperoleh dari STD berfungsi sebagai dasar  bagi desain procedural (Pressman, 2002:400). 2.7.4. Desain Interface

Desain interface menjelaskan internal dan eksternal antarmuka program serta desain antarmuka manusia. Internal dan eksternal desain antarmuka yang  berdasarkan

informasi

yang

diperoleh

(http://en.wikipedia.org/wiki/Design_document).

dari

analisis

model

2.8. Perangkat Lunak Pengembangan Sistem 2.8.1. Javascript

Javascript adalah bahasa yang berbentuk kumpulan skrip yang pada fungsinya berjalan pada suatu dokumen HTML, Bahasa ini adalah bahasa  pemrograman untuk memberikan kemampuan tambahan terhadap bahasa HTML dengan mengijinkan pengeksekusian perintah perintah di sisi user, yang artinya di sisi browser bukan di sisi server web. Javascript bergantung kepada browser(navigator) yang memanggil halaman web yang berisi skrip skrip dari Javascript dan tentu saja terselip di dalam dokumen HTML. Javascript juga tidak memerlukan kompilator atau  penterjemah khusus untuk menjalankannya (pada kenyataannya kompilator Javascript sendiri sudah termasuk di dalam browser tersebut). Lain halnya dengan bahasa “Java” (dengan mana JavaScript selalu di banding bandingkan)

yang memerlukan kompilator khusus untuk menterjemahkannya di sisi user/klien.

2.8.2.

JQUERY

JQuery adalah suatu library (framework) javascript yang menekankan  bagaimana interaksi antara javascript dengan HTML. JQuery mempermudah dan mempercepat developer web dalam membuat kode Javascript. Secara standar, apabila seseorang membuat kode Javascript, maka diperlukan kode yang cukup  panjang, bahkan terkadang sangat sulit dipahami. Disinilah peranan JQuery

sebagai Javascript Library, dimana pengembang web

dapat langsung

memanggil fungsi yang terdapat di dalam Library tersebut. (Hakim, 2010:3). JQuery mempersingkat Ajax ( Asynchronous Javascript and XML ). Kemampuan favorit dari Ajax adalah mampu mengambil informasi dari server tanpa melakukan refresh pada halaman web, artinya halaman web terlihat  berganti secara otomatis. Apabila kita menuliskan kode Ajax secara manual,  biasanya diperlukan

baris yang cukup panjang,

namun JQuery dapat

mempersingkatnya menggunakan Ajax call, perbandingannya 25 baris kode Ajax dapat disingkat menjadi 5 baris kode saja dengan JQuery. Alasan Penulis menggunakan Framework JQuery adalah karena JQuery telah banyak digunakan oleh website-website terkemuka di dunia, selain itu JQuery kompatibel dengan semua browser, File JQuery hanya satu dan ukurannya kecil sehingga cepat aksesnya, Fitur JQuery paling lengkap dibandingkan dengan Framework Javascript yang lain, JQuery dapat bekerja di  berbagai web browser, seperti Mozilla Firefox, Internet Explorer, Google Chrome, Opera dan browser lainnya, JQuery Open source, sehingga dapat dimodifikasi sesuai kebutuhan. (Hakim, 2010:4). Untuk memberikan gambaran agar tidak terjadi kesalah pahaman  persepsi, berikut ini adalah teori perbandingan  framework  javascript lain yang sering digunakan oleh pengembang web. Namun penulis hanya membandingkan  beberapa  framework   saja karena secara keseluruhan kurang lebih sama dengan yang penulis bahas, antara lain yaitu : 1. Yahoo User I nterf ace Library   (YUI)

YUI adalah salah satu  framework   JavaScript terbesar dalam daftar ini. YUI memiliki semua hal untuk membantu Anda membangun aplikasi web interaktif menggunakan teknik seperti DOM scripting, DHTML dan AJAX oleh satu set utilitas kuat dan kontrol. YUI memiliki fitur canggih yang cukup banyak, plugin, ekstensi yang membawa Anda pada waktu yang sangat lama untuk belajar. (http://developer.yahoo.com/yui/) 2. Dojo Toolkit

Dojo toolkit adalah javascript  framework   yang menyediakan library  yang cukup banyak. Dibagi menjadi 3 bagian penting, yaitu

Dojo core, base, Dijit, DojoX. Dojo base adalah bagian library  yang mengatur tentang hal dasar pada dojo, dan harus dipanggil setiap kali kita akan menggunakan Dojo toolkit, bisa dikatakan ini adalah library wajib. Fungsi yang terdapat di base ini adalah fungsi ajax, fungsi penting dojo, dan DOM. Dojo core menyediakan fungsi untuk  parsing widget , efek animasi tingkat lanjut, drag and drop , history handling , dll. Core ini menggunakan dojo base, namun dalam penggunaannya, hanya terdapat sedikit perbedaan saja. Dijit, sebuah kata singkat dari Dojo Widget, memokuskan  pengembangannya untuk tampilan, menyimpan library untuk container  (set layout), form, dialog, text editor, kalender, color palette, dll.

DojoX, disebut juga Dojo eXtension atau eXperimental, disimpan library  fungsi yang belum pantas disimpan di paket utama  base/core atau Dijit, namun tidak jarang juga library DojoX merupakan kombinasi penggunaan kedua library tersebut. (http://dojotoolkit.org/) 3. DHTMLX

DHTMLX adalah GUI widget library JavaScript untuk membangun aplikasi web dinamis dengan pengalaman pengguna desktop dan Ajax loading data. Library DHTMLX dirilis di bawah kedua open-source GNU General Public License dan lisensi komersial. arsitektur library memungkinkan menggunakan komponen sebagai blok terpisah atau menggabungkan mereka ke dalam sebuah antarmuka  berbasis Ajax umum. Struktur Modul: filosofi yang terletak di bawah library DHTMLX menyiratkan bahwa setiap komponen merupakan entitas yang terpisah dan mandiri yang dapat digunakan secara individual untuk memastikan beberapa bagian tertentu dari aplikasi, misalnya navigasi menu, treeview, datagrid, atau pemilih tanggal. Meskipun, komponen API memungkinkan mengorganisir mereka dalam tata letak antarmuka yang umum. Desktop-like functionality: drag-and-drop, in-line editing, operasi clipboard, validasi data, interaktivitas melalui Ajax. Mulai dari versi 2.5 komponen UI dapat memiliki tampilan dan perilaku yang mirip dengan unsur-unsur Window standar UI.

Client-to

server

communication:

library

DHTMLX

sepenuhnya bekerja pada sisi client dan dapat digunakan dengan bahasa  back-end atau database. Selain itu, siap untuk menggunakan lapisan komunikasi (dhtmlxConnector) dapat digunakan untuk mengelola komunikasi client-server dengan PHP,. Net atau Java. Theming: mewarnai komponen antarmuka dapat dikustomisasi melalui SkinBuilder online, yang menghasilkan file CSS yang diperlukan dan gambar untuk menyediakan tema warna yang dipilih oleh pengembang. Mulai dari versi 2.6 - ada kulit beberapa preset yang tersedia. Touch UI support: DHTMLX merilis sebuah kerangka HTML5 JavaScript dioptimalkan untuk perangkat touchscreen dan mobile (saat ini tersedia di alfa, rilis final direncanakan pada bulan Pebruari 2011). Cross-browser: library bekerja di semua browser modern: Safari, Internet Explorer, Mozilla Firefox, Opera, dan Chrome. (http://dhtmlx.com/docs/services.shtml)

4. Ample SDK

Ample SDK adalah sebuah standar javascript UI Framework  berbbasis cross-browser untuk membangun Rich Internet Application (RIA). Ample SDK menggunakan teknologi XML (Seperti XUL, SVG

atau HTML5) untuk layout User Interface, CSS untuk Style UI, dan Javascript dengan standar DOM / API JQuery untuk logika aplikasi. Ample SDK menyetarakan browser dan membawa dukungan teknologi  jika ada kehilangan. Ample SDK sepenuhunya ditulis dalam javascript dan karenanya tidak memerlukan komponen khusus yang dipasang di  browser untuk beroperasi dengan baik. Ample SDK tidak memodifikasi infrastruktur browser melainkan mengisi fungsi yang hilang. Ample SDK terdiri dari sebuah Ample Runtime, implementasi User INterface Markup language, dan satu set plugin. Ample SDK free open source, didistribusikan menggunakan pendekatan dua lisensi dibawah lisensi MIT dan GPL. Ample SDK Runtime berfungsi penuh di semua browser web yang modern. User Interface bahasa masih sedang dilaksanakan / diuji dan

beberapa

kebiasaan

(http://www.amplesdk.com/about/)

dapat

diamati.

Dibawah ini adalah screenshot   perbandingan framework  javascript yang ada :

Gambar 2.3. Perbandingan Framework Javascript

(sumber: http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks)

Adapun dari segi ketersediaan/kelengkapan fitur, berikut adalah gambaran  perbandingan framework  JQuery dengan framework  lainnya :

Gambar. 2.4.  Perbandingan Framework Javascript Dari Segi Fitur

(sumber: http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks)

Perbandingan dari segi dukungan web browser :

Gambar 2.5. Perbandingan Framework Javascript Dari Segi Dukungan web browser

(sumber: http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks)

2.8.3. PHP

PHP merupakan kependekan dari kata  Page Hypertext Preprocessor . PHP tergolong sebagai perangkat lunak open source yang diatur dalam aturan General Purpose Licences (GPL). Dikatakan  preprocessing   karena pada proses

skrip PHP diminta oleh pengguna maka PHP hanya mengeksekusi kode yang diminta dan mengirim hasil ke web server untuk dilanjutkan ke klien. PHP dapat  berjalan di Apache maupun IIS ( Internet Information Services). Pemograman PHP sangat cocok di kembangkan dalam lingkungan web, karena php bisa dilekatkan pada script HTML atau sebaliknya. PHP dikhususkan untuk pengembangan web dinamis. Menurut Madcoms (2004:2) PHP memiliki keunggulan diantaranya yaitu: a.

Memiliki tingkat akses yang lebih cepat.

 b.

Memiliki tingkat lifecycle yang cepat sehingga selalu mengikuti  perkembangan teknologi internet.

c.

PHP dapat mengakses ke beberapa database yang sudah ada, baik yang  bersifat gratis maupun berbayar. Database tersebut antara lain MySql, PosgreSql, dan lain-lain.

d.

Mampu berjalan di platform sistem operasi Windows, Linux, Solaris, dan lain-lain.

2.8.4. MYSQL

Salah satu aplikasi basis data adalah MySql yang merupakan sebuah  program pembua basis data yang bersifat open source, artinya siapa saja boleh menggunakan tanpa dicekal (Bunafit Nugroho, 2004:29). Sedangkan menurut Wahana Komputer (2006:181) MySql merupakan sistem manajemen basis data yang fungsinya untuk menambah, mengakses, dan memproses data yang disimpan dalam sebuah basis data komputer. Kelebihan MySql menurut Wahana Komputer(2006:182) antara lain: a.

Mampu berjalan di berbagai platform (misalnya Windows, Mac OS, Solaris, dan lain-lain).

 b.

Menyediakan mesin penyimpanan (engine storage) transaksi dan non transaksi.

c.

Server   tersedia sebagai program yang terpisah untuk digunakan pada

lingkungan jaringan klien/ server . d.

Mempunyai library yang dapat ditempelkan pada aplikasi berdiri sendiri ( standalone application) sehingga aplikasi tersebut dapat digunakan pada komputer yang tidak mempunyai jaringan.

e.

Mempunyai sistem password  yang aman dan fleksibel.

2.8.5. Apache Web Server

Web Server adalah sebuah bentuk  server   yang khusus digunakan untuk menyimpan halaman website  atau homepage (Bunafit Nugroho, 2004:6). Web server menunggu permintaan dari client yang menggunakan browser, seperti Mozilla, Internet Explorer, Opera, Google Chrome, Netscape dan lain-lain. Web server dalam berkomunikasi dengan kliennya menggunakan  protocol HTTP ( Hyper Text Transfer Protokol ). Apache berada dibawah GNU, General Public License yang bersifat free sehingga sehingga apache dapat di

download gratis pada alamat (http://apache.org)  saat ini Apache banyak digunakan sebagai web server untuk portal-portal besar. Adapun pertimbangan dalam memilih Apache adalah : a. Apache termasuk dalam kategori free software.  b. Instalasi Apache sangat mudah c. Mampu beroperasi pada banyak  platform sistem operasi seperti AUX, Free BSD, HP-UX, IRIX, Linux, Solaris, Windows dan lain-lain. d. Apache mudah dalam penambahan  pheriferal   lainnya hanya ke dalam  platform web server, misalnya menambahkan modul.

2.8.6. Cascadi ng Style Sheet    (CSS)

Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup. Penggunaan yang paling umum dari CSS adalah untuk memformat

halaman web yang ditulis dengan HTML dan XHTML. Walaupun demikian,  bahasanya sendiri dapat dipergunakan untuk semua jenis dokumen XML termasuk SVG dan XUL. Spesifikasi CSS diatur oleh World Wide Web Consortium (W3C). CSS digunakan oleh penulis maupun pembaca halaman web untuk menentukan warna, jenis huruf, tata letak, dan berbagai aspek tampilan dokumen. CSS digunakan terutama untuk memisahkan antara isi dokumen (yang ditulis dengan HTML atau bahasa markup lainnya) dengan presentasi dokumen (yang ditulis dengan CSS). Pemisahan ini dapat meningkatkan aksesibilitas isi, memberikan lebih banyak keleluasaan dan kontrol terhadap tampilan, dan mengurangi kompleksitas serta pengulangan pada stuktur isi. CSS memungkinkan halaman yang sama untuk ditampilkan dengan cara yang berbeda untuk metode presentasi yang berbeda, seperti melalui layar, cetak, suara (sewaktu dibacakan oleh browser basis-suara atau pembaca layar), dan  juga alat pembaca braille. Halaman HTML atau XML yang sama juga dapat ditampilkan secara berbeda, baik dari segi gaya tampilan atau skema warna dengan menggunakan CSS.

2.8.7. Adobe Photoshop CS4

Adalah perangkat lunak editor citra buatan Adobe Systems yang dikhususkan untuk pengeditan foto/gambar dan pembuatan efek. Aplikasi Adobe Photoshop CS 4.0 selain tangguh dalam mengedit, memodifikasi bitmap atau foto, juga banyak lagi menyediakan fasilitas-fasilitas lain yang menarik.

Untuk memenuhi setiap kebutuhan yang menarik, seperti pengaturan warna yang semakin akurat, penggunaan fasilitas efek dan filter yang semakin canggih, dan fasilitas pemodifikasian tipografi teks yang unik dan fantastik. (Khaerudin, 2005:13).

Gambar 2.6. Lingkungan Kerja Adobe Photoshop CS 4.0

2.9. Pengelolaan Database

Database adalah kumpulan data yang terdiri atas satu atau lebih tabel yang terintegrasi satu sama lain, dimana setiap pemakai (user ) diberi wewenang (otoritas) untuk dapat mengakses (mengubah, menghapus, menganalisis, menambah, dan memperbaiki) data dalam tabel tersebut (O’Brien, 2005:G -5). Ada dua cara data dikelola yaitu  flat file (file datar) dan relational (berhubungan). Pada  flat file data diimasukkan dalam tabel tunggal yang berisi kolom dan baris. Biasanya data secara flat file dapat menimbulkan masalah. Pengelolaan database dimana beberapa tabel dimasukkan dalam satu file dan tabel

satu dengan yang lainnya saling berhubungan melalui field yang sama (kunci) disebut pengelolaan database secara relational . Hubungan antara tabel satu dengan tabel lainnya melalui field yang sama disebut relasi. Relasi dibuat menggunakan kunci. Ada dua macam kunci : pertama  primary key(kunci utama) yaitu suatu kolom atau sekumpulan kolom yang akan

digunakan untuk mengidentifikasi secara tunggal setiap baris dari suatu tabel (Kasiman, 2006:383). Kedua  foreign key  (kunci tamu) yaitu field yang berisi nilai identifikasi dengan record yang berkaitan dalam tabel lainnya. Ada tiga bentuk relasi antarkabel (Kasiman, 2006:383):

a. Relasi one-to-one (satu ke satu), menghubungkan secara tepat dua entitas dengan satu kunci (key). Misalnya dalam suatu perusahaan satu orang memiliki satu computer kerja.

 b. Relasi one-to-many (satu ke banyak), hubungan antar entitas dimana kunci (key) pada suatu tabel muncul berkali-kali dalam tabel lainnya. Misalnya  banyak pegawai bekerja untuk satu departemen.

c. Relasi many-to-many (banyak ke banyak), merupakan hubungan yang sering menyebabkan permasalahan dalam prakteknya. Dalam hubungan many-tomany, kunci utama ( primary key) dari tabel kedua dapat muncul beberapa kali tabel pertama.

2.10. Studi Sejenis

Berdasarkan pengamatan penulis pada penelitian sebelumnya terdapat  beberapa penelitian yang hampir serupa dengan judul pengembangan web portal menggunakan JQuery. Sebagai perbandingan dengan penelitian sebelumnya, diantaranya dikemukakan oleh Duwiyatno(2010), didalam penelitiannya menjelaskan tentang pembuatan web portal Kabupaten Bangka Barat yang merupakan salah satu kabupaten di Provinsi Bangka Belitung. Latar belakang penelitiannya karena pengenalan  potensi daerah Kabupaten Bangka Barat belum menggunakan media portal informasi. Oleh karena itu, dibutuhkan portal informasi yang dapat digunakan sebagai alternatif media

periklanan

dalam

memperkenalkan

berbagai

potensi

tersebut.

Metode

 pengembangan yang digunakan menggunakan waterfall , perangkat pemrograman open  source yang berbasis web PHP versi 5.25, basis data  MySQL versi 5.0.51, dan pengujian

 perangkat lunak dilakukan dengan metode  BlackBox. Portal informasi yang dihasilkan dapat digunakan untuk mengakses informasi pemerintahan, informasi potensi daerah,  peluang investasi, fasilitas pesan singkat, link , polling, dan kontak admin.

Pada penelitian Rifandi (2010), menjelaskan tentang pembuatan website  portal komunitas mengenai teknologi informasi dengan menggunakan PHP, JQuery dan MYSQL dimana website ini dapat digunakan sebagai media informasi bagi user untuk mencari informasi mengenai teknologi informasi seperti tentang antivirus,  jaringan, database, windows, dan lain-lain. Dalam penulisan ini, menggunakan PHP sebagai bahasa pemrograman, JQuery sebagai framework untuk tampilan, MySQL sebagai database-nya dan APACHE sebagai server lokalnya. Website ini dibuat dengan tujuan untuk menambah informasi untuk user yang membutuhkan artikel tentang perkembangan teknologi informasi. Serta membuat website yang interaktif,

artinya pengunjung dapat secara langsung interaktif dengan pengunjung lain atau dengan admin melalui fitur chat, hubungi kami, polling dan komentar atau menggunakannya sebagai sumber artikel dengan RSS (Really Simple Syndication) atau news Feed yang merupakan sebuah file dokumen dengan format XML, dimana informasi tersebut dapat diambil dan ditampilkan pada website lain. Pada Penelitian Haerul Zaman (2008), menjelaskan tentang pembuatan aplikasi web portal Hukum Perhimpunan Advokat berbasis web PHP dan MQSQL. Penelitian ini bertujuan untuk memberikan kecepatan akses informasi, terutama informasi yang berkaitan dengan perkembangan dunia hukum, baik di kalangan anggota maupun publik. Serta menyediakan wadah untuk menampung pesan, keluhan atau komentar dari anggota maupun publik mengenai kinerja organisasi HAPI. Pada penelitian ini menggunakan software aplikasi pembuatan web yaitu HTML editor Dreamweaver MX, PHP Triad dan database MySQL, serta ditambah  penggunaan aplikasi grafis Adobe Photoshop dan aplikasi teks animasi Swish. Pada Penelitian Ilham Wahyu Danil (2009), menjelaskan tentang pembuatan

 portal berbasis web menggunakan PHP dan MYSQL Pada SMA Negeri 18 Medan. Portal ini dimaksudkan agar sekolah dapat menyediakan informasi yang lebih cepat dan akurat

pada

siswa

maupun

masyarakat

yang

juga

dapat

membantu

dalam

mempromosikan sekolah ini. Portal ini dirancang dengan menggunakan bahasa program web, yaitu PHP 5.0 dan MySQL 5.0 sebagai server database serta Apache 2.0 sebagai web server. Portal ini dirancang sedemikian rupa agar dapat menarik minat siswa dalam memperoleh niformasi yang lebih cepat dan akurat serta menarik. Portal ini bersifat dinamis, yaitu berarti bahwa informai yang diberikan tersebut dapat berubah sewaktuwaktu berdasarkan keadaan yang sedang terjadi. Portal ini meliputi banyak informasi

seperti profil sekolah, data pegawai dan data siswa. Objektif utama Portal ini adalah untuk menyediakan jendela bagi masing-masing siswa dalam mendapatkan informasi secara lengkap dan jelas.

Dengan melihat penelitian-penelitian sebelumnya, ada beberapa kelebihan dari sistem yang akan dikembangkan oleh penulis yaitu Portal ini dirancang dengan menggunakan bahasa program web, yaitu PHP 5.0 dan MySQL 5.0 sebagai server database serta Apache 2.0 sebagai web server.   Menggunakan  Framework   JQuery

untuk desain tampilan yang dapat mempermudah proses pengembangan karena tersedia banyak fitur untuk menunjang proses pembuatan web portal. Serta membuat website yang interaktif, artinya pengunjung dapat secara langsung interaktif dengan  pengunjung lain atau dengan admin melalui fitur chat, hubungi kami, dan komentar atau menggunakannya sebagai sumber artikel dengan RSS (Really Simple Syndication). Kemudian pada penelitian ini web portal yang penulis buat dapat dihubungkan ke beberapa system, yaitu sistem E-learning, sistem informasi Keuangan dan sistem informasi akademik (SIMAK). Content Management System (CMS) yang user friendly  sehingga mempermudah seorang administrator dalam melakukan pengelolaan web portal. Menggunakan metode pengembangan sistem FAST yaitu metodologi pengembangan suatu sistem dengan waktu pengembangan yang relatif singkat, sehingga proses pengembangan dapat selesai lebih cepat dan efisien. Aplikasi web portal yang penulis buat merupakan web 2.0 atau representasi dari website modern yang sedang berkembang pada saat ini.

BAB III METODOLOGI PENELITIAN

Dalam

melakukan

menggunakan

JQuery

penelitian pada

STMIK

terhadap Islam

Pengembangan Internasional

Web

Jakarta,

Portal penulis

menggunakan metode penelitian sebagai berikut: 3.1. Metode Pengumpulan Data 3.1.1. Studi Lapangan

Penelitian lapangan dilakukan dengan mengumpulkan dan menelaah informasi mengenai sistem yang telah maupun belum diterapkan di STMIK Islam Internasional Jakarta, dengan metode : a. Observasi

Pada metode ini, penulis melakukan pengamatan langsung terhadap kegiatan

yang

dilakukan

oleh  staff   pengurus

harian

yang

bertugas

melaksanakan kegiatan pokok untuk memperoleh dan mengumpulkan data. Observasi dilakukan pada STMIK Islam Internasional, Jl. Melawai Raya No.8c Blok M Kebayoran Baru Jakarta, dengan saudari Shinta Mardhotillah selaku manajer akademik IIUC pada tanggal 12 Oktober 2010 Pukul 10.00-13.00. Observasi dilakukan untuk mengumpulkan informasi mengenai kebutuhan sistem (system requirements).

b. Wawancara

44

Penulis melakukan tanya jawab langsung dengan bapak Taufik Muhammad Guntur selaku ketua IIUC dan saudari Shinta Mardhotillah selaku manajer akademik IIUC pada tanggal 14 Oktober 2010 Pukul 10.00  –   13.00 untuk melengkapi dokumen dan informasi bagi penulisan ini. dalam hal ini  penulis menggunakan metode wawancara bebas, yaitu pewawancara bebas menanyakan apa saja yang relevan dengan data yang dikumpulkan. Berdasarkan observasi dan wawancara yang penulis lakukan, penulis mengumpulkan informasi mengenai : a. Gambaran Umum STMIK Islam Internasional Jakarta Memuat tentang sejarah berdirinya STMIK Islam Internasional Jakarta, tujuan pendirian, serta penyelenggaraan pendidikan di STMIK Islam Internasional.  b. Struktur Organisasi Menunjukkan tentang hubungan kerja, wewenang dan tanggung jawab antara pimpinan dan bawahan secara formal. c. Prosedur yang berjalan Gambaran tentang rangkaian prosedur yang berjalan pada web portal STMIK Islam Internasional saat ini.

d. Permasalahan sistem yang berjalan Permasalahan sistem yang sedang berjalan pada web portal STMIK Islam Internasional Jakarta saat ini .

3.1.2. Studi Pustaka

Pada tahap pengumpulan data dengan cara studi pustaka, penulis mencari referensi-referensi yang sesuai dengan objek yang akan diteliti. Dengan metode studi pustaka ini, penulis mengumpulkan data dan informasi dengan mencari, membaca, mencatat intisari dan mempelajari buku-buku, referensi, situs-situs internet serta tinjauan pustaka yang berkenaan dengan topik yang dapat dijadikan acuan pembahasan dalam penyusunan skripsi ini. Dari hasil membaca buku-buku referensi, penulis dapatkan bagaimana membangun suatu web portal yang antara lain meliputi konsep pengembangan sistem, serta alat  perancangan sistem. Buku-buku dan data-data tersebut dapat dilihat pada daftar  pustaka.

3.1.3. Studi Literatur

Dengan metode studi literatur ini, penulis mengumpulkan data dan informasi dengan mencari, membaca, mencatat intisari dan mempelajari karya ilmiah, jurnal, skripsi serta tinjauan literatur yang berkenaan dengan topik yang dapat dijadikan acuan pembahasan dalam penyusunan skripsi ini. Dari hasil metode studi literatur yang sudah penulis peroleh serta dijabarkan pada sub bab 2.4.1, penulis dapatkan bagaimana membangun suatu web portal yang terintegrasi yang antara lain meliputi konsep pengembangan sistem, serta alat  perancangan sistem. Dibawah ini penulis sertakan tabel perbandingan  penelitian sejenis sebelumnya :

Tabel 3.1 Perbandingan dengan penelitian sebelumnya No 1

Sumber Duwiyatno (2010), Universitas Diponegoro, Semarang

Judul Pembahasan Rancang Bangun Perancangan dan Portal Informasi  pembuatan Kabupaten Website Portal Bangka Barat Informasi sebagai Sebagai Alternatif alternatif Media Media Periklanan informasi

2

Rifandi (2010), Universitas Gunadarma, Jakarta

Pembuatan Website Portal Fanz Community dengan menggunakan PHP, JQuery dan MySql

3

Ilham Wahyu Danil (2009), Universitas Sumatera Utara, Medan

4

Kapadia, N.H; Figueiredo, R.J.; Fortes, J.A.B; (2006) Purdue Univ., West Lafayette, IN Haerul Zaman (2008), Universitas

5

Kelemahan Pada sistem ini terdapat beberapa kelemahan dalam hal fungsinya. Yakni belum menggunakan framework yang dapat membantu mempercepat dan mempermudah dalam pembuatan website. Tidak terdapat sistem yang menunjang kebutuhan web  portal. Sehingga tidak dapat terintegrasi.

Menjelaskan tentang  pembuatan website portal komunitas mengenai teknologi informasi dengan menggunakan PHP, JQuery dan MYSQL Perancangan Menjelaskan Belum Portal berbasis tentang menggunakan web  perancangan web JQuery dalam menggunakan  portal untuk  proses pembuatan PHP dan MySql keperluan websitenya. Belum  pada SMA Negeri Informasi Sekolah terintegrasi dengan 18 Medan.  berbasis PHP dan sistem lainnya. MySql. Punch: web portal Menjelaskan Tidak terdapat for running tools  pendistribusian sistem yang  jaringan computer menunjang dengan cara user kebutuhan web mengakses web  portal. Sehingga  portal kapan saja. tidak dapat terintegrasi. Aplikasi Web Menjelaskan Belum Portal Hukum tentang menggunakan Himpunan  pembuatan portal Jquery dalam

Andalas Padang

Advokat Indonesia Berbasis PHP dan MYSQL

himpunan advokat indonesia menggunakan PHP dan MYSQL

 pembuatan apilkasinya. Tidak menggunakan CMS.

Berdasarkan hasil perbandingan dari penelitian sebelumnya, penulis mengambil kesimpulan yaaitu : Tabel 3.2 Penelitian yang dilakukan Penulis

No

1.

Sumber

Judul

Pengembangan ke depan Pengembangan Menjelaskan Sistem belum Web Portal tentang terintegrasi dengan Universitas  pengembangan sistem lainnya Menggunakan web portal yaitu secara keseluruhan, JQuery Pada  berupa hanya sebatas link  STMIK Islam  pengembangan ke sistem lainnya. Internasional Administrator Jakarta Web Portal dan Sistem Pendaftaran Online.

Muhammad Iqbal, (2010) UIN Jakarta

Pembahasan

3.1.4. Studi Kelayakan

Tahapan studi kelayakan merupakan tahapan dimana dilakukan suatu studi

yang

akan

 pengembangan

digunakan

aplikasi/sistem

untuk layak

menentukan dilakukan.

mempengaruhi kelayakan suatu aplikasi yaitu: a. Teknis

kemungkinan Faktor-faktor

apakah yang

Kelayakan jika dinilai berdasarkan penerapan aplikasi/sistem yang dikembangkan terhadap teknologi yang ada saat ini.  b. Ekonomi Kelayakan aplikasi/sistem berdasarkan faktor keuntungan secara ekonomi. c. Operasional/Organisasi Kelayakan penerapan aplikasi/sistem yang sedang dikembangkan terhadap sistem atau organisasi yang sedang berjalan. d. Hukum Kelayakan aplikasi/sistem berdasarkan etika serta hukum yang berlaku.

Adapun uraian secara lengkap mengenai studi kelayakan penelitian ini akan di bahas pada sub bab 4.5.2.

3.2.

Metode Pengembangan Sistem

Seperti

yang

disebutkan

pada

bab

sebelumnya,

dalam

merancang

Pengembangan Web Portal menggunakan JQuery, penulis menggunakan metode FAST yang memiliki fase yaitu fase pendefinisian ruang lingkup, fase analisis masalah, fase analisis kebutuhan, fase perancangan logical, fase analisis keputusan, fase perancangan fisik, fase konstruksi dan pengujian, dan fase instalasi dan  pengiriman.

Berikut adalah penjelasan secara singkat dari setiap tahap metode  pengembangan FAST ( Framework for the Application of System Thinking ) yang  penulis lakukan:

3.2.1. Scope Defi ni ti on   (Definisi Ruang Lingkup)

Tahap ini merupakan tahap awal dari pengembangan sistem. Lingkup masalah yang ditetapkan dari tahap ini menyatakan seberapa besar proyek ini akan dilaksanakan. Dengan adanya lingkup seperti ini maka analis dapat mengetahui permasalahan dan menentukan kebutuhan untuk tahap-tahap selanjutnya. Hasil terpenting dari definisi lingkup adalah pernyataan masalah ( problem statement ). Adapun uraian secara lengkap mengenai Scope  Definition ini akan di bahas pada sub bab 4.2.

3.2.2.

Probl em Anal ysis   (Analisis Masalah)

Tahap  problem analysis menganalisa masalah untuk memberikan gambaran pemahaman yang lebih mendalam tentang masalah yang mendasari sehingga dikerjakannya proyek. Hasil dari tahapan ini adalah peningkatan performa sistem yang akan memberikan keuntungan dari segi bisnis perusahaan. Hasil lain dari tahapan ini adalah sebuah laporan yang menerangkan tentang  problems, causes, effects, dan  solution benefits. Pada penulisan ini penulis melakukan Analisis

sistem berjalan, identifikasi masalah, pemecahan masalah, dan uraian singkat sistem yang diusulkan.

Adapun uraian secara lengkap mengenai Problem Analysis  ini akan di  bahas pada sub bab 4.3.

1.2.3.

Requi rements An alysi s   (Analisis Kebutuhan)

 Requirement Analysis  ialah melakukan analisa terhadap kebutuhan

 perusahaan. Tahap ini akan dilakukan bila

manajemen menyetujui untuk

melanjutkan proyek. Pekerjaan pada tahap ini adalah mendefinisikan apa saja yang perlu dilakukan oleh sistem, apa yang dibutuhkan dan diinginkan oleh  pengguna dari sistem baru. Pada tahap ini, tim akan mengumpulkan dan mendiskusikan kebutuhan dan prioritas berdasarkan informasi yang diperoleh dari observasi, wawancara, dan pertemuan-pertemuan yang telah dilakukan. Output yang dihasilkan dari tahap ini adalah business requirement  statement . Adapun uraian secara lengkap mengenai Requirement Analysis  ini

akan di bahas pada sub bab 4.3.

3.2.4. L ogical Design   (Desain Logis)

Tahap logical design menerjemahkan kebutuhan ke dalam model sistem. Tahapan ini menggambarkan suatu solusi dan teknis serta metodologi. Prasyarat untuk logical design adalah daftar kebutuhan yang didapatkan dari tahapan requirements analysis. Pada penelitian ini penulis menggunakan tools Data Flow Diagram  (DFD), Entity Relationship Diagram (ERD), dan State Transition Diagram  (STD) sebagai logical desain.

Dalam perancangan dengan DFD, ERD dan STD ini, penulis menggunakan Microsoft Visio. Pada tahap ini, penulis juga melakukan  perancangan terhadap user interface  dari aplikasi ini. Perancangan yang dilakukan yaitu halaman-halaman yang ada di dalam sistem. Adapun uraian secara lengkap mengenai  Logical Design  ini akan di  bahas pada sub bab 4.4.

3.2.5. Decision A nal ysis   (Analisis Keputusan)

 Decision Analysis  ialah melakukan analisa terhadap keputusan yang

akan diambil berdasarkan solusi-solusi yang ditawarkan. Pada tahap ini ditentukan sistem yang digunakan, kepemilikan perangkat lunak, desain sistem, teknologi informasi yang akan dihasilkan dari aplikasi, dan analisis kelayakan. Adapun uraian secara lengkap mengenai  Decision Analysis  ini akan di bahas pada sub bab 4.5.

3.2.6. Physical D esign an d I ntegration   (Desain Fisik dan Integrasi)

Setelah mendapatkan persetujuan dari pemilik sistem pada tahapan decision analysis, maka akhirnya sistem yang baru dapat dirancang. Tujuan

tahap  physical design and integration  adalah mengubah kebutuhan ke dalam spesifikasi desain fisik yang akan memandu pembangunan sistem. Pada tahapan ini penulis melakukan spesifikasi database  dan melakukan  perancangan tampilan.

Adapun uraian secara lengkap mengenai  Physical Design and  Integration ini akan di bahas pada sub bab 4.6.

3.2.7. Constr ucti on and Testin g   (Konstruksi dan Pengujian)

Pada tahapan ini, penulis melakukan pembangunan perangkat lunak yang biasa disebut pengkodean (coding)  dan

melakukan

pengujian

menggunakan teknik  Black box Testing . Yaitu pengujian yang dilkakukan oleh user, yaitu pihak dari STMIK Islam Internasional Jakarta. Adapun uraian secara lengkap mengenai Construction and Testing   ini akan di bahas pada sub bab 4.7.

3.2.8. I nstall ation and Deli very    (Instalasi dan Pengiriman)

Tahap installation and delivery  berfungsi untuk memasukan sistem ke dalam operasi. Pada tahapan ini penulis melakukan penginstalan sistem dari mulai login di cpanel, upload file dan konfigurasi database. Adapun uraian secara lengkap mengenai Installation and delivery  ini akan di bahas pada sub bab 4.8

3.3.

Alasan Pemilihan Metode

Alasan penulis memilih metode ini karena kelengkapan dan lebih detail dalam proses penelitian dan pembangunan sistem. Setiap tahap dari penelitian dapat terkontrol secara sistematis. Adapun kelebihan dan kelemahan metode  Framework

 for the Applications of Sytems Thinking (FAST) ini adalah sebagai berikut (Whitten

& Bentley, 2007:72) :

3.3.1. Kelebihan Metode FAST :

a.

Mendukung teknik-teknik pengembangan aplikasi dalam waktu yang singkat.

 b.

Mendukung teknik-teknik lain seperti analisis terstruktur, teknik informasi, dan analisis berorientasi objek.

c.

Metode FAST ini merupakan gabungan praktik-praktik terbaik dari metodologi referensi dan komesial.

d.

Metode ini juga memiliki kelebihan yakni lebih fleksibel, dapat disesuaikan dengan standar kita dan dapat dikembangkan dengan metode lain yang sedang berkembang seperti object oriented .

e.

Merupakan metodologi terbaru yang merupakan pengembangan dari metodologi sebelumnya.

3.3.2. Kelemahan Metode FAST

a. Penekanan pada kecepatan dapat berdampak buruk terhadap kualitas yang disebabkan jalan pintas yang disarankan dengan buruk melalui metode ini. (Whitten, 2004:106).

 b. Cenderung saling tindih pada fase dan aktifitas pengembangan sistem (Whitten & Bentley, 2004:82). c. Bagi proyek berskala besar, FAST memerlukan sumber daya yang memadai untuk menciptakan jumlah tim FAST yang baik. (Pressman, 2002:39) d. Proyek bisa gagal jika waktu yang disepakati tidak terpenuhi (Sudarmawan, 2007:160). Berikut ini merupakan perbandingan antara model-model proses yang telah dijabarkan dari berbagai sumber : Tabel 3.3.  Perbandingan metode pengembangan sistem Metodologi FAST ( Framework  for the Applications of Sytems Thinking ) (Whitten & Bentley, 2007:76)

Kelebihan teknik-teknik  Mendukung  pengembangan aplikasi dalam waktu yang singkat.(Whitten, 2004:76) 







Metode ini juga memiliki kelebihan yakni lebih fleksibel, dapat disesuaikan dengan standar kita dan dapat dikembangkan dengan metode lain seperti object oriented . Merupakan metodologi terbaru yang merupakan  pengembangan dari metodologi sebelumnya. Lebih aktif melibatkan  pengguna sistem dalam dalam setiap tahapan  pengembangan sistem. (Whitten, 2007:76) Metode FAST ini merupakan gabungan  praktik-praktik terbaik dari

Kekurangan pada  Penekanan kecepatan dapat  berdampak buruk terhadap kualitas yang disebabkan jalan pintas yang disarankan dengan  buruk melalui metode ini. (Whitten, 2004:106) proyek berskala  Bagi  besar, FAST memerlukan sumber daya yang memadai untuk menciptakan  jumlah tim FAST yang  baik. (Pressman, 2002:39)  Cenderung saling tindih  pada fase dan aktifitas  pengembangan sistem (Whitten & Bentley, 2004:82) bisa gagal jika  Proyek waktu yang disepakati tidak terpenuhi (Sudarmawan,





 Rapid Application  Development  (RAD) (James Martin, 1991)







Sequence Linier / Waterfall



metodologi referensi dan komesial. Metode ini bisa lebih cepat dari  jika Waterfall kebutuhan dan batasan  proyek sudah diketahui dengan baik. Dan bisa untuk dimodularisasi. (James Martin, 1991) Model ini cocok untuk  proyek yang resiko teknisnya rendah (Sudarmawan, 2007:160) Sederhana dan mudah untuk diterapkan Sebagai salah satu alternatif dari SDLC maka RAD dapat dijadikan acuan untuk mengembangkan suatu sistem informasi yang unggul dalam hal kecepatan, ketepatan dan  biaya yang lebih rendah. Model ini cocok untuk  proyek skala rendah. Metode ini merupakan metode yang sudah digunakan secara luas sehingga telah terbukti kehandalannya dalam  pengembangan suatu sistem. (Pressman 2002:30)

2007:160).











 Prototype



Metode ini cukup efektif dengan mendapatkan



RAD cocok untuk aplikasi yang tidak mempunyai resiko teknis yang tinggi. RAD cocok untuk  proyek yang memiliki SDM yang baik dan sudah berpengalaman.

Jarang sekali proyek nyata mengikuti aliran sekuensial yang dianjurkan oleh model. (Pressman, 2002:39) Kesulitan untuk mengakomodasi kebutuhan yang ada  pada bagian awal  proyek. (Pressman, 2002:39) Fase sebelumnya harus sudah lengkap dan selesai dikerjakan sebelum menginjak ke fase berikutnya (Sudarmawan, 2007). Pengembang kadangkadang membuat

kebutuhan dan aturan yang  jelas dan pelanggan bisa langsung melihat sistem yang sebenarnya.  Incremental





 Iterative

Spiral







Mampu mengakomodasi  perubaha secara fleksibel (Sudarmawan, 2007:156).. Hasil proses berupa produk yang semakin lama semakin lengkap hingga versi terlengkap dihasilkan sebagai produk akhir (Sudarmawan, 2007:155)

Fase desain, pengkodean, dan pengujian lebih cepat.

Model ini digunakan untuk sistem skala besar. Membutuhkan konsiderasi langsung terhadap resiko teknis, sehingga dapat mengurangi terjadinya resiko yang lebih besar.

implementasi sembarang, karena ingin working version  selesai dengan cepat. 









Semua kebutuhan tidak dikumpulkan pada tahap awal sehingga menimbulkan masalah serta sulit untuk mengukur  progress karena tidak ada milestone. Memungkinkan terjadi kesulitan untuk memetakan kebutuhan  pengguna kedalam rencana spesifikasi masing-masing hasil incrementasi (Sudarmawan, 2007:157). Butuh waktu yang  banyak untuk menganalisis dan terlalu  banyak langkah yang dibutuhkan model. Resiko utama tidak ditemukan, maka masalah bisa muncul kemudian. Sehingga membutuhkan kemampuan manajemen dan perkiraan resiko (risk assesment ) yang cukup tinggi. Membutuhkan waktu yang cukup panjang (Sudarmawan, 2007:159).

3.4. Kerangka Berpikir

Dalam melakukan penelitian ini, penulis melakukan tahapan-tahapan kegiatan dengan mengikuti rencana kegiatan yang tertuang dalam kerangka berpikir  penelitian ini.

Pemilihan Awal Penelitian

Merumuskan Masalah dan Judul Penelitian

Studi Lapangan, Studi Pustaka dan Studi Literatur 

Scope Definition

 Analisis Sistem Berjalan Identifikasi Masalah

Problem Analysis

Pemecahan Masalah  Analisis Sistem yang diusulkan

Requirement  Analysis

Perancangan Data Flow Diagram Perancangan Entity Relationship Diagram Normalisasi

Logical Design Perancangan State Transition Diagram

Sistem Yang Di Gunakan Kepemilikan Perangkat Lunak Decision Analysis

Teknologi yang dihasilkan Desain Sistem Teknologi yang dihasilkan

Physical Design anf Integration

Spesifikasi Database Perancangan Antarmuka Konstruksi Perangkat Lunak Hardware

Construction and Testing

Pengujian Pengujian Penerimaan

Installation and Delivery

Kesimpulan dan Saran

Gambar 3.1. Kerangka Berpkir

BAB IV HASIL DAN PEMBAHASAN

4.1.

Gambaran STMIK Islam Internasional Jakarta

 International Islamic University College  (IIUC), yang dikenal sebagai

STMIK Islam Internasional Jakarta adalah lembaga pendidikan swasta yang terdaftar di Kopertis III, Jakarta dan didukung sepenuhnya oleh  International Islamic University Malaysia (IIUM) atau Universitas Islam Antar Bangsa Malaysia.

Siswa

diberikan

nilai-nilai

luhur

pengetahuan

dan

profesionalisme,

dilengkapi dengan pengembangan intelektual dari segi fisik dan emosional. IIUC memberikan pendidikan dan sumber daya manusia yang terampil untuk kemajuan islam, masyarakat dan negara. IIUC melayani dan memberikan kepedulian untuk mendidik, melatih dan menanamkan nilai-nilai luhur untuk laki-laki dan perempuan muda yang bercita-cita, yang ingin, yang berharap untuk menjadi generasi berikutnya yang profesional. 4.1.1. Kursus yang Ditawarkan

IIUC

menawarkan

beberapa

program

akademik

diarahkan

membangun keterampilan dan hasil karya akademis, yang dibangun di atas keyakinan bahwa pengetahuan harus dikejar dan disebarluaskan sebagai tindakan ibadah, dalam pengakuan penuh bahwa itu adalah kepercayaan yang Yang Mahakuasa telah ditempatkan di atas manusia. IIUC memiliki dua jenis program: program reguler dan 2+1 program. 60 Semua program akan dikirimkan dalam bahasa Inggris dan tidak ada

 persyaratan untuk TOEFL atau IELTS, karena semua siswa harus mengikuti kelas persiapan bahasa Inggris selama 4 bulan sebelum semester dimulai. 4.1.2. Program Studi

Untuk menjadikan STMIK Islam Internasional sebagai pusat yang mampu menyediakan keterampilan dan keahlian dalam bidang aplikasi komputer, program studi yang ditawarkan oleh STMIK Islam Internasional Jakarta adalah Program Studi Teknik Informatika, Program Studi Sistem Informasi, dan Program Studi Manajemen Informatika. 4.1.3. Tahun Akademik

Tahun akademik dibagi menjadi dua semester normal dan satu semester pendek, sehingga akan memungkinkan siswa untuk menyelesaikan studi mereka lebih cepat. Setiap semester memiliki 14 sesi / minggu mengajar. Untuk semester pendek dua kali seminggu, sehingga memiliki tujuh minggu untuk menyelesaikan. 4.1.4. Visi dan Misi 4.1.4.1. Visi

Menjadi

institusi

yang

terbaik

untuk

pengembangan

 profesional islam global. 4.1.4.2. Misi

1. Untuk mendirikan sistem pembelajaran yang fleksibel dengan memberikan sesuatu yang berkualitas tinggi dan program program inovatif yang mencerminkan permintaan saat ini.

2. Untuk

melanjutkan

dukungan

akademis,

karir

dan

 pengembangan profesional staf dan mahasiswa. 3. Untuk menyediakan lingkungan belajar yang kondusif untuk meningkatkan pertumbuhan bagi mahasiswa dan staf. 4. Untuk

mendapatkan

kepercayaan

dari

para

pemangku

kepentingan melalui penanaman nilai-nilai islam inti dan untuk menyeimbangkan keuntungan dan kewajiban sosial tanpa mengorbankan nilai-nilai akademis. 5. Untuk mempertahankan standar kualitas pendidikan yang terbaik.

4.1.5.

Struktur Organisasi

Yayasan Universitas Islam AntarBangsa

Dewan Penyantun Jamaludin Bin Karim Dr. Norhizham

Personal Assistant Wiwin Hadi

Ketua & Anggota Pembina Yayasan 1. Taufik Muhammad Guntur 2. Agus Rizal Bahasan

Ketua & Anggota Pengawas 1.Drs. Mohammad Sidik 2.H. Saiful Bahri 3.Tuan Ahmad Sanusi

Ketua Yayasan Yusuf Durachman MSc, MIT

Ketua STMIK Islam Internasional Zainuddin Bey Fanannie, MSc

Wakil Ketua Akademik Drs. H. Bambang Mardianto, MM

Wakil Ketua Kemahasiswaan Moehammad Faizal B.IRK

Akademik Manager Shinta Mardhotillah

Wakil Ketua Kooperasi & Pengembangan Siti Nurfi’ah, MEd

Marketing 1. Aryandi

2. Syafruddin Language Center Manager Imam Mashudi

Lab Computer Manager Syahril

Gambar 4.1. Struktur Organisasi IIUC

4.2.

Definisi Ruang Lingkup ( Scope Defi ni tion  )

Sebagai salah satu universitas yang baru berdiri pada tahun 2008, kebutuhan akan informasi yang cepat dan tepat sangat diperlukan untuk menyajikan data-data yang lengkap, mempermudah kelangsungan pembelajaran, dan mempercepat proses mendapatkan informasi yang dibutuhkan dalam sebuah institusi perguruan tinggi. Pada sistem web portal sebelumnya belum secara maskimal memenuhi kebutuhan yang terdapat di STMIK Islam Internasional Jakarta. Dalam tahap ini diidentifikasikan dua permasalaham utama pada sistem web  portal STMIK Islam Internasional Jakarta yaitu administrator web portal kesulitan melakukan pengelolaan website, dan belum ada sistem pendaftaran mahasiswa baru secara online. Hal inilah yang mendasari pentingnya suatu Pengembangan Web Portal di STMIK Islam Internasional Jakarta. Dalam tahap ini juga diidentifikasikan batasan pembuatan proyek yang diusulkan yaitu pengerjaan proyek dikerjakan oleh tim yang terdiri dari 5 orang yang masing-masing memiliki tugasnya. Kemudian pengerjaan proyek web portal ini di laksanakan dalam waktu 1 bulan terhitung dari tanggal 1 November 2010 sampai dengan 1 Desember 2010. Biaya yang dibutuhkan untuk pengerjaan proyek adalah kurang lebih Rp.800.000. dan standar teknologi yang digunakan adalah standar web 2.0. Pengembangan Web Portal STMIK Islam Intenasional ini dimaksudkan untuk memberikan gambaran umum tentang profil STMIK Islam Islam Internasional serta memberikan pelayanan kepada mahasiswa yang meliputi gambaran tentang organisasi, program studi, kegiatan perkuliahan, pengawasan dan pelayanan. Selain

itu juga diharapkan website portal ini dapat dijadikan sebagai bahan pertimbangan  bagi pimpinan untuk membuat kebijakan dan mengambil keputusan.

4.3.

Analisis Permasalahan ( Probl em Analysis  )

Setelah melakukan observasi serta wawancara terhadap pihak STMIK Islam Internasional Jakarta, penulis melihat ada beberapa sistem yang berjalan saat ini. Berikut penulis jabarkan analisa sistem yang berjalan, identifikasi masalah,  pemecahan masalah, dan sistem yang diusulkan pada Web Portal STMIK Islam Internasional Jakarta. 4.3.1. Analisis Sistem Berjalan

Alur sistem web portal yang diterapkan di IIUC masih bersifat konvensional yaitu hanya terdapat fitur-fitur yang belum sepenuhnya memenuhi kebutuhan informasi web portal seperti sebagai media promosi, media publikasi kegiatan, media pendaftaran mahasiswa baru dan fitur-fitur lainnya yang dapat menunjang proses kegiatan pembelajaran. Adapun proses sistem yang berjalan pada STMIK Islam Internasional Jakarta adalah sebagai berikut :

4.3.1.1. Proses web portal Halaman User

Permulaan user mengunjungi web portal IIUC di alamat www.iiuc.ac.id.  Sistem menampilkan halaman home  yang terdapat  beberapa menu dan fitur. User memilih menu dan fitur yang tersedia

 pada halaman home.

User masuk ke halaman sesuai dengan

menu/fitur yang dipilih. Setelah selesai, user keluar dari web portal.

Proses Web portal User  Mulai

User masuk halaman web iiuc.ac.id

Pilih menu user 

Tampil halaman

Selesai

Gambar 4.2. Proses Sistem Berjalan Web portal

4.3.1.2.Proses web portal Halaman Administrator

Permulaan Administrator mengunjungi cpanel web portal IIUC di alamat www.iiuc.ac.id/cpanel.  Admin melakukan perubahan halaman dengan melakukan update secara manual yaitu merubah kode html. Halaman yang diupdate akan ditampilkan dihalaman user. Setelah selesai, admin keluar dari web portal.

Proses Admnistrator Web Portal  Administrator 

User 

Mulai

Membuat kode program

Tidak Ada Error 

Tampil di halaman User 

Gambar 4.3. Proses Sistem Berjalan Administrator Web portal 4.3.1.3. Proses Pendaftaran Mahasiswa Baru

User mengunjungi kampus STMIK Islam Internasional Jakarta. User membeli formulir pendaftaran mahasiswa baru. User mengisi formulir. User memberikan formulir dan berkas-berkas lain yang diperlukan. User mendapatkan kartu ujian. Petugas akademik memasukkan data pendaftaran secara manual kedalam sistem.

Proses Pendaftaran Mahasiswa Baru Petugas Pendaftaran

Calon Mahasiswa

Mulai

Calon Mahasiswa Membeli formulir pendaftaran

Calon Mahasiswa Mengisi Formulir 

Calon Mahasiswa Menyerahakn Formulir Ke petugas

Memberiakan kartu ujian ke calon mahasiswa

Selesai

Gambar 4.4. Proses Sistem Berjalan Pendaftaran Mahasiswa Baru 4.3.2. Identifikasi Masalah

Setelah melakukan survey atau interview maka dapat diidentifikasi  permasalahan yang berhubungan dengan kelemahan sistem yang sedang  berjalan pada pad a STMIK Islam Internasional Jakarta yang dibuat d ibuat ke dalam da lam tabel tabe l  sebagai berikut : Cause and Effect  sebagai Analysis Tabel 4.1. Cause And Effect Analysis CAUSE CAUSE AND EF FECT AN AL YSI YSI S Permasalahan Cause and Ef E f f ect 

Sistem Web  bersifat statis,

portal

masih



Dikarenakan  User   tidak bisa melakukan perubahan pada halaman website.





Seorang Administrator kesulitan melakukan pengelolaan web  portal

Akibatnya halaman web portal menjadi monoton dan kurang menarik.

Dikarenakan harus melakukan  perubahan pada kode program untuk melakukan proses update dan menampilkannya di halaman user. Akibatnya dibutuhkan waktu yang lama dan menjadi tidak efisien.









Proses penerimaan mahasiswa  baru, belum memiliki sistem  pendaftaran yang lebih cepat, efisien, dan terkini.

Pembuatan web portal masih menggunakan pengkodean HTML

Dikarenakan masih sistem pendaftaran  baru secara manual. Akibatnya calon membutuhkan waktu lebih banyak untuk  pendaftaran.











Sistem yang ada tidak dirancang agar bisa dikembangkan oleh orang lain selain pembuat aplikasi.



dilakukan mahasiswa mahasiswa dan biaya melakukan

Proses pembuatan web portal rumit dan membutuhkan waktu yang lama. Belum menggunakan Library JQuery yang dapat membantu mempermudah, mempercepat, dan memperindah tampilan web  portal. Sistem yang ada tidak dapat dikembangkan oleh orang selain  pembuat sistem, jika pembuat web portal sudah tidak menangani lagi, maka web portal tidak dapat dikembangkan.

4.3.3. Pemecahan Masalah

Dengan melihat permasalahan dan kendala yang terjadi dalam sistem web portal STMIK Islam Internasional yang telah ada, maka dibutuhkan suatu media yang menanggulangi web portal tersebut secara lebih efektif dan efisien dalam menunjang kinerja bagian administrator, mahasiswa dan staff. Oleh karena itu penulis mengusulkan pengembangan web portal dengan menggunakan JQuery yang menjadi gerbang dari berbagai kebutuhan informasi. 4.3.4. Uraian Singkat Sistem yang Diusulkan

Untuk menjawab permasalahan-permasalahan yang dihadapi dalam  pengembangan sistem yang masih manual tersebut, tersebut , penulis bermaksud mengusulkan sebuah Web Portal yang menyajikan data-data yang lengkap, untuk mempermudah kelangsungan pembelajaran, dan mempercepat proses mendapatkan informasi yang dibutuhkan dalam sebuah institusi perguruan tinggi. Pada pengembangannya, penulis melakukan studi kasus pada STMIK Islam Internasional Jakarta. Adapun sistem web portal yang diusulkan pada STMIK Islam Internasional Jakarta adalah sebagai berikut: 4.3.4.1.Proses Web Portal Halaman User

Permulaan user mengunjungi web portal IIUC di alamat www.iiuc.ac.id..  Sistem menampilkan halaman home  yang terdapat www.iiuc.ac.id  beberapa menu dan fitur. User memilih menu dan fitur yang tersedia

 pada halaman home.

User masuk ke halaman sesuai dengan

menu/fitur yang dipilih. Setelah selesai, user keluar dari web portal.

Proses Web portal User  Mulai

User masuk halaman web iiuc.ac.id

Pilih menu user 

Tampil halaman

Melakukan update halaman

Selesai

Gambar 4.5. Proses Sistem Web portal yang diusulkan

4.3.4.2.Proses 4.3.4.2.Proses Web Portal Halaman Administrator

Permulaan Admin Admin mengunjungi halalaman administrator web  portal IIUC di alamat ala mat www.iiuc.ac.id/adminweb www.iiuc.ac.id/adminweb.. Sistem menampilkan halaman home yang terdapat beberapa menu dan fitur. Admin memilih

menu dan fitur yang tersedia pada halaman Admin. Admin. Admin masuk ke halaman sesuai dengan menu/fitur yang dipilih. Admin mengupdate web portal menggunakan fitur-fitur yang telah disediakan. Kemudian akan ditampilkan dihalaman user. Setelah selesai, admin keluar dari administrator web portal. Proses Admin Web portal  Admin

User 

Mulai

 Admin masuk halaman Admin salah

Cek Username & password

Pilih menu admin

Update Konten

Tampil dihalaman User 

Selesai

Gambar 4.6. Proses Administrator Web portal yang diusulkan 4.3.4.2.1. Proses Pendaftaran Mahasiswa Baru Secara Online 

Permulaan user mengunjungi web portal IIUC di alamat www.iiuc.ac.id..  Sistem menampilkan halaman home yang terdapat www.iiuc.ac.id  beberapa menu dan fitur. User memilih menu pendaftaran. Sistem

menampilkan halaman pendaftaran. User memilih menu “ Daftar Sekarang”. User mengisi formulir pendaftaran. Setelah selesai

mengisi formulir, sistem menampilkan halaman pemberitahuan bahwa  pengisian telah berhasil. User melakukan pembayaran formulir  pendaftaran ke bank. User masuk ke web IIUC. User memilih menu  pendaftaran. User memilih menu konfirmasi. User Mengisi Form Konfirmasi. Sistem menampilkan halaman pengisian form konfirmasi  berhasil. Admin melakukan validasi dan akt ifasi username. User login untuk cetak kartu. Sistem menampilkan halaman cetak kartu. User Cetak Kartu Ujian. User Logout. User mengikuti ujian.

Proses Pendaftaran Online User 

Sistem

 Admin

Mulai User masuk web iiuc.ac.id

Pilih menu Pendaftaran

Tampil halaman Pendaftaran

Form Pendaftaran Tidak Pengisian benar 

Ya Membayar ke bank

Tampil halaman Sukses Pengisian Formulir 

Konfirmasi Pembayaran

Form Konfirmasi Tidak Pengisian benar  Ya Tampil halaman Sukses Pengisian Form Konfirmasi

Validasi & Aktifasi Username

Login Cetak Kartu Tampil Halaman Cetak Kartu

Logout Selesai

Gambar 4.7. Proses Sistem Pendaftaran Mahasiswa Baru Secara

Online yang diusulkan

4.4.

Analisa Kebutuhan ( Requi rement A nal ysis  )

Analisa kebutuhan Pengembangan Web Portal STMIK Islam Internasional Jakarta ini adalah sebagai berikut : 1.

Web Portal User Bagi user   web portal ini diharapkan dapat memberikan kemudahan dalam mencari informasi mengenai kegiatan akademik dan kegiatan perkuliahan secara mudah dan up to date. Konten dari web portal ini adalah profil IIUC,  berita kampus, agenda, info akademik, pendaftaran online, akses atau link ke sistem lain seperti SIMAK, E-Learning, dan Sistem Keuangan.

2.

Administrator Web Portal Bagi  Administrator   web portal ini diharapkan memiliki sebuah Content  Management System  (CMS) agar dapat memberikan kemudahan dalam

mengelola dan memberikan informasi kepada user   informasi up to date yang terjadi di STMIK Islam Internasional. Konten dari administrator   web portal ini adalah modul pengelolaan berita, agenda, info akademik,  partner   IIUC, download , galeri foto, menu, halaman statis, dan validasi pendaftaran.

3.

Sistem Pendaftaran Online Sistem Pendaftaran Online  ini diharapkan dapat memberikan kemudahan dalam hal melakukan pendaftaran mahasiswa baru, perubahan sistem dari manual menjadi Online dapat mempermudah calon mahasiswa melakukan  pendaftaran dan dapat lebih banyak calon mahasiswa yang beriminat untuk melaksanakan kuliah di STMIK Islam Internasional Jakarta. Konten dari

Sistem Pendaftaran Online ini

adalah mengisi formulir pendaftaran,

konfirmasi pembayaran, login dan mencetak kartu.

4.5.

Perancangan Logikal ( Desain L ogical  )

Dalam penelitian ini tahap perancangan logikal meliputi beberapa hal yang diuraikan sebagai berikut : 4.5.1. Perancangan Data Fl ow Diagram   (DFD)

Data Flow Diagram digunakan untuk menggambarkan pembagian sistem ke modul yang lebih kecil. Data Flow Diagram ini terbagi atas diagram konteks, diagram level 1, diagram level 2 dan seterusnya (Ladjamudin, 2005:64). Ada beberapa tahapan atau level dalam DFD agar didalam memahami  proses pada suatu sistem informasi atau perangkat lunak yang dibangun menjadi lebih mudah, dimana antara satu level ke level yang lain akan saling  berkaitan, mulai dari tahapan yang memperlihatkan proses-proses utama yang terjadi dalam sistem, atau yang disebut dengan DFD level 0 sampai dengan tahapan-tahapan berikutnya.

4.5.1.1. Rancangan Diagram Konteks

file_Halaman Statis file_Sub Menu file_Menu Utama File_Galeri Foto file_Album file_Sekilas Info file_upload file_partner_iiuc Hasil_validasi file Berita File_Agenda File_Modul

Hubungi_Kami Komentar  Pencarian_berita Pendaftaran

WEB PORTAL IIUC

User

Kartu_pendaftaran Hasil_Pencarian Hasil_Komentar  Download  Agenda  Halaman Statis  Berita  partner_iiuc Sekilas Info  Album  Galeri_Foto  Menu_Utama  Sub_Menu

Admin file_Hubungi_Kami File_Pendaftaran File_Komentar  list_modul list_Agenda list_Berita list_partner_iiuc list_Download list_Sekilas_Info list_Album list_Galeri_Foto list_Menu_Utama list_Sub_Menu list_Halaman_Statis

Gambar 4.8. Diagram Konteks Web Portal

Dalam diagram konteks diatas terdapat dua entitas yang menunjang proses-proses yang terdapat pada Web Portal yaitu user sebagai pengguna web portal yang menggunakan aplikasi dan admin sebagai pengelola web portal yang mengelola web portal. Dalam hal ini yang bisa mengupdate data-data yang akan ditampilkan di halaman user adalah admin saja, sedangkan user tidak bisa mengupdate seluruh data yang ada dalam web portal.

4.5.1.2. Rancangan Diagram Level 1 yang Diusulkan

File Pendaftaran Pendaftaran

File Hubungi Kami

Hubungi Kami

File Download Hasil_validasi File_Pendaftaran file_Hubungi_Kami File_upload List_download

1.0 Mengolah Request User 

Download Kartu_pendaftaran

File_agenda File_sekilas_info List_agenda List_sekilas_info

 Agenda 2.0  Mengolah Info STMIK

Sekilas_Info

Agenda Sekilas Info File_Album File_Galeri_Foto File_partner_iiuc

 Album Galeri_Foto Partner_iiuc

User 

 Album_Foto Galeri_foto

List_album List_galeri_foto List_partner_iiuc

3.0 Mengolah Gambar 

file_Menu_utama File_Sub_menu File_Halaman_statis

Partner  menu_utama sub_menu halaman_statis

4.0 Mengolah Halaman

Pencarian_berita Hasil_pencarian Hasil_komentar 

Menu Sub Menu Halaman Statis list_menu_utama list_sub_menu list_Halaman_statis

berita Komentar 

 Admin

5.0 Mengolah Ruang Media

File_Berita Berita Komentar  List_berita file_komentar  File_modul

6.0 Mengelola Modul

Modul

Gambar 4.9. DFD Level 1 yang diusulkan

List_file_modul

Dalam diagram  Level   1 diatas terdapat enam proses. Semua proses tersebut dapat dilakukan oleh user yang berstatus admin. Sedangkan user yang berstatus user  hanya bisa melihat isi web portal, melakukan pendaftaran, komentar, hubungi kami dan melakukan pencarian berita. Penjelasan mendetail dari setiap proses akan dijelaskan berikut ini. 4.5.1.3.

Rancangan Diagram Level 2 yang diusulkan

Diagram ini untuk mendetailkan setiap proses yang terjadi pada diagram Level  2 sistem web portal. 1.

Diagram Level  2 Proses 1.0 Data pendaftaran

user

pendaftaran

1.1 Mendaftar Mahsiswa baru

Kartu_pendaftaran

File_pendaftaran

Admin

Hasil_validasi

Hubungi kami

Hubungi_kami

1.2 Menghubungi kami File_hubungi_kami

download

download 1.3 Olah Download File_upload List_download

Gambar 4.10. DFD Level 2 Proses 1.0 (Request data user)

Proses 1.0 adalah proses yang berhubungan dengan request data user. Yang bisa mengakses proses ini adalah user   dan admin. Didalamnya terdapat tiga proses, mendaftar mahasiswa baru, menghubungi kami dan mengolah download. Berikut adalah detail

dari proses mendaftar mahasiswa baru, menghubungi kami dan mengolah download.

user

pendaftaran

1.1.1* Mengisi formulir pendaftaran

File_pendaftaran

Admin

pendaftaran

1.1.2* Validasi pendaftaran

Kartu_pendaftar 

Hasil_validasi

Gambar 4.11. DFD Level 3 Proses 1.1

Dalam proses mendaftar mahasiswa baru ,  pertama user melakukan pengiriman

data pendaftaran. Kemudian admin akan

memvalidasi data tersebut, dan mengirimkan kartu pendaftaran kepada user . Hubungi Kami

user

Hubungi_kami

1.2.1* Mengirim Pesan

File_hubungi_kami

Admin

Gambar 4.12. DFD Level 3 Proses 1.2

Dalam proses menghubungi kami ,  pertama user melakukan  pengiriman data hubungi kami. Kemudian admin akan menjawab data tersebut.

1.3.1* Mengupload File

user

File_upload

Admin

download

1.3.2* Mendownload File

download

List_download

Gambar 4.13. DFD Level 3 Proses 1.3

Dalam

proses

mengolah

melakukan pengiriman

download ,  pertama

admin

file download. Kemudian user akan

medownload data tersebut.

2. Diagram Level 2 Proses 2.0  Agenda

user

2.1 Olah Agenda

List_agenda

File_agenda

Admin

List_agenda

Sekilas Info

sekilas_info

2.1 Olah Sekilas Info

File_sekilas_info List_sekilas_info

Gambar 4.14.  DFD Level  2 Proses 2.0 (Mengolah Info STMIK)

Proses

2.0

adalah

proses

yang

berhubungan

dengan

 pengelolaan Info STMIK. Yang bisa mengakses proses ini adalah user   dan admin. Didalamnya terdapat dua proses, mengolah agenda

dan mengolah sekilas info. Berikut adalah detail dari proses mengolah agenda dan mengolah sekilas info.

List_agenda user

agenda

2.1.1* Tambah Agenda

File_agenda

Admin

 Agenda

agenda

2.1.2* Edit Agenda

File_agenda List_agenda

2.1.3* Hapus Agenda

File_agenda

Gambar 4.15. DFD Level 3 Proses 2.1

Dalam proses mengolah agenda, proses ini dilakukan oleh admin didalamnya terdapat tiga proses, yaitu menambah, meng-edit ,

dan menghapus agenda. Kemudian user akan melihat data agenda IIUC.

List_sekilas_info user

 sekilas info

2.2.1* Tambah sekilas info

File_sekilas info

Admin

sekilas info

sekilas info

2.2.2* Edit sekilas info

File_sekilas info List_sekilas_info

2.2.3* Hapus sekilas info

File_sekilas info

Gambar 4.16. DFD Level 3 Proses 2.2

Dalam proses mengolah sekilas info, proses ini dilakukan oleh admin didalamnya terdapat tiga proses, yaitu menambah, meng-edit ,

dan menghapus agenda. Kemudian user akan melihat data sekilas info IIUC.

3. Diagram Level 2 Proses 3.0

album

user

3.1 Olah album

 album

File_album

Admin

List_album

galeri foto

 galeri_foto

3.2 Olah galeri foto

File_galeri_foto List_galeri_foto

partner 

3.3 Olah Partner IIUC

partner_iiuc

File_partner_iiuc List_partner_iiuc

Gambar 4.17.  DFD Level  2 Proses 3.0 (Mengolah Gambar)

Proses

3.0

adalah

proses

yang

berhubungan

dengan

 pengelolaan Gambar yang di tampilkan di halaman user. Yang bisa mengakses proses ini adalah user   dan admin. Didalamnya terdapat tiga proses, mengolah album, mengolah galeri foto dan mengolah  partner IIUC. Berikut adalah detail dari proses mengolah album, mengolah galeri foto dan mengolah partner IIUC.

List_album user

album

3.1.1* Tambah album

File_album

Admin

album

album

3.1.2* Edit album

File_album List_album

Gambar 4.18. DFD Level 3 Proses 3.1

Dalam proses mengolah album, proses ini dilakukan oleh admin  didalamnya terdapat dua proses, yaitu menambah dan mengedit  album. Kemudian user akan melihat data album.

List_galeri_foto user

 galeri foto

3.2.1* Tambah galeri foto

File_galeri foto

Admin

galeri foto

 galeri foto

3.2.2* Edit galeri foto

File_galeri foto List_galeri_foto

3.2.3* Hapus galeri foto

File_galeri foto

Gambar 4.19. DFD Level 3 Proses 3.2

Dalam proses mengolah galeri foto, proses ini dilakukan oleh admin didalamnya terdapat tiga proses, yaitu menambah, meng-edit ,

dan menghapus galeri foto. Kemudian user akan melihat data galeri foto IIUC.

List_partner_iiuc user

partner_iiuc

3.3.1* Tambah partner_iiuc

File_partner_iiuc

Admin

partner_iiuc

partner_iiuc

3.3.2* Edit partner_iiuc

File_partner_iiuc List_partner_iiuc

3.3.3* Hapus partner_iiuc

File_partner_iiuc

Gambar 4.20. DFD Level 3 Proses 3.3

Dalam proses mengolah gambar partner IIUC, proses ini dilakukan oleh admin  didalamnya terdapat tiga proses, yaitu menambah, meng-edit , dan menghapus gambar partner IIUC. Kemudian user akan melihat data partner IIUC.

4. Diagram Level 2 Proses 4.0

Menu_utama

user

Menu_utama

4.1 Olah menu Utama

File_menu_utama

Admin

List_menu_utama

galeri foto

Sub menu

4.2 Olah sub menu

File_sub_menu List_sub_menu

Halaman statis

Halaman_statis

4.3 Olah halaman statis

File_halaman_statis List_halaman_statis

Gambar 4.21.  DFD Level  2 Proses 4.0 (Mengolah Halaman)

Proses

4.0

adalah

proses

yang

berhubungan

dengan

 pengelolaan menu dan halaman. Yang bisa mengakses proses ini adalah user   dan admin. Didalamnya terdapat tiga proses, mengolah menu utama, mengolah sub menu dan mengolah halaman statis. Berikut adalah detail dari proses mengolah menu utama, mengolah sub menu dan mengolah halaman statis.

user

 menu_utama

4.1.1* Tambah menu_utama

List_menu_utama File_menu_utama

Admin

menu_utama

4.1.2* Edit menu_utama

 menu_utama

File_menu_utama List_menu_utama

4.1.3* Hapus menu_utama

File_menu_utama

Gambar 4.22. DFD Level 3 Proses 4.1

Dalam proses mengolah menu utama, proses ini dilakukan oleh admin didalamnya terdapat tiga proses, yaitu menambah, meng-edit ,

dan menghapus menu utama. Kemudian user akan melihat data menu utama.

List_sub_menu user

 sub_menu

4.2.1* Tambah sub_menu

File_sub_menu

Admin

sub_menu

 sub_menu

4.2.2* Edit sub_menu

File_sub_menu List_sub_menu

4.2.3* Hapus sub_menu

File_sub_menu

Gambar 4.23. DFD Level 3 Proses 4.2

Dalam proses mengolah sub menu, proses ini dilakukan oleh admin didalamnya terdapat tiga proses, yaitu menambah, meng-edit ,

dan menghapus sub menu. Kemudian user akan melihat data sub menu.

user

halaman_statis

4.3.1* Tambah halaman_statis

List_halaman_statis File_halaman_statis

Admin

halaman_statis

halaman_statis

4.3.2* Edit halaman_statis

File_halaman_statis List_halaman_statis

4.3.3* Hapus halaman_statis

File_halaman_statis

Gambar 4.24. DFD Level 3 Proses 4.3

Dalam proses mengolah halaman statis, proses ini dilakukan oleh admin didalamnya terdapat tiga proses, yaitu menambah, mengedit , dan menghapus halaman statis. Kemudian user akan melihat

data halaman statis.

5. DFD Level 2 proses 5.0 berita

user

5.1 Olah berita

berita

File_berita

Admin

List_berita

komentar  komentar  Hasil_komentar 

5.2 Olah komentar 

List_komentar 

Berita

pencarian

5.3* Pencarian Berita

Hasil_pencarian

Gambar 4.25.  DFD Level  2 Proses 5.0 (Mengolah Ruang Media)

Proses

5.0

adalah

proses

yang

berhubungan

dengan

 pengelolaan menu dan halaman. Yang bisa mengakses proses ini adalah user   dan admin. Didalamnya terdapat tiga proses, mengolah  berita, mengolah komentar dan mengolah pencarian berita. Berikut adalah detail dari proses mengolah berita dan mengolah komentar.

List_berita user

 berita

5.1.1* Tambah berita

File_berita

Admin

berita

5.1.2* Edit berita

 berita

File_berita List_berita

File_berita

5.1.3* Hapus berita

Gambar 4.26.  DFD Level  3 Proses 5.1

Dalam proses mengolah berita, proses ini dilakukan oleh admin didalamnya terdapat tiga proses, yaitu menambah, meng-edit ,

dan menghapus berita. Kemudian user akan melihat data berita.

List_komentar  user

komentar 

5.2.1* Tambah komentar 

Admin

komentar 

Hasil_komentar 

5.2.2* Edit komentar 

File_komentar  List_komentar 

5.2.3* Hapus komentar 

File_komentar 

Gambar 4.27.  DFD Level  3 Proses 5.2

Dalam proses mengolah komentar, proses ini dilakukan oleh admin didalamnya terdapat dua proses, yaitu menambah, meng-edit ,

dan menghapus komentar. Kemudian user akan melihat data komentar.

4.5.2. Perancangan Enti ty Relation shi p Di agram   (ERD)

Tujuan perancangan ERD adalah untuk menunjukkan objek-objek (entitas) apa saja yang ingin dilibatkan dalam sebuah database dan  bagaimana hubungan yang terjadi diantara objek tersebut (Ladjamudin, 2005). Setelah ERD dibuat maka dilakukan normalisasi. Berikut hasil  perancangan ERD :

Gambar 4.28. Model Entity Relationship Diagram (ERD)

Gambar 4.29.  Model Logical Record Structure (LRS)

Seperti terlihat diatas, terdapat 20 tabel. Tabel yang memiliki relasi adalah tabel berita, data_pribadi, gallery, dan main_menu. Tabel kategori dan komentar adalah  foreign key dari tabel berita. Tabel submenu adalah foreign key dari tabel main_menu. Tabel gallery adalah foreign key dari tabel album.

Sedangkan

tabel

data

pribadi

memiliki  foreign

key

yaitu

 pilihan_program, asal_sekolah, data_orang_tua dan alamat_orang_tua.

4.5.3.

Normalisasi

tabel

Berikut akan dijelaskan proses normalisasi, mulai dari tabel yang  belum dinormalisasi sampai 3NF. Tabel yang akan di normalisasi adalah tabel data_pribadi, sedangkan tabel lainnya tidak dilakukan normalisasi karena sudah dalam bentuk normal. Adapun proses normalisasinya adalah sebagai berikut : 1. Unnormalized Form Tahap pertama ini, semua data pendaftaran akan dicatat. Syarat  Normal kesatu (1NF) adalah menghilangkan redudansi data dan semua  field   sudah bernilai atomik. Pada tabel 4.2 adalah tabel yang berbentuk tidak normal, dimana kolom id_pilihan, program,  pilihan, id_asal_sekolah, nama_sekolah, jurusan, tahun_lulus, id_data_orang_tua, nama_ayah, agama_ayah, pendidikan_ayah, id_alamat_orang_tua, alamat dan kota belum memiliki nilai atomik dan memiliki redudansi data. Hal ini akan diperbaharui  pada bentuk 1NF. Berikut adalah tabel yang belum dinormalisasi tersebut:

2. First Normal Form (1NF)

Syarat pada 1NF adalah semua kolom data harus memiliki nilai atomik.

Maka

dari

id_asal_sekolah, id_data_orang_tua,

itu,

kolom

id_pilihan,

nama_sekolah, nama_ayah,

program,

jurusan,

agama_ayah,

pilihan,

tahun_lulus, pendidikan_ayah,

id_alamat_orang_tua, alamat dan kota harus diubah nilainya untuk mendapatkan nilai atomik. Untuk mendapatkan nilai atomik itu, maka data kedua yang terdapat pada kolom tersebut akan dipindahkan untuk dibuat baris baru. Berikut ini adalah  berada pada 1NF.

komposisi tabel yang sudah

3. Second Normal Form (2NF)

Syarat pada bentuk normal kedua (2NF) adalah harus berada dalam 1NF dan menghilangkan dependensi parsial. Data yang bukan primary key harus memiliki dependensi fungsional terhadap  primary key.

Berikut

adalah  primary

key

tersebut

beserta

kolom

yang

dipengaruhinya : a. id_data_pribadi nama_lengkap, jns_klmn, tmpt_lahir, no_ktp  b. id_pilihan

program, pilihan

c. id_asal_sekolah

nama_sekolah, jurusan, tahun_lulus

d. id_data_orang_tua nama_ayah, agama_ayah, pendidikan_ayah e. id_alamat_orang_tua

alamat, kota

Maka dari itu tabel data_pribadi, akan dipecah dan dibuat empat tabel  baru, yaitu tabel pilihan_program, asal_sekolah, data_orang_tua, dan alamat_orang_tua. Berikut adalah tabel-tabel tersebut : Tabel 4.4. Tabel data_pribadi 2NF Id_data_pribad  Nama_lengka Jns_klm Tmpt_lahi

 No_ktp i

 p

n

r 1234567

1

Andre

L

Bekasi 8 1234567

1

Andre

L

Bekasi 8

Tabel 4.5. Tabel pilihan_program 2NF

Id_data_pribadi

Id_pilihan

Program

Pilihan

1

1

Reguler

TI

1

2

Non Reg

SI

Tabel 4.6. Tabel asal_sekolah 2NF

Id_asal  _  Nama_Sekolah Sekolah 1 SMAN 10

Jurusan

Tahun_lulus

IPA

2006

2

IPS

2007

SMAN 47

Id_data_ orang_tua 1

Tabel 4.7.  Tabel data_orang_tua 2NF  Nama_Aya Agama_aya Pendidikan_ h h ayah Umar Islam S1

2

Umar

Islam

S1

Tabel 4.8. Tabel alamat_orang_tua 2NF Id_alamat_Orang_tua Alamat Kota

1

Jl. Cemara

Bekasi

2

Jl. Cemara

Bekasi

4.5.4. Perancangan State Tr ansiti on D iagram   (STD)

Program aplikasi web portal ini menggunakan STD untuk membantu dalam pembuatan program.

Berikut ini merupakan gambar STD yang

digunakan : 4.5.4.1.Rancangan STD Menu Utama

Rancangan modul menu berfungsi untuk memanggil sub program lain (modul-modul lain) untuk dijalankan. STD rancangan modul menu dapat digambarkan di bawah ini: 1. State Transition Diagram  (STD) Menu Utama User Klik menu Home Masuk Halaman Home

Menu Utama

Klik menu Home Masuk Halaman Home

Klik menu Why IIUC Masuk Halaman Why IIUC

Klik menu Program Studi Masuk Halaman Program Studi

Klik menu Pendaftaran Masuk Halaman Pendaftaran

Klik menu Fasilitas Masuk Halaman Fasilitas Klik menu Home Masuk Halaman Home

Klik menu Berita Masuk Halaman Berita

Klik menu Tentang Kami Masuk Halaman Tentang Kami

Klik menu Galeri Foto Masuk Halaman Galeri Foto

Klik menu Hubungi Kami Masuk Halaman Hubungi Kami

Menu Home

Menu Why IIUC

Menu Program Studi

Menu Pendaftaran

Menu Fasilitas

Menu Berita

Tentang Kami

Galeri Foto

Menu Hubungi Kami

Keluar 

Gambar 4.30. STD Menu Utama Admin

2. State Transition Diagram  (STD) Menu Utama Admin Klik menu Home Masuk Halaman Home

Menu Utama

Klik menu Home Masuk Halaman Home Klik menu Manajemen Modul Masuk Halaman Manajemen Modul Klik menu Agenda Masuk Halaman Agenda Klik menu Kategori Masuk Halaman Kategori Klik menu Komentar  Masuk Halaman Komentar  Klik menu Partner IIUC Masuk Halaman Partner IIUC Klik menu Download Masuk Halaman Download Klik menu Hubungi Kami Masuk Halaman Hubungi Kami

Klik menu Home Masuk Halaman Home

Klik menu Sekilas Info Masuk Halaman Sekilas Info Klik menu Album Masuk Halaman Album Klik menu Galeri Foto Masuk Halaman Galeri Foto Klik menu Menu Utama Masuk Halaman Menu Utama Klik menu Sub Menu Masuk Halaman Sub Menu Klik menu Halaman Statis Masuk Halaman Halaman Statis Klik menu Validasi Masuk Halaman Validasi

Menu Home

Menu Manajemen Modul

Menu Agenda

Menu Kategori

Menu Komentar 

Menu Partner IIUC

Menu Download

Menu Hubungi Kami

Menu Sekilas Info

MenuAlbum

Menu Galeri Foto

Menu Menu Utama

Menu Sub Menu

Menu Halaman Statis

Menu Validasi

Keluar  Menu Logout

Klik menu Logout Masuk Halaman Logout

Gambar 4.31. STD Menu Utama Admin

3. State Transition Diagram  (STD) Menu Pendaftaran Klik menu Home Masuk Halaman Home

Menu Home

Klik menu Pendaftaran Tampil sub menu Pendaftaran

Klik menu Syarat Pendaftaran  Masuk Halaman Syarat Pendaftaran Klik menu Home Masuk Halaman Home

Menu Pendaftaran

Menu Syarat Pendaftaran

Klik menu Pendaftaran Online Masuk Halaman Pendaftaran Online Menu Pendaftaran Online Klik menu Alur Pendaftaran Masuk Halaman Alur Pendaftaran

Menu Alur Pendaftaran

Keluar 

Gambar 4.32. STD Menu Pendaftaran

4. State Transition Diagram  (STD) Menu Berita Klik menu Home Masuk Halaman Home

Menu Home

Klik menu Berita Masuk Halaman Berita

Klik menu Mahasiswa Masuk Halaman Mahasiswa

Klik menu Teknologi Masuk Halaman Teknologi

Klik menu Home Masuk Halaman Home

Klik menu Ekonomi Masuk Halaman Mahasiswa

Menu Berita

Menu Mahasiswa

Menu Teknologi

Menu Sistem Multimedia

Klik menu Hiburan Masuk Halaman Hiburan Menu Hiburan Klik menu Olah Raga Masuk Halaman Olah Raga Menu Olah Raga Keluar 

Gambar 4.33. STD Menu Berita

5. State Transition Diagram  (STD) Menu Galeri Foto Klik menu Home Masuk Halaman Home

Menu Home

Klik menu Galeri Foto Masuk Halaman Galeri Foto

Menu Galeri Foto

Klik menu album Alumni Masuk Halaman Alumni

Klik menu Home Masuk Halaman Home

Menu Alumni Klik menu Kegiatan Mahasiswa Masuk Halaman Kegiatan Mahasiswa

Menu Kegiatan Mahasiswa

Keluar 

Gambar 4.34. STD Menu Galeri Foto

4.5.4.2. Rancangan STD Masukan User

Rancangan

modul

masukan

dilakukan

agar

tingkatan

keakuratan data tinggi dan proses pemasukan data benar sehingga dapat diterima dan dimengerti oleh pengguna sistem. Ada 2 rancangan modul masukan yang akan didefinisikan  pada User, yaitu Input Pendaftaran dan Input Hubungi Kami. Ada 12 rancangan modul masukan yang didefinisikan pada Admin, yaitu Input Modul, Input Agenda, Input Berita, Input validasi, Input partner IIUC, Input Upload, Input Sekilas Info, Input Album, Input Galeri Foto, Input Menu Utama, Input Sub Menu, Input Halaman Statis. Rancangan masukan tersebut dapat dijelaskan sebagai berikut:

1. State Transition Diagram  (STD) Input Pendaftaran Klik ‘OK’ kembali ke form pendaftaran Klik menu Pendaftaran Masuk Halaman Pendaftaran

Peringatan input salah

Input form klik tombol ‘submit’

Klik menu Pendaftaran Online Menunggu input Form data pendaftaran

Pendaftaran

Klik menu Pendaftaran Masuk Halaman Pendaftaran

Cek validasi

Menampilkan halaman sukses

Keluar  Sukses

Gambar 4.35. STD Input Pendaftaran

2. State Transition Diagram  (STD) Input Hubungi Kami

Klik menu Hubungi Kami Masuk Halaman Hubungi Kami

Klik ‘OK’ kembali ke form hubungi kami

Input form klik tombol ‘submit’

Klik menu Hubungi Kami Menunggu input

Hubungi kami

Klik menu hubungi kami Masuk Halaman hubungi kami

Peringatan input salah

Form data Hubungi Kami

Menampilkan halaman sukses

Keluar  Sukses

Gambar 4.36. STD Input Hubungi Kami

Cek validasi

4.5.4.3.Rancangan STD Masukan pada Admin

1. State Transition Diagram  (STD) Input Login Input not valid memaanngil window alert 

Klik ‘OK’ memanngil display  login

Menampilkan kesalahan input

Menampilkan halaman login

Klik login Memanggil cek Input Klik ‘Ulangi Lagi’  Memanggil display 

Input valid  memanngil authentification

Menampilkan halaman Kesalahan Input

Klik menu/alamat baru Memanggil pengalih

Mengalihkan halaman

Baca dan cek Input Username dan Password

User terdaftar memanggil Pengalih Memeriksa user 

Gambar 4.37. STD Input Login

2. State Transition Diagram (STD) Input Modul Klik menu modul Masuk Halaman modul

Klik ‘Tambah modul’ Menunggu input

modul

Form data modul

Menampilkan halaman sukses

Klik ‘ Simpan’  Memanggil display  Klik ‘ Batal’  Memanggil display  List  Modul

Klik menu modul Masuk Halaman modul

Klik ‘ Hapus’  Memanggil display  Klik ‘Edit’ Menunggu input

Klik ‘Simpan’  Memanggil display  Form Edit

Klik ‘ Batal’  Memanggil display 

Keluar 

Gambar 4.38. STD Input Modul

3. State Transition Diagram  (STD) Input Agenda

Klik menu agenda Masuk Halaman agenda

Klik ‘Tambah agenda’ Menunggu input

agenda

Form data agenda Klik ‘ Simpan’  Menampilkan Memanggil display  halaman sukses

Klik ‘ Batal’  Memanggil display 

List   agenda

Klik menu agenda Masuk Halaman agenda

Klik ‘ Hapus’  Memanggil display  Klik ‘Simpan’  Memanggil display 

Klik ‘Edit’ Menunggu input

Form Edit

Klik ‘ Batal’  Memanggil display 

Keluar 

Gambar 4.39. STD Input Agenda

4. State Transition Diagram  (STD) Input Berita Klik menu berita Masuk Halaman berita

Klik ‘Tambah berita’ Menunggu input

berita

Form data berita

Menampilkan halaman sukses

Klik ‘ Simpan’  Memanggil display  Klik ‘ Batal’  Memanggil display  List  berita

Klik menu berita Masuk Halaman berita

Klik ‘ Hapus’  Memanggil display  Klik ‘Edit berita’ Menunggu input

Klik ‘Simpan’  Memanggil display  Form Edit

Klik ‘ Batal’  Memanggil display 

Keluar 

Gambar 4.40. STD Input Berita

5. State Transition Diagram  (STD) Input Validasi

Klik menu validasi Masuk Halaman validasi

Klik ‘Edit’ Menunggu input Form Edit data Pendaftaran

validasi

Klik menu validasi Masuk Halaman validasi

Klik ‘ Simpan’  Menampilkan Memanggil display  halaman sukses

Klik ‘ Batal’  Memanggil display 

List  validasi Klik ‘ Hapus’  Memanggil display 

Keluar 

Gambar 4.41. STD Input Validasi Pendaftaran

6. State Transition Diagram  (STD) Input Partner IIUC Klik menu partner IIUC Masuk Halaman partner IIUC

Klik ‘Tambah Partner’ Menunggu input Form data partner IIUC

partner IIUC

Klik ‘ Simpan’  Menampilkan Memanggil display  halaman sukses

Klik ‘ Batal’  Memanggil display 

List  partner IIUC

Klik menu partner IIUC Masuk Halaman partner IIUC

Klik ‘ Hapus’  Memanggil display  Klik ‘Edit’ Menunggu input

Klik ‘Simpan’  Memanggil display  Form Edit

Klik ‘ Batal’  Memanggil display 

Keluar 

Gambar 4.42. STD Input Partner IIUC

7. State Transition Diagram  (STD) Input File Upload

Klik menu download Masuk Halaman download

Klik ‘tambah download’ Menunggu input Form data download

download

Menampilkan halaman sukses

Klik ‘ Simpan’  Memanggil display  Klik ‘ Batal’  Memanggil display  List  download

Klik menu download Masuk Halaman download

Klik ‘ Hapus’  Memanggil display  Klik ‘Simpan’  Memanggil display 

Klik ‘edit’ Menunggu input

Form Edit

Klik ‘ Batal’  Memanggil display 

Keluar 

Gambar 4.43. STD Input File Upload

8. State Transition Diagram  (STD) Input Sekilas Info Klik menu sekilas Info Masuk Halaman sekilas Info

Klik ‘ tambah sekilas Info’ Menunggu input Form data sekilas Info

sekilas Info

Menampilkan halaman sukses

Klik ‘ Simpan’  Memanggil display  Klik ‘ Batal’  Memanggil display 

List  sekilas Info Klik menu sekilas Info Masuk Halaman sekilas Info

Klik ‘ Hapus’  Memanggil display  Klik ‘Edit’ Menunggu input

Klik ‘Simpan’  Memanggil display  Form Edit

Keluar 

Gambar 4.44. STD Input Sekilas Info

Klik ‘ Batal’  Memanggil display 

9. State Transition Diagram  (STD) Input Album Klik menu album Masuk Halaman album

Klik ‘Tambah album’ Menunggu input

album

Form data album

Menampilkan halaman sukses

Klik ‘ Simpan’  Memanggil display  Klik ‘ Batal’  Memanggil display  List  album

Klik menu album Masuk Halaman album

Klik ‘Edit’ Menunggu input

Klik ‘Simpan’  Memanggil display  Form Edit

Klik ‘ Batal’  Memanggil display 

Keluar 

Gambar 4.45. STD Input Album

10. State Transition Diagram  (STD) Input Galeri Foto Klik menu galeri foto Masuk Halaman galeri foto

Klik ‘ tambah galeri foto’ Menunggu input Form data galeri foto

galeri foto

Klik ‘ Simpan’  Menampilkan Memanggil display  halaman sukses

Klik ‘ Batal’  Memanggil display 

List  galeri foto Klik menu galeri foto Masuk Halaman galeri foto

Klik ‘ Hapus’  Memanggil display  Klik ‘Edit’ Menunggu input

Klik ‘Simpan’  Memanggil display  Form Edit

Klik ‘ Batal’  Memanggil display 

Keluar 

Gambar 4.46. STD Input Galeri Foto

11. State Transition Diagram  (STD) Input Menu Utama

Klik menu menu utama Masuk Halaman menu utama

Klik ‘Tambah menu utama’ Menunggu input Form data menu utama

menu utama

Klik ‘ Simpan’  Menampilkan Memanggil display  halaman sukses

Klik ‘ Batal’  Memanggil display 

List  menu utama

Klik menu menu utama Masuk Halaman menu utama

Klik ‘Edit’ Menunggu input

Klik ‘Simpan’  Memanggil display  Form Edit

Klik ‘ Batal’  Memanggil display 

Keluar 

Gambar 4.47. STD Input Menu Utama

12. State Transition Diagram  (STD) Input Sub Menu Klik menu sub menu Masuk Halaman sub menu

Klik ‘ tambah sub menu’ Menunggu input Form data sub menu

sub menu

Menampilkan halaman sukses

Klik ‘ Simpan’  Memanggil display  Klik ‘ Batal’  Memanggil display  List  sub menu

Klik menu sub menu Masuk Halaman sub menu

Klik ‘ Hapus’  Memanggil display  Klik ‘Edit’ Menunggu input

Klik ‘Simpan’  Memanggil display  Form Edit

Klik ‘ Batal’  Memanggil display 

Keluar 

Gambar 4.48. STD Input Sub Menu

13. State Transition Diagram  (STD) Input Halaman Statis

Klik menu halaman statis Masuk Halaman halaman statis

Klik ‘ tambah halaman statis’ Menunggu input Form data halaman statis

halaman statis

Klik ‘ Simpan’  Menampilkan Memanggil display  halaman sukses

Klik ‘ Batal’  Memanggil display 

List  halaman statis

Klik menu halaman statis Masuk Halaman halaman statis

Klik ‘ Hapus’  Memanggil display  Klik ‘Edit’ Menunggu input

Klik ‘Simpan’  Memanggil display  Form Edit

Klik ‘ Batal’  Memanggil display 

Keluar 

Gambar 4.49. STD Input Halaman Statis

4.6.

Analisa Keputusan ( Decision A nal ysis  )

Berdasarkan

kebutuhan sistem dan model sistem yang didapatkan pada

tahapan requirements analysis  dan logical design, maka ada beberapa cara untuk memenuhi kebutuhan tersebut, diantaranya: 4.6.1. Sistem yang digunakan

Sistem yang dikembangkan dalam penelitian diantaranya: (1). Sistem untuk pengkasesan info dan berita terbaru yang terjadi di kampus (2). Sistem  pendaftaran secara online (3). Pengaksesan e-learning yang terhubung dengan web portal.

4.6.2. Kepemilikan perangkat lunak

 Dalam proyek Pengembangan Web portal ini dibangun menggunakan CMS Lokomedia yang di kembangkan agar sesuai dengan kebutuhan Web

Portal di STMIK Islam Internasional Jakarta. 4.6.3. Desain Sistem

Desain sistem yang digunakan dalam proyek Web Portal adalah  berbasis web. 4.6.4. Teknologi informasi yang akan dihasilkan dari aplikasi

Teknologi informasi yang akan dihasilkan dari aplikasi adalah suatu Sistem berbasis web yang bernama Web Portal, yang berguna untuk mempercepat proses mendapatkan informasi yang dibutuhkan dalam sebuah institusi perguruan tinggi, dan sebagai penghubung dengan sistem-sistem lain yang pada STMIK Islam Internasional Jakarta sehingga mempermudah  proses perkuliahan di STMIK Islam Internasional Jakarta. 4.6.5. Analisis Kelayakan (  f easibi li ty anali sys) 

Penganalisaan dari kandidat solusi-solusi tersebut sehingga pada akhirnya nanti dapat dipilih suatu solusi yang terbaik untuk mendesain, mengembangkan dan mengimplementasikan suatu sistem yang sesuai dengan yang dibutuhkan. Berbagai kemungkinan alternatif kandidat solusi ini diperoleh dari ide atau pendapat dari  system owner, dalam hal ini STMIK Islam Internasional Jakarta, maupun  system user . Dari berbagai ide dan opini yang yang terima itu, akhirnya dapat disusun daftar kandidat-kandidat solusi tersebut dalam tabel Candidate System Matrix  di bawah ini.

Tabel 4.9. Candidate system matrix

Karakteristik

Kandidat 1

Untuk interface untuk pengembangan digunakan PHP, JQuery,HTML dan CSS. sistem Sedangkan untuk Perangkat lunak yang database menggunakan dibutuhkan dalam mySQL sebagai DBMS merancang dan ( Data Base Management mengembangkan kandidat System) sistem yang bersangkutan, misalnya untuk basis data, sistem operasi, bahasa  pemrograman, dan sebagainya. Server s and Wor kstation s  Hosting di sebuah tempat Deskripsi dari server dan di internet  dengan jumlah quota yang cukup besar. workstation yang dibutuhkan untuk mendukung kandidat yang  bersangkutan. Software yang digunakan

Kandidat 2

Untuk server  menggunakan MS Windows Server 2003 apache web serve dan , Oracle sebagai DBMS

Deskripisi singkat mengenai keuntungan yang akan direalisasikan untuk kandidat yang  bersangkutan.

IBM Server, memory 2 GB dan 2 buah  Hardisk SCSI 80 GB dan monitor 15” (Server), Pentium 4, memory 128 MB dan  Hardisk  ATA 40 GB Solusi ini dapat Solusi ini dapat lebih diimplementasikan relatif terjamin lebih cepat karena sistem keamanannya , ini cukup sederhana, server dikendalikan harga lebih murah dan  penuh oleh admin dapat memenuhi dapat memenuhi kebutuhan user . kebutuhan user 

Out put D evices and Implications

Printer standard dan dot Matrix.

Sama Kandidat 1.

 Keyboard dan mouse

Sama seperti Kandidat 1.

Keuntungan

Deskripsi dari peralatan yang akan digunakan oleh user untuk menghasilkan keluaran dari sistem, sesuai dengan kebutuhan yang ada. I npu t D evices and Implications

Deskripsi dari peralatan yang akan digunakan oleh

seperti

user  untuk memberi masukan ke sistem.

Tersedia pada server Pada server milik tempat hosting . Dengan sendiri, yaitu sebuah minimum quota yang  Hardisk SCSI 250 dibutuhkan sebesar 1 GB GB. Dengan menggunakan sistem  RAID 0

Storage Devices and Implications

Deskripsi singkat mengenai data yang akan disimpan dan diakses, media penyimpan yang akan digunakan, besar kapasitas untuk  penyimpanan data, dan  bagaimana penyimpanan data tersebut dapat terorganisir dengan baik.

yang  Penerimaan Mahasiswa  Baru secara Online, Sistem Informasi Pemilihan bagian yang  Akademik, E-Learning, akhirnya dikomputerisasi Sistem Informasi oleh pengembangan  Keuangan system Bagian terkomputerisasi

Teknologi data

pemrosesan

Pengaksesan data lewat Internet

Sama seperti kandidat 1

Pengaksesan data lewat LAN

Sarana yang dipakai untuk  pemrosesan data

Analisis kelayakan terdiri dari 5 analisis kelayakan, yaitu: (1) Kelayakan teknis, (2) Kelayakan operasional, (3) Kelayakan ekonomi, (4) Kelayakan jadwal, dan (5) Kelayakan resiko. Penjelasan kelima analisis kelayakan ini terperinci pada

Kriteria Kelayakan Kelayakan operasional yaitu  berhubungan dengan

Tabel 4.10. Feasibility analysis matrix Bobot Kandidat 1 Kandidat 2

25 %

Memenuhi kebutuhanMemenuhi user’s kebutuhan fungsional requirement secara utama user STMIK Islam  penuh, seperti Update Internasional Jakarta,  Berita terbaru, seperti , Berita terbaru  Penerimaan

manfaat sistem terhadap  pengguna

25 % Kelayakan teknis  yaitu solusi teknis menyangkut masalah kemampuan atau keahlian teknis staf untuk merancang dan membangun sistem.

25 % Kelayakan ekonomi yaitu biaya yang dikeluarkan untuk membangun sistem.

 Kampus, Agenda  Kegiatan Kampus,  Penerimaan Mahasiswa  Baru secara Online, Terhubung dengan E Learning dan SIMAK.

 Mahasiswa Baru  secara Online, Terhubung dengan E Learning dan SIMAK serta Kendali penuh Terhadap pengawasan serta kamanan server .

Nilai: 90

Nilai: 95

yang - Software yang - Software  digunakan hanya sebuah digunakan memang dikenal sangat  software editor  untuk menulis bahasa tangguh, namun harga  pemrograman yang akan untuk membeli sebuah digunakan dan software-  software tersebut nya pun yang bersifat sangat mahal. gratis. - Bahasa pemrogram yang digunakan merupakan  bahasa yang tergolong umum digunakan dan mudah, yaitu PHP, HTML, JQuery dan CSS, serta SQL

Nilai: 90

Nilai: 50

- Sekitar $ 3,550

- Sekitar $ 12,380

- Meningkatkan efisiensi - Meningkatkan efisiensi waktu, waktu, meningkatkan meningkatkan kinerja STMIK Islam kinerja STMIK Islam Internasional Jakarta Internasional Jakarta dan mengurangi dan menngurangi terjadinya kesalahan terjadinya kesalahan (error ). (error ) dan - Meningkatkan meningkatkan kredibilitas STMIK  pengontrolan Islam Internasional terhadap aset Jakarta sehingga mencegah terjadinya kehilangan

aset.

Nilai: 80

10% Kelayakan  jadwal  yaitu waktu yang dihabiskan untuk merancang dan membangun system 15 % Kelayakan risiko  yaitu kemungkinan sebuah implementasi  berhasil atau tidak dalam  penggunaan teknologi dan metodologi.

Nilai total

100%

- 6 bulan

Nilai : 90

- Meningkatkan kredibilitas STMIK Islam Internasional Jakarta dan mengontrol keberadaan dan  penggunaan aset yang dimiliki.

Nilai: 60 - 6 sampai 7 bulan

Nilai : 85

- Keamanannya rentan - Keamanannya lebih karena diakses melalui terjamin karena internet diakses melalui LAN - Implementasi dan - Implementasi dan Akses data lebih Akses data lebih lambat akan tetapi relative lebih mudah  jangkauan lebih luas dan cepat dapat diakses dimana saja. Nilai:90

Nilai:90

87.75

73

Catatan:

Untuk mencari yang terbaik maka perlu dilihat Nilai Total. Adapun dari hasil total penilaian dari  feasibility analysis (Nilai Total) ini diperoleh kesimpulan bahwa kandidat 1 lebih baik daripada kandidat 2. Walaupun pada

dasarnya kandidat solusi 1 tidak terlalu jauh berbeda dengan kandidat 2 (kandidat 2 hanya jangkauan aksesnya saja yang berbeda), tetapi nilai total keduanya berbeda cukup siginifikan. Kandidat 1 dengan nilai total 87,75 memiliki nilai overall kombinasi dari teknis, ekonomi dan penjadwalan yang lebih baik daripada kandidat 2 yang hanya mempunyai nilai total 73. Hal ini terutama disebabkan karena adanya keunggulan mutlak dalam teknologi atau teknis yang ditawarkan kandidat 1 terhadap sistem ini dimana kandidat 1 menawarkan teknologi  software  yang gratis dan juga mudah digunakan sedangkan kandidat 2

membutuhkan perangkat lunak yang mahal. Bobot dari tiap kriteria  feasibility  diatas tentukan berdasarkan hasil observasi yang dilakukan oleh  system analyst   yang bekerja bersama-sama dengan system designers dan system builder untuk hal-hal yang bersifat teknis serta dengan  system user dan  system owner untuk hal rekomendasi akhir. Sehingga pada akhirnya

menetapkan bobot dari masing-masing kriteria

 feasiblity diatas sebagai berikut, yaitu operational feasibility (25%), technical  feasibility (25%), economic feasibility (25%),  schedule feasibility (10%) ,  , risk  feasibility (15%).

Adapun alasan

menetapkan bobot bobot yang yang sama sebesar 25% pada

o perational feasibility , technical feasibility, dan economic feasibility dikarenakan ketiganya sama-sama penting dan critical dalam pembandingan kedua kandidat solusi. Sedangkan untuk  schedule feasibiilty  hanya menetapkan bobot sebesar 10% karena kedua kandidat solusi diatas

mempunyai lama waktu pengembangan yang tidak jauh berbeda, yakni sekitar 6-7 bulan dan  risk feasibility hanya menetapkan bobot sebesar 15% dikarenakan faktor bisa ditanggulangi.

4.7.

 (Desain Fisik dan Integrasi)  (Desain Physical Physical D esi gn and I ntegrati on  4.7.1. Spesifikasi Spesifikasi Database

Adapun spesifikasi data dari database  yang dirancang adalah sebagai  berikut :  Nama database : db_iiuc Berikut ini adalah tabel yang terdapat di database ini : a. Tabel Agenda  Nama Tabel : agenda  Primary Key  Primary Key : id_agenda

Tabel 4.11.  Tabel Agenda

 b. Tabel Berita  Nama Tabel : berita  Primary Key  Primary Key : id_berita  Foreign Key : id_kategori Tabel. 4.12.  Tabel Berita

c. Tabel Kategori

 Nama Tabel : kategori kategor i  Primary Key  Primary Key : id_kategori Tabel. 4.13. Tabel Kategori

d. Tabel Album  Nama Tabel : album  Primary Key  Primary Key : id_agenda Tabel. 4.14.  Tabel Album

e. Tabel Gallery  Nama Tabel : gallery  Primary Key  Primary Key : id_gallery Tabel. 4.15.  Tabel Gallery

f.

Tabel Banner  Nama Tabel : banner  Primary Key  Primary Key : id_banner Tabel. 4.16. Tabel Banner

g. Tabel Download  Nama Tabel : download  Primary Key  Primary Key : id_download

Tabel. 4.17. Tabel Download

h. Tabel Menu Utama  Nama Tabel : mainmenu  Primary Key : id_main Tabel 4.18. Tabel Main Menu / Menu Utama

i.

Tabel Sub menu  Nama Tabel : submenu  Primary Key : id_sub

Tabel 4.19.  Tabel Sub Menu

 j.

Tabel Halaman Statis

 Nama Tabel : halamanstatis  Primary Key : id_halaman Tabel. 4.20.  Tabel Halaman Statis

k. Tabel Hubungi  Nama Tabel : hubungi  Primary Key : id_hubungi

Tabel. 4.21. Tabel Hubungi

l.

Tabel Komentar  Nama Tabel : komentar  Primary Key : id_komentar Tabel 4.22. Tabel Komentar

m. Tabel Modul  Nama Tabel : modul  Primary Key : id_modul

Tabel 4.23.  Tabel Modul

n. Tabel Sekilas Info  Nama Tabel : sekilasinfo  Primary Key : id_sekilas Tabel 4.24.  Tabel Sekilas Info

o. Tabel User  Nama Tabel : user  Primary Key : id_sub  Foreign Key : id_status_user

Tabel 4.25.  Tabel User

 p. Tabel Status User  Nama Tabel : status_user  Primary Key : id_status_user Tabel 4.26.  Tabel Status User

q. Tabel Data Pribadi

 Nama Tabel : data_pribadi  Primary Key : id_data_pribadi

Tabel 4.27.  Tabel Data Pribadi

r.

Tabel Pilihan Program  Nama Tabel : pilihan_program

 Primary Key : id_pilihan_program  Foreign Key : id_data_pribadi Tabel 4.28.  Tabel Pilihan Program

s.

Tabel Asal Sekolah  Nama Tabel : asal_sekolah  Primary Key : id_asal_sekolah  Foreign Key : id_data_pribadi Tabel 4.29.  Tabel Asal Sekolah

t.

Tabel Data Orang Tua  Nama Tabel : data_orang_tua  Primary Key : id_data_orang_tua  Foreign Key : id_data_pribadi

Tabel 4.30. Tabel Data Orang Tua

u. Tabel alamat Orang Tua  Nama Tabel : alamat_orang_tua  Primary Key : id_alamat_orang_tua  Foreign Key : id_data_pribadi

Tabel 4.31.  Tabel Alamat Orang Tua

4.7.2. Perancangan Layar Antarmuka ( Interface  )

Perancangan antarmuka ( Interface) dibuat agar user dapat dengan mudah mengoperasikan dan mengerti bagaimana sistem dapat digunakan. 4.7.2.1.

Rancangan Interface Halaman User

Pada halaman user terdapat beberapa halaman yang dapat digunakan oleh user, antara lain :

1. Home : Halaman ini sebagai halaman utama User.

Header Search Home

Why

Program

Fasilitas

Pendafta

Fasilita

Berita

Profil

Headline News

Short Search Terpop

Terk 

Sebelu

Kome

Online Chating

 News Tab

Link Partner

Iklan Iklan

Contact

Sekilas Info Akademik

Kemahasi

Agenda Kegiata

Gallery

 News

Layar Halaman Home User Gambar 4.50. Rancangan Footer 1. Program Studi Header Home

Why STMI

Gambar Gambar

Program Studi

Pendaftaran

Fasilitas

Search Form Berita

Profile

Konten Konten Program Program Studi Studi IIUC IIUC Jakarta Jakarta

Gallery

Contact Us

Sekilas Info Akademik Link Partner

Footer

Gambar 4.51. Rancangan Layar Halaman Program Studi

2. Pendaftaran dan Konfirmasi

Header Search Why

Home

STMIK

Program Studi

Pendaftaran

Fasilitas

Berita

Profile

Isi Halaman Pendaftaran dan konfirmasi

Gallery

Contact Us

Sekilas Info Akademik

Link Partner

Footer

Gambar 4.52. Rancangan Layar Halaman Pendaftaran

3. Berita

Hea Search Ho

Why

Pro ram

Pendaft

Fasi

Be

Pro

Gall

Contac

Kate ori

Berita 1

Sekilas Info Akademik

Berita 2

Link Partner

Tan al

Berita 3 Foot

Gambar 4.53. Rancangan Layar Halaman Berita

4. Profil Header Search Home

Why

Pro ram

Pendafta Pendafta

Fasilita

Berita

Profil

Konten Profil STMIK Islam Internasional

Galle Gallerr

Contac Contactt

Sekilas Info Akademik

Link Partner

Footer Gambar 4.54. Rancangan Layar Halaman Profil

5. Galeri Foto Hea Search Ho

Why

Album 1

Pro ram

Pendaf Pendaftt

Album 2

Fasi

Be

Album 3

Pro

Gall

Conta

Sekilas Info Akademik

Link Partner

Album 4

Album 5

Album 6

Foot Gambar 4.55. Rancangan Layar Halaman Galeri Foto

6. Hubungi Kami

Header 

Home

Why IIUC

Program Studi

Pendaftaran

Search Form

Fasilitas

Berita

Profil

Kontak 1

Galeri

Hubungi Kami

Info Akademik

Kontak 2 Partner  Form Hubungi Kami

Footer 

Gambar 4.56. Rancangan Layar Halaman Hubungi Kami 4.7.2.2. Rancangan Interface Interface Halaman Admin

Pada halaman Admin terdapat beberapa komponen, antara lain : 1. Home : Halaman ini sebagai halaman utama admin, terdapat  pada gambar 4.57. Header Welcome Message

Control Panel Menu Kiri

Manaje men User

Manaje men Modul

Berita

Komen tar

Icon menu Downloa d

Icon menu Agenda

Icon menu Banner

Icon menu Galeri

Icon menu Hubung

Icon menu Logout

Footer Gambar 4.57. Rancangan Layar Halaman Home Admin

2. Manajemen Modul : Komponen ini berfungsi untuk menambah modul dan mengatur status modul. Header

Tambah Menu

 Nama

Link

Pub

Akti

Stat

Aksi Edit Hapus

Footer Gambar 4.58. Rancangan Layar Halaman Modul

3. Agenda : komponen ini berfungsi untuk

menambah agenda,

mengedit agenda, dan menghapus agenda yang akan dilakukan di STMIK Islam Internasional Jakarta. Header

Tambah Menu

Tema

Tgl

Tgl

Aksi Edit

Hapus

Footer Gambar 4.59. Rancangan Layar Halaman Agenda

4. Berita : Komponen ini berfungsi untuk menambah berita, mengupdate berita, dan menghapus berita. Header

Tambah Menu

Judul

Tgl

Aksi Edit

Hapus

Footer

Gambar 4.60. Rancangan Layar Halaman Berita

5. Komentar

:

Komponen

ini

berfungsi

untuk

mengedit,

menghapus, dan mengatur status komentar. Header

 Nama

Komentar

Akti

Aksi Edit Hapus

Menu

Footer Gambar 4.61. Rancangan Layar Halaman Komentar

6. Partner IIUC : Komponen ini berfungsi untuk menambah  banner, mengedit, dan menghapus banner. Header

Tambah Menu

Judul

URL

Aksi

Tgl

Edit Hapus

Footer Gambar 4.62. Rancangan Layar Halaman Partner IIUC

7. Download

:

Komponen

ini

berfungsi

untuk

menambah

download, mengedit, dan menghapus download. Header

Tambah Menu

Judul

 Nama File

Tgl

Aksi Edit Hapus

Footer Gambar 4.63. Rancangan Layar Halaman Download

8. Hubungi Kami : Komponen ini berfungsi untuk menjawab  pertanyaan atau keperluan user yang telah menghubungi STMIK Islam Internasional Jakarta. Header

Menu

 Nama

Email

Subjek

Tang

Aksi Edit Hapus

Footer

Gambar 4.64. Rancangan Layar Halaman Hubungi Kami

9. Sekilas Info : Komponen ini berfungsi untuk menambah info, mengedit, dan menghapus sekilas info. Header

Tambah Info Menu

Info

Aksi

Tgl Edit

Hapus

Footer Gambar 4.65. Rancangan Layar Halaman Sekilas Info

10. Album : Komponen ini berfungsi untuk menambah album dan mengedit album. Header

Tambah Menu

Judul

Aksi Edit

Hapus

Footer Gambar 4.66. Rancangan Layar Halaman Album

11. Galeri Foto : Komponen ini berfungsi untuk menambah foto dan memasukkan kedalam kategori album. Serta untuk mengedit dan menghapus galeri foto. Header

Tambah Menu

Judul

Album

Aksi Edit

Hapus

Footer

Gambar 4.67. Rancangan Layar Halaman Galeri Foto

12. Menu Utama : Komponen ini berfungsi untuk menambah menu utama yang terdapat di halaman user. Mengedit dan mengatur status menu utama. Header

Tambah Menu Menu

Menu

Link

Aktif

Aksi Edit Hapus

Footer Gambar 4.68. Rancangan Layar Halaman Menu Utama

13. Validasi : Komponen ini berfungsi untuk memvalidasi peserta  pendaftaran, mengedit, dan menghapus peserta. Header

Menu

 No. Ujian

 Nama

Validasi

Aksi Edit

Hapus

Cetak

Kirim

Footer

Gambar 4.69. Rancangan Layar Halaman Validasi

14. Halaman Statis : Komponen ini berfungsi untuk menambah halaman statis di halaman user, mengedit dan menghapus halaman statis. Header

Tambah Halaman Menu

Judul

Aksi

Tgl Edit

Hapus

Footer

Gambar 4.70. Rancangan Layar Halaman Statis

4.8. Constr ucti on and Testi ng   (Konstruksi dan Pengujian) 4.8.1. Konstruksi Perangkat Lunak

 Blueprint   (cetak biru) sistem yang telah dimodelkan dan dirancang

sebelumnya dieksekusi menjadi sebuah set kode program dengan menggunakan bahasa pemograman PHP 5 guna mengimplementasikan sistem informasi manajemen surat keputusan. Sejumlah tools  digunakan untuk mengembangkan perangkat lunak sistem informasi manajemen surat keputusan. Pada tabel berikut ditunjukkan daftar tools yang digunakan dalam pengembangan.

Tabel 4.32 Daftar Tools Pengembangan Perangkat Lunak Sistem

 No.

Tools

Kegunaan

1

Microsoft Visio

Mendesain diagram-diagram DFD, STD

2

DBDesigner 4

3

PHP 5

4

MySQL

Menggambarkan database schema aplikasi Bahasa pemograman untuk mengembangkan aplikasi sistem informasi manajeman Surat Keputusan Database yang digunakan dalam sistem

5

XAMPP Apache HTTP Server PHP MyAdmin

6 7

Mozilla Firefox 3.5

Web Server Perangkat untuk mengakses database yang terdapat pada XAMPP Apache Web Browser

4.8.2. Hardware

Perangkat keras yang dibutuhkan aplikasi ini agar dapat dijalankan adalah sebagai berikut: 1. Sebuah

komputer

yang

digunakan

aplikasi

Web

Spesifikasi minimum komputer yang disarankan adalah: a.  Processor  dengan kecepatan 1 GHz  b. RAM 128 MB c. Monitor Super VGA minimum 15” d.  Harddisk  20 GB e.  Keyboard f.  Mouse g. Modem / Jaringan Internet

Portal.

2.8.3

Pengujian Mandiri

Pada tahap ini, penulis melakukan uji coba terhadap sistem yang telah dikembangkan dengan hasil sebagai berikut dengan bukti dapat dilihat pada lampiran B : Tabel 4.33.  Hasil pengujian mandiri halaman Admin

1. Administrator

 No. Modul

Prasyarat

Hasil yang Diharapkan

1.

Tambah Agenda

2.

Edit agenda

Admin dapat menambah data agenda kegiatan Admin dapat mengubah data agenda

3.

Hapus agenda

4. 5.

Tambah  berita Edit berita

6.

Hapus berita

7.

Tambah  partner Edit partner

Login sebagai admin, data sudah ada dalam database Login sebagai admin, data sudah ada dalam database Login sebagai admin, data sudah ada dalam database Login sebagai admin Login sebagai admin, data sudah ada dalam database Login sebagai admin, data sudah ada dalam database Login sebagai admin Login sebagai admin, data sudah ada dalam database Login sebagai admin, data sudah ada dalam database

8.

9.

Hapus  partner

10.

Tambah download Edit download

11.

Login sebagai admin Login sebagai admin, data sudah ada dalam database

Hasil Uji Coba OK Gbr (1) OK Gbr (2)

Admin dapat menghapus data agenda Admin dapat menambah berita Admin dapat mengubah data tentang  berita Admin dapat menghapus data berita

OK Gbr (3)

Admin dapat menambah partner Admin dapat mengubah data tentang  partner Admin dapat menghapus data  partner

OK Gbr (7) OK Gbr (8)

Admin dapat menambah download Admin dapat mengubah data download

OK Gbr (10) OK Gbr (11)

OK Gbr (4) OK Gbr (5) OK Gbr (6)

OK Gbr (9)

12.

Hapus download

Login sebagai admin, data sudah ada dalam database

Admin dapat menghapus data download

OK Gbr (12)

13.

Tambah Sekilas info Edit Sekilas info

Login sebagai admin Login sebagai admin, data sudah ada dalam database Login sebagai admin, data sudah ada dalam database Login sebagai admin Login sebagai admin, data sudah ada dalam database Login sebagai admin Login sebagai admin, data sudah ada dalam database Login sebagai admin, data sudah ada dalam database

Admin dapat menambah sekilas info Admin dapat mengubah sekilas info

OK Gbr (13) OK Gbr (14)

14.

15.

Hapus Sekilas info

16.

Tambah album Edit album

17.

18. 19.

Tambah galeri foto Edit galeri foto

Admin dapat OK menghapus sekilas info Gbr (15) Menambah album Admin dapat mengganti ataupun menonaktifkan album Menambah galeri foto Admin dapat menambah, mengganti data galeri foto Admin dapat menghapus data galeri foto yang tidak digunakan Menambah menu utama Admin dapat mengganti ataupun menonaktifkan menu utama Menambah sub menu

20.

Hapus galeri foto

21.

Tambah menu utama Edit menu utama

Login sebagai admin Login sebagai admin, data sudah ada dalam database

Tambah sub menu Edit sub menu

Login sebagai admin Login sebagai admin, data sudah ada dalam database

25.

Hapus sub menu

26.

Tambah halaman statis Edit halaman

Login sebagai admin, data sudah ada dalam database Login sebagai admin

Admin dapat menambah ataupun mengganti data sub menu Admin dapat menghapus data sub menu yang salah Menambah halaman statis

Login sebagai admin, data sudah

Admin dapat menambah ataupun

22.

23. 24.

27.

OK Gbr (16) OK Gbr (17) OK Gbr (18) OK Gbr (19) OK Gbr (20)

OK Gbr (21) OK Gbr (22)

OK Gbr (23) OK Gbr (24)

OK Gbr (25) OK Gbr (26) OK Gbr (27)

statis

ada dalam database

28.

Hapus halaman statis

Login sebagai admin, data sudah ada dalam database

29.

Tambah validasi Edit validasi

Login sebagai admin Login sebagai admin, data sudah ada dalam database

31.

Hapus validasi

32.

Cetak Kartu

33.

Kirim Email

34.

Cek Konfirmasi  pembayaran

Login sebagai admin, data sudah ada dalam database Login sebagai admin, data sudah ada dalam database Login sebagai admin, data sudah ada dalam database Login sebagai admin, data sudah ada dalam database

35.

Aktivasi Username & Password

Login sebagai admin, data sudah ada dalam database

30.

mengganti data halaman statis Admin dapat menghapus data halaman statis yang salah Menambah validasi Admin dapat menambah ataupun mengganti data validasi Admin dapat menghapus data validasi yang salah Admin dapat mencetak kartu pendaftaran Admin dapat mengirim Kartu Pendaftaran ke email calon mahasiswa Admin dapat mengecek data calon mahasiswa yang melakukan konfirmasi  pembayaran Admin dapat melakukan aktivasi username & password calon mahasiswa

OK Gbr (28)

OK Gbr (29) OK Gbr (30)

OK Gbr (31) OK Gbr (32) OK Gbr (33) OK Gbr (34)

OK Gbr (35)

Tabel 4.34. Hasil pengujian mandiri halaman User

2. User .

Modul an Home

Prasyarat

taran Online

sil yang Diharapkan dapat menampilkan halaman utama Web Portal elakukan pendaftaran

Uji Coba OK User (1)

OK User (2) lir Mengisi Formulir OK Pendaftaran  pendaftaran User (3) onfirmasi melakukan melakukan konfirmasi OK  pembayaran  pembayaran User (4) Cetak Kartu me & password elakukan login OK sudah aktif User (5) an Cetak lah login encetak kartu ujian OK Kartu User (6)

4.8.4. Acceptance T esti ng   (Pengujian Penerimaan)

Pengujian penerimaan sistem dilakukan oleh Ketua STMIK Islam Internasional Jakarta yaitu Bapak Taufik Guntur dan staff

manager

akademik yaitu Saudari Shinta Mardhotillah, pada tanggal 26 Juli 2011 Pukul 10.00 WIB. Pengujian dilakukan dengan menggunakan metode  blackbox testing. Bukti terlampir uji coba yang dilakukan dapat dilihat  pada bagian lampiran. Secara ringkas, hasil pengujian yang dapat penulis simpulkan adalah sebagai berikut dengan bukti dapat dilihat pada lampiran D: Tabel 4.35 Pengujian Penerimaan Sistem No

1.

Pengujian

Fitur aplikasi secara keseluruhan

Penilaian

Baik

2.

Fitur untuk admin

Baik

3.

Fitur untuk User

Baik

4.

Fitur untuk Menu Admin

Baik

5.

Fitur untuk Menu User

Baik

6.

Fitur untuk pendaftaran Online 

Baik

5.

Tampilan aplikasi

Baik

6.

Kestabilan aplikasi

Baik

7.

Keamanan aplikasi

Baik

8.

Kesesuaian dengan kebutuhan

Baik

9.

Kemudahan penggunaan aplikasi

Baik

4.9. I nstalasi dan Deli ver y (Instalasi dan Pengiriman)

Berikut ini adalah langkah instalasi pada hosting website di Cpanel Idwebhost :

4.8.1. Login CPanel

Untuk login ke panel kontrol, pertama kunjungi alamat URL berikut di browser: http://iiuc.ac.id

Gambar 4.71. Halaman login cpanel iiuc.ac.id (Sumber: http://iiuc.ac.id/cpanel)

Ketika domain belum aktif, expired, atau sedang bermasalah, maka

bisa

menggunakan:

http://IP_Server/Cpanel.

Di

mana IP_server   adalah alamat IP server tempat account iiuc.ac.id yaitu Server IP address: 174.120.70.134. Jika mengalami kesulitan : http://IP_server/spanel/spanel.cgi?https=0

Gambar 4.72. Halaman Awal Cpanel iiuc.ac.id

(Sumber:  http://iiuc.ac.id:2082/cpsess5277297524)

1.

Upload File

Dalam Upload file ke Cpanel yaitu

dengan

FTP ( file transfer

 protocol .FTP.FTP adalah protokol yang sejak lama digunakan untuk mengupload atau mendownload file lewat Internet. 1. FileZilla

Salah satu software FTP yaitu FileZilla. FileZilla adalah  program FTP client gratis yang tersedia di Windows dan Linux. 1. Buka FileZilla 2. Klik File -> Site Manager maka akan muncul window Site Manager seperti pada Gambar di bawah ini. 3. Klik Button New Site, kemudian rename My FTP Sites dengan nama domain Anda, misalkan menjadi mysite.com kemudian

klik button Advanced. Pilih radio button Use passive mode untuk Passive transfer mode settings. Untuk Default remote directory silakan isikan /sites/mysite.com/www/. Maka akan seperti Gambar di bawah ini 4. Isikan mysite.com untuk Host, FTP untuk Servertype. Pada Logontype, pilih Normal. Masukkan unixuser Anda dan Password kemudian klik button Connect. Hasilnya akan seperti  pada Gambar di bawah ini. 5. Isikan password tersebut dengan password hosting anda. Setelah itu, maka account anda akan terbuka seprti di bawah ini. 6. Bagian kiri adalah Local Site, yaitu letak file sebelum diupload (berada di PC anda), di kanan adalah Remote Site, yaitu letak folder tempat file akan anda upload. Anda bisa drang and drop file yang mau diupload dari Local Site ke folder yang tepat di remote Site. 4.8.2. Control Panel

Selain menggunakan tools atau software FTP uplode file ke webhosting bisa dilakukan dengan file manager. Cpanel Masuk ke File Manaer, lalu berpindah ke folder yang diinginkan, lalu gunakan pilihan Upload File atau tekan link Upload File untuk ke halaman upload (dapat mengupload lebih banyak file, 10 secara sekaligus). 1. Klik menu File manager

Gambar 4.73. Menu File Manager (Sumber :http://iiuc.ac.id:2082/cpsess5277297524) 2. Pilih Directory File Domain iiuc.ac.id berada

Gambar 4.74. Pilih Direktori file Cpanel iiuc.ac.id (Sumber:  http://iiuc.ac.id:2082/cpsess5277297524)

3. Klik menu Upload

Gambar 4.75. Menu Upload file manager Cpanel iiuc.ac.id (Sumber: http://iiuc.ac.id:2082/cpsess5277297524)

4.8.3. Membuat Database Mysql

Setelah upload file web portal STMIK Islam internasional seluruhnya maka langkah selanjutnya adalah konfigurasi database Mysqlnya yaitu dengan mengklik menu Mysql databases selanjutnya Mysql.

1. Klik Menu Mysql Database

Gambar 4.76. Menu Mysql Database Cpanel iiuc.ac.id

(Sumber: http://iiuc.ac.id:2082/cpsess5277297524)

2. Masukkan nama database lalu klik tombol create database

Gambar 4.77. Memasukkan Database portal di Cpanel (Sumber: http://iiuc.ac.id:2082/cpsess5277297524) 3. Buat user untuk data base

Gambar 4.78. Membuat user untuk Database Portal di Cpanel (Sumber: http://iiuc.ac.id:2082/cpsess5277297524)

4.

Pilih user untuk database yang sudah dibuat

Gambar 4.79. Memilih User untuk Database di Cpanel (Sumber: http://iiuc.ac.id:2082/cpsess5277297524)

5. Data user dan databse yang telah dibuat

Gambar 4.80. Tampilan Data Database dan Users di Cpanel iiuc.ac.id (Sumber: http://iiuc.ac.id:2082/cpsess5277297524) 6. Klik menu PhpMydmin

Gambar 4.81. Menu PhpMyadmin di Cpanel iiuc.ac.id (Sumber: http://iiuc.ac.id:2082/cpsess5277297524l) 7. Akun masuk ke halaman PhpMyadmin Cpanel

Gambar 4.82. PhpMyadmin di Cpanel iiuc.ac.id (Sumber :http://iiuc.ac.id:2082/cpsess5277297524)

4.8.4. Konfigurasi Koneksi Database Mysql

Langkah terakhir yaitu Konfigurasi Koneksi database mysql dengan menyesuaikan nama username,password dan nama databasenya dengan yang ada di Cpanel pada file connectdb.php
?>

Instalasi Berhasil

Gambar 4.83. Web Portal STMIK Islam Internasional Jakarta (Sumber: iiuc.ac.id)

BAB V KESIMPULAN DAN SARAN

Setelah melakukan serangkaian penelitian, maka pada bab ini penulis akan menguraikan kesimpulan dan saran yang dapat diambil dari rangkaian penelitian tersebut. Saran yang diberikan diharapkan dapat bermanfaat bagi pihak-pihak yang akan melanjutkan pengembangan penelitian ini. 5.1.

Kesimpulan

Dari penelitian dan penulis yang telah penulis uraikan, maka dapat ditarik kesimpulan sebagai berikut: 1. Dengan adanya Sistem Web Portal IIUC yang penulis kembangkan dapat mempermudah mahasiswa mendapatkan data-data yang lengkap yang dibutuhkan mengenai seputar kampus IIUC melalui web portal seperti informasi pendaftaran, info akademik, berita seputar kampus, dan agenda kegiatan,

dapat

dilihat

pada

lampiran

pengujian

mandiri

(gambar(1),gambar (4),gambar(13)) dan penerimaan sistem (point 5,8, dan 17). 2. Dengan

adanya

kelangsungan

Sistem

dalam

Web

proses

Portal belajar

IIUC

dapat

mengajar

di

mempermudah STMIK

Islam

Internasional yakni dengan melalui link   ke sistem e-learning dari Web Portal IIUC, dapat dilihat pada lampiran pengujian mandiri (Gambar user 1).

3. Dengan adanya Sistem Web Portal IIUC dapat di ketahui bagaimana membangun dan mengimplementasikan sebuah sistem web berbasis JQuery yang lebih user friendly, yaitu diantaranya aplikasi berita, info akademik, galeri foto dan pendaftaran online, dapat dilihat pada lampiran  pengujian mandiri (Gambar user 1, 4, dan 8). 4. Dengan adanya Sistem Pendaftaran Online yang penulis kembangkan calon mahasiswa dapat melakukan pendaftaran secara online dengan cepat dan mudah, dapat dilihat pada lampiran pengujian mandiri (Gambar user 2,3,4,5, dan 6). 5. Sistem yang semakin User Friendly dan mudah digunakan, dapat membantu kerja Administrator, Staff dan Mahasiswa STMIK Islam Internasional Jakarta dalam melakukan pengelolaan web portal, dapat dilihat pada lampiran penerimaan sistem.

5.2.

Saran

Sistem ini tentu saja masih belum sempurna. Masih banyak hal yang dapat dilakukan untuk mengembangkan sistem ini agar menjadi lebih baik lagi, antara lain: 1. Diharapkan pengembangan tidak hanya sebatas sistem web portal saja akan tetapi sistem web portal dapat diintegrasikan dengan sistem-sistem yang lain. 2. Diharapkan sistem dibuat satu buah sistem login yang dapat mengakses ke semua sistem yang ada.

DAFTAR PUSTAKA

Astamal, Rio. 2006.  Menjadi Web Master dalam 30 Hari . [Online] Tersedia: www.rahasia-webmaster.com. [15 Mei 2010] Aswandi.

2006.

 Aplikasi

Berbasis

Web.

[Online]

Tersedia:

http://aswandi.or.id/2006/01/20/aplikasi-berbasis-web. [10 April 2010] Duwiyanto. 2010.  Rancang Bangun Portal Informasi Kabupaten Bangka Barat Sebagai Alternatif Media Periklanan . Skripsi Tidak Diterbitkan.

Hakim, Lukmanul. 2009. Trik Rahasia Master PHP Terbongkar Lagi . Yogyakarta: Lokomedia. Hariyanto, Bambang. 2004. Sistem Manajemen Basis Data : Pemodelan,  Perancangan, dan Terapannya . Bandung : Informatika.

Jogianto, HM. 2005. Analisis dan Desain Sistem I nformasi : Pendekatan Terstruktur Teori dan Praktek Aplikasi Bisnis . Yogyakarta: Andi.

Juju, Dominikus. 2007. Buku Latihan Dreamweaver CS3 . Jakarta: PT. Elex Media Komputindo. Kadir, Abdul. 2003. Pengenalan Sistem Informasi. Yogyakarta: Andi. Kendall, Kenneth E. dan Kendall, Julie E. 2003.  Analisis dan Perancangan Sistem . Jakarta : Pearson Education Asia Pte. Ltd dan PT. Prenhallindo. Ladjamudin, Albahra. 2005.  Analisis dan Desain Sistem Informasi . Yogyakarta Graha Ilmu. Limar, Janus. 2010. Perencanaan dan  Perancangan Web Portal Informasi  Perdagangan Manggaduashop.com . Skripsi Tidak Diterbitkan.

Marko Publishing McLeod, Raymond Jr., dan George Schell. 2008. Sistem Informasi  Manajemen Jilid 10. PT. Prenhallindo dan Index: Jakarta

Mulyanto, Agus. 2009. Sistem Informasi Konsep dan Aplikasi . Yogyakarta: Pustaka Pelajar. Pramono, Andi dan M. Syafii. 2006. Kolaborasi Flash, Dreamweaver, dan PHP untuk Aplikasi Website. Yogyakarta: Andi.

Raghu, Ramakrishnan dan Gehrke, Johannes. 2004. Sistem Manajemen Database  Edisi 3. Jogjakarta : Andi & McGraw-Hill Education.

Restianti, Mega. 2009.  Pembuatan Web Portal My Wedding Dengan Menggunakan  PHP dan MYSQL . Skripsi Tidak Diterbitkan.

Rifandi. 2010. Pembuatan Web Portal Fanz Community dengan Menggunakan PHP dan MYSQL . Skripsi Tidak Diterbitkan.

Sutabri, Tata. 2005. Sistem Informasi Manajemen. Yogyakarta: Andi. Umar, Rusydi. 2008.  Implementasi Content Mangement System (CMS) pada situs  Portal Berita. Skripsi Tidak Diterbitkan.

Wahyu

Danil,

Ilham.

2009.  Perancangan

Portal

Berbasis

Web

Dengan

 Menggunakan PHP dan MYSQL Pada SMAN 18 Medan . Skripsi Tidak

Diterbitkan. Whitten L, Jeffrey. 2007. S ystem Analysis and Design Methods E. 7th. Yogyakarta: McGraw-Hill. Zaman, Haerul. 2008.  Aplikasi Web Portal Hukum Himpunan Advokat / Pengacara  Indonesia Berbasis PHP dan MYSQL . Skripsi Tidak Diterbitkan.

LAMPIRAN-LAMPIRAN 1. LAMPIRAN A : HASIL WAWANCARA 2. LAMPIRAN B : PENGUJIAN MANDIRI 3. LAMPIRAN C : SOURCE CODE 4. LAMPIRAN D : PENGUJIAN PENERIMAAN SISTEM

LAMPIRAN A HASIL WAWANCARA

Dalam pengumpulan data (Collecting Data), penulis melakukan wawancara dengan Shinta Mardhotillah selaku kepala BAAK STMIK Islam Internasional Jakarta. Berikut beberapa petikan hasil wawancara yang dilakukan oleh penulis: 1. Ceritakan sejarah atau profil STMIK Islam Internasional Jakarta ! International Islamic University College (IIUC), yang dikenal sebagai STMIK Islam Internasional Jakarta adalah lembaga pendidikan swasta yang terdaftar di Kopertis III, Jakarta dan didukung sepenuhnya oleh International Islamic University Malaysia (IIUM) atau Universitas Islam Antar Bangsa Malaysia.

2. Apa visi dan misi STMIK Islam Internasional Jakarta ? -

Visi : Menjadikan program studi teknik informatika STMIK Islam Internasional sebagai pusat penyelenggaraan pengajaran, penelitian yang ditujukan bagi pengembangan teknologi berbasis informasi yang kompeten dan kompetitif

-

Misi : 1. Menyiapkan tenaga-tenaga terampil yang kreatif, inovatif dan mandiri

di bidang teknologi informasi yang dapat bersaing di dunia kerja. 2. Menggunakan,

memanfaatkan

dan

mengembangkan

teknologi yang inovatif.

3.

Bagaimana STMIK Islam Internasional melakukan pemasaran?

ilmu

dan

STMIK IIUC melakukan pemasaran secara langsung turun ke lapangan dengan menyebarkan brosur ke tempat-tempat yang tertentu dan melakukan  pemasaran menggunakan media Web Portal.

4.

Bagaimana pendapat anda tentang Web Portal STMIK Islam Internasional Jakarta saat ini? Web Portal yang ada sekarang ini kurang optimal dalam pengelolaannya dikarenakan sistem pengelolaannya yang rumit dan hanya bisa meng-update fitur-fitur tertentu saja. Dan juga fitur-fiturnya tidak mendukung proses kegiatan perkuliahan.

5.

Bagaimana prosedur pengelolaan Web Portal STMIK Islam Internasional Jakarta sekarang? Prosedur pengelolaan Web Portal yaitu seorang administrator melakukan  pembaruan Web Portal dengan merubah kode HTML nya kemudian setelah di update dapat dilihat di halaman user.

6.

Apakah sistem yang ada sekarang cukup membantu pemasaran? Lumayan membantu, tetapi kurang optimal.

7.

Apa permasalahan yang ada dalam sistem Web Portal STMIK IIUC sekarang?

Sistem Web Portal sekarang belum sepenuhnya memenuhi kebutuhan kampus seperti sebagai media promosi, media publikasi kegiatan, media pendaftaran mahasiswa baru dan fitur-fitur lainnya yang dapat menunjang proses kegiatan  pembelajaran.

8.

Bagaimana cara STMIK Islam Internasional Jakarta melakukan pendaftaran mahasiswa baru? STMIK Islam Internasional melakukan pendaftaran mahasiswa baru secara manual, yaitu calon mahasiswa datang langsung ke kampus STMIK. Belum terkomputerisasi.

9.

Bisa Anda jelaskan alur pendaftaran mahasiswa baru di STMIK Islam Internasional Jakarta? Calon mahasiswa membeli formulir pendaftaran, mengisi formulir, menyerahkan ke  petugas, mendapatkan kartu ujian dan mengikuti ujian sesuai waktu yang di tentukan.

10. Apa permasalahan yang ada dalam sistem pendaftaran mahasiswa baru sekarang? Sistem pendaftaran mahasiswa baru sekarang masih dilakukan secara manual dan kami berharap bisa menggunakan sistem pendaftaran yang lebih modern agar dapat menjangkau calon mahasiswa yang terdapat di tempat yang jauh.

LAMPIRAN B PENGUJIAN MANDIRI

Halaman Administrator

1. Tambah Agenda

Gambar (1) 2. Hapus Agenda

Gambar (2)

3. Edit Agenda

Gambar (3) 4. Tambah Berita

Gambar (4) 5. Edit Berita

Gambar (5) 6. Hapus Berita

Gambar (6) 7. Tambah Partner

Gambar (7)

8. Edit Partner

Gambar (8) 9. Hapus Partner

Gambar (9) 10. Tambah Download

Gambar (10) 11. Edit Download

Gambar (11) 12. Hapus Download

Gambar (12)

13. Tambah Sekilas Info

Gambar (13) 14. Edit Sekilas Info

Gambar (14) 15. Hapus Sekilas Info

Gambar (15) 16. Tambah Album

Gambar (16) 17. Edit Album

Gambar (17)

18. Tambah Galeri Foto

Gambar (18) 19. Edit Galeri Foto

Gambar (19) 20. Hapus Galeri Foto

Gambar (20) 21. Tambah Menu Utama

Gambar (21)

22. Edit Menu Utama

Gambar (22) 23. Tambah sub menu

Gambar (23) 24. Edit sub menu

Gambar (24)

25. Hapus sub menu

Gambar (25) 26. Tambah halaman statis

Gambar (26) 27. Edit Halaman Statis

Gambar (27) 28. Edit Validasi

Gambar (28) 29. Hapus Calon Mahasiswa

Gambar (29) 30. Cetak Kartu

Gambar (30) 31. Kirim Email

Gambar (31)

 32. Konfirmasi Pembayaran

Gambar (32) 32. Aktivasi Username dan Password

Gambar (35)

Halaman User

1.

Home

Gambar User (1)

2.

Pendaftaran Online

Gambar User (2) 3. Formulir Pendaftaran

Gambar User (3)

4. Tampilan Jquery Validation

Gambar User (4)

5. Form Konfirmasi

Gambar User (5)

6. Login

Gambar User (6)

7. Halaman Cetak Kartu Ujian

Gambar User (7)

8. Halaman galeri foto

Gambar User (8)

LAMPIRAN C SOURCE CODE

Kiri.php

E-Learning

IIUC Center

Download

Website Yayasan

Web Mail

src=$f[folder]/images/welcome_to.gif>";?>