pengembangan aplikasi alumni berbasis web pada smk...

176
PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK NASIONAL DEPOK Billy Yanuardi 105091002791 PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS SAINS DAN TEKNOLOGI UIN SYARIF HIDAYATULLAH JAKARTA 2011

Upload: phamdung

Post on 07-Feb-2018

226 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB

PADA SMK NASIONAL DEPOK

Billy Yanuardi

105091002791

PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS SAINS DAN TEKNOLOGI

UIN SYARIF HIDAYATULLAH JAKARTA

2011

Page 2: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

PENGEMBANGAN APLIKASI WEB ALUMNI BERBASIS

MULTIMEDIA PADA SMK NASIONAL DEPOK

Oleh

BILLY YANUARDI

105091002791

Skripsi

Sebagai salah satu syarat untuk memperoleh gelar

Sarjana Komputer

Fakultas Sains dan Teknologi

Universitas Islam Negeri Syarif Hidayatullah Jakarta

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS SAINS DAN TEKNOLOGI

UNIVERSITAS ISLAM NEGERI SYARIF HIDAYATULLAH

JAKARTA

2011

Page 3: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK

NASIONAL DEPOK

Skripsi

Sebagai Salah Satu Syarat Untuk Memperoleh

Gelar Sarjana Komputer

Pada Fakultas Sains Dan Teknologi

Universitas Islam Negeri Syarif Hidayatullah Jakarta

Oleh

Billy Yanuardi

105091002791

Menyetujui

Pembimbing I Pembimbing II

Ir. Bakri La Katjong, MT, M. Kom Viva Arifin, MMSi NIP. 470 035 764 NIP. 19730210 200604 2 001

Mengetahui,

Ketua Program Studi Teknik Informatika

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

Page 4: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

Skripsi berjudul

Pada SMK Nasional Depok

telah diuji dan dinyatakan lulus dalam sidang Munaqosyah Fakultas Sains dan

Teknologi Universitas Islam Negeri Syarif Hidayatullah Jakarta pada tanggal

Juli 2011. Skripsi ini telah diterima sebagai salah satu syarat untuk

gelar sarjana strata satu (S1) Program Studi Teknik Informatika.

Penguji I

Herlg, MT

Pembimbing I

Ir. Bakri La Katjong, MT, M. Kom

DekanFakultas Sains dan Teknologi

DR. Syopiansyah Jaya NIP. 19680117 200112 1001

PENGESAHAN UJIAN

Skripsi berjudul ” Pengembangan Aplikasi Alumni Berbasis Web

Pada SMK Nasional Depok” yang ditulis oleh Billy Yanuardi

diuji dan dinyatakan lulus dalam sidang Munaqosyah Fakultas Sains dan

Teknologi Universitas Islam Negeri Syarif Hidayatullah Jakarta pada tanggal

. Skripsi ini telah diterima sebagai salah satu syarat untuk

gelar sarjana strata satu (S1) Program Studi Teknik Informatika.

Menyetujui,

Penguji I g, MT

Penguji II

rini, MTNIP. 19760131

Pembimbing I

Ir. Bakri La Katjong, MT, M. Kom

Pembimbing II

Viva Arifin, MMSiNIP. 19730210 200604 2 001

Mengetahui,

Dekan

Fakultas Sains dan Teknologi

DR. Syopiansyah Jaya Putra, M.Sis NIP. 19680117 200112 1001

Ketua

Program Studi Teknik Info

Yusuf Durrachman MIT NIP. 19710522 200604

Pengembangan Aplikasi Alumni Berbasis Web

Billy Yanuardi, 105091002791

diuji dan dinyatakan lulus dalam sidang Munaqosyah Fakultas Sains dan

Teknologi Universitas Islam Negeri Syarif Hidayatullah Jakarta pada tanggal 22

. Skripsi ini telah diterima sebagai salah satu syarat untuk memperoleh

Penguji II

rini, MT NIP. 19760131 200901

Pembimbing II

Viva Arifin, MMSi NIP. 19730210 200604 2 001

Teknik Info

Yusuf Durrachman MIT NIP. 19710522 200604 1 00

Page 5: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

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, Juli 2011

Billy Yanuardi

105091002791

Page 6: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

ABSTRAK BILLY YANUARDI, Pengembangan Aplikasi Alumni Berbasis Web Pada SMK Nasional Depok. (Di bawah bimbingan Bapak Bakri La Katjong dan Ibu Viva Arifin ). Perkembangan internet akhir - akhir ini telah membuat institusi pendidikan khususnya Sekolah Menengah Kejuruan membutuhkan sebuah situs web untuk mempermudah para siswa dan alumninya dalam memperoleh berbagai macam informasi mengenai sekolah. Dengan mengembangkan aplikasi alumni berbasis web, data-data alumni akan tetap terjaga. Selain itu pula dapat memudahkan pihak sekolah untuk memantau perkembangan alumni begitupun sebaliknya. Penggunaan multimedia mampu membuat suatu terobosan baru dalam menciptakan dinamika kemasan data dan informasi dengan cara yang berbeda, bukan dengan teks statis tetapi dengan animasi, teks, gambar, suara, serta video. Aplikasi ini disusun berdasarkan metode pengembangan System Development Life Cycle (SDLC) dengan strategi Watterfall. Peneliti menggunakan Macromedia Dreamweaver 8 sebagai perangkat lunak utama yang dibantu dengan Macromedia Flash, Adobe Photosop, Ulead Video Studio. Pada tahap implementasi, aplikasi di-unggah pada sebuah web hosting agar mempermudah user mengaksesnya. Kata Kunci: System Development Life Cycle (SDLC), Watterfall, Aplikasi Web, web hosting V Bab + xii Halaman + 100 Halaman + 75 Gambar + 12 Tabel + Daftar Pustaka + 6 Lampiran Pustaka 10 (1989 - 2010)

Page 7: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

KATA PENGANTAR

Assalamu’alaikum Wr.Wb

Dengan mengucapkan syukur Alhamdulillah, penulis panjatkan kehadirat

ILLAHI RABBI atas Rahmat dan Hidayah-Nya sehingga skripsi ini dapat selesai

sebagaimana mestinya.

Penulis menyadari bahwa tanpa bantuan dan bimbingan dari berbagai pihak,

skripsi yang berjudul “Pengembangan Aplikasi Alumni Berbasis Web Pada

SMK Nasional Depok” ini tidak akan selesai dengan baik. Pada kesempatan ini,

penulis ingin mengucapkan terima kasih yang sebesar-besarnya atas bimbingan

dan pengarahan yang diberikan pada penulis selama menyusun skripsi ini. Oleh

karena itu, izinkanlah penulis menyampaikan ucapan terima kasih kepada :

1. Bapak. DR. Syopiansyah, M.Sis selaku Dekan Fakultas Sains dan

Teknologi.

2. Bapak Yusuf Durrachman, M.Sc, MIT selaku Ketua Program Studi

Jurusan Teknik Informatika.

3. Ir. Bakri La Katjong, MT, M. Kom sebagai pembimbing pertama

skripsi ini yang secara bijaksana selalu memberikan saran untuk

perbaikan skripsi ini. Selalu memberikan dukungan moral maupun

teknis dan telah memberikan semangat motivasi selama melakukan

studi.

4. Viva Arifin,MMSi selaku pembimbing kedua yang selalu memberikan

dorongan semangat untuk penyelesaian skripsi ini. Terima kasih atas

Page 8: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

kebijaksanaan dalam membimbing dan selalu memberikan ide maupun

saran terlebih dalam aplikasi.

5. Bapak Ikhsan, S.Pd, sebagai pembimbing lapangan di SMK Nasional

Depok, yang selalu memberikan toleransi atas kesalahan. Selalu

mengingatkan untuk penyelesaian tugas skhir ini.

6. Kedua Orangtua saya, yang selalu memberikan contoh dan dukungan

moril maupun materil.

7. Kepada Kakak serta Adik saya, Selalu mengingatkan saya.

8. Kepada Nanang Khaerul Anwar dan M. Septian Saputra, sahabat yang

selalu memberikan inspirasi untuk terus semangat untuk maju walaupun

dalam keadaan sulit.

9. Kepada teman-teman kosan Danuri, M. Yogi Fatullah, M. Ridho Ihsan,

M. Aussie, M. Alamsyah, Aditya Cita Nugraha, Okky, Lutfi Hidayat

yang selalu memberikan tawa dan candanya didalam kejenuhan.

10. Kepada M. Fahrul Rodji dan Rizki Amadinda GP, teman seperjuangan

tapi tak sejalan.

11. Sahabat-sahabat keluarga besar Pergerakan Mahasiswa Islam Indonesia

(PMII) Komisariat Fakultas Sains dan Teknologi (KomFAST) yang

telah memberikan banyak pelajaran kepada penulis pentingnya

semangat pergerakan untuk perubahan.

12. Teman-teman TI 2005 A dan semua mahasiswa UIN Syarif

Hidayatullah, Semoga kita menjadi manusia yang mulia dihadapanNya.

Page 9: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

Penulis menyadari bahwa penyusunan skripsi ini masih jauh dari sempurna

sehingga segala saran dan kritik akan sangat membangun demi kesempurnaan

skripsi ini. Penulis berharap, skripsi ini dapat berguna dan bermanfaat bagi yang

membutuhkannya khususnya penulis sendiri, rekan-rekan mahasiswa dan

masyarakat pada umumnya.

Semoga segala bantuan yang diberikan kepada penulis akan mendapatkan

balasan yang setimpal dari Allah SWT, Amin.

Wassalamu’alaikum Wr.Wb

Jakarta, Agustus 2011

Billy Yanuardi Penulis

Page 10: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

DAFTAR ISI

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

HALAMAN SAMPUL ............................................................................................. ii

LEMBAR PERSETUJUAN PEMBIMBING ........................................................ iii

LEMBAR PENGESAHAN UJIAN ........................................................................ iv

HALAMAN PERNYATAAN .................................................................................. v

ABSTRAK ................................................................................................................ vi

KATA PENGANTAR .............................................................................................. vii

DAFTAR ISI ............................................................................................................. x

DAFTAR TABEL .................................................................................................... xiv

DAFTAR GAMBAR ................................................................................................ xv

DAFTAR SIMBOL .................................................................................................. xvii

DAFTAR LAMPIRAN ............................................................................................ xxi

BAB I PENDAHULUAN

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

1.2. Rumusan Masalah .......................................................................... 2

1.3. Batasan Masalah ............................................................................ 2

1.4. Tujuan dan Manfaat Penulisan ...................................................... 3

1.4.1. Tujuan Penulisan ................................................................ 3

1.4.2. Manfaat Penulisan .............................................................. 4

1.5. Metodologi Penelitian .................................................................... 5

1.5.1. Metodologi Pengumpulan Data ......................................... 5

Page 11: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

1.5.2. Metode Pengembangan Sistem .......................................... 5

1.6. Sistematika Penulisan .................................................................... 6

BAB II LANDASAN TEORI

2.1 Aplikasi Berbasis Web ................................................................... 8

2.1.1 Dasar-dasar Pemrograman Berbasis Web ............................ 10

2.1.2 Keunggulan Web Berfasilitas Basis Data ............................. 10

2.1.3 Jaringan Komputer ............................................................... 11

2.2 Pengertian Alumni ......................................................................... 11

2.3 Database Dan DBMS ..................................................................... 11

2.4 Pengembangan Sistem ................................................................... 13

2.4.1 Definisi Pengembangan Sistem ............................................ 13

2.4.2 Tahapan Pengembangan Sistem ........................................... 14

2.5 Siklus Hidup Pengembangan Sistem Informasi ............................ 17

2.6 Proses Pengembangan Sistem Sederhana ...................................... 18

2.7 Tool Pengembangan Sistem .......................................................... 20

2.7.1 Flowchart ............................................................................. 20

2.7.2 DFD ( Data Flow Diagram) ................................................. 21

2.7.3 ERD (Entity Relationship Diagram) .................................... 22

2.7.4 Spesifikasi Proses ................................................................. 25

2.7.5 STD (State Transition Diagram) .......................................... 25

2.8 PHP (Hipertext Preprocessor) ....................................................... 25

2.9 MySQL .......................................................................................... 27

Page 12: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

2.10 Fase Implementasi ......................................................................... 28

2.11 Web Browser .................................................................................. 28

2.12 Web Server ..................................................................................... 29

2.13 Pengenalan Macromedia Dreamweaver 8 ..................................... 29

2.14 Pengujian ....................................................................................... 32

2.15 Penelitian Sejenis ........................................................................... 33

BAB III METODOLOGI PENELITIAN 3.1 Metode Pengumpulan Data ............................................................ 37

3.1.1 Studi Pustaka ........................................................................ 37

3.1.2 Studi Literatur ...................................................................... 38

3.1.3 Studi Lapangan ..................................................................... 38

3.2 Metode Pengembangan Sistem ...................................................... 40

3.3 Kerangka Berpikir ......................................................................... 43

BAB IV ANALISA DAN PERANCANGAN

4.1 System Initiation ............................................................................ 45

4.1.1 Identifikasi Masalah ............................................................. 46

4.1.2 Lingkup Sistem .................................................................... 46

4.1.3 Tujuan ................................................................................... 47

4.2 System Analysis .............................................................................. 47

4.2.1 Gambaran Umum ................................................................. 47

4.2.1.1 Sejarah Singkat SMK Nasional Depok .................. 47

4.2.1.2 Visi, Misi dan Motto .............................................. 49

4.2.1.3 Struktur Organisasi SMK Nasional Depok ............ 50

Page 13: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

4.2.2 Analisa Sistem Berjalan ....................................................... 50

4.2.2.1 Kelemahan Sistem Berjalan ................................... 57

4.2.3 Analisa Pemecahan Masalah ................................................ 58

4.2.3.1 Kebutuhan User dan Sistem ................................... 59

4.3 System Design ................................................................................ 60

4.3.1 Perancangan Proses .............................................................. 61

4.3.1.1 Perancangan DFD (Data Flow Diagram) .............. 61

4.3.1.2 Perancangan Flowchart View ................................. 64

4.3.2 Perancangan Database ......................................................... 73

4.3.3 Perancangan Tampilan (GUI) .............................................. 76

4.3.3.1 Perancangan Struktur Navigasi .............................. 76

4.3.3.2 State Transition Diagram (STD) ........................... 79

4.3.3.3 Perancangan Layout ............................................... 83

4.4 System Implementation ................................................................. 89

4.4.1 Coding .................................................................................. 89

4.4.2 Pengujian Sistem .................................................................. 89

BAB V PENUTUP

5.1 Kesimpulan .................................................................................... 94

5.2 Saran .............................................................................................. 94

DAFTAR PUSTAKA ............................................................................................... 96

LAMPIRAN

Page 14: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

DAFTAR TABEL

Tabel 2.1 Langkah-langkah Pemecahan Masalah Umum ....................................... 19

Tabel 2.2 Skripsi Sebelumnya Tentang pembuatan web alumni pada SMKN ....... 34

Tabel 2.3 Skripsi Sebelumnya Tentang pembuatan web alumni pada SMAI ......... 35

Tabel 2.4 Skripsi Sebelumnya Tentang pembuatan web almamater ....................... 36

Tabel 4.1 Mengenal web alumni ............................................................................. 51

Tabel 4.2 Kegunaan web alumni ............................................................................. 52

Tabel 4.3 Keinginan Adanya Web Alumni ............................................................. 53

Tabel 4.4 Keinginan Isi web alumni ........................................................................ 54

Tabel 4.5 Mengenal Web Aplikasi .......................................................................... 55

Tabel 4.6 Ketertarikan Membuat aplikasi alumni berbasiskan web ............................... 56

Tabel 4.7 Blackbox Testing ..................................................................................... 91

Page 15: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

DAFTAR GAMBAR

Gambar 2.1 Komunikasi Data .................................................................................... 11

Gambar 2.2 Macro Media Dreamweaver 8 .................................................................... 30

Gambar 3.1 Kerangka Berpikir ................................................................................. 44

Gambar 4.1 Sruktur Organisasi SMK Nasional Depok ............................................ 50

Gambar 4.2 Diagram Mengenal Web Alumni ............................................................ 51

Gambar 4.3 Diagram Kegunaan Web Alumni............................................................ 52

Gambar 4.4 Diagram Keinginan Adanya Web Alumni ................................................... 53

Gambar 4.5 Diagram Keinginan Isi web alumni ........................................................ 54

Gambar 4.6 Diagram Mengenal Web Aplikasi .......................................................... 55

Gambar 4.7 Diagram Ketertaikan Akan Web Applikasi............................................. 56

Gambar 4.8 Diagram Konteks Level 0 .......................................................................... 61

Gambar 4.9 Diagram Nol Level 1 ................................................................................ 62

Gambar 4.10 Flowchart Menu Utama ......................................................................... 64

Gambar 4.11 Flowchart Home ..................................................................................... 65

Gambar 4.12 Flowchart Kata Sambutan ...................................................................... 67

Gambar 4.13 Flowchart Alumni .................................................................................. 68

Gambar 4.14 Flowchart Galeri .................................................................................... 69

Gambar 4.15 Flowchart Info BKK .............................................................................. 71

Gambar 4.16 Flowchart Login ..................................................................................... 72

Gambar 4.17 ERD Pengembangan aplikasi alumni berbasis web ..................................... 75

Page 16: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

Gambar 4.18 Diagram Menu Utama ............................................................................ 76

Gambar 4.19 Diagram Kata Sambutan......................................................................... 77

Gambar 4.20 Diagram Alumni ..................................................................................... 78

Gambar 4.21 Diagram Menu Hiburan .......................................................................... 78

Gambar 4.22 Diagram Menu Info BKK ....................................................................... 78

Gambar 4.23 STD Menu Utama................................................................................... 79

Gambar 4.24 STD Kata Sambutan ............................................................................... 80

Gambar 4.25 STD Alumni ........................................................................................... 81

Gambar 4.26 STD Galeri.............................................................................................. 81

Gambar 4.27 STD Info BKK ....................................................................................... 82

Gambar 4.28 layout halaman menu utama ................................................................... 83

Gambar 4.29 layout halaman Kata Sambutan .............................................................. 84

Gambar 4.30 layout halaman Alumni .......................................................................... 85

Gambar 4.31 layout halaman Galeri ............................................................................... 86

Gambar 4.32 layout halaman Info BKK .......................................................................... 87

Gambar 4.33 layout halaman edit profil .......................................................................... 88

Page 17: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

DAFTAR SIMBOL

Flowchart Direction Symbol

(Ladjamuddin, 2004)

No Gambar Keterangan 1.

Simbol Arus/ Flow Adalah simbol untuk menyatakan jalannya arus suatu proses

2.

Simbol Offline Connector Simbol ini digunakan untuk menyatakan sambungan dari satu proses ke proses lainnya dalam halaman/ lembar yang berbeda.

3.

Simbol Connector Digunaka untuk menyatakan sambungan dari satu proses ke proses lainnya dalam halaman/lembar yang sama

Page 18: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

Processing Symbol

(Ladjamuddin, 2004)

No Gambar Keterangan 1.

Simbol Keying Operation Simbol untuk menyatakan segala jenis operasi yang diproses dengan menggunakan suatu mesin yang mempunyai keyboard

2.

Simbol Manual Simbol untuk menyatakan suatu proses yang dilakuakn secara manual.

3.

Simbol Decision Simbol untuk menunjukan kondisi tertentu yang akan menghasilkan dua kemungkinan jawaban, ya atau tidak.

4.

Simbol Predefined Proses Untuk menyatakan penyediaan tempat penyimpangan suatu pengolahan untuk memberi harga awal.

5.

Simbol Terminal Simbol Untuk menyatakan permulaan atau akhir suatu program.

6.

Simbol Off-Line Storage Simbol Untuk menunjukan bahwa data dalam symbol ini akan disimpan kesuatu media tertentu.

Page 19: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

7.

Simbol Manual Input Simbol untuk memasukan data secara manual dengan menggunakan online keyboard.

Input-Output Symbol

(Ladjamuddin, 2004)

No Gambar Keterangan 1.

Simbol Input-Output Simbol ini menyatakan proses input dan output tanpa tergantung jenis peralatannya.

2.

Simbol Punched Card Simbol untuk menyatakan input dari kartu atau output tulis ke kartu.

3.

Simbol Magnetik-Tape Unit Simbol untuk menyatakan input berasal dari pita magnetic atau output disimpan ke pita magnetik.

4.

Simbol Disk Storage Simbol untuk menyatakan input berasal dari disk atau output disimpan ke disk.

5.

Simbol Document Simbol untuk mencetal laporan ke printer.

6.

Simbol Display Simbol untuk menyatakan peralatan output yang digunakan berupa layar (video, komputer).

Page 20: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

Data Flow Diagram Symbol

(Ladjamuddin, 2004)

Entity Relationship Diagram (ERD)

(Ladjamuddin, 2004)

Notasi Keterangan

Himpunan Entitas

Atribut

Himpunan Relasi

Link

No Gambar Keterangan Nama Simbol Simbo DFD versi Yourdan,

De Marco, dan Lainnya Simbol DFD versi

Gane dan Sarson

Arus Data

Proses

Penyimpanan Data

Entitas Luar

Page 21: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

BAB I

PENDAHULUAN

1.4. Latar Belakang

Perkembangan internet akhir - akhir ini telah membuat institusi pendidikan

khususnya Sekolah Menengah Kejuruan membutuhkan sebuah situs web untuk

mempermudah para siswanya dalam memperoleh berbagai macam informasi

mengenai sekolah. Siswa dalam hal ini tidak hanya meliputi Siswa yang masih

menjalani pendidikan di SMK tersebut, melainkan juga siswa yang telah

menyelesaikan pendidikannya atau alumni.

Setelah mereka lulus, mereka akan berpisah satu sama lain untuk

