133
PENGEMBANGAN WEBSITE ”YOUTH STUDIES CENTER” PADA CENTER FOR RESEARCH ON INTER- GROUP RELATIONS AND CONFLICT RESOLUTION (CERIC) Nuraini PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS SAINS DAN TEKNLOGI UNIVERSITAS ISLAM NEGERI SYARIF HIDAYATULLAH JAKARTA JAKARTA 2008 M / 1429 H

Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

Embed Size (px)

Citation preview

Page 1: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

PENGEMBANGAN WEBSITE ”YOUTH STUDIES CENTER” PADA CENTER FOR RESEARCH ON INTER-

GROUP RELATIONS AND CONFLICT RESOLUTION

(CERIC)

Nuraini

PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS SAINS DAN TEKNLOGI

UNIVERSITAS ISLAM NEGERI

SYARIF HIDAYATULLAH JAKARTA JAKARTA

2008 M / 1429 H

Page 2: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

PENGEMBANGAN WEBSITE ”YOUTH STUDIES CENTER” PADA CENTER FOR RESEARCH ON INTER-

GROUP RELATIONS AND CONFLICT RESOLUTION) (CERIC)

Skripsi

Sebagai Salah Satu Syarat untuk Memperoleh Gelar

Sarjana Komputer

Fakultas Sains dan Teknologi

Universitas Islam Negeri Syarif Hidayatullah Jakarta

Oleh:

Nuraini 2040.9100.2503

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS SAINS DAN TEKNLOGI

UNIVERSITAS ISLAM NEGERI

SYARIF HIDAYATULLAH JAKARTA JAKARTA

2008 M / 1429 H

i

Page 3: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

PENGEMBANGAN WEBSITE ”YOUTH STUDIES CENTER” PADA CENTER FOR RESEARCH ON INTER-

GROUP RELATIONS AND CONFLICT RESOLUTION

(CERIC)

Skripsi

Sebagai Salah Satu Syarat untuk Memperoleh Gelar

Sarjana Komputer

Pada Fakultas Sains dan Teknologi

Universitas Islam Negeri Syarif Hidayatullah Jakarta

Oleh

Nuraini

204091002503

Menyetujui,

Pembimbing I, Pembimbing II,

Zainuddin Bey Fananie, M.Sc A’ang Subiyakto, M.Kom

Mengetahui,

Pudek I Bidang Akademik

Drs. U. Maman, M.Si

NIP. 150 299 936

ii

Page 4: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

PENGESAHAN UJIAN

Skripsi yang berjudul ”Pengembangan Website ”Youth Studies Center” pada

Center for Research on Inter-Group Relations and Conflict Resolution (CERIC)”

telah diuji dan dinyatakan lulus dalam sidang Munaqosyah Fakultas Sains dan

Teknologi, Universitas Islam Negeri Syarif Hidayatullah Jakarta pada hari Rabu

26 November 2008. Skripsi ini telah diterima sebagai salah satu syarat untuk

memperoleh gelar Sarjana Satu (S1) Program Studi Teknik Informatika.

Jakarta, Desember 2008

Tim Penguji,

Penguji I, Penguji II,

Ir. M. Qomarul Huda, M.Kom Herlino Nanang, MT

NIP. 150 326 908 NIP. 150 368 819

Mengetahui,

Dekan Fakultas Sains dan Teknologi Pudek I Bidang Akademik

DR. Syopiansyah Jaya Putra, M. Sis Drs. U. Maman, M.Si

NIP. 150 317 956 NIP. 150 299 936

iii

Page 5: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

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, Desember 2008

Nuraini

2040.9100.2503

iv

Page 6: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

ABSTRAK

Nuraini, Pengembangan Website ”Youth Studies Center” pada Center for

Research on Inter-Group Relations and Conflict Resolution (CERIC). (Dibawah

bimbingan Zainuddin Bae Fananie, M.Sc dan A’ang Subiyakto, M.Kom).

Website ”Youth Studies Center” diharapkan menjadi pusat informasi untuk

pemberdayaan pemikiran para remaja. Sebagai pusat pembelajaran (studies

center) website ini bertujuan untuk menambah wawasan dan terutama

menumbuhkan kepedulian untuk menciptakan kehidupan yang lebih baik.

Website ini belum online karena pihak perusahaan belum memiliki hosting, tidak

interaktif, dan bahasa yang digunakan sulit dimengerti. Pembangunan website ini

dilakukan dengan mempelajari website studies center di negara-negara lain yang

telah lebih ada. Parameter keberhasilan website “Youth Studies Center”

direncanakan melalui jumlah hit-counter, jumlah subscriber terhadap edisi

terbaru, jumlah forum diskusi yang masuk, dan jumlah komentar yang masuk. Hal

ini akan menjadi panduan untuk melakukan pengembangan selanjutnya.

Kata kunci: website, youth studies center, CERIC, SDLC

v

Page 7: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

KATA PENGANTAR

Puji dan syukur penulis panjatkan ke hadirat Allah SWT, karena hanya

dengan rahmat, kuasa, petunjuk, dan bimbingan-Nya, penulis mendapatkan

kesempatan menimba ilmu dan menyelesaikan penyusunan skripsi ini. Shalawat

serta salam tercurah kepada Rasulullah Muhammad SAW, beserta para keluarga

dan sahabat serta pengikutnya.

Penyusunan skripsi ini adalah untuk memenuhi salah satu syarat kelulusan

pada Fakultas Sains dan Teknologi, Universitas Islam Negeri Syarif Hidayatullah

Jakarta Program Non-Reguler Jurusan Teknik Informatika. Judul skripsi ini

adalah ”Pengembangan Website “Youth Studies Center” pada Center For

Research on Inter-Group Relations and Conflict Resolution (CERIC)”.

Dalam kesempatan ini penulis dengan tulus hati ingin mengucapkan

terima kasih yang sebesar-besarnya kepada semua pihak yang telah memberikan

bantuan baik dari segi moral maupun spiritual yang sangat bermanfaat bagi

penulis dalam penyusunan skripsi ini. Ucapan terima kasih penulis tujukan

kepada:

1. Bapak DR. Syopiansyah Jaya Putra, M.Sis sebagai Dekan Fakultas Sains

dan Teknologi Universitas Islam Negeri (UIN) Syarif Hidayatullah Jakarta.

2. Ibu Nurhayati, M.Kom sebagai Ketua Program Studi Teknik Informatika

Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta.

3. Bapak A’ang Subiyakto, M.Kom sebagai Koordinator Teknis Program Non-

Reguler Sains dan Teknologi.

vi

Page 8: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

4. Bapak Zainuddin Bey Fananie, M.Sc dan Bapak A’ang Subiyakto, M.Kom

selaku dosen pembimbing yang telah menyediakan waktu dan memberikan

arahan yang berarti bagi penulis.

5. Ibu Amalia Sustikarini, S. Sos. selaku Direktur Pelaksana CERIC yang telah

memberikan bantuan, dukungan, kesempatan, dan pengertian kepada penulis

sehingga dapat menyelesaikan skripsi ini.

6. Kedua orang tua tersayang, atas doa, kesabaran, cinta dan dukungannya,

yang membuat hidup penulis menjadi yang terindah. Kakak-kakakku

tercinta: Kamellia S. S.Sos, Melissa S.IK, Livinia S.Sos, Tono

Gunawan,S.Kom, Titania, dan Tanto Subagyo.

7. Sahabat-sahabatku: Paris, Putri, Sarah, Risa, Yunita, Erik, Reno, Ipank,

Helmi, Ranum, Imam, Nisa, De2, Nina, Amin, Septian, Mike, Darma dan

teman-teman lain yang tidak dapat disebutkan satu-persatu terima kasih atas

pertemuan yang indah dan semoga tercapai cita-cita kita semua serta teman-

teman angkatan 2004 TI Program Non-Reguler Sains dan Teknologi yang

telah membantu penulis dalam penyusunan skripsi ini.

Penulis berharap semoga skripsi ini dapat memberikan manfaat bagi

pembaca dan penulis sendiri, serta pihak-pihak lain yang berkepentingan dengan

skripsi ini.

Jakarta, Desember 2008

Penulis

Nuraini

NIM : 2040.9100.2503

vii

Page 9: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

DAFTAR ISI

Halaman

Halaman Judul.................................................................................................. i

Halaman Persetujuan Pembimbing................................................................... ii

Halaman Pengesahan........................................................................................ iii

Halaman Pernyataan......................................................................................... iv

Abstrak.............................................................................................................. v

Kata Pengantar.................................................................................................. vi

Daftar Isi........................................................................................................... viii

Daftar Tabel...................................................................................................... xii

Daftar Gambar.................................................................................................. xiii

Daftar Lampiran............................................................................................... xvi

Bab I Pendahuluan ................................................................................... 1

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

1.2 Perumusan Masalah ................................................................ 3

1.3 Batasan Masalah....................................................................... 4

1.4 Tujuan Penulisan dan Manfaat Penelitian ............................... 4

1.4.1 Tujuan Penulisan............................................................ 4

1.4.2 Manfaat Penelitian.......................................................... 5

1.5 Metodologi Penelitian ............................................................. 6

1.6 Sistematika Penulisan .............................................................. 8

Bab II Landasan Teori ............................................................................... 9

2.1 Internet..................................................................................... 9

2.1.1 Keunggulan dan Kelemahan Internet............................. 9

2.1.2 Sejarah Internet............................................................... 13

viii

Page 10: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

2.1.3 Hosting............................................................................ 14

2.1.4 E-mail............................................................................. 14

2.1.5 Chatting.......................................................................... 14

2.1.6 Internet Engineering Task Force (IETF)….................... 15

2.2 Protokol……............................................................................ 16

2.2.1 TCP/IP........................................................................... 16

2.2.2 HTTP............................................................................. 16

2.3 World Wide Web (WWW)........................................................ 20

2.4 Uniform Resource Locators (URL).......................................... 20

2.5 Domain Name System (DNS)…………………….................. 21

2.6 Website..................................................................................... 23

2.6.1 Prinsip-Prinsip Desain Website....................................... 24

2.6.2 Homepage....................................................................... 32

2.6.3 Web Browser.................................................................. 32

2.6.4 Web Server..................................................................... 32

2.7 Bahasa Pemrograman................................................................ 33

2.8 Basis Data ................................................................................ 36

2.8.1 MySQL.......................................................................... 37

2.9 Rekayasa Piranti Lunak ........................................................... 38

2.9.1 Pengertian Piranti Lunak ............................................... 39

2.9.2 Pengertian Rekayasa Piranti Lunak ............................... 39

2.9.3 Model Rekayasa Piranti Lunak ...................................... 39

2.10 Entity Relational Diagram (ERD)…...................................... 42

2.11 Alat Perancangan…................................................................ 43

2.12 Flowchart…........................................................................... 45

2.13 Macromedia Dreamweaver 8.0 ............................................. 46

ix

Page 11: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

2.14 Macromedia Flash 8.0........................................................... 47

2.15 Adobe Photoshop CS 2.0 ...................................................... 47

2.16 Youth Studies Center............................................................... 48

2.17 Wawancara.............................................................................. 49

2.18 Observasi................................................................................. 49

2.19 Konflik................................................................................. 49

Bab III Metodologi Penelitian..................................................................... 50

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

3.2 Metode Pengembangan ........................................................... 51

Bab IV Hasil dan Pembahasan .................................................................... 54

4.1 Gambaran Umum Organisasi................................................... 54

4.1.1 Sekilas CERIC............................................................... 55

4.1.2 Tujuan Berdirinya CERIC............................................. 56

4.1.3 Logo CERIC.................................................................. 58

4.1.4 Program Kerja................................................................ 58

4.1.5 Struktur Organisasi........................................................ 59

4.1.6 Tugas.............................................................................. 59

4.2 Pengembangan Website “Youth Studies Center”.................... 62

4.2.1 System Requirement Analysis......................................... 62

4.2.2 Design............................................................................. 71

4.2.3 Coding............................................................................ 96

4.2.4 Testing............................................................................. 97

4.2.5 Support............................................................................ 99

4.3

Implementasi............................................................................

99

x

Page 12: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

4.3.1 Prosedur Menjalankan Website...................................... 100

4.3.2 Cara Pengoperasian Website.......................................... 101

4.4 Tampilan Visual Website......................................................... 101

Bab VI Penutup ........................................................................................... 107

6.1 Kesimpulan ............................................................................. 107

6.2 Saran ....................................................................................... 107

Daftar Pustaka................................................................................................... 108

xi

Page 13: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

DAFTAR TABEL

Halaman

Tabel 2.1 Tabel Format Umum URL...................................................... 21

Tabel 2.2 Tabel Kode Domain Internasional.......................................... 22

Tabel 2.3 Tabel Kode Domain Negara.................................................... 22

Tabel 2.4 Tabel Korelasi Secara Umum Secara Psikologis antara 29

Warna dan Orang.....................................................................

Tabel 2.5 Tabel Kategori Huruf.............................................................. 31

Tabel 2.6 Grafis Diagram ERD............................................................... 42

Tabel 2.7 Tabel Simbol Flowchart.......................................................... 45

Tabel 4.1 Tabel Kemampuan Menjawab Pertanyaan Warna ................. 65

Tabel 4.2 Tabel Kemampuan Menjawab Pertanyaan Huruf................... 66

Tabel 4.3 Tabel Kemampuan Menjawab Pertanyaan Fitur Pencarian.... 67

Tabel 4.4 Tabel Kemampuan Menjawab Pertanyaan Fitur Forum 68

Diskusi.....................................................................................

Tabel 4.5 Tabel Kemampuan Menjawab Pertanyaan Fitur Chatting...... 68

Tabel 4.6 Tabel Kemampuan Menjawab Pertanyaan Subscriber........... 69

Tabel 4.7 Tabel Basis Data Website “Youth Studies Center”................. 90

Tabel 4.8 Tabel Modul…………………………………….................... 92

Tabel 4.9 Tabel User……...……………………………….................... 92

Tabel 4.10 Tabel Profil..…………………………………….................... 92

Tabel 4.11 Tabel Berita….………………………………….................... 93

Tabel 4.12 Tabel Forum Topics…………………………….................... 93

Tabel 4.13 Tabel Forum Posts…...………………………….................... 93

xii

Page 14: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

Tabel 4.14 Tabel Agenda…..……………………………….................... 94

Tabel 4.15

Tabel Hubungi Kami…...………………………....................

94

Tabel 4.16

Tabel Download……..…………………………....................

94

Tabel 4.17

Tabel Subscribe…...……………………………....................

95

Tabel 4.18

Tabel Polling…...………………………………....................

95

Tabel 4.19

Tabel Chatting Anggota…..……………………....................

95

Tabel 4.20

Tabel Chatting Online…….……………………....................

96

Tabel 4.21

Tabel Chatting Message………..………………....................

96

xiii

Page 15: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

DAFTAR GAMBAR

Halaman Gambar 2.1 Pengembangan piranti lunak SDLC model Waterfall........ 40

Gambar 2.2

Kondisi dan Aksi Perancangan..........................................

45

Gambar 2.3

Lingkungan kerja Macromedia Dreamweaver 8.0.............

46

Gambar 2.4

Lingkungan kerja Macromedia Flash 8.0..........................

47

Gambar 2.5

Lingkungan kerja Adobe Photoshop CS 2.0......................

48

Gambar 4.1

Logo CERIC......................................................................

58

Gambar 4.2

Struktur Organisasi CERIC................................................

59

Gambar 4.3

Perancangan Struktur Menu User......................................

72

Gambar 4.4

Perancangan Struktur Menu Admin...................................

74

Gambar 4.5

Perancangan Layout Halaman Admin................................

75

Gambar 4.6

Perancangan Layout Halaman Utama…............................

76

Gambar 4.7

Perancangan Layout Halaman Berita….............................

77

Gambar 4.8

Perancangan Layout Halaman Forum................................

78

Gambar 4.9

Perancangan Layout Halaman Youth Info…......................

78

Gambar 4.10

Perancangan Layout Halaman Archieve............................

79

Gambar 4.11

Perancangan Layout Halaman About Us..........................

79

Gambar 4.12

Perancangan Layout Halaman Contact Us….....................

80

Gambar 4.13

STD Home........................................….............................

81

Gambar 4.14

STD Berita........................................….............................

81

Gambar 4.15

STD Forum.......................................….............................

82

Gambar 4.16

STD Youth Info.................................….............................

82

Gambar 4.17

STD Archieve....................................….............................

82

xiv

Page 16: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

Gambar 4.18 STD About Us.................................................................... 83

Gambar 4.19

STD Contact Us................................….............................

83

Gambar 4.20

STD Pencarian..................................….............................

83

Gambar 4.21

STD Polling................................…...................................

84

Gambar 4.22

STD Chatting....................................….............................

84

Gambar 4.23

STD Admin.......................................….............................

85

Gambar 4.24

Flowchart Website tampilan user......................................

86

Gambar 4.25

Flowchart Search Engine...................................................

87

Gambar 4.26

Flowchart Polling..............................................................

88

Gambar 4.27

ERD Website ”Youth Studies Center”................................

89

Gambar 4.28

Tabel Basis Data Website ”Youth Studies Center”............

91

Gambar 4.29

Pengkodean di Macromedia Dreamweaver 8.0.................

97

Gambar 4.30

Pengujian internal.............................….............................

98

Gambar 4.31

Tampilan Halaman Home...............…..............................

102

Gambar 4.32

Tampilan Halaman Berita.................….............................

103

Gambar 4.33

Tampilan Halaman Forum................….............................

104

Gambar 4.34

Tampilan Halaman Youth Info..........….............................

105

Gambar 4.35

Tampilan Halaman Archieve…….....….............................

105

Gambar 4.36

Tampilan Halaman About Us...........…..............................

106

Gambar 4.37

Tampilan Halaman Contact Us..........................................

