perancangan sistem informasi ukm mapasadha …repository.usd.ac.id/33478/2/995314066_full.pdf ·...

PERANCANGAN SISTEM INFORMASI UKM MAPASADHA

BERBASIS WEB

TUGAS AKHIR

Diajukan untuk Memenuhi Salah Satu Syarat

Memperoleh Gelar Sarjana Teknik

Program Studi Teknik Informatika

PROG

JU

U

Disusun oleh :

SUMARYANTA

995314066

RAM STUDI TEKNIK INFORMATIKA

RUSAN TEKNIK INFORMATIKA

FAKULTAS TEKNIK

NIVERSITAS SANATA DHARMA

YOGYAKARTA

2007

WEB BASED INFORMATION SYSTEM DESIGN

OF UKM MAPASADHA

FINAL PROJECT

Presented as Partial Fulfillment of The Requirements

to Obtain The Sarjana Teknik Degree

In Informatics Engineering

INFORMA

DEPARTM

S

By :

SUMARYANTA

995314066

TICS ENGINEERING STUDY PROGRAM

ENT OF INFORMATICS ENGINEERING

FACULTY OF ENGINEERING

ANATA DHARMA UNIVERSITY

YOGYAKARTA

2007

TUGAS AKHIR


BERBASIS WEB

Oleh :

SUMARYANTA

995314066

Telah disetujui oleh :

Dosen Pembimbing

Paulina Heruningsih Prima Rosa, S.Si, M.Sc. Tanggal, Januari 2007

ii

TUGAS AKHIR


BERBASIS WEB

Dipersiapkan dan ditulis oleh :

SUMARYANTA

995314066

Telah dipertahankan di depan Panitia Penguji

pada tanggal 14 Desember 2006

dan dinyatakan telah memenuhi syarat.

Susunan Panitia Penguji :

Ketua Paulina Heruningsih Prima Rosa, S.Si., M.Sc.

……………………..

Sekretaris Ridowati Gunawan, S.Kom., M.T.

……………….…….

Anggota Henricus Agung Hernawan, S.T.

……………….…….

Anggota Cosmas Bramono, S.T.

………….………….

Yogyakarta, ………………………….

Fakultas Teknik

iii

Universitas Sanata Dharm

PERNYATAAN KEASLIAN KARYA

Saya menyatakan dengan sesungguhnya bahwa tugas akhir yang saya tulis

ini tidak memuat karya atau bagian karya orang lain, kecuali yang telah

disebutkan dalam kutipan dan daftar pustaka, sebagaimana layaknya karya ilmiah.

Yogyakarta, 14 Desember 2006

Penulis,

iv

Sumaryanta

MOTTO

Sebuah gagasan baru mula-mula dianggap konyol,

lalu dibuang karena dianggap tidak penting,

sampai akhirnya diakui semua orang.

(William James)

Meskipun dunia penuh dengan penderitaan,

dunia juga penuh dengan keberhasilan mengatasi penderitaan itu.

(Hellen Keller)

v

HALAMAN PERSEMBAHAN

Kupersembahkan karya ini untuk :

Yesus Kristus dan Bunda Maria,

Keluarga Besar Djojo Soemardjo,

Bapak dan Ibu tercinta,

Kakakku Mas Suryo dan adikku Unique,

Keponakanku Adhit dan Devina,

Mbak Alloysia Ani Syanjayani (alm.)

Teman-teman seperjuangan TI ’99,

Segala hal yang membuatku terus berjuang selama ini.

vi

INTISARI

Mapasadha (Mahasiswa Pecinta Alam Sanata Dharma) merupakan salah satu Unit Kegiatan Mahasiswa (UKM) di Universitas Sanata Dharma yang mengkhususkan diri pada pembinaan dan pengembangan minat, bakat, dan kreativitas mahasiswa dalam kecintaan dan kepedulian atas kelestarian lingkungan alam beserta segala isinya dan tantangannya. Sebagai sebuah UKM, informasi mengenai Mapasadha sangat dibutuhkan oleh mahasiswa, baik anggota maupun non anggota. Selama ini, untuk mendapatkan informasi, mahasiswa harus datang langsung ke “Pondok Mapasadha”. Hal ini tentu saja menyita waktu dan tenaga karena belum tentu mahasiswa dapat menemui pengurus Mapasadha, karena pengurusnya adalah mahasiswa juga, sehingga ia harus mengikuti kegiatan akademik (perkuliahan) seperti mahasiswa yang lain.

Sistem yang akan dikembangkan adalah sebuah sistem perangkat lunak client/server berbasis web yang akan menyajikan segala informasi tentang Mapasadha secara detail. Sistem akan menyajikan informasi dalam bentuk halaman web yang dapat diakses oleh siapa saja, kapan saja, dan dari mana saja sehingga pemakai tidak perlu datang langsung ke “Pondok Mapasadha” untuk mendapatkan informasi mengenai Mapasadha.

vii

ABSTRACT

Mapasadha (Mahasiswa Pecinta Alam Sanata Dharma) is one of the students' activity unit at Sanata Dharma University majoring purpose at construction and development of enthusiasm, talent, and student creativity in caring and love about continuity of natural environment along with all its contents and its challenge. As a students' activity unit, information about Mapasadha is very required by students, member and non member. During the time, to get information, student have to come to “ Pondok Mapasadha”. This situation causes energy and time of the student wasted because there is no warranty that the student can meet the official member of Mapasadha. It because the official member is student too, so they have to follow the academic activity like the others.

System to be developed is a system software of client / server base on web to present all information about Mapasadha in detail. System will present information in the web pages that able to be accessed by anyone, any time, and anywhere, so user do not need to come to “Pondok Mapasadha” to get information about Mapasadha.

viii

KATA PENGANTAR

Dengan memanjatkan puji syukur kepada Tuhan Yang Maha Kasih yang

telah melimpahkan berkat dan rahmat-Nya, akhirnya penulis dapat menyelesaikan

Tugas Akhir ini. Tugas Akhir ini disusun sebagai salah satu syarat untuk

menempuh ujian akhir gelar kesarjanaan pada Jurusan Teknik Informatika,

Universitas Sanata Dharma Yogyakarta.

Penulis menyadari bahwa tanpa bantuan dan kerjasama semua pihak,

Tugas Akhir ini tidak akan terlaksana dengan baik. Untuk itu pada kesempatan ini

penulis menghaturkan terima kasih kepada pihak-pihak yang telah banyak

membantu, baik selama analisa, perancangan sistem, maupun pada saat penulisan

naskah. Ucapan terima kasih penulis sampaikan kepada :

1. Romo Ir. Greg. Heliarko S.J., S.S., B.S.T., M.A., M.Sc., selaku Dekan

Fakultas Teknik Universitas Sanata Dharma Yogyakarta.

2. Ibu Agnes Maria Polina, S.Kom., M.Sc., selaku Ketua Jurusan Teknik

Informatika.

3. Ibu Paulina Heruningsih Prima Rosa, S.Si., M.Sc., selaku Dosen

Pembimbing Tugas Akhir yang telah meluangkan waktu untuk

membimbing, memberikan saran dan koreksi dalam penulisan Tugas

Akhir ini.

4. Bapak Dynosius Dony Ariananda, S.T., M.Sc., selaku Dosen Pembimbing

Pra Tugas Akhir.

5. John Pitter, selaku Ketua UKM Mapasadha yang telah mendukung dan

memberikan izin selama penulis melakukan survei dan pengambilan data.

6. Kedua orang tua yang selalu memberikan perhatian, cinta kasih, semangat

dan dorongan dalam menyelesaikan Tugas Akhir ini. (Nyuwun

ngampunten dangu anggenipun ngentosi kulo rampung).

7. Mas Suryo dan adikku Unique (Makasih atas kesabarannya),

keponakanku Adhit dan Devina (Cepet gedhe ya...), serta almarhumah

ix

kakak iparku Mbak Alloysia Ani Syanjayani (Selamat jalan Mbak, semoga

kau temukan tempat terindah di sisiNya).

8. Teman-teman Pn’S Community (Kongkow-kongkow sampe tuek!?).

9. Teman-teman TI ’99 terutama : Anang (Piye...?!), Destya (Matur

tengkyu!), Wisnu “Djanggut” (Keep on rollin’!), Chrisnoadi “Sronggot”

(Wis dadi Tukang Insinyur?), Iwan, Teguh, Andre, Andri, Joko (Saiki wis

dho plong to?), Sigit, Asep, Indra “Cecak”, Dito, Dinar, Dicky, Kukuh

(Lha kok dho ndhisiki?).

Akhir kata, penulis berharap Tugas Akhir ini dapat bermanfaat bagi

pembaca. Kritik dan saran yang bersifat membangun atas segala kekurangan

dalam penulisan Tugas Akhir ini sangat diharapkan.

x

DAFTAR ISI

HALAMAN JUDUL ............................................................................................ i

HALAMAN PERSETUJUAN ............................................................................. ii