melanjutkan ke jenjang yang lebih tinggi atau menggapai cita-citanya masing-

masing. Banyak informasi tentang sekolah yang sudah ditinggalkan tidak sampai

kepada alumni - alumni yang jarang berkomunikasi dengan sekolah bersangkutan.

Salah satu media yang dapat dipakai untuk menjembatani hubungan antara

alumni dengan pihak Sekolah adalah internet khususnya situs Web. Aplikasi Web

tidak lagi terbatas sebagai pemberi informasi yang statis, melainkan juga mampu

memberikan informasi yang berubah secara dinamis dengan cara melakukan

koneksi terhadap basisdata.

Dengan pesatnya perkembangan teknologi maka penulis berinisiatif untuk

mengembangkan web SMK Nasional yang sudah ada dengan menambahkan sub

menu alumni, hal ini dimaksudkan agar data-data alumni tetap terjaga, selain itu

Page 22: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

pula dapat memudahkan pihak sekolah untuk memantau perkembangan alumni

begitupun sebaliknya.

Dalam penulisan skripsi ini penulis membuat sebuah penulisan yang

berjudul “Pengembangan Aplikasi Alumni Berbasis Web Pada SMK Nasional

Depok“. Alasan penulis membuat aplikasi alumni berbasiskan web ini seiring

dengan bertambahnya jumlah alumni SMK Nasional maka pihak sekolah pun

membutuhkan sebuah sarana untuk mengetahui informasi yang terkait tentang

alumni – alumninya, selain itu para alumni lebih mudah dan interaktif dalam

melihat informasi tentang lowongan pekerjaan yang tersedia dari sekolah dan

informasi-informasi lainnya yang terkait dengan sekolah (Interview Bpk.

Sugiharto, S.Sos. 2011). Untuk itu penulis berharap dengan adanya aplikasi

alumni berbasiskan web ini dapat melancarkan kegiatan atau program-program

yang sudah diagendakan pihak sekolah.

1.2. Rumusan Masalah

Rumusan masalah pada penyusunan skripsi ini adalah:

1. Belum adanya aplikasi yang dapat merekap data-data alumni SMK

Nasional Depok .

2. Aplikasi web yang ada belum dapat menyajikan info bursa kerja

khusus yang dibutuhkan oleh sebagian besar alumni SMK Nasional

Depok.

1.3. Batasan Masalah

Dalam penyusunan skripsi ini, penulis membatasi pembahasannya hanya

pada:

Page 23: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

1. Informasi yang ditampilkan adalah biodata alumni, gallery kelas

berupa foto, data-data mengenai bursa kerja khusus (BKK) dan hal-hal

yang terkait dengan data-data alumni SMK Nasional (video kata

sambutan, lagu-lagu mars sekolah).

2. Data-data yang digunakan adalah data alumni SMK Nasional Depok

Angkatan 2009.

3. Metodologi pengembangan sistem yang digunakan adalah System

Development Life Cycle (SDLC) dari tahapan system initiation, system

analysis, system design sampai dengan tahapan system implementation,

peneliti tidak membahas keamanan data dan pemeliharaan

(maintenance) serta pengujian sistem dilakukan dengan blackbox

testing.

4. Tools yang digunakan adalah Microsoft Visio 2007, Macromedia

Firewoks 8, Macromedia Dreamweaver 8, Php MySQL dan shape

pada microsoft power point.

5. Pengguna web alumni ini terdiri dari pihak sekolah, para alumni, dan

siswa - siswi.

1.4. Tujuan dan Manfaat Penulisan

1.4.1. Tujuan Penulisan

Tujuan dalam penyusunan skripsi yang berjudul “Pengembangan

Aplikasi Alumni Berbasis Web Pada SMK Nasional Depok” ini adalah:

1. Mengembangkan aplikasi alumni berbasis web dengan

penambahan suatu modul bursa kerja kursus (BKK).

Page 24: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

2. Mengembangkan Aplikasi web yang dapat diakses melalui

internet, sehingga proses pencatatan serta pencarian data

informasi khususnya berkaitan dengan data alumni yang

dibutuhkan dapat berlangsung secara cepat dan akurat.

1.4.2. Manfaat Penulisan

a. Bagi SMK Nasional Depok

1. Memberikan kemudahan kepada instansi untuk mengetahui

informasi yang terkait tentang alumni.

2. Memberikan kemudahan kepada alumni untuk

mendapatkan informasi yang terkait tentang sekolah dan

lowongan pekerjaan yang tersedia.

3. Dapat dijadikan sebagai salah satu media publikasi oleh

pihak sekolah dalam menjalankan program sekolah

khususnya info BKK.

b. Bagi Peneliti

1. Untuk memenuhi salah satu syarat kelulusan Strata Satu

(S1) pada Program Studi Sistem Informasi, Fakultas Sains

dan Teknologi Universitas Islam Negeri Syarif

Hidayatullah Jakarta.

2. Menerapkan ilmu multimedia pada bidang web publishing

c. Bagi Universitas

1. Diharapkan sebagai sumbangan karya ilmiah dalam disiplin

ilmu khususnya dalam bidang Multimedia.

Page 25: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

2. Berguna sebagai penambah hasil-hasil penelitian yang dapat

dijadikan bahan bacaan bagi yang berminat mengkaji

permasalahan atau topik yang serupa.

1.5. Metodologi Penelitian

Dalam rangka menyusun skripsi ini, diperlukan data - data serta informasi

yang relatif lengkap sebagai bahan yang dapat mendukung kebenaran materi

uraian dan pembahasan. Oleh karena itu sebelum menyusun skripsi ini, dalam

persiapannya terlebih dahulu dilakukan riset atau penelitian untuk menjaring data

serta informasi atau bahan materi yang diperlukan.

Adapun metode pengumpulan data serta metode pengembangan aplikasi

multimedia yang dilakukan adalah sebagai berikut:

1.5.1. Metodologi Pengumpulan Data

1. Studi Pustaka

2. Studi Literatur

3. Studi Lapangan

Pada studi lapangan, peneliti membaginya menjadi tiga bagian,

yaitu:

a. Observasi

b. Kuisioner

c. Wawancara

1.5.2. Metode Pengembangan Sistem

Pada metode pengembangan sistem, penulis menggunakan metode

pengembangan sistem System Development Life Cycle (SDLC) dengan

Page 26: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

strategi Waterfall yang terdiri dari Permulaan sistem (system initiation),

Analisis sistem (system analysis), Desain sistem (system design),

Implementasi sistem (system implementation) (Whitten, 2004).

1. System Initiation

2. System Analysis

3. System Design

4. System Implementation

1.6. Sistematika Penulisan

BAB I PENDAHULUAN

Bab ini diuraikan mengenai latar belakang diadakannya

penelitian, perumusan masalah, batasan masalah, tujuan dan

manfaat penelitian, metodologi penelitian, dan sistematika

penulisan.

BAB II LANDASAN TEORI

Bab ini diuraikan teori-teori yang menjadi dasar/landasan

penelitian. Teori-teori tersebut didapat dari penelitian

kepustakaan sebagai landasan dalam melakukan penelitian.

Teori-teori yang digunakan adalah teori-teori mengenai

Aplikasi web, interaksi manusia dan komputer, perancangan,

serta aplikasi yang dipakai.

BAB III METODOLOGI PENELITIAN

Bab ini berisi mengenai metodologi pengumpulan data serta

metode pengembangan sistem.

Page 27: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

BAB IV HASIL DAN PEMBAHASAN

Bab ini berisi mengenai gambaran umum sekolah SMK

NASIONAL Depok, serta akan membahas mengenai analisa

sistem yang sedang berjalan dan perancangan sistem baru

berbasis web, serta pengimplementasian sistem yang baru pada

sekolah beserta evaluasinya.

BAB V KESIMPULAN DAN SARAN

Bab ini penulis akan membuat kesimpulan dari inti penelitian

dan hasil penelitian yang penulis kerjakan. Bab ini akan berisi

juga saran-saran dan langkah-langkah lanjutan yang mungkin

perlu diambil untuk memperbaiki dan melanjutkan lagi aplikasi

penulis.

DAFTAR PUSTAKA

Page 28: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

BAB II

LANDASAN TEORI

2.1 Aplikasi Berbasis Web

Pada awalnya aplikasi web dibangun hanya dengan menggunakan bahasa

yang disebut HTML (HyperText Markup Languange) dan protokol yang

digunakan dinamakan HTTP (HyperText Transfer Protocol). Pada

peerkembangan berikutnya, sejumlah script dan objek yang dikembangkan untuk

memperluas kemampuan HTML. Pada saat ini, banyak script seperti itu; antara

lain PHP dan ASP, sedangkan contoh yang berupa objek antara lain adalah applet

(Java). (Abdul Kadir,2005)

Aplikasi web sendiri dapat dibagi menjadi web statis dan web dinamis. Web

statis dibentuk dengan mengguankan HTML saja. Kekurangan aplikasi ini terletak

pada keharusan untuk memelihara program secara terus-menerus untuk mengikuti

setiap perubahan yang terjadi. Kelamahan ini dapat diatasi dengan model aplikasi

web dinamis. Web dinamis adalah web yang menampilkan informasi yang bersifat

dinamis (berubahubah) dan dapat saling berinteraksi dengan user.

Dengan memperluas kemampuan HTML, yakni dengan menggunakan

perangkat lunak tambahan. Perubahan informasi dalam halaman-halaman web

dapat ditangani melalui perubahan data, bukan melalui perubahan program.

Sebagai implementasinya, aplikasi web dapat dikoneksikan ke basis data. Dengan

demikian perubahan informasi dapat dilakukan oleh operator atau yang

Page 29: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

bertanggung jawab terhadap kemutakhiran data, dan tidak menjadi tanggung

jawab pemrogram atau webmaster.

Dengan menggunakan pendekatan web dinamis, dimungkinkan untuk

membentuk aplikasi berbasis web yang berinteraksi dengan database. Sebagai

contoh, system informasi karyawan berbasis web yang memungkinkan seorang

karyawan melihat informasi tentang kehadiran dalam satu bulan.

Saat ini, web telah menjadi antar muka pemakai untuk aplikasi basis data.

Web telah menjadi sistem informasi terbesar berbasis hypertext. Web menjadi

penting sebagai front-end basis data karena beberapa alasan sebagai berikut

(Hariyanto, 2004):

1. Web browser telah menyediakan front-end universal terhadap informasi

yang diberikan back-end yang berlokasi di manapun di dunia.

2. Web browser berjalan di sistem komputer manapun dan pemakai tidak

perlu melakukan download perangkat lunak khusus untuk pengaksesan

informasi melalui web.

Web browser telah menjadi pilihan antar muka pemakai untuk aplikasi

fungsi perusahaan. Pada perusahaan, aplikasi web interaktif digunakan dalam

beragam cara antara lain:

1. Intranet

Aplikasi yang menyediakan pengaksesan informasi skala Instansi.

2. Extranet

Aplikasi yang merupakan antar muka antara sekolah dan para alumni.

Page 30: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

3. Internet

Aplikasi interaktif website Sekolah seperti web alumni sekolah.

2.1.1 Dasar-dasar Pemrograman Berbasis Web

Beberapa dasar web yang perlu diketahui antara lain (Hariyanto,

2004):

1. Komunikasi antara web browser dan web server berdasarkan

protokol HTTP.

2. Dokumen (bahkan sumber daya apapun di jaringan) yang

dikehendaki diidentifikasi dengan URL (Universal Resource

Locator, masih banyak yang menyebut Uniform Resource

Locator).

3. Dokumen web ditulis berdasarkan standar HTML.

4. Pemrograman sisi client (client-side scripting) dan java upplet.

2.1.2 Keunggulan Web Berfasilitas Basis Data

Dengan semakin berkembangnya layanan informasi dan e-

commerce pada web, maka basis data yang digunakan, sistem pendukung

keputusan dan pengolahan transaksi harus ditautkan dengan web. Formulir

HTML merupakan antar muka nyaman untuk pengolahan transaksi.

Pemakai dapat mengisi rincian-rincian formulir dan melakukan klik submit

untuk mengirim pesan ke server. Server mengeksekusi transaksi basis data

di situs server.

Page 31: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

Menghubungkan basis data dan web penting karena dokumen statik

di situs web mempunyai keterbatasan bahkan untuk pemakai yang tidak

melakukan query atau pengolahan transaksi sekalipun (Hariyanto, 2004).

2.1.3 Jaringan Komputer

Yang disebut jaringan komputer (computer network) atau sering

disingkat jaringan saja adalah hubungan dua buah simpul (umumnya berupa

komputer) atau lebih yang tujuan utamanya adalah untuk melakukan

pertukaran data (Kadir, 2003).

Gambar 2.1 Komunikasi Data

2.2 Pengertian Alumni

Menurut kamus besar bahasa Indonesia, kata alumni berarti orang - orang

yang telah mengikuti atau tamat dari suatu sekolah atau perguruan tinggi

(Departemen Pendidikan Nasional, 2008)

2.3 Database Dan DBMS

Basis Data (Database) adalah mekanisme suatu pengorganisasian

sekumpulan data yang saling terkait sehingga memudahkan aktivitas untuk

memperoleh informasi (Kadir, 2003).

Page 32: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

Sistem Manajemen Basis Data atau DBMS (Database Manajemen System)

adalah perangkat lunak untuk mendefinisikan, menciptakan, mengelola dan

mengendalikan pengaksesan basis data (Hariyanto, 2004). Fungsi sistem

manajemen basis data saat ini yang paling penting adalah menyediakan basis

untuk sistem informasi manajemen.

Keunggulan Sistem Manajemen Basis Data atau DBMS(Database

Management System):

1. Pengendalian terhadap redudansi data adalah

2. Konsistensi data

3. Informasi yang lebih banyak yang dapat di bentuk dari data tersimpan

yang sama

4. Pemakaian bersama data

5. Peningkatan integritas data

6. Pemaksaan terhadap standar

7. Skala Ekonomi

8. Penyeimbangan kebutuhan-kebutuhan sumber daya yang terbatas

9. Peningkatan pengaksesan dan daya tanggap data

10. Peningkatan produktivitas

11. Peningkatan pemeliharaan lewat ketidakbergantungan data

12. Peningkatan konsekuensi

13. Peningkatan layanan backup dan pemulihan data

Kelemahan Sistem Manajemen Basis Data atau DBMS(Database

Management System):

Page 33: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

1. Kompleksitas yang tinggi

2. Ukuran perangkat lunak yang besar

3. Ongkos sistem manajemen basis data untuk pengadaan, operasi, dan

perawatan

4. Penambahan ongkos-ongkos perangkat keras untuk menjalankan

DBMS

5. Ongkos konversi dari sistem lama ke sistem baru

6. Kinerja yang rendah bila tidak mampu menggunakan dengan bagus

7. Dampak yang tinggi bila terdapat kegagalan

2.4 Pengembangan Sistem

Didalam pengembangan sistem ini akan menjelaskan tentang

defnisi pengembangan sistem, tahapan pengembangan sistem dan konsep

siklus pengembangan sistem.

2.4.1 Definisi Pengembangan Sistem

Pengembangan sistem (system development) dapat berarti

menyusun suatu sistem baru untuk menggantikan sistem yang lama secara

keseluruhan atau memperbaiki sistem yang telah ada. Sistem yang lama

perlu diperbaiki atau diganti (Jogiyanto, 2005).

2.4.2 Tahapan Pengembangan Sistem

Page 34: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

Proses pengembangan sistem terdiri dari proses standar atau

langkah yang dapat digunakan pada semua proyek pengembangan sistem.

Meskipun proses bisnis pada masing-masing organisasi berbeda, mereka

memiliki karakteristik umum yang sama, yaitu kebanyakan proses

pengembangan sistem pada organisasi mengikuti pendekatan problem-

solving. Berikut ini adalah langkah problem-solving secara umum:

1. Analisis Sistem

Analisis sistem (systems analysis) dapat didefinisikan

sebagai penguraian dari suatu sistem informasi yang utuh ke dalam

bagian-bagian komponennya dengan maksud untuk

mengidentifikasikan dan mengevaluasi permasalahan-

permasalahan, kesempatan-kesempatan, hambatan-hambatan yang

terjadi dan kebutuhan-kebutuhan yang diharapkan sehingga dapat

diusulkan perbaikan- perbaikannya (Jogiyanto, 2005).

Tahap analisis sistem dilakukan setelah tahap perencanaan

sistem (systems planning) dan sebelum tahap desain sistem

(systems design). Tahap analisis merupakan tahap yang kritis dan

sangat penting, karena kesalahan di dalam tahap ini akan

menyebabkan juga kesalahan di tahap selanjutnya (Jogiyanto,

2005).

Didalam tahap analisis terdapat langkah-langkah dasar

yang harus dilakukan oleh analis sistem sebagai berikut (Jogiyanto,

2005):

Page 35: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

a) Identify, yaitu mengidentifikasi masalah.

b) Understand, yaitu memahami kerja dari sebuah sistem

yang ada.

c) Analyze, yaitu menganalisis sistem.

d) Report, yaitu membuat laporan dari hasil analisa.

2. Desain Sistem

Desain sistem dapat diartikan sebagai berikut (Jogiyanto,

2005):

a) Tahap setelah analisis dari siklus pengembangan

sistem.

b) Pengidentifikasian dari kebutuhan-kebutuhan

fungsional.

c) Persiapan untuk merancang bangunan implementasi.

d) Menggambarkan bagaimana suatu sistem di bentuk.

e) Penggambaran berupa, perencanaan dan pembuatan

sketsa atau pengaturan dari beberapa elemen yang

terpisah ke dalam satu kesatuan yang utuh dan

berfungsi.

f) Konfigurasi dari komponen-komponen perangkat lunak

dan perangkat keras dari suatu sistem.

Desain sistem (systems design) dapat dibagi dalam dua

bagian, yaitu desain sistem secara umum (general systems design)

dan desain sistem terinci (detailed systems design). Desain sistem

Page 36: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

secara umum (general systems design) disebut juga dengan desain

konseptual (conceptual design) atau desain logikal (logical design)

atau desain secara makro (macro design). Desain sistem terinci

disebut juga dengan desain sistem phisik (physical systems design)

atau desain internal (internal design). (Jogiyanto, 2005)

Tujuan dari desain secara umum adalah untuk

memberikan gambaran secara umum kepada user tentang sistem

yang baru. Desain secara umum mengidentifikasikan komponen-

komponen sistem informasi yang akan di desain secara rinci.

Desain terinci dimaksudkan untuk pemogram komputer dan ahli

teknik lainnya yang akan mengimplementasi sistem (Jogiyanto,

2005).

3. Seleksi Sistem

Menyeleksi atau memilih teknologi untuk sistem informasi

merupakan tugas yang tidak mudah. Tahap seleksi sistem (system

selection) merupakan tahap untuk memilih perangkat keras dan

perangkat lunak untuk sistem informasi (Jogiyanto, 2005).

4. Implementasi Sistem

Tahap implementasi sistem (system implementation)

merupakan tahap meletakkan sistem supaya siap untuk

Page 37: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

dioperasikan. Tahap ini termasuk juga kegiatan menulis kode

program jika tidak digunakan paket perangkat lunak aplikasi dan

pengetesan program (Jogiyanto, 2005).

2.5 Siklus Hidup Pengembangan Sistem Informasi

Secara konseptual siklus pengembangan sebuah sistem informasi adalah sbb

(Ladjamuddin, 2005):

1. Analisis Sistem: menganalisis dan mendefinisikan masalah dan

kemungkinan solusinya untuk sistem informasi dan proses organisasi.

2. Perancangan Sistem: merancang sistem baru yang dapat menyelesaikan

masalah-masalah yang dihadapi perusahaan yang diperoleh dari

pemilihan alternatif sistem yang baik. Kegiatan yang dilakukan antara

lain merancang output, input, struktur file, program, prosedur, perangkat

keras dan perangkat lunak yang diperlukan untuk mendukung sistem

informasi.

3. Programming dan Testing Sistem : pada tahap ini dilakukan

perancangan algoritma dengan menggunakan pseudocode yang ditulis

dalam bahasa Indonesia terstruktur/bahasa inggris terstruktur.

Perancangan algoritma sebaiknya dilakukan dengan menggunakan

pendekatan Top-Down (Pemograman Modular). Setelah selesai

pembuatan algoritma, maka dibuatlah program aplikasi dengan

menggunakan salah satu bahasa pemograman terpilih.

4. Implementasi Sistem: beralih dari sistem lama ke sistem baru,

melakukan pelatihan dan panduan seperlunya.

Page 38: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

5. Operasi dan Perawatan: mendukung operasi sistem informasi dan

melakukan perubahan atau tambahan fasilitas.

6. Evaluasi Sistem: mengevaluasi sejauh mana sistem telah dibangun dan

seberapa bagus sistem telah dioperasikan.

2.6 Proses Pengembangan Sistem Sederhana

System Development Process adalah satu set aktivitas, metode, praktek

terbaik, siap dikirimkan, dan peralatan terotomasi yang digunakan stakeholder

untuk mengembangkan dan memelihara sistem informasi dan perangkat lunak

(Whitten, 2004). Kebanyakan organisasi memiliki system development

process/proses pengembangan resmi yang terdiri dari satu set standar proses-

proses atau langkah-langkah yang mereka harapkan akan diikuti oleh semua

proyek pengembangan sistem. Sementara proses ini dapat bervariasi untuk

organisasi yang berbeda, ada karakteristik umum yang ditemukan proses

pengembangan sistem di kebanyakan organisasi mengikuti pendekatan pemecahan

masalah. Untuk mudahnya, pendekatan pemecahan masalah terdiri dari empat

tahap atau fase yang harus diselesaikan untuk semua proyek pengembangan

sistem – permulaan sistem, analis sistem, desain sistem, dan implementasi sistem.