106

xv

Page 17: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

BAB I

PENDAHULUAN

1.1. Latar Belakang

Saat ini perkembangan teknologi informasi berkembang dengan pesat, hal

ini ditunjukkan dengan meningkatnya kebutuhan akan berbagai informasi, seperti

dalam bidang pendidikan, sosial, ekonomi, budaya dan sebagainya. Seiring

dengan pesatnya perkembangan teknologi informasi, telah bermunculan pula

berbagai media penyajian informasi yang dapat memberikan kemudahan bagi

pengguna untuk mengakses berbagai informasi yang cepat dan akurat, seperti

internet.

Internet merupakan sebuah sistem komunikasi global yang menghubungkan

komputer-komputer dan jaringan-jaringan komputer di seluruh dunia.(Melwin

Syafrizal, 2005:195). Melalui internet para pemakai dapat berhemat karena

komunikasi interlokal dan internasional dihitung dengan biaya lokal. Para

pemakai internet pun dapat memperoleh sejumlah informasi secara gratis antara

lain berita politik dan ekonomi, konflik, teknologi, kesehatan, lingkungan,

pemerintahan, lapangan kerja, humor, dan topik lainnya. (Budi Sutedjo Dharma

Oetomo, Ester Wibowo, Eddy Hartono, dan Samuel Prakoso, 2007 : 1)

Selain itu, Internet juga memiliki berbagai macam website yang menyajikan

berita bukan hanya berupa teks, melainkan juga gambar berupa foto, audio,

animasi maupun video. Dengan demikian, suatu website akan dikenal dengan

Page 18: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

cepat apabila dapat menciptakan daya tarik tersendiri bagi para pengguna dari

berbagai belahan dunia untuk mengakses situs tersebut.

Website merupakan fasilitas hiperteks untuk menampilkan data berupa teks,

gambar, suara, animasi, dan data multimedia lainnya.(Wahana Komputer,2006:2).

Internet sangat populer khususnya di kalangan muda. Data menunjukkan hampir

30% pengguna internet di tanah air berasal dari kalangan remaja berusia 15-24

tahun. Memang kebanyakan penggunaan internet oleh remaja, baru sebatas

penerimaan atau pengiriman email dan chatting.