HALAMAN PENGESAHAN .............................................................................. iii

PERNYATAAN KEASLIAN KARYA .............................................................. iv

HALAMAN MOTTO .......................................................................................... v

HALAMAN PERSEMBAHAN .......................................................................... vi

INTISARI ............................................................................................................. vii

ABSTRACT ......................................................................................................... viii

KATA PENGANTAR ......................................................................................... ix

DAFTAR ISI ........................................................................................................ xi

DAFTAR GAMBAR ........................................................................................... xiv

DAFTAR TABEL ................................................................................................ xvi

BAB I PENDAHULUAN .................................................................................... 1

1.1. Latar Belakang Masalah............................................................................ 1

1.2. Rumusan Masalah .................................................................................... 3

1.3. Batasan Masalah ...................................................................................... 3

1.4. Tujuan dan Manfaat Penelitian ................................................................ 3

1.5. Metodologi Penelitian .............................................................................. 4

1.6. Sistematika Penulisan .............................................................................. 5

BAB II LANDASAN TEORI .............................................................................. 7

1.1.Sistem Informasi ...................................................................................... 7

xi

2.1.1. Konsep Dasar Sistem Informasi ....................................................... 7

2.1.2. Sistem Informasi Berbasis Web ....................................................... 8

2.2. Pemrograman Web ................................................................................... 10

2.2.1. WWW .............................................................................................. 10

2.2.2. Web Browser .................................................................................... 11

2.2.3. Web Server ....................................................................................... 11

2.2.4. Web Client ....................................................................................... 12

2.2.5. HTTP ................................................................................................ 12

2.2.6. HTML .............................................................................................. 12

2.3. Diagram Arus Data .................................................................................. 14

2.4. Diagram E-R ............................................................................................ 15

2.5. Basis Data ................................................................................................ 16

2.6. JSP (Java Server Pages) ........................................................................... 17

2.6.1. Sekilas tentang JSP .......................................................................... 17

2.6.2. Arsitektur JSP .................................................................................. 18

2.7. My SQL .................................................................................................... 19

BAB III ANALISA DAN PERANCANGAN SISTEM ...................................... 21

3.1. Analisa Sistem .......................................................................................... 21

3.1.1. Analisa Sistem Lama ....................................................................... 21

3.1.2. Analisa Sistem Baru ......................................................................... 22

3.1.2.1. Gambaran Sistem secara Umum ............................................ 22

3.1.2.2. DFD (Data Flow Diagram) .................................................... 24

3.1.2.2.1. Diagram Konteks ........................................................... 24

xii

3.1.2.2.2. Diagram Berjenjang ....................................................... 25

3.1.2.2.3. DFD di sisi Guest ........................................................... 29

3.1.2.2.4. DFD di sisi Anggota ...................................................... 30

3.1.2.2.5. DFD di sisi Administrator .............................................. 33

3.2. Perancangan Sistem ................................................................................. 37

3.2.1. Perancangan Database ...................................................................... 37

3.2.1.1. Conceptual Design ................................................................. 37

3.2.1.2. Logical Design ....................................................................... 37

3.2.1.3. Physical Design ...................................................................... 38

3.2.2. Perancangan Input dan Output ......................................................... 41

3.2.2.1. Perancangan Input .................................................................. 41

3.2.2.2. Perancangan Output ............................................................... 47

3.2.3. Perancangan Menu ........................................................................... 49

3.2.4. Perancangan Teknologi .................................................................... 51

3.2.4.1. Perancangan Perangkat Lunak ............................................... 51

3.2.4.2. Perancangan Perangkat Keras ................................................ 52

BAB IV PENUTUP ............................................................................................. 53

4.1. Kesimpulan .............................................................................................. 53

4.2. Saran ......................................................................................................... 53

DAFTAR PUSTAKA .......................................................................................... xvii

xiii

DAFTAR GAMBAR

Gambar 2.1. Lingkungan client/server yang melibatkan berbagai platform ........ 9

Gambar 2.2. Prinsip kerja pengaksesan dokumen JSP ........................................ 18

Gambar 3.1. Diagram Konteks ............................................................................ 25

Gambar 3.2. Diagram Berjenjang di sisi Guest ................................................... 26

Gambar 3.3. Diagram Berjenjang di sisi Anggota ............................................... 27

Gambar 3.4. Diagram Berjenjang di sisi Administrator ...................................... 28

Gambar 3.5. DFD Level 0 di sisi Guest ............................................................... 29

Gambar 3.6. DFD Level 0 di sisi Anggota .......................................................... 30

Gambar 3.7. DFD Level 1 Proses 4 di sisi Anggota ............................................ 31

Gambar 3.8. DFD Keseluruhan di sisi Anggota .................................................. 32

Gambar 3.9. DFD Level 0 di sisi Administrator .................................................. 33

Gambar 3.10. DFD Level 1 Proses 3 di sisi Administrator ................................... 34

Gambar 3.11. DFD Level 2 Proses 3.4 di sisi Administrator ................................ 35

Gambar 3.12. DFD Keseluruhan di sisi Administrator .......................................... 36

Gambar 3.13. Diagram E-R ................................................................................... 37

Gambar 3.14. Relasi Antar Tabel ........................................................................... 38

Gambar 3.15. Perancangan Input Pendaftaran Anggota ........................................ 42

Gambar 3.16. Perancangan Input Penerimaan Anggota ........................................ 43

Gambar 3.17. Perancangan Input Berita ................................................................ 43

Gambar 3.18. Perancangan Input Jenis Kegiatan .................................................. 44

Gambar 3.19. Perancangan Input Kegiatan ........................................................... 44

xiv

Gambar 3.20. Perancangan Input Dokumentasi .................................................... 45

Gambar 3.21. Perancangan Input Tambah Topik .................................................. 45

Gambar 3.22. Perancangan Input Tambah Tanggapan .......................................... 46

Gambar 3.23. Perancangan Login Administrator .................................................. 46

Gambar 3.24. Perancangan Output Data Anggota ................................................. 47

Gambar 3.25. Perancangan Output Berita ............................................................. 48

Gambar 3.26. Perancangan Output Dokumentasi .................................................. 48

Gambar 3.27. Perancangan Menu Utama .............................................................. 49

Gambar 3.28. Perancangan MenuAnggota ............................................................ 50

Gambar 3.29. Perancangan Menu Administrator ................................................... 51

xv

DAFTAR TABEL

Tabel 2.1. Simbol DFD ......................................................................................... 15

Tabel 3.1. Entitas, Masukan, dan Keluaran dari Sistem ...................................... 24

Tabel 3.2. Tabel Anggota ..................................................................................... 39

Tabel 3.3. Tabel JenisKegiatan ............................................................................ 39

Tabel 3.4. Tabel Kegiatan .................................................................................... 39

Tabel 3.5. Tabel IkutKegiatan .............................................................................. 40

Tabel 3.6. Tabel Dokumentasi ............................................................................. 40

Tabel 3.7. Tabel Berita ......................................................................................... 40

Tabel 3.8. Tabel Topik ......................................................................................... 40

Tabel 3.9. Tabel Tanggapan ................................................................................. 41

xvi

BAB I

PENDAHULUAN

1.1 Latar Belakang Masalah

Unit Kegiatan Mahasiswa (UKM) merupakan wadah untuk menyalurkan

kreativitas mahasiswa dalam suatu kegiatan di luar kegiatan akademik

(perkuliahan). Di Universitas Sanata Dharma terdapat banyak UKM yang dapat

diikuti oleh mahasiswa, antara lain : UKM Olah Raga, UKM Fotografi, UKM

Pecinta Alam, UKM Kerawitan, dan lain-lain. Dengan mengikuti salah satu UKM

diharapkan mahasiswa dapat mengembangkan kreativitasnya sesuai dengan bakat

dan minatnya masing-masing.

Mapasadha (Mahasiswa Pecinta Alam Sanata Dharma) merupakan salah

satu Unit Kegiatan Mahasiswa (UKM) di Universitas Sanata Dharma yang

mengkhususkan diri pada pembinaan dan pengembangan minat, bakat, dan

kreativitas mahasiswa dalam kecintaan dan kepedulian atas kelestarian lingkungan

alam beserta segala isinya dan tantangannya. Untuk menarik mahasiswa menjadi

anggota, informasi tentang seluk beluk Mapasadha harus diketahui oleh

mahasiswa.

Selama ini informasi tentang Mapasadha hanya diperoleh dari pengurus

dan anggota Mapasadha saja. Mahasiswa yang tertarik untuk mengikuti UKM

Mapasadha, namun tidak mengetahui siapa saja pengurus dan anggotanya, harus

datang langsung ke “Pondok Mapasadha” untuk mendapatkan informasi detail

mengenai Mapasadha. Hal ini tentu saja menyita waktu dan tenaga karena belum

1

2

tentu mahasiswa dapat menemui pengurus dan anggota Mapasadha mengingat

pengurus dan anggotanya adalah mahasiswa juga, sehingga ia harus mengikuti