Tabel di bawah ini menunjukkan korelasi antara langkah-langkah pemecahan

masalah umum tersebut. Berikut tahapan-tahapan pengembangan sistem pada

waterfall yaitu :

Tabel 2.1 Langkah-langkah Pemecahan Masalah Umum. (Whitten, 2004)

Proses Pengembangan Sistem Langkah-Langkah Pemecahan Masalah yang

Page 39: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

yang Disederhanakan Umum

Permulaan Sistem 1. Mengidentifikasi masalah (Juga

merencanakan solusi untuk masalah).

Analisis Sistem 2. Menganalisa dan memahami masalah.

3. Mengidentifikasi persyaratan dan harapan

solusi.

Desain Sistem 4. Mengidentifikasi solusi alternatif dan

memilih tindakan terbaik.

5. Mendesain

solusi yang

dipilih.

Implementasi Sistem 6. Mengimplementasi solusi yang dipilih.

7. Mengevaluasi hasilnya. (Jika masalah tidak

terpecahkan, kembalilah ke langkah 1 atau 2

seperlunya)

2.7 Tool Pengembangan Sistem

2.7.1 Flowchart

Flowchart adalah bagan-bagan yang mempunyai arus yang

menggambarkan langkah-langkah penyelesaian suatu masalah.

(Ladjamuddin, 2005) ada dua macam flowchart yaitu:

Page 40: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

1. Flowchart Sistem

Flowchart Sistem adalah bagan yang memperlihatkan

urusan proses dalam sistem dengan menunjukan alat media

input, output serta jenis media penyimpanan dalam proses

pengolahan data.

2. Flowchart Program

Flowchart program adalah bagan yang memperlihatkan

urutan instruksi yang digambarkan dengan simbol tertentu untuk

memecahkan masalah dalam suatu program.

Flowchart disusun dengan simbol. Simbol ini digunakan untuk

membantu menggambarkan proses didalam program. Simbol dalam

flowchart dibagi menjadi 3 kelompok, yaitu:

1. Flow Direction Symbol

Simbol ini digunakan untuk menghubungkan antara

simbol yang satu dengan simbol yang lain (simbol bisa dilihat

pada daftar simbol halaman xi).

2. Processing Symbol

Simbol ini menunjukan jenis operasi pengolahan dalam

suatu proses / prosedur (simbol bisa dilihat pada daftar simbol

halaman xi).

3. Input-Output Symbol

Page 41: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

Simbol Input-Output Symbol menunjukan jenis peralatan

yang digunakan sebagai media input dan output (simbol bisa

dilihat pada daftar simbol halaman xi).

2.7.2 DFD ( Data Flow Diagram)

Data flow diagram merupakan model dari sistem untuk

menggambarkan pembagian sistem ke modul yang lebih kecil. DFD

menampilkan kegiatan sistem lengkap dengan komponen- komponen yang

menunjukan secara tegas file-file yang dipakai, unsur sumber atau tujuan

data, serta aliran data dari satu proses ke proses lainnya (Ladjamuddin,

2005). DFD mempunyai level diagram antara lain (simbol bisa dilihat pada

daftar simbol halaman xi):

a. Diagram Konteks

Diagram Konteks adalah diagram yang terdiri dari suatu

proses dan menggambarkan ruang lingkup suatu sistem.

Diagram konteks merupakan level tertinggi dari DFD yang

menggambarkan seluruh input atau output dari sistem.

b. Diagram Nol/Zero (Overview Diagram)

Diagram Nol/Zero adalah diagram yang menggambarkan

proses dari Data Flow Diagram. Diagram nol memberikan

pandangan secara menyeluruh mengenai sistem yang ditangani,

menunjukan tentang fungsi-fungsi utama atau proses yang ada,

aliran data, dan eksternal entity.

Page 42: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

c. Diagram Rinci

Diagram rinci adalah diagram yang menguraikan proses

apa yang ada dalam diagram zero atau diagram level atasnya.

2.7.3 ERD (Entity Relationship Diagram)

ERD (Entity Relationship Diagram) adalah suatu model jaringan

yang menggunakan susunan data yang disimpan dalam sistem secara abstrak

(Ladjamuddin, 2005). Elemen-elemen diagram hubungan entitas adalah

sebagai berikut (simbol bisa dilihat pada gambar simbol halaman xi):

a. Entity

Entity adalah sesuatu apa saja yang ada didalam sistem,

nyata maupun abstrak dimana data tersimpan atau dimana

terdapat data. Dalam ERD entity digambarkan dengan sebuah

bentuk persegi panjang.

b. Relationship

Relationship digambarkan dengan sebuah bentuk belah

ketupat. Relationship adalah hubungan alamiah yang terjadi

pada entitas. Umumnya relationship diberi nama dengan kata

kerja dasar, sehingga memudahkan untuk melakukan pembacaan

relasinya. Derajat relationship yang sering dipakai antara lain:

1. Unary Relationship

Unary relationship adalah model relationship yang

terjadi diantara entity yang berasal dari entity yang

sama.

Page 43: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

2. Binary relationship

Binary relationship adalah model relationship antara

instance-instance dari suatu tipe entitas (dua entitas

yang berasal dari entitas yang sama). Relationship ini

paling umum digunakan dalam pemodelan data.

3. Ternary Relationship

Ternary relationship merupakan relationship antara

instance-instance dari ketiga tipe entitas secara

sepihak.

c. Atribut

Atribut adalah sifat atau karakteristik dari setiap entitas

atau relationship. Atribut mempunyai value yaitu:

1. Identifier (key)

Digunakan untuk menentukan suatu entity secara unik

(primary key).

2. Descriptor (nonkey atribut)

Digunakan untuk menspesifikasikan karakteristik dari

suatu entity yang tidak unik.

d. Kardinalitas (Cardinality)

Kardinalitas relasi menunjukan jumlah maksimum tupel

yang dapat berelasi dengan entitas pada entitas yang lain.

Terdapat tiga macam kardinalitas relasi yaitu:

Page 44: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

1. One to one

One to one merupakan tingkat hubungan satu ke satu

yang dinyatakan dangan satu kejadian pada entitas

pertama, hanya mempunyai satu hubungan dengan satu

kejadian pada entitas yang kedua dan sebaliknya.

2. One to many atau many to one

Tingkat hubungan satu ke banyak sama dengan

hubungan banyak ke satu yaitu satu kejadian pada

entitas yang pertama dapat mempunyai banyak

hubungan dengan kejdian pada entitas yang kedua.

Sebaliknya satu kejadian pada entitas yang kedua

hanya dapat mempunyai satu hubungan dengan satu

kejadian pada entitas yang pertama.

3. Many to many

Tingkat hubungan banyak ke banyak terjadi jika setiap

kejadian pada sebuah entitas akan mempunyai banyak

hubungan dengan kejadian pada entitas lain. Baik

dilihat dari sisi entitas yang pertama maupun dilihat

dari sisi yang kedua.

2.7.4 Spesifikasi Proses

Pedoman bagi programmer dalam membuat coding. Tujuan dari

spesifikasi proses antara lain (Whitten, 2004):

1. Mengurangi makna ganda.

Page 45: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

2. Memperoleh deskripsi yang tepat.

3. Validasi sistem desain.

2.7.5 STD (State Transition Diagram)

STD merepresentasikan tingkah laku dari suatu sistem dengan

menggambarkan keadaannya dan kejadian yang menyebabkan sistem

mengubah keadaan (Pressman, 2003). STD juga menunjukkan bahwa aksi

(seperti aktivasi proses) diambil sebagai akibat dari suatu kejadian khusus

(simbol bisa dilihat pada daftar simbol halaman xi).

2.8 PHP (Hipertext Preprocessor)

PHP singkatan dari PHP Hypertext Preprocessor yang digunakan sebagai

bahasa script server-side dalam pengembangan Web yang disisipkan pada

dokumen HTML (Peranginangin, 2006). Penggunaan PHP memungkinkan Web

dapat dibuat dinamis sehingga maintenance situs Web tersebut menjadi lebih

mudah dan efisien. PHP merupakan software Open-Source yang disebarkan