(http://www.hamline.edu/apakabar/basisdata/2000/09/17/0051.html).

Melalui internet para remaja memiliki tempat gaul yang murah, tempat

mencari informasi gaul, serta pendidikan dan lowongan kerja yang up to date.

Namun sayangnya, penggunaan internet masih kurang dimanfaatkan remaja untuk

mendapatkan informasi yang berhubungan dengan berita, misalnya berita seputar

konflik. Mungkin hal ini disebabkan karena berita mengenai konflik kurang

menarik, tampilan websitenya terlalu kaku atau tidak dinamis, website kurang

interaktif, dan sebagainya.

Seperti yang kita ketahui, Indonesia merupakan negara yang majemuk

(heterogen) yang terdiri dari berbagai macam suku, agama, ras dan budaya.

Kemajemukan itulah yang mengakibatkan Indonesia menjadi rawan konflik. Oleh

karena itu, perlu suatu lembaga yang dapat menanggulangi konflik tersebut. Salah

satu lembaga tersebut adalah Center for Research on Inter-Group Relations and

Conflict Resolution (CERIC) yang merupakan pusat kajian hubungan antar

kelompok dan resolusi konflik di Indonesia. Sebagai Lembaga Swadaya

2

Page 19: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

Masyarakat (LSM), CERIC juga mengajak para remaja untuk mengetahui

hubungan antar kelompok dan konflik yang terjadi di Indonesia, sehingga para

remaja menjadi lebih peduli akan konflik.

Salah satu bentuk kepedulian CERIC dalam mengajak remaja untuk peduli

terhadap konflik yaitu dengan dibuatnya website bertemakan “Youth Studies

Center” dengan nama “Meet Up”. Namun website ini dirasakan penulis belum

optimal karena masih belum online dan website ini masih dirasa kurang interaktif

dengan pengguna. Hal ini disebabkan karena pihak perusahaan belum memiliki

hosting (tempat dimana website kita diletakkan di komputer server agar bisa

diakses oleh komputer klien) serta isi daripada website tersebut masih berupa

informasi semata, dan tidak ada interaksi dengan pengunjung website tersebut.

Berdasarkan uraian di atas, maka penulisan skripsi ini mengambil judul

“Pengembangan Website “Youth Studies Center” pada Center for Research on

Inter-Group Relations and Conflict Resolution (CERIC)”. Diharapkan dengan

pengembangan website ini, para remaja bisa saling berbagi pengalaman, cerita,

dan sebagainya yang menjadikan para remaja peduli akan konflik di Indonesia.

Alasan pemilihan remaja didasari penulis karena remaja merupakan tunas harapan

bangsa yang diharapkan menjadi penerus bagi generasi-generasi sebelumnya.

1.2. Perumusan Masalah

Perumusan masalah pada penelitian ini adalah: ”Bagaimana

mengembangkan website untuk ”Youth Studies Center” menjadi online dan

interaktif sehingga menarik minat para remaja?”.

3

Page 20: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

1.3. Batasan Masalah

Penulisan ini hanya membahas pengembangan website “Youth Studies

Center” beserta fitur yang ada. Antara lain :

1. Menggunakan program XAMPP versi 1.6.6a, yang terdiri dari web

server phpmyadmin 5.0.51a, bahasa pemrograman PHP versi 5.0.4, dan

basis data mySQL versi 5.0.51a.

2. Desain website menggunakan Macromedia Dreamweaver 8.0, desain

gambar menggunakan Adobe Photoshop CS 2.0, dan desain animasi

berupa teks 2 dimensi dengan menggunakan Macromedia Flash 8.0.

3. Website “Youth Studies Center” memiliki fitur pencarian (searching),

download, subscriber, forum diskusi, dan buku tamu.

4. Isi website hanya mengenai konflik, dan agenda untuk para remaja yang

dibuat oleh CERIC.

5. Tempat penelitian dilakukan di CERIC, Fisip UI Depok Jawa Barat.

1.4. Tujuan Penulisan dan Manfaat Penelitian

1.4.1. Tujuan Penulisan

Tujuan penulisan skripsi ini adalah mengembangkan website ”Youth Studies

Center” menjadi online dan interaktif serta bersifat dinamis dan mudah digunakan

(user friendly) sehingga dapat menarik minat para remaja.

4

Page 21: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

1.4.2. Manfaat Penelitian

Manfaat dari penulisan ini antara lain :

1. Bagi penulis

Bertambahnya wawasan dan pengalaman penulis tentang ilmu

pengembangan website dan hal lainnya yang berkaitan judul skripsi.

2. Bagi CERIC

a. Memperoleh bantuan dalam pengembangan website “Youth Studies

Center”.

b. Mendapatkan masukan untuk pengembangan website “Youth Studies

Center”.

c. Memudahkan pihak CERIC untuk menambah atau mengubah data

sesuai dengan kondisi yang ada.

3. Bagi Masyarakat Umum

Dapat memberikan informasi mengenai konflik yang terjadi di Indonesia

kepada seluruh masyarakat umumnya, khususnya untuk para remaja agar

peduli akan terjadinya konflik di Indonesia.

5

Page 22: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

1.5. Metodologi Penelitian

Metode yang digunakan penulis dibagi menjadi dua, yaitu metode

pengumpulan data dan metode pengembangan.

1. Metode pengumpulan data

Merupakan metode yang digunakan penulis dalam melakukan analisis

data dan menjadikannya informasi yang akan digunakan untuk mengetahui

permasalahan yang dihadapi.

a. Observasi

Merupakan kegiatan pengamatan yang dilakukan untuk

mengembangkan website “Youth Studies Center” menjadi lebih baik.

b. Wawancara

Kegiatan ini dilakukan untuk memperjelas masalah dasar yang

dikehendaki oleh perusahaan dalam pengembangan website ini.

c. Kuesioner

Kegiatan ini dilakukan untuk mengetahui model dan informasi

seperti apa yang diperlukan dalam pengembangan website ”Youth

Studies Center”.

d. Studi Pustaka

Merupakan pengumpulan bahan-bahan yang berkaitan dengan judul

skripsi melalui membaca buku-buku dari perpustakaan dan mencari

referensi artikel dari internet.

6

Page 23: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

2. Metode Pengembangan.

Dalam pengembangan website yang penulis lakukan dengan

menggunakan metode System Development Life Cycle (SDLC) dengan

model proses waterfall yang dikemukakan oleh Roger S. Pressman (2001 :

28-30) yang meliputi tahap-tahap berikut :

a. System Requirement Analysis

b. Design

c. Code Generation

d. Testing

e. Support

Metode SDLC ini dipilih penulis karena metode ini berjalan secara

berurutan (sequential) sehingga mudah untuk dilakukan. Ketika semua

kebutuhan sistem dapat didefinisikan secara utuh, dan benar di awal project,

maka bisa dipastikan pengembangan sistem dapat berjalan dengan baik dan

tanpa masalah. Namun, ada juga kelemahan dari model ini diantaranya

ketika masalah muncul, maka proses berhenti dan tidak dapat menuju ke

tahapan selanjutnya, lalu karena pendekatannya secara berurut (sequential),

maka setiap tahap harus menunggu hasil dari tahap sebelumnya.

7

Page 24: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

1.6. Sistematika Penulisan

Sistematika penulisan dalam skripsi ini adalah sebagai berikut:

Bab I Pendahuluan

Bab ini berisi latar belakang, perumusan masalah, batasan masalah,

tujuan penelitian, manfaat penelitian, metodologi penelitian dan

sistematika penulisan.

Bab II Landasan Teori

Bab ini menjelaskan konsep dan teori dasar yang mendukung penulisan

skripsi seperti pengertian website, dan fitur-fitur website.

Bab III Metodologi Penelitian

Dalam bab ini akan diuraikan metode-metode yang digunakan penulis

yang berhubungan dengan judul skripsi ini.

Bab IV Pengembangan Website “Youth Studies Center” pada CERIC

Bab ini berisi pengembangan website “Youth Studies Center” pada

CERIC secara keseluruhan.

Bab V Penutup

Bab ini berisi kesimpulan terhadap seluruh penyusunan skripsi yang

telah dilakukan. Saran berisi apa yang penulis perlu sarankan mengenai

hal-hal yang perlu diperbaiki dalam pengembangan website.

8

Page 25: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

BAB II

LANDASAN TEORI

2.1. 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

protokol pertukaran paket data (packet switching communication protokol).

(Melwin Syafrizal , 2005:195).

Sedangkan menurut Budi Sutedjo Dharma Oetomo, Ester Wibowo, Eddy

Hartono, dan Samuel Prakoso (2007:117), internet merupakan sekumpulan

jaringan yang terhubung satu dengan lainnya, dimana jaringan menyediakan

sambungan menuju global informasi. Dari definisi internet diatas, dapat

disimpulkan bahwa melalui internet para pengguna dapat saling berhubungan

melalui jaringan-jaringan komputer yang terkoneksi.

2.1.1 Keunggulan dan Kelemahan Internet

Menurut Husein Umar (2004:68) ada beberapa keunggulan dan

kelemahan yang dimiliki Internet, yaitu :

1. Keunggulan pemanfaatan internet di antaranya:

a. Konektivitas dan jangkauan global

Internet memungkinkan kita dapat mengakses informasi dan

perpustakaan yang lengkap dari seluruh dunia. Berbagai

Page 26: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

jurnal langka yang biasanya sulit didapat di perpustakaan

terlengkap di Indonesia sekalipun, kini tersedia di jaringan

internet.

b. Akses 24 jam

Akses informasi di internet tidak dibatasi waktu karena

lingkup global, dunia maya yang dihadirkan “tidak pernah

tidur”. Perbedaan zona waktu sudah tidak lagi menjadi

kendala untuk menelusuri data di dunia maya.

c. Kecepatan

Bila dibandingkan dengan sumber data tradisional, pencarian

melalui internet jauh lebih cepat karena bersifat real-time.

Kita hanya perlu meng-klik berbagai icon, selanjutnya

menunggu hasil. Pencarian informasi secara elektronik

melalui mesin pencari (search engines) sangat menghemat

waktu, apalagi dibandingkan dengan pencarian lewat katalog

perpustakaan di rak-rak perpustakaan.

d. Kenyamanan

Pengguna internet tidak harus menghadapi berbagai persoalan

birokratis, seperti izin dari berbagai instansi untuk keperluan

pengumpulan data, kerahasiaan informasi, dan keharusan

untuk datang sendiri ke instansi untuk mengakses berbagai

situs di internet.

10

Page 27: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

e. Kenyamanan Akses

Menjaminnya bisnis warnet (warung internet) di Indonesia,

khususnya di kota-kota besar, menjadikan akses terhadap

internet menjadi lebih mudah. Persaingan antar warnet dalam

hal harga, kecepatan akses, dan fasilitas pendukung lainnya,

menjadikan para pengguna internet lebih nyaman dan mudah

memanfaatkan internet.

f. Biaya Relatif Murah

Dibandingkan dengan membeli jurnal yang asli (misalnya

jurnal McKinsey-Quarterly), penelusuran informasi lewat

internet jauh lebih murah, apalagi banyak situs menyediakan

jasa informasi secara cuma-cuma. Pengguna dapat men-

download lalu mencetaknya.

g. Interaktivitas dan Fleksibilitas

Topik dan hasil informasi yang didapat bisa didiskusikan

melalui sarana mailing list atau chatting. Selain itu, pengguna

juga bisa mengikuti perkembangan terbaru atau meminta

komentar dan penilaian dari berbagai pihak.

2. Kelemahan pemanfaatan internet di antaranya:

a. Selektivitas dan Anonimitas

Salah satu persoalan dalam pencarian informasi adalah

sulitnya mengidentifikasi identitas responden. Setiap orang

11

Page 28: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

bisa memiliki sejumlah alamat email yang berbeda dan belum

tentu menggunakan identitas yang asli.

b. Clutter dan Never-ending Search

Informasi yang tersedia di internet sangat besar jumlahnya,

namun tidak semuanya dibutuhkan.

c. Virus

Salah satu masalah yang juga tak kalah peliknya adalah

resiko terkena virus komputer yang mudah menyebar lewat

jaringan internet, baik lewat email maupun file-file yang di-

download. Misalnya, virus “I Love You” yang disebarkan

lewat email yang pernah menghebohkan dunia.

d. Reliabilitas dan Validitas Sumber Acuan

Tidak semua data dan informasi yang didapat lewat internet

itu andal dan valid untuk dijadikan acuan dalam mencari

informasi. Sumber informasi di internet mudah berubah,

misalnya homepage yang sudah berubah atau bahkan sudah

tidak ada lagi.

e. Karakteristik Demografi Pemakai Internet

Berbagai riset menunjukkan bahwa internet lebih efektif

untuk menjangkau responden yang termasuk kelompok

berdaya beli atau berpenghasilan dan berpendidikan relatif

tinggi. Dengan demikian, internet kurang efektif bagi

12

Page 29: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

penelitian yang kelompok sampelnya adalah masyarakat

golongan menengah ke bawah.

f. Ketergantungan pada Jaringan Telepon dan ISP

Fasilitas jaringan telepon dan Internet Service Provider (ISP)

sangat berpengaruh terhadap biaya pemakaian internet dan

kemungkinan akses secara keseluruhan. Hingga saat ini,

biaya penggunaan internet di Indonesia masih relatif mahal

karena tarif telepon ditentukan berdasarkan pulsa yang

digunakan, bukan berdasar jumlah panggilan. Selain itu,

saluran telepon di Indonesia masih relatif lambat, yang

menyebabkan waktu akses menjadi lebih lama dan biaya

akses menjadi mahal.

2.1.2. Sejarah Internet

Sejarah terciptanya internet dimulai di Amerika, saat itu dalam

keadaan perang. Sebelum internet ada, US Defense Advanced Research

Projects Agency (ARPAnet) atau Departemen Pertahanan Amerika pada

tahun 1969 membuat jaringan komputer yang tersebar untuk menghindari

terjadinya informasi terpusat, yang apabila terjadi perang dapat mudah

dihancurkan. Bila satu bagian dari sambungan jaringan (network) terganggu

serangan musuh, jalur yang melalui sambungan itu secara otomatis

dipindahkan ke sambungan lainnya.

13

Page 30: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

Setelah itu internet digunakan oleh kalangan akademis (UCLA)

untuk keperluan penelitian dan pengembangan teknologi. Selanjutnya

pemerintah Amerika Serikat memberikan izin ke arah komersial pada awal

tahun 1990. Setelah puluhan tahun, internet muncul dengan keanekaragaman

aplikasi yang ada sehingga dapat mempengaruhi sebagian besar kegiatan

yang dilakukan oleh manusia. (Bunafit Nugroho, 2004 :1).

2.1.3. Hosting

Hosting adalah tempat dimana kita meletakkan web kita dalam

sebuah komputer server sehingga dapat dipanggil dan diakses oleh komputer

klien melalui alamat yang disebut domain. (Bunafit Nugroho, 2004:10)

2.1.4. E-mail

E-mail merupakan singkatan electronic mail atau surat elektronik.

E-mail biasa diasosikan dengan pengiriman surat lewat internet. E-mail ialah

surat yang dikirimkan secara elektronis melalui internet maupun jaringan

komputer seperti jaringan komputer kantor, universitas, dan lain-lain. (Budi

Sutedjo Dharma Oetomo, Ester Wibowo, Eddy Hartono, dan Samuel

Prakoso, 2007:191).

2.1.5. Chatting

Chatting adalah komunikasi melalui internet di kalangan anak muda.

Komunikasi merupakan hal mendasar bagi manusia. Oleh karena itu,

14

Page 31: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

manusia akan mencari banyak teman untuk saling bertukar pendapat,

berbagi pengalaman (sharing), dan lain sebagainya. Semakin majunya dunia

komputer saat ini telah merambah dunia telekomunikasi pula. Dengan

menggunakan teknologi internet, seseorang dapat melakukan komunikasi

dengan orang lain. Banyak fasillitas internet yang disediakan untuk

berkomunikasi, salah satunya yaitu chatting.( Budi Sutedjo Dharma

Oetomo, Ester Wibowo, Eddy Hartono, dan Samuel Prakoso, 2007:231)

2.1.6. Internet Engineering Task Force (IETF)

IETF merupakan organisasi internasional yang mengatur standar

teknis internet. IETF merupakan pihak yang mempublikasikan spesifikasi

yang membuat standar protokol TCP/IP. (www.telkom.net). Tiga standar

yang dinilai adalah :

1. Presence and Instant Messaging (PRIM), protokol IM yang bekerja pada

TCP/IP.

2. Protokol transfer email yang disebut Session Initiation Protocol (SIP),

yang digunakan oleh Instant Messaging and Presence Leveraging

Extensions (SIMPLE).

3. Instant Messaging Exchange Protocol (IMXP), yang berbasis Blocks

Extensible Exchange Protocol.

15

Page 32: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

2.2. Protokol

Di dalam internet dikenal beberapa protokol yaitu:

2.2.1. Transmission Control Protocol/Internet Protocol (TCP/IP)

TCP/IP adalah sekumpulan protokol yang terdapat di dalam jaringan

komputer (network) yang digunakan untuk berkomunikasi atau bertukar data

antar komputer. TCP/IP merupakan protokol standar pada jaringan internet

yang menghubungkan banyak komputer yang berbeda jenis mesin maupun

sistem operasi agar dapat berinteraksi satu sama lain. (Melwin Syafrizal,

2005 : 96). TCP/IP dirancang untuk menjadi komponen inti perangkat lunak

dari suatu jaringan. Semua bagian di dalam keluarga TCP/IP memiliki tugas

tersendiri, misalnya mengirim e-mail, mentransfer file, dan sebagainya.

2.2.2. HyperText Transfer Protocol (HTTP)

HTTP merupakan protokol yang digunakan untuk mentransfer data

antara web server ke web browser. Protokol ini mentransfer dokumen-

dokumen web yang ditulis atau berformat HTML. (Onno W. Purbo,

Akhmad Daniel S, 2000:2).

Sedangkan menurut Wahana Komputer (2003:3), HTTP adalah

suatu protokol untuk menentukan aturan yang harus diikuti oleh web

browser dalam meminta atau mengambil suatu dokumen, dan oleh web

server dalam menyediakan dokumen yang diminta. Protokol ini

merupakan protokol standar yang digunakan untuk mengakses dokumen

HTML. Contoh penggunaan protokol HTTP dalam web yaitu

16

Page 33: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

http://www.yahoo.com. Dari definisi HTTP diatas, dapat disimpulkan

bahwa melalui HTTP kita dapat meminta atau mengambil suatu dokumen-

dokumen web dari browser.

HTTP menggunakan urutan request/response: Sebuah HTTP client

membuka koneksi dan mengirim sebuah pesan permintaan pada HTTP

server kemudian mengirimkan pesan response, biasanya berisikan

resource yang diminta. Setelah mengirimkan response, server menutup

koneksi (membuat HTTP menjadi protokol tanpa status, contoh, tidak

memelihara beberapa informasi koneksi diantara transaksi). Format dari

pesan permintaan dan response adalah sama, dan berorientasikan bahasa

inggris. Kedua jenis pesan mengandung sebuah garis inisial, nol atau lebih

garis header, dan sebuah garis kosong, dan pesan body optional (e.g.

sebuah file, atau data query, atau keluaran query).

1. HTTP Requests

Permintaan-permintaan dari client ke server berisikan informasi

tentang macam-macam data yang user inginkan. Salah satu item

informasi yang dienkapsulasi pada permintaan HTTP adalah sebuah

nama method. Ini memberitahu server macam-macam permintaan

yang dibuat, sebagaimana sisa pesan dari client diformat. Ada tiga

protokol yang mungkin akan digunakan : GET, POST, dan PUT.

a. GET

GET adalah method HTTP paling sederhana dan digunakan sebagian

besar untuk meminta resource tertentu dari server, apakah berupa

17

Page 34: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

halaman web, file gambar grafis, atau sebuah dokumen, dan lain-lain.

GET dapat juga digunakan untuk mengirim data di atas server,

meskipun demikian hal itu mempunyai batasan-batasan. Jumlah total

karakter yang dapat dienkapsulasi ke dalam permintaan GET adalah

terbatas, sehingga untuk situasi dimana banyak data perlu dikirimkan

ke server, tidak semua pesan dapat disampaikan. Batasan lain method

permintaan GET ketika mengirim data adalah data yang Anda kirim

menggunakan method ini ditambahkan pada URL yang Anda kirim ke

server. (Untuk sekarang, asumsikan URL sebagai alamat unik yang

akan dikirim ke server sebagai penandaan lokasi yang diminta). Salah

satu permasalahannya adalah URL dari beberapa permintaan yang

diinginkan ditampilkan pada bar browser pada beberapa browser. Hal

ini berarti, bahwa beberapa data sensitif seperti password atau

informasi kontak (contact information) dapat diterlihat oleh siapapun.

Keuntungan dari penggunaan GET dalam pengiriman data di atas

server adalah permintaan URL dari permintaan GET dapat dibookmark

oleh browser. Hal ini berarti bahwa user dapat dengan mudah mem-

bookmark permintaannya dan mengakses setiap saat dari pada melalui

proses tiap waktu. Hal ini juga dapat membahayakan jika bookmark

secara fungsional bukan merupakan sesuatu yang diinginkan pada

user, sebagai gantinya menggunakan method lain.

18

Page 35: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

b. POST

Jenis lain dari method permintaan yang pasti akan digunakan adalah

permintaan POST. Jenis permintaan ini didesain seperti browser dapat

membuat permintaan kompleks dari server. Mereka didesain sehingga

user, melalui browser, dapat mengirim banyak data ke server. Form

kompleks secara umum dicapai dengan menggunakan permintaan

POST, sebagaimana form sederhana yang memelukan proses upload

file ke server. Satu perbedaan yang nyata antara method GET dan

POST terletak pada cara mengirimkan data ke server. Seperti yang

dinyatakan sebelumnya, GET hanya menambahkan data ke URL yang

akan mengirim. POST, di sisi lain, mengenkapsulasi atau

menyembunyikan data di dalam body pesan (message body) yang

dikirim. Ketika server menerima permintaan dan menentukan bahwa

itu merupakan sebuah permintaan POST, dapat dilihat dari body pesan

data tersebut.

c. PUT

Berfungsi untuk meng-upload representasi dari sumber tertentu

2. HTTP Response

HTTP merespon dari server yang berisi headers dan body pesan,

seperti yang permintaan HTTP lakukan. Mereka menggunakan

kumpulan header yang berbeda, meskipun demikian disini kita tidak

perlu terlalu dalam membahasnya secara detail. Cukup dengan

19

Page 36: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

mengatakan bahwa headers berisi informasi tentang protokol HTTP

yang digunakan pada server, sebagaimana tipe dari isi yang

dienkapsulasi ke dalam body pesan. Nilai dari tipe isi adalah MIME-

type. Ini akan memberitahu browser jika pesan berisi HTML, gambar,

atau tipe lainnya. (http://www.himawansidharta.blogspot.com)

2.3. World Wide Web (WWW)

WWW adalah sebuah jaringan global situs internet multimedia untuk

informasi, hiburan, pendidikan, dan bisnis. WWW juga merupakan sistem

hypertext yang terangkai menjadi jaringan, yang memungkinkan dokumen dibaca

banyak orang melalui internet. (M. Suyanto, 2003:45).

Sedangkan menurut Husein Umar (2004:66), WWW merupakan fasilitas

berbagai jasa internet, seperti e-mail, telnet, File Transfer Protocol (FTP),

HyperText Transfer Protocol (HTTP) dan banyak lagi. Dengan WWW pengguna

dapat melihat dan menelusuri dokumen-dokumen yang ada di dalam WWW. Dari

definisi WWW diatas, dapat disimpulkan bahwa WWW dapat menyediakan

berbagai dokumen yang dapat diakses melalui website dari seluruh dunia dengan

hanya mengklik pilihan-pilihan pada menu tertentu.

2.4. Uniform Resource Locators (URL)

Untuk memanfaatkan internet dibutuhkan URL yang merupakan suatu

sarana yang digunakan untuk menentukan lokasi informasi pada suatu web server.

20

Page 37: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

Biasanya suatu alamat diketik pada address bar adalah protokol transfer dan nama

host saja.(Wahana Komputer, 2003:3).

Dari definisi URL diatas, dapat disimpulkan bahwa URL sebagai alamat dari

web yang dituju pada web browser. Berikut ini adalah tabel format umum suatu

URL yaitu :

Tabel 2.1 Format Umum URL (Wahana Komputer, 2003:3)

Protokol transfer://nama host/path/nama file

Contoh : http://MTV/DJ/index.html

Keterangan :

- Protokol transfer adalah protokol yang

digunakan oleh suatu browser utnuk

mengambil informasi.

- Nama host adalah nama dari komputer

dimana informasi tersebut berada.

- Path/nama file adalah jalur serta nama file

dari suatu informasi.

2.5. Domain Name System (DNS)

DNS adalah sistem penamaan server komputer. DNS membuat suatu

tingkat-tingkat domain yang merupakan kelompok komputer yang terhubung ke

internet. (Wahana Komputer, 2003:5). Sedangkan menurut Bunafit Nugroho

(2004:7) DNS adalah domain dalam internet yang fungsinya sebagai nama atau

alamat. Domain ini sebenarnya adalah sebuah alamat pengganti untuk

Transmission Control Protocol/Internet Protocol (TCP/IP). Jadi, jika kita

memiliki sebuah komputer yang dijadikan web server, maka kita juga bisa

memanggilnya dengan alamat IP pada halaman browser.

Nama domain dapat dibedakan menjadi dua kategori, yaitu Domain

Internasional, dan Domain Negara. Dengan adanya pembagian nama Domain

21

Page 38: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

pada setiap negara, maka kita tidak akan kesulitan untuk mengetahui asal web

tersebut. Berikut ini tabel-tabel DNS yaitu:

Tabel 2.2 Kode Domain Internasional (Husein Umar, 2004:67)

Kode DNS di Amerika

Serikat Kode DNS di luar

Amerika Serikat

Arti Kode DNS

.edu .ac atau .edu Education

.com .co Commercial

.gov .go atau .gov Government

.mil __ __ Military

.net .net Network Provider

.org .or Orgranization

.arpa __ __ Arpanet

.int __ __ International Organization

Tabel 2.3 Kode Domain Negara (Husein Umar, 2004:67) Kode Negara Kode Negara

.ar Argentina .nl Belanda .au Australia .nz Selandia Baru .br Brazil .ph Filipina .ca Kanada .ru Rusia .cn RRC .sa Arab Saudi .dk Denmark .sq Singapura .eg Mesir .es Spanyol .fr Perancis .se Swedia .de Jerman .ch Swiss .hk Hongkong .tw Taiwan .in India .th Thailand .id Indonesia .tr Turki .it Italia .uk Inggris .jp Jepang .us Amerika Serikat .kr Korea Selatan .va Vatikan .my Malaysia .vn Vietnam .be Belgia .mm Myanmar .gr Yunani .ng Nigeria .ir Iran .no Norwegia .iq Iraq .pk Pakistan .ie Irlandia .pt Portugal .il Israel .za Afrika Selatan

.kw Kuwait .yu Yugoslavia

.mx Mexico .kp Korea Utara

22

Page 39: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

2.6. Website

Website merupakan fasilitas hiperteks untuk menampilkan data berupa teks,

gambar, suara, animasi, dan data multimedia lainnya. Penggolongan website

berdasarkan isinya (website contents) terdiri dari dua jenis yaitu (Wahana

Komputer, 2006:2) :

1. Web Statis

Web statis adalah web yang berisi / menampilkan informasi-informasi

yang sifatnya statis (tetap). Disebut statis karena pengguna tidak dapat

berinteraksi dengan web tersebut. Singkatnya, untuk mengetahui suatu web

lain dan berisi suatu informasi yang tetap maka web tersebut disebut statis.

Pada web statis, pengguna hanya dapat melihat isi dokumen pada

halaman web dan apabila diklik akan berpindah ke halaman web yang lain.

Interaksi pengguna hanya terbatas dapat melihat informasi yang

ditampilkan, tetapi tidak dapat mengolah informasi yang dihasilkan. Web

statis biasanya berupa HyperText Markup Language (HTML) yang ditulis

pada editor teks dan disimpan dalam bentuk .html atau .htm.

Pengertian HTML adalah bahasa yang menggunakan perintah sederhana

dalam standar dokumen untuk menyediakan suatu tampilan visual yang

terintegrasi. HTML terdiri atas perintah-perintah sederhana yang

menjelaskan bagaimana struktur dokumen, tetapi tidak memformatnya.

Browser yang menampilkan HTML akan memformat dan menyesuaikan

tampilan HTML sehingga sesuai dengan layar komputer pengunjung.

(Wahana Komputer, 2006:79).

23

Page 40: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

2. Web Dinamis

Web dinamis adalah web yang menampilkan informasi serta dapat

berinteraksi dengan pengguna. Web yang dinamis memungkinkan pengguna

untuk berinteraksi menggunakan form sehingga dapat mengolah informasi

yang ditampilkan. Web dinamis bersifat interaktif, tidak kaku, dan terlihat

lebih indah.

Web dinamis biasanya berupa Page Hypertext Preprocessor (PHP) yang

membuat halaman web HTML menjadi dinamis. HTML yang digabung

dengan script PHP akan menghasilkan tampilan web yang dinamis, indah,

dan interaktif. (Wahana Komputer, 2006:80).

2.6.1. Prinsip-Prinsip Desain Website

Menurut Wahana Komputer (2005:8-115) ada sembilan prinsip yang

harus diperhatikan dalam mendesain sebuah website agar memperoleh hasil

yang baik dan efektif, yaitu :

1. Website dibuat untuk pengguna

Dalam proses merancang web harus memfokuskan desainnya

pada kepentingan pengguna (user). Hal ini juga berarti, perancang

web harus menganggap pengguna adalah seorang yang awam

terhadap segala aspek yang ada pada website. Apa yang diinginkan

oleh perancang belum tentu menjadi apa yang diinginkan pengguna.

Perancang web juga harus mempertimbangkan karakter pengguna

yang berbeda satu sama lain. Pengguna yang mengunjungi website

24

Page 41: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

berasal dari latar belakang, kebudayaan, pendidikan, dan kepentingan

yang berbeda–beda maka desain web yang dibuat setidaknya harus

mewakili selera sebagian besar pengguna.

2. Utility dan Usability

Utility adalah kegunaan atau fungsionalitas suatu web.

Sedangkan usability adalah sifat website yang mendukung

kemampuan pengguna dalam memanipulasi website sehingga

pengguna memperoleh apa yang diperlukannya.

Beberapa ciri dari usability antara lain : dapat dipelajari dengan

mudah, penggunannya efisien, mudah diingat, dan membuat

pengguna menjadi puas.

3. Correctness

Correctness maksudnya tidak ada kesalahan dalam penulisan

script website, antara lain :

a. Dalam penulisan script HTML tidak ada kesalahan.

b. Gambar – gambar yang ditampilkan sesuai yang diharapkan.

c. Tidak ada kesalahan dalam sistem navigasi.

4. Batasan media internet dan web

a. Browser

1). Membuat website yang biasa dipakai di setiap browser,

dan memperhatikan pilihan setting browser para

pengguna, sehingga halaman tersebut dapat tampil

dengan lebih maksimal.

25

Page 42: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

2). Sedapat mungkin buatlah website dengan teknologi yang

paling compatible dan dapat di-load oleh sebagian besar

browser sehingga bisa diterima oleh lebih banyak

pengguna.

b. Bandwidth

Untuk menghasilkan website yang menarik namun tetap cepat

di-load maka ini berpengaruh juga terhadap besarnya file

total website yang akan dibuat, juga termasuk gambar-

gambar yang digunakan.

Untuk website yang baik, loading halaman web tidak lebih

dari 8 detik dan ukuran file setiap halaman HTML beserta

gambar–gambarnya tidak lebih dari 65 Kb, agar pengguna

yang mengunjungi situs tersebut tidak menjadi jenuh dan

pindah ke situs lain.

5. Website harus memperhatikan aspek Graphical User Interface

(GUI).

Website yang baik harus mudah dipahami pada saat pertama kali

pengguna mengunjungi website tersebut karena pada saat itulah yang

menentukan apakah pengguna akan mengunjungi website itu lagi.

6. Struktur Link dan Navigasi

Website harus memiliki navigasi dan link yang jelas, agar

pengguna tidak tersesat karena link yang disediakan kurang jelas.

Pengguna harus dapat menjelajahi semua halaman dengan mudah,

26

Page 43: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

mendapatkan informasi tentang halaman yang sedang dikunjungi dan

yang sudah dikunjungi, dan juga perlu diperhatikan kecepatan

pengguna dalam mendapatkan informasi yang diinginkan, misalnya

dengan cara mengatur link sedemikian rupa sehingga pengguna

mendapatkan informasi kurang dari 5 kali melakukan klik. Hal ini

sangat penting artinya untuk kepuasaan dan kenyamanan pengguna

terhadap website.

7. Alat bantu

a. Peta Situs

Penggunaan peta situs dapat mempermudah pengguna

dalam memahami tentang isi dan halaman pada website.

b. Search engine

Sebaiknya dibuat search engine (mesin pencari) untuk