kegiatan akademik (perkuliahan) seperti mahasiswa yang lain.

Selain untuk mahasiswa, informasi juga dibutuhkan oleh anggota

Mapasadha sendiri. Informasi-informasi seperti jadwal kegiatan, pertemuan

ataupun informasi yang lainnya hanya dapat didapatkan di “Pondok Mapasadha”

saja. “Pondok Mapasadha” juga merupakan tempat menampung ide, gagasan dan

usulan dari anggota dan kemudian mendiskusikannya dengan anggota yang lain.

Sehingga anggota yang mempunyai ide, gagasan, usulan atau membutuhkan

informasi harus sering datang ke “Pondok Mapasadha”. Bagi anggota yang

mempunyai jadwal kuliah padat, hal ini tentu sangat menyulitkan.

Dalam sebuah organisasi, pengelolaan data anggota merupakan hal yang

sangat penting karena anggota merupakan pilar bagi organisasi. Sebuah organisasi

tidak akan dapat berjalan tanpa dukungan dan peran serta dari anggota. Data

anggota Mapasadha disimpan dalam sebuah buku induk. Untuk melakukan

perubahan data anggota, pengurus harus mencari berkas secara manual satu per

satu data anggota yang dikehendaki di dalam buku induk tersebut. Hal ini

membuat proses pencarian menjadi sangat lama dan tidak efektif, apalagi bila

perawatan dan penyimpanannya kurang baik, berkas dapat menjadi rusak atau

bahkan hilang.

Hal yang juga penting untuk dikelola adalah dokumentasi kegiatan.

Dengan dokumentasi yang baik, dapat diketahui kapan dan di mana kegiatan

dilakukan sehingga seseorang dapat memperoleh informasi dari dokumentasi

3

tersebut. Foto-foto kegiatan yang dilakukan anggota Mapasadha hanya

ditempatkan dalam album foto dan belum diorganisasikan dengan baik sehingga

untuk dokumentasi yang lama sudah tidak dapat diketahui kapan dan di mana

kegiatan dilakukan, kecuali oleh pembuat dokumentasi ataupun anggota yang

mengikuti kegiatan tersebut.

1.2 Rumusan Masalah

Berdasarkan latar belakang di atas maka rumusan masalah yang akan

disajikan adalah : Bagaimana membuat sistem informasi UKM Mapasadha

berbasis web dengan menggunakan bahasa pemrograman JSP (Java Server Pages)

dan database MySQL?

1.3 Batasan Masalah

Batasan masalah dalam sistem ini adalah :

1. Pendaftaran anggota baru hanya ditujukan untuk mahasiswa Universitas

Sanata Dharma.

2. Login ditujukan hanya untuk anggota Mapasadha dan administrator.

3. Administrator adalah pengurus Mapasadha yang diberikan kewenangan

khusus sebagai administrator.

1.4 Tujuan dan Manfaat Penelitian

Tujuan penulisan karya ilmiah ini adalah :

1. Menampilkan informasi tentang UKM Mapasadha secara detail di

halaman web sehingga mudah untuk diakses.

4

2. Memahami pemrograman web yang menggunakan bahasa pemrograman

JSP (Java Server Pages) dan database MySQL dengan studi kasus UKM

Mapasadha.

Manfaat penulisan karya ilmiah ini adalah :

1. Membantu mahasiswa dalam mencari informasi mengenai UKM

Mapasadha.

2. Memudahkan interaksi antara Mapasadha dengan para anggotanya.

1.5 Metodologi Penelitian

Metodologi penelitian yang digunakan untuk membuat sistem ini adalah

sebagai berikut :

1. Studi Pustaka

Mempelajari buku-buku yang berhubungan dengan web, pemrograman

Java dan JSP (Java Server Pages), dan pengolahan database

menggunakan MySQL.

2. Wawancara

Untuk mengetahui kebutuhan-kebutuhan dari sistem yang akan dibuat,

dilakukan wawancara dengan pengurus dan anggota UKM Mapasadha.

3. Survei Materi

Mengumpulkan data-data yang berhubungan dengan sistem yang akan

dibuat.

4. Analisa Sistem

Menganalisa semua kebutuhan yang diperlukan dalam pengembangan

sistem.

5

5. Perancangan Sistem

Membuat rancangan dari sistem berdasarkan analisa yang telah dilakukan,

yang meliputi :

a. Merancang database yang meliputi conceptual design, logical design,

dan physical design

b. Merancang input dan output

c. Merancang antarmuka (interface)

d. Merancang teknologi yang digunakan

1.6 Sistematika Penulisan

Agar memudahkan pembaca dalam memahami isi dari penulisan tugas

akhir ini, maka penulis menyusun suatu penulisan sebagai berikut :

BAB I. PENDAHULUAN

Bab ini memberikan gambaran umum tentang isi tugas akhir yang

mencakup latar belakang masalah, rumusan masalah, batasan masalah,

tujuan dan manfaat penelitian, metodologi penelitian, dan sistematika

penulisan.

BAB II. LANDASAN TEORI

Bab ini berisi pembahasan tentang teori-teori yang menjadi dasar

penjelasan-penjelasan yang mendukung pembuatan sistem, baik dasar teori

dari program aplikasi yang digunakan maupun hal-hal yang diperlukan

dalam mengimplementasikan sistem.

6

BAB III. ANALISA DAN PERANCANGAN SISTEM

Bab ini berisi penjelasan umum dari sistem yang akan dibuat, mulai dari

analisa sistem, perancangan basis data, input, proses, output dan teknologi

yang akan digunakan.

BAB IV. PENUTUP

Bab ini berisi kesimpulan dan saran terhadap sistem yang telah dibuat.

BAB II

LANDASAN TEORI

2.1. Sistem Informasi

2.1.1. Konsep Dasar Sistem Informasi

Suatu sistem mempunyai maksud tertentu, yaitu untuk mencapai tujuan

(goal) dan sasaran (objectives). Goal biasanya dihubungkan dengan ruang lingkup

yang lebih luas, sedangkan objectives dalam ruang lingkup yang lebih sempit.

Pendekatan sistem yang lebih menekankan pada elemen atau komponennya

mendefinisikan sistem sebagai kumpulan dari elemen-elemen yang berinteraksi

untuk mencapai suatu tujuan tertentu. Pendekatan sistem yang menekankan pada

komponen ini akan lebih mudah dalam mempelajari suatu sistem untuk tujuan

analisis dan perancangan sistem.

Informasi adalah data yang diolah menjadi bentuk yang lebih berguna dan

berarti bagi yang menerimanya (Jogiyanto, 1993). Sumber informasi adalah data,

dimana data adalah kenyataan yang menggambarkan suatu kejadian dan kesatuan

nyata. Kejadian (event) adalah suatu yang terjadi pada saat tertentu.

Kualitas dari suatu informasi (quality of information) tergantung dari 3 (tiga) hal,

yaitu :

a. Informasi harus akurat (accurate)

Berarti informasi harus bebas dari kesalahan-kesalahan. Akurat juga

berarti informasi harus jelas mencerminkan maksud dari informasi itu

sendiri.

7

8

b. Tepat pada waktunya (timeliness)

Berarti informasi yang disampaikan kepada penerima tidak boleh

terlambat sehingga informasi yang diberikan tidak kadaluwarsa, karena

informasi merupakan landasan di dalam pengambilan keputusan.

c. Relevan (relevance)

Berarti informasi tersebut mempunyai manfaat untuk pemakainya.

Definisi dari sistem informasi menurut Laudon adalah : sekumpulan

komponen (model, input, database, output, teknologi) yang saling berhubungan,

yang berfungsi untuk mengumpulkan, menampilkan, memproses, menyimpan dan

mendistribusikan informasi sehingga dapat digunakan untuk pengambilan

keputusan dan pengendalian di dalam organisasi.

Sebuah sistem informasi yang baik haruslah memiliki kriteria-kriteria

sebagai berikut :

a. Dapat memberikan informasi yang cermat, tepat waktu dan akurat.

b. Mempunyai peranan yang kuat dalam perencanaan, analisis atau

pengendalian manajemen untuk mengoptimalisasi pertumbuhan

manajemen.

2.1.2. Sistem Informasi Berbasis Web

Sistem informasi berbasis web adalah sistem informasi yang bersifat

global, artinya tidak terbatas dalam pengaksesan dan dapat dilakukan di mana

9

saja, oleh siapa saja, dan kapan saja sesuai dengan kebutuhan seseorang tanpa

batasan ruang dan waktu.

Sistem informasi berbasis web merupakan salah satu bentuk aplikasi web.

Aplikasi web adalah suatu aplikasi yang dapat membentuk halaman-halaman web

berdasarkan permintaan pemakai. Berbagai contoh aplikasi web yang lain adalah :

search engine (altavista, google), toko on-line (bookpool, amazon), lelang on-line

(eBay), situs-situs berita (detik.com, cnn), dan lain-lain.