secara bebas dari situs resminya (htpp://www.php.net) PHP ditulis menggunakan

bahasa C.

PHP diciptakan pertama kali oleh Rasmus Lerdorf pada tahun 1994.

Awalnya, PHP digunakan untuk mencatat jumlah serta untuk mengetahui siapa

saja penjunjung pada homepage-nya. Rasmus Lerdorf adalah salah seorang

pendukung open source. Oleh karena itu, ia mengeluarkan Personal Home Page

Tools versi 1.0 secara gratis, kemudian menambah kemampuan PHP 1.0 dan

meluncurkan PHP 2.0. Pada tahun 1996, PHP telah banyak digunakan dalam

website didunia. Sebuah kelompok pengembang software yang terdiri dari

Page 46: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

Rasmus, Zeew Suraski, Andi Gutman, Stig Bakken, Shane Caraveo, dan Jim

Winstead bekerja sama untuk menyempurnakan PHP 2.0. Akhirnya, pada tahun

1998, PHP 3.0 diluncurkan. Penyempurnaan terus dilakukan sehingga pada tahun

2000 dikeluarkan PHP 4.0. tidak berhenti sampai di situ, kemampuan PHP terus

ditambah, dan saat buku ini disusun, versi terbaru telah dikeluarkan adalah PHP

5.0.x. Berikut contoh penggunaan sintaks PHP pada script berikut:

<html>

<head>

<title>PHP Sintaks</title>

</head>

<body>

<?php

Print ‘Ini teks dengan PHP’;

?>

<br>

<script language=”php”>

echo ‘Ini teks dengan PHP’;

</script>

<br>

<?

Print ‘Ini teks dengan PHP’;

?>

<br>

Page 47: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

<%

Print ‘Ini teks dengan PHP’;

%>

</body>

</html>

2.9 MySQL

MySQL adalah suatu Relational Database Management System (RDBMS)

yang mendukung database yang terdiri dari sekumpulan relasi atau tabel

(Peranginangin, 2006). Banyak Relational Database Management System

(RDBMS) yang tersedia, tetapi MySQL khususnya sangat cocok untuk bekerja

sama dengan PHP. Bagaimanapun, konsep dasar SQL tetap sama apa pun jenis

database yang Anda pergunakan.

MySQL dilepaskan dengan suatu lisensi open source, dan tersedia secara

cuma-cuma. MySQL bekerja pada berbagai sisteem operasi, dan banyak masalah.

MySQL bekerja dengan cepat dan baik dengan data yang besar. PHP

menyediakan banyak fungsi untuk mendukung database MySQL.

2.10 Fase Implementasi

Rencana konversi umumnya melibatkan rencana pengujian terhadap sistem

yang diterima. Tes terhadap sistem yang diterima adalah kesempatan terakhir bagi

pengguna akhir, manajemen, dan manajemen operasi sistem informasi untuk

menerima atau menolak sistem tersebut. System acceptance adalah tes terhadap

sistem final yang dilakukan oleh pengguna akhir dengan menggunakan data riil

pada periode waktu yang diperluas (Whitten, 2004). Tes ini merupakan pengujian

Page 48: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

ekstensif yang menekankan tiga level pengujian penerimaan, pengujian verifikasi,

dan validasi.

2.11 Web Browser

Web browser adalah perangkat lunak untuk menampilkan dokumen web

(HTML). Selain itu web browser dapat dilengkapi beragam plugin yang dapat

menampilkan beragam jenis dokumen lain misalnya PDF, postscript, Macromedia

Flash untuk file animasi dan sebagainya (Hariyanto, 2004).

Software ini kini telah dikembangkan dengan menggunakan user interface

grafis, sehingga pemakai dapat melakukan “point dan klik” untuk pindah antar

dokumen. Suatu browser mengambil sebuah web page dari server dengan sebuah

request adalah sebuah request HTTP standar yang berisi sebuah alamat halaman

misalkan http://www.google.com/page.htm. Seluruh web page berisi instruksi-

instruksi bagaimana untuk ditampilkan. Browser menampilkan page dengan

membawa instruksi-instruksi ini. Instruksi yang paling umum untuk

menampilkannya disebut dengan tag HTML.

2.12 Web Server

Web server adalah komputer yang digunakan untuk menyimpan dokumen-

dokumen web (Kasiman, 2006). Komputer ini akan melayani permintaan

dokumen web dari kliennya. Browser web seperti Internet Explorer dan atau

Mozilla Firefox berkomunikasi melalui jaringan (termasuk jaringan Internet)

dengan server web, menggunakan HTTP. Browser akan mengirimkan request

kepada server untuk meminta dokumen tertentu atau layanan lain yang disediakan

Page 49: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

oleh server. Server memberikan dokumen atau layanannya jika tersedia juga

dengan menggunakan protokol HTTP.

Web server yang terkenal diantaranya adalah Apache dan Microsoft Internet

Information Service (IIS). Apache merupakan web server antar-platform,

sedangkan IIS hanya dapat beroperasi di sistem operasi Windows.

2.13 Pengenalan Macromedia Dreamweaver 8

Dreamweaver 8 merupakan salah satu produk software yang dikeluarkan

dari perusahaan Macromedia, Inc. Software ini bergerak dalam bidang

perancangan web. Sekelompok software perancang web diantaranya Flash,

Dreamweaver, Firework, Freehand dan lain-lain. Macromedia tampaknya sangat

serius dalam membuat software pembangun website yang mampu melakukan

banyak hal dan memiliki banyak keunggulan.

Gambar 2.2 Macro Media Dreamweaver 8

Dreamweaver 8 adalah suatu bentuk software editor web yang dibuat oleh

Macromedia. Dengan software ini, seorang programmer web dapat dengan mudah

Page 50: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

membuat tampilan websitenya. Dreamweaver 8 merupakan editor yang komplit

dan dapat digunakan untuk membuat animasi sederhana dalam bentuk halaman.

Dengan adanya software ini kita tidak direpotkan untuk menuliskan skrip-skrip

format HTML, PHP, ASP maupun bentuk program lainnya.

Sebagai editor, Dreamweaver 8 mempunyai sifat WYSIGWYG atau yang

dibaca Waysiwig yang artinya “apa yang kemu lihat akan kamu peroleh” atau

“what you see is what you get”. Dengan kelebihan ini, seorang programmer dapat

melihat langsung hasil buatannya tanpa harus membuka browser. Seperti software

editor web lain, Dreamweaver 8 juga memiliki dua bentuk halaman, yaitu

halaman rancangan dan halaman kode. Hal ini akan mempermudah dalam

menambahkan skrip yang berbasis PHP maupun Javascript. Dreamweaver 8 selain

mendukung dalam pembuatan web yang berbasis HTML, juga mendukung

software lain diantaranya PHP, ASP, Perl, Javascript dan lain-lain.

Dengan menggunakan Dreamweaver 8, programmer telah banyak

dimudahkan dalam merancang dan pengkodean. Hal ini akan sangat membantu

dalam hal perancangan sebuah website yang sedang dibangun. Adapun beberapa

komponen yang dimiliki oleh Dreamweaver 8 adalah :

1. Menu Panel Insert

Menu Panel Insert adalah sekumpulan menu yang berhubungan dengan

operasi pemasukan dan pembuatan pernik-pernik pada halaman web.

2. Menu Panel Common

Menu Panel common adalah emnu yang memiliki beberapa ikon yang

merupakan menu standar pada saat merancang halaman web.

Page 51: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

3. Menu Panel Layout

Menu ini berisi menu ikon tabel dan layer.

4. Menu Panel Text

Menu ini digunakan untuk mengatur format text yang ada pada halaman

web.

5. Menu Panel Table

Menu ini digunakan untuk membuat tabel yang ada pada halaman web.

6. Menu Panel Frame

Menu frame adalah salah satu menu yang akan digunakan untuk

memilih bentuk rancangan halaman utama website.

7. Menu Panel Form

Menu form digunakan untuk membuat formulir.

8. Menu Panel Characters

Menu characters memiliki beberapa ikon yang digunakan untuk

melakukan operasi halaman dan pengaturan paragraf.

9. Menu Panel Media

Menu media adalah sekumpulan ikon yang berfungsi untuk melakukan

pengggabungan file dari luar program Dreamweaver.

10. Menu Panel Head

Menu head digunakan untuk operasi penambahan komponen dalam

head HTML.

11. Menu Panel Script

Page 52: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

Menu script adalah sekumpulan ikon yang pada umumnya digunakan

untuk melakukan penulisan perintah script.

12. Menu Panel Application

Menu application digunakan untuk operasi database.

13. Menu Panel Properties

Menu ini adalah sekumpulan menu yang berfungsi sebagi tool dalam

pengaturan objek yang ada pada halaman web.

(Kasiman Peranginangin, 2009)

2.14 Pengujian

Sebelum program diterapkan, maka program harus bebas dari kesalahan dan

program harus diuji untuk menemukan kesalahan yang mungkin dapat terjadi

seperti kesalahan dalam bahasa, kesalahan waktu proses dan kesalahan logika

program.

Pengujian Perangkat Lunak (PL) adalah elemen kritis dari jaminan kualitas

PL dan merepresentasikan spesifikasi, desain dan pengkodean. Meningkatnya

visibilitas PL sebagai suatu elemen sistem dan biaya yang muncul akibat

kegagalan PL, memotivasi dilakukan perencanaan yang baik melalui pengujian

yang teliti.

Pengujian black-box berfokus pada persyaratan fungsional perangkat lunak.

Pengujian black-box didesain untuk mengungkap kesalahan pada persyaratan

fungsional tanpa mengabaikan kerja internal dari suatu program. Teknik

pengujian black-box berfokus pada domain informasi dari perangkat lunak,

dengan melakukan test case dengan mempartisi domain input dan output dari

Page 53: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

suatu program dengan cara memberikan cangkupan pengujian yang mendalam

(Pressman, 2002).

2.15 Penelitian Sejenis

Sebagai acuan dalam menyusun skripsi ini, peneliti tidak hanya terpaku dari

sumber yang ada pada buku maupun media elektronik lain. Skripsi lain tentang

virtual reality maupun aplikasi pembelajaran juga menjadi pertimbangan dan

acuan untuk menghasilkan aplikasi yang lebih baik lagi.

Judul : Pembuatan Situs Web Alumni SMKN 44 Jakarta Dengan

Macromedia Dreamweaver MX, PHP dan MySQL

Pengarang : Vivi Candra (Jurusan Teknik Informatika, Universitas Guna

Dharma, 2007)

Tabel 2.2 Skripsi Sebelumnya Tentang pembuatan web alumni pada SMKN

Tujuan

Tujuan dari pembuatan web ini adalah untuk menjalin tali

silaturahmi antar sahabat dalam hal ini siswa-siswi SMKN

44 Jakarta juga memberikan informasi tentang lamaran

pekerjaan untuk semua user yang membutuhkan.

Keunggulan

Pada skripsi ini menggunakan struktur navigasi campuran

(Composite) maka kelebihan yang dimiliki yaitu system

yang mudah dikembangkan lagi, selain itu tersedia pula

Page 54: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

fasilitas ruang bicara untuk memudahkan komunikasi antar

alumni.

Kelemahan

Kelemahan dari aplikasi ini yaitu tidak ada fitur post

Coment jika ada alumni yang ingin menyampaikan

komentar atas informasi yang tersedia dan interfacenya

yang kurang menarik.

Perangkat Lunak a. Macromedia Dreamweaver MX

b. MySql

Judul : Perancangan Website Alumni SMAI PB. SOEDIRMAN 2 Bekasi

Dengan Menggunakan PHP dan MYSQL

Pengarang : Jayanti Eka Putri (Jurusan Teknik Informatika, Universitas Guna

Dharma, 2008).

Tabel 2.3 Skripsi Sebelumnya Tentang pembuatan web alumni pada SMAI

Tujuan

Tujuan penelitian ini adalah membentuk web alumni SMA

Islam PB Soedirman 2 Bekasi untuk memudahkan para

alumni mendapatkan informasi tentang sekolah dan data

alumni angkatan 2006 sampai angkatan 2008 serta sebagai

wadah aspirasi dan pengikat hubungan silaturahim antara

angkatan didalamnya yang ingin saling bertukar pikiran

atau pengalaman.

Page 55: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

Keunggulan

Kelebihan dari web alumni ini selain user friendly adalah,

mempunyai banyak fitur yang mendukung untuk

memudahkan komunikasi antar alumni, seperti forum

alumni dan sebagainya.

Kelemahan

Kelemahan Aplikasi ini pada singkronisasi data alumni.

Contohnya adalah tidak bisanya mengupdate data–data

terbaru yang terkait dengan alumni. Selain itu web alumni

ini tidak melibatkan unsur multimedia sehingga interface

nya kurang interaktif dan menarik.

Perangkat Lunak

a. Macromedia Dreamweaver

b. MySql

Judul : Pembuatan Situs Web Alamamater Perguruan Tinggi

Menggunakan PHP dan MySQL

Pengarang : Marsita Dewi (Jurusan Teknik Elektro, Universitas Diponogoro

Semarang, 2008)

Tabel 2.4 Skripsi Sebelumnya Tentang pembuatan web almamater

Tujuan

Tujuan penelitian adalah membuat Situs web almamater

perguruan tinggi ini diharapakan dapat menjadi media

informasi bagi alumni maupun pihak perguruan tinggi.

Sehingga tetap terjalin hubungan timbal balik antara para

alumni dengan pihak kampus.

Page 56: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

Keunggulan

Kelebihan dari web alumni ini selain user friendly adalah,

mempunyai banyak fitur yang mendukung untuk

memudahkan alumni mendapatkan informasi yang

dibutuhkan.

Kelemahan

Kelemahannya yaitu belum adanya ruang bicara bagi para

alumni dan tidak melibatkan unsur multimedia sehingga

interface nya kurang interaktif dan menarik.

Perangkat Lunak

a. Macromedia Dreamweaver MX

b. MySql

Page 57: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

BAB III

METODOLOGI PENELITIAN

Penyusun skripsi ini, diperlukan data-data serta informasi yang relatif

lengkap sebagai bahan yang dapat mendukung kebenaran materi uraian dan

pembahasan. Oleh karena itu sebelum penulis menyusun skripsi ini, dalam

persiapannya terlebih dahulu dilakukan riset atau penelitian untuk menjaring data

serta informasi atau bahan materi yang diperlukan.

Metodologi penelitian yang digunakan oleh penulis dalam pengembangan

aplikasi alumni berbasis web ini adalah:

3.4 Metode Pengumpulan Data

Adapun metode pengumpulan data - data informasi yang dilakukan adalah

sebagai berikut:

3.1.1. Studi Pustaka

Dilakukan dengan cara membaca dan mempelajari sekitar 5 buku

dan 12 ebook yang berhubungan dengan Aplikasi web, web alumni,

database, PHP Script, serta buku-buku maupun artikel yang jumlahnya

sekitar 11 dan diperoleh dari media cetak dan internet untuk mendukung

topik yang dibahas dalam penyusunan skripsi ini. Untuk lebih jelasnya,

judul dari buku-buku yang digunakan dan situs dapat dilihat pada Daftar

Pustaka.

Page 58: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

3.1.2. Studi Literatur

Pada studi literatur ini, peneliti mencari penelitian sejenis yang

pernah dibahas. Kemudian diperoleh penelitian yang dilakukan Marsita

Dewi (2008) dari Universitas Diponogoro Semarang, tentang Pembuatan

Situs Web Alamamater Perguruan Tinggi Menggunakan PHP dan MySQL,

dan dua penelitian lain yang berasal dari Universitas Guna Dharma, yaitu

Perancangan Website Alumni SMAI PB. SOEDIRMAN 2 Bekasi Dengan

Menggunakan PHP dan MYSQL oleh Jayanti Eka Putri (2008) dan

Pembuatan Situs Web Alumni SMKN 44 Jakarta Dengan Macromedia

Dreamweaver MX, PHP dan MySQL oleh Vivi Candra (2007). Untuk lebih

jelasnya dapat dilihat pada Bab II.

Dalam penelitian-penelitian diatas tidak ada satu pun yang

melibatkan komponen multimedia didalamnya dan masih bersifat statis.

Pada penelitian ini peneliti mengembangkan Aplikasi Web yang bersifat

dinamis.

3.1.3. Studi Lapangan

Pada metode pengumpulan data studi lapangan, peneliti

membedakannya menjadi tiga bagian, yaitu:

a. Observasi

Penulis melakukan pengamatan dengan peninjauan

langsung di lapangan yaitu tempat dimana informasi dan materi

dapat diperoleh seperti informasi biodata alumni, informasi bursa

Page 59: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

kerja khusus, foto alumni dan data-data lain yang digunakan dalam

pengembangan aplikasi alumni berbasis web.

Dari hasil tersebut, diperoleh data berupa data-data

alumni, foto dan informasi bursa kerja khusus, serta data-data lain

yang akan digunakan dalam pembuatan aplikasi, observasi

dilakukan pada:

1. Tempat

Tempat yang menjadi objek penelitian adalah:

Nama Instansi : Sekolah SMK NASIONAL Depok

Alamat : Jl. Grogol Raya No.2 Limo – Depok

2. Waktu

Waktu pelaksanaan adalah:

Hari : Senin s/d Rabu

Pukul : 09.30 – 10.30

Penelitian : Februari - Maret 2011 (2 bulan)

b. Kuesioner

Untuk mendapatkan tambahan mengenai Aplikasi Alumni

dan tingkat keterkaitan terhadap Aplikasi Alumni berbasis Web,

penulis membuat 6 pertanyaan dan menyebarkan kuesioner kepada

sebagian siswa aktif sekolah SMK NASIONAL Depok yang

berjumlah 60 (enam puluh) orang. Pertanyaan dan hasil dari

kuesioner tersebut tercantum pada Bab 4. Tujuannya untuk

mengetahui layak apa tidaknya Aplikasi Alumni berbasis Web

Page 60: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

yang akan dikembangkan oleh penulis. Hasil dari penelitian dan

perhitungan kuesioner menggunakan metode kualitatif.

3.2. Metode Pengembangan Sistem

Penelitian ini menggunakan metode pengembangan sistem System

Development Life Cycle (SDLC) dengan strategi Waterfall. Dengan tahapan

yaitu system initiation, system analysis, system design, dan system

implementation.

1. Permulaan Sistem (System Initiation)

Dalam tahap ini, terdapat beberapa langkah yang perlu dilakukan di

dalam mengembangkan aplikasi alumni berbasis web pada SMK

Nasional Depok antara lain:

a. Identifikasi masalah menjelaskan masalah yang ada pada sistem

yang sedang berjalan.

b. Lingkup sistem menentukan batasan ruang lingkup sistem yang

akan dibangun.

c. Tujuan menentukan untuk apa dan untuk siapa sistem ini

dibangun.

2. Analisa Sistem (System Analysis)

Dalam tahap ini, peneliti akan menguraikan beberapa hal, yaitu:

a. Gambaran umum SMK Nasional seperti Visi, Misi dan Motto

SMK Nasional, Struktur Organisasi, serta tujuan SMK Nasional.

b. Analisa sistem yang berjalan menjelaskan sistem yang dipakai

oleh SMK Nasional Depok dalam melakukan proses pendataan

Page 61: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

alumni dan penyebaran informasi BKK sebelum adanya

Aplikasi Web Alumni SMK Nasional.

c. Analisa pemecahan masalah menguraikan tentang beberapa

usulan yang dapat membantu menyelesaikan permasalahan yang

ada pada sistem yang berjalan.

3. Desain Sistem (System Design)

Pada tahapan ini penulis melakukan perancangan proses sebagai

alternative solusi, spesifikasi proses. Kemudian merancang database dan

tampilan sebagai desain dari pemilihan solusi terbaik, serta perancangan

jaringan.

a. Perancangan Proses

Perancangan proses disajikan untuk membuat gambaran

alur proses sistem baru yang diusulkan. Dengan dua entitas yaitu

Admin yang mengelola keseluruhan aplikasi web tersebut dan

Alumni. Perancangan proses akan dijelaskan dengan Flowchart

dokumen dan Data Flow Diagram (DFD) dan spesifikasi proses

pada BAB IV. Keterangan simbol-simbol yang digunakan

penulis terlampir dalam daftar simbol.

b. Perancangan Input dan Output

Untuk perancangan Input (Berupa form masukan) dan

Output (Berupa laporan), tools atau peralatan yang digunakan

peneliti sebagai alat bantu adalah shape pada Micrromedia

Fireworks 8.

Page 62: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

c. Perancangan Database

Penulis menyimpulkan bahwa diperlukannya identifikasi

tipe entitas yakni terkait alumni, admin, kelas, alumni kerja,

berita, gallery, program studi. Database yang akan di bangun

menggunakan tools: ERD (Entity Relationship Diagram),

normalisasi, kamus data, struktur data, dan STD (State

Transition Diagram). Keterangan simbol-simbol yang

digunakan penulis terlampir dalam daftar simbol.

d. Perancangan Tampilan User (GUI)

Untuk perancangan GUI, tools atau peralatan yang

digunakan peneliti sebagai alat bantu adalah Microsoft Office

Visio 2007.

4. Implementasi Sistem (System Implementation)

Pada tahap ini penulis melakukan coding dan pengujian system.

a. Coding

Setelah dilakukan perancangan system usulan, tahap

berikutnya yang dilakukan adalah pemrograman system usulan

menggunakan bahasa pemograman Hypertext Processor (PHP)

dengan menggunakan database mysql dan Macromedia

Dreamweaver sebagai editor untuk mendesign tampilan web nya

yang telah ditentukan pada analisis sistem.

Page 63: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

b. Pengujian Sistem

Dari pengembangan sistem ini, dilakukan secara

pengujian black-box dengan melakukan test-case : mempartisi

input dan output dalam suatu program.

3.3 Kerangka Berpikir

Penyusunan tugas akhir Pengembangan aplikasi alumni berbasis web ini disusun

melalui beberapa tahapan yang harus dilakukan dengan tujuan memudahkan dalam

penulisan tugas akhir. Adapun kerangka berpikir yang dilakukan pada penulisan tugas

akhir ini adalah sebagai berikut:

Page 64: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

Gambar 3.1 Kerangka Berfikir

Page 65: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

BAB IV

PEMBAHASAN

4.1 System Initiation

Pembangunan sistem informasi yang kompleks, mudah penggunaannya,

memenuhi kebutuhan dan sesuai dengan proses bisnis yang akan dijalankan, jelas

membutuhkan estimasi waktu, usaha dan ekonomi yang cukup, sama hal nya

dengan aktifitas lain. Namun masalah yang terjadi dan di deskripsikan sering

dinyatakan dengan kurang jelas. Alasan inilah maka pengembangan atau

pembangunan sistem harus direncanakan dengan hati-hati. Mengawali

pengembangan sistem tentunya harus terlihat seberapa luas lingkupnya dan

rencana pemecahannya (Whitten, 2004). Maka dari itu peneliti mengawalinya

dengan menganalisa sistem yang berjalan, mencakup diantaranya:

1. Lingkup penelitian

Dalam penelitian ini peneliti hanya membahas masalah pendaftaran

alumni, pembuatan biodata alumni, gallery kelas sampai dengan bursa

kerja khusus yang dikelola oleh pihak SMK Nasional Depok.

2. Tujuan penelitian

Tujuan pengembangan aplikasi web alumni berbasis multimedia pada

SMK Nasional Depok ini, yakni mampu memberikan pencatatan-

pencatatan data yang terkomputerisasi dengan baik sehingga proses

pembuatan segala bentuk biodata alumni, gallery kelas sampai dengan

Page 66: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

bursa kerja khusus, serta memberikan suatu system aplikasi dengan

berbasis web agar dapat diakses secara online dan penyajian aplikasi

yang userfriendly sehingga para alumni dapat dengan mudah

mendapatkan informasi yang diinginkannya. Dengan solusi pemecahan

masalah yaitu merancang dan membangun aplikasi alumni berbasiskan

web.

4.1.1 Identifikasi Masalah

Hingga saat ini SMK Nasional Depok telah memiliki beberapa

sistem yang sedang berjalan, salah satunya adalah pengelolaan data-data

alumni. Akan tetapi aplikasi pengelolaan data-data alumni SMK Nasional

Depok memiliki aplikasi pengelolaan data-data alumni yang kurang baik,

karena system masih tersaji secara offline dan belum berbentuk sebuah web

dinamis, melainkan aplikasi yang ada dibuat menggunakan Microsoft Office

Exel yang belum memiliki interface yang baik. Akibatnya, para alumni

SMK Nasional Depok tersebut tidak dapat mengaksesnya secara online dan

membutuhkan waktu yang banyak untuk mencari informasi mengenai

alumni lain. Selain itu sistem yang ada belum dapat menyajikan suatu bursa

kerja kursus yang disajikan secara kursus oleh SMK Nasional Depok untuk

para alumni nya.

4.1.2 Lingkup Sistem

Berdasarkan hasil dari identifikasi masalah di atas, peneliti akan

mengembangkan aplikasi alumni berbasis web di SMK Nasional Depok

Page 67: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

mulai dari pencatatan data alumni informasi hingga informasi bursa kerja

khusus serta berbagai informasi yang terkait di dalamnya.

Sistem ini akan dijalankan pada web browser dengan server

Apache, bahasa pemrograman PHP dan database MySQL.

4.1.3 Tujuan

Aplikasi ini dibangun untuk memberikan solusi terhadap

permasalahan yang telah diidentifikasi sebelumnya dan diharapkan dapat

membantu para alumni yang sedang membutuhkan informasi yang

dibutuhkannya. Selain itu juga diharapkan dapat membantu pihak akademik

SMK Nasional Depok dalam mewujudkan tujuannya sebagai SMK

terunggul di wilayahnya.

4.2 System Analysis

System analysis dimulai dengan memaparkan gambaran umum seputar

profil serta visi-misi perusahaan dan analisa sistem yang sedang berjalan.

4.2.1 Gambaran Umum

4.2.1.1 Sejarah Singkat SMK Nasional Depok.

Sebagai kelanjutan perjuangan dan mengabdi pada

masyarakat yang sedang membangun, seorang pejuang berprakarsa

mendirikian Yayasan Pendidikan Nasional Gelora dengan akta

tertanggal 15 Oktober 1984, Nomor : 199, yang dibuat dihadapan

notaris Hulman Sihaputar di Bogor, dan akte Perubahan No.3

Tanggal 3 Juni 1995 dengan notaris Ny. Wijanarti Prastowo. SH di

Cinere – Depok, seiring mengikuti perkembangan Yayasan

Page 68: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

berganti nama menjadi “Yayasan Gelora Haji Muhari Al_Azhari”

(GHAMA) dengan akta tertanggal 30 Desember 2006 Nomor : 30

dengan notaris Supriyanto, SH, M.M di Depok.

Atas kejadian dan kepedulian ketua “Yayasan Gelora

Haji Muhari Al_Azhari” (GHAMA) Bapak H. Muhari. A yang

dahulu mantan kepala Desa Grogol – Depok, mendirikan SMP

Gelora sebagai upaya mengimbangi program inpres dibidang

pembangunan gedung sekolah dasar serta memberi peluang kepada

masyarakat lingkungan setempat untuk dapat melanjutkan

pendidikan anak-anak mereka kejenjang yang lebih tinggi setelah

tamat SD karena pada waktu itubanyak anak yang putus sekolah

dikarenakan tingkat kesadaran pendidikan dan ekonomi orang tua

yang masih rendah serta jauhnya lokasi sekolah lanjutan pertama

(SMP).

Pada tahun pertama SMP Gelora menempati gedung

dengan luas tanah bangunan sekitar 600 m. Dalam

perkembangannya sampai dengan akhir tahun 1990, sekolah ini

kurang dapat berkembang karena hanya mengandalkan manajemen

dan SDM seadanya, sementara itu donasi tidak pernah ada kecuali

bantuan rutin dari orang tua siswa dan kegigihan ketua Yayasn itu

sendiri.

Baru pada tahun 1991, ada perubahan mewarnai

perkembangan Yayasan ini, dimana pada waktu itu lokasi gedung

Page 69: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

di pindah keposisi yang lebih mudah dijangkau serta sudah

dimulainya pengelolaan dengan penerapan manajemen sesuai

perkembangan zaman, dan dipandang perlu untuk menambah /

melebarkan sayapnya maka pada tahun 1993 didirikan SMK yang

waktu itu STM dengan nama STM Nasional, dan disusul pada

tahun 1997 didirikan SMEA Ekonomika. Dan alhamdulillah hingga

saat ini “Yayasan Gelora Haji Muhari Al_Azhari” (GHAMA) telah

memiliki bangunan dan lokasi pengembangan yang sangat

memadai untuk tetap eksis, dengan jumlah siswa yang terus

meningkat serta diperhitungkan oleh lembaga – lembaga sejenis

yang ada di kota Depok dan sekitarnya.

4.2.1.2 Visi, Misi dan Motto

1. Visi Sekolah:

Meningkatkan kualitas pendidikan guna menghasilkan

tamatan yang memiliki kompetensi berdaya saing global, beriman,

berilmu dan berteknologi sebagai prasyarat memasuki lapangan

kerja, dunia usaha dan industri di dalam negeri / luar negeri serta

memiliki jiwa enterpreneur.

2. Misi Sekolah:

a. Memiliki sekolah berstandar Internasional di tahun 2010 /

dengan SMM ISO 9001 : 200

b. Membentuk tenaga kerja tingkat menengah yang memiliki

disiplin, budaya bersih, budaya tertib dan budaya kerja yang

Page 70: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

Direktur

Ka. Program TMO

Siswa / Siswi

Manajemen Sekolah

Ka. Program TKJ

Ka. Adm & Keuangan

Kepala Sekolah

Wk. Bid. KBM & Opr

Wk. Bid. SDM & Humas

Wk. Bid. Kesiswaan

tinggi untuk menjadi manusia yang jujur, sportif,

bertanggungjawab dan mandiri sesuai kompetensinya

c. Membentuk tenaga kerja tingkat menengah yang memiliki

kompetensi berguna bagi masyarakat Nasional dan

Internasional

d. Membentuk taruna dengan kompetensi Industri berstandar

4.2.1.3 Struktur Organisasi SMK Nasional Depok

Gambar 4.1 Struktur Organisasi SMK Nasional Depok

4.2.2 Analisa Sistem Berjalan

Untuk mendapatkan tambahan mengenai Alpikasi alumni dan

tingkat keterkaitan terhadap Alpikasi alumni berbasis web, penulis

Page 71: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

menyebarkan kuesioner kepada 60 siswa kelas 3 yang telah dinyatakan lulus

sekolah SMK Nasional Depok (7 Juni 2011). Hasil penyebaran kuesioner

adalah sebagai berikut:

1. Apakah anda mengenal, mengetahui atau pernah mendengar

tentang web alumni ?

a. Ya

b. Tidak / Belum pernah

Pertanyaan ini dibuat untuk mengetahui berapa banyak

siswa-siswi SMK Nasional Depok mengenal, mengetahui atau

mendengar web alumni.

Hasil dari analisis No. 1 dapat disimpulkan bahwa sebagian

besar siswa-siswi tersebut mengenal, mengetahui atau pernah

Jawaban Responden Jumlah Responden Jumlah

Penjawab

Persentase

(%)

a. Ya 60 58 97

b. Tidak / Belum pernah 60 2 3

Tabel 4.1 Mengenal web alumni

Gambar 4.2. Diagram Mengenal Web Alumni

97%

3%

Ya Tidak / Belum pernah

97%

3%

Ya Tidak / Belum pernah

Page 72: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

mendengar web alumni. Oleh karena itu, penulis menganggap

bahwa sebagian besar siswa-siswi tersebut mempunyai gambaran

seperti apa web alumni itu.

2. Menurut anda, apakah web alumni sangat berguna ?

a. Berguna

b. Tidak berguna

c. Tidak tahu

Pertanyaan ini dibuat untuk mengetahui seberapa bergunakah

web alumni bagi para alumni SMK Nasional Depok.

Jawaban Responden Jumlah Responden Jumlah

Penjawab

Persentase

(%)

a. Berguna 60 57 95

b. Tidak berguna 60 0 0

c. Tidak tahu 60 3 5

Tabel 4.2 Kegunaan web alumni

Gambar 4.3. Diagram Kegunaan Web Alumni

95%

0% 5%

Berguna Tidak berguna Tidak tahu

95%

0% 5%

Berguna Tidak berguna Tidak tahu

Page 73: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

Gambar 4.4. Diagram Keinginan Adanya Web Alumni

97%

3%

Ya Tidak

97%

3%

Ya Tidak

Hasil dari analisis No. 2 dapat disimpulkan bahwa sebagian

besar siswa-siswi SMK Nasional Depok merasa bahwa web alumni

sangat berguna.

3. Apakah anda menginginkan adanya web alumni ?

a. Ya

b. Tidak

Pertanyaan ini dibuat untuk mengetahui keinginan siswa-

siswi SMK Nasional Depok untuk mempunyai web alumni.

Hasil dari analisis No. 3 dapat disimpulkan bahwa sebagian

besar siswa-siswi SMK Nasional Depok sangat menginginkan

adanya web alumni.

Jawaban Responden Jumlah Responden Jumlah

Penjawab

Persentase

(%)

a. Ya 60 58 97

b. Tidak 60 2 3

Tabel 4.3. Keinginan Adanya Web Alumni

Page 74: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

4. Selain foto dan biodata alumni apakah yang anda inginkan dari

Alpikasi alumni berbasis web? (Boleh lebih dari satu)

a. Musik / Suara

b. Animasi

c. Video

Pertanyaan ini dibuat selain biodata dan foto alumni, hal apa

saja yang diinginkan siswa-siswi SMK Nasional Depok ada dalam

web alumni.

Hasil dari analisis No. 4 dapat disimpulkan bahwa siswa-

siswi SMK Nasional Depok menginginkan adanya animasi, video,

dan musik/suara dalam web alumni.

Jawaban Responden Jumlah Responden Jumlah

Penjawab

Persentase

(%)

a. Musik / Suara 60 18 20

b. Animasi 60 39 43

c. Video 60 33 37

Tabel 4.4. Keinginan Isi web alumni

Gambar 4.5. Diagram Keinginan Isi web alumni

20%

43%

37%

Musik / Suara Animasi Video

20%

43%

37%

Musik / Suara Animasi Video

Page 75: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

5. Apakah anda pernah mengenal, mengetahui, atau mendengar

tentang web aplikasi ?

a. Ya / Pernah

b. Tidak / Belum pernah

Pertanyaan ini dibuat untuk mengetahui seberapa tahu / kenal

khususnya siswa-siswi SMK Nasional Depok, tentang web

aplikasi.

Hasil dari analisis No. 5 dapat disimpulkan bahwa semua

siswa-siswi SMK Nasional Depok sudah mengenal web aplikasi.

Oleh karena itu, memudahkan mereka dalam menggunakan

aplikasi alumni yang berbasiskan web.

Jawaban Responden Jumlah Responden Jumlah

Penjawab

Persentase

(%)

a. Ya / Pernah 60 60 100

b. Tidak / Belum pernah 60 0 0

Tabel 4.5. Mengenal web aplikasi

Gambar 4.6. Diagram Mengenal web aplikasi

100%

0%

Ya / Pernah Tidak / Belum pernah

100%

0%

Ya / Pernah Tidak / Belum pernah

Page 76: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

Gambar 4.7. Diagram Ketertaikan Akan Web Applikasi

87%

10% 3%

Tertarik Tidak tertarik Tidak tahu

87%

10% 3%

Tertarik Tidak tertarik Tidak tahu

6. Apakah anda tertarik untuk mempunyai aplikasi alumni

berbasiskan web?

a. Tertarik

b. Tidak tertarik

c. Tidak tahu

Pertanyaan ini dibuat untuk mengetahui seberapa tertariknya

siswa-siswi SMK Nasional Depok untuk mempunyai aplikasi

alumni yang berbasiskan web.

Hasil dari analisis No. 6 tersebut dapat disimpulkan bahwa

sebagian besar siswa-siswi aktif SMK Nasional Depok tertarik

untuk mempunyai aplikasi alumni yang berbasiskan web. Oleh

sebab itu penulis berharap agar web alumni ini dapat diterima oleh

para alumni SMK Nasional Depok.

Berdasarkan hasil kuesioner tersebut di atas, maka penulis

mengambil kesimpulan bahwa tingkat ketertarikan multimedia dan

penggunaan multimedia untuk membuat web alumni sangat tinggi.

Jawaban Responden Jumlah Responden Jumlah

Penjawab

Persentase

(%)

a. Tertarik 60 52 87

b. Tidak tertarik 60 6 10

c. Tidak tahu 60 2 3

Tabel 4.6. Ketertarikan Membuat aplikasi alumni berbasiskan web

Page 77: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

Dari hasil wawancara dengan kepala sekolah SMK Nasional

Depok (Interview, Bpk. Sugiarto, S.Sos. 28 Februari 2011) dan dari hasil

kuesioner siswa-siswi SMK Nasional Depok (7 Juni 2011) bahwa siswa-

siswi menginginkan adanya Web Alumni yang bisa digunakan sekarang dan

akan datang.

4.2.2.1 Kelemahan Sistem Berjalan

Setelah menganalisa Aplikasi yang sedang berjalan, terdapat

beberapa kelemahan di dalam aplikasi. Kelemahan-kelemahan dari aplikasi

adalah sebagai berikut :

1. Aplikasi yang ada belum dapat menyajikan info bursa kerja khusus

yang dibutuhkan oleh sebagian besar alumni SMK Nasional Depok.

2. Aplikasi yang ada masih tersaji secara offline sehingga para alumni

tidak dapat mengakses secara online, melainkan harus mendatangi

SMK Nasional Depok tersebut, hal demikian tentunya akan sangat

mengganggu pihak akademik SMK Nasional Depok tersebut apabila

banyak alumni yang berkunjung yang mencari informasi.

3. Pada aplikasi yang ada interface dan fitur-fitur yang disajikan masih

sangat minim, hal tersebut perlu dikembangkan lagi mengingat

kebutuhan informasi yang semakin lama semakin meningkat.

4.2.3 Analisa Pemecahan Masalah

Berdasarkan kelemahan dari aplikasi yang berjalan pada SMK

Nasional Depok tersebut maka diusulkan untuk membuat aplikasi yang

secara otomatisasi memberi kemudahan dalam pengelolaan data para

Page 78: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

alumni. Adapun alternative pemecahan masalah untuk mengatasi masalah

yang dihadapi Aplikasi pengelolaan data alumni SMK Nasional Depok,

yaitu:

a. Mengembangkan aplikasi dengan penambahan suatu modul bursa kerja

kursus, hal ini sangat berguna bagi alumni dan juga untuk mewujudkan

visi dan misi SMK Nasional Depok dalam menciptakan alumni-alumni

yang terampil dan dapat langsung berkecimpung di dunia nyata selepas

keluar dari SMK tersebut.

b. Mengembangkan sistem berbasiskan web yang dapat diakses melalui

internet yang memiliki interface dan fitur-fitur yang lengkap, sehingga

proses pencatatan serta pencarian data informasi yang dibutuhkan dapat

berlangsung secara cepat dan akurat.

Pengembangan Apliasi pengeloalaan data alumni SMK Nasional

Depok ini memberikan manfaat sebagai berikut:

1. Mempermudah alumni dalam mencari informasi-informasi yang

dibutuhkan secara cepat (fleksibilitas waktu).

2. Mempermudah Bagian akademik SMK Nasional Depok dalam

pencatatan data alumni, membuatkan informasi bursa kerja kursus

sampai dengan pembuatan biodata alumni yang lengkap.

4.2.3.1 Kebutuhan User dan Sistem

1. Kebutuhan User

a. Admin

Page 79: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

Dalam Aplikasi web alumni berbasis multimedia pada

SMK Nasional Depok ini, Admin dapat melakukan input,

update dan delete data alumni, data gallery kelas dan data bursa

kerja kursus, serta dapat melihat data alumni secara keseluruhan

dan mencetak laporan biodata alumni.

b. Alumni

User dapat mengakses Aplikasi tersebut dengan

mendaftarkan diri sebagai alumni, yang nantinya akan diproses

setelah mengisikan semua persyaratan yang diminta oleh admin

SMK Nasional Depok tersebut, user juga dapat melihat bursa

kerja kursus dan gallery kelas, user juga dapat melihat data-data

alumni laen dan mencetak biodata alumni yang dicarinya.

2. Kebutuhan Sistem

a. Data-data yang perlu disimpan pada Aplikasi web alumni

berbasis multimedia ini yaitu data alumni, berita, galery,

kelas, program studi, alumni kerja, dan profil.

b. Pengguna Aplikasi alumni berbasis web ini terdiri dari 2

(dua) yaitu Admin dan User.

c. Jika user ingin mengakses Aplikasi alumni berbasis web ini

diharuskan login terlebih dahulu dengan menginputkan

username dan password agar privasi dari masing-masing user

tetap terjaga.

Page 80: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

d. Sistem ini memerlukan maintenance setiap tahunnya agar

keabsahan data tetap terjaga dengan baik.

e. Sistem ini membutuhkan suatu sistem keamanan data yang

baik serta terupdate.

f. Sistem ini membutuhkan akses internet agar dapat diakses

secara online.

4.3 System Design

Setelah dilakukan analisis, pada tahapan ini penulis melakukan perancangan

proses sebagai alternative solusi, spesifikasi proses. Kemudian merancang

database dan tampilan sebagai desain dari pemilihan solusi terbaik, serta

perancangan jaringan.

4.3.1 Perancangan Proses

4.3.1.1 Perancangan DFD (Data Flow Diagram)

a. DFD (Data Flow Diagram) Diagram Konteks Level 0

Diagram konteks level 0 ini menjelaskan hubungan antar entitas-

entitas yang saling terkait dan arus dokumen yang diperoleh pada masing-

masing entitas. Diagram ini menjelaskan secara umum usulan sistem yang

akan berjalan, disini terdapat 2 entitas yang saling berhubungan satu dengan

yang lainnya, yaitu entitas Admin, dan User.

Page 81: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

Gambar 4.8 Diagram Konteks Level 0

b. DFD (Data Flow Diagram) Diagram Nol Level 1

Diagram nol level 1 menjelaskan secara rinci hubungan antara

entitas-entitas dengan proses yang dilakukan dan arus dokumen yang

diperoleh setiap entitas tersebut. entitas Admin ini kegiatannya mencakup

menginputkan data-data alumni pada database alumni, menginputkan data

alumni kerja pada database alumni_kerja, menginputkan data lowongan

kerja pada database berita, mencatat data kelas pada database kelas,

mencatat program studi pada database program studi, mengupload galery

dan menyimpannya pada database galery.

Page 82: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

Gambar 4.9 Diagram Nol Level 1

Spesifikasi Proses

1. Proses Registrasi alumni

Input form_alumni

IF form_alumni sesuai THEN

Tampil daftar alumni

ELSE

Lanjutkan pengolahan atau selesai

ENDIF

2. Proses pencatatan alumni kerja

Input form_alumni_kerja

IF form_alumni_kerja benar THEN

Tampil data alumni kerja

Page 83: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

ELSE

Lanjutkan pencatatan atau selesai

ENDIF

3. Proses Pencatatan info lowongan kerja kursus

Input form_lowongan_kerja_kursus

IF form_lowongan_kerja_kursus benar THEN

Tampil data lowongan_kerja_kursus

ELSE

Lanjutkan pengolahan hasil atau selesai

ENDIF

4. Proses Pencatatan program studi

Input form_program studi

IF form_program studi benar THEN

Tampil bukti form_program studi

ELSE

Lanjutkan pencatatan atau selesai

ENDIF

5. Proses Pencatatan kelas

Input form_kelas

IF form_kelas sesuai THEN

Tampil bukti form_kelas

ELSE

Lanjutkan pemilihan atau selesai

ENDIF

Page 84: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

4.3.1.2 Perancangan Flowchart View

Dengan menggunakan simbol-simbol, dibuat 6 flowchart, yaitu

Flowchart Menu Utama, Flowchart Kata Sambutan, Flowchart Alumni,

Flowchart Galeri, Flowchart Info BKK dan Flowchart Login.

Mulai

Tampilkan Menu Utama

Pilih MenuHome

Keluar

Ya

Tidak

Gambar 4.10 Flowchart Menu Utama

Flowchart Gambar 4.10 menjelaskan bahwa aplikasi langsung

dimulai dengan tampilan Menu Utama sebagai pembuka. Jika user memilih

menu maka akan masuk ke menu Home.

Page 85: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

Gambar 4.11 Flowchart Home

Page 86: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

Keterangan :

1 : Halaman Home

2 : Halaman Kata Sambutan

3 : Halaman Alumni

4 : Halaman Galeri

5 : Halaman Info BKK

6 : Halaman Login

Flowchart Gambar 4.11 menjelaskan isi dari home yang meliputi

lima halaman untuk menuju ke menu selanjutnya. Jika pengguna memilih

“ya”, maka akan masuk ke menu yang diinginkan. Apabila pengguna

memilih “tidak”, maka akan kembali ke menu utama dan bisa memilih

menu lainnya.

Page 87: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

Gambar 4.12 Flowchart Kata Sambutan

Keterangan :

1 : Halaman Home

2 : Halaman Kata Sambutan

Flowchart Gambar 4.12 menjelaskan bahwa dalam halaman Kata

Sambutan terdapat tiga menu yaitu kata sambutan kepala sekolah, kata

sambutan Kabid humas dan kata sambutan Pembina osis. Apabila pengguna

memilih tombol sambutan kepala sekolah maka akan muncul kata sambutan

Page 88: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

kepala sekolah beserta video, sama halnya dengan tombol sambutan Kabid

humas dan sambutan Pembina osis . Untuk kembali ke menu utama tekan

tombol home.

Gambar 4.13 Flowchart Alumni

Keterangan :

1 : Halaman Home

3 : Halaman Alumni

Flowchart Gambar 4.13 menjelaskan bahwa dalam halaman

Alumni terdapat menu dropdown yaitu angkatan dan kelas. Apabila

Page 89: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

pengguna memilih tombol angkatan maka akan muncul pilihan angkatan

yang tersedia, begitu pula halnya dengan tombol kelas setelah menekan

tombol kelas yang dipilih baru ditampilkan data – data alumni. Untuk

kembali ke menu utama tekan tombol home.

4

Pilih Angkatan

Pilih Kelas

Pilih home

1

Tampilkan Foto kelas

Ya

Ya

Ya

Tidak

Tidak

Tidak

Gambar 4.14 Flowchart Galeri

Keterangan :

1 : Halaman Home

Page 90: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

4 : Halaman Galeri

Flowchart Gambar 4.14 menjelaskan bahwa dalam halaman Galeri

terdapat menu dropdown yaitu angkatan dan kelas. Apabila pengguna

memilih tombol angkatan maka akan muncul pilihan angkatan yang

tersedia, begitu pula halnya dengan tombol kelas setelah menekan tombol

kelas yang dipilih baru ditampilkan foto – foto kelas. Untuk kembali ke

menu utama tekan tombol home.

Page 91: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

Gambar 4.15 Flowchart Info BKK

Keterangan :

1 : Halaman Home

5 : Halaman Info BKK

Flowchart Gambar 4.15 menjelaskan Informasi yang tersedia pada

Info BKK. Apabila pengguna menekan tombol Info BKK maka layar akan

Page 92: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

menampilkan informasi – informasi yang sudah tersedia, begitu juga

alurnya apabila pengguna menekan tombol Post komentar maka layar akan

menyediakan kolom bagi pengguna untuk mengirim komentar. Untuk

kembali ke menu utama tekan tombol home.

Gambar 4.16 Flowchart Login

Keterangan :

1 : Halaman Home

Page 93: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

4 : Halaman Login

Flowchart Gambar 4.16 menjelaskan alur login bagi pengguna,

apabila pengguna menekan tombol login maka akan tampil layar login dan

pengguna dapat mengakses data pribadinya dan dapat mengirimkan

komentar. Untuk kembali ke menu utama tekan tombol home.

4.3.2 Perancangan Database

a. Entity Relationship Diagram (ERD)

ERD ini menjelaskan hubungan antara entitas yang satu

dengan entitas lainnya. Pada gambar 4.17 terdapat tujuh entitas

dengan penjelasan sebagai berikut: satu admin mencatat banyak

alumni, banyak alumni dicatat oleh satu admin, satu admin

mencatat banyak alumni kerja, banyak alumni kerja dicatat oleh

satu admin, satu admin mencatat banyak lowongan kerja, banyak

lowongan kerja dicatat oleh satu admin, satu admin mencatat

banyak banyak kelas, banyak kelas dicatat oleh satu admin, satu

admin mencatat banyak program studi, banyak program studi

dicatat oleh satu admin, satu mengakses banyak galery, banyak

galerty diakses oleh satu admin, satu alumni memiliki satu alumni

kerja, satu alumni kerja dimiliki oleh satu alumni, satu alumni

memiliki satu kelas, satu kelas dimiliki oleh satu alumni, satu

alumni memiliki satu program studi, satu program studi dimiliki

satu alumni, satu alumni mengakses banyak lowongan kerja,

banyak lowongan kerja diakses oleh satu alumni, satu alumni kerja

Page 94: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

memiliki satu kelas, satu kelas dimiliki oleh satu alumni kerja, satu

alumni kerja memiliki satu program studi, satu program studi

dimiliki oleh satu alumni kerja, satu kelas mencatat satu program

studi, satu program studi dicatat satu kelas.

Page 95: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

Gambar 4.17 ERD Pengembangan aplikasi alumni berbasis web

Page 96: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

4.3.3 Perancangan Tampilan (GUI)

4.3.3.1 Perancangan Struktur Navigasi

Pada perancangan struktur navigasi ini

menggambarkan urutan-urutan proses yang ada dalam sistem.

Diagram ini digambar berdasarkan kepada rumusan masalah yang

ada.

1. Diagram Menu Utama

Diagram menu utama pada tampilan ini adalah halaman utama

dari aplikasi web alumni berbasis multimedia. Pada proses disini

pengguna dapat memilih menu kata sambutan untuk

menampilkan layar kata sambutan, menu alumni untuk

menampilkan layar alumni, menu galeri untuk menampilkan

layar galeri, menu info BKK untuk menampilkan layar info

BKK, menu login untuk merubah data – data pribadi alumni,

dan menu home untuk kembali kemenu utama.

Gambar 4.18 Diagram Menu Utama

Page 97: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

2. Diagram Menu Kata Sambutan

Diagram menu kata sambutan ini adalah proses untuk

menampilkan layar kata sambutan, diantaranya adalah menu

sambutan dari Kepala Sekolah untuk menampilkan layar

sambutan Kepala Sekolah, menu sambutan Kabid humas untuk

menampilkan layar sambutan Kabid humas, dan menu sambutan

Pembina OSIS untuk menampilkan layar sambutan Pembina

OSIS.

3. Diagram Alumni

Diagram menu alumni ini adalah proses untuk menampilkan

layar alumni diantaranya adalah alumni angkatan – angkatan.

Gambar 4.19 Diagram Kata Sambutan

Gambar 4.20 Diagram Alumni

Page 98: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

4. Diagram Menu galeri

Diagram menu galeri adalah proses untuk menampilkan layar

galer yaitu akan menampilkan foto-foto bebas alumni setiap

kelas.

5. Diagram Menu Info BKK

Diagram menu Info BKK adalah proses untuk menampilkan

layar informasi mengenai lowongan pekerjaan.

Gambar 4.21 Diagram Menu Hiburan

Gambar 4.22 Diagram Menu Info BKK

Page 99: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

4.3.3.2 State Transition Diagram (STD)

a. STD Menu Utama

Gambar 4.23 STD Menu Utama

Tekan “Menu Utama”Tampilkan Layar Menu Utama

Klik “Kata Sambutan” Tampilkan Layar Kata Sambutan

Klik “Alumni”

Tampilkan Layar Alumni

Klik “Info BKK”

Tampilkan Layar Info BKK

Klik “Home”

Tampilkan Layar Home

Klik “Galeri”

Tampilkan Layar Galeri

Menu Utama

Info BKK

Home

Alumni

Kata Sambutan

Galeri

Page 100: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

b. STD Kata Sambutan

Gambar 4.24 STD Kata Sambutan

Page 101: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

c. STD Alumni

d. STD Galeri

Gambar 4.25 STD Alumni

Gambar 4.26 STD Galeri

Page 102: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

e. STD Info BKK

Gambar 4.27 STD Info BKK

Page 103: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

HEADER

Home Kata Sambutan Alumni Galeri Info BKK

Hari, Tanggal - jam

Pencarian Alumni

cari

Login Member

User Name

Password

Login

Logo-logo

Radio Online

Footer

Foto-foto

Text ( Info BKK )

4.3.3.3 Perancangan Layout

a. Menu Utama

Gambar 4.28 layout halaman menu utama

Page 104: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

b. Kata Sambutan

Gambar 4.29 layout halaman Kata Sambutan

Page 105: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

c. Halaman Alumni

Gambar 4.30 layout halaman Alumni

Page 106: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

d. Halaman Galeri

Gambar 4.31 layout halaman Galeri

Page 107: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

e. Halaman Info BKK

Gambar 4.32 layout halaman Info BKK

Page 108: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

f. Halaman Edit Profil

Gambar 4.33 layout halaman edit profil

Page 109: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

4.4 System Implementation

Pada tahap ini penulis menetukan spesifikasi komputer yang dibutuhkan

oleh sistem dan juga proses pengujian Aplikasi Alumni berbasis web yang

dikembangkan penulis agar dapat di lihat seluruh kemampuan dari sistem

tersebut. Dalam pengembangan Aplikasi Alumni berbasis web ini memakai

bahasa pemograman berbasis web yaitu PHP dan menggunakan database

MySQL.

4.4.1 Coding

Pada tahap ini , pengembangan sistem yang penulis buat

diterjemahkan ke dalam bahasa pemograman. Hasil tahapan ini terdapat

pada source code. (Source Code terlampir pada lampiran 4).

4.4.2 Pengujian Sistem

Spesifikasi minimal dari perangkat keras dan perangkat lunak yang

diusulkan adalah :

a. Spesifikasi Untuk Server

1. Perangkat Keras (Hardware)

a) Processor yang berkapasitas 800 MHz