mempermudah pengguna dalam mencari informasi yang

diinginkan sehingga pengguna cukup mengetikkan kata

kunci untuk informasi yang diinginkan dan informasi

dapat segera ditampilkan.

8. Tampilan visual

Tampilan visual sangat mempengaruhi persepsi awal pengguna

mengenai suatu website. Sebaiknya tampilan visual website

disesuaikan dengan tema website itu sendiri. Untuk membuat website

yang menarik tidak selalu harus dengan warna–warna cerah atau

desain meniru yang meniru situs–situs lain yang populer, yang

27

Page 44: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

terpenting adalah bagaimana tampilan visual website dapat

memberikan kesan tersendiri bagi pengguna atau secara singkat

desain yang dibuat memiliki keunikan tersendiri.

Berikut pemilihan warna, dan typografi dikutip dari

www.toekangweb.or.id (22 Maret 2006) :

a. Warna

Warna adalah hal yang pertama dilihat oleh seorang

pengunjung (terutama warna background), dan seorang

desainer web bisa membuat situs untuk menampilkan warna

dulu sementara content yang lain (text dan image) masih

dalam proses download. Cara ini akan membuat kesan atau

mood untuk seluruh situs itu.

Untuk mencapai desain warna yang efektif, bisa dimulai

dengan memilih warna yang bisa merepresentasikan tujuan

dari situs tersebut. Pallet warna yang dibuat sebaiknya sesuai

dengan pribadi dan tujuan dari situs. Jika misalnya situs

tersebut adalah untuk situs komunitas, maka sebaiknya

memilih warna-warna hangat untuk membuat suasana lebih

santai. Jika situs tersebut adalah untuk situs informasi,

dimana content akan mendominasi, maka warna sebaiknya

simple dan tidak mengganggu (misalnya tidak menggunakan

background bunga-bunga dengan warna menyolok).

28

Page 45: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

Jadi penggunaan warna yang cocok, juga harus didukung

oleh pemahaman tentang apa arti warna tersebut di demografi

pengunjung yang dituju.

Berikut ini tabel korelasi secara umum dan secara psikologis

antara warna dan orang :

Tabel 2.4. Korelasi Secara Umum dan Secara Psikologi

antara Warna dan Orang. (www.toekangweb.or.id/07-tips-

bentukwarna1.html)

Warna Respon Psikologi Catatan

Merah Power, energi,

kehangatan, cinta,

nafsu, agresif,

bahaya.

Warna merah kadang berubah

arti jika dikombinasikan

dengan warna lain.

Merah dikombinasikan dengan

warna hijau maka akan

menjadi simbol natal.

Merah jika dikombinasikan

dengan warna putih akan

mempunyai arti ‘bahagia’ di

budaya oriental. Biru Kepercayaan,

konservatif,

keamanan,

teknologi,

kebersihan,

keteraturan.

Banyak digunakan sebagai

warna pada logo Bank di

Amerika Serikat untuk

memberikan kesan

‘kepercayaan’

Hijau Alami, sehat,

keberuntungan,

pembaharuan.

Warna hijau tidak terlalu

‘sukses’ untuk ukuran global.

Di Cina dan Perancis kemasan

dengan warna hijau tidak

begitu mendapat sambutan. Kuning Optimis, harapan,

filosofi,

ketidakjujuran,

pengecut (untuk

budaya barat),

penkhianatan.

Kuning adalah warna keramat

dalam agama Hindu.

Ungu/jingga Spiritual, misteri,

kebangsawanan,

transformasi,

kekerasan,

keangkuhan.

Warna ungu sangat jarang

ditemui di alam.

Oranye Energy,

keseimbangan, Menekankan sebuah produk

yang tidak mahal.

29

Page 46: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

Warna Respon Psikologi Catatan

kehangatan. Coklat Tanah/bumi,

reliability, comfort,

daya tahan.

Kemasan makanan di Amerika

sering memakai warna coklat

dan sangat sukses, tetapi di

Kolombia, warna coklat untuk

kemasan kurang begitu

membawa hasil. Abu-abu Intelek, masa depan

(kayak warna

milenium),

kesederhanaan,

kesedihan.

Warna abu-abu adalah warna

yang paling gampang/mudah

dilihat oleh mata.

Putih Kesucian,

kebersihan,

ketepatan,

ketidakbersalahan,

steril, kematian.

Di Amerika, putih

melambangkan perkawinan

(gaun pengantin berwarna

putih), tapi di banyak budaya

Timur (terutama India dan

Cina), warna putih

melambangkan kematian. Hitam Power, seksualitas,

kecanggihan,

kematian, misteri,

ketakutan,

kesedihan,

keanggunan.

Melambangkan kematian dan

kesedihan di budaya Barat.

Sebagai warna kemasan, hitam

melambangkan keanggunan

(elegance), kemakmuran

(wealth) dan kecanggihan

(Sopiscated).

b. Typografi

Typografi adalah sebuah seni. Dan adalah sebuah seni yang

cukup rumit, apalagi kerumitannya ditambah dengan medium

desain web yang terbatas. Huruf di Web dapat dibuat sebagai

bagian dari grafik (image), atau dengan cara HTML.

Jika komputer si pengunjung tidak mempunyai bentuk huruf

yang telah diset oleh designer web, maka yang akan

digunakan adalah tampilan menggunakan bentuk huruf

alternatif atau bentuk huruf standar (default).

30

Page 47: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

Designer dapat menentukan pilihan tentang huruf yang

mereka buat secara grafik (image), dan juga typeface umum

yang dipakai pada isi teks. Terlalu banyaknya bentuk huruf

yang ada di dunia ini menyebabkan susahnya untuk

menentukan efek/pengaruh apa yang bisa ditimbulkan kepada

pengunjung. Akan tetapi, huruf dibagi dalam beberapa

kategori umum, dan biasanya kategori umum ini memiliki

gaya tersendiri, seperti pada tabel berikut :

Tabel 2.5. Kategori Huruf

(www.toekangweb.or.id/07-tips-bentukwarna3.html)

Jenis Huruf Keterangan Catatan

Jenis huruf (Typefaces)

dengan

strokes/ekor,dinamakan

serifs, menghiasi jenis

huruf ini. Contoh paling

umum adalah Times.

Jenis huruf yang tidak

memiliki stroke/ekor.

Ujungnya bisa berbentuk

tumpul (rounded corner)

atau tajam. Bentuk huruf

Sans-Serif yang paling

populer adalah Helvetica,

dan Arial.

Setiap huruf yang berjenis

Monospace mempunyai

jarak/lebar yang sama

setiap hurufnya. Huruf W

dan I akan mempunyai

ruang yang sama. Contoh

huruf Monospace adalah

Courier. Huruf pada mesin

tik juga adalah contoh

huruf monospace.

Bentuk huruf yang formal.

Serif mengekspresikan

organisasi dan

intelektualitas. Sangat

anggun dan konservatif.

Kurang formal, lebih

hangat, dan bersahabat.

Sans-Serif biasanya sangat

cocok sebagai screen font

(untuk tampilan di layar

monitor) karena tajam dan

gampang untuk dibaca.

Berdasarkan pada dasar

mesin ketik.Jenis

Monospace banyak

digunakan oleh

programmer untuk codding

dan juga untuk

performatted text.

Belakangan ini banyak,

bentuk Monospace banyak

dipakai oleh designer-

designer yang beraliran

“grunge” alternatif.

31

Page 48: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

9. Kombinasi tampilan, isi, teknologi, kegunaan dan tujuan

Prinsip ini pada dasarnya adalah gabungan dari semua prinsip di

atas karena sebuah website yang baik harus dapat menggabungkan

semua prinsip tersebut menjadi satu kesatuan yang mendukung

tujuan pembuatan website tersebut.

2.6.2. Home page

Home page adalah halaman utama pada sebuah website. Halaman

inilah yang akan ditampillkan ketika Anda memanggil sebuah website

walaupun Anda tidak menyebutkan halaman tersebut. (Abdul Kadir,

2005:6). Dari definisi home page diatas, dapat disimpulkan bahwa home

page merupakan halaman awal atau halaman muka saat pengguna

mengunjungi website tersebut.

2.6.3. Web Browser

Web browser adalah salah satu jenis program client yang dapat

mengakses beberapa layanan internet. Jenis browser pada saat ini antara

lain: Microsoft Internet Explorer, Mozilla Firefox, Netscape Navigator,

Opera dan Safari. (H. Sembiring, 2001: 5).

2.6.4. Web Server

Web server adalah sebuah bentuk server yang khusus digunakan

untuk menyimpan halaman website atau homepage. (Bunafit Nugroho,

32

Page 49: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

2004:6). Jenis web server yang ada pada saat ini, yaitu: Apache (open

source) yang dapat berjalan pada sistem operasi Windows dan Linux serta

Internet Information Sevice (IIS) yang berjalan pada program Windows.

2.7. Bahasa Pemrograman

Bahasa pemrograman adalah istilah yang menerangkan bahasa yang dapat

dimengerti oleh komputer. (Wahana Komputer, 2006:55). Ada 2 kategori dalam

pemrograman web, yaitu pemrograman client side dan server side.(Wahana

Komputer, 2006 : 3-7):

1. Client Side :

Pada pemrograman client side, perintah-perintah program (script)

dijalankan web browser, sehingga ketika client meminta dokumen script

maka script dapat di-download dari server kemudian dijalankan pada

browser yang bersangkutan. Program web yang tergolong dalam client

side adalah:

a. HTML (Hypertext Markup Language), yaitu bahasa yang

menggunakan perintah sederhana dalam standar dokumen untuk

menyediakan suatu tampilan visual yang terintegrasi.

b. XHTML (Extensible Markup Language), yaitu formulasi dari

HTML menggunakan bahasa XML.

33

Page 50: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

2. Server Side :

Pada pemrograman server side, perintah-perintah program (script)

dijalankan di web server, kemudian hasil dikirimkan ke browser dalam

bentuk HTML biasa. Program web yang tergolong server side adalah :

a. PHP (Page Hypertext Preprocessor), yaitu bahasa pemrograman

yang menjadikan website lebih dinamis. 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. Dapat berjalan diatas web server

Apache maupun IIS (Internet Information Services).

b. ASP (Active Server Pages), yaitu bahasa pemrograman yang

diciptakan oleh Microsoft dan hanya dapat berjalan diatas web server

IIS (Internet Information Services).

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 akses ke beberapa database yang sudah ada, baik yang

bersifat gratis (free) ataupun komersial. Database itu antara lain

MySQL, PosgreSQL, dan lain-lain.

34

Page 51: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

d. Memiliki tingkat keamanan yang tinggi, mampu berjalan di

beberapa server yang ada, misalnya Apache, Microsoft IIS, dan

sebagainya.

e. Mampu berjalan di platform sistem operasi Windows, Linux,

Solaris, dan lain-lain.

Namun, diantara keunggulannya ada juga beberapa kelemahannya

(http://www.google.co.id/search?hl=id&q=kelemahan+php+yaitu&btn

G=Telusuri+dengan+Google&meta=:) yaitu :

a. Sebagai konsekuensi dari kepraktisan dan kemudahannya, instalasi

default PHP banyak memiliki kelemahan keamanan, dimana

variabel global di PHP dapat berasal dari form masukan

pengunjung web (dari GET/POST/Cookie), sehingga bila kita

ceroboh tidak menginisialisasi tiap variabel sebelum pemakaian,

maka seorang yang iseng dapat memasukkan nilai-nilai awal

variabel ke dalam skrip untuk mengubah kelakuannya.

b. Karena model pemrograman di PHP bersifat embedded

(ditempelkan atau tercampur dengan HTML), maka kita harus

berhati-hati apabila aplikasi yang dibuat nantinya sudah besar dan

kompleks agar scriptnya tidak berantakan/acak-acakan.

c. Di PHP, kita tidak bisa membuat fungsi dalam fungsi atau kelas

dalam kelas, semuanya hanya terbatas dalam satu level saja.

d. Model Objek PHP masih sangat minim, karena tidak memiliki

multiple inheritance, yaitu kemampuan untuk mewarisi dua atau

35

Page 52: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

lebih kelas induk. Padahal Multiple inheritance sangat berguna

untuk fleksibilitas dalam pengembangan pemrograman berbasis

objek (Object Oriented Programming).

2.8. Basis Data

Menurut Ramakrishnan dan Gehrke (2003) yang dikutip oleh Janner

Simarmata dan Iman Paryudi (2006:1) basis data merupakan kumpulan data yang

umumnya mendeskripsikan aktifitas suatu organisasi atau lebih yang

berhubungan.

Sekarang banyak pengembang website telah menggunakan sistem basis data

agar mudah mengelola website tersebut. Dengan mudahnya sistem pengelolaan

menggunakan website maka web akan lebih dinamis dalam memberikan informasi

ke pengguna. Sedangkan bagi pengelola tidak repot dalam proses updating dan

upload ke server.

(http://209.85.175.104/search?q=cache:OAHFfUApmOcJ:institut.aidsina.org/mod

/resource/view.php%3Finpopup%3Dtrue%26id%3D18+kelemahan+mysql+adala

h&hl=id&ct=clnk&cd=12&gl=id).

Komponen penyusun basis data menurut Janner Simarmata (2006:36) yaitu:

1. Skema basis data

Skema basis data adalah sekelompok objek dalam basis data yang saling

berhubungan atau memiliki relasi.

36

Page 53: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

2. Tabel

Tabel adalah unit penyimpan fisik utama untuk data dalam basis data.

Pada saat melakukan akses basis data, maka pengguna mengacu pada

tabel untuk data yang diinginkan.

3. Kolom atau field

Kolom adalah kategori informasi yang terdapat di dalam tabel.

4. Baris

Baris atau record adalah kumpulan semua kolom yang berhubungan

dengan kejadian tunggal.

5. Tipe data

Tipe data menentukan tipe data yang disimpan didalam kolom.

Umumnya hanya terdapat tiga tipe data yang digunakan, yaitu:

Alfanumerik, Numerik dan tanggal atau waktu.

2.8.1 My Structure Query Language (MySQL)

Salah satu aplikasi basis data adalah MySQL yang merupakan sebuah

program pembuat basis data yang bersifat open source, artinya siapa saja

boleh menggunakannya dan tidak 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

yang dimiliki MySQL menurut Wahana Komputer (2006:182) yaitu:

37

Page 54: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

a. Ditulis dalam bahasa C dan C++.

b. Bekerja dalam berbagai platform (misalnya Windows, Mac OS X,

Solaris, Unix, dan lain-lain).

c. Menyediakan mesin penyimpanan (engine storage) transaksi dan

non transaksi.

d. Server tersedia sebagai program yang terpisah untuk digunakan

pada lingkungan jaringan klien/server.

e. Mempunyai library yang dapat ditempelkan pada aplikasi yang

berdiri sendiri (standalone application) sehingga aplikasi tersebut

dapat digunakan pada komputer yang tidak mempunyai jaringan.

f. Mempunyai sistem password yang fleksibel dan aman.

g. Klien dapat terkoneksi ke MySQL server menggunakan soket

TCP/IP pada platform mana pun.

h. Server dapat mengirim pesan kesalahan ke klien dalam berbagai

bahasa.

MySQL termasuk jenis RDBMS (Relational Database Management

System). Pada MySQL sebuah basis data terdiri atas tabel-tabel dan sebuah

tabel terdiri atas baris dan kolom.

2.9. Rekayasa Piranti Lunak

Saat ini rekayasa piranti lunak telah berkembang dengan cepat seiring

dengan komunitas pengembang piranti lunak yang ada, secara berkelanjutan terus

berusaha mengembangkan teknologi yang dapat membuat piranti lunak tersebut

38

Page 55: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

bergerak lebih cepat, mudah dan murah untuk dibangun dengan perawatan

program komputer.

2.9.1. Pengertian Piranti Lunak

Menurut Roger S. Pressman (2001:6) piranti lunak merupakan

instruksi-instruksi atau program komputer yang pada saat dijalankan

memberikan fungsi dan daya guna yang diinginkan.

2.9.2. Pengertian Rekayasa Piranti Lunak

Pengertian rekayasa piranti lunak adalah pembentukan dan

penggunaan prinsip-prinsip rekayasa dengan tujuan untuk memperoleh

piranti lunak ekonomis yang dapat diandalkan dan berjalan secara efisien

pada suatu mesin atau komputer yang dikemukakan oleh Fritz Bauer (Roger

S. Pressman, 2001: 20).

2.9.3. Model Rakayasa Piranti Lunak

Menurut Roger S. Pressman (2001:28-30), ada beberapa pilihan

model rekayasa piranti lunak, salah satunya yaitu waterfall model.

Pemberian nama waterfall dikarenakan adanya tahapan demi tahapan yang

harus dilalui, dimana tahapan selanjutnya baru bisa dilakukan apabila

tahapan sebelumnya sudah selesai dan tiap-tiap tahapan ini harus berjalan

secara berurutan.

39

Page 56: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

Model ini memberikan pendekatan-pendekatan sistematis dan

berurutan bagi pengembangan piranti lunak yang dimulai dari level sistem

dan proses kemajuan melalui analysis, design, coding, testing, dan support.

Berikut adalah gambar pengembangan sistem perangkat lunak dengan proses

System Development Life Cycle (SDLC) dengan model waterfall.

Gambar 2.1. Pengembangan Piranti Lunak SDLC Model Waterfall (Roger S. Pressman, 2001:29)

Penjelasan tahapan-tahapan SDLC model waterfall ini

sebagai berikut:

1. System Requirement Analysis

Mengumpulkan kebutuhan secara lengkap kemudian dianalisis

dan didefinisikan kebutuhan yang harus dipenuhi oleh program yang

akan dibangun. Fase ini harus dikerjakan secara lengkap untuk bisa

menghasilkan desain yang lengkap. Penulis akan melakukan