Aplikasi web merupakan salah satu contoh aplikasi client/server. Client

mewakili komputer yang digunakan oleh seorang pemakai yang hendak

menggunakan aplikasi, sedangkan server mewakili komputer yang menyediakan

layanan aplikasi. Dalam konteks ini, client dan server berhubungan melalui

internet ataupun intranet. Keunggulan model client/server yang menggunakan

aplikasi web adalah dapat melibatkan bermacam-macam platform.

Server

Internet

Browser

Browser

Browser

Client Windows

Client MacOS

Client Linux

Gambar 2.1. Lingkungan client/server yang melibatkan berbagai platform

10

Ciri khas yang lain pada penggunaan aplikasi web adalah pemakai

menggunakan perangkat lunak yang dinamakan web browser atau sering disebut

browser saja (misalnya Netscape Communicator, Internet Explorer, dan Mozilla)

untuk mengakses aplikasi web. Komputer yang bertindak sebagai server

umumnya menyediakan database server, selain web server yang ditujukan untuk

melayani permintaan pemakai yang hendak mengakses aplikasi web. Database

server adalah server yang melayani akses terhadap database. Oracle dan MySQL

merupakan contoh dari database engine. Adapun contoh web server yaitu Apache

(sangat terkenal di lingkungan Linux) dan IIS (Internet Information Server), yang

merupakan andalan Microsoft.

2.2. Pemrograman Web

2.2.1. WWW

WWW (World Wide Web) adalah sistem untuk menata dan menampilkan

informasi di internet. Web adalah suatu kumpulan informasi pada beberapa server

komputer yang terhubung satu sama lain dalam jaringan internet dengan

menggunakan konsep hypertext antar dokumen yang berkaitan. Protokol yang

digunakan untuk mengakses halaman web adalah HTTP (HyperText Transfer

Protocol). Setiap dokumen hypertext yang melewati HTTP ditulis dengan

menggunakan format standar yang disebut HTML (HyperText Markup

Language). Dalam WWW juga dikenal Uniform Resource Locator (URL), yaitu

penunjuk alamat di internet.

11

2.2.2. Web Browser

Web browser atau biasa disebut dengan browser adalah suatu program

yang dirancang untuk mengambil informasi-informasi dari suatu server pada

jaringan internet. Informasi-informasi ini biasanya dikemas dalam page-page,

dimana setiap page bisa memiliki beberapa link yang menghubungkan web page

tersebut ke sumber informasi lainnya. Jika suatu link diklik maka browser akan

melihat alamat dari tujuan link tersebut dan kemudian mencari di web server. Jika

browser menemukan alamat dari tujuan link tersebut, browser akan menampilkan

informasi yang ada, dan apabila alamat tidak ditemukan maka browser akan

memberikan suatu pesan bahwa alamat yang dicari tidak ditemukan (Sampurna,

1996).

2.2.3. Web Server

Web server adalah perangkat lunak yang menjadi kekuatan dari WWW.

Web server menunggu pemintaan dari client yang menggunakan browser seperti

Netscape Navigator, Internet Explorer, Opera dan program browser lainnya. Jika

ada permintaan dari browser maka web server akan memperoleh permintaan itu

kemudian memberikan hasil prosesnya berupa data yang diinginkan kembali ke

browser. Web server untuk berkomunikasi dengan client mempunyai protokol

sendiri yaitu HTTP sehingga komunikasinya dapat saling dimengerti dan lebih

mudah.

12

2.2.4. Web Client

Web client adalah suatu aplikasi yang memanfaatkan HTTP untuk

berkomunikasi dengan web server. Web client berfungsi menampilkan data yang

diminta oleh pengguna dari web server melalui web client.

2.2.5. HTTP

HTTP (HyperText Transfer Protocol) adalah protokol yang menentukan

aturan yang perlu diikuti oleh web browser dalam meminta atau mengambil suatu

dokumen dan oleh web server dalam menyediakan dokumen yang diminta oleh

web browser. HTTP bersifat request-response, yaitu dalam protokol ini client

menyampaikan pesan request ke server kemudian server memberikan response

yang sesuai dengan request tersebut.

2.2.6. HTML

HTML (HyperText Markup Language) adalah standar informasi yang

berbasis hypertext yang dipakai pada web. Berdasarkan standar inilah web

browser bisa memahami isi suatu dokumen yang berasal dari web server. HTML

bekerja dengan menggunakan HTTP, yaitu protokol komunikasi yang

memungkinkan web server berkomunikasi dengan web browser.

HTML terdiri dari dua bagian yaitu head dan body. Bagian head berisikan

judul dokumen dan informasi-informasi dasar lainnya, sedangkan bagian body

adalah data dokumennya. Struktur HTML diapit oleh tag <HTML> dan

13

</HTML> yang menandai awal dan akhir dari sebuah dokumen HTML. Standar

penulisan dokumen HTML adalah :

<HTML>

<HEAD>

<TITLE> Judul </TITLE>

</HEAD>

<BODY>

Isi

</BODY>

</HTML>

Perintah dalam HTML biasa disebut tag. Tag-tag dalam HTML biasanya

digunakan untuk memodifikasi dokumen teks yang akan ditampilkan di dalam

web browser. Tag-tag tersebut adalah sebagai berikut :

a. Tag Heading

HTML menyediakan 6 buah tag yang digunakan untuk mengatur

ukuran teks yang dijadikan sebagai judul dalam badan dokumen. Tag-tag

judul ini berupa <H1>...</H1> untuk ukuran terbesar sampai dengan

<H6>...</H6> untuk ukuran yang terkecil.

Untuk mengatur penempatan teks di dalam baris digunakan atribut

ALIGN. Nilai dari atribut ALIGN dapat berupa “CENTER” untuk

menempatkan teks di tengah-tengah layar pada baris yang bersangkutan,

“LEFT” untuk mengatur teks rata kiri terhadap halaman, “RIGHT” untuk

14

mengatur teks rata kanan terhadap halaman, “JUSTIFY” untuk mengatur

teks rata kiri dan kanan yang efeknya akan terlihat untuk teks yang

panjang. Contoh penulisan ALIGN pada heading adalah :

<H1 ALIGN = “RIGHT”> Heading Rata Kanan</H1>

b. Tag Line Break <BR>

Tag <BR> berfungsi untuk membuat baris baru atau berpindah baris.

c. Tag Paragraph <P>

Tag <P> berguna untuk membuat baris baru dengan sebuah baris kosong.

Biasanya digunakan untuk membuat alenia / paragraf.

d. Tag Horizontal Rule <HR>

Tag <HR> digunakan untuk membuat garis horizontal. Biasanya

digunakan untuk mempercantik tampilan.

e. Tag <CENTER>

Tag <CENTER> digunakan untuk menengahkan suatu teks.

2.3. DFD (Data Flow Diagram)

Diagram Arus Data (DAD) atau Data Flow Diagram (DFD) digunakan

untuk menggambarkan aliran data dan relasinya dalam suatu sistem. Manfaat

digunakannya DFD adalah :

a. Sebagai alat bantu komunikasi

b. Mempermudah dalam memahami sistem secara logika

15

Simbol-simbol yang digunakan dalam DFD adalah sebagai berikut :

Simbol Arti Contoh

Kesatuan Luar

(Entity)

Anggota

Arus Data (Data Flow)

Data Anggota

Proses (Process)

Simpanan Data

(Data Store)

AnggotaD01

1.P

Masukkan Data

Anggota

Tabel 2.1 Simbol DFD

2.4. Diagram E-R

Dalam merancang tabel, hubungan antar tabel, mengidentifikasikan

primary dan foreign key dan aturannya, serta domain untuk database, diperlukan

suatu metode yang disebut Diagram Entity-Relationship (Diagram E-R).

Dalam E-R Diagram terdapat tiga tipe relasi. Tiap tipe menunjukkan

jumlah record dari tiap tabel yang dapat direlasikan ke record pada tabel lain.

Ketiga tipe relasi tersebut adalah :

a. One-to-one

Adalah hubungan satu ke satu. Sebagai contoh adalah satu kode

mempunyai satu produk yang spesifik. Relasi one-to-one tidak

16

diwujudkan ke dalam bentuk sebuah tabel tersendiri, melainkan atribut-

atribut relasi akan ditambahkan pada salah satu entitas yang ada.

b. One-to-many

Adalah hubungan satu ke banyak. Misalnya satu kategori memiliki banyak

produk. Demikian sebaliknya, banyak produk memiliki satu kategori.

Relasi one-to-many tidak diwujudkan ke dalam bentuk sebuah tabel

sendiri, melainkan atribut-atribut relasi akan ditambahkan pada entitas

yang berderajat / bermuatan n (many).

c. Many-to-many

Adalah hubungan banyak ke banyak. Misalnya banyak order mempunyai

banyak produk dan banyak produk memiliki banyak order. Relasi many-

to-many diwujudkan dalam sebuah tabel baru.

2.5. Basis Data