b) Memori 1 GB

c) Hardisk 169 GB

d) Monitor SVGA 15

e) Mouse dan Keyboard

2. Perangkat Lunak (Software)

a) XP, Vista, Win. 7 (Rekomendasi)

Page 110: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

b) Browsing Internet Explorer (IE), Mozilla Firefox, Opera

3. Perangkat Jaringan (Netware)

a) Server

b) Hub

b. Spesifikasi Untuk Client

1. Perangkat Keras (Hardware)

a) Processor yang berkapasitas 500 MHz

b) Memori 500 MB

c) Hardisk 80 GB

d) Monitor SVGA 15

e) Mouse dan Keyboard

f) Printer

2. Perangkat Lunak (Software)

a) Win. 98, 2000, ME, XP (Rekomendasi)

b) Browsing Internet Explorer (IE), Mozilla Firefox, Opera

3. Perangkat Jaringan (Netware)

a) Modem

b) Router

c) Switch

Black-box test-case

Dari pengembangan sistem ini, dilakukan dengan pengujian black-

box dengan melakukan test-case yang di isi langsung dari pengguna.

Page 111: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

Tabel 4.7 Pengujian Black-box

NO TEST CASE HASIL HARAPAN HASIL KELUAR

BUKTI

* Untuk Tampilan Admin 1 Mengetikkan alamat

alumninasional.host56.com /admin halaman address

Tampilan Menu Login

Sesuai Lampiran 7

Gambar 1.7.1

2 Halaman Menu Home Tampilan Halaman Utama Admin

Sesuai Lampiran 7

Gambar 1.7.2

3 Halaman Menu Input Data Alumni

Tampilan Halaman Untuk Menambah, Menghapus, Merubah dan Melihat Data User

Sesuai Lampiran 7

Gambar 1.7.3

4 Tampilan Tambah Alumni Menampilkan form untuk mengisikan data user baru

Sesuai Lampiran 7

Gambar 1.7.4

5 Tampilan Edit Alumni Menampilkan form untuk mengedit data user

Sesuai Lampiran 7

Gambar 1.7.5

6 Tampilan Cetak Data Alumni

Tampilan untuk mencetak laporan data alumni

Sesuai Lampiran 7

Gambar 1.7.6

7 Tampilan Hapus Data Alumni

Tampilan Pesan Menghapus data

Sesuai Lampiran 7

Gambar 1.7.7

8 Halaman Menu View Alumni

Tampilan halaman untuk melihat berita

Sesuai Lampiran 7

Gambar 1.7.8

9 Halaman Menu Input Berita

Tampilan halaman untuk menambah, menghapus, dan merubah berita

Sesuai Lampiran 7

Gambar 1.7.9

10 Tampilan Tambah Berita Menampilkan form untuk mengisikan berita baru

Sesuai Lampiran 7

Gambar 1.7.10

Page 112: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

11 Tampilan Edit Berita Menampilkan form untuk mengedit berita

Sesuai Lampiran 7