beberapa hal yang diperlukan yaitu membuat studi kelayakan,

alokasi waktu, dan cakupan.

40

Page 57: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

2. Design

Pada tahap ini dilakukan perancangan terhadap piranti lunak

yang akan dibangun. Hasil analisis kebutuhan piranti lunak dijadikan

bahan pertimbangan dalam melakukan perancangan. Penulis akan

melakukan prosesnya melalui beberapa tahapan, yaitu: Perancangan

struktur menu, perancangan layout, State Transition Diagram (STD),

pembahasan flowchart, dan perancangan basis data.

3. Code Generation

Pada tahap ini hasil perancangan diterjemahkan menjadi

bentuk yang dapat dibaca atau dimengerti oleh komputer, berupa

bahasa pemrograman.

4. Testing

Tahap ini dilakukan pengujian internal (white-box) pada suatu

piranti lunak yang menggambarkan bahwa semua statement sudah

dilakukan pengujian. Disamping itu, pengujian pada fungsi eksternal

(black-box) juga perlu dilakukan, yaitu untuk menemukan kesalahan

serta memastikan output yang dihasilkan sesuai dengan yang

diinginkan pada tahap perancangan piranti lunak.

5. Support atau Maintanance

Kegiatan untuk mendukung beroperasinya dan terpeliharanya

sistem informasi yang telah dibuat. Pemeliharaaan sistem akan

dilakukan oleh administrator yang akan meng-update data agar selalu

up to date.

41

Page 58: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

2.10. Entity Relational Diagram (ERD)

ERD merupakan suatu sistem basis data relasional yang tersusun atas

kumpulan objek-objek dasar yang disebut entitas dan hubungan antarobjek.

Entitas adalah sesuatu atau objek dalam dunia nyata yang dapat dibedakan dari

objek lain. (Janner Simamarta dan Iman Prayudi, 2006:59). Tujuan utama dari

ERD adalah untuk untuk memodelkan struktur data dan hubungan antar data.

Relasi adalah hubungan antara beberapa entitas. Struktur logis (skema basis data)

dapat ditunjukkan secara grafis dengan diagram ERD yang dibentuk dari

komponen-komponen berikut:

Tabel 2.6. Grafis Diagram ERD

(Janner Simamarta dan Iman Prayudi, 2006:60)

Simbol Keterangan

Entitas

Persegi panjang mewakili kumpulan entitas

Atribut

Elips mewakili atribut

Relasi

Belah ketupat mewakili relasi

Garis menghubungkan atribut dengan kumpulan

entitas dan kumpulan entitas dengan relasi

42

Page 59: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

2.11. Alat Perancangan

Alat perancangan menurut Yourdon (1989: 259) merupakan penggambaran

suatu benda atau seseorang pada waktu, bentuk keberadaan tertentu, ataupun

kondisi tertentu, seperti state transition diagram yang menggambarkan suatu

benda menunggu kondisi, misalnya menunggu pengisian kata kunci (password)

dan menunggu instruksi berikutnya.

Masih menurut Yourdon (1989: 259-265), State transition diagram (STD)

merupakan modelling tools yang menggambarkan sifat ketergantungan pada

waktu dari sistem. Pada awalnya hanya digunakan untuk menggambarkan suatu

sistem yang memiliki sifat real-time, seperti: Control process, telephone

switching system, high speed data acquisition, dan military command and control

system.

Pengertian lain dari state transition diagram adalah model keadaan dari

sebuah objek dan kejadian-kejadian yang menyebabkan objek tersebut berubah

dari satu keadaan ke keadaan yang lain (Hoffer, 1996:462). Terdapat dua macam

kerja sistem ini, yaitu:

1. Passive

Sistem ini melakukan kontrol terhadap lingkungan, tetapi lebih bersifat

memberikan reaksi atau menerima data saja. Contoh, suatu sistem yang

tugasnya mengumpulkan atau menerima data melalui sinyal yang

dikirimkan oleh satelit.

43

Page 60: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

2. Active

Sistem melakukan kontrol terhadap lingkungan secara aktif dan dapat

menerima data serta memberikan respon terhadap lingkungan sesuai

dengan program yang telah ditentukan. Contoh, sistem komputer yang

ditempatkan pada peluru kendali.

Beberapa simbol yang digunakan untuk membuat state transition diagram.

Yaitu:

a. State, disimbolkan dengan segi empat

Simbol state

b. Transition state atau perubahan state disimbolkan dengan panah berarah.

Simbol transition state

c. State adalah kumpulan keadaan atau atribut yang mencirikan seseorang

atau suatu benda pada waktu tertentu atau kondisi tertentu. Contoh,

menunggu pemakai mengisi password, menunggu perintah berikutnya,

menunggu nada panggilan dan lainnya.

d. Condition adalah suatu kejadian pada lingkungan eksternal yang dapat

dideteksi oleh sistem. Contoh, sebuah sinyal interrupt atau data. Hal ini

akan menyebabkan perubahan terhadap state dari state menunggu X ke

state menunggu Y, atau memindahkan aktifitas X ke aktifitas Y.

e. Action adalah yang dilakukan sistem bila terjadi perubahan state atau

merupakan reaksi terhadap kondisi. Aksi akan menghasilkan keluaran

atau tampilan.

44

Page 61: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

f. Display pada layar menghasilkan output.

Berikut gambar dari kondisi dan aksi:

Gambar 2.2. Kondisi dan aksi (Edward Yourdon, 1989:265)

2.12. Flowchart

Menurut Redi Taofik Soleh (2007:141) bagan alir atau flowchart adalah

simbol-simbol yang digunakan untuk menggambarkan urutan proses yang terjadi

di dalam suatu program komputer atau suatu alat yang dipakai untuk membuat

algoritma. Bagan alir dapat menunjukkan secara jelas arus pengendalian suatu

algoritma, yaitu bagaimana melaksanakan suatu rangkaian kegiatan secara logis

dan sistematis. Flowchart dapat memberikan gambaran dua dimensi yang berupa

simbol-simbol grafis. Masing-masing simbol telah ditetapkan terlebih dulu fungsi

dan artinya. Simbol-simbol tersebut dipakai untuk menunjukkan berbagai

kegiatan operasi dan jalur pengendalian. Berikut ini adalah tabel simbol-simbol

flowchart :

Tabel 2.7. Simbol Flowchart

(Redi Taofik Soleh , 2007:142)

No. Bentuk Simbol Nama Simbol Keterangan

1. Terminal Digunakan untuk menggambarkan awal

dan akhir dari suatu kegiatan. 2. Decision Digunakan untuk menggambarkan proses

pengujian suatu kondisi yang ada. 3. Preparation Digunakan untuk menggambarkan

persipaan awal dari proses yang akan

dilakukan.

45

Page 62: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

No. Bentuk Simbol Nama Simbol Keterangan

4. FlowLine Digunakan untuk menggambarkan hubungan

proses dari suatu proses ke proses lainnya.

5. Input/Output Digunakan untuk menggambarkan proses

pemasukan data yang berupa pembacaan data

dan sekaligus porses keluaran yang berupa

pencetakan data. 6. Subroutine Digunakan untuk menggambarkan proses

pemanggilan subprogram dari main program.

7. Conector Digunakan sebagai penghubung antara suatu

proses dengan proses lainnya yang ada di

dalam suatu lembar halaman. 8. Page Conector Simbol ini digunakan sebagai penghubung

antara suatu proses dengan proses lainnya,

akan tetapi berpindah halaman.

2.13. Macromedia Dreamweaver 8.0

Macromedia Dreamweaver adalah sebuah software web design

yang menawarkan cara mendesain website dengan dua langkah sekaligus

dalam satu waktu, yaitu mendesain dan memprogram. (M. Suyanto, 2003 :

238). Sedangkan menurut Mei Lenawati (2007:1) Macromedia

Dreamweaver 8.0 didukung dengan penggunaan CSS, XML, RSS, dan

kemudahan-kemudahan lain yang diperlukan. Berikut ini lingkungan kerja

macromedia dreamweaver 8.0 :

Insert Bar

Document

Toolbar

Property

Inspector

Panel

Groups

Document

Window

Gambar 2.3. Lingkungan Kerja Macromedia Dreamweaver 8.0

(Sumber : Mei Lenawati, 2007:2)

46

Page 63: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

2.14. Macromedia Flash 8.0

Macromedia Flash adalah perangkat lunak untuk merancang grafis

dan animasi pada web. (M. Suyanto, 2003:228). Dokumen flash mempunyai

ekstensi file .fla. Dokumen flash berisi semua informasi yang dibutuhkan

untuk membuat suatu desain. Dokumen flash tidak ditampilkan di dalam

flash player. Hasil pembuatan suatu desain di dalam dokumen flash harus

di-publish menjadi movie flash (dengan ekstensi file .swf) agar bisa

ditampilkan di dalam flash player. Movie Macromedia Flash (untuk

selanjutnya disebut dengan movie flash) terdiri atas grafik, teks, animasi, dan

aplikasi untuk website. Movie flash lebih cenderung berisi grafik vektor,

namun demikian tidak menutup kemungkinan untuk disisipkan image

bitmap, video maupun sound. Berikut ini lingkungan kerja macromedia flash

8.0 :

Document Toolbar Toolbar

Document Window

Panel Groups

Property

Inspector

Gambar 2.4. Lingkungan Kerja Macromedia Flash 8.0

(Sumber : M. Suyanto, 2003 : 228)

2.15. Adobe Photoshop CS 2.0

Adobe Photoshop CS adalah program yang diorientasikan untuk

mengedit, memodifikasi, maupun memanipulasi bitmap atau foto. Aplikasi

47

Page 64: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

Adobe Photoshop CS selain tangguh dalam mengedit, memodifikasi,

maupun memanipulasi 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 semakin unik dan fantastik. (Khaeruddin, 2005 : 13).

Berikut ini lingkungan kerja adobe photoshop CS 2.0 :

Toolbar

Document

Window

Panel Groups

Gambar 2.5. Lingkungan Kerja Adobe Photoshop CS 2.0 (Khaeruddin, 2005 : 13)

2.16. Youth Studies Center

Youth Studies Center adalah suatu pusat pembelajaran untuk

mengembangkan pikiran remaja yang umum, dan relevan. Youth Studies

Centre dibangun dengan jaringan global, sehingga para remaja dapat saling

berkomunikasi, mendapatkan informasi yang dibutuhkan sesuai dengan

perkembangan keterampilan maupun pengetahuan mereka. Informasi yang

dikembangkan dapat meliputi informasi bidang sosial, budaya, politik, dan

sebagainya.(www.centerforyouth.org).

48

Page 65: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

2.17. Wawancara

Pengertian wawancara adalah suatu metode pengumpulan data dengan

melakukan tanya-jawab terhadap responden agar mendapat informasi yang

dibutuhkan oleh penelitian (Nasution, 2006: 100).

2.18. Observasi

Pengertian observasi adalah pengamatan langsung suatu kegiatan yang

sedang dilakukan. (Jogiyanto H.M, 2005:623). Sedangkan menurut Fredy

Rangkuti (2001:42) observasi merupakan kegiatan pengamatan terhadap suatu

obyek atau orang lain.

2.19. Konflik

Konflik merupakan pertemuan antara dua hal yang berbeda. Pertemuan

dua hal berbeda tersebut dapat menghasilkan hal positif atau negatif. Jika ia

menghasilkan sesuatu yang negatif, maka inilah yang sering disebut sebagai

masalah. Namun tidak jarang, konflik dapat menghasilkan hal positif, karena

dengan konflik akan bisa membangun solidaritas kelompok dan hubungan antar

warga negara maupun antar kelompok

Seperti yang kita ketahui, Konflik tidak bisa dihindari oleh setiap orang,

maka yang paling terpenting adalah bagaimana cara untuk menyelesaikan konflik

agar ancaman (threat) bisa menjadi kesempatan (opportunity) dan bahaya

timbulnya konflik dapat dicegah dan ditanggulangi secara dini. (www.ceric-

fisip.ui.edu).

49

Page 66: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

BAB III

METODOLOGI PENELITIAN

3.1. Metode Pengumpulan Data

Metode yang penulis gunakan untuk analisis pada penulisan skripsi ini

adalah sebagai berikut:

1. Observasi, penulis melakukan kegiatan pengamatan secara langsung

website “Youth Studies Center” yang dilakukan di CERIC gedung C

lantai 2 fakultas Fisip UI Depok, Jawa Barat dan membutuhkan waktu

kurang lebih 2 bulan, dari bulan Januari sampai dengan Febuari 2008.

2. Wawancara, dilakukan dengan direktur pelaksana di CERIC agar

mendapat informasi yang dibutuhkan untuk pengembangan website

“Youth Studies Center”.

3. Kuesioner, dilakukan dengan menyebarkan kuesioner kepada 50

responden remaja di sekitar kampus UIN Syarif Hidayatullah Jakarta.

Penyebaran kuesioner membutuhkan waktu kurang lebih 1 bulan yaitu

bulan Maret 2008.

4. Studi Pustaka, dilakukan dengan mengumpulkan buku-buku yang

berkaitan dengan judul penulisan skripsi.

Page 67: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

3.2. Metode Pengembangan

Dalam mengembangkan website “Youth Studies Center”, penulis

menggunakan metode System Development Life Cycle (SDLC) dengan model

waterfall (gambar 2.1). Berikut ini adalah tahapan dari model waterfall :

3.2.1 System Requirement Analysis

Tahapan analisis ini dilakukan setelah melakukan perencanaan yang

terdapat pada metode pengumpulan data. Kemudian setelah data-data

terkumpul secara lengkap kemudian dianalisis dan didefinisikan kebutuhan

yang harus dipenuhi untuk pengembangan website ini. Penulis akan

melakukan beberapa hal yang diperlukan yaitu membuat studi kelayakan,

alokasi waktu, dan cakupan, berikut ini rincian tahapannya:

1. Studi Kelayakan

Penulis melakukan kajian terlebih dahulu dengan observasi

tentang proses penyajian informasi yang ada selama ini sehingga

dapat dibuat pengembangan yang dapat memperbaiki

kekurangan website tersebut. Oleh karena itu, penulis melakukan

beberapa kegiatan yaitu: wawancara, kuesioner, identifikasi

masalah, usulan pemecahan masalah, dan perkiraan biaya.

2. Alokasi Waktu

Membuat alokasi waktu untuk keseluruhan pengembangan

website “Youth Studies Center”. Waktu yang dibutuhkan kurang

lebih 6 bulan, terhitung dari bulan Januari-Juni 2008.

51

Page 68: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

3. Cakupan

Menentukan batasan ruang lingkup website “Youth Studies

Center” yang akan dibangun, yaitu pengunjung (front end), dan

administrator (back end).

3.2.2 Design

Pada tahap ini penulis akan melakukan beberapa hal yang diperlukan

dalam design melalui perancangan struktur menu, perancangan layout, dan

State Transition Diagram (STD), pembahasan flowchart, dan perancangan

basis data. Penjelasan tersebut antara lain:

1. Perancangan Struktur menu

Menggambarkan struktur dari menu-menu yang terdapat di

website “Youth Studies Center” yang penulis kembangkan.

2. Perancangan Layout

Pada tahap ini, akan dilakukan perancangan layout untuk

website “Youth Studies Center”.

3. State Transition Diagram (STD)

Menggambarkan peralihan layar dari menu tertentu ke menu

tertentu lainnya yang terdapat di website “Youth Studies

Center”.

4. Pembahasan Flowchart

Menggambaran alir atau flowchart dari satu tampilan ke

tampilan lainnya pada website ini.

52

Page 69: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

5. Perancangan basis data

Menggambarkan hubungan antar tabel basis data yang

digunakan pada website “Youth Studies Center” dengan

menggunakan ERD.

3.2.3 Coding

Tahap berikutnya yang dilakukan adalah pemrograman atau coding.

Tahap ini merupakan hasil transfer dari perancangan ke dalam bahasa

pemrograman yang telah ditentukan, yaitu PHP 5.0.4 dan MySQL 5.0.51a

sebagai basis data.

3.2.4 Testing

Pada tahap ini akan dilakukan testing atau pengujian program secara

keseluruhan dari website “Youth Studies Center” yang telah dibuat. Adapun

testing terhadap program dapat dilakukan dengan 2 metode, yaitu white-box

(internal), dan black-box (eksternal). Penulis menggunakan 2 metode agar

pengembangan website ini mendapatkan hasil yang sempurna baik untuk

internal maupun eksternal.

3.2.5 Support

Kegiatan untuk mendukung beroperasinya dan terpeliharanya sistem

informasi yang telah dibuat. Pemeliharaaan sistem akan dilakukan oleh

administrator yang akan meng-update data setiap hari agar selalu up to date.

53

Page 70: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

BAB IV

HASIL DAN PEMBAHASAN

Dalam bab ini akan dipaparkan pembahasan atas identifikasi masalah yang

mengacu pada tujuan penelitian dan berlandaskan teori yang telah dipaparkan

dalam bab II. Pembahasan ini dilakukan untuk merancang bentuk dan isi website

“Youth Studies Center” sehingga dapat menarik target yang diinginkan

organisasi.

4.1. Gambaran Umum Organisasi

Center for Research on Inter-Group Relations and Conflict Resolution

(CERIC) FISIP UI adalah lembaga nirlaba yang bekerja sama dengan Ohio

Univercity, USA dan Fakultas Ilmu Sosial dan Ilmu Politik Universitas Indonesia,

yang didirikan sejak Oktober 2000, untuk melakukan upaya sinergis dalam

penataan hubungan antar kelompok dan resolusi konflik di Indonesia, melalui

penelitian / kajian, pelatihan tentang pencegahan konflik dan mediasi kepada

berbagai kalangan, serta pengembangan untuk kurikulum pendidikan yang

berbasis pada hubungan antar kelompok dan resolusi konflik. Upaya ini