Basis data (database) adalah kumpulan file-file (berupa tabel) yang saling

berelasi untuk menggambarkan atau menginformasikan tentang sesuatu hal.

Tahap-tahap perancangan basis data meliputi :

1. Conceptual Design

Berupa conceptual schema yang mengacu pada suatu conceptual model.

Pada tahap ini biasanya digunakan entity relational model sebagai

conceptual model.

17

2. Logical Design

Pada tahap ini, conceptual schema yang telah jadi diterjemahkan ke model

data yang sesuai dengan DBMS (Database Management System) yang

digunakan. Hasil yang didapat berupa logical data model.

3. Physical Design

Pada tahap ini, logical schema dilengkapi dengan detail-detail

implementasi secara fisik. Physical schema yang dihasilkan berupa tabel.

2.6. JSP (Java Server Pages)

2.6.1. Sekilas tentang JSP

JSP (Java Server Pages) merupakan teknologi yang didasarkan pada

bahasa Java, yang dapat digunakan untuk membentuk halaman-halaman web yang

bersifat dinamis. Teknologi ini dikembangkan oleh Sun Microsystem. JSP

menggunakan pendekatan pemrosesan di sisi server. Pada model seperti ini, kode

sumber JSP dijalankan pada web server. Salah satu keuntungan model seperti ini

adalah memungkinkan untuk membuat aplikasi yang independen terhadap

keberadaan sistem Java di sisi client.

JSP merupakan perangkat lunak pembuat aplikasi web yang bersifat

multiplatform. Keunggulan dari adanya dukungan multiplatform adalah

memungkinkan kode dapat dipindah-pindahkan ke berbagai platform tanpa perlu

melakukan perubahan apapun pada kode tersebut. Sebagai contoh, penulisan kode

JSP yang pada awalnya ditujukan untuk dijalankan pada Windows bisa

dipindahkan ke lingkungan lain, misalnya Linux.

18

2.6.2. Arsitektur JSP

2. Permintaan disampaikan ke web server

4. Kode HTML dikirimkan ke pemakai via internet

Web Server

1. Permintaan halaman web (sesuatu.jsp)

5. Kode HTML disampaikan ke pemakai

3. Memproses berkas JSP dan membentuk kode HTML

Browser

JSP Servlet Engine

sesuatu.jsp

Internet

Client

Gambar 2.2 Prinsip kerja pengaksesan dokumen JSP

Pemakai yang ingin mengakses halaman web, mula-mula mengirimkan

permintaan halaman web melalui protokol HTTP dalam bentuk JSP (sesuatu.jsp).

Permintaan ini akan disampaikan ke web server. Kemudian web server

mengambil dokumen JSP dan mengirimkan ke JSP Servlet Engine. Bagian inilah

yang melakukan pemrosesan kode-kode JSP (termasuk di dalamnya melakukan

peng-compile-an) dan membentuk kode HTML. Berikutnya, kode HTML ini

disampaikan oleh web server ke client yang memintanya. Kode HTML ini

19

selanjutnya diproses oleh browser sehingga pemakai bisa memperoleh informasi

dari halaman web yang dikehendakinya.

Detail pemrosesan oleh JSP Servlet Engine adalah sebagai berikut :

1. Melakukan pemilahan (parsing) kode JSP.

2. Membangkitkan kode sumber servlet.

3. Meng-compile kode sumber servlet menjadi sebuah kelas.

4. Membuat instan servlet.

5. Memberikan keluaran servlet ke web server.

2.7. MySQL

MySQL adalah multiuser database yang menggunakan bahasa Structure

Query Language (SQL). SQL adalah bahasa standar yang digunakan untuk

mengakses database server. MySQL mampu menangani data yang cukup besar

karena menerapkan suatu metode yang sangat cepat dalam relasi antar tabel

database-nya. Selain itu, MySQL dapat digunakan sebagai database sumber data

untuk informasi yang akan ditampilkan pada suatu halaman web.

SQL membuat pemrogram dan administrator database melakukan

beberapa hal, seperti : mengubah struktur sebuah database, mengubah pengaturan

keamanan sistem, memberikan hak akses kepada pengguna untuk mengakses

database, memperoleh informasi dari database, dan memperbaharui isi database.

Beberapa perintah dasar yang sering digunakan pada MySQL adalah :

a. Membuat database :

CREATE DATABASE nama_database

20

b. Menghapus database :

DROP DATABASE nama_database

c. Membuat tabel :

CREATE TABLE nama_tabel (nama_field tipe_field(nilai)

[not null|null] primary key, ..., ...)

d. Menghapus tabel :

DROP TABLE nama_tabel

e. Memasukkan data ke dalam tabel :

INSERT INTO nama_tabel (field1, field2, ...) VALUES (nilai, ... , ...)

f. Menghapus data dari tabel :

DELETE FROM nama_tabel WHERE syarat

g. Mengubah data :

UPDATE nama_tabel SET field1=nilai, field2=nilai WHERE syarat

h. Menampilkan isi tabel :

SELECT field1, field2 FROM nama_tabel WHERE syarat1, syarat2

ORDER BY field

BAB III

ANALISA DAN PERANCANGAN SISTEM

3.1. Analisa Sistem

3.1.1. Analisa Sistem Lama

Informasi mengenai Mapasadha, selama ini hanya dapat diperoleh di

“Pondok Mapasadha”. Sehingga bagi anggota maupun mahasiswa yang tertarik

menjadi anggota harus datang ke “Pondok Mapasadha” untuk dapat memperoleh

informasi yang dibutuhkan. Informasi menjadi sangat penting terutama untuk

mahasiswa yang bukan anggota Mapasadha karena dengan mengetahui informasi

detail mengenai Mapasadha, mahasiswa dapat tertarik untuk bergabung menjadi

anggota.

Dalam organisasi Mapasadha, data anggota disimpan dalam sebuah buku

induk. Untuk melakukan perubahan data anggota, pengurus harus mencari berkas

secara manual satu per satu data anggota yang dikehendaki di dalam buku induk

tersebut. Hal ini membuat proses pencarian menjadi sangat lama dan tidak efektif,

apalagi bila perawatan dan penyimpanannya kurang baik, berkas dapat menjadi

rusak atau bahkan hilang.

Permasalahan yang lain adalah dokumentasi kegiatan. Foto-foto kegiatan

yang dilakukan anggota Mapasadha hanya ditempatkan pada album foto dan tidak

diorganisasikan dengan baik sehingga untuk dokumentasi yang lama sudah tidak

dapat diketahui kapan dan di mana kegiatan dilakukan, kecuali oleh pembuat

dokumentasi ataupun anggota yang mengikuti kegiatan tersebut.

21

22

3.1.2. Analisa Sistem Baru

3.1.2.1. Gambaran Sistem secara Umum

Sistem yang akan dikembangkan adalah sebuah sistem perangkat lunak

(software) client/server berbasis web yang akan menyajikan segala informasi

seputar Mapasadha secara detail. Dengan adanya informasi yang mendetail

tentang Mapasadha, diharapkan user yang bukan merupakan anggota Mapasadha

akan lebih mengenal Mapasadha sehingga tertarik untuk menjadi anggota. Selain

itu, anggota Mapasadha juga akan lebih mudah dalam mengakses informasi yang

dibutuhkan.

Sistem akan menyajikan informasi dalam bentuk halaman web sehingga

dapat diakses oleh siapa saja, kapan saja, dan dari mana saja. Pemakai (user) tidak

perlu datang langsung ke “Pondok Mapasadha” untuk mendapatkan informasi

mengenai Mapasadha.

Pemakai (user) yang menggunakan sistem ini terbagi menjadi tiga

kategori, yaitu : user guest (bukan anggota Mapasadha), user anggota, dan

administrator. Kewenangan dari masing-masing user dijabarkan sebagai berikut :

a. Guest, dapat mengakses informasi yang ditampilkan di halaman web dan

bila tertarik menjadi anggota dapat mendaftarkan diri secara on-line.

b. Anggota, selain dapat mengakses informasi, ia diberikan hak untuk masuk

ke dalam forum diskusi dengan terlebih dulu memasukkan NIM dan

password. Melalui forum diskusi ini seorang anggota dapat mencurahkan

ide dan gagasannya ataupun mengusulkan kegiatan yang ingin dilakukan,

sedangkan anggota yang lain menanggapinya. Selain mengikuti forum

23

diskusi, anggota juga dapat mendaftarkan diri untuk mengikuti kegiatan

yang akan dilakukan Mapasadha ataupun meng-update data pribadinya

sendiri untuk field-field tertentu yang diijinkan oleh administrator,

meliputi : alamat, nomor telepon, dan e-mail.

c. Administrator, merupakan anggota yang mempunyai kewenangan khusus.

Administrator berperan sebagai pengelola data dari informasi yang

disajikan, yaitu dapat memasukkan data anggota, memasukkan data

kegiatan, memasukkan data dokumentasi kegiatan, meng-update data

anggota, meng-update data kegiatan, meng-update data dokumentasi,