Gambar 1.7.11

12 Tampilan Hapus Data Berita

Tampilan Pesan Menghapus data

Sesuai Lampiran 7

Gambar 1.7.12

13 Halaman Menu View Data Berita

Tampilan halaman untuk melihat berita

Sesuai Lampiran 7

Gambar 1.7.13

14 Halaman Menu galeri Tampilan halaman untuk menambah, menghapus,merubah dan melihat galeri

Sesuai Lampiran 7

Gambar 1.7.14

15 Tampilan Tambah galeri Menampilkan form untuk mengisikan galeri baru

Sesuai Lampiran 7

Gambar 1.7.15

16

Tampilan Hapus Galeri Tampilan Pesan Menghapus data

Sesuai Lampiran 7

Gambar 1.7.16

17 Halaman Menu View Galeri

Tampilan halaman untuk melihat galeri

Sesuai Lampiran 7

Gambar 1.7.17

18 Halaman Menu sambutan Tampilan halaman untuk menambah, menghapus, dan merubah data sambutan

Sesuai Lampiran 7

Gambar 1.7.18

19 Tampilan Input Data sambutan

Menampilkan form untuk mengisikan data sambutan baru

Sesuai Lampiran 7

Gambar 1.7.19

20 Tampilan Edit Data sambutan

Menampilkan form untuk mengedit data sambutan

Sesuai Lampiran 7

Gambar 1.7.20

21 Halaman Menu View Data sambutan

Tampilan halaman untuk melihat sambutan

Sesuai Lampiran 7

Gambar 1.7.21

22 Tampilan Hapus Sambutan Tampilan Pesan Sesuai Lampiran

Page 113: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

Menghapus data 7 Gambar 1.7.22

* Untuk Tampilan User / Alumni

23 Mengetikkan alamat alumninasional.host56.com halaman address

Tampilan Halaman Home

Sesuai Lampiran 8

Gambar 1.8.1

24 Tampilan Cari Data Alumni Pada Menu home

Menampilkan data alumni sesuai pencarian data

Lampiran 8

Gambar 1.8.2

25 Halaman Menu Sambutan Tampilan halaman untuk melihat video dan sambutan dari pihak sekolah

Sesuai Lampiran 8

Gambar 1.8.3

26 Halaman Menu Alumni Tampilan halaman untuk melihat data alumni yang diperlukan

Sesuai Lampiran 8

Gambar 1.8.4

27 Halaman Menu Galeri Tampilan halaman untuk melihat foto-foto kenangan

Sesuai Lampiran 8

Gambar 1.8.5

28 Halaman Menu Info BKK Tampilan halaman untuk melihat dan mencari informasi BKK yang diperlukan

Sesuai Lampiran 8

Gambar 1.8.6

29 Tampilan Tambah Post komentar

Menampilkan pesan komentar komentar baru berhasil dikirim

Sesuai Lampiran 8

Gambar 1.8.7

30 Halaman Menu Edit Profil Menampilkan form untuk mengedit data pribadi alumni

Sesuai Lampiran 8

Gambar 1.8.8

31 Apabila user ingin menambahkan komentar tetapi belum login

Tampilan peringatan untuk login terlebih dahulu

Sesuai Lampiran 6

Gambar 1.6.9

Page 114: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

BAB V

PENUTUP

Pada bab ini, peneliti akan merangkum hasil dari keseluruhan aplikasi dan

penulisan dalam Kesimpulan dan Saran.

5.1 Kesimpulan

Berdasarkan hasil penelitian dalam pembuatan skripsi ini, peneliti

memperoleh kesimpulan sebagai berikut:

1. Dengan adanya pengembangan aplikasi web alumni ini pihak sekolah

dapat merekap data-data para alumni dan menyajikan data-data

tersebut kepada pihak-pihak terkait, dapat dilihat pada table 4.7.

2. Berjalannya program info BKK yang disediakan pihak sekolah serta

memberikan kemudahan bagi para alumni untuk mendapatkan

informasi yang tersedia, dapat dilihat pada table 4.7.

3. Dengan aplikasi alumni ini pencatatan serta pencarian data alumni

dapat dilakukan secara cepat dan akurat, dapat dilihat pada table 4.7.

4. Aplikasi alumni berbasis web dapat diakses kapan saja karena sudah

dapat dioprasikan secara online melalui internet, dapat dilihat pada

table 4.7.

5.2 Saran

Setelah aplikasi selesai dibuat, peneliti memperoleh beberapa saran untuk

pengembangan Web Alumni, yaitu:

Page 115: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

1. Adanya pengembangan pada fasilitas ruang bicara, yaitu dengan

menambahkan fitur chatting agar lebih memudahkan para alumni

berkomunikasi satu sama lainnya.

2. Dikembangkannya modul forum alumni agar tersedia pula ruang bagi

alumni untuk berbagi ilmu dan pengalaman.

3. Penggunaan interactive link dan elemen multimedia yang lebih

banyak agar membuat interfacenya lebih menarik.

4. Pada tahap pengembangan selanjutnya disarankan untuk memilih sever

hosting yang lebih besar.

Page 116: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

DAFTAR PUSTAKA

An-Naggar, Ahmad. 1995. Muhafazoh wal Mua’saroh, Dirasah Fil Masrafiyah

Laa’ Ribawiyah, Darul Qutub, Kairo.

Departemen Pendidikan Nasional.2008.Kamus Besar Bahasa Indonesia.Balai

Pustaka:Jakarta.

Dwiloka, Bambang dan Rati Riana. 2005. Teknik Menulis Karya Ilmiah. PT.

Rineka Cipta : Jakarta

Hariyanto, Bambang. 2004. Sistem Manajemen Basis Data. Bandung: Informatika

Bandung.

Jogiyanto, H.M. 2005. Analisis dan Desain: Sistem Informasi Pendekatan

Terstruktur Teori dan Praktek Aplikasi Bisnis. Yogyakarta: ANDI.

Jogiyanto, H.M. 2008. Metodologi Penelitian Sistem Informasi. Yogyakarta:

ANDI.

Kadir, Abdul. 2003. Membuat Aplikasi Web dengan PHP dan Database MySQL.

Yogyakarta: ANDI.

Kadir, Abdul. 2008. Dasar Pemrograman Web Dinamis menggunakan PHP,

Andi, Yogyakarta

Ladjamuddin, Al-Bahra Bin. 2005. Analisis Dan Desain Sistem Informasi.

Yogyakarta: Graha Ilmu.

Mulyanto A. 2009. Sistem Informasi Konsep dan Aplikasi. Yogyakarta: Pustaka

Pelajar.

Peranginangin, Kasiman. 2006. Aplikasi WEB dengan PHP dan MySQL.

Yogyakarta: ANDI.

Page 117: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

LAMPIRAN-LAMPIRAN

Page 118: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik
Page 119: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik
Page 120: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

Hasil Wawancara Tahap Pertama

Narasumber : Bpk. Sugiharto, S.Sos (Kabid.Humas SMK Nasional Depok)

Hari/Tanggal : Senin, 21 Januari 2011

(T = Tanya, J = Jawab)

T : Apakah yang dimaksud dengan Web Alumni menurut pandangan Anda?

J : Menurut saya, web alumni adalah sebuah sarana untuk berkomunikasi dan

untuk mendapatkan informasi-informasi yang dibutuhkan.

T : Sejauh mana keterkaitan Web alumni dengan pemanfaatan multimedia?

J : sejauh ini saya sering mempelajari web alumni yg banyak di internet tetapi

masih jarang yang menggunakan teknologi multimedia, alangkah baiknya

kalau teknologi tersebut dapat diterapkan karena setidaknya dapat

membuat web alumni sekolah kami nanti menjadi lebih menarik.

T : Apakah selama ini, SMK ini sudah mempunyai sebuah website?

J : Ya, sudah tapi belum ada menu sarana yang memadai untuk para alumni

kami.

T : Jika iya, apakah masih terdapat masalah dan apa dilakukan untuk

mengatasi masalah tersebut?

J : Dengan menyebarkan kuisioner untuk para alumni. Sedangkan buku

taruna yang kami miliki masih berisikan data-data lama yang tidak update.

T : Perlukah dibuat sebuah sarana untuk mewadahi kebutuhan pihak seolah

maupun para alumni dengan memanfaatkan multimedia?

J : Perlu, agar para alumni kami data selalu mengupdate data-data mereka dan

kami pun masih dapat berkomunikasi dengan mereka.

Page 121: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

Keusioner Awal yang dibagikan pada 60 Siswa Aktif SMK Nasional Depok

Nama : ……………….

Kelas : ……………….

1. Apakah anda mengenal, mengetahui atau pernah mendengar tentang Web

Alumni?

a. Ya

b. Tidak / Belum pernah

2. Menurut anda apakah Web Alumni sangat berguna?

a. Berguna

b. Tidak berguna

c. Tidak tahu

3. Apakah anda menginginkan adanya Web Alumni?

a. Ya

b. Tidak

4. Selain foto dan biodata siswa apakah yang anda inginkan dari Aplikasi

Alumni berbasis web? (Boleh lebih dari satu)

a. Musik / Suara

b. Animasi

c. Video

5. Apakah anda pernah mengenal, mengetahui, atau pernah mendengar tentang

aplikasi web ?

a. Ya / Pernah

b. Tidak / Belum pernah

6. Apakah anda tertarik untuk mempunyai Aplikasi Alumni berbasiskan web?

a. Tertarik

b. Tidak tertarik

c. Tidak tahu

Page 122: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

Hasil Wawancara Tahap Kedua

Narasumber : Bpk. Ikhsan, S.Pd (IT Support SMK Nasional Depok)

Hari/Tanggal : Senin, 23 Mei 2011

(T = Tanya, J = Jawab)

T : Apakah aplikasi Web Alumni berbasis multimedia ini mudah digunakan ?

J : Menurut saya, web alumni ini adalah sebuah sarana yang mudah untuk

diakses oleh kami pihak sekolah maupun para alumni untuk mendapatkan

informasi-informasi yang dibutuhkan.

T : Menurut anda, bagaimana tampilan aplikasi secara keseluruhan ?

J : Menurut saya, interface dari aplikasi ini sudah bagus karena aplikasi ini

melibatkan komponen-komponen multimedia.

T : Bagaiman kesan animasi, teks, suara, video dan gambar pada aplikasi ini ?

J : Sudah cukup memenuhi, tetapi akan lebih baik lagi jikalau lebih banyak

komponen-komponen multimedia yang dilibatkan.

T : Menurut anda, apakah aplikasi Web Alumni berbasis multimedia ini sudah

cukup untuk memenuhi kebutuhan para alumni ?

J : Menurut saya, Aplikasi web alumni disertai dengan fasilitas-fasilitas yang

sudah ada ini sangat memadai baik dari pihak alumni maupun kami pihak

sekolah.

Page 123: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

Lampiran Source Code

Script arsip.php <h2>Selamat Datang</h2> <div class="underbanner2"></div> <br> <span class="judularsip">Gallery Terbaru</span> <br> <hr color="#315E88" size="1"> <marquee direction="left" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()"> <?php include "arsipgallery.php"; ?></marquee> <a href="index.php?menu=gallery"><b><< Lihat Semua Gallery Sekolah >></b></a> <p> <span class="judularsip">Info BKK </span><br> <hr color="#315E88" size="1"> <?php include "arsipberita.php"; ?> <a href="index.php?menu=berita"><b><< Lihat Semua Berita Sekolah >></b></a> Script alumni.php <?php if(ereg("member.php", $PHP_SELF)) header("location: index.php"); $menuid = htmlentities(dekrip($_GET["angkatan"])); $kelas = dekrip($_GET["kelas"]); if ($hal=="") $hal=1; $datacari = htmlentities($_POST["txtcari"]); $xcari = $_POST["xcari"]; $jmlbaris = 15; $batas = ($hal-1) * $jmlbaris; //if($datacari!="") { //$filter = $filter." and nama like '%$datacari%'"; //} //if($_POST['tahun']!="") { //$angkatan = htmlentities($_POST['tahun']); //$filter = $filter." and tahunlulus='$angkatan'"; //} $filter = ""; //$judulnya = "Data Alumni <br>"; if($menuid!=""){ $filter = $filter." and tahunlulus='$menuid'"; $judulnya = $judulnya." Angkatan ".$menuid."<br>"; } if($kelas!=""){ $filter = $filter." and id_kelas='$kelas'"; $judulnya = $judulnya." Kelas ". carikelas($kelas)."<br>";

Page 124: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

} //if(isset($_POST[datacari]){ $datacari = $_POST[datacari]; if($datacari!=""){ $filter = $filter." and nama like '%$datacari%'"; $judulnya = $judulnya." Pencarian Data ". $datacari; } //} $strsql1 = "select * from _alumni where aktif='1' $filter order by nama asc limit $batas,$jmlbaris"; $strsql2 = "select * from _alumni where aktif='1' $filter order by nama asc"; //error_reporting(0); include "includes/koneksi_paging.php"; ?> <form action="index.php?menu=alumni&angkatan=<?php echo enkrip($menuid) ?>&kelas=<?php echo enkrip($kelas)?>" method="POST" name="frmdata"> <input type="hidden" name="datacari" value="<?php echo $datacari ?>"> <input type="hidden" name="xcari" value="ya"> <input type="hidden" name="hal" value=""> <h2>Alumni</h2> <div class="underbanner2"></div> <div class="subjudul"> <?php echo $judulnya ?> </div> <div class="article"> <table align="center"> <tr> <?php $i = 1; if ($jml!=0) { while ($row = mysql_fetch_row($qry)) { ?> <td> <div class="platfoto" style="cursor:pointer" onclick="javascript:location='index.php?menu=detail_alumni&menuid=<?php echo $row[0] ?>'"> <?php if($baris[13]== "-" || $baris[13]==Null || $baris[13]=="") { ?> <img src="fotoalumni/alumni.jpg" border=0> <?php } else { ?> <img src="fotoalumni/<?php echo $row[13] ?>" border=0> <?php } ?><br> <?php echo $row[2]; ?> </div> </td>

Page 125: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

<?php if($i % 3 == 0){ echo '</tr><tr>'; } $i++; } } ?> </table> <div class="platpaging"><?php include "includes/paging.php" ?></div> </div> </form> Script arsipalumni.php <?php if(ereg("member.php", $PHP_SELF)) header("location: index.php"); $menuid = htmlentities($_GET["menuid"]); if ($hal=="") $hal=1; $datacari = htmlentities($_POST["txtcari"]); $xcari = $_POST["xcari"]; $jmlbaris = 15; $batas = ($hal-1) * $jmlbaris; //if($datacari!="") { //$filter = $filter." and nama like '%$datacari%'"; //} //if($_POST['tahun']!="") { //$angkatan = htmlentities($_POST['tahun']); //$filter = $filter." and tahunlulus='$angkatan'"; //} $strsql1 = "select * from _alumni where aktif='1' order by tahunlulus,id_alumni desc limit $batas,$jmlbaris"; $strsql2 = "select * from _alumni where aktif='1' order by tahunlulus,id_alumni"; //error_reporting(0); include "includes/koneksi_paging.php"; ?> <h2>Alumni</h2> <div class="underbanner2"></div> <div class="subjudul">Data Alumni Angkatan</div> <div class="article"> <table align="center"> <tr> <?php $i = 1; if ($jml!=0) {

Page 126: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

while ($row = mysql_fetch_row($qry)) { ?> <td> <div class="platfoto" style="cursor:pointer" onclick="javascript:location='index.php?menu=detail_alumni&menuid=<?php echo $row[0] ?>'"> <?php if($baris[12]!= "-") { ?> <img src="fotoalumni/<?php echo $row[12] ?>" border=0> <?php } else { ?> <img src="fotoalumni/nopic.gif" border=0 width="130" height="159"> <?php } ?><br> <?php echo $row[2]; ?> </div> </td> <?php if($i % 3 == 0){ echo '</tr><tr>'; } $i++; } } ?> </table> </div> </form> Script detailalumni.php <?php $menuid = $_GET["menuid"]; //$sql = "select _alumni.id_alumni,_alumni.nis,_alumni.nama,_alumni.tahunlulus,". // "_alumni.tempatlahir,_alumni.tgllahir,_alumni.alamat,_alumni.notelp,". // "_alumni.jenis_kelamin,_alumni.email,_alumni.website,_alumni.profil,_alumni.foto,". // "_alumni_kerja.tahun,_alumni_kerja.keterangan from _alumni left join _alumni_kerja on ". // "_alumni.id_alumni=_alumni_kerja.id_alumni and _alumni.id_alumni=$menuid ". // "group by _alumni.id_alumni,_alumni.nis,_alumni.nama,_alumni.tahunlulus,". // "_alumni.tempatlahir,_alumni.tgllahir,_alumni.alamat,_alumni.notelp,". // "_alumni.jenis_kelamin,_alumni.email,_alumni.website,_alumni.profil,_alumni.foto ".

Page 127: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

// "order by _alumni_kerja.tahun,_alumni_kerja.idr_kerja desc"; $sql = "select _alumni.id_alumni,_alumni.nis,_alumni.nama,_alumni.tahunlulus,". "_alumni.tempatlahir,_alumni.tgllahir,_alumni.alamat,_alumni.notelp,". "_alumni.jenis_kelamin,_alumni.email,_alumni.website,_alumni.profil,". "_alumni.foto,_kelas.nm_kelas,prog_studi from _alumni inner join _kelas on ". "_alumni.id_kelas=_kelas.id inner join _program_studi on _kelas.program=_program_studi.id where _alumni.id_alumni=$menuid "; $hasil = mysql_query($sql,$id_mysql); if($row = mysql_fetch_row($hasil)){ $id = $row[0]; $nama = $row[2]; $tahunlulus = $row[3]; $tmplahir = $row[4]; $tgllahir = $row[5]; $alamat = $row[6]; $telp = $row[7]; $jk =$row[8]; $email = $row[9]; $web = $row[10]; $profil = $row[11]; $foto = $row[12]; if($foto=="" || isNull($foto) || $foto=="-"){ $foto = "alumni.jpg"; } $kelas=$row[13]; $program=$row[14]; $sqlstatus = mysql_query("select * from _alumni_kerja where id_alumni='$id' order by tahun,idr_kerja desc limit 1",$id_mysql); $rsstatus = mysql_fetch_row($sqlstatus); $status = $rsstatus[2]. " - " .$rsstatus[3]; } ?> <h2>Alumni</h2> <br> <div class="underbanner2"></div> <div class="article"> <table width="100%" style="border-collapse: collapse" bordercolor="#111111" cellpadding="0" cellspacing="0"> <tr> <td width="15%" valign="top"><div class="platfoto"><img src="fotoalumni/<?php echo $foto?>"></div></td> <td width="85%" valign="top">

Page 128: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

<table width="100%" style="border-collapse: collapse" bordercolor="#111111" cellpadding="0" cellspacing="0"> <tr class="ganjil"> <td width="30%" class="isidata" height="25"><b>Nama Taruna</b></td> <td width="70%" class="isidata" height="25"><?php echo $nama ?></td> </tr> <tr class="ganjil"> <td width="30%" class="isidata" height="25"><b>Program</b></td> <td width="70%" class="isidata" height="25"><?php echo $program ?></td> </tr> <tr class="ganjil"> <td width="30%" class="isidata" height="25"><b>Tahun Tamatan</b></td> <td width="70%" class="isidata" height="25">Tahun <?php echo $tahunlulus ?></td> </tr> <tr class="ganjil"> <td width="30%" class="isidata" height="25"><b>Kelas</b></td> <td width="70%" class="isidata" height="25"><?php echo $kelas ?></td> </tr> <tr class="ganjil"> <td width="30%" class="isidata" height="25"><b>Jenis Kelamin</b></td> <td width="70%" class="isidata" height="25"><?php echo jeniskelamin($jk) ?></td> </tr> <tr class="ganjil"> <td width="30%" class="isidata" height="25"><b>Tempat Lahir</b></td> <td width="70%" class="isidata" height="25"><?php echo $tmplahir ?></td> </tr> <tr class="ganjil"> <td width="30%" class="isidata" height="25"><b>Tanggal Lahir</b></td> <td width="70%" class="isidata" height="25"><?php echo $tgllahir ?></td> </tr> <tr class="ganjil">

Page 129: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

<td width="30%" class="isidata" height="25"><b>Alamat</b></td> <td width="70%" class="isidata" height="25"><?php echo $alamat ?></td> </tr> <tr class="ganjil"> <td width="30%" class="isidata" height="25"><b>Telp</b></td> <td width="70%" class="isidata" height="25"><?php echo $telp ?></td> </tr> <tr class="ganjil"> <td width="30%" class="isidata" height="25"><b>Email</b></td> <td width="70%" class="isidata" height="25"><?php echo $email ?></td> </tr> <tr class="ganjil"> <td width="30%" class="isidata" height="25"><b>Website</b></td> <td width="70%" class="isidata" height="25"><?php echo $web ?></td> </tr> <tr class="ganjil"> <td width="30%" class="isidata" height="25"><b>Profil</b></td> <td width="70%" class="isidata" height="25"><?php echo $profil ?></td> </tr> <tr class="ganjil"> <td width="30%" class="isidata" height="25"><b>Status</b></td> <td width="70%" class="isidata" height="25"><?php echo $status ?></td> </tr> </table> </td> </tr> </table> </div> Script berita.php <?php if(ereg("berita.php", $PHP_SELF)) header("location: index.php"); if ($hal=="") $hal=1;

Page 130: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