dilakukan bersama dengan jaringan CERIC di berbagai universitas di Indonesia,

LSM, kalangan media, baik di dalam maupun di luar negeri. Lokasi CERIC

berada di daerah Depok, Kampus Fisip UI Gedung C Lantai 2, Jawa Barat

16424.

Page 71: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

4.1.1 Sekilas CERIC

Indonesia adalah bangsa yang terbentuk dari berbagai kelompok

identitas etnis, ras, agama dan asal daerah. Keragaman ini bisa dan telah

menyatu dalam kehidupan sebagai satu bangsa karena adanya kesamaan

sejarah panjang, baik yang terbentuk sebelum ataupun semasa kolonialisme.

Namun, bisa juga memicu konflik antar kelompok yang merebak di banyak

tempat dengan intensitas yang semakin meningkat. Keretakan sosial tidak

saja mengakibatkan krisis multidimensional tetapi juga mengancam

kelangsungan kehidupan berbangsa.

Otoritarianisme panjang sejak 1959, di sambung pada 1966 sampai

1998, secara massal telah menciptakan ketidakadilan di hampir seluruh

segmen kehidupan. Akibatnya terjadilah konflik vertikal yang tercermin

pada ketegangan antara masyarakat dengan negara, adan pertikaian

horizontal yang melibatkan berbagai kelompok agama, suku, ras dan asal

daerah. Karena begitu banyak dan kompleksnya masalah yang terjadi, kini

semakin sulit diketahui akar permasalahan yang sebenarnya.

Perlu upaya serius untuk menumbuhkan formulasi pengendalian

konflik tanpa menggunakan cara-cara kekerasan. Dengan langkanya

penanganan serius yang dilakukan pemerintah, kini usaha menyusun

penanggulangan yang dilakukan secara sistematik dan menyeluruh pun sulit

dijumpai. Untuk membuat strategi pengelolaan konflik secara damai di

Indonesia, sedikitnya perlu dilakukan dua hal penting:

55

Page 72: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

1. Adanya penelitian yang transparan dan terfokus terhadap dinamika

hubungan antar kelompok dan sumber-sumber terjadinya konflik.

2. Adanya pelatihan-pelatihan tentang penanggulangan konflik dan mediasi

kelompok yang ditujukan kepada seluruh anggota masyarakat, dari

aparat pemerintah sampai pemimpin masyarakat.

Dalam usaha memenuhi dua kebutuhan tersebut, Fakultas Ilmu-ilmu

Sosial dan Politik Universitas Indonesia (FISIP UI) bekerja sama dengan

Program Studi Asia Tenggara Ohio University, Amerika Serikat, mendirikan

sebuah Pusat Studi Hubungan antar Kelompok dan Penganggulangan

Konflik atau CERIC, didukung oleh para ilmuwan sosial dari Universitas

Indonesia maupun Ohio University yang memiliki minat dan keperdulian

tinggi pada penelitian sosial. Para anggota senior, baik dari FISIP UI

maupun Ohio University, akan bertindak sebagai anggota Komite Pengawas

dan Dewan Penasihat. Didirikan pada Oktober 2000, dana awal

pembentukan CERIC FISIP UI didapatkan dari The Asia Foundation. Untuk

selanjutnya, diharapkan dana akan didapatkan dari pembentukan sebuah

yayasan nirlaba, donasi pribadi maupun pemerintah.

4.1.2. Tujuan Berdirinya CERIC

Tujuan utama pendirian CERIC FISIP UI adalah sebagai berikut:

1. Membentuk suatu pusat data yang terdiri dari literatur-literatur

dan referensi terkini tentang hubungan antar kelompok dan

penanggulangan konflik.

56

Page 73: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

2. Mendukung dan mempelopori proyek-proyek penelitian orisinil

dan berdayaguna tentang hubungan antar kelompok dan

penanggulangan konflik di berbagai belahan Indonesia.

3. Mendukung berdirinya pusat-pusat studi sejenis di Universitas-

universitas setiap propinsi di Indonesia, dan membangun

kerjasama antar pusat-pusat studi tersebut untuk dapat lebih

memahami berbagai masalah terkait secara lebih spesifk di

berbagai belahan Indonesia.

4. Menyelenggarakan kursus-kursus singkat tentang pengelolaan,

reduksi dan penanggulangan konflik, serta memberikan layanan

konsultasi kepada anggota masyarakat, LSM, dan aparat

pemerintah.

5. Mensponsori pertemuan dan lokakarya untuk mengumpulkan

para peneliti, ilmuwan sosial dan praktisi yang bergerak di

bidang hubungan antar kelompok, penanggulangan konflik dan

hak-hak asasi manusia.

6. Mempelopori dibangunnya suatu basis data ilmu sosial tentang

hubungan antar kelompok, penanggulangan konflik dan hak-

hak asasi manusia.

7. Meningkatkan kualitas pengajaran dan kebutuhan akademis

dalam bidang hubungan antar kelompok dan penanggulangan

konflik dalam kaitan dengan masalah hak-hak asasi manusia.

57

Page 74: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

8. Menyediakan kesempatan untuk melakukan penelitian dan

studi eksperimen kepada mahasiswa dari Universitas Indonesia

dan institusi pendidikan lainnya.

Walaupun pusat studi ini terletak di Jakarta, salah satu misi utama

yang ingin dicapai adalah mendorong pembentukan pusat-pusat studi sejenis

di berbagai daerah di Indonesia, untuk membangun jaringan kerjasama

informasi yang sangat berguna untuk dilakukannya dialog nasional, dan

pada saat yang sama melayani kebutuhan-kebutuhan spesifik di wilayah-

wilayah di mana pusat studi tersebut berdiri. Pelatihan tentang

penanggulangan konflik dapat diadakan di daerah-daerah yang tinggi potensi

konfliknya.

4.1.3. Logo

Gambar 4.1. Logo CERIC

(Sumber : Data Primer)

4.1.4. Program Kerja

CERIC FISIP UI didirikan dalam rangka memenuhi kebutuhan untuk

mendukung strategi pengelolaan konflik secara damai di Indonesia, yaitu:

1. Adanya penelitian yang transparan dan terfokus terhadap

dinamika hubungan antar kelompok dan sumber-sumber

terjadinya konflik.

58

Page 75: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

2. Adanya pelatihan-pelatihan tentang penanggulangan konflik

dan mediasi kelompok yang ditujukan kepada seluruh anggota

masyarakat, dari aparat pemerintah sampai pemimpin

masyarakat.

4.1.5. Struktur Organisasi

Gambar 4.2. Struktur Organisasi

(Sumber : Data Primer)

4.1.6. Tugas

Berdasarkan dari gambar sruktur organisasi CERIC akan diuraikan

tentang tugas masing – masing fungsi yaitu:

1. Dewan Penasihat

Mengawasi dan memberikan masukan bagi kegiatan lembaga.

2. Direktur Utama

a. Membuat kebijakan yang berhubungan dengan arah dan

tujuan lembaga yang akan dicapai pada masa yang akan

datang.

59

Page 76: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

b. Mengusahakan tercapainya tujuan lembaga secara maksimal

dan mengawasi seluruh kegiatan tiap–tiap bidang agar tidak

terjadi penyimpangan–penyimpangan dalam melaksanakan

tugas masing – masing.

c. Mengadakan rapat secara periodik untuk menilai dan

mengevaluasi kegiatan dari bawahannya dan memberikan

petunjuk untuk meningkatkan prestasi di masa mendatang.

d. Mengkoordinasi seluruh aktivitas lembaga.

3. Kepala Bidang

Mengatur koordinasi dengan bidang-bidang lain demi

tercapainya tujuan lembaga.

4. Bidang Publikasi

Bertanggungjawab terhadap publikasi organisasi.

5. Bidang Pengembangan Kurikulum

Melakukan pengembangan kurikulum yang diperlukan bagi

lembaga pendidikan terkait hubungan antar kelompok dan

resolusi konflik.

6. Bidang Pengembangan Basis Data

Melakukan pengembangan basis data terkait hubungan antar

kelompok dan resolusi konflik.

7. Bidang Kerjasama Internasional

Bertanggungjawab terhadap kerjasama internasional bagi

pengembangan jaringan dan kegiatan lembaga.

60

Page 77: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

8. Direktur Pelaksana

a. Mengawasi dan mengkoordinasikan pelaksanaan kegiatan

lembaga, baik program maupun keuangan, bersama-sama

dengan staf terkait.

b. Bertanggungjawab langsung kepada direktur utama dan

memberikan laporan secara berkala.

9. Staf Keuangan

a. Bertanggungjawab terhadap lalu lintas keuangan lembaga.

b. Bertanggungjawab terhadap pembuatan laporan keuangan,

baik kepada pemberi dana maupun kepada instansi terkait.

c. Berkoordinasi dengan direktur pelaksana dalam pelaksanaan

dan penyusunan anggaran keuangan.

10. Staf Administrasi

Bertanggungjawab terhadap kegiatan administrasi lembaga yang

meliputi:

a. Pengawasan dan pengarsipan data penelitian.

b. Surat menyurat.

c. Pengurusan perjalanan dinas.

d. Membantu pelaksanaan administrasi dalam setiap program

yang dilakukan lembaga.

61

Page 78: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

11. Staf Basis Data

Bertanggungjawab terhadap basis data lembaga terkait dengan

website www.direktori-perdamaian.org sebagai website direktori

LSM se-Indonesia untuk kegiatan perdamaian.

12. Staf Peneliti

Melakukan penelitian terkait hubungan antar kelompok dan

manajemen konflik.

4.2. Pengembangan Website “Youth Studies Center”

Metode yang penulis gunakan untuk melakukan pengembangan website

“Youth Studies Center” adalah System Development Life Cycle (SDLC) dengan

model waterfall. Berikut adalah pembahasan tahapan-tahapan yang digunakan

untuk pengembangan website “Youth Studies Center” :

4.2.1. System Requirement Analysis

Mengumpulkan kebutuhan secara lengkap kemudian dianalisis dan

didefinisikan kebutuhan yang harus dipenuhi oleh program yang akan

dibangun. Fase ini harus dikerjakan secara lengkap untuk bisa menghasilkan

desain yang lengkap. Penulis akan melakukan beberapa hal yang diperlukan

yaitu membuat studi kelayakan, alokasi waktu, dan cakupan.

1. Studi Kelayakan

Membuat studi kelayakan untuk sistem yang akan dibuat,

seperti mengkaji terlebih dahulu bagaimana proses penyajian

62

Page 79: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

informasi mengenai konflik melalui website yang belum

berjalan agar dapat dibuat pengembangan yang dapat

memperbaiki kekurangan website yang belum berjalan ini.

Berikut adalah kegiatan yang dilakukan :

a. Observasi

Observasi di laksanakan oleh penulis menggunakan

pengamatan secara langsung website “Youth Studies

Center” yang dilakukan di CERIC gedung C lantai 2

fakultas Fisip UI Depok, Jawa Barat dan membutuhkan

waktu kurang lebih dua bulan, terhitung dari bulan

Januari–Febuari 2008. Untuk lebih jelasnya bisa dilihat

pada identifikasi masalah pada halaman 69.

b. Wawancara

Wawancara dilakukan dengan direktur pelaksana di CERIC

pada tanggal 3 Maret 2008. Tujuan penulis melakukan

wawancara adalah mendapatkan model dan informasi

seperti apa yang diperlukan dalam pengembangan website

ini.

Berdasarkan hasil wawancara yang penulis lakukan, dapat

disimpulkan bahwa website ini harus dibuat dan dibentuk

semenarik mungkin agar para remaja tertarik melihat

website ini tentunya dengan menggunakan bahasa yang

mudah dimengerti para remaja. Website ini harus

63

Page 80: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

dilengkapi dengan fitur-fitur seperti fitur komentar

(comment), hit counter (mengetahui jumlah pengunjung),

dan subscriber (untuk informasi edisi terbaru). Daftar

pertanyaan wawancara dapat dilihat pada lampiran 1.

c. Kuesioner

Hal ini dilakukan untuk mengetahui solusi dari masalah

mendapatkan model dan informasi seperti apa yang

diperlukan dalam pengembangan website. Oleh karena itu,

penulis melakukan penyebaran kuesioner di kampus UIN

Syarif Hidayatullah Jakarta kepada 50 responden dengan 6

pernyataan untuk lengkapnya ada pada lampiran 2.

Pada variabel untuk mendapatkan model dan informasi

dalam pengembangan website, penulis membagi variabel

tersebut ke dalam 5 (lima) pernyataan yakni desain (warna

dan huruf), fitur pencarian (searching), fitur forum diskusi,

fitur chatting, dan fitur subscriber.

Untuk melihat kecenderungan data pada nilai tertentu,

penulis menggunakan ukuran pemusatan modus yaitu, nilai

yang paling sering muncul dari serangkaian data. Dalam

mengolah data, penulis menggunakan software Microsoft

Office Excel 2003. Berikut adalah hasil kuesioner yang

telah dilakukan. Gambar tabel dan grafik pie chart hasil

kuesioner dapat dilihat pada lampiran 3.

64

Page 81: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

1). Desain

a). Warna

Berdasarkan hasil kuesioner pernyataan pertama

(Tampilan warna website “Youth Studies Center”

sudah menarik) bahwa sebagian besar responden

menjawab setuju dengan pernyataan bahwa

tampilan warna dalam website ini sudah menarik.

Hal ini berarti sudah sesuai dengan teori yang

penulis paparkan pada bab.2 yaitu pengaruh warna

pada respon psikologi.

Namun ada 1 responden menjawab tidak setuju

dengan pernyataan di atas. Hal ini dikarenakan

responden menginginkan warna yang cerah atau

mencolok (seperti kuning, merah, dan sebagainya)

dengan menggunakan background yang ramai

sehingga terlihat gaya. Namun, hal ini tidak sesuai

dengan prinsip-prinsip desain website yang terdapat

di bab II sebelumnya.

Berikut ini data hasil pengolahan penelitian:

Tabel 4.1 Kemampuan Menjawab Pertanyaan

(Sumber : Data diolah Penulis)

KATEGORI

FREKUENSI

PERSENTASE

Setuju 49 98 % Tidak Setuju 1 2 % Total 50 100 %

65

Page 82: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

b). Huruf

Berdasarkan hasil kuesioner pernyataan kedua

(Huruf yang digunakan di website “Youth Studies

Center” mudah dibaca) bahwa semua responden

menjawab setuju dengan pernyataan tersebut. Hal

ini berarti sudah sesuai dengan teori yang penulis

paparkan pada bab 2 yaitu pengaruh huruf pada

respon psikologi dimana sebaiknya suatu organisasi

menggunakan huruf default untuk website dengan

jenis huruf Serif karena huruf ini memiliki bentuk

huruf yang formal dan mengkespresikan organisasi

dan intelektualitas yang sesuai dengan isi dan tema

website ini.

Berikut ini data hasil pengolahan penelitian:

Tabel 4.2 Kemampuan Menjawab Pertanyaan

(Sumber : Data diolah Penulis)

KATEGORI

FREKUENSI

PERSENTASE

Setuju 50 100 % Tidak Setuju 0 0 % Total 50 100 %

2). Fitur Pencarian (searching)

Berdasarkan hasil kuesioner pernyataan ketiga (Saya

mudah mencari informasi yang dibutuhkan melalui fitur

pencarian (searching) bahwa semua responden

menjawab setuju dengan pernyataan di atas. Hal ini

66

Page 83: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

dikarenakan dalam pencarian artikel berita, penulis

tidak menggunakan case sensitive.

Berikut ini data hasil pengolahan penelitian:

Tabel 4.3 Kemampuan Menjawab Pertanyaan

(Sumber : Data diolah Penulis)

KATEGORI

FREKUENSI

PERSENTASE

Setuju 50 100 % Tidak Setuju 0 0% Total 50 100 %

3). Fitur Forum Diskusi

Berdasarkan hasil kuesioner pernyataan keempat (Saya

mudah berinteraksi dengan user lain melalui fitur forum

diskusi) bahwa sebagian besar responden menjawab

setuju dengan pernyataan tersebut. Namun ada beberapa

responden menjawab tidak setuju dengan pernyataan di

atas. Hal ini dikarenakan responden merasa dengan fitur

forum diskusi responden merasa kurang langsung dalam

mendapat tanggapan, dan responden harus menunggu

beberapa waktu untuk mendapat balasan oleh admin.

Saran dari responden yaitu ada fitur tambahan seperti

chatting di website “Youth Studies Center” agar dapat

berinteraksi secara langsung dengan remaja lain.

67

Page 84: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

Berikut ini data hasil pengolahan penelitian:

Tabel 4.4 Kemampuan Menjawab Pertanyaan

(Sumber : Data diolah Penulis)

KATEGORI

FREKUENSI

PERSENTASE

Setuju 47 94 % Tidak Setuju 3 6 %

Total 50 100 %

4). Fitur Chatting

Berdasarkan hasil kuesioner pernyataan kelima (Fitur

chatting akan membantu saya dalam berkomunikasi

yang direspon secara langsung) bahwa semua

responden menjawab setuju dengan pernyataan di atas

karena responden merasa dengan adanya fitur chatting

maka bisa berinteraksi secara langsung antar

pengunjung untuk menanggapi artikel yang ada di

website.

Berikut ini data hasil pengolahan penelitian:

Tabel 4.5 Kemampuan Menjawab Pertanyaan

(Sumber : Data diolah Penulis)

KATEGORI

FREKUENSI

PERSENTASE

Setuju 50 100 % Tidak Setuju 0 0 % Total 50 100 %

5). Fitur Subscriber

Berdasarkan hasil kuesioner pernyataan ke enam (Saya

dapat mengetahui artikel-artikel terbaru melalui fitur

subscriber yang dikirim melalui e-mail) bahwa semua

68

Page 85: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