meng-update berita dan meng-update forum diskusi. Untuk dapat

melakukan hal-hal tersebut, seorang administrator harus memasukkan

NIM dan password terlebih dahulu.

Fasilitas-fasilitas yang terdapat dalam sistem ini antara lain :

a. Berita, menyajikan berita terbaru mengenai hal-hal yang berhubungan

dengan Mapasadha.

b. Dokumentasi, menyajikan dokumentasi mengenai kegiatan-kegiatan yang

telah dilakukan oleh anggota Mapasadha.

c. Pendaftaran on-line, menyediakan form bagi guest yang ingin

mendaftarkan diri menjadi anggota Mapasadha.

d. Forum Diskusi, menyediakan form bagi anggota Mapasadha untuk

memberikan tanggapan terhadap topik-topik yang disajikan ataupun

24

memasukkan topik diskusi untuk mendapatkan tanggapan dari anggota

yang lain.

e. Halaman Administrator, merupakan halaman yang berisi kewenangan-

kewenangan administrator terhadap sistem.

3.1.2.2. DFD (Data Flow Diagram)

DFD digunakan untuk membuat gambaran tentang sistem yang akan

dibuat. DFD lebih menekankan pada logika dari kebutuhan sistem. Kesatuan luar

(entitas) yang terlibat dalam sistem ini yaitu : administrator, anggota, dan guest.

Entitas Masukan Keluaran Guest Pendaftaran, mencari informasi Formulir pendaftaran, informasi

Anggota Mendaftar kegiatan, menambah topik, memberikan tanggapan,

mengupdate data pribadi

Informasi daftar kegiatan, berita, dokumentasi, topik, tanggapan,

data pribadi

Administrator

Mengupdate data anggota, berita, dokumentasi, jenis kegiatan,

kegiatan, data ikut kegiatan, topik dan tanggapan forum diskusi

Informasi data anggota, berita, dokumentasi, jenis kegiatan,

kegiatan, data ikut kegiatan, topik dan tanggapan forum diskusi

Tabel 3.1 Entitas, Masukan, dan Keluaran dari Sistem

3.1.2.2.1. Diagram Konteks

Diagram Konteks (Context Diagram) menggambarkan suatu proses dari

seluruh sistem dan menggambarkan hubungan input dan output antara sistem dan

kesatuan luar (entitas). Diagram Konteks untuk sistem ini adalah sebagai berikut :

25

0

Sistem InformasiUKM Mapasadha

Administrator Anggota

Guest

Pilihan Menu Informasi

NIM, PaswordNIM, Pasword

Login, Logout,Edit, Update

Login, Logout,Edit, Update

Gambar 3.1 Diagram Konteks

3.1.2.2.2. Diagram Berjenjang

Diagram berjenjang digunakan untuk mempersiapkan penggambaran DFD

ke level yang lebih rendah.

Untuk memudahkan penggambaran dan pemahaman, maka DFD pada

sistem ini digambarkan secara terpisah menjadi tiga bagian, yaitu : DFD untuk

guest, DFD untuk anggota, dan DFD untuk administrator.

26

a. Diagram Berjenjang di sisi Guest

0

SistemInformasi

UKMMapasadha

1.P

Lihat Berita

3.P

PendaftaranAnggota

2.P

LihatDokumentasi

Top Level

Level 0

Gambar 3.2 Diagram Berjenjang di sisi Guest

27

b. Diagram Berjenjang di sisi Anggota

0

SistemInformasi

UKMMapasadha

3.P

LihatDokumentasi

5.P

MendaftarKegiatan

4

IsiForum Diskusi

6.P

Update DataPribadi

7.P

Logout

1.P

Login

2.P

Lihat Berita

Top Level

Level 0

4.2.P

MasukkanTanggapan

4.1.P

MasukkanTopik

Level 1

Gambar 3.3 Diagram Berjenjang di sisi Anggota

28

c. Diagram Berjenjang di sisi Administrator

3.1.P

Update DataAnggota

3.3.P

UpdateDokumentasi

3.2.P

Update Berita

3.4

UpdateForum Diskusi

3.5.P

Update JenisKegiatan

3.6.P

UpdateKegiatan

3.7.P

Update IkutKegiatan

3.4.2.P

UpdateTanggapan

3.4.1.P

Update Topik

1.P

Login

2.P

PenerimaanAnggota

3

Update

4.P

Logout

0

Sistem InformasiUKM

Mapasadha

Top LevelLevel 0

Level 1

Level 2

Gambar 3.4 Diagram Berjenjang di sisi Administrator

29

3.1.2.2.3. DFD di sisi Guest

a. DFD Level 0

1.P

Lihat Berita

3.P

PendaftaranAnggota

2.P

LihatDokumentasi

Guest

Berita

Pilihan Guest

Info Berita

Data Berita

Pilihan Guest

Info Dokumentasi

DokumentasiData Dokumentasi

AnggotaData Pribadi

Pilihan Guest

Konfirmasi Pendaftaran

D06

D05

D01

Gambar 3.5 DFD Level 0 di sisi Guest

30

3.1.2.2.4. DFD di sisi Anggota

a. DFD Level 0

3.P

LihatDokumentasi

6.P

Update DataPribadi

4

IsiForum Diskusi

5.P

MendaftarKegiatan

7.P

Logout

1.P

Login

2.P

Lihat Berita

Anggota

NIM, Pasword

Konfirmasi LoginAnggota

NIM, Pasword

Pilihan Anggota

Pilihan Anggota

Dokumentasi

Topik

Konfirmasi Forum Diskusi

Info Dokumentasi

Data Dokumentasi

Data Tanggapan

Pilihan Anggota

Pilihan Anggota

Anggota

Data Pribadi

Konfirmasi Logout

Pilihan Anggota

Pilihan Anggota

Berita

IkutKegiatan

Data Berita

Info Berita

Data Ikut Kegiatan


Tanggapan

Data Topik

Konfirmasi Update DataD01

D01

D04

D06

D05

D07 D08

Gambar 3.6 DFD Level 0 di sisi Anggota

31

b. DFD Level 1 Proses 4

1.P4.2.P

MasukkanTanggapan

4.1.P

MasukkanTopikPilihan Anggota

Topik

Tanggapan

Data Topik

Data Tanggapan

Anggota

Konfirmasi Tanggapan

Konfirmasi Topik

Pilihan Anggota

D07

D08

Gambar 3.7 DFD Level 1 Proses 4 di sisi Anggota

32

c. DFD Keseluruhan

3.P

LihatDokumentasi

6.P

Update DataPribadi

4.1.P

MasukkanTopik

5.P

MendaftarKegiatan

7.P

Logout

1.P

Login

2.P

Lihat Berita

Anggota

NIM, Pasword

Konfirmasi LoginAnggota

NIM, Pasword

Pilihan Anggota

Pilihan Anggota

Dokumentasi

Topik

Konfirmasi Topik

Info Dokumentasi

Data DokumentasiData Tanggapan

Pilihan AnggotaPilihan Anggota

Anggota

Data Pribadi

Konfirmasi Logout

Pilihan Anggota

Pilihan Anggota

Berita

IkutKegiatan

Data Berita

Info Berita

Data Ikut Kegiatan


Tanggapan

Data Topik

Konfirmasi Update Data

4.2.P

MasukkanTanggapan

Pilihan Anggota

Konfirmasi Tanggapan

D06

D07

D05D08

D01

D01

D04

Gambar 3.8 DFD Keseluruhan di sisi Anggota

33

3.1.2.2.5. DFD di sisi Administrator

a. DFD Level 0

Administrator

KegiatanD03

AnggotaD01

JenisKegiatanD02

IkutKegiatanD04

DokumentasiD05

BeritaD06

TopikD07

TanggapanD08

1.P

Login

2.P

PenerimaanAnggota

3

Update

4.P

Logout

Pilihan Administrator


NIM, Password

Konfirmasi Login



NIM, Password

Konfirmasi Logout

Data Anggota

Data Anggota

Data Jenis Kegiatan

Data Kegiatan

Data Ikut Kegiatan

Data Dokumentasi

Data Berita

Data Topik

Data Tanggapan

Gambar 3.9 DFD Level 0 di sisi Administrator

34

b. DFD Level 1 Proses 3

KegiatanD03

AnggotaD01

JenisKegiatanD02

IkutKegiatanD04

DokumentasiD05

BeritaD06

TopikD07

TanggapanD08

3.1.P

Update DataAnggota

3.2.P

Update Berita

3.3.P

UpdateDokumentasi

3.4

UpdateForum Diskusi

3.5.P


3.6.P

UpdateKegiatan

3.7.P

Update IkutKegiatan

Data Anggota

Data Berita

Data Dokumentasi

Data Topik

Data Tanggapan

Data Jenis Kegiatan

Data Kegiatan

Data Ikut Kegiatan

1.PPilihan Administrator







AdministratorKonfirmasi Update Data







Gambar 3.10 DFD Level 1 Proses 3 di sisi Administrator