$jmlbaris = 5; $batas = ($hal-1) * $jmlbaris; $strsql1 = "select * from _berita order by b_id desc limit $batas,$jmlbaris"; $strsql2 = "select * from _berita"; //error_reporting(0); include "includes/koneksi_paging.php"; ?> <form action="index.php?menu=berita" method="POST" name="frmdata"> <input type="hidden" name="datacari" value="<?php echo $datacari ?>"> <input type="hidden" name="xcari" value="ya"> <input type="hidden" name="hal" value=""> <h2>Info BKK</h2> <div class="underbanner2"></div> <div class="article"> <?php while ($row = mysql_fetch_row($qry)) { $tmp = explode(" ", stripslashes($row[2])); $tmpberita[] = ""; for($i=0;$i<=80;$i++){ $tmpberita[$i] = $tmp[$i]; } $bag_berita = implode(" ",$tmpberita); ?> <span class="judularsip"><b><?php echo $row[1] ?></b></span><br> <?php echo tanggaljam($row[3]) ?><br><br> <?php echo $bag_berita."...." ?></li></ul></span><p> <a href="index.php?menu=detail_berita&menuid=<?php echo $row[0] ?>"><b>Selengkapnya..</b></a> <hr style="border-style: dashed; border-width: 1" color="#000000" size="1"> <?php } ?> <div class="platpaging"><?php include "includes/paging.php" ?></div> </div> </form> Script arsipberita.php <?php if(ereg("arsipberita.php", $PHP_SELF)) header("location: index.php"); if ($hal=="") $hal=1; $jmlbaris = 10; $batas = ($hal-1) * $jmlbaris; $strsql1 = "select * from _berita order by b_id desc limit $batas,$jmlbaris"; $strsql2 = "select * from _berita"; //error_reporting(0);

Page 131: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

include "includes/koneksi_paging.php"; ?> <?php while ($row = mysql_fetch_row($qry)) { $tmp = explode(" ", stripslashes($row[2])); $tmpberita[] = ""; for($i=0;$i<=30;$i++){ $tmpberita[$i] = $tmp[$i]; } $bag_berita = implode(" ",$tmpberita); ?> <span class="judulartikel"><b><?php echo $row[1] ?></b></span><br> <?php echo tanggaljam($row[3]) ?><br><br> <?php echo $bag_berita."...." ?><br><br> <a href="index.php?menu=detail_berita&menuid=<?php echo $row[0] ?>">Selengkapnya..</a> <hr style="border-style: dashed; border-width: 1" color="#000000" size="1"> <?php } ?> Script detail_berita.php <?php if(ereg("detail_berita.php", $PHP_SELF)) header("location: index.php"); $menuid = $_GET["menuid"]; $hasil = mysql_query("select * from _berita where b_tampil='1' and b_id='$menuid'",$id_mysql); if($row = mysql_fetch_row($hasil)){ $judul = $row[1]; $isiberita = $row[2]; $tglposting = tanggaljam($row[3]); } else { echo "<script>location='index.php'</script>"; exit; } if(isset($_POST[btnsubmit])){ if($_SESSION["masukalumni"]=="hijkauser") { $komentar = htmlentities($_POST[komentar]); if($komentar!=""){ $sqlkom=mysql_query("insert into _komentar_berita(id_berita,id_user,komentar,tglkomentar,tampil) values ('$_GET[menuid]', '$_SESSION[d_id_user]','$komentar',now(),'1')"); $pesan = "<script>alert('Komentar Berhasil Dikirim')</script>";

Page 132: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

} else { $pesan = "<script>alert('Masukkan Komentar')</script>"; } } else { $pesan = "<script>alert('Harap Login Terlebih Dahulu')</script>"; } } ?> <h2>Info BKK</h2><br> <div class="underbanner2"></div> <div class="article"> <? echo "<b>$judul</b> <br>"; echo "<b><i>Tanggal Posting : " . $tglposting . "</b></i><br><br>"; echo $isiberita; ?> <br> <hr> <a name="komen"><h3>Komentar Info BKK</h3></a> <?php $pg=$_GET[pg]; if ($pg=="") { $pg=1; } $jmlbaris = 5; $link = "index.php?menu=detail_berita&menuid=$menuid"; $batas = ($pg-1) * $jmlbaris; $strsql1 = "select * from _komentar_berita where id_berita='$menuid' order by tglkomentar desc limit $batas,$jmlbaris "; $strsql2 = "select * from _komentar_berita where id_berita='$menuid' order by tglkomentar desc"; include "includes/koneksi_paging.php"; while ($row = mysql_fetch_row($qry)) { echo '<span class="judularsip">'.cekalumni($row[2]).'</b></span><br>'; echo "<i>Dikirim ".tanggaljam($row[4])."</i><br>"; echo $row[3]."<br><br>"; }?> <div class="platpaging"><? include "includes/pagingsingle.php" ?></div> <hr>

Page 133: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

<?php //if($_SESSION["masukalumni"]=="hijkauser") { ?> <b><?php echo $pesan ?></b> <form method="POST" action="index.php?menu=detail_berita&menuid=<?php echo $menuid ?>#komen"> <table border="0"> <tr> <td><b>Nama : <?php echo $_SESSION["d_nama_user"] ?></b></td> </tr> <tr> <td><textarea name="komentar" size="10" rows="6" cols="54"></textarea></td> </tr> <tr> <td><input type="submit" value="Komentar" name="btnsubmit"></td> </tr> </table> </form> <?php //} ?> </div> Script galeri.php <?php if(ereg("member.php", $PHP_SELF)) header("location: index.php"); $menuid = htmlentities(dekrip($_GET["angkatan"])); $kelas = dekrip($_GET["kelas"]); if ($hal=="") $hal=1; $jmlbaris = 9; $batas = ($hal-1) * $jmlbaris; $filter=""; if($menuid!=""){ $filter = $filter." and g_angkatan='$menuid'"; } if($kelas!=""){ $filter = $filter." and g_kelas='$kelas'"; } $strsql1 = "select * from _galery where g_foto<>'' $filter order by g_id desc limit $batas,$jmlbaris"; $strsql2 = "select * from _galery where g_foto<>'' $filter order by g_id desc"; //error_reporting(0); include "includes/koneksi_paging.php";

Page 134: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

?> <form action="index.php?menu=gallery&angkatan=<?php echo enkrip($menuid) ?>&kelas=<?php echo enkrip($kelas)?>" method="POST" name="frmdata"> <input type="hidden" name="datacari" value="<?php echo $datacari ?>"> <input type="hidden" name="xcari" value="ya"> <input type="hidden" name="hal" value=""> <h2>Gallery</h2> <div class="underbanner2"></div> <div class="subjudul"> <?php if ($menuid!="") { echo "Angkatan ".$menuid; } ?> <br> <?php if($kelas!="") { echo "Kelas ". carikelas($kelas); } ?></div> <div class="article"> <table align="center"> <tr> <?php $i = 1; if ($jml!=0) { while ($row = mysql_fetch_row($qry)) { ?> <td> <div style="cursor: pointer" class="platfoto" align="center" onclick="javascript:window.open('detail_gallery.php?dt=<?php echo $row[0] ?>','_blank','menubar=no,toolbar=no,location=no,directories=no,fullscreen=no,titlebar=yes,hotkeys=no,status=no,scrollbars=yes,resizable=no,width=500,height=300');"> <?php if($baris[1]!= "-") { ?> <img src="fotogallery/<?php echo $row[1] ?>" border=0> <?php } else { ?> <img src="fotogallery/nopic.gif" border=0 width="130" height="159"> <?php } if ($menuid=="" && $kelas=="") { echo "<br>".$row[4]." - ".carikelas($row[3]); } ?> </div> </td> <?php if($i % 3 == 0){ echo '</tr><tr>'; } $i++; } } ?> </table> <div class="platpaging"><?php include "includes/paging.php" ?></div>

Page 135: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

</div> </form> Script arsipgaleri.php <?php if(ereg("member.php", $PHP_SELF)) header("location: index.php"); if ($hal=="") $hal=1; $jmlbaris = 9; $batas = ($hal-1) * $jmlbaris; $strsql1 = "select * from _galery order by g_id desc limit $batas,$jmlbaris"; $strsql2 = "select * from _galery"; //error_reporting(0); include "includes/koneksi_paging.php"; ?> <table align="center"> <tr> <?php $i = 1; if ($jml!=0) { while ($row = mysql_fetch_row($qry)) { ?> <td> <div class="platfoto" align="center"> <?php if($baris[1]!= "-") { ?> <img src="fotogallery/<?php echo $row[1] ?>" border=0> <?php } else { ?> <img src="fotogallery/nopic.gif" border=0 width="130" height="159"> <?php } ?> </div> </td> <?php } } ?> </tr> </table> Script detail_galeri.php <?php include "includes/config.php"; $menuid = $_GET["dt"]; $hasil = mysql_query("select g_foto,g_tglupload from _galery where g_id='$menuid'",$id_mysql); if($row = mysql_fetch_row($hasil)){ $tglupload = $row[1]; $foto = "<img src='fotogallery/medium_"."$row[0]'>";

Page 136: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

} else { $tglupload = ""; $foto = " Tidak Ada Gambar"; } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title><?php echo $judulweb ?></title> <link type="text/css" rel="stylesheet" href="css/style.css"/> </head> <body> <?php echo "<b>Tanggal Upload : $tglupload </b>" ?><br> <div class="underbanner2"> <div class="platfoto"> <?php echo $foto ?> </div> </div> </body> </html> Script menu.php <?php if(ereg("menu.php", $PHP_SELF)) header("location: index.php"); ?> <div id="ddtopmenubar" class="mattblackmenu"> <ul> <li><a href="index.php">Home</a></li> <li><a href="#" rel="submenusambutan">Kata Sambutan</a></li> <!-- <li><a href="#" rel="submenuprofil">Profil Sekolah</a></li> <li><a href="#" rel="submenuguru">Guru & Staf</a></li> --> <li><a href="#" rel="submenualumni">Alumni</a></li> <!-- <li><a href="#" rel="submenuekskul">Ekskul</a></li> --> <li><a href="#" rel="submenugallery">Gallery</a></li> <li><a href="index.php?menu=berita">Info BKK</a></li> </ul> </div> <script type="text/javascript"> ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar") </script>

Page 137: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