responden menjawab setuju dengan pernyataan tersebut.

Hal ini dikarenakan dengan fitur subscriber, para

pengunjung dapat mengetahui info-info terbaru yang

dikirim melalui e-mail pengunjung.

Berikut ini data hasil pengolahan penelitian:

Tabel 4.6 Kemampuan Menjawab Pertanyaan

(Sumber : Data diolah Penulis)

KATEGORI

FREKUENSI

PERSENTASE

Setuju 50 100 % Tidak Setuju 0 0% Total 50 100 %

d. Identifikasi Masalah

Hal ini dilakukan untuk menentukan informasi dan data apa

yang diperlukan untuk mengembangkan website “Youth

Studies Center”. Dari pengamatan (observasi) yang telah

penulis lakukan, maka penulis mengambil kesimpulan

sebagai berikut:

1). Website “Youth Studies Center” saat ini belum online

karena pihak perusahaan belum memiliki hosting.

2). Fitur yang ada di website “Youth Studies Center”

kurang interaktif dengan remaja, tampilan websitenya

terlalu kaku atau tidak dinamis, dan kurang menarik.

69

Page 86: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

e. Usulan Pemecahan Masalah

Berikut ini usulan pemecahan masalah atas identifikasi

yang penulis paparkan di atas yaitu:

1). Penulis akan membuat website “Youth Studies Center”

menjadi online melalui penyedia layanan hosting

www.eazysmart.com dengan menggunakan server yang

ada di Indonesia yaitu Indonesia Internet Exchange

(IIX).

2). Penulis akan merancang fitur supaya menarik sebagai

berikut :

a. Fitur forum diskusi sehingga para remaja bisa saling

bertukar pendapat, berbagi pengalaman, dan

sebagainya.

b. Ftur pencarian (searching) yang akan memudahkan

pencarian informasi mengenai berita/artikel yang

dituju.

c. Fitur chatting, sehingga para remaja bisa saling

berinteraksi secara langsung dengan remaja lain.

d. fitur subscriber untuk mengetahui informasi artikel

terbaru melalui pengiriman ke e-mail pengunjung

nantinya.

70

Page 87: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

f. Perkiraan Biaya

Perkiraan biaya pengembangan aplikasi ini dapat dilihat

pada lampiran 5.

2. Alokasi Waktu

Alokasi waktu pengembangan website “Youth Studies Center”

dibutuhkan waktu kurang lebih 6 bulan terhitung dari bulan

Januari-Juni 2008, untuk lengkapnya dapat dilihat pada bagian

lampiran 4.

3. Cakupan

Cakupan pada website “Youth Studies Center” ini terdiri dari

dua bagian yaitu pengunjung (front end), misalnya, menu berita

tetapi tidak dapat melakukan perubahan yang ada di website

ini. Dan kedua administrator (back end) melakukan perubahan

dan penambahan atas seputar informasi yang ada pada website

ini yang sesuai bagi CERIC.

4.2.2. Design

Tahap berikutnya adalah melakukan perancangan pada website

“Youth Studies Center”. Prosesnya melalui beberapa tahap, yaitu:

Perancangan struktur menu, perancangan layout, State Transition Diagram

(STD), pembahasan flowchart, dan perancangan basis data

71

Page 88: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

1. Perancangan Struktur Menu User

Struktur menu yang penulis gambarkan merupakan struktur

atas keseluruhan menu pada website “Youth Studies Center”.

Gambar 4.3. Perancangan Struktur Menu User

(Sumber : Data diolah Penulis)

Penjelasan pada gambar struktur menu utama merupakan

keseluruhan website “Youth Studies Center” yang dirancang.

Pada menu berita, menampilkan isi berita mengenai konflik

yang terjadi di Indonesia. Isi berita dapat di update oleh

petugas pemeliharaan. Pada menu forum, menampilkan isi

forum. Menu forum ditampilkan secara publik. Sehingga

pengunjung dapat menambah topik, melihat topik yang

dibahas. Namun, untuk hapus topik dan edit topik hanya bisa

dilakukan oleh petugas pemeliharaan. Pada menu youth info,

menggambarkan struktur menu agenda. Menu agenda

ditampilkan secara umum (public). Sehingga untuk melakukan

72

Page 89: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

edit agenda, hanya bisa dilakukan oleh petugas pemeliharaan

antara lain: Melihat agenda-agenda lama pada waktu lampau,

edit isi agenda dan edit judul agenda. Pada menu archieve,

menampilkan isi kumpulan artikel berita berupa format (*.pdf)

yang bisa di-download oleh pengunjung. Namun untuk tambah

artikel download, hapus artikel download hanya bisa dilakukan

oleh petugas pemeliharaan. Pada menu about us,

menggambarkan profil organisasi dalam bentuk informasi teks.

Untuk informasi teks dapat di update oleh petugas

pemeliharaan. Pada menu contact us, menggambarkan struktur

isi form hubungi kami jika pengunjung ingin memberi

komentar, saran, dan kritik mengenai website ini. Pada menu

pencarian, menggambarkan pencarian informasi berita yang

ada. Pada menu subscribe, menggambarkan isi form subscribe,

jika pengunjung telah mengisi form tersebut atau telah

mendaftar maka pengunjung dapat berlangganan berita atau

informasi terbaru apa saja dari website ini melalui email

pengunjung. Namun, pengunjung tidak akan berlangganan jika

tidak mendaftar. Pada menu chatting, menggambarkan isi form

chatting, jika pengunjung sudah memiliki id dan passwordnya

maka bisa langsung masuk ke halaman chatting. Namun kalau

tidak maka pengunjung harus masuk ke halaman daftar terlebih

dahulu.

73

Page 90: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

2. Perancangan Struktur Menu Admin

Gambar 4.4. Perancangan Struktur Menu Admin

(Sumber : Data diolah Penulis)

74

Page 91: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

Struktur menu halaman utama admin terdiri dari menu

mModul, mBerita, mForum, mAgenda, mDownload, mProfil,

mHubungi, mSubscribe, mChatting, mAdmin. Administrator

dapat melakukan insert, update, delete, serta view full data

dalam basis data pada semua menu. Sedangkan untuk menu

mHubungi dapat melakukan delete, dan balas pesan dari user.

Untuk menu mAdmin, Administrator dapat melakukan insert,

ubah password, serta delete pada tabel mAdmin.

3. Perancangan layout

Perancangan layout bertujuan untuk memberikan rancangan

layout menu pada website “Youth Studies Center” yaitu :

a. Perancangan layout halaman admin

Gambar 4.5. Perancangan Layout Halaman Admin

(Sumber : Data diolah Penulis)

Pada gambar layout halaman admin, menggambarkan

rancangan layout yang berisi menu seperti: home, manajemen

modul, about us, berita, forum, youth info, contact us,

75

Page 92: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

download, subscribe dan chatting. Di samping menu terdapat

content yaitu isi dari pada menu-menu yang ada di samping kiri

tersebut.

b. Perancangan layout halaman utama

Gambar 4.6. Perancangan Layout Halaman Utama

(Sumber : Data diolah Penulis)

Pada halaman ini ditampilkan navigation bar yang menuju

ke seluruh halaman. Dan seluruh menu link tesebut ada di

setiap halaman yang ada di website ini. Navigation bar ada di

dua bagian dalam website, yaitu pada bagian atas dan bawah.

Hal tersebut akan memudahkan pengunjung untuk menuju

halaman berikutnya. Pada setiap halaman yang ditunjukan pada

navigation bar yang berada. Kemudian di bawah navigation

bar yang berada pada atas halaman terdapat link menuju ke

halaman Newsletter Signup.

Di bawah Newsletter Signup terdapat link Download Edisi

Terbaru. Kemudian di bawah Download Edisi Terbaru terdapat

76

Page 93: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

Hit Counter yang menghitung telah berapa banyak pengakses

yang membuka website “Youth Studies Center”. Setelah itu

yang terakhir di bawah Hit Counter terdapat link menuju ke

halaman chatting. Kemudian pada content terdapat isi 3 berita

terbaru yang letaknya ada di tengah-tengah.

c. Perancangan layout halaman berita

Gambar 4.7. Perancangan Layout Halaman Berita

(Sumber : Data diolah Penulis)

77

Page 94: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

d. Perancangan layout halaman forum

Gambar 4.8. Perancangan Layout Halaman Forum

(Sumber : Data diolah Penulis)

e. Perancangan layout halaman youth info

Gambar 4.9. Perancangan Layout Halaman Youth Info

(Sumber : Data diolah Penulis)

78

Page 95: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

f. Perancangan layout halaman archieve

Gambar 4.10. Perancangan Layout Halaman Archieve

(Sumber : Data diolah Penulis)

g. Perancangan layout halaman about us

Gambar 4.11. Perancangan Layout Halaman About Us

(Sumber : Data diolah Penulis)

79

Page 96: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

h. Perancangan layout halaman contact us

Gambar 4.12. Perancangan Layout Halaman Contact Us

(Sumber : Data diolah Penulis)

4. State transition diagram (STD)

Pada bagian ini penulis akan menggambarkan bagaimana menu

tersebut berubah dari satu keadaan ke keadaan yang lain.

Perancangan State Transition Diagram (STD) digunakan untuk

menggambarkan segala kemungkinan yang terjadi dari satu state

ke state yang lain, agar memperoleh proses yang lebih rinci dari

suatu sistem dan mudah di baca.

80

Page 97: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

a. State Transition Diagram Home

Gambar 4.13. STD Home

(Sumber : Data diolah Penulis)

b. State Transition Diagram Menu Berita

Gambar 4.14. STD Berita

(Sumber : Data diolah Penulis)

81

Page 98: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

c. State Transition Diagram Menu Forum

Gambar 4.15. STD Forum

(Sumber : Data diolah Penulis)

d. State Transition Diagram Menu Youth Info

Gambar 4.16. STD Youth Info

(Sumber : Data diolah Penulis)

e. State Transition Diagram Menu Archieve

Gambar 4.17. STD Archieve

(Sumber : Data diolah Penulis)

82

Page 99: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

f. State Transition Diagram Menu About Us

Gambar 4.18. STD About Us

(Sumber : Data diolah Penulis)

g. State Transition Diagram Menu Contact Us

Gambar 4.19. STD Contact Us

(Sumber : Data diolah Penulis)

h. State Transition Diagram Menu Pencarian

Gambar 4.20. STD Pencarian

(Sumber : Data diolah Penulis)

83

Page 100: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

i. State Transition Diagram Menu Polling

Gambar 4.21. STD Polling

(Sumber : Data diolah Penulis)

j. State Transition Diagram Menu Chatting

Gambar 4.22. STD Chatting

(Sumber : Data diolah Penulis)

84

Page 101: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

k. State Transition Diagram Menu Admin

Gambar 4.23. STD Admin

(Sumber : Data diolah Penulis)

85

Page 102: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

5. Pembahasan Flowchart

Untuk memberikan gambaran alir atau flowchart dari satu

tampilan ke tampilan lainnya pada website ini, maka digunakan

flowchart. Berikut adalah gambar flowchart website “Youth Studies

Center”.

Gambar 4.24. Flowchart tampilan user

(Sumber : Data diolah Penulis)

Penjelasan pada gambar flowchart untuk tampilan user, dimana

user setelah membuka website ini maka akan ada tampilan layar

menu home yang terdapat beberapa pilihan menu, kemudian bila

user memilih menu yang tersedia pada menu home itu maka akan

tampil halaman menu yang dipilih user.

86

Page 103: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

Gambar 4.25. Flowchart search engine (Sumber : Data diolah Penulis)

Penjelasan pada gambar flowchart untuk search engine, dimana

bila user bisa mencari berita yang ada di website ini pada tampilan

box search engine yang terdapat di setiap halaman website ini.

Setelah selesai memasukkan pencarian berita yang ingin dicari

dengan memasukkan kata kunci yang diinginkan maka akan tampil

halaman hasil pencariannya.

87

Page 104: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

Gambar 4.26. Flowchart polling

(Sumber : Data diolah Penulis)

Penjelasan pada gambar flowchart untuk polling, dimana user

bisa memilih menu polling yang disediakan pada website ini.

Setelah selesai memilih maka akan muncul tampilan total pemilih

polling. Kemudian jika user ingin mengetahui hasil polingnya

maka akan muncul halaman hasil polling.

6. Perancangan Basis Data

Berikut adalah struktur perancangan basis data yang penulis

gambarkan yaitu :

88

Page 105: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

Gambar 4.27 ERD Website Youth Studies Center (Sumber : Data diolah Penulis)

89

Page 106: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

Basis data yang terdapat pada gambar diatas terdiri dari tabel-

tabel sebagai berikut:

Tabel 4.7 Tabel Basis Data Website “Youth Studies Center”

(Sumber : Data diolah Penulis)

No.

Nama Tabel

Deskripsi Jumlah

field

1.

tb_modul Untuk pemberian isi

konten

9

2.

tb_user Untuk menambah,

menghapus anggota.

5

3.

tb_berita

Untuk menambah,

mengedit, dan

menghapus isi berita

8

4.

tb_profil

Untuk menambah,

mengedit, menghapus

isi profil

4

5.

tb_agenda Untuk penyimpanan

agenda

9

6.

tb_hubungi Untuk penyimpanan

bukutamu

6

7.

tb_download Untuk penyimpanan

file-file download

8

8.

tb_poling Untuk penyimpanan

poling

7

9.

tb_subscribe Untuk penyimpanan

subscribe

5

10.

tb_forum_posts Untuk penyimpanan

forum posts

5

11.

tb_forum_topics Untuk penyimpanan

forum topics

4

12.

tb_chattinganggota

Untuk penyimpanan

anggota yang telah

mendaftar chatting

5

13.

tb_chattingmessages

Untuk menyimpan,

menghapus pesan-

pesan chatting yang

sedang berlangsung

6

14.

tb_chattingonline Untuk menyimpan user

yang sedang online

4

90

Page 107: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

Gambar 4.28 Tabel Basis Data Website Youth Studies Center

(Sumber:Data diolah Penulis)

91

Page 108: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

Berikut adalah spesifikasi tabel basis data yang terdapat pada

website “Youth Studies Center” :

a. Tabel Modul

Tabel 4.8 Tabel Modul

(Sumber : Data diolah Penulis)

Field Name Data Type Extra id_modul int (5) auto_increment nama_modul varchar (50) link varchar (100) static_content text gambar varchar (100) public enum (‘Y’,’N’) status enum (‘user’,’admin’) aktif enum (‘Y’,’N’) urutan int (5)

b. Tabel User

Tabel 4.9 Tabel User

(Sumber : Data diolah Penulis)

Field Name Data Type Extra id_user varchar (50) auto_increment password varchar (50) nama_lengkap varchar (100) email varchar (100) level varchar (50)

c. Tabel Profil

Tabel 4.10 Tabel Profil

(Sumber : Data diolah Penulis)

Field Name Data Type Extra id_profil int (5) auto_increment isi text gambar varchar (100) tgl_posting date

92

Page 109: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

d. Tabel Berita

Tabel 4.11 Tabel Berita

(Sumber : Data diolah Penulis)

Field Name Data Type Extra id_berita int (5) auto_increment id_kategori int (5) judul varchar (100) isi_berita text gambar varchar (100) hari varchar (20) tanggal date jam time

e. Tabel Forum Topics

Tabel 4.12 Tabel Forum Topics

(Sumber : Data diolah Penulis)

Field Name Data Type Extra id_topic int (11) auto_increment topic_title varchar (150) topic_create_time datetime topic_owner varchar (150)

f. Tabel Forum Posts

Tabel 4.13 Tabel Forum Posts

(Sumber : Data diolah Penulis)

Field Name Data Type Extra id_post int (11) auto_increment id_topic int (11) post_text text post_create_time datetime post_owner varchar (150)

93

Page 110: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

g. Tabel Agenda

Tabel 4.14 Tabel Agenda

(Sumber : Data diolah Penulis)

Field Name Data Type Extra id_agenda int (5) auto_increment tema varchar (100) isi_agenda text tempat varchar (100) tgl_mulai date tgl_selesai date tgl_posting date hari varchar (30) id_user varchar (50)

h. Tabel Hubungi Kami

Tabel 4.15 Tabel Hubungi Kami

(Sumber : Data diolah Penulis)

Field Name Data Type Extra id_hubungi int (5) auto_increment nama varchar (50) email varchar (100) subjek varchar (100) pesan text tanggal date

i. Tabel Download

Tabel 4.16 Tabel Download

(Sumber : Data diolah Penulis)

Field Name Data Type Extra id_upload int (11) auto_increment judul varchar (100) nama_file varchar (30) ukuran int (6) tipe varchar (30) isifile mediumblob tgl_posting date direktori varchar (30)

94

Page 111: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

j. Tabel Subscribe

Tabel 4.17 Tabel Subscribe

(Sumber : Data diolah Penulis)

Field Name Data Type Extra id_subscribe int (11) auto_increment nama varchar (50) email varchar (50) status text unsubscribe text

k. Tabel Polling

Tabel 4.18 Tabel Polling

(Sumber : Data diolah Penulis)

Field Name Data Type Extra id_poling int (4) auto_increment

pertanyaan varchar (200) pilihan_a varchar (100) pilihan_b varchar (100) hasil_a int (4) hasl_b int (4) tgl_posting date

l. Tabel Chatting Anggota

Tabel 4.19 Tabel Chatting Anggota

(Sumber : Data diolah Penulis)

Field Name Data Type Extra id_chat int (20) auto_increment nama varchar (255) password varchar (255) email varchar (255) tanggal date

95

Page 112: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

m. Tabel Chatting Online

Tabel 4.20 Tabel Chatting Online

(Sumber : Data diolah Penulis)

Field Name Data Type Extra id_online int (20) auto_increment session_name varchar (255) time time tanggal date

n. Tabel Chatting Message