35

c. DFD Level 2 Proses 3.4

TopikD07

TanggapanD08

3.4.1.P

Update Topik

1.P3.4.2.P

UpdateTanggapan

Data Topik

Data Tanggapan

Administrator


Konfirmasi Update DataPilihan Administrator


Gambar 3.11 DFD Level 2 Proses 3.4 di sisi Administrator

36

d. DFD Keseluruhan

Administrator

KegiatanD03

AnggotaD01

JenisKegiatanD02

IkutKegiatanD04

DokumentasiD05

BeritaD06

TopikD07

TanggapanD08

1.P

Login

NIM, Password

Konfirmasi Login

3.4.1.P

Update TopikPilihan Administrator

3.3.P

UpdateDokumentasi

3.2.P

Update Berita

3.4.2.P

UpdateTanggapan

3.5.P


3.1.P

Update DataAnggota

3.6.P

UpdateKegiatan

4.P

Logout

3.7.P

Update IkutKegiatan

2.P

PenerimaanAnggota

AnggotaD01


NIM, Password

Data Anggota









Konfirmasi Data Anggota

Konfirmasi Logout

Data Anggota

Data Ikut Kegiatan Data Kegiatan

Data Jenis Kegiatan

Data Tanggapan

Data Topik

Data Dokumentasi

Data Berita








Gambar 3.12 DFD Keseluruhan di sisi Administrator

37

3.2. Perancangan Sistem

3.2.1. Perancangan Database

3.2.1.1. Conceptual Design

Pada tahap ini digunakan diagram E-R (Entity Relationship) untuk

menunjukkan relasi antar entitas yang terlibat dalam sistem.

nim

nama

jurusan

prodi

tp_lahir

tgl_lahir

alamat

no_telp

e_mail

gol_darah

tgl_masuk

foto

pasword

status

nm_topik

Anggota

mengisi

Topik

id_topik

mempunyai

Berita

id_tanggapan tanggapan

Tanggapan

mengisi

isi

tgl

id_berita

mengikuti

mempunyai

Kegiatan

Dokumentasi

mempunyai

gambar

nm_dok

kd_dok

keterangan

kd_kegiatan

nm_kegiatan

tgl_kegiatan

lokasi

nm_jenis

kd_jenisJenisKegiatan

judul_berita

1

n

n

n

n

n

n

1

n

1

1

1

Gambar 3.13 Diagram E-R

3.2.1.2. Logical Design

38

Perancangan database dibuat berdasarkan relasi antar tabel-tabel yang ada.

Relasi antara tabel-tabel tersebut dapat digambarkan sebagai berikut :

Topik id_topik* nm_topik nim**

Tanggapan id_tanggapan tanggapan id_topik** nim**

Berita id_berita* judul_berita isi tgl

Anggota

nim* nama jurusan prodi tp_lahir tgl_lahir alamat no_telp e_mail gol_darah tgl_masuk foto password status

IkutKegiatan nim** kd_kegiatan** keterangan

JenisKegiatan

kd_jenis** nm_jenis

Kegiatan kd_kegiatan* nm_kegiatan tgl_kegiatan lokasi kd_jenis**

Dokumentasi kd_dok* nm_dok gambar keterangan kd_kegiatan**

Gambar 3.14 Relasi Antar Tabel

.2.1.3. Physical Design

yang telah dibuat di atas, langkah selanjutnya adalah

embu

3

Dari perancangan

m at perancangan fisik (physical design) dari tabel-tabel yang akan

digunakan dalam sistem ini. Perancangan fisik dilakukan dengan menentukan

field-field yang akan digunakan dalam tabel, tipe data dan ukurannya. Tabel-tabel

yang akan digunakan dalam sistem ini adalah tabel anggota, tabel jeniskegiatan,

tabel kegiatan, tabel ikutkegiatan, tabel dokumentasi, tabel berita, tabel topik, dan

tabel tanggapan. Perancangan dari masing-masing tabel adalah sebagai berikut :

39

a. Tabel Anggota

Na Ukuran Keterangan ma Field Tipe nim Varchar 9 NIM anggota nama Varchar anggota 50 Nama lengkapjurusan a Varchar 20 Jurusan anggotprodi Varchar 20 Program studi anggota tp_lahir Varchar 30 Tempat lahir anggota tgl_lahir Date Tanggal lahir anggota alamat Varchar 100 Alamat tempat tinggal anggota no_tlp Varchar 15 Nomor telepon anggotae_mail Varchar 20 Alamat e-mail anggota gol_darah Varchar 2 Golongan darah anggota tgl_masuk i anggota Date Tanggal diterima sebagafoto Varchar 20 Foto anggota password Varchar 2 0 Password anggota status a (“0“ = proses pendaftaran,

= administrator) Int 1 Status anggot

“1” = anggota, “2”

Tabel 3.2

b. Tabel JenisKegiatan

Na kuran Keterangan

Tabel Anggota

ma Field Tipe Ukd_jenis Varchar 10 Kode jenis kegiatan nm_jenis Varchar giatan 30 Nama jenis ke

Tabel 3.3 T

c. Tabel Kegiatan

Na Ukuran Keterangan

abel JenisKegiatan

ma Field Tipe kd_kegiatan Varchar 10 Kode kegiatan nm_kegiatan Varchar n 30 Nama kegiatatgl_kegiatan Date Tanggal pelaksanaan kegiatan lokasi Varchar 50 Lokasi kegiatan kd_jenis Varchar 10 Kode jenis kegiatan

40

Tabel 3.4 Tabel Kegiatan

d. Tabel IkutKegiatan

Nama Field Tipe Ukuran Keterangan nim Varchar egiatan 9 NIM peserta kkd_kegiatan lakukan Varchar 10 Kode kegiatan yang diketerangan Varchar 50 Keterangan keikutsertaan anggota

Tabel 3.5 Tabel IkutKegiatan

e. Tabel Dokumentasi

Nama Field Tipe Ukuran Keterangan kd_dok Varchar 15 Kode dokumentasinm_dok Varchar 25 Nama dokumentasi gambar Varchar 20 Nama file dokumentasi keterangan i Longtext Keterangan dokumentaskd_kegiatan 10 Varchar Kode kegiatan

Tabel 3.6 Tabel Dokumentasi

f. Tabel Berita

Nama Field Tipe Ukuran Keterangan id_berita Varchar ta 5 Nomor id berijudul_berita Varchar 50 Judul berita isi Longtext Isi berita tgl Date Tanggal berita dirilis

Tabel 3.7 Tabel Berita

g. Tabel Topik

Nama Field Tipe Ukuran Keterangan id_topik Varchar k 5 Nomor id topinm_topik Varchar 50 Nama topik

41

nim Varchar 9 NIM anggota yang memasukkan topik

Tabel 3.8 Tabel Topik

h. Tabel Tanggapan

Nama Field Tipe Ukuran Keterangan id_tanggapan ar gapan Varch 5 Nomor id tangtanggapan Longtext Isi tanggapan id_topik Varchar 5 Nomor id topik nim Varchar 9 NIM anggota yang memberikan tanggapan

Tabel 3.9 Tabel Tanggapan

3.2.2. Perancangan Input dan Output

3.2.2.1. Perancangan Input

Pada tahap ini akan dibuat form untuk memasukkan data-data yang

berkaitan dengan sistem. Form masukan tersebut adalah : form pendaftaran

anggota, pengesahan anggota, kegiatan, berita, dokumentasi, tambah topik,

tambah tanggapan, dan login administrator.

a. Perancangan Input Pendaftaran Anggota

Input pendaftaran anggota digunakan untuk memasukkan data dari

guest yang mendaftarkan diri sebagai anggota Mapasadha secara on-line.

42

N I M

Nama Lengkap

Jurusan

Program Studi

Tempat Lahir

Tanggal Lahir

Jenis Kelamin

Alamat

No. Telepon

E-mail

Golongan Darah

Pria Wanita

DAFTAR BATAL KEMBALI

Gambar 3.15 Perancangan Input Pendaftaran Anggota

b. Perancangan Input Penerimaan Anggota

Input penerimaan anggota digunakan untuk mengesahkan calon

anggota yang lolos seleksi dan diterima menjadi anggota Mapasadha

dengan mengubah statusnya dari “0” (proses pendaftaran) menjadi “1”

(anggota). Proses seleksi penerimaan anggota dilakukan di luar sistem ini.

43

N I M

Nama Lengkap

Jurusan

Program Studi

Tempat / Tgl Lahir

Jenis Kelamin

E-mail

Golongan Darah

SIMPAN BATAL KELUAR

I. DATA DIRI ANGGOTA

II. DATA KEANGGOTAAN

Tanggal Masuk

Status

Alamat

No. Telepon

Gambar 3.16 Perancangan Input Penerimaan Anggota

c. Perancangan Input Berita

Input berita digunakan untuk memasukkan berita-berita terbaru

mengenai hal-hal yang berhubungan dengan Mapasadha.