<ul id="submenusambutan" class="ddsubmenustyle"> <?php $menusambutan = mysql_query("select s_id,s_judul from _sambutan where s_tampil='1'",$id_mysql); while ($row = mysql_fetch_row($menusambutan)){?> <li><a href="index.php?menu=sambutan&menuid=<?php echo $row[0]?>"><?php echo $row[1] ?></a></li> <?php } ?> </ul> <!-- <ul id="submenuprofil" class="ddsubmenustyle"> <?php $menuprofil = mysql_query("select p_id,p_judul from _profil where p_tampil='1'",$id_mysql); while ($row = mysql_fetch_row($menuprofil)){?> <li><a href="index.php?menu=profil&menuid=<?php echo $row[0]?>"><?php echo $row[1] ?></a></li> <?php } ?> <li><a href="index.php?menu=struktur">Struktur Organisasi</a></li> </ul> <ul id="submenuguru" class="ddsubmenustyle"> <?php $menugrup = mysql_query("select * from _guru_grup",$id_mysql); while ($rowgrup = mysql_fetch_row($menugrup)){?> <li>&nbsp;<a href="#"><?php echo $rowgrup[1] ?></a><ul> <?php $menutugas = mysql_query("select * from _guru_tugas where t_grup='$rowgrup[0]'",$id_mysql); while ($rowtugas = mysql_fetch_row($menutugas)){ ?> <li><a href="index.php?menu=grupguru&menuid=<?php echo $rowtugas[0] ?>"><?php echo $rowtugas[1] ?></a></li> <?php } ?> </ul> </li> <?php } ?> </ul> --> <ul id="submenualumni" class="ddsubmenustyle"> <?php $menualumni = mysql_query("select tahunlulus from _alumni group by tahunlulus order by tahunlulus asc",$id_mysql); while ($row = mysql_fetch_row($menualumni)){?> <li><a href="#">Angkatan <?php echo $row[0] ?></a> <ul> <?php $SQL=mysql_query("select * from _kelas"); while($rss=mysql_fetch_row($SQL)){?>

Page 138: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

<li><a href="index.php?menu=alumni&angkatan=<?php echo enkrip($row[0])?>&kelas=<?php echo enkrip($rss[0]) ?>"><?php echo $rss[1] ?></a></li> <?php } ?> </ul> </li> <?php } ?> </ul> <ul id="submenugallery" class="ddsubmenustyle"> <?php $menualumni = mysql_query("select g_angkatan from _galery group by g_angkatan order by g_angkatan asc",$id_mysql); while ($row = mysql_fetch_row($menualumni)){?> <li><a href="#">Angkatan <?php echo $row[0] ?></a> <ul> <?php $SQL=mysql_query("select * from _kelas"); while($rss=mysql_fetch_row($SQL)){?> <li><a href="index.php?menu=gallery&angkatan=<?php echo enkrip($row[0])?>&kelas=<?php echo enkrip($rss[0]) ?>"><?php echo $rss[1] ?></a></li> <?php } ?> </ul> </li> <?php } ?> </ul> <!-- <ul id="submenuekskul" class="ddsubmenustyle"> <?php $menuekskul = mysql_query("select e_id,e_nmekskul from _ekskul where e_tampil='1'",$id_mysql); while ($row = mysql_fetch_row($menuekskul)){?> <li><a href="index.php?menu=ekskul&menuid=<?php echo $row[0]?>"><?php echo $row[1] ?></a></li> <?php } ?> </ul> --> Script menualumni.php <?php if(ereg("menualumni.php", $PHP_SELF)) header("location: index.php"); $menumasuk = $_SESSION["masukalumni"]; if ($menumasuk!="hijkauser") { if($_POST["submit"]!="Login"){ $err=$_GET["err"]; ?> <form name="form1" method="post" class="form">

Page 139: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

<div><img src="images/login.gif" width="201" height="61"></div> <label>Username :</label> <div><input type="text" name="txtuser" size="26" class="input"></div> <label>Password :</label> <div><input type="password" name="txtpass" size="26" class="input"></div> <input type="submit" name="submit" value="Login"> <?php if($err==1) echo "<div align='center'><br><b>Username dan Password Salah</b></div>"; if($err==2) echo "<div align='center'><br><b>Account Anda Belum Aktif</b></div>"; ?> </form> <p> <?php } else { $duser = $_POST["txtuser"]; $dpass = enkrip($_POST["txtpass"]); //$sqlakses = mysql_query("select nis,nama,d_user,d_pass,id_alumni from _alumni where d_user='$duser' and d_pass='$dpass' and aktif=1",$id_mysql); $sqlakses = mysql_query("select _alumni.nis,_alumni.nama,_user_admin.usr_user,usr_pwd,_alumni.id_alumni from _alumni inner join _user_admin on _alumni.nis = _user_admin.usr_nmlengkap and _user_admin.usr_user='$duser' and usr_pwd='$dpass' and aktif='1' and usr_level='ALM'",$id_mysql); $rowakses = mysql_fetch_row($sqlakses); $jmluser = mysql_num_rows($sqlakses); if($jmluser > 0 ){ // Jika ada di tabel $d_nis_user = $rowakses[0]; $d_nama_user = $rowakses[1]; $d_username = $rowakses[2]; $d_passuser = $rowakses[3]; $d_id_user = $rowakses[4]; $masukalumni = "hijkauser"; $log_in = date('Y-m-d H:i:s' ); // Deklarasikan variabel session $_SESSION["d_id_user"] = $d_id_user; $_SESSION["d_nis_user"] = $d_nis_user; $_SESSION["d_nama_user"] = $d_nama_user; $_SESSION["d_username"] = $d_username; $_SESSION["d_passuser"] = $d_passuser;

Page 140: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

$_SESSION["masukalumni"] = $masukalumni; $_SESSION["log_in"] = $log_in; echo "<script>location='index.php'</script>"; } else { // Jika data tidak ada di tabel echo "<script>location='index.php?err=1'</script>"; } } } else { ?> <div><img src="images/menuuser.gif" width="201" height="61"></div> <div><a href="index.php?menu=ubah_data" class="mainlevel"><img border="0" src="images/userclass_32.png" width="16" height="16">&nbsp;Ubah Profil</a></div> <div><a href="index.php?menu=keluar" class="mainlevel"><img border="0" src="images/adminpass_16.png" width="16" height="16">&nbsp;Keluar</a></div> <?php } ?> Script menulagu.php <? if(ereg("menulagu.php", $PHP_SELF)){ echo "<script>location = 'index.php'</script>"; } $folder="/alumni"; ?> <div id="chartpengunjung" class="platlink"> <div class="platnya">LAGU ONLINE</div><br> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="180" height="120" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"> <param name="id" value="xspf_player" /> <param name="align" value="middle" /> <param name="allowScriptAccess" value="sameDomain" /> <param name="quality" value="high" /> <param name="bgcolor" value="#e6e6e6" /> <param name="src" value="<? echo $folder ?>/mp3/xspf_player.swf?autoload=true&amp;playlist_url=<? echo folder ?>/mp3/urutanlagu.php" /> <embed id="xspf_player" type="application/x-shockwave-flash" width="180" height="120" src="<? echo $folder ?>/mp3/xspf_player.swf?autoload=true&amp;playlist_url=<? echo $folder ?>/mp3/urutanlagu.php" bgcolor="#e6e6e6" quality="high" allowscriptaccess="sameDomain" align="middle"> </embed></object>

Page 141: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

</div> Script editprofil.php <?php $menumasuk = $_SESSION["masukalumni"]; $nis_alumni = $_SESSION["d_nis_user"]; if ($menumasuk!="hijkauser") { echo "Maaf, Tidak Ada Akses"; exit; } if(isset($_POST["btnsimpan"])){ $tglsekarang = date('Y-m-d H:i:s'); // Deklarasi Data User Login Alumni $password = enkrip($_POST["txtpass"]); $email = $_POST["txtmail"]; $username = $_POST[txtuser]; $nis=$_POST[txtnit]; // Deklasari Biodata Alumni $nama = trim($_POST["txtnama"]); $jenis_kelamin = $_POST["optjk"]; $tempat_lahir = trim($_POST["tmplahir"]); $tgllahir = $_POST["tgllahir"]; $blnlahir = $_POST["blnlahir"]; $thnlahir = $_POST["thnlahir"]; $telp = $_POST["txttelp"]; $d_tgllahir = $thnlahir."-".$blnlahir."-".$tgllahir; $alamat = trim(stripslashes($_POST["txtalamat"])); $website = trim($_POST["txtweb"]); $profil = trim(stripslashes($_POST["txtprofil"])); $thnlulus = trim($_POST["txtlulus"]); $kelas=$_POST[dkelas]; //Deklarasi Pengalaman Kerja $thnpengalaman = $_POST["thnpengalaman"]; $pengalaman = $_POST["pengalaman"]; $statusdata = $_POST["dstatusdata"]; //Deklarasi File Foto $kodefoto = date('YmdHis'); $foto = $_FILES['txtfoto']['tmp_name']; $ext = substr($_FILES['txtfoto']['name'],-3); $nmfoto = "ALUMNI".$kodefoto.".$ext"; $nmfotoasli = $_FILES['txtfoto']['name'];

Page 142: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

if($foto!=""){ list($width, $height, $type, $attr) = getimagesize($foto); $tipefoto = $type; } $idalumni = $_SESSION["d_id_user"]; //Proses Update Data $up = "no"; if ($foto !=""){ $cekType = cekType($tipefoto); if($cekType==false) { $error=true; $errortipe="ya"; } else { $up="yes"; } } else { $nmfoto= $_POST['fotolama'];; } if($up=="yes"){ $uploadnya = UploadImage($foto,$nmfotoasli,$nmfoto,"alumni"); $nmfotolama = $_POST["fotolama"]; $hapus = hapusfile("alumni",$nmfotolama); } // Mengisi data pengalaman kerja alumni $jmldt = count($thnpengalaman); $del = mysql_query("delete from _alumni_kerja where id_alumni='$idalumni'"); for ($i=0;$i<$jmldt;$i++){ if ($thnpengalaman[$i]!="" || $pengalaman[$i]!=""){ $sql = "insert into _alumni_kerja(id_alumni,tahun,keterangan,status_data) values ('$idalumni','$thnpengalaman[$i]','$pengalaman[$i]','$statusdata[$i]')"; mysql_query($sql,$id_mysql); } } // Mengubah biodata alumni $sql = "update _alumni set nama='$nama',tahunlulus='$thnlulus',id_kelas='$kelas',tempatlahir='$tempat_lahir',". "tgllahir='$d_tgllahir',alamat='$alamat',notelp='$telp',". "jenis_kelamin='$jenis_kelamin',email='$email',website='$website',".

Page 143: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

"profil='$profil',foto='$nmfoto' where id_alumni='$idalumni'"; //echo $sql; $hasil = mysql_query($sql,$id_mysql); //Mengubah Password dan Usernae $sql2 = "update _user_admin set usr_pwd='$password',usr_user='$username' where usr_nmlengkap='$nis'"; $hasil2=mysql_query($sql2); } unset($_POST["btnsimpan"]); $sqldata=mysql_query("select * from _alumni where nis='$nis_alumni' and aktif=1",$id_mysql); $rowdata=mysql_fetch_row($sqldata); if($rowdata){ $nis = $rowdata[1]; $nama = $rowdata[2]; $sqluser = mysql_query("select usr_user,usr_pwd from _user_admin where usr_nmlengkap='$nis'"); $rsu = mysql_fetch_row($sqluser); $data_user = $rsu[0]; $data_pass = dekrip($rsu[1]); $tempatlahir = $rowdata[4]; $thnlulus = $rowdata[3]; $tgllahir = $rowdata[5]; $formattanggal = explode("-",$tgllahir); $tgllhr = $formattanggal[2]; $blnlhr = $formattanggal[1]; if(strlen($blnlhr)<1){ $tgllhr = "0".$tgllhr; } $thnlhr = $formattanggal[0]; //echo $tgllhr . "-" .$blnlhr."-".$thnlhr; $alamat = $rowdata[6]; $telp = $rowdata[7]; $jenis_lemain = $rowdata[8]; $email = $rowdata[9]; $website = $rowdata[10]; $profil = $rowdata[11]; $kelas = $rowdata[12]; $foto = $rowdata[13]; $sqlexp = mysql_query("select * from _alumni_kerja where id_alumni='$rowdata[0]'"); $ztahun[]="";

Page 144: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

$zketerangan[]=""; $zstatus[]=""; $jmlexp = mysql_num_rows($sqlexp); if($jmlexp == 0){ $jmlexp=1; $zjmlexp=0; } $x = 0; while ($rsu = mysql_fetch_row($sqlexp)){ $ztahun[$x]=$rsu[2]; $zketerangan[$x]=$rsu[3]; $zstatus[$x]=$rsu[4]; $x = $x+1; } } else { } ?> <script language="javascript"> var idrowexp = <?php echo $zjmlexp+2 ?>; function tambahexp(){ var x=document.getElementById('datakerja').insertRow(idrowexp+1); var td1=x.insertCell(0); var td2=x.insertCell(1); td1.setAttribute('class','ganjil'); td2.setAttribute('class','ganjil'); td1.innerHTML="Tahun"; td2.innerHTML="<input type='text' class='select' name='thnpengalaman[]' size='12'>"; var z = document.getElementById('datakerja').insertRow(idrowexp+2) z.setAttribute('class','ganjil'); var td5=z.insertCell(0); var td6=z.insertCell(1); td5.setAttribute('class','ganjil'); td6.setAttribute('class','ganjil'); <?php $SQL=mysql_query("select * from _alumni_status_data"); $datanya=""; while ($rs=mysql_fetch_row($SQL)){ $datanya = $datanya."<option value='$rs[0]'>$rs[1]</option>"; } ?>

Page 145: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

td5.vAlign="top"; td5.innerHTML="Status Data"; td6.innerHTML="<select name='dstatusdata[]' class='select'><?php echo $datanya ?></select>"; var y = document.getElementById('datakerja').insertRow(idrowexp+3); y.setAttribute('class','ganjil'); var td3=y.insertCell(0); var td4=y.insertCell(1); td3.setAttribute('class','ganjil'); td4.setAttribute('class','ganjil'); td3.vAlign="top"; td3.innerHTML="Keterangan"; td4.innerHTML="<textarea rows='3' class='select' name='pengalaman[]' cols='52'></textarea>"; idrowexp = idrowexp+3; } function hapusexp(){ if(idrowexp>2){ var x=document.getElementById('datakerja').deleteRow(idrowexp); var y=document.getElementById('datakerja').deleteRow(idrowexp-1); var y=document.getElementById('datakerja').deleteRow(idrowexp-2); idrowexp = idrowexp-3; } } </script> <h2>Profil Alumni</h2> <div class="underbanner2"></div> <div class="isiformdata"> <form action="index.php?menu=ubah_data" method="POST" onSubmit="return validasi()" name="frmdata" enctype="multipart/form-data"> <div id="headerform">DATA USER LOGIN</div> <table width="100%" border="1" style="border-collapse: collapse" bordercolor="#FFFFFF" cellpadding="2" cellspacing="3"> <tr > <td width="26%" class="ganjil" height="22" valign="top">Username</td> <td width="74%" class="ganjil" height="22" valign="top"> <input type="text" name="txtuser" size="25" class="select" value="<?php echo $data_user ?>">

Page 146: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

</td> </tr> <tr> <td width="26%" class="ganjil" height="22" valign="top">Password</td> <td width="74%" class="ganjil" height="22" valign="top"> <input type="password" name="txtpass" size="25" class="select" value="<?php echo $data_pass ?>"></td> </tr> <tr> <td width="26%" class="ganjil" height="6" valign="top">Email</td> <td width="74%" class="ganjil" height="6" valign="top"> <input type="text" name="txtmail" size="25" class="select" value="<?php echo $email ?>"></td> </tr> <tr> <td width="26%" class="ganjil" height="22" valign="top">&nbsp;</td> <td width="74%" class="ganjil" height="22" valign="top">&nbsp; </td> </tr> <tr> <td width="26%" class="ganjil" height="22" valign="top">&nbsp;</td> <td width="74%" class="ganjil" height="22" valign="top">&nbsp; </td> </tr> </table> <div id="headerform">BIODATA ALUMNI</div> <table width="100%" border="1" style="border-collapse: collapse" bordercolor="#FFFFFF" cellpadding="2" cellspacing="3"> <tr> <td width="26%" class="ganjil" height="22" valign="top">NIT</td> <td width="74%" class="ganjil" height="22" valign="top"> <input type="hidden" name="txtnit" size="25" class="select" value="<?php echo $nis ?>"> <b><?php echo $nis ?></b></td> </tr> <tr>

Page 147: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

<td width="26%" class="ganjil" height="22" valign="top">Nama Taruna</td> <td width="74%" class="ganjil" height="22" valign="top"> <input type="text" name="txtnama" size="55" class="select" value="<?php echo $nama ?>"></td> </tr> <tr> <td width="26%" class="ganjil" height="22" valign="top">Jenis Kelamin</td> <td width="74%" class="ganjil" height="22" valign="top"> <input type="radio" value="1" name="optjk" <?php if($jenis_lemain=="1") echo "checked" ?>>Laki-Laki&nbsp; <input type="radio" name="optjk" value="0" <?php if($jenis_lemain=="0") echo "checked" ?>>Wanita</td> </tr> <tr> <td width="26%" class="ganjil" height="22" valign="top">Tempat Lahir</td> <td width="74%" class="ganjil" height="22" valign="top"> <input type="text" name="tmplahir" size="20" class="select" value="<?php echo $tempatlahir ?>"> <select size="1" class="select" name="tgllahir"> <?php for ($i=1;$i<32;$i++) { if(strlen($i)==1){ $i = "0".$i; } ?> <option value="<?php echo $i ?>" <?php if($tgllhr==$i) echo "selected" ?>><?php echo $i ?></option> <?php } ?> </select> - <select size="1" name="blnlahir" class="select"> <option value="01" <?php if($blnlhr=="01") echo "selected" ?>>Jan</option><option value="02" <?php if($blnlhr=="02") echo "selected" ?>>Feb</option> <option value="03" <?php if($blnlhr=="03") echo "selected" ?>>Mar</option><option value="04" <?php if($blnlhr=="04") echo "selected" ?>>Apr</option> <option value="05" <?php if($blnlhr=="05") echo "selected" ?>>May</option><option value="06" <?php if($blnlhr=="06") echo "selected" ?>>Jun</option>

Page 148: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

<option value="07" <?php if($blnlhr=="07") echo "selected" ?>>Jul</option><option value="08" <?php if($blnlhr=="08") echo "selected" ?>>Aug</option> <option value="09" <?php if($blnlhr=="09") echo "selected" ?>>Sep</option><option value="10" <?php if($blnlhr=="10") echo "selected" ?>>Oct</option> <option value="11" <?php if($blnlhr=="11") echo "selected" ?>>Nov</option><option value="12" <?php if($blnlhr=="12") echo "selected" ?>>Dec</option></select> - <input type="text" name="thnlahir" size="9" class="select" value="<?php echo $thnlhr ?>"><br> Format (Tgl - Bln - Thn) </td> </tr> <tr> <td width="26%" class="ganjil" height="52" valign="top">Alamat Taruna</td> <td width="74%" class="ganjil" height="52" valign="top"> <textarea rows="2" name="txtalamat" cols="52" class="select"><?php echo $alamat ?></textarea></td> </tr> <tr> <td width="26%" class="ganjil" height="22" valign="top">Website</td> <td width="74%" class="ganjil" height="22" valign="top"> <input type="text" name="txtweb" size="25" class="select" value="<?php echo $website ?>"></td> </tr> <tr> <td width="26%" class="ganjil" height="22" valign="top">No. Telp</td> <td width="74%" class="ganjil" height="22" valign="top"> <input type="text" name="txttelp" size="25" class="select" value="<?php echo $telp ?>"></td> </tr> <tr> <td width="26%" class="ganjil" height="52" valign="top">Profil</td> <td width="74%" class="ganjil" height="52" valign="top"> <textarea rows="2" name="txtprofil" cols="52" class="select"><?php echo $profil ?></textarea></td>

Page 149: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

</tr> <tr> <td width="26%" class="ganjil" height="9" valign="top"> Tahun Tamatan</td> <td width="74%" class="ganjil" height="9" valign="top"> <input type="text" name="txtlulus" size="10" class="select" value="<?php echo $thnlulus ?>"></td> </tr> <tr> <td width="26%" class="ganjil" height="3" valign="top"> Kelas</td> <td width="74%" class="ganjil" height="3" valign="top"> <select size="1" name="dkelas" class="select"> <?php $SQL=mysql_query("select * from _kelas"); while ($rss=mysql_fetch_row($SQL)){?> <option value="<?php echo $rss[0]?>" <?php if($kelas==$rss[0]){ echo "selected"; } ?>><?php echo $rss[1] ?></option> <?php } ?> </select></td> </tr> <tr> <td width="26%" height="22" class="ganjil" valign="top">Foto</td> <td width="74%" height="22" class="ganjil" valign="top"> <input type="file" name="txtfoto" size="20" class="select"> <input type="hidden" name="fotolama" value="<?php echo $foto ?>"> <div id="fotoalumni"> <img src="fotoalumni/<?php echo $foto ?>"> </div> </td> </tr> </table> <div id="headerform">STATUS</div> <table width="100%" id="datakerja" border="1" style="border-collapse: collapse" bordercolor="#FFFFFF" cellpadding="2" cellspacing="3"> <?php for ($jj=0;$jj<$jmlexp;$jj++){?> <tr> <td width="26%" class="ganjil" height="22" valign="top">Tahun</td> <td width="74%" class="ganjil" height="22" valign="top"><input type="text" class="select" name="thnpengalaman[]" size="12" value="<?php echo $ztahun[$jj] ?>"></td> </tr>

Page 150: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

<tr> <td width="26%" height="2" valign="top" class="ganjil">Status Data</td> <td width="74%" height="2" valign="top" class="ganjil"> <select size="1" name="dstatusdata[]" class="select"> <?php $SQL=mysql_query("select * from _alumni_status_data"); while ($rs=mysql_fetch_row($SQL)){?> <option value="<?php echo $rs[0] ?>" <?php if($zstatus[$jj]==$rs[0]){ echo "selected"; } ?>><?php echo $rs[1] ?></option> <?php } ?> </select></td> </tr> <tr> <td width="26%" class="ganjil" height="34" valign="top">Keterangan</td> <td width="74%" class="ganjil" height="34" valign="top"> <textarea rows="2" name="pengalaman[]" cols="52" class="select"><?php echo $zketerangan[$jj] ?></textarea></td> </tr> <?php } ?> <tr> <td width="26%" class="ganjil" height="22" valign="top"></td> <td width="74%" class="ganjil" height="22" valign="top"><input type="button" onclick="javascript:tambahexp()" value="Tambah"> <input type="button" onclick="javascript:hapusexp()" value="Hapus"> <br><b>*Tombol Tambah untuk menambah pengalaman pekerjaan lebih dari satu</b> </td> </tr> </table> </div> <div id="judulform"> <input type="submit" value="Simpan" name="btnsimpan" class="searchbutton"> </div> </form> <!--</div>--> Script index.php <?php session_start();

Page 151: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

include "includes/config.php"; include "includes/function.php"; include "includes/pwd.php"; ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title><?php echo $judulweb ?></title> <link type="text/css" rel="stylesheet" href="css/style.css"/> <link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-base.css" /> <link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-topbar.css" /> <link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-sidebar.css" /> <script type="text/javascript" src="ddlevelsfiles/ddlevelsmenu.js"></script> <script> window.setTimeout("waktu()",1000); function waktu() { var tanggal = new Date(); var namahari = ("Minggu Senin Selasa Rabu Kamis Jumat Sabtu"); namahari = namahari.split(" "); var namabulan = ("Januari Februari Maret April Mei Juni Juli Agustus September Oktober Nopember Desember"); namabulan = namabulan.split(" "); var hari = tanggal.getDay(); var tgl = tanggal.getDate(); var bln = tanggal.getMonth(); var thn = tanggal.getFullYear(); setTimeout("waktu()",1000); document.getElementById("output").innerHTML = namahari[hari]+", "+tgl+" "+namabulan[bln]+" "+thn+" "+tanggal.getHours()+":"+tanggal.getMinutes()+":"+tanggal.getSeconds(); } </script> </head> <body> <div class="wrapper"> <div class="banner">

Page 152: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

<!-- <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="100%" height="100%" id="banner" align="middle"> <param name="allowScriptAccess" value="sameDomain" /> <param name="movie" value="banner.swf" /><param name="menu" value="false" /><param name="quality" value="best" /><param name="scale" value="exactfit" /><param name="wmode" value="transparent" /><param name="bgcolor" value="#ffffff" /><embed src="banner.swf" menu="false" quality="best" scale="exactfit" wmode="transparent" bgcolor="#ffffff" width="100%" height="100%" name="banner" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></object>--> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="100%" height="100%" id="userweb" align="middle"> <param name="allowScriptAccess" value="sameDomain" /> <param name="movie" value="userweb.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /><embed src="userweb.swf" quality="high" bgcolor="#ffffff" width="100%" height="100%" name="userweb" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></object> </div> <div align="left"> <?php include "menu.php"; ?> </div> <div class="content"> <div class="leftcolumn"> <div class="box"> <div id="output"></div> <?php if($_SESSION["masukalumni"]=="hijkauser") { ?> Selamat Datang <b><?php echo $_SESSION["d_nama_user"] ?></b> <?php } ?> </div> <div class="box"> <div id="caridata"><span class="judularsip">Pencarian Alumni</span> <form method="POST" action="index.php?menu=alumni"> <table border=0>

Page 153: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

<!-- <tr> <td><b>Nama</b></td> </tr> --> <tr> <td><input type="text" class="select" name="datacari" value="Cari alumni" size="25"></td> </tr> <!-- <tr> <td><b>Angkatan</b></td> </tr> <tr> <td> <select name="cangkatan" class="select"> <option value="0">Semua Angkatan</option> <?php $SQL=mysql_query("select tahunlulus from _alumni group by tahunlulus"); while ($rst=mysql_fetch_object($SQL)){ ?> <option value="<?php echo $rst->tahunlulus ?>"><?php echo $rst->tahunlulus ?></option> <?php } ?> </select> </td> </tr>--> <tr> <td><input type="submit" value="Cari" name="btncari"></td> </tr> </table> </form> </div> </div> <div class="box"> <?php include "menualumni.php"; ?> </div> <div class="box"> <img border="0" src="logo/image001.jpg" width="201" height="117"><br> </div>

Page 154: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

<div class="box"> <img border="0" src="logo/image002.jpg" width="201" height="125"><br> </div> <div class="box"> <img border="0" src="logo/zyrex.png" width="201" height="104"><br> </div> <div class="box"> <img border="0" src="logo/yamaha.png" width="201" height="44"><br> </div> <div class="box"> <?php include "menulagu.php" ?> </div> </div> <div class="rightcolumn"> <?php switch($_GET['menu']) { case "keluar" : session_destroy(); echo "<script>location='index.php'</script>"; break; case "sambutan" : include "sambutan.php"; break; case "profil" : include "profilsekolah.php"; break; case "struktur" : include "struktur.php"; break; case "detail_struk" : include "detailstruktur.php"; break; case "grupguru" : include "gurustaf.php"; break; case "detail_guru" : include "detailguru.php"; break; case "ekskul" : include "ekskul.php"; break; case "alumni" : include "alumni.php"; break;

Page 155: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

case "detail_alumni" : include "detailalumni.php"; break; case "gallery" : include "gallery.php"; break; case "ubah_data" : include "editprofil.php"; break; case "berita"; include "berita.php"; break; case "detail_berita"; include "detail_berita.php"; break; default: include "arsip.php"; } ?> </div> <div class="clear"></div> <p><p> </div> <div class="footer"><?php echo $judulweb ?></div> </div> </body> </html> Script sambutan.php <?php $menuid = $_GET["menuid"]; $hasil = mysql_query("select * from _sambutan where s_tampil='1' and s_id='$menuid'",$id_mysql); if($row = mysql_fetch_row($hasil)){ $judulhal = $row[1]; $isihal = $row[2]; $isifile = $row[3]; } else { $judulhal = ""; $isihal = "Maaf, Tidak Ditemukan Halaman"; } $folder="/alumni/"; ?> <script type="text/javascript" src="js/swfobject.js"></script> <h2>Sambutan</h2><br>

Page 156: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

<div class="underbanner2"><b><?php echo $judulhal ?></b></div> <div class="article"> <table width="100%" style="border-collapse: collapse" bordercolor="#111111" cellpadding="0" cellspacing="0"> <tr> <td width="20%"> <div id="container2" style="z-index:1;"></div> <script type="text/javascript"> //var s1 = new SWFObject("<?php ECHO "http://".$_SERVER['SERVER_NAME'].'/playvideo/player.swf' ?>","ply","200","140","9","#ffffff"); var s1 = new SWFObject("<?php ECHO $folder.'playvideo/player.swf' ?>","ply","200","140","9","#ffffff"); //s1.addParam("flashvars","file=<?php ECHO "http://".$_SERVER['SERVER_NAME'].'/video/'.$isifile ?>&image=<?php ECHO "http://".$_SERVER['SERVER_NAME'].'/images/logo3.png' ?>"); s1.addParam("flashvars","file=<?php ECHO $folder.'video/'.$isifile ?>&image=<?php ECHO $folder.'/images/logo3.png' ?>"); s1.addParam("allowfullscreen","true"); s1.addParam("allowscriptaccess","always"); s1.write("container2"); </script> </td> <td width="80%" valign="top" class="isihal"><?php echo $isihal ?></td> </tr> </table> </div>

Page 157: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

LAMPIRAN 7 (Halaman Admin)

1. Tampilan Menu Login

Gambar 1.7.1 Interface Halaman Login

2. Halaman Menu Home

Gambar 1.7.2 Interface Halaman Home

Page 158: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

3. Halaman Menu Input Data Alumni

Gambar 1.7.3 Interface Halaman Data Alumni

4. Tampilan Tambah Alumni

Gambar 1.7.4 Interface Halaman Tambah Alumni

Page 159: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

5. Tampilan Edit Alumni

Gambar 1.7.5 Interface Halaman Edit Alumni

6. Tampilan Cetak Data Alumni

Gambar 1.7.6 Interface Halaman Cetak Data Alumni

Page 160: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

7. Tampilan Hapus Data Alumni

Gambar 1.7.7 Interface Halaman Hapus Data Alumni

8. Halaman Menu View Alumni

Gambar 1.7.8 Interface Halaman View Alumni

Page 161: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

9. Halaman Menu Input Berita

Gambar 1.7.9 Interface Halaman Menu Input Berita

10. Tampilan Tambah Berita

Gambar 1.7.10 Interface Halaman Tambah Berita

Page 162: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

11. Tampilan Edit Berita

Gambar 1.7.11 Interface Halaman Edit Berita

12. Tampilan Hapus Data Berita

Gambar 1.7.12 Interface Halaman Hapus Data Berita

Page 163: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

13. Halaman Menu View Data Berita

Gambar 1.7.13 Interface Halaman View Data Berita

14. Halaman Menu galeri

Gambar 1.7.14 Interface Halaman Menu galeri

Page 164: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

15. Tampilan Tambah galeri

Gambar 1.7.15 Interface Halaman Tambah galeri

16. Tampilan Hapus Galeri

Gambar 1.7.16 Interface Halaman Hapus Galeri

Page 165: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

17. Halaman Menu View Galeri

Gambar 1.7.17 Interface Halaman View Galeri

18. Halaman Menu sambutan

Gambar 1.7.18 Interface Halaman Menu sambutan

Page 166: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

19. Tampilan Input Data sambutan

Gambar 1.7.19 Interface Halaman Tambah Data sambutan

20. Tampilan Edit Data sambutan

Gambar 1.7.20 Interface Halaman Edit Data sambutan

Page 167: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

21. Halaman Menu View Data sambutan

Gambar 1.7.21 Interface Halaman View Data sambutan

22. Tampilan Hapus Sambutan

Gambar 1.7.22 Interface Halaman Hapus Sambutan

Page 168: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

LAMPIRAN 8 (Halaman User)

1. Mengetikkan alamat alumninasional.host56.com halaman Home

Gambar 1.8.1 Interface halaman home

Page 169: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

2. Tampilan Cari Data Alumni Pada Menu home

Gambar 1.8.2 Interface halaman hasil pencarian

Page 170: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

3. Halaman Menu Sambutan

Gambar 1.8.3 Interface halaman menu sambutan

Page 171: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

4. Halaman Menu

Gambar

Halaman Menu Alumni

Gambar 1.8.4 Interface halaman menu alumni

Page 172: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

5. Halaman Menu

Gambar

Halaman Menu Galeri

Gambar 1.8.5 Interface halaman menu galeri

Page 173: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

6. Halaman Menu Info BKK

Gambar

Halaman Menu Info BKK

Gambar 1.8.6 Interface halaman info BKK

Page 174: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

7. Tampilan Tambah Post komentar

Gambar 1.8.7 Interface tampilan pesan komentar berhasil terkirim

Page 175: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

8. Halaman Menu

Gambar

Halaman Menu Edit Profil

Gambar 1.8.8 Interface halaman edit profil

Page 176: PENGEMBANGAN APLIKASI ALUMNI BERBASIS WEB PADA SMK ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4760/1/BILLY... · MULTIMEDIA PADA SMK NASIONAL DEPOK Oleh ... Jurusan Teknik

9. Apabila user ingin menambahkan komentar tetapi belum login

Gambar 1.8.9 Interface pesan Login terlebih dahulu