Tabel 4.21 Tabel Chatting Message

(Sumber : Data diolah Penulis)

Field Name Data Type Extra id_messages int (20) auto_increment poster varchar (255) messages mediumtext registered int (11) time time tanggal date

4.2.3. Coding

Pada tahap ini penulis menggunakan pengembang piranti lunak

Macromedia Dreamweaver 8.0 mendesain website, program ini mempunyai

kelebihan untuk membuat situs web seperti dengan dua langkah sekaligus

dalam satu waktu, yaitu mendesain dan memprogram. Hal ini disebabkan

program ini sudah menyertakan sintaks-sintaks kode yang berguna untuk

mengembangkan suatu aplikasi situs. Untuk tampilan grafis, penulis

menggunakan program pengolah gambar Adobe Photoshop CS 2 dan

Macromedia Flash 8 untuk pengolah gambar animasi.

96

Page 113: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

Gambar 4.29 Pengkodean di Macromedia Dreamweaver

menggunakan bahasa PHP. (Sumber : Data diolah Penulis)

Bahsa pemrograman yang digunakan adalah PHP 5.0.4,

MySQL versi 4.1.13 sebagai basis data, Apache 2.0.54 sebagai

server yang keseluruhannya terdapat dalam XAMPP versi 1.4.15.

4.2.4. Testing

Pada tahap ini dilakukan pengujian terhadap program oleh penulis.

Tahap ini dilakukan 2 metode yaitu :

1. Internal (white-box)

Pengujian internal pada suatu piranti lunak yang

menggambarkan bahwa semua statement sudah dilakukan

pengujian. Pada tahap pengujian internal yaitu melakukan

pengujian atas suatu bagian program untuk mengetahui apakah

dapat berfungsi dengan baik ketika dimasukan data atau

menampilkan data. Hasil yang didapat pada pengujian ini

berhasil.

97

Page 114: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

Gambar 4.30 Pengujian internal

(Sumber : Data diolah Penulis)

2. Eksternal (black-box)

Pada tahap ini dilakukan pengujian terhadap aplikasi oleh

penulis. Pengujian ini dilakukan dengan menggunakan metode

Black Box untuk mengecek satu persatu link dengan

menggunakan tabel pengujian, apakah link tersebut sudah

sesuai dengan apa yang diharapkan atau belum. Tabel

pengujiannya dapat dilihat pada lampiran 6.

98

Page 115: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

4.2.5. Support atau Maintenance

Kegiatan ini digunakan untuk mendukung beroperasinya dan

terpeliharanya sistem informasi yang telah dibuat. Pemeliharaaan aplikasi ini

dilakukan oleh administrator antara lain:

1. Membuat jadwal tetap untuk memperbaharui konten website sehingga

penulisan berita selalu up to date.

2. Pergantian tampilan wajah website secara berkala sehingga pengunjung

tidak bosan.

3. Terus menambah atau mengembangkan fitur lebih menarik

4.3 Implementasi

Setelah melakukan analisa dan perancangan, tahap selanjutnya ialah

implementasi website “Youth Studies Center” yang sebelumnya data-datanya

semua sudah dipindahkan ke komputer server sehingga bisa diakses oleh

komputer klien atau user.

Penulis menggunakan domain server (.org) pada website “Youth Studies

Center” karena berdasarkan teori yang telah dijabarkan pada bab II dimana kode

DNS untuk suatu organisasi menggunakan domain (.org) sehingga penulisannya

menjadi www.namadomain.org. Nama domain pada website ini yaitu

www.indonesiameetup.org.

99

Page 116: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

4.3.1. Prosedur Menjalankan Website

1. Spesifikasi Perangkat Keras

Website “Youth Studies Center” akan berjalan dengan

persyaratan minimum perangkat keras atau hardware yang penulis

sarankan yaitu :

a. Processor Intel Pentium II 450 MHz

b. Memori RAM 128 MB

c. Sisa kapasitas Hard Disk 100 MB

d. VGA Card 32 MB

e. Monitor dengan resolusi 1024 x 768

f. Keyboard

g. Mouse

h. Modem

2. Spesifikasi Perangkat Lunak

Perangkat lunak yang dibutuhkan oleh pengguna untuk

menjalankan website ini adalah :

a. Sistem Operasi Microsoft Windows versi 98, ME, 2000, XP.

b. Microsoft Internet Explorer versi 5.0 dan sesudahnya.

100

Page 117: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

4.3.2. Cara Pengoperasian Website

Untuk pengoperasian website “Youth Studies Center” dalam

dapat mengikuti langkah-langkah sebagai berikut :

1. Remaja (user) menggunakan komputer yang terhubung dengan

internet.

2. Jalankan browser Internet Explorer atau browser lain seperti

Netscape, Mozilla, Opera, dan lain-lain.

3. Kemudian ketikkan alamat www.indonesiameetup.org pada

address bar yang terdapat di browser.

4. Lalu pilih tombol navigasi yang ada untuk mendapatkan

informasi yang diinginkan.

4.4 Tampilan Visual Website

Pada sub bab ini akan ditampilkan tampilan visual website “Youth Studies

Center” yang telah dibuat.

101

Page 118: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

1. Tampilan Halaman Home

Gambar 4.31 Tampilan Halaman Home

102

Page 119: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

2. Tampilan Halaman Berita

Gambar 4.32 Tampilan Halaman Berita

103

Page 120: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

3. Tampilan Halaman Forum

Gambar 4.33 Tampilan Halaman Forum

104

Page 121: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

4. Tampilan Halaman Youth Info

Gambar 4.34 Tampilan Halaman Youth Info

5. Tampilan Halaman Archieve

Gambar 4.35 Tampilan Halaman Archieve

105

Page 122: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

6. Tampilan Halaman About us

Gambar 4.36 Tampilan Halaman About Us

7. Tampilan Halaman Contact us

Gambar 4.37 Tampilan Halaman Contact Us

106

Page 123: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

BAB V

PENUTUP

5.1. Kesimpulan

Berdasarkan pembahasan dan implementasi pengembangan website

”Youth Studies Center” secara keseluruhan dapat ditarik kesimpulan sebagai

berikut:

1. Website ini sudah online dengan menggunakan server IIX yang berada di

Indonesia dengan nama domain www.indonesiameetup.org.

2. Dari hasil penyebaran kuesioner ditarik kesimpulan bahwa rata-rata

remaja menyukai website meetup karena memiliki desain warna yang

menarik, huruf yang mudah dibaca, memiliki fitur pencarian (searching),

forum diskusi, chatting, dan subscribe.

5.2. Saran

Berdasarkan analisa yang dilakukan, maka saran yang dapat penulis

berikan kepada CERIC adalah sebagai berikut:

1. Pengembangan website ke depan disarankan ditambah fasilitas lain

seperti polling via sms dengan Yahoo Messenger (YM) account agar

lebih menarik minat remaja.

2. Administrator disarankan untuk selalu melihat statistik website yang

ada di control panel penyedia hosting agar dapat melihat berbagai

kesalahan yang direkam server ketika pengunjung membuka website

ini.

Page 124: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

DAFTAR PUSTAKA

Husein, Umar. Metode Riset Ilmu Administrasi. Jakarta : PT. Gramedia Pustaka

Utama. 2004.

Hoffer, Jeffrey A., George, J.F., Valacich, J.S. Modern System Analysis and Design.

Menlo Park. The Benjamin / Cummings Publishing Company Inc. 1996.

Jogiyanto, H.M. Analisis dan Desain Sistem Informasi. Yogyakarta : Andi Offset.

2005.

Kadir, Abdul. Dasar Pemrograman Web dengan ASP. Yogyakarta : Andi Offset.

2005.

Khaeruddin. Belajar Otodidak Adobe Photoshop CS Menguasai Tanpa Guru.

Yogyakarta : Andi Offset. 2005.

Komputer, Wahana. Seri Buku Pintar : Menjadi Seorang Desainer web. Yogyakarta :

Andi Offset. 2005.

Komputer, Wahana, Tim Litbang. Konsep Jaringan Komputer dan

Pengembangannya. Jakarta: Salemba Infotek. 2003.

Komputer, Wahana. Seri Panduan Lengakap Menguasai Pemrograman Web dengan

PHP 5. Semarang : Andi Offset Yogyakarta dan Wahana Komputer

Semarang. 2006.

Lenawati, Mei. Macromedia Dreamweaver 8.0 dengan PHP. Yogyakarta : Andi

Offset. 2007.

Madcoms. Aplikasi Program PHP dan MySQL untuk Membuat Website Interaktif.

Madiun : Andi Yogyakarta. 2004.

M.E, Nasution, Usman, H. Proses Penelitian Kuantitatif. Jakarta : Lembaga Penerbit

Fakultas Ekonomi Universitas Indonesia. 2006.

Nugroho, Bunafit. PHP dan MySQL dengan Editor Dreamweaver MX . Yogyakarta :

Andi Offset. 2004.

Port, Otis. Sang Penemu Jaringan Internet. Business Week. Edisi Indonesia. 2004.

Pressman, R.S. Software Engineering: A Practitioner’s Approach, Fifth Edition.

McGraw Hill Companies, Inc. United States. 2001.

108

Page 125: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

Purbo W, Onno dan Akhmad Daniel. Buku Pintar Internet Membangun Web E- Commerce. Jakarta : Elex Media Komputindo. 2000.

Rangkuti, Fredy. Riset Pemasaran. Jakarta: Gramedia. 2001.

Prakoso, Samuel, Hartono, Eddy, Oetomo, Budi Sutedja Dharma. Pengantar

Teknologi Informasi Internet, Konsep dan Aplikasi. Yogyakarta: Andi. 2007.

Sembiring H, Jhony. Jaringan Komputer Berbasis LInux. Jakarta : Elex Media

Komputindo. 2001.

Simarmata, J. & Paryudi, I. Basis Data. Penerbit Andi. Yogyakarta. 2006.

Soleh, Redi Taufik. Aplikasi Penjualan menggunakan VB 6.0 dan Navicat MySQL.

Jakarta : PT. Elex Media Komputindo. 2007.

Suyanto, M. Multimedia Alat untuk Meningkatkan Keunggulan Bersaing.

Yogyakarta:Andi Offset. 2003.

Syafrizal, Melwin. Pengantar Jaringan Komputer. Yogyakarta : Andi Offset. 2005.

Yourdon, Edward. Modern Structure Analysis. New Jersey : Prentice Hall Inc. 1989.

http://www.hamline.edu/apakabar/basisdata/2000/09/17/0051.html

www.toekangweb.or.id, 2006

www.centerforyouth.org, 2007

www.php.net, 2005

www.mysql.com, 2005

http://www.google.co.id/search?hl=id&q=kelemahan+php+yaitu&btnG=Telusuri+de

ngan+Google&meta= , 2008

http://209.85.175.104/search?q=cache:OAHFfUApmOcJ:institut.aidsina.org/mod/res ource/view.php%3Finpopup%3Dtrue%26id%3D18+kelemahan+mysql+adalah&hl=i

d&ct=clnk&cd=12&gl=id, 2008

http://www.himawansidharta.blogspot.com, 2005

www.telkom.net, 2005

109

Page 126: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

Lampiran 1: Wawancara

Waktu : Senin, 3 Maret 2008

Responden : Amalia Sustikarini, S. Sos

Jabatan : Direktur Pelaksana

Tempat : Kampus Fisip UI Gedung C Lantai 2, Depok Jawa Barat

16424.

Pertanyaan :

1. Bagaimanakah bentuk website yang tepat untuk ”Indonesian Youth

Studies Center” ini sehingga dapat menarik minat remaja?

2. Bagaimana mengukur keberhasilan dari website ini ?

3. Bagaimana para remaja dapat berinteraksi setelah mengakses website

ini?

Jawaban :

1. Menurut saya dilihat dari bentuk dan bahasa yang mudah dipahami

anak muda, menyenangkan, namun tetap mengandung pesan yang

diinginkan. Oleh karena itu informasinya dibuat semenarik

mungkin, serta menyediakan informasi yang akurat dan benar-

benar bermanfaat, sehingga pengguna informasi akan tertarik untuk

mengakses informasi tersebut.

2. Dari banyaknya pengunjung (hit counter), banyaknya komentar

(comment), dan banyaknya yang subscribe untuk edisi terbaru.

3. Melalui fitur komentar (comment).

Mengetahui,

xvi

Page 127: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

Lampiran 2: Kuesioner

No. Responden

UNIVERSITAS ISLAM NEGERI SYARIF HIDAYATULLAH JAKARTA

FAKULTAS SAINS DAN TEKNOLOGI

Jl. Ir. H. Juanda No.95, Ciputat 15412, Indonesia Email : [email protected] Telp : (62-21) 7493547, 7493606 Fax. : (62-21) 7493315 Website : http://www.fst.uinjkt.ac.id

Kepada Yang Terhormat,

Saudara/i

Di Tempat

Dengan hormat,

Dalam rangka memenuhi persyaratan skripsi guna memperoleh gelar sarjana, mohon

kerelaan Saudara/i untuk meluangkan waktu sejenak untuk mengisi kuesioner di

bawah ini.

Kesediaan saudara/i untuk mengisi kuesioner tersebut dengan lengkap dan sesuai

keadaan, maupun perasaan atau pendapat Saudara/i saat ini, sangat peneliti harapkan.

Untuk menjaga kerahasiaan jawaban yang diberikan, Saudara/i tidak perlu

mencantumkan identitas diri/nama.

Peneliti sangat berterima kasih atas peran serta Saudara/i dalam memberikan masukan

bagi pengembangkan website “Youth Studies Center” pada Center for Research on

Inter-Group Relations and Conflict Resolution (CERIC).

xvii

Page 128: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

Kemampuan Peneliti dalam mengembangkan website “Youth Studies Center”

Petunjuk Pengisian:

Mohon diberi tanda silang (X) pada salah satu kolom yang tersedia, apabila Anda

Setuju (S), dan Tidak Setuju (TS)

No. Pernyataan S TS

Desain

1. Tampilan warna website “Youth Studies Center” sudah

menarik.

2. Huruf yang digunakan di website “Youth Studies

Center” mudah dibaca.

Fitur Pencarian (Searching)

3. Saya mudah mencari informasi yang dibutuhkan

melalui fitur pencarian (searching)

Fitur Forum Diskusi

4. Saya mudah berinteraksi dengan user lain melalui fitur

forum diskusi.

Fitur Chatting

5. Fitur chatting membantu saya dalam berkomunikasi

yang direspon secara langsung.

Fitur Subscriber

6. Saya dapat mengetahui artikel-artikel terbaru melalui

fitur subscriber yang dikirim melalui email.

7. Saran saya untuk peneliti dalam mengembangkan website “Youth Studies Center”:

........................................................................................................................

........................................................................................................................

........................................................................................................................

........................................................................................................................

xviii

Page 129: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

Lampiran 3: Hasil Kuesioner

1. Tampilan website “Youth Studies Center” sudah menarik.

KATEGORI

FREKUENSI

PERSENTASE

Setuju 49 98 % Tidak Setuju 1 2 %

Total 50 100 %

2. Huruf yang digunakan di website “Youth Studies Center” mudah dibaca.

KATEGORI

FREKUENSI

PERSENTASE

Setuju 50 100 % Tidak Setuju 0 0 % Total 50 100 %

3. Saya mudah mencari informasi yang dibutuhkan melalui fitur pencarian

(searching).

KATEGORI

FREKUENSI

PERSENTASE

Setuju 50 100 % Tidak Setuju 0 0%

Total 50 100 %

xix

Page 130: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

4. Saya mudah berinteraksi dengan user lain melalui fitur forum diskusi.

KATEGORI

FREKUENSI

PERSENTASE

Setuju 47 94 % Tidak Setuju 3 6 %

Total 50 100 %

5. Fitur chatting membantu saya dalam berkomunikasi yang direspon secara

langsung.

KATEGORI

FREKUENSI

PERSENTASE

Setuju 50 100 % Tidak Setuju 0 0 %

Total 50 100 %

6. Saya dapat mengetahui artikel-artikel terbaru melalui fitur subscriber yang

dikirim melalui email.

KATEGORI

FREKUENSI

PERSENTASE

Setuju 50 100 % Tidak Setuju 0 0% Total 50 100 %

xx

Page 131: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

Lampiran 4: Alokasi Waktu

xxi

Page 132: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat

Lampiran 5: Perkiraan Biaya

PERKIRAAN BIAYA

Jenis Perangkat Mata

Uang

Nominal

Keterangan

Piranti Keras (Hardware) Komputer Intel Pentium 4, RAM

512 MB, Keyboard Logitech,

Mouse Logitech

USD 500 www.bhinneka.com

Piranti Lunak (Software) 1. Macromedia Dreamweaver 8.0 USD 299 www.macromedia.com

2. Macromedia Flash 8.0 USD 699 www.macromedia.com

3. Xampp 1.6.6a - - Freeware, melalui

http://www.nat32.com/xampp 4. Adobe Photoshop CS 2.0 USD 649 www.adobe.com

Penyewaan Jasa Hosting 1. Domain USD 7 Berlaku 1 tahun terhitung

dari tahun 2008

(www.eazysmart.com) 2. Sewa Hosting USD 10 Berlaku 1 tahun terhitung

dari tahun 2008

(www.eazysmart.com) Penggunaan Jasa SDM (Sumber Daya Manusia) 1. Web Design USD 50 www.gava-media.com

2. Web Programming USD 50 www.gava-media.com 3. Web Content USD 25 www.gava-media.com 4. Project Admin USD 25 www.gava-media.com

5. Technical Document USD 50 www.gava-media.com

xxii

Page 133: Pengembangan Website Youth Studies Center pada Center …repository.uinjkt.ac.id/dspace/bitstream/123456789/9714/1/NURAINI... · pemberdayaan pemikiran para remaja. Sebagai pusat