Isi Berita

SIMPAN KELUARHAPUS

Gambar 3.17 Perancangan Input Berita

44

d. Perancangan Input Jenis Kegiatan

Input jenis kegiatan digunakan untuk memasukkan jenis-jenis

kegiatan yang dilakukan oleh Mapasadha.

SIMPAN KELUARHAPUS

Kode Jenis Kegiatan

Nama Jenis Kegiatan

Gambar 3.18 Perancangan Input Jenis Kegiatan

e. Perancangan Input Kegiatan

Input kegiatan digunakan untuk memasukkan kegiatan-kegiatan

yang dilakukan oleh Mapasadha.

SIMPAN KELUARHAPUS

Kode Kegiatan

Nama Kegiatan

Tanggal Kegiatan

Kode Jenis Kegiatan

Lokasi Kegiatan

Gambar 3.19 Perancangan Input Kegiatan

45

f. Perancangan Input Dokumentasi

Input dokumentasi digunakan untuk memasukkan dokumentasi

dari kegiatan-kegiatan yang telah dilakukan oleh Mapasadha.

SIMPAN KELUARBATAL

Kode Dokumentasi

Kode Kegiatan

Nama Dokumentasi

Keterangan :

Foto

Gambar 3.20 Perancangan Input Dokumentasi

g. Perancangan Input Tambah Topik

Input tambah topik merupakan input bagi anggota yang ingin

memasukkan topik baru dalam forum diskusi.

Masukkan Topik Anda :

KIRIM KELUARBATAL

Gambar 3.21 Perancangan Input Tambah Topik

46

h. Perancangan Input Tambah Tanggapan

Input tambah tanggapan merupakan input bagi anggota yang ingin

memberikan tanggapan atas suatu topik dalam forum diskusi.

Masukkan Komentar Anda :

KIRIM KELUARBATAL

Nama Topik

Gambar 3.22 Perancangan Input Tambah Tanggapan

i. Perancangan Login Administrator

Login administrator digunakan untuk authentikasi administrator

sebelum masuk ke halaman kerja administrator.

LOGIN

N I M

Password

LOGIN ADMINISTRATOR

Gambar 3.23 Perancangan Login Adminstrator

47

3.2.2.2. Perancangan Output

Perancangan output adalah suatu perancangan tampilan sistem yang

terdapat pada layar monitor maupun pada lembar kertas (print out). Perancangan

output meliputi : perancangan output data anggota, perancangan output berita, dan

perancangan output dokumentasi.

a. Perancangan Output Data Anggota

Output data anggota digunakan untuk menampilkan data dari

anggota Mapasadha.

N I M

Nama Lengkap

Jurusan

Program Studi

Tempat / Tgl Lahir

Jenis Kelamin

E-mail

Golongan Darah

KELUAR

Tanggal Masuk

Status

Alamat

No. Telepon

Foto

DATA ANGGOTA

Gambar 3.24 Perancangan Output Data Anggota

48

b. Perancangan Output Berita

Output berita digunakan untuk menampilkan berita-berita terbaru

mengenai hal-hal yang berhubungan dengan Mapasadha.

Isi Berita

KELUAR

Judul BeritaTanggal berita dirilis

Gambar 3.25 Perancangan Output Berita

c. Perancangan Output Dokumentasi

Output dokumentasi digunakan untuk menampilkan dokumentasi

dari kegiatan-kegiatan yang telah dilakukan oleh Mapasadha.

Foto

Nama Dokumentasi

Keterangan Gambar

KELUAR

Gambar 3.26 Perancangan Output Dokumentasi

49

3.2.3. Perancangan Menu

Tampilan menu akan dikendalikan dalam satu menu utama. Menu dalam

sistem ini meliputi : menu utama, menu anggota, dan menu administrator. Untuk

perancangan tampilan menu adalah sebagai berikut :

a. Perancangan Menu Utama

Menu utama merupakan halaman pertama yang muncul ketika user

mengunjungi web ini.

MAPASADHA ONLINEUNIVERSITAS SANATA DHARMA

MENUHomeBeritaDokumentasiPendaftaran AnggotaAdministrator

CARI JUDUL BERITA

CARI

LOGINNIMPassword

LOGIN

LOGO

Tampilan dari masing-masing menu yang dipilih

Gambar 3.27 Perancangan Menu Utama

b. Perancangan Menu Anggota

Menu anggota merupakan menu untuk anggota Mapasadha. Menu

ini dapat diakses bila anggota telah melakukan login dengan memasukkan

NIM dan password dengan benar.

50


MENUHomeBeritaDokumentasiMendaftar KegiatanUpdate Data PribadiForum DiskusiLogout

CARI JUDUL BERITA

CARI

LOGO


Gambar 3.28 Perancangan Menu Anggota

c. Perancangan Menu Administrator

Menu administrator merupakan menu untuk administrator bekerja

mengelola sistem. Menu ini hanya dapat diakses oleh administator

(anggota Mapasadha dengan status “2”), dengan memilih menu

administrator dari menu utama, kemudian memasukkan NIM dan

password yang diminta di halaman login administrator. Bila NIM dan

password yang dimasukkan benar, maka menu ini dapat diakses.

51


MENUHomePenerimaan AnggotaUpdate Data AnggotaUpdate BeritaUpdate DokumentasiUpdate Jenis KegiatanUpdate KegiatanUpdate Ikut KegiatanHapus TopikHapus TanggapanLogout

CARI ANGGOTA

CARI

LOGO


Gambar 3.29 Perancangan Menu Administrator

3.2.4. Perancangan Teknologi

3.2.4.1. Perancangan Perangkat Lunak

Perangkat lunak (software) yang akan digunakan untuk membuat sistem

ini adalah :

a. J2SDK1.4.2 untuk program Java

b. jakarta-tomcat-5.0.16 untuk program Tomcat, yang berfungsi sebagai web

server dan mesin pemroses Java Server Pages

c. MySQL4.0.16

d. MySQL-connector-java-3.0.9 untuk program MySQL Connector to Java

e. Sistem Operasi Windows XP

52

3.2.4.2. Perancangan Perangkat Keras

Perangkat keras yang digunakan untuk mendukung pembuatan sistem ini

dan persyaratan minimum yang harus disediakan oleh user adalah satu set PC

(Personal Computer) yang memiliki spesifikasi sebagai berikut :

a. Prosesor minimum Intel Pentium II atau yang sederajat

b. Hardisk minimum 8 GB

c. Memori minimum 64 MB untuk mendukung kecepatan akses data

d. Monitor 14”

e. Keyboard dan mouse sebagai perangkat input data

f. Printer

g. Scanner

BAB IV

PENUTUP

4.1 Kesimpulan

Berdasarkan analisa yang telah dibuat maka dapat diambil beberapa

kesimpulan sebagai berikut :

1. Perancangan sistem telah mencakup hal-hal yang dibutuhkan oleh UKM

Mapasadha selama ini.

2. Untuk membuat sebuah sistem informasi berbasis web yang sesuai dengan

hasil perancangan diperlukan pemahaman dan penguasaan yang memadai

mengenai bahasa pemrograman JSP (Java Server Pages) dan MySQL

sehingga pembuatan program dapat berjalan dengan baik dan diselesaikan

tepat waktu.

4.2. Saran

Agar sistem informasi yang dirancang dapat diimplementasikan dalam

program dan dapat diselesaikan dengan baik dan tepat waktu maka diberikan

beberapa saran sebagai berikut :

1. Sistem dibuat secara bertahap dengan cara memilih prioritas kebutuhan

organisasi yang paling mendesak, sedangkan untuk pengembangan sistem

lebih lanjut dapat dilakukan di kemudian hari.

2. Sistem dibuat secara berkelompok, dimana masing-masing anggota

kelompok membuat program untuk fungsi tertentu kemudian fungsi-fungsi

53

54

tersebut disatukan menjadi sebuah program untuk sistem informasi yang

sesuai dengan hasil perancangan.

3. Melakukan interaksi secara intensif dengan pengurus Mapasadha agar

pembuatan sistem informasi sesuai dengan yang diinginkan.

DAFTAR PUSTAKA

Kadir, Abdul. Dasar Pemrograman Web Dinamis dengan JSP (Java Server Pages). Penerbit Andi, Yogyakarta, 2004.

Sidik, Bertha. MySQL untuk Pengguna, Administrator, dan Pengembang Aplikasi

Web. Informatika, Bandung, 2003. Jogiyanto. Analisis dan Desain Sistem Informasi : Pendekatan Terstruktur Teori

dan Praktek Aplikasi Bisnis. Andi Offset, Yogyakarta, 1989. Pressman, Roger S., Ph.D.. Rekayasa Perangkat Lunak : Pendekatan Praktisi.

McGraw-Hill Book Co., Penerbit Andi, Yogyakarta, 2003.

xvii

perancangan sistem informasi ukm mapasadha …repository.usd.ac.id/33478/2/995314066_full.pdf ·...

Documents