Sistem Informasi Pendidikan Online SMK Tunas Grafika

SISTEM INFORMASI PENDIDIKAN DAN PEMBELAJARAN
ONLINE SMK TUNAS GRAFIKA INFORMATIKA

MENGGUNAKAN PHP
SKRIPSI
Oleh:
MAULANA ARDI
02140060
PROGRAM STUDI SISTEM INFORMASI

STMIK MAHAKARYA
JAKARTA
2018
i
ONLINE SMK TUNAS GRAFIKA INFORMATIKA
MENGGUNAKAN PHP
SKRIPSI
Oleh:
MAULANA ARDI
02140060

STMIK MAHAKARYA
JAKARTA
2018
i
ONLINE SMK TUNAS GRAFIKA INFORMATIKA MENGGUNAKAN
PHP
Diajukan untuk memenuhi salah satu persyaratan

memperoleh gelar Sarjana Komputer (S.Kom)
SKRIPSI
Oleh:
MAULANA ARDI
02140060

STMIK MAHAKARYA
JAKARTA
2018
i
STMIK MAHAKARYA
PERSETUJUAN SKRIPSI
Nama : MAULANA ARDI
Nomor Induk Mahasiswa : 02140060
Program Studi : Sistem Informasi
Jenjang Studi : Strata 1
Judul : Pembuatan Website Informasi Pendidikan Dan Pembelajaran
Online SMK Tunas Grafika Informatika Menggunakan PHP
Disetujui untuk dipertahankan dalam sidang Tugas Akhir periode semester Ganjil tahun ajaran
2017/2018
Jakarta, 19 Januari 2018
Dosen Pembimbing
(Deni Hermawan, M.Si)
ii
STMIK MAHAKARYA
LEMBAR PENGESAHAN
Nama : MAULANA ARDI

Nomor Induk Mahasiswa : 02140060
Program Studi : Sistem Informasi
Jenjang Studi : Strata 1
Judul : Pembuatan Website Informasi Pendidikan Dan Pembelajaran
Online SMK Tunas Grafika Informatika Menggunakan PHP

Tim Penguji:
Tanda tangan:
Ketua,
Erlita Sulistiati, M.Kom
..
Anggota,
Abdurrahman hidayah, M.Kom
...
Anggota,
Dian Afriady, M.Kom
...
Pembimbing,
Deni Hermawan, M.Si
..
Ketua STMIK MAHAKARYA Ketua Program Studi
(Taufik Hidayat, S.Kom., M.M) (Dian Afriady, M.Kom)
iii
SURAT PERNYATAAN TIDAK PLAGIAT DAN PERSETUJUAN
PUBLIKASI
Saya yang bertanda tangan dibawah ini :

Nama :
NIM :
Program Studi :
Jenjang Studi :
menyatakan bahwa SKRIPSI yang berjudul:
....................................................................................................................................
....................................................................................................................................
....................................................................................................................................
1. Merupakan hasil karya tulis ilmiah sendiri dan bukan merupakan karya
yang pernah diajukan untuk memperoleh gelar akademik oleh pihak
lain,
2. Saya ijinkan untuk dikelola oleh STMIK MAHAKARYA sesuai dengan
norma hukum dan etika yang berlaku.
Pernyataan ini saya buat dengan penuh tanggung jawab dan saya
bersedia menerima konsekuensi apapun sesuai aturan yang berlaku
apabila dikemudian hari pernyataan ini tidak benar.
Jakarta,19 januari 2018
Maulana Ardi
iv
ABSTRAK
Pengembangan jaringan komunikasi data antar komputer menjadikan

internet muncul dengan berbagai macam aplikasi. Informasi yang diperoleh dari
internet pun bermacam-macam tergantung dari informasi yang dibutuhkan user
(pemakai). Salah satu informasi yang dapat kita peroleh adalah banyaknya situs-
situs pendidikan mulai dari tingkatan umum (SMP/MTs) sampai dengan tingkat
kampus akademik. Oleh karena itu, dengan berkembangnya kemajuan teknologi
ini, SMK Tunas Grafika Informatika perlu mempromosikan dirinya melalui
sebuah website yang online di internet. Dengan sebuah website yang online di
internet, masyarakat dapat dengan mudah mengakses dan mengetahui segala
sesuatu mengenai SMK Tunas Grafika Informatika dengan cepat dan efisien.
Website ini dilengkapi juga dengan beberapa fasilitas, seperti Mading Sekolah,
Berita, Artikel, Jadwal Kegiatan, Foto Galeri, Konten Download dan lain
sebagainya. Selain itu, tersedia juga Web Forum untuk memberikan kemudahan
kepada anggota untuk melakukan sharing atau berbagi secara online.
Pembangunan web dinamis berbasis database ini dibuat dengan menggunakan
bahasa pemrograman PHP dengan database MySQL, dibantu dengan beberapa
tools pendukung lainnya.
Kata Kunci: Website SMK Tunas Grafika Informatika, Komunitas Online, Web-
Based Application, Media Komunikasi Internet, Web Forum, PHP & MySQL
v
ABSTRACT
The Development of data communications between computer networks

makes the Internet appear with a variety of applications. The information
obtained from the Internet also vary depending on the information needed by the
user. One of the information we can get is the number of sites ranging from the
level of general education (SMP / MTs) up to the level of the campus or academic.
Therefore, the development of these technological advances, SMK Tunas Grafika
Informatika needs to promote themselves online through a website on the internet.
With an online website on the internet, people can easily access and find out
everything about SMK Tunas Grafika Informatika quickly and efficiently. This
website is also equipped with several facilities, such as schools Mading, News,
Articles, Schedule of Events, Photo Gallery, Downloads and other Content. In
addition, there are also Web Forum to provide convenience to the members to
make sharing or share them online. Development of dynamic web-based database
was built using the PHP programming language with MySQL database, with
several other supporting tools.
Keywords: SMK Tunas Grafika Informatika Website, Online Communities, Web-
Based Application, Media Internet Communications, Web Forums, PHP &
MySQL
vi
KATA PENGANTAR
Assalamualaikum Wr. Wb.
Dengan memanjatkan Puji Syukur kehadirat Allah SWT, yang telah
melimpahkan rahmat serta hidayah-Nya kepada Penulis, sehingga dapat
menyelesaikan penulisan Sripsi ini.Skripsi ini disusun untuk memenuhi salah satu
syarat menyelesaikan program sarjana di Jurusan Sistem Informasi. Keberhasilan
dalam penulisan Sripsi ini tidak lepas dari bantuan serta dukungan dari banyak
pihak. Untuk itu pada kesempatan ini Penulis ingin mengucapkan terima kasih yang
sebesar-besarnya kepada :
1. Pembina Yayasan Mahakarya Sukses Mulia, Bapak Putu Putrayasa

2. Ketua Yayasan Mahakarya Sukses Mulia, Arityaningrum Widayati S.sos
3. Bapak Taufik Hidayat, S.Kom, MM selaku Ketua Sekolah Tinggi
manajemen Informatika Mahakarya
4. Bapak Dian Afriady M.Kom, Selaku Ketua program Studi Sistem Informasi
yang telah memberikan arahan dan motivasi dalam membuat laporan ini.
5. Bapak Deni Hermawan, M.Si Selaku Pembimbing Pertama yang memberikan
arahan dan bimbingan.
6. Dosen, Staf dan karyawan dilingkungan Sekolah Tinggi Manajemen
Informatika Mahakarya.
7. Ayanda dan Ibunda yang memberikan dukungan moril serta spritual.
8. Saudara-saudari dan temen-temen saya yang telah membantu baik secara
langsung maupun tidak dalam penulisan Tugas Akhir ini.
Penulis menyadari dalam pembuatan laporan Sripsi ini masih banyak kekeliruan,
kesalahan dan kekurangannya, untuk itu Penulis mengharapkan saran dan kritik
agar dimasa yang akan datang menjadi lebih baik.
vii
Akhir kata Penulis ucapkan terima kasih yang sebesar-besarnya dan
berharap semoga apa yang telah dibuat dapat bermanfaat untuk semua pihak.
Semoga amal baik dan budi luhur yang telah diberikan kepada Penulis
mendapat balasan yang berlipat dari Alloh SWT, dan mudah-mudahan Sripsi yang
Penulis buat dapat bermanfaat khususnya bagi Penulis dan umumnya bagi para
pembaca. Amiin.
Wassalamualaikum Wr. Wb.
Jakarta ,Januari 2018
Penulis,
Maulana Ardi
viii
DAFTAR GAMBAR
Halaman
Gambar 2.1 Simbol Entitas............................................................................. 15
Gambar 2.2 Simbol Relationship.................................................................... 16
Gambar 2.3 Simbol Atribut............................................................................. 16
Gambar 2.4 Simbol Garis................................................................................ 16
Gambar 3.1 Struktur Organisasi SMK Tunas Grafika Informatika ..........................

28
Gambar 3.2 Paradigma Waterfall (Classic Life Cycle) .............................................

34
Gambar 3.3 Alur Kerja Sistem Yang Berjalan Pada Penilaian Siswa.......................
35
Gambar 3.6 Alur Kerja Sistem Yang Berjalan Pada Jadwal Pelajaran........... 36
Gambar 3.5 Use Case Diagram ................................................................................

45
Gambar 4.1 ERD............................................................................................. 46
Gambar 4.2 LRS ........................................................................................................

47
Gambar 4.3 Statechart Diagram Proses Registrasi ...................................................

48
Gambar 4.4 Statechart Diagram Proses Login .........................................................

48
Gambar 4.5 Statechart Diagram Kirim Konten ........................................................

49
Gambar 4.6 Statechart Diagram Edit Konten ...........................................................

49
Gambar 4.7 Statechart Diagram Publish / Unpublish Konten .................................

50
Gambar 4.8 Statechart Diagram Hapus Konten .......................................................

50
Gambar 4.9 Statechart Diagram Kirim Catatan, Thread Forum, Pesan dan
Komentar ...................................................................................................................
51
Gambar 4.10 Statechart Diagram Edit Catatan dan Thread Forum..........................

51
Gambar 4.11 Statechart Diagram Publish / Unpublish Catatan dan Thread
Forum ........................................................................................................................
52
xi
Gambar 4.12 Statechart Diagram Hapus Catatan dan Thread Forum ......................
52
Gambar 4.13 Statechart Diagram Buka atau Tutup Thread Forum..........................

53
Gambar 4.14 Statechart Diagram Hapus Komentar .................................................

53
Gambar 4.15 Statechart Diagram Hapus Pesan ........................................................

54
Gambar 4.16 Activity Diagram Melihat Website ......................................................

55
Gambar 4.17 Activity Diagram Melihat Buku Tamu ................................................

56
Gambar 4.18 Activity Diagram Registrasi ................................................................

56
Gambar 4.19 Activity Diagram Melihat Halaman Konten ........................................

57
Gambar 4.20 Activity Diagram Download Konten ...................................................

57
Gambar 4.21 Activity Diagram Membuka Halaman User ........................................

58
Gambar 4.22 Activity Diagram Membuka Halaman Admin .....................................

59
Gambar 4.23 Activity Diagram Bergabung di Forum ...............................................

60
Gambar 4.24 Sequence Diagram...............................................................................

61
Gambar 4.25 Collaboration Diagram .......................................................................

62
Gambar 4.26 Component Diagram ...........................................................................

63
Gambar 4.27 Deployment Diagram ..........................................................................

64
Gambar 4.28 Package Diagram ................................................................................

64
Gambar 4.29 Struktur Menu Website........................................................................

84
Gambar 4.30 Struktur Program Registrasi ................................................................

85
Gambar 4.31 Struktur Program Login .......................................................................

85
Gambar 4.32 Struktur Program Pesan .......................................................................

85
Gambar 4.33 Struktur Program Komentar ................................................................

86
Gambar 4.34 Struktur Program Status ......................................................................

86
Gambar 4.35 Struktur Program Profil .......................................................................

86
Gambar 4.36 Struktur Program Forum......................................................................

87
xii
Gambar 4.37 Struktur Program Konten ....................................................................
87
Gambar 4.38 Struktur Program Pengaturan ..............................................................

87
Gambar 4.39 Flowchart Sistem.................................................................................

88
Gambar 4.40 Flowchart Program Proses Input Data ................................................

89
Gambar 4.41 Flowchart Program Proses Edit Data ..................................................

89
Gambar 4.42 Flowchart Program Proses Hapus Data ..............................................

90
Gambar 4.43 Desain Antar Muka Halaman Utama (Homepage) .............................

91
Gambar 4.44 Desain Antar Muka Halaman Registrasi .............................................

91
Gambar 4.45 Desain Antar Muka Halaman Beranda ................................................

92
Gambar 4.46 Desain Antar Muka Halaman Buku Tamu ..........................................

92
Gambar 4.47 Desain Antar Muka Halaman Awal Forum .........................................

93
Gambar 4.48 Desain Antar Muka Halaman Threads Forum.....................................

93
Gambar 4.49 Desain Antar Muka Halaman Thread Lengkap ...................................

94
Gambar 4.50 Desain Antar Muka Halaman Awal Berita, Artikel, Cerpen dan
Download ..................................................................................................................
94
Gambar 4.51 Desain Antar Muka Halaman Awal Mading, Kegiatan,
Lowongan Kerja, Catatan dan Galeri ........................................................................

95
Gambar 4.52 Desain Antar Muka Halaman Lengkap Berita, Artikel, Cerpen,
Download, Mading, Kegiatan, Lowongan Kerja dan Catatan ..................................

95
Gambar 4.53 Desain Antar Muka Halaman Lengkap Galeri ....................................

96
Gambar 4.54 Desain Antar Muka Halaman Awal E-Learning .................................

96
Gambar 4.55 Desain Antar Muka Halaman E-Learning Per Kategori......................

97
Gambar 4.56 Desain Antar Muka Halaman Lengkap E-Learning ............................

97
Gambar 4.57 Desain Antar Muka Halaman Pesan ....................................................

98
Gambar 4.58 Desain Antar Muka Halaman Pemberitahuan .....................................

98
xiii
Gambar 4.59 Desain Antar Muka Halaman Pengaturan Password ...........................
99
Gambar 4.60 Desain Antar Muka Halaman Pengaturan Privasi ...............................

99
Gambar 4.61 Desain Antar Muka Halaman Pengaturan Akun .................................

100
Gambar 4.62 Desain Antar Muka Halaman Kirim Pesan .........................................

100
Gambar 4.63 Desain Antar Muka Halaman Kirim Pesan ke Member ......................
101
Gambar 4.64 Desain Antar Muka Halaman Kirim / Edit Berita ...............................
101
Gambar 4.65 Desain Antar Muka Halaman Kirim / Edit Artikel .............................
102
Gambar 4.66 Desain Antar Muka Halaman Kirim / Edit Catatan.............................

102
Gambar 4.67 Desain Antar Muka Halaman Kirim / Edit Pengumuman ...................
103
Gambar 4.68 Desain Antar Muka Halaman Kirim / Edit Cerpen .............................
103
Gambar 4.69 Desain Antar Muka Halaman Kirim / Edit Kegiatan ..........................
104
Gambar 4.70 Desain Antar Muka Halaman Upload File ..........................................

104
Gambar 4.71 Desain Antar Muka Halaman Kirim / Edit Lowongan Kerja ..............
105
Gambar 4.72 Desain Antar Muka Halaman Kirim / Edit Album Foto .....................
105
Gambar 4.73 Desain Antar Muka Halaman Upload Foto ke Album ........................
106
Gambar 4.74 Desain Antar Muka Halaman Kelola Foto Album ..............................
106
Gambar 4.75 Desain Antar Muka Halaman Kirim / Edit E-Learning.......................

107
Gambar 4.76 Desain Antar Muka Halaman Kirim / Edit Thread Forum ..................
107
Gambar 4.77 Desain Antar Muka Halaman Reset Password ....................................

108
Gambar 4.78 Desain Antar Muka Halaman Kirim Kode Aktivasi E-mail ...............
108
Gambar 4.79 Desain Antar Muka Halaman Edit Profil ............................................

109
xiv
DAFTAR TABEL
Halaman
Tabel 3.1 CRUD Matrix User ............................................................................ 44
Tabel 4.1 Struktur Tabel Member ...................................................................... 65
Tabel 4.2 Struktur Tabel Member Email ............................................................ 66
Tabel 4.3 Struktur Tabel Member Level ............................................................ 67
Tabel 4.4 Struktur Tabel Status .......................................................................... 67
Tabel 4.5 Struktur Tabel Status Post .................................................................. 67
Tabel 4.6 Struktur Tabel Status Like .................................................................. 68
Tabel 4.7 Struktur Tabel Forum Header............................................................. 68
Tabel 4.8 Struktur Tabel Forum Kategori .......................................................... 68
Tabel 4.9 Struktur Tabel Forum ......................................................................... 69
Tabel 4.10 Struktur Tabel Forum Post ............................................................... 69
Tabel 4.11 Struktur Tabel Pengumuman ............................................................ 70
Tabel 4.12 Struktur Tabel Pengumuman Post .................................................... 70
Tabel 4.13 Struktur Tabel Artikel ...................................................................... 71
Tabel 4.14 Struktur Tabel Artikel Post............................................................... 71
Tabel 4.15 Struktur Tabel Berita ........................................................................ 72
Tabel 4.16 Struktur Tabel Berita Post ................................................................ 72
Tabel 4.17 Struktur Tabel Cerpen ...................................................................... 73
Tabel 4.18 Struktur Tabel Cerpen Post .............................................................. 73
Tabel 4.19 Struktur Tabel Catatan...................................................................... 74
Tabel 4.20 Struktur Tabel Catatan Post .............................................................. 74
xv
xvi
Tabel 4.21 Struktur Tabel Galeri ........................................................................ 75
Tabel 4.22 Struktur Tabel Galeri Foto ............................................................... 75
Tabel 4.23 Struktur Tabel Galeri Post ................................................................ 76
Tabel 4.24 Struktur Tabel Download ................................................................. 76
Tabel 4.25 Struktur Tabel Download Post ......................................................... 77
Tabel 4.26 Struktur Tabel Konten Kategori ....................................................... 77
Tabel 4.27 Struktur Tabel Kegiatan ................................................................... 78
Tabel 4.28 Struktur Tabel Kegiatan Post ........................................................... 78
Tabel 4.29 Struktur Tabel Loker ........................................................................ 79
Tabel 4.30 Struktur Tabel Loker Post ................................................................ 79
Tabel 4.31 Struktur Tabel Elearning Header ...................................................... 80
Tabel 4.32 Struktur Tabel Elearning Kategori ................................................... 80
Tabel 4.33 Struktur Tabel Elearning .................................................................. 81
Tabel 4.34 Struktur Tabel Elearning Post .......................................................... 81
Tabel 4.35 Struktur Tabel Pesan ........................................................................ 82
Tabel 4.36 Struktur Tabel Pemberitahuan .......................................................... 82
Tabel 4.37 Struktur Tabel Event ........................................................................ 83
Tabel 4.38 Struktur Tabel Buku Tamu ............................................................... 83
Tabel 4.39 Rincian Unit Yang Akan Diuji ......................................................... 111
Tabel 4.40 Daftar Field Yang Akan Diuji .......................................................... 111
Tabel 4.41 Ketentuan Yang Harus Dipenuhi pada Proses Pengujian ................ 112
Tabel 4.42 Hasil Eksperimen Pengujian Perangkat Lunak ................................ 112
xvi
BAB I
PENDAHULUAN
1.1 Latar Belakang
Saat ini adalah zamannya internet dimana batasan waktu dan jarak tidak
berarti lagi bagi media yang satu ini. Kita dapat berkomunikasi dengan siapa saja
dan dimana saja di seluruh dunia ini dengan menggunakan fasilitas e-mail maupun
dengan cara chatting. Mungkin pada saat ini hampir setiap orang sudah memiliki
e-mail untuk dapat bergabung di internet. Namun, bagaimana dengan yang
memiliki website pribadi? Apalagi website yang merupakan hasil karya sendiri,
mungkin tidak semua orang memilikinya. Padahal dengan memiliki website kita
dapat mengenalkan diri kita pada semua orang yang ada di seluruh dunia, baik
mengenai diri kita, perusahaan kita atau segala sesuatu yang ingin kita sampaikan.
Tidak mustahil juga kita dapat memperoleh uang dengan memiliki website
pribadi, asalkan kita dapat mengelolanya dengan baik.
Pengembangan jaringan komunikasi data antar komputer menjadikan
internet muncul dengan berbagai macam aplikasi. internet dengan berbagai
aplikasinya pada dasarnya adalah media yang digunakan untuk mengefesienkan
proses komunikasi.
Untuk dapat memaksimalkan penggunaan internet, harus dapat kita
tentukan dan artikan tentang kebutuhan komunikasi dari seseorang. Salah satu
aplikasinya yaitu World Wide Web (WWW). Di awal perkembangannya World
Wide Web hanya digunakan untuk kalangan akademisi dan riset, namun sekarang
World Wide Web digunakan untuk bisnis dan hiburan.
1
2
Informasi yang diperoleh dari internet pun bermacam-macam tergantung
dari informasi yang dibutuhkan user (pemakai). Salah satu informasi yang dapat
kita peroleh adalah banyaknya situs-situs pendidikan mulai dari tingkatan umum
(SMP/MTs) sampai dengan tingkat kampus akademik. Oleh karena itu, dengan
berkembangnya kemajuan teknologi ini, SMK Tunas Grafika Informatika perlu
mempromosikan dirinya melalui sebuah website yang online di internet. Dengan
sebuah website, masyarakat dapat dengan mudah mengakses dan mengetahui
segala sesuatu mengenai SMK Tunas Grafika Informatika dengan cepat tanpa
memerlukan waktu yang banyak. Peranan website ini juga tidak terlepas dari
penggunaan peralatan yang mampu mengatasi kelemahan-kelemahan yang
mengandalkan tenaga manusia. Informasi tentang sekolah yang dapat diakses oleh
semua orang melalui internet memberikan ide bagi penulis untuk membuat suatu
website sekolah yang bisa memberikan informasi bagi para pengunjungnya.
Berdasarkan latar belakang masalah tersebut, penulis memandang penting
mengangkat kasus di atas ke dalam Skripsi ini dengan mengambil judul: Sistem
Informasi Pendidikan Dan Pembelajaran Online SMK Tunas Grafika
Informatika Menggunakan PHP.
1.2 Perumusan Masalah
Berdasarkan Latar Belakang Masalah di atas, maka dapat diidentifikasikan
masalah sebagai berikut:
1. SMK Tunas Grafika Informatika belum memiliki sebuah website resmi
sebagai media promosi, serta untuk saling berhubungan dan berbagi
informasi, khususnya bagi guru, siswa dan alumni.

3
2. SMK Tunas Grafika Informatika memerlukan sebuah media alternatif
dalam penyebarluasan informasi ke publik atau masyarakat luas, agar lebih
memudahkan dalam mendapatkan informasi tersebut bagi pihak-pihak
yang membutuhkan.
3. Dibutuhkan sarana online sebagai tempat untuk berbagi (sharing) yang
dapat diakses kapan pun dan dimana pun, baik oleh siswa maupun pihak
lain yang membutuhkan.
1.3 Ruang Lingkup Masalah
Batasan permasalahan pada penulisan Skripsi ini adalah:
1. Dibatasi pada proses publikasi berita, artikel, jadwal kegiatan, foto galeri
dan forum online dan tidak membahas tentang Sistem Akademik Sekolah.
2. Website ini dibangun dengan menggunakan PHP sebagai Server Side
Programming dan MySQL sebagai database servernya.
3. Memungkinkan user yang telah terdaftar untuk mengupload foto, meng-
update status, mengirim pesan, memberikan opini atau komentar, serta
menyunting data pribadi.
1.4 Tujuan Penulisan
Tujuan yang hendak dicapai dalam penelitian dan penyusunan Skripsi ini
antara lain:
1. Membuat sebuah aplikasi (website) untuk mempromosikan dan
memperkenalkan SMK Tunas Grafika Informatika ke publik, agar lebih

4
memudahkan kepada masyarakat untuk mengetahui tentang SMK Tunas
Grafika Informatika.
2. Memberikan alternatif web-based application sebagai media untuk
berkomunikasi, selain melalui email dan chatting, yang memungkinkan
digunakan sebagai tempat untuk memperkenalkan atau mengekspresikan
diri, khususnya antara siswa dan alumni SMK Tunas Grafika Informatika,
sehingga bisa lebih mengenal satu dengan yang lain, bisa terwujud rasa
kebersamaan dan kekompakkan, meskipun berada dalam wilayah
geografis yang berbeda.
3. Sebagai sarana online untuk memudahkan dalam proses penyebarluasan
informasi ke publik atau masyarakat luas, khususnya yang berhubungan
dengan pendidikan.
1.5 Metodelogi Penelitian
Pada penelitian ini penulis menggunakan metode deskriptif, yaitu metode
yang menggambarkan suatu keadaan atau permasalahan yang sedang terjadi
berdasarkan fakta dan data-data yang diperoleh dan dikumpulkan pada waktu
melaksanakan penelitian.
Adapun metoda pengumpulan data yang dilakukan dalam penelitian ini
adalah:
1. Observasi
Pengumpulan data dengan dengan melakukan pengamatan secara langsung
terhadap objek penelitian, dengan mencatat hal-hal penting yang

5
berhubungan dengan judul Skripsi, sehingga diperoleh data yang lengkap
dan akurat.
2. Wawancara
Pengumpulan data dengan cara melakukan komunikasi dan wawancara
secara langsung dengan pihak guru yaitu kepada Bpk. Deni Hermawan dan
siswa SMK Tunas Grafika Informatika yaitu Ade Rizkian.
3. Studi Pustaka
Pengumpulan data dengan menggunakan atau mengumpulkan sumber-
sumber tertulis, dengan cara membaca, mempelajari dan mencatat hal-hal
penting yang berhubungan dengan masalah yang sedang dibahas guna
memperoleh gambaran secara teoritis yang dapat menunjang pada
penyusunan Skripsi.
1.6 Sistematika Penulisan
Uraian singkat mengenai struktur penulisan pada masing-masing bab
adalah sebagai berikut:
BAB I PENDAHULUAN
Membahas Latar Belakang Masalah, Perumusan Masalah, Tujuan
Penelitian, Ruang lingkup Masalah, Metodelogi Penelitian, serta
Sistematika Penulisan.
BAB II LANDASAN TEORI
Memaparkan teori-teori yang didapat dari sumber-sumber yang
relevan untuk digunakan sebagai panduan dalam penelitian serta
penyusunan Skripsi.
6
BAB III ANALISIS SISTEM
Berisi tentang analisis dan perancangan sistem serta komponen-
komponen pemodelan sistem yang digunakan, yaitu Perancangan
Sistem dengan UML, Perancangan Data, Perancangan Arsitektural,
Perancangan Prosedural dan Perancangan Antarmuka.
BAB IV PERANCANGAN SISTEM
Menjelaskan mengenai kebutuhan hardware, software serta mengenai
arsitektur dan proses publikasi web, yaitu berupa penentuan nama
domain dan kapasitas hosting.
BAB V PENUTUP
Mengemukakan kesimpulan yang diambil dari hasil penelitian dan
penulisan Skripsi ini, serta saran-saran untuk pengembangan
selanjutnya, agar dapat dilakukan perbaikan-perbaikan di masa yang
akan datang.
7
BAB II
LANDASAN TEORI
2.1 Pengertian Sistem
Sistem adalah sekelompok komponen dan elemen yang digabungkan
menjadi satu untuk mencapai tujuan tertentu. Sistem berasal dari bahasa Latin
(systma) dan bahasa Yunani (sustma) adalah suatu kesatuan yang terdiri
komponen atau elemen yang dihubungkan bersama untuk memudahkan aliran
informasi, materi atau energi untuk mencapai suatu tujuan. Istilah ini sering
dipergunakan untuk menggambarkan suatu set entitas yang berinteraksi, di mana
suatu model matematika seringkali bisa dibuat.
Sistem juga merupakan kesatuan bagian-bagian yang saling berhubungan
yang berada dalam suatu wilayah serta memiliki item-item penggerak, contoh
umum misalnya seperti negara. Negara merupakan suatu kumpulan dari beberapa
elemen kesatuan lain seperti provinsi yang saling berhubungan sehingga
membentuk suatu negara dimana yang berperan sebagai penggeraknya yaitu
rakyat yang berada dinegara tersebut.
Ada banyak pendapat tentang pengertian dan definisi sistem yang dijelaskan
oleh beberapa ahli. Berikut pengertian dan definisi sistem menurut beberapa ahli:
Jogianto (2005:2), Sistem adalah kumpulan dari elemen-elemen yang
berinteraksi untuk mencapai suatu tujuan tertentu. Sistem ini menggambarkan
suatu kejadian-kejadian dan kesatuan yang nyata, seperti tempat, benda dan
orang-orang yang betul-betul ada dan terjadi.
7
8
Indrajit (2001:2), Sistem adalah kumpulan-kumpulan dari komponen-
komponen yang memiliki unsur keterkaitan antara satu dengan lainnya.
Lani Sidharta (1995:9), Sistem adalah himpunan dari bagian-bagian yang
saling berhubungan, yang secara bersama mencapai tujuan-tujuan yang sama.
Murdick, R. G (1991:27), Sistem adalah seperangkat elemen yang
membentuk kumpulan atau prosedur-prosedur atau bagan-bagan pengolahan yang
mencari suatu tujuan bagian atau tujuan bersama dengan mengoperasikan data
dan/atau barang pada waktu rujukan tertentu untuk menghasilkan informasi
dan/atau energi dan/atau barang.
Davis, G. B (1991:45), Sistem adalah kumpulan dari elemen-elemen yang
beroperai bersama-sama untuk menyelesaikan suatu sasaran.
2.2 Pengertian Informasi
Informasi adalah pesan (ucapan atau ekspresi) atau kumpulan pesan yang
terdiri dari order sekuens dari simbol, atau makna yang dapat ditafsirkan dari
pesan atau kumpulan pesan. Informasi dapat direkam atau ditransmisikan. Hal ini
dapat dicatat sebagai tanda-tanda, atau sebagai sinyal berdasarkan gelombang.
Informasi adalah jenis acara yang mempengaruhi suatu negara dari sistem
dinamis. Para konsep memiliki banyak arti lain dalam konteks yang berbeda.[1]
Informasi bisa di katakan sebagai pengetahuan yang didapatkan dari
pembelajaran, pengalaman, atau instruksi [2]. Namun, istilah ini memiliki banyak
arti bergantung pada konteksnya, dan secara umum berhubungan erat dengan
konsep seperti arti, pengetahuan, negentropy, Persepsi, Stimulus, komunikasi,
kebenaran, representasi, dan rangsangan mental.

9
Dalam beberapa hal pengetahuan tentang peristiwa-peristiwa tertentu atau situasi
yang telah dikumpulkan atau diterima melalui proses komunikasi, pengumpulan
intelejen, ataupun didapatkan dari berita juga dinamakan informasi. Informasi
yang berupa koleksi data dan fakta seringkali dinamakan informasi statistik.
Dalam bidang ilmu komputer, informasi adalah data yang disimpan, diproses, atau
ditransmisikan. Penelitian ini memfokuskan pada definisi informasi sebagai
pengetahuan yang didapatkan dari pembelajaran, pengalaman, atau instruksi dan
alirannya.
Informasi adalah data yang telah diberi makna melalui konteks. Sebagai contoh,
dokumen berbentuk spreadsheet (semisal dari Microsoft Excel) seringkali
digunakan untuk membuat informasi dari data yang ada di dalamnya. Laporan
laba rugi dan neraca merupakan bentuk informasi, sementara angka-angka di
dalamnya merupakan data yang telah diberi konteks sehingga menjadi punya
makna dan manfaat.
2.3 Sistem Informasi
Sistem Informasi (SI) adalah kombinasi dari teknologi informasi dan aktivitas
orang yang menggunakan teknologi itu untuk mendukung operasi dan
manajemen. Dalam arti yang sangat luas, istilah sistem informasi yang sering
digunakan merujuk kepada interaksi antara orang, proses algoritmik, data, dan
teknologi. Dalam pengertian ini, istilah ini digunakan untuk merujuk tidak hanya
pada penggunaan organisasi teknologi informasi dan komunikasi (TIK), tetapi
juga untuk cara di mana orang berinteraksi dengan teknologi ini dalam
mendukung proses bisnis.

10
Ada yang membuat perbedaan yang jelas antara sistem informasi, dan komputer
sistem TIK, dan proses bisnis. Sistem informasi yang berbeda dari teknologi
informasi dalam sistem informasi biasanya terlihat seperti memiliki komponen
TIK. Hal ini terutama berkaitan dengan tujuan pemanfaatan teknologi informasi.
Sistem informasi juga berbeda dari proses bisnis. Sistem informasi membantu
untuk mengontrol kinerja proses bisnis.
Alter berpendapat untuk sistem informasi sebagai tipe khusus dari sistem kerja.
Sistem kerja adalah suatu sistem di mana manusia dan/atau mesin melakukan
pekerjaan dengan menggunakan sumber daya untuk memproduksi produk tertentu
dan/atau jasa bagi pelanggan. Sistem informasi adalah suatu sistem kerja yang
kegiatannya ditujukan untuk pengolahan (menangkap, transmisi, menyimpan,
mengambil, memanipulasi dan menampilkan) informasi.
Dengan demikian, sistem informasi antar-berhubungan dengan sistem data di satu
sisi dan sistem aktivitas di sisi lain. Sistem informasi adalah suatu bentuk
komunikasi sistem di mana data yang mewakili dan diproses sebagai bentuk dari
memori sosial. Sistem informasi juga dapat dianggap sebagai bahasa semi formal
yang mendukung manusia dalam pengambilan keputusan dan tindakan.
Sistem informasi merupakan fokus utama dari studi untuk disiplin sistem
informasi dan organisasi informatika.
Sistem informasi adalah gabungan yang terorganisasi dari manusia, perangkat
lunak, perangkat keras, jaringan komunikasi dan sumber data dalam
mengumpulkan, mengubah, dan menyebarkan informasi dalam organisasi.
Sistem informasi adalah suatu sistem di dalam suatu organisasi yang
mempertemukan kebutuhan pengolahan transaksi harian, mendukung operasi,

11
bersifat manajerial dan kegiatan strategi dari suatu organisasi dan menyediakan
pihak luar tertentu dengan laporan-laporan yang diperlukan.
Sistem informasi adalah kumpulandari sub-sub sistem baik phisik maupun non
phisik yang saling berhubungan satu sama lain dan bekerja sama secara
harmonis untuk mencapai satu tujuan yaitu mengolah data menjadi informasi yang
berguna.
2.4 Pengertian Web Browser dan HTML
Web browser adalah program untuk menampilkan halaman yang
berbentuk kode HTML. Semua halaman web ditulis dengan bahasa HTML
(HyperText Markup Language). Walaupun beberapa file mempunyai ekstensi
yang berbeda (misalnya: .html, .php, .asp, .aspx, .jsp), output file-file tersebut
tetap HTML. HTML adalah media yang selalu dikirimkan ke web browser, baik
halaman itu berupa halaman statis, maupun halaman dinamis yang berisi script,
seperti PHP, ASP atau JSP.
HTML adalah file teks murni yang dapat dibuat dengan editor teks
sembarang. Dikatakan Markup Language karena HTML berfungsi untuk
memformat file teks biasa untuk bisa ditampilkan pada web browser dengan
bantuan tanda-tanda yang sudah ditentukan (tag HTML).
2.5 Pengertian Website
Website atau situs juga dapat diartikan sebagai kumpulan halaman yang
menampilkan informasi data teks, data gambar diam atau gerak, data animasi,
suara, video dan atau gabungan dari semuanya, baik yang bersifat statis maupun
12
dinamis yang membentuk satu rangkaian bangunan yang saling terkait dimana
masing-masing dihubungkan dengan jaringan-jaringan halaman (hyperlink).
Bersifat statis apabila isi informasi website tetap, jarang berubah, dan isi
informasinya searah hanya dari pemilik website. Bersifat dinamis apabila isi
informasi website selalu berubah-ubah, dan isi informasinya interaktif dua arah
berasal dari pemilik serta pengguna website. Contoh website statis adalah berisi
profil perusahaan, sedangkan website dinamis adalah seperti Facebook, Multiply,
Twitter dan lain-lain. Dalam sisi pengembangannya, website statis hanya bisa
diupdate oleh pemiliknya saja, sedangkan website dinamis bisa diupdate oleh
pengguna maupun pemilik.
2.6 Web Forum
Web Forum merupakan fasilitas yang tersedia di internet, dan
penggunanya dapat berdiskusi. Forum berbasis internet ini sudah dikenal sejak
tahun 1995, serta fungsinya mirip bahkan lebih baik dari papan buletin dan milis
internet yang sudah ada sejak tahun 1980-an. Teknologi, permainan komputer,
berita-berita hangat dan politik merupakan tema paling populer yang menjadi
pokok bahasan forum internet, tetapi masih banyak lagi topik-topik lainnya.
2.7 Pengenalan PHP
PHP secara resmi merupakan kependekan dari PHP:HyperText
Preprocessor, yang merupakan bahasa script server-side yang bersifat open
source. Bahasa PHP menyatu dengan script HTML yang sepenuhnya dijalankan
pada server.
13
PHP:HyperText Preprocessor adalah bahasa interpreter yang banyak

digunakan dalam internet dan intranet, sebagai program yang diintegrasi
ke dalam web server seperti Apache dan Microsoft Internet Information
Service (IIS). Karena PHP ini dieksekusi di server, maka PHP disebut
sebagai Server Side Scripting Language. (Anhar, 2010:7)
Beberapa hal yang menjadi keunggulan PHP, antara lain:
1. Mempunyai dukungan kepada banyak database.
2. Fleksibilitas yang tinggi dan memiliki banyak fungsi Built-in.
3. Mendukung pemrograman berorientasi objek (OOP).
4. Berjalan di banyak platform seperti Windows, LINUX dan MacOS.
5. PHP adalah produk open source yang gratis (free), sehingga dapat
didistribusikan tanpa dikenakan biaya.
2.8 Pengenalan Basis Data MySQL
MySQL adalah Multiuser Database yang menggunakan bahasa Structured
Query Language (SQL). MySQL merupakan software Database Management
System (DBMS) yang sangat populer di kalangan pemrogram web. MySQL
pertama dibuat oleh Michael Monty Windenius dan kawan-kawannya pada tahun
1994.
MySQL memiliki beberapa keistimewaan, antara lain:
1. Portabilitas. MySQL dapat berjalan stabil pada berbagai sistem operasi
seperti Windows, Linux, UNIX, MacOS dan masih banyak lagi.
2. Perangkat Lunak Sumber Terbuka (Open Source). MySQL didistribusikan
sebagai perangkat lunak sumber terbuka, sehingga dapat digunakan secara
gratis.
14
3. Multi-user. MySQL dapat digunakan oleh beberapa pengguna dalam waktu
yang bersamaan tanpa mengalami masalah atau konflik.
4. Tipe Data. MySQL memiliki ragam tipe data yang sangat banyak, seperti
signed/unsigned integer, float, double, char, vacrchar, text, date,
timestamp dan lain-lain.
5. Keamanan. MySQL memiliki beberapa lapisan keamanan seperti level
user, nama host dan izin akses user dengan sistem perizinan yang
mendetail serta sandi yang terenkripsi.
6. Skalabilitas dan Pembatasan. MySQL mampu menangani basis data dalam
skala besar, dengan jumlah rekaman (records) lebih dari 50 juta dan 60
ribu tabel serta 5 milyar baris. Selain itu batas indeks yang dapat
ditampung mencapai 32 indeks pada tiap tabelnya.
2.9 Unified Modeling Language (UML)
Unified Modeling Language (UML) adalah sebuah bahasa yang telah
menjadi standar dalam industri visualisasi, merancang dan mendokumentasikan
sistem piranti lunak. UML dapat digunakan dalam pembuatan model untuk semua
jenis aplikasi piranti lunak, dimana aplikasi tersebut dapat berjalan pada piranti
keras, sistem operasi dan jaringan apapun, serta ditulis dalam bahasa
pemrograman apapun. Model yang dimaksud adalah proses merancang piranti
lunak sebelum melakukan pengkodean (coding).
Unified Modelling Language (UML) adalah sistem notasi yang sudah

dibakukan di dunia pengembangan sistem, hasil kerjasama dari Grady
Booch, James Rumbaugh dan Ivar Jacobson. UML yang terdiri dari
serangkaian diagram yang memungkinkan bagi analis sistem untuk
membuat cetak biru (blue print) sistem yang komprehensif kepada klien,
15
programmer dan tiap orang yang terlibat dalam proses pengembangan.

(Munawar, 2005:25)
UML terbagi menjadi beberapa jenis diagram yang masing-masing
memiliki aturan-aturan tertentu dalam penyusunannya. Diagram-diagram tersebut
tersusun atas sejumlah elemen grafis yang saling membentuk satu kesatuan dalam
pemodelan software. Masing-masing diagram UML mempersatukan berbagai
sudut pandang terhadap sistem dan mendefinisikan apa yang dikerjakan oleh
sistem bukan bagaimana cara sistem bekerja.
Seperti bahasa-bahasa lainnya, UML mendefinisikan notasi dan sintaks /
semantik. Setiap notasi memiliki makna tertentu. Sintaks UML mendefinisikan
bagaimana notasi-notasi tersebut dapat dikombinasikan. Notasi UML diturunkan
dari tiga notasi yang telah ada sebelumnya, yaitu: Grady Booch OOD (Object
Oriented Design), James Rumbaugh OMT (Object Modeling Technique) dan Ivar
Jacobson OOSE (Object Oriented Software Engineering).
2.10 Entity Relationship Diagram (ERD)
Entity Relationship Diagram (ERD) kumpulan entitas yang dideskripsikan
dari data dan hubungan data tersebut dalam suatu diagram(McLeod, Jr., 2004).
Simbol-simbol dari ERD
1. Entitas
Entitas adalah objek yang penting bagi perusahaan yang harus disimpan
dalam sebuah database. Simbol entitas dapat dilihat pada gambar 2.1.
Gambar 2.1. Simbol Entitas

16
2. Relationship Relationship menggambarkan hubungan antar entitas dalam
seuah ERD. Simbol dari relationship dapat dilihat pada gambar 2.2
Gambar 2.2. Simbol Relationship
3. Atribut Atribut merupakan karakteristik dari suatu entitas. Simbol atribut
dapat dilihat pada gambar 2.3.
Gambar 2.3. Simbol Atribut
4. Garis Penghubung antara himpunan relasi dengan himpunan entitas dan
himpunan entitas dengan atribut. Simbul garis dapat dilihat pada gambar
2.4.
Gambar 2.4. Simbol Garis
Jenis-jenis dari relasi pada ERD :
a. One to one
Hubungan antara entitas 1 mempunyai hubungan 1 pada entitas 2.
b. One to many
Suatu hubungan entitas dimana item pada entitas 1 boleh mempunyai
hubungan dengan dua atau lebih item pada entitas 2.

17
c. Many to many
Suatu hubungan entitas dimana item pada entitas 1 dapat mempunyai
hubungan dengan lebih dari satu item pada entitas 2, demikian juga dengan
item pada entitas 2 dapat mempunyai hubungan lebih dari satu item pada
entitas 1.
2.11 Daftar Simbol
1. Simbol Use Case Diagram
Simbol Notasi Keterangan

Merepresentasikan orang, peran, atau
Actor sistem lain yang berinteraksi dengan
sistem
<<include>> Menggambarkan kebutuhan use case

Include
terhadap use case lain
Digunakan jika sebuah use case (base
<<extend>> use case) meliputi perilaku use case lain
Extend
(extending use case) karena kondisi
tertentu
Menggambarkan hubungan antara objek
Association
satu dengan objek lainnya
Menggambarkan fungsionalitas dari

Use Case
suatu sistem
System
System Menampilkan abstraksi suatu sistem
Boundary secara keseluruhan
18
2. Simbol Class Diagram
Himpunan dari objek-objek yang terdiri

Class
berbagai atribut dan operasi

Association
Aggregation satu dengan objek lainnya dengan relasi
yang lebih spesifik
3. Simbol StateChart Diagram

Nilai atribut dan nilai link pada suatu
State waktu tertentu, yang dimiliki oleh suatu
objek
Initial State Menunjukkan titik awal dari state
Final State Menunjukkan titik akhir dari state
Decission Menunjukkan state yang harus dipilih
Menunjukkan aliran yang

Transition menghubungkan dari suatu state ke
state yang lain
4. Simbol Activity Diagram
Activity Menunjukkan aktivitas yang dilakukan
Initial State Menunjukkan titik awal dari aktivitas

19
Final State Menunjukkan titik akhir dari aktivitas
Control Flow Menunjukkan aliran dari aktivitas
Menunjukkan aktivitas yang harus

Decission
dipilih
Signal Send Menunjukkan pengiriman data / pesan
Signal Receipt Menunjukkan penerimaan data / pesan
5. Simbol Sequence Diagram
Entitas dari suatu objek yang saling

Object Life Line
berinteraksi
Menggambarkan komunikasi antar

Message objek yang memuat informasi tentang
aktivitas yang terjadi

objek yang memuat informasi tentang
Message Return
hasil (result) dari aktivitas yang telah
dilakukan
objek yang memuat informasi tentang
Message Call
aktivitas atau objek yang dapat
dipanggil secara berulang-ulang
20
6. Simbol Collaboration Diagram
Object Menggambarkan komunikasi antara

Boundary aktor dan komponen internal sistem
Menggambarkan entitas dan model

informasi yang ditangani oleh sistem,
Entity
atau perilaku yang terkait dengan
informasi tersebut
Association
Message Menggambarkan aktivitas yang terjadi
7. Simbol Component Diagram
Menggambarkan abstraksi komponen

Component
fisik dari suatu sistem
Menggambarkan hubungan antar

Interface
komponen pada suatu sistem
8. Simbol Deployment Diagram
Menggambarkan suatu aplikasi yang

Node
ada pada suatu sistem
Menggambarkan hubungan antar node

Communication
pada suatu sistem
21
9. Simbol Package Diagram
Menggambarkan pengelompokan dari

Package
class-class
Menggambarkan hubungan antar

Dependency
package yang ada pada suatu sistem
10. Simbol Bagan Alir Program (Flowchart)
Untuk menyatakan mulai (start)

Terminator
ataupun berhenti (stop)
Menunjukkan pengolahan yang

Process
dilakukan oleh komputer
Berfungsi untuk mewakili proses input /

Data
output data
Manual Menunjukkan pengolahan yang tidak

Operation dilakukan oleh komputer
Menunjukkan kondisi yang akan

Decission menghasilkan beberapa kemungkinan
jawaban / aksi
Menyatakan input berasal dari dokumen
Document dalam bentuk kertas atau output dicetak
ke kertas
Menunjukkan lokasi penyimpanan data

Database
(database)
Untuk menunjukkan ke arah mana data

Data Flow atau proses program selanjutnya akan
berjalan
22
2.12 Tinjauan Studi
Beberapa penelitian mengenai pembuatan website sekolah telah dilakukan
oleh banyak mahasiswa dari berbagai perguruan tinggi dengan masalah dan
kerumitan yang berbeda-beda. Bebereapa penelitian pembuatan website sekolah
yang penulis jadikan untuk tinjauan studi adalah
2.12.1 Menurut Yezei Surya Winanti
Dengan judul skripsi Rancangan Bangun Sistem Informasi Sekolah
Berbasis Web Studi Kasus Smk Industri Madiun yang di teliti oleh Yezei Surya
Winanti dari Sekolah Tinggi Teknologi Dharma Iswara Madiun
1. Sistem Informasi SMK Industri Madiun adalah sebuah sistem informasi
berbasis web yang dapat memudahkan users dalam mengelola sistem ini
karena website dirancang dengan bahasa yang familiar dan alur proses
sistemnya jelas sehingga memudahkan users dalam mengelola isi
webseite.
2. Memudahkan Pengguna website dalam pencarian informasi mengenai
SMK Industri Madiun, pengguna juga dapat dengan leluasa menyampikan
kritik dan saran yang membangun bagi sekolah. Dsa
3. Membangun Image sekolah, karena dengan website ini profil sekolah
dapat dikenal oleh publik dan reputasi sekolahpun akan meningkat.
4. Sistem Informasi SMK Industri Madiun ini masih jauh dari sempurna.
Saran penulis untuk meningkatkan penggunaan dan pemanfaatan sistem
ini dalam pengembangannya dapat menambahkan button search secara

23
lokal agar pengguna yang ingin mencari informasi khusus dalam website
ini lebih cepat tanpa harus membaca seluruh informasi yang ada dalam
website SMK Industri Madiun ini. .
2.12.2 Menurut Yoga Pujantok
Dengan judul skripsi Pembuatan Website Sma Negeri 1 Pracimantoro
Menggunakan Php & Mysql yang di teliti oleh Yoga Pujantok dari Universitas
Sebelas Maret
Website sekolah yang dibuat sebagai bahan pertimbangan dalam
penyampaian informasi dan profil SMA Negeri 1 Pracimantoro agar lebih dikenal
dan diakses dengan mudah oleh siswa, guru, dan pihak luar sekolah. Website ini
masih kurang interaktif karena masih berupa website yang hanya menampilkan
profil sekolah sehingga alumni atau pihak sekolah bisa mengembangkannya.
Sistem website ini dibuat dengan program PHP dan database MySQL. Dapat
disimpulkan bahwa sistem ini sudah siap dikembangkan.
Metode yang di gunakan adalah
1. Observasi
2. Wawancara ( Interview )
3. Studi pustaka
2.12.3 Menurut Dian Mulyani
Dengan judul skripsi Sistem Informasi Akademik Berbasis Web (Studi
Kasus Smk Informatika Bina Generasi yang di teliti oleh Dian Mulyani dari
Universitas Gunadarma
24
Sistem informasi berbasis web atau internet pada saat ini sudah menjadi
sarana yang efektif untuk mengolah data. Selain itu menyediakan berbagai
fasilitas yang memudahkan pemakai dalam mencari berbagai macam informasi
yang dibutuhkan. Salah satu bagian terpenting dalam perkembangan teknologi
informasi ini adalah dalam bidang pendidikan. Sistem informasi akademik
berbasis web pada SMK Informatika Bina Generasi, khususnya dalam hal
pengolahan data siswa, mulai dari memasukkan data (input), mengubah data dan
menampilkan data (output). Sistem informasi ini memiliki fasilitas pelaporan nilai
dan absensi siswa dari pengajar kepada bagian administrasi secara langsung.
Dengan model metode penelitian waterfall penulis melakukan ;
1. Pengumpulan Data
2. Tempat dan Waktu
3. Pembuatan Perangkat Lunak (Software)
2.12.4 Menurut Dicky Permana Surya
Dengan judul Skripsi Pembuatan Website Informasi Pendidikan Dan
Pembelajaran Online Sma Negeri 3 Boyolali dari Sekolah Tinggi Teknologi
Dharma Iswara Madiun.
SMA Negeri 3 Boyolali sebagai salah satu sekolah yang ingin
mewujudkan pendidikan yang semakin bermutu sangat membutuhkan sarana yang
dapat mendukung tercapainya harapan itu. Salah satu cara untuk memecahkan
masalah tersebut adalah dibuatnya website sekolah yang dapat memuat informasi
yang ada di SMA Negeri 3 Boyolali, dan juga sarana pembelajaran online.
Metode penelitian yang digunakan adalah Wawancara dengan Narasumber,

25
Melakukan Observasi, Dokumentasi, Perancangan Sistem,Implementasi dan
Evaluasi
Dari Paparan tersebut, kekurangan yang terdapat dalam skripsi ini adalah
1. Perlu adanya pengembangan dari tampilan website dan layanan-layananya agar
website terlihat lebih menarik.
2. Sistem pemebelajaran online hanya memuat layanan upload tugas dan forum
saja. Oleh karena itu perlu pengembangan layanan seperti sitem penilaian agar
layanan pembelajaran online dapat dilakukan secara lebih efektif
2.12.5 Menurut Marizka Arbani
Dengan judul Skripsi Pengembangan Sistem Informasi Sekolah Berbasis
Web dari Universitas Islam Negeri Syarif Hidayatullah Jakarta.
Sekolah merupakan suatu bentuk lembaga pendidikan yang didalamnya
berlangsung kegiatan belajar mengajar, serta berbagai kegiatan lain yang
mendukung terlaksananya proses belajar mengajar tersebut. Kegiatan belajar
mengajar (KBM) tersebut terkait dengan beberapa elemen seperti siswa, guru dan
materi pelajaran yang tergabung di dalam suatu kurikulum sekolah. KBM juga
didukung oleh beberapa proses seperti proses pembayaran uang sekolah dan
pengelolaannya, serta proses pengelolaan perpustakaan sebagai media penyedia
buku-buku sekolah.Penelitian ini meneliti pengembangan sistem informasi
sekolah di MI An-Nizhomiyah yang dapat mengintegrasikan keseluruhan
prosesproses yang ada di sekolah dengan data yang terkait. Pengintegrasian
tersebut dilakukan untuk meningkatkan efisisensi dalam hal sumber daya yang
digunakan oleh pihak sekolah serta menyediakan media penyimpanan data yang
26
terstruktur. Sistem ini dikembangkan dengan bahasa pemrograman PHP dan
MySQL sebagai database server dan tools menggunakan Diagram Alir, DFD,
ERD dan STD. Pengembangan sistem informasi sekolah menggunakan
metodologi pengembangan Waterfall. Sistem ini diharapkan dapat mempermudah
dan mempercepat proses pengumpulan, pengolahan, dan pengelolaan data atau
informasi, serta mendukung pelaksanaan belajar mengajar di sekolah. Sistem ini
diharapkan dapat dikembangkan dengan penambahan modul materi pelajaran dan
dilakukannya maintenence secara berkala.
2.12.6 Persamaan Dan Perbedaan Dari Penelitian Sejenis
Persamaan dalam penelitian penulis dengan kelima penelitian sebelumnya
adalah dalam hal tujuan yaitu tujuan dari dari pembuatan website adalah sebagai
sarana informasi, menghasilkan media promosi yang efektif dan efisien, mudah
dalam penyampaian, hemat dari segi biaya dan tidak terbatas jaral dan waktu.
Selain itu persamaan dalam hal penggunaan bahasa pemograman yaitu
menggunakan bahasa pemograman PHP dan MySQL sebagai pengolah database.
Perbedaan dalam penelitian penulis dengan Agustina Dwi Widyaningsih adalah
dalam aplikasi yaitu menggunakan PHP dan belum lengkap penyajian menu
seperti login guru, komunitas alumni dan data siswa, penulis Andri Hartono
mengunakan Framework Codeigniter serta sudah tersedia menu konsultasi antara
wali murid dan guru, serta absensi harian yang bisa dilihat semua user, sedangkan
penelitian Yulius Kristianto mengunakan CMS yang berupa Joomla (Content
Management System) yang lebih mudah pengoperasian karena template sudah
tersedia tetapi lebih sulit dalam pengembangan lebih lanjut.

BAB III
ANALISA SISTEM
3.1 Tinjauan Umum Perusahaan
3.1.1 Profil SMK Tunas Grafika Informatika
Nama Sekolah : SMK Tunas Grafika Informatika
Alamat Sekolah : Jl. H.Ilyas No. 6 Petukangan utara,
Pesanggrahan, Jakarta Selatan.
Tahun Berdiri : 2010
Tahun Beroperasi : 2010
Kepemilikan Tanah
Tanah Milik : Swasta
Luas Tanah : 1500 M2
Status Bangunan Milik : Swasta
Luas Seluruh Bangunan : 500 M2 X 5Lt
27
28
3.1.2 Visi dan Misi

1. Visi
Mewujudkan masyarakat sekolah berjiwa pancasila dan Bertakwa kepada
Tuhan Yang Maha Esa Serta saing Global
2. Misi
Trendi
Menyesuaikan perkembangan Zaman selaras dengan Watak pembangunan
nasional
Global
Memiliki wawasan yang Universal
Intelektual
Membuka wawasan dengan mengedepankan Ilmu pengetahuan dan
Ketaatan kepada Tuhan Yang Maha Esa
3.1.3 Struktur Organisasi
Struktur Organisasi SMK Tunas Grafika Informatika adalah sebagai
berikut:
Gambar 3.1 Struktur Organisasi SMK Tunas Grafika Informatika

(Sumber: SMK Tunas Grafika Informatika)
29
3.1.4 Tugas Dan Wewenang
Tugas dan wewenang yang dapat di jabarkan dari struktur organisasi di atas
adalah sebagai berikut:
1. Kepala Sekolah
1.1. Tanggung jawab

Bertanggung jawab terhadap terselenggaranya semua
komponen dan sistem sekolah yang meliputi : manajemen,
penerapan kurikulum, kesiswaan, ketenagaan, sarana
prasarana dan lingkungan
1.2. Wewenang
1.2.1. Menentukan dan menetapkan Renstra, RKS, dan
RKAS
1.2.2. Menentukan kebijakan dalam bidang manajemen,
penerapan kurikulum, kesiswaan, ketenagaan, sarana
prasarana dan lingkungan
1.3. Tugas
1.3.1. Menyusun Renstra, RKS, dan RKAS
1.3.2. Melakukan pembinaan dan pengembangan guru dan

pegawai
1.3.3. Membina penyelenggaraan administrasi sekolah
1.3.4. Membina penyelenggaraan dan pengembangan SMM
1.3.5. Menyusun laporan kegiatan
2. Wakil Kepala Sekolah
2.1. Tanggung jawab

Membantu kepala sekolah dalam pelaksanaan terhadap
terselenggaranya semua komponen dan sistem sekolah
2.2. Wewenang
1.2.1. Membantu kepala sekolah Menentukan dan
menetapkan Renstra, RKS, dan RKAS
1.2.2. Membantu kepala sekolah Menentukan kebijakan
dalam bidang manajemen, penerapan kurikulum,
kesiswaan, ketenagaan, sarana prasarana dan lingkungan
2.3. Tugas
1.3.1. Membantu kepala sekolah Menyusun Renstra, RKS, dan

RKAS
30
2.3.2. Membantu kepala sekolah Melakukan pembinaan dan

pengembangan guru dan pegawai
2.3.3. Membantu kepala sekolah Membina penyelenggaraan

administrasi sekolah
2.3.4. Membantu kepala sekolah Membina penyelenggaraan

dan pengembangan SMM
2.3.5. Membantu kepala sekolah Menyusun laporan kegiatan
3. Kapala Tata Usaha

3.1. Tanggung jawab
Bertanggung jawab kepada Kasek atas terselenggaranya
kegiatan ketatausahaan
3.2. Wewenang
3.2.1. Menempatkan personil ketatausahaan
3.2.2. Menetapkan uraian tugas personil ketatausahaan
3.3. Tugas
3.3.1. Menyusun program kerja KaTU
3.3.2. Memantau keterlaksanaan kegiatan persuratan
3.3.3. Membina personil ketatausahaan
3.3.4. Melaksanakan monitoring dan evaluasi kegiatan.
3.3.5. Menyusun laporan kegiatan kepada Kasek
4. Ketua Dewan Komite

4.1. Tanggung jawab
Mendorong dan melakukan kerja sama dengan masyarakat
baik perororangan atau organisasi atau dunia usaha dan
pemerintah berkenaan dengan penyelenggaraan pendidikan
yang bermutu
4.2. Wewenang
4.2.1. Menampung dan menganalisis aspirasi, ide dan
berbagai kebutuhan pendidikan yang di ajukan oleh
masyarakat
4.2.2. Memberikan masukan, pertimbangan dan
rekomendasi kepada kepala sekolah
4.3. Tugas
4.3.1. Menggalang dana masyarakat dalam rangka
pembiayaan penyelenggaraan pendidikan di satuan
pendidikan
4.3.2. Melakukan evaluasi dan pengawasan terhadap
kebijakan, program, penyelanggaraan, dan keluaran
pendidikan di satuan pendidikan
5. Waka Ur Kuikulum
5.1. Tanggung jawab
Bertanggung jawab kepada Kasek atas terlaksananya
kegiatan pembelajaran
31
5.2. Wewenang
Menentukan dan menyelenggarakan proses :
5.2.1. Penerimaan siswa baru
5.2.2. Pembelajaran siswa
5.2.3. Kelulusan siswa
5.3. Tugas
5.3.1. Menyusun program kerja Waka Kurikulum
5.3.2. Bersama Waka Kesiswaan menyelenggarakan PPDB
5.3.3. Menyusun Kurikulum Tingkat Satuan Pendidikan
(KTSP)
5.3.4. Menyusun program pembelajaran, pembagian tugas
mengajar, dan jadwal pembelajaran
5.3.5. Mengorganisasikan dan mengkoordinasikan
penyusunan bahan ajar
pembelajaran teori dan praktek
5.3.7. Mengelola administrasi pembelajaran
5.3.8. Mengorganisasikan dan mengkoordinasikan proses
kelulusan siswa
5.3.9. Mengkoordinasikan penyelenggaraan perpustakaan
sekolah.
5.3.10. Melaksanakan monitoring dan evaluasi kegiatan
6. Waka Ur Kesiswaan
6.1. Tanggung jawab
pendampingan dan perlindungan siswa
6.2. Wewenang
Menentukan sistem dan menyelenggarakan kegiatan :
6.2.1. Pembinaan dan ketertiban siswa
6.2.2. Perlindungan siswa
6.2.3. Kegiatan kesiswaan
6.3. Tugas
6.3.1. Menyusun program kerja Waka Kesiswaan
pelaksanaan Masa Orientasi Siswa (MOS)
6.3.3. Bersama Waka kurikulum menyelenggarakan PPDB
6.3.4. Menyusun sistem pembinaan dan ketertiban siswa
6.3.5. Mengkoordinasikan pelaksanaan BK
pembinaan siswa dan kegiatan kesiswaan
6.3.7. Mengkoordinasikan mutasi siswa.
6.3.8. Mengorganisasikan dan mengkoordinasikan kegiatan
siswa dalam pelaksanaan 8K
6.3.9. Mengkoordinasikan program perlindungan siswa
6.3.10. Mengkoordinasikan pelaksanaan tugas wali kelas
6.3.11. Melaksanakan monitoring dan evaluasi kegiatan
32
7. Waka Ur Prasarana
7.1. Tanggung jawab
7.1.1 Bertanggung jawab kepada Kasek atas pemberdayaan,
pembinaan, dan pengembangan tenaga pendidikan,
7.1.2 Bertanggung jawab kepada Kasek atas pengelolaan
kebutuhan sarana prasarana
7.2. Wewenang
7.2.1. Merencanakan pembinaan, pengembangan karier dan
kebutuhan personalia
7.2.2. Merencanakan kebutuhan, penataan, pemeliharaan,
perbaikan sarana prasarana
7.3. Tugas
7.3.1. Menyusun program kerja Waka I
7.3.2. Menyusun kriteria guru sesuai dengan tuntutan
kurikulum
7.3.3. Mengusulkan kebutuhan pendidik dan tenaga
kependidikan
pengelolaan personalia
7.3.5. Melaksanakan penempatan personalia
7.3.6. Mengusulkan dan melaksanakan pengembangan
personalia
7.3.7. Menyusun rencana kebutuhan sarana prasarana
pelaksanaan pemeliharaan
pelaksanaan perbaikan
kegiatan pendidik dan tenaga kependidikan dalam
pelaksanaan 8 K
7.3.11. Melaksanakan monitoring dan mengevaluasi
pelaksanaan program kerja
8. Waka Ur Humas
8.1. Tanggung jawab
kerja sama dengan DU/DI/Instansi, penelusuran lulusan dan
pemasaran.
8.2. Wewenang
Berwenang menentukan sistem dan menyelenggarakan
hubungan dengan stakeholder dalam bidang :
8.2.1. Prakerin
8.2.2. Penelusuran lulusan dan pemasaran.
8.3. Tugas
8.3.1. Menyusun program kerja Waka Humas
33

kerjasama dengan DU/DI/Instansi terkait dalam kegiatan
prakerin
terlaksananya penelusuran lulusan dan pemasaran.
8.3.4. Melaksanakan kegiatan monitoring dan evaluasi.
8.3.5. Membuat laporan kegiatan kepada Kasek
9. Wali Kelas
9.1. Tanggung jawab
pendampingan dan pembimbingan kelas masing-masing
9.2. Wewenang
Menentukan pengelolaan pendampingan dan
pembimbingan kelas masing-masing
9.3. Tugas
9.3.1. Menyusun program pendampingan dan
pembimbingan kelas
9.3.2. Melaksanakan pendampingan dan pembimbingan
kelas
9.3.3. Membina kepribadian, ketertiban dan kekeluargaan
9.3.4. Membuat catatan tentang :
9.3.4.1. Situasi keluarga, ekonomi dan hal-hal khusus siswa
9.3.4.2. Ketidakhadiran, pelanggaran, dan perilaku siswa
9.3.4.3. Prestasi akademis siswa
3.1.5 Metoda Pengembangan Perangkat Lunak
Metodelogi yang digunakan untuk membangun sistem ini adalah Model
Waterfall. Model ini merupakan sebuah pendekatan terhadap pengembangan
perangkat lunak yang sistematik, dengan beberapa tahapan, yaitu: System
Engineering, Analysis, Design, Coding, Testing dan Maintenance.
Untuk lebih jelasnya tahapan-tahapan dari Paradigma Waterfall dapat
dilihat pada gambar berikut:

34
System Engineering
Analysis
Design
Coding
Testing
Maintenance
Gambar 3.2 Paradigma Waterfall (Classic Life Cycle)

(Sumber: Roger S. Pressman)
Penjelasan Metodelogi Waterfall:
1. System Engineering, merupakan bagian awal dari pengerjaan suatu proyek
perangkat lunak. Dimulai dengan mempersiapkan segala hal yang
diperlukan dalam pelaksanaan proyek.
2. Analysis, merupakan tahapan dimana System Engineering menganalisis
segala hal yang ada pada pembuatan proyek atau pengembangan perangkat
lunak yang bertujuan untuk memahami sistem yang ada, mengidentifikasi
masalah dan mencari solusinya.
3. Design, tahapan ini merupakan tahap penerjemah dari keperluan atau data
yang telah dianalisis ke dalam bentuk yang mudah dimengerti oleh
pemakai (user).
4. Coding, yaitu menerjemahkan data yang dirancang ke dalam bahasa
pemrograman yang telah ditentukan.
5. Testing, merupakan uji coba terhadap sistem atau program setelah selesai
dibuat.
35
6. Maintenance, yaitu penerapan sistem secara keseluruhan disertai
pemeliharaan jika terjadi perubahan struktur, baik dari segi software
maupun hardware.
3.2 Analisa Sistem Yang Sedang Berjalan
3.2.1 Dokumen Masukan

Berdasarkan pengamatan dan observasi yang dilakukan oleh penulis, adapun
gambaran alur kerja sistem yang sedang berjalan di SMK Tunas Grafika
Informatika adalah sebagai berikut:
1. Nilai Siswa
Pada proses nilai siswa, setiap guru mata pelajaran memberikan nilai kepada
siswa, kemudian wali kelas akan meginput nilai siswa ke buku rapot dan
kemudian siswa dapat melihat nilai mereka.
Alur Kerja Sistem Berjalan
Guru mata pelajaran Wali Kelas Siswa
Start
Nilai siswa Input Nilai

Siswa Ke Buku Melihat nilai
Rapot
Selesai
Gambar 3.3 Alur Kerja Sistem Yang Berjalan Pada Penilain Siswa
(Sumber: Data di olah)
36
2. Jadwal Pelajaran
Pada proses jadwal pelajaran, staff TU menyusun jadwal pelajaran yang akan di
ajukan, kemudian jadwal pelajaran tersebut di ajukan kepada kepala sekolah,
apakah jadwal pelajaran tersebut disetujui atau tidak, jika tidak, maka staff TU
akan menyusun kembali jadwal pelajaran, dan setelah jadwal pelajaran disetujui,
guru dapat melihat jadwal pelajaran yang ada untuk melakukan kegiatan belajar
mengajar.
Gambar 3.4 Alur kerja sistem yang sedang berjalan pada Jadwal Pelajaran
(Sumber: Data di olah)
37
3.3 Kebutuhan Data & Informasi
3.3.1 Jejaring Sosial Komunitas
Pada pembahasan ini akan dipaparkan beberapa fitur yang dapat
digunakan dari sistem yang dibangun, sekaligus penjelasan umum tentang
manfaat yang dapat diperoleh dari fitur-fitur tersebut.
Fitur-fitur serta fasilitas yang dapat diakses dan digunakan pada sistem ini
antara lain:
1. Pesan Pribadi (Private Message)
Digunakan untuk kirim dan terima pesan secara private.
2. Update Status
Fitur yang digunakan untuk mengirimkan status di beranda.
3. Komentar Status & Like Status
Digunakan untuk mengomentari atau menyukai kiriman status.
4. Mengirim Konten
Memungkinkan anggota untuk mengirim konten dan dapat dilihat oleh
oleh user atau pengunjung lainnya. Konten yang dikirim dibatasi hanya
pada konten-konten tertentu.
5. Komentar Konten
Memungkinkan anggota dan pengunjung (visitors) mengomentari konten
yang dikirim. Konten yang dapat dikomentari oleh pengunjung dibatasi
pada konten-konten tertentu yang bersifat publik.
6. Notifikasi / Pemberitahuan
Fitur ini akan memberitahukan siapa saja yang mengomentari konten yang
dikirim oleh user, atau konten lain yang melibatkan seorang user.
38
7. Halaman Profil Member
Berisi data-data pribadi dan foto profil member, misalnya nama, alamat,
status, hobi dan sebagainya.
8. Pengaturan Akun, Password dan Privasi
a. Pengaturan Akun
Anggota dapat menambahkan alamat email baru atau mengganti
alamat default yang ada. Fasilitas ini juga digunakan untuk menon-
aktifkan akun pada website.
b. Pengaturan Password
Digunakan untuk mengganti password dengan password yang baru.
c. Pengaturan Privasi
Pengaturan untuk profil dan informasi pribadi, misalnya jika anggota
tidak ingin menampilkan tanggal lahir dan jenis kelamin di halaman
profil, atau bahkan dapat mengatur profil supaya tidak muncul di
pencarian atau dilihat oleh anggota lain dan publik.
3.3.2 Web Forum
Secara umum, web forum merupakan fasilitas yang tersedia di internet,
dan penggunanya dapat berdiskusi. Dibuatnya forum online ini dimaksudkan
untuk memudahkan anggota dalam berdiskusi. Mereka dapat membuat topik
(thread) baru sesuai dengan kriteria atau kategori yang telah ditentukan, serta
bergabung dan mengomentari forum lainnya.
Anggota diberikan akses penuh terhadap thread yang dibuatnya, seperti
edit thread, publish / unpublish thread dan menutup thread. Kecuali menghapus
39
thread, anggota tidak dapat menghapus thread secara permanen, tetapi thread
tersebut akan dipindahkan ke thread Recycle Bin yang hanya bisa diakses oleh
administrator.
Fitur-fitur serta fasilitas yang dapat diakses dan digunakan pada sistem ini
antara lain:
1. Kirim Thread Baru
Digunakan untuk membuat topik (thread) baru pada forum sesuai dengan
kriteria atau kategori yang telah ditentukan. Fitur ini bisa diakses dan
digunakan oleh semua anggota yang telah terdaftar.
2. Publish / Unpublish Thread
Digunakan untuk mempublikasikan atau menonaktifkan kiriman thread.
Jika dinonaktifkan, maka thread tersebut tidak akan muncul serta terlihat
oleh user lain dan publik. Hal ini bisa dilakukan oleh anggota yang
bersangkutan dan oleh administrator.
3. Edit Thread
Digunakan untuk menyunting topik (thread) yang telah dikirim. Hal ini
bisa dilakukan oleh anggota yang bersangkutan dan oleh administrator.
4. Hapus Thread
Digunakan untuk menghapus topik (thread) yang telah dikirim. Thread ini
selanjutnya akan dipindahkan ke Thread Recycle Bin untuk sementara,
sebelum dihapus secara permanen oleh administrator.
5. Tutup Thread
40
Digunakan untuk menutup topik (thread) yang telah dikirim, agar tidak
dapat dikomentari lagi, tetapi masih dapat dilihat oleh user lain. ini Hal ini
bisa dilakukan oleh anggota yang bersangkutan dan oleh administrator.
6. Share Thread
Digunakan untuk membagikan / mengirimkan (share) thread ke profil
Facebook dan Twitter.
7. Mengomentari Thread
Berfungsi untuk mengomentari thread pada forum. Hal ini bisa dilakukan
selama thread tersebut aktif, belum dihapus atau ditutup.
8. Notifikasi / Pemberitahuan
Sistem akan otomatis mengirimkan pemberitahuan, jika ada user lain yang
mengomentari thread yang dikirim, atau thread lain yang melibatkan
anggota yang bersangkutan.
3.3.3 Fitur dan Fasilitas Website
Selain fasilitas di atas, terdapat konten-konten lainnya yang bisa diakses
oleh anggota dan publik, antara lain:
1. Buku Tamu
Memungkinkan pengunjung untuk dapat memberikan komentar, kritik dan
sarannya pada website.
2. Konten Berita
Digunakan untuk mempublikasikan berita-berita aktual dan terbaru.
3. Konten Artikel
Digunakan untuk mempublikasikan artikel-artikel.

41
4. Mading Sekolah / Pengumuman
Digunakan untuk mempublikasikan pengumuman dari pihak sekolah.
5. Kegiatan Sekolah
Digunakan untuk mempublikasikan jadwal kegiatan yang akan
dilaksanakan oleh sekolah.
6. Galeri Foto
Digunakan untuk mempublikasikan foto-foto kampus / acara sekolah.
7. Informasi Lowongan Kerja
Digunakan untuk mempublikasikan informasi lowongan kerja dari
perusahaan atau instansi lainnya.
8. Konten Cerpen (Cerita Pendek)
Digunakan untuk mempublikasikan cerita-cerita pendek.
9. Konten Download
Digunakan untuk mempublikasikan file, game, modul belajar dan
sebagainya, sehingga dapat diunduh oleh anggota atau publik.
10. E-Learning
Memuat materi dan modul belajar gratis di bidang ilmu komputer,
teknologi informasi dan umum yang dapat diunduh oleh anggota atau
publik.
11. Catatan Anggota / Member
Digunakan untuk mempublikasikan catatan anggota, sehingga dapat dilihat
oleh anggota lain atau publik.

42
12. Events
Sebagai history dari rangkaian peristiwa / kejadian yang terjadi pada
website, misalnya jika seseorang bergabung atau mengirim konten.
3.4 Identifikasi kebutuhan
Pengguna / user adalah orang atau aktor yang akan menggunakan sistem,
dalam hal ini adalah website. Manajemen user ini mutlak diperlukan untuk
memberikan pembatasan akses pada masing-masing user berdasarkan level yang
dimilikinya.
3.4.1 Manajemen Level Akses User
Manajemen level akses user ini dimaksudkan untuk membatasi hak akses
user terhadap konten yang ada pada sistem (website). Ada empat level user yang
ada pada sistem ini, setiap level memiliki hak akses yang berbeda, dimulai dari
urutan level tertinggi Super Administrator sampai urutan terendah General
User.
Berikut adalah urutan level user yang dimaksud:
1. Super Administrator (Admin Level 1)
Level Super Administrator merupakan level tertinggi pada sistem ini. User
dengan level ini memiliki hak akses penuh terhadap sistem, seperti
mengirim, mengubah, menonaktifkan dan menghapus konten yang dikirim
oleh semua anggota, termasuk mengatur level user atau menghapus dan
menonaktikan user lain.

43
2. Administrator (Admin Level 2)
Seperti halnya Super Administrator, user dengan level ini memiliki hak
akses penuh terhadap sistem, seperti mengirim, mengubah, menonaktifkan
dan menghapus konten yang dikirim oleh semua anggota, tetapi dia tidak
dapat mengatur level user atau menghapus dan menonaktikan user lain.
3. Moderator (Admin Level 3)
User dengan level ini memiliki hak akses, seperti mengirim, mengubah,
menonaktifkan dan menghapus konten, tetapi terbatas pada konten yang
dia kirim.
4. General User (Level 4)
User dengan level ini memiliki hak akses, seperti mengirim, mengubah,
menonaktifkan dan menghapus konten, tetapi terbatas pada konten yang
dia kirim serta terbatas pada konten-konten yang telah ditentukan.
3.4.2 Manajemen CRUD Matrix
CRUD (Create Read Update Delete) Matrix menggambarkan kontrol
akses pengguna / user terhadap konten-konten yang ada pada website, dari mulai
level tertinggi sampai level terendah.

44
Berikut adalah tabel CRUD Matrix User yang dimaksud:
Tabel 3.1 CRUD Matrix User
Admin Admin Admin User

Konten
Level 1 Level 2 Level 3 Level 4
Konten Admin CRUD CRUD R R
Konten Milik Pribadi CRUD CRUD CRUD CRUD
Konten Milik Orang Lain RUD RUD R R
Pengguna / User RUD R R R
Thread Forum CRUD CRUD CRUD CRU
Pesan (Private Message) CRD CRD CRD CRD
Komentar CRD CRD CRD CRD
Komentar di Konten Sendiri CRD CRD CRD CRD
Komentar di Konten Orang Lain CRD CRD R R
Sumber: Data Diolah

45
3.4.3 Use case Diagram
WEBSITE
Kirim & Hapus Kirim & Hapus
Status, Pesan Status, Pesan
Kirim, Edit, Hapus,

Publish / Unpublish <<extend>> Kelola Konten
Kirim, Edit, Hapus
Catatan Konten, Upload File
Download Konten <<include>> Kelola User

<<include>>
Mengomentari
Kelola Buku
Edit Profil Konten / Thread
MEMBERS Tamu ADMINISTRATOR
Forum
Pengaturan Akun, <<include>> Kelola Kategori

Password, Privasi Konten
<<extend>>
Kirim, Edit, Hapus
<<extend>>
Thread Forum
Bergabung di Forum Kelola Forum
<<include>>
<<include>>
VISITORS SISTEM
(TAMU)
Login Login Admin
Mengisi Buku
<<include>> Validasi Input User
Tamu
Mengomentari & <<include>>

Download Konten Cek Level User
Publik
<<include>>
Set Login, Cookies,

Registrasi Session
Gambar 3.5 Use Case Diagram

(Sumber: Data Diolah)
BAB IV
PERANCANGAN SISTEM
Analisa dan perancangan sistem merupakan tahapan dalam membangun
suatu sistem, agar dihasilkan sistem yang lebih baik bagi pihak pemakai, serta
dapat memberikan gambaran yang jelas bagi pembuat program (developer).
4.1 Analisa dan Perancangan Sistem Web dengan UML
4.1.1 ERD
Gambar 4.1 ERD

46
4.1.2 LRS
ELEARNING STATUS BUKU TAMU PESAN CATATAN GALERI
Attributs: Attributs: Attributs: Attributs: Attributs: Attributs:
- Item Konten - Item Status - Komentar Buku Tamu - Item Pesan - Item Catatan - Item Konten
- Kategori - Komentar - Pesan Balasan - Komentar - Foto Galeri
- Komentar - Status Like Operations: - Jumlah Views - Komentar
- Jumlah Views - Jumlah Like - View() Operations: - Jumlah Komentar - Jumlah Views
- Jumlah Komentar - Jumlah Komentar - Comment() - Send() - Jumlah Komentar
- Delete() - Read() Operations:
Operations: Operations: - Delete() - Add() Operations:
- Add() - Add() - Update() - Add()
- Update() - Delete() - Delete() - Update()
- Delete() - Like() - Publish() / Unpublish() - Delete()
- Publish() / Unpublish() - Comment() - View() - Publish() / Unpublish()
- Comment() - View()
- Comment()
MEMBER
Attributs:
- User ID
- Email
- Password
- User Level
- Profile
DOWNLOAD - Events
- Notifications
Attributs:
FORUM - Item File Operations: LOKER
Attributs: - Komentar - Add() PENGUMUMAN
- Item Thread - Jumlah Views - Update() Attributs:
Attributs:
- Kategori - Jumlah Komentar - Delete() / Undelete() - Item Konten
- Item Pengumuman
- Komentar - SetLevel() - Komentar
- Komentar
- Jumlah Views Operations: - Activate() - Jumlah Views
- Jumlah Views
- Jumlah Komentar - Add() - Jumlah Komentar
- Jumlah Komentar
- Update()
Operations: - Delete() Operations:
ARTIKEL Operations:
- Add() - Publish() / Unpublish() - Add()
- Add()
- Update() - View() Attributs: - Update()
- Update()
- Delete() - Comment() - Item Artikel - Delete()
- Delete()
- Publish() / Unpublish() - Download() MEMBER EMAIL - Kategori - Publish() / Unpublish()
- Publish() / Unpublish()
- Open() / Close() - Komentar - View()
Attributs: - View()
- View() - Jumlah Views - Comment()
- Item Email - Comment()
- Comment() KEGIATAN - Jumlah Komentar
- Item Confirmed
Attributs:
- Item Kegiatan Operations: CERPEN
Operations: - Add()
- Komentar - Add() - Update() Attributs:
- Jumlah Views - Delete() - Delete() - Item Cerpen
- Jumlah Komentar
- Publish() / Unpublish() - Kategori
- Komentar
Operations:
KONTEN KATEGORI - Jumlah Views
- Add()
BERITA - Jumlah Komentar
- Update() Attributs:
- Delete() - Item Kategori Attributs: Operations:
- Publish() / Unpublish() - Item Berita - Add()
- View() Operations: - Kategori - Update()
- Comment() - Add() - Komentar - Delete()
- Delete() - Jumlah Views - Publish() / Unpublish()
- Jumlah Komentar - View()
- Comment()
Operations:
- Add()
- Update()
- Delete()
- Publish() / Unpublish()
- View()
- Comment()
46 47
Gambar 4.2 LRS
48
4.1.3 Statechart Diagram
a. Statechart Diagram Proses Registrasi
Belum Lengkap
Cek Data Lengkap Isi Data Lengkap
Lengkap
Cek Ketersediaan
Lengkap
Email
Email Tersedia
Email Tidak Tersedia

Kirim Data
Gambar 4.3 Statechart Diagram Proses Registrasi

b. Statechart Diagram Proses Login
Belum Login
Cek Status Login

Cek Email &
Password
Status: Login
Email & Password

Halaman Beranda
Cocok
Email & Password

Tidak Cocok
Gambar 4.4 Statechart Diagram Proses Login

49
c. Statechart Diagram Kirim Konten
Belum Lengkap
Cek Registrasi &

Login Registrasi / Login
Lengkap
Cek Level User Lengkap
Memenuhi
Pengisian Data
Lengkap Tidak Memenuhi
Kirim
Gambar 4.5 Statechart Diagram Kirim Konten

d. Statechart Diagram Edit Konten
Belum Lengkap
Cek Login Login
Lengkap
Cek Owner &

Lengkap
Level User
Memenuhi
Update Data Tidak Memenuhi
Simpan
Gambar 4.6 Statechart Diagram Edit Konten

50
e. Statechart Diagram Publish / Unpublish Konten
Belum Lengkap
Cek Login Login
Lengkap
Cek Owner &

Lengkap
Level User
Memenuhi
Publish / Unpublish
Request Tidak Memenuhi
Kirim
Gambar 4.7 Statechart Diagram Publish / Unpublish Konten

f. Statechart Diagram Hapus Konten
Belum Lengkap
Cek Login Login
Lengkap
Cek Owner &

Lengkap
Level User
Memenuhi
Delete Request Tidak Memenuhi
Kirim
Gambar 4.8 Statechart Diagram Hapus Konten

51
g. Statechart Diagram Kirim Catatan, Thread Forum, Pesan dan Komentar
Belum Lengkap
Cek Registrasi &

Login Registrasi / Login
Lengkap
Pengisian Data
Lengkap
Lengkap
Memenuhi
Save Request Tidak Memenuhi
Kirim
Gambar 4.9 Statechart Diagram Kirim Catatan, Thread Forum, Pesan dan Komentar
h. Statechart Diagram Edit Catatan dan Thread Forum
Belum Lengkap
Cek Login Login
Lengkap
Cek Owner &

Lengkap
Level User
Memenuhi
Update Request Tidak Memenuhi
Kirim
Gambar 4.10 Statechart Diagram Edit Catatan dan Thread Forum

52
i. Statechart Diagram Publish / Unpublish Catatan dan Thread Forum
Belum Lengkap
Cek Login Login
Lengkap
Cek Owner &

Lengkap
Level User
Memenuhi
Publish /
Unpublish Request Tidak Memenuhi
Kirim
Gambar 4.11 Statechart Diagram Publish / Unpublish Catatan dan Thread Forum
j. Statechart Diagram Hapus Catatan dan Thread Forum
Belum Lengkap
Cek Login Login
Lengkap
Cek Owner &

Lengkap
Level User
Memenuhi
Kirim
Gambar 4.12 Statechart Diagram Hapus Catatan dan Thread Forum

53
k. Statechart Diagram Buka atau Tutup Thread Forum
Belum Lengkap
Cek Login Login
Lengkap
Cek Owner &

Lengkap
Level User
Memenuhi
Open / Close
Request Tidak Memenuhi
Kirim
Gambar 4.13 Statechart Diagram Buka atau Tutup Thread Forum

l. Statechart Diagram Hapus Komentar
Belum Lengkap
Cek Login Login
Lengkap
Cek Owner &

Lengkap
Level user
Memenuhi
Kirim
Gambar 4.14 Statechart Diagram Hapus Komentar

54
m. Statechart Diagram Hapus Pesan
Belum Lengkap
Cek Login Login
Lengkap
Cek Owner Lengkap
Memenuhi
Kirim
Gambar 4.15 Statechart Diagram Hapus Pesan

55
4.1.4 Activity Diagram
a. Activity Diagram Melihat Website
Buka Halaman
Utama / Homepage
Ya
Ya
Buka Halaman Buku

Ya
Tamu
Tidak
Buka Halaman
Ya
Forum
Tidak
Buka Halaman
Ya
Galeri
Tidak
Buka Halaman
Ya
E-Learning
Tidak
Buka Halaman
Ya
Pengumuman
Tidak
Buka Halaman
Ya
Artikel
Tidak
Buka Halaman
Ya
Berita
Tidak Keluar
Buka Halaman
Ya
Cerpen
Tidak
Buka Halaman
Ya
Kegiatan
Tidak
Buka Halaman
Ya
Lowongan Kerja
Tidak
Buka Halaman
Ya
Catatan
Tidak
Buka Halaman
Ya
Download
Tidak
Buka Halaman
Ya
Registrasi
Tidak
Login Ke Website Ya
Tidak
Gambar 4.16 Activity Diagram Melihat Website

56
b. Activity Diagram Melihat Buku Tamu
Buka Halaman
Buku Tamu
Keluar
Ya
Tampil Isi
Buku Tamu
Pengisian Data
Tidak Ya Input Buku Tamu
Lengkap
Ya
:Sistem
Tidak
Validasi Data
Tidak
Valid
Kirim Data
Gambar 4.17 Activity Diagram Melihat Buku Tamu

c. Activity Diagram Registrasi
Buka Halaman
Registrasi
Keluar
Ya
Pengisian Data
Tidak Ya Input Data
Lengkap
Ya
:Sistem
Tidak
Validasi Data
Tidak
Valid
Kirim Data
Gambar 4.18 Activity Diagram Registrasi

57
d. Activity Diagram Melihat Halaman Konten
Buka Halaman
Konten
Keluar
Ya
Tampil Isi
Konten
Pengisian Data
Tidak Ya Kirim Komentar
Lengkap
Ya
:Sistem
Tidak
Validasi Data
Tidak
Valid
Kirim Data
Gambar 4.19 Activity Diagram Melihat Halaman Konten

e. Activity Diagram Download Konten
Buka Halaman
Konten
Keluar
Ya
Tampil Isi
Konten
Pengisian Data
Tidak Ya Kirim Komentar
Lengkap
Ya
Tidak
:Sistem
Validasi Data Download Konten
Ya
Valid
Kirim Data
Tidak Terima Data
Gambar 4.20 Activity Diagram Download Konten

58
f. Activity Diagram Membuka Halaman User
Login User Tidak
Tidak
Ya
:Sistem
Ya
Clear Session
Logout
Tampil Halaman
Ya
Edit Profil
Edit Profil / Tidak
Upload Foto
:Sistem
Ya Edit Data Tampil Halaman
Validasi Data Ya
Tidak Pemberitahuan
Valid Cek Pemberitahuan
Tidak
Kirim Data Kirim Data
Tidak
Tampil Halaman Valid
Ya Tidak
Kirim Catatan
Kirim Catatan :Sistem
Isi Data Ya
Validasi Data
:Sistem
Ya Isi Data
Validasi Data
Tidak
Tampil Halaman
Valid Ya
Kirim Thread
Tidak Kirim Thread
Kirim Data
Kirim Data
Tampil Halaman
Ya Tidak
Kirim Pesan Valid
Kirim Pesan Tidak
:Sistem
Isi Data Ya
:Sistem Validasi Data
Ya Isi Data
Validasi Data
Tidak
Valid Tampil Halaman
Tidak Ya
Konten
Kirim Data Kirim Komentar
Kirim Data
Tampil Halaman
Ya Tidak
Beranda Valid
Update Status Tidak
:Sistem
Edit Data Ya
Ya Isi Data
Validasi Data
Tidak
Tidak Ya
Pengaturan
Kirim Data Pengaturan Akun,
Password, Privasi
Gambar 4.21 Activity Diagram Membuka Halaman User

59
g. Activity Diagram Membuka Halaman Admin
Login Admin Tidak
Tidak
Ya
:Sistem
Ya
Clear Session
Logout
Tampil Halaman
Ya
Edit Profil
Edit Profil / Tidak
Upload Foto
:Sistem
Ya Edit Data Tampil Halaman
Validasi Data Ya
Tidak Pemberitahuan
Valid Cek Pemberitahuan
Tidak
Kirim Data Kirim Data
Tidak
Tampil Halaman Valid
Ya Tidak
Kelola Konten
Kelola Konten :Sistem
Isi Data Ya
Validasi Data
:Sistem
Ya Isi Data
Validasi Data
Tidak
Tampil Halaman
Valid Ya
Kirim Thread
Tidak Kirim Thread
Kirim Data
Kirim Data
Tampil Halaman
Ya Tidak
Kirim Pesan Valid
Kirim Pesan Tidak
:Sistem
Isi Data Ya
Ya Isi Data
Validasi Data
Tidak
Tidak Ya
Kirim Pesan / Konten
Kirim Data
Komentar
Kirim Data
Tampil Halaman
Ya Tidak
Beranda Valid
Update Status Tidak
:Sistem
Edit Data Ya
Ya Isi Data
Validasi Data
Tidak
Tidak Ya
Pengaturan
Kirim Data Pengaturan Akun,
Password, Privasi
Kirim Data
Tampil Halaman
Ya Tidak
User Valid
Kelola User Tidak
:Sistem
Isi Data Ya
Ya Edit Data
Validasi Data
Tidak
Tidak Ya
Upload
Kirim Data Upload Konten
Gambar 4.22 Activity Diagram Membuka Halaman Admin

60
h. Activity Diagram Bergabung di Forum
Buka Halaman
Tidak
Forum
Ya
Tampil Halaman
Ya Tidak
Thread
Pilih Thread
Forum
Pengisian Data
Tidak Ya Kirim Thread
Lengkap
Tidak
Ya
:Sistem Pengisian Data
Tidak Ya Tidak
Validasi Data Lengkap
Kirim
Komentar
Ya
Valid
Kirim Data :Sistem

Tidak
Validasi Data
Tidak
Valid
Kirim Data
Gambar 4.23 Activity Diagram Bergabung di Forum

61
4.1.5 Sequence Diagram
USER HALAMAN
WEB UI DATABASE KONTEN
<<actor>> USER
Loop
Loop Jika Email Tersedia / Belum Terdaftar
Registrasi save_data() Akun User
Data Akun User Data Akun User
Loop
Loop Jika Email / User Telah Terdaftar
Login cek_login(), get_level() Akun User
Invalid Login Data User, Level user
Kelola Konten save_data()
Message Result Data Konten

Konten User
Kirim Konten, Edit Konten
Data Konten
Konten User delete_data()
Message (Deleted)
Hapus Konten
Message (Deleted)
Kelola Pengaturan save_data()
Setting Result Setting Result

User Setting
Pengaturan Akun, Password, Privasi
Setting Result
Halaman Profil save_data()
Data Profil User

Profil User
Edit Profil
Profil User
Gambar 4.24 Sequence Diagram

62
4.1.6 Collaboration Diagram
Kirim ;Komentar
view
;Informasi Get (kondisi) Hapus

;Mading
Loker
Kampus Kirim Tampil view
view
;Threads
view
Get (level) ;Forum
;Buku Publish /
;E-Learning Unpunlish
Tamu ;Login
;Galeri
view Hapus Edit
view view
view
Kirim
Open
view Tampil
;Berita Get (kondisi) Hapus
view
view ;Artikel ;Pemberitahuan
Simpan
User
;index Get (kondisi)
view view
;Login As
;Edit Profil Kirim
view view Get (level) User
view view Get (kondisi) view Get (kondisi)
view ;Login
;Status Hapus
;Jadwal ;User Page
view
Kegiatan ;Registrasi
view view Get (kondisi)
;Download Get (kondisi) Komentar
; Catatan Kirim
;Pesan
;Catatan Get (level) Hapus
Kirim Kirim
;Login Hapus Edit Publish /
Unpublish
Get (kondisi) Hapus Kirim
Login As
;Komentar Admin
Konten view view
Get (kondisi) Get(kondisi) Set Level
User
Hapus view ;Admin ;Manage User
Page
Get (kondisi)
view Hapus User
Get (kondisi) view
;Pesan Get (kondisi)
;Konten
;Konten User &
Forum
Kirim Hapus
Validasi Hapus
Kirim Edit Hapus Publish /
Unpublish
Gambar 4.25 Collaboration Diagram

63
4.1.7 Component Diagram
Browsing
Login
Isi Data
Kirim
Data
Simpan ke
Database
Gambar 4.26 Component Diagram

64
4.1.8 Deployment Diagram
Page Request
Browser Web
Klien Server
Database Request
Apllication Server
PHP
Intrepreter
MySQL
Database
Gambar 4.27 Deployment Diagram

4.1.9 Package Diagram
Admin Website
Member
Tamu
Gambar 4.28 Package Diagram

65
4.2 Perancangan Data (Data Design)
4.2.1 Struktur Database
Berikut ini adalah struktur database yang dibuat:
Nama Database : websekolah_db
Jumlah Tabel : 38 Tabel
Database Engine : MySQL Server 5
Tabel Engine : MyISAM
4.2.2 Struktur Tabel
Berikut ini adalah struktur setiap tabel yang ada pada database
mtsnlakbok:
1. Tabel Member
Fungsi : Untuk menyimpan data Member / User
Jumlah Field : 40
Primary Key : userid (auto_increment)
Foreign Key : level
Tabel 4.1 Struktur Tabel Member
Nama Field Tipe Data Panjang Keterangan

userid Integer 11 Kode User; Primary Key
email Varchar 50 Email User
password Varchar 100 Password User
kode_aktivasi Varchar 10 Kode Aktivasi Email
level TinyInt 1 Level User
tanggal_daftar DateTime - Tanggal Registrasi
nama Varchar 30 Nama User
tanggal_lahir DateTime - Tanggal Lahir User
jenis_kelamin Varchar 9 Jenis Kelamin User
alamat Varchar 50 Alamat User
agama Varchar 20 Agama User
status Varchar 15 Status Hubungan
pekerjaan Varchar 255 Pekerjaan User
aktivitas Varchar 255 Aktivitas User
minat Varchar 255 Minat / Cita-cita
bakat Varchar 255 Bakat / Keahlian
66
website Varchar 255 Website User

telepon Varchar 20 Telepon User
messenger Varchar 255 IM User
tentang Text - Tentang User
aktif TinyInt 1 Status Aktif
foto Varchar 300 Foto Profil User
deleted TinyInt 1 User Dihapus / Tidak
tipe_deleted Varchar 5 Tipe Hapus User
reset_password Varchar 10 Kode Reset Password
dilihat Integer 11 Jumlah Profil Dilihat
show_email TinyInt 1 Email Ditampilkan / Tidak
show_tgl_lahir TinyInt 1 Tanggal Lahir Ditampilkan / Tidak
show_jk TinyInt 1 Jenis Kelamin Ditampilkan / Tidak
show_profil TinyInt 1 Profil Dapat Ditampilkan / Tidak
show_cari TinyInt 1 Tampil di Pencarian / Tidak
browser Varchar 255 Browser yang Dipakai User
login_ip Varchar 20 IP Adress Saat User Login
sma Varchar 50 Nama Sekolah
kuliah Text - Nama Kampus / Perguruan Tinngi
kursus Text - Kursus Yang Pernah Diikuti
hobi Varchar 255 Hobi / Kegemaran User
email_confirmed TinyInt 1 Email Dikonfirmasi / Belum
jumlah_post Integer 11 Jumlah Post User
Sumber: Data Diolah
2. Tabel Member Email

Fungsi : Untuk menyimpan data email user
Jumlah Field :5
Primary Key : id (auto_increment)
Foreign Key : userid
Tabel 4.2 Struktur Tabel Member Email

id BigInt 20 Id Member Email; Primary Key
userid Integer 11 User ID
email Varchar 50 Email User
aktif TinyInt 1 Aktif / Belum Aktif
konfirmasi Varchar 10 Kode Konfirmasi
Sumber: Data Diolah
67
3. Tabel Member Level

Fungsi : Untuk menyimpan data level dan jabatan user
Jumlah Field :2
Primary Key : level
Tabel 4.3 Struktur Tabel Member Level

level TinyInt 1 Level User; Primary Key
jabatan Varchar 30 Jabatan User
Sumber: Data Diolah
4. Tabel Status
Fungsi : Untuk menyimpan data Status User
Jumlah Field :4
Primary Key : idstatus (auto_increment)
Tabel 4.4 Struktur Tabel Status

idstatus BigInt 20 Kode Status; Primary Key
tanggal DateTime - Tanggal Status
userid Integer 11 Pengirim Status
isi LongText - Isi Status
Sumber: Data Diolah
5. Tabel Status Post

Fungsi : Untuk menyimpan data Komentar Status User
Jumlah Field :7
Foreign Key : idstatus, userid
Tabel 4.5 Struktur Tabel Status Post

id BigInt 20 Id Komentar; Primary Key
idstatus BigInt 20 Kode Status
tanggal DateTime - Tanggal Komentar
userid Integer 11 Pengirim Komentar
komentar LongText - Isi Komentar
Sumber: Data Diolah
68
6. Tabel Status Like

Fungsi : Untuk menyimpan data Like Status
Jumlah Field :3
Foreign Key : idstatus, userid
Tabel 4.6 Struktur Tabel Status Like

id BigInt 20 Id Status Like; Primary Key
idstatus BigInt 20 Kode Status
userid Integer 11 Yang Menyukai Status
Sumber: Data Diolah
7. Tabel Forum Header

Fungsi : Untuk menyimpan data Judul Header Forum
Jumlah Field :5
Primary Key : idheader (auto_increment)
Tabel 4.7 Struktur Tabel Forum Header

idheader TinyInt 3 Kode Header; Primary Key
header Varchar - Judul Header
aktif TinyInt 1 Aktif / Tidak Aktif
urut TinyInt 3 Urutan Judul Header
admin_only TinyInt 1 Forum Khusus Admin
Sumber: Data Diolah
8. Tabel Forum Kategori

Fungsi : Untuk menyimpan data Kategori Forum
Jumlah Field :6
Primary Key : idkategori (auto_increment)
Foreign Key : idheader
Tabel 4.8 Struktur Tabel Forum Kategori

idkategori Integer 5 Kode Kategori; Primary Key
idheader TinyInt 3 Kode Header
kategori Varchar 300 Kategori
69
urut Integer 5 Urutan Kategori

recycle TinyInt 1 Forum Yang Dihapus
Sumber: Data Diolah
9. Tabel Forum
Fungsi : Untuk menyimpan data Konten Forum
Jumlah Field : 12
Primary Key : idforum (auto_increment)
Foreign Key : idkategori, userid
Tabel 4.9 Struktur Tabel Forum

idforum BigInt 20 Kode Forum; Primary Key
tanggal DateTime - Tanggal Dikirim
idkategori Integer 5 Kode Kategori Forum
userid Integer 11 Pengirim Konten
tipe Varchar 20 Tipe Forum
judul Varchar 100 Judul Forum
isi LongText - Uraian Konten
gambar Varchar 300 Gambar Konten
dilihat Integer 11 Jumlah Ditampilkan
closed TinyInt 1 Forum Ditutup / Tidak
deleted TinyInt 1 Forum Telah Dihapus / Tidak
Sumber: Data Diolah
10. Tabel Forum Post

Fungsi : Untuk menyimpan data Komentar Forum
Jumlah Field :8
Foreign Key : idforum, userid
Tabel 4.10 Struktur Tabel Forum Post

id BigInt 20 Id Komentar; Primary Key
idforum BigInt 20 Kode Forum
komentar Text - Isi Komentar
Sumber: Data Diolah
70
11. Tabel Pengumuman

Fungsi : Untuk menyimpan data Pengumuman
Jumlah Field :8
Primary Key : idpengumuman (auto_increment)
Tabel 4.11 Struktur Tabel Pengumuman

idpengumuman Integer 11 Kode Pengumuman; Primary Key
tanggal DateTime - Tanggal Pengumuman
userid Integer 11 Pengirim Pengumuman
judul Varchar 100 Judul Pengumuman
isi LongText - Isi Pengumuman
gambar Varchar 300 Gambar Pengumuman
Sumber: Data Diolah
12. Tabel Pengumuman Post

Fungsi : Untuk menyimpan data Komentar Pengumuman
Jumlah Field :8
Foreign Key : idpengumuman, userid
Tabel 4.12 Struktur Tabel Pengumuman Post
Tipe
Nama Field Panjang Keterangan
Data
id Integer 11 Id Komentar; Primary Key
idpengumuman Integer 11 Kode Pengumuman
anon_nama Varchar 50 Nama Anonymous
anon_web Varchar 300 Website Anonymous
anon_ip Varchar 20 IP Anonymous
Sumber: Data Diolah
71
13. Tabel Artikel

Fungsi : Untuk menyimpan data Artikel
Jumlah Field :9
Primary Key : idartikel (auto_increment)
Foreign Key : userid, idkategori
Tabel 4.13 Struktur Tabel Artikel

idartikel Integer 11 Kode Artikel; Primary Key
tanggal DateTime - Tanggal Artikel
idkategori Integer 11 Kode Kategori Artikel
userid Integer 11 Pengirim Artikel
judul Varchar 100 Judul Artikel
isi LongText - Isi Artikel
gambar Varchar 300 Gambar Artikel
Sumber: Data Diolah
14. Tabel Artikel Post

Fungsi : Untuk menyimpan data Komentar Artikel
Jumlah Field :8
Foreign Key : idartikel, userid
Tabel 4.14 Struktur Tabel Artikel Post

idartikel Integer 11 Kode Artikel
Sumber: Data Diolah
72
15. Tabel Berita

Fungsi : Untuk menyimpan data Berita
Jumlah Field : 10
Primary Key : idberita (auto_increment)
Tabel 4.15 Struktur Tabel Berita

idberita Integer 11 Kode Berita; Primary Key
tanggal DateTime - Tanggal Berita
idkategori Integer 11 Kode Kategori Berita
sumber Varchar 100 Sumber Berita
userid Integer 11 Pengirim Berita
judul Varchar 100 Judul Berita
isi LongText - Isi Berita
gambar Varchar 300 Gambar Berita
Sumber: Data Diolah
16. Tabel Berita Post

Fungsi : Untuk menyimpan data Komentar Berita
Jumlah Field :8
Foreign Key : idberita, userid
Tabel 4.16 Struktur Tabel Berita Post

idberita Integer 11 Kode Berita
Sumber: Data Diolah
73
17. Tabel Cerpen

Fungsi : Untuk menyimpan data Cerpen
Jumlah Field :9
Primary Key : idcerpen (auto_increment)
Tabel 4.17 Struktur Tabel Cerpen

idcerpen Integer 11 Kode Cerpen; Primary Key
tanggal DateTime - Tanggal Cerpen
idkategori Integer 11 Kode Kategori Cerpen
userid Integer 11 Pengirim Cerpen
judul Varchar 100 Judul Cerpen
isi LongText - Isi Cerpen
gambar Varchar 300 Gambar Cerpen
Sumber: Data Diolah
18. Tabel Cerpen Post

Fungsi : Untuk menyimpan data Komentar Cerpen
Jumlah Field :8
Foreign Key : idcerpen, userid
Tabel 4.18 Struktur Tabel Cerpen Post

idcerpen Integer 11 Kode Cerpen
Sumber: Data Diolah
74
19. Tabel Catatan

Fungsi : Untuk menyimpan data Catatan Anggota
Jumlah Field :8
Primary Key : idcatatan (auto_increment)
Tabel 4.19 Struktur Tabel Catatan

idcatatan Integer 11 Kode Catatan; Primary Key
tanggal DateTime - Tanggal Catatan
userid Integer 11 Pengirim Catatan
judul Varchar 100 Judul Catatan
isi LongText - Isi Catatan
gambar Varchar 300 Gambar Catatan
Sumber: Data Diolah
20. Tabel Catatan Post

Fungsi : Untuk menyimpan data Komentar Catatan
Jumlah Field :8
Foreign Key : idcatatan, userid
Tabel 4.20 Struktur Tabel Catatan Post

idcatatan Integer 11 Kode Catatan
Sumber: Data Diolah
75
21. Tabel Galeri

Fungsi : Untuk menyimpan data Album Foto
Jumlah Field :7
Primary Key : idgaleri (auto_increment)
Tabel 4.21 Struktur Tabel Galeri

idgaleri Integer 11 Kode Album; Primary Key
tanggal DateTime - Tanggal Galeri
userid Integer 11 Pengirim Galeri
judul Varchar 100 Judul Galeri
uraian LongText - Uraian Galeri
Sumber: Data Diolah
22. Tabel Galeri Foto

Fungsi : Untuk menyimpan data Foto pada Album
Jumlah Field :7
Primary Key : idfoto (auto_increment)
Foreign Key : idgaleri, userid
Tabel 4.22 Struktur Tabel Galeri Foto

idfoto Integer 11 Id Foto; Primary Key
idgaleri Integer 11 Kode Album
tanggal DateTime - Tanggal Foto
userid Integer 11 Pengirim Foto
foto Varchar 300 File Foto
uraian Varchar 200 Uraian Foto
sampul Integer 5 Foto Sampul Album
Sumber: Data Diolah
76
23. Tabel Galeri Post

Fungsi : Untuk menyimpan data Komentar Foto Galeri
Jumlah Field :8
Foreign Key : idgaleri, userid
Tabel 4.23 Struktur Tabel Galeri Post

idgaleri Integer 11 Kode Galeri
Sumber: Data Diolah
24. Tabel Download

Fungsi : Untuk menyimpan data File Download
Jumlah Field : 11
Primary Key : iddownload (auto_increment)
Tabel 4.24 Struktur Tabel Download

iddownload Integer 11 Kode Download; Primary Key
tanggal DateTime - Tanggal Upload
idkategori Integer 11 Kode Kategori File Download
userid Integer 11 Pengirim File Download
judul Varchar 100 Judul File Download
uraian LongText - Uraian File Download
file Varchar 300 Konten File Download
gambar Varchar 300 Gambar Konten Download
login TinyInt 1 Membutuhkan Akses Login
Sumber: Data Diolah
77
25. Tabel Download Post

Fungsi : Untuk menyimpan data Komentar Download
Jumlah Field :8
Foreign Key : iddownload, userid
Tabel 4.25 Struktur Tabel Download Post

iddownload Integer 11 Kode Download; Foreign Key
Sumber: Data Diolah
26. Tabel Konten Kategori

Fungsi : Untuk menyimpan data Kategori Konten
Jumlah Field :3
Tabel 4.26 Struktur Tabel Konten Kategori

idkategori Integer 11 Kode Kategori; Primary Key
kategori Varchar 50 Nama Kategori
tipe Varchar 10 Tipe Konten
Sumber: Data Diolah
78
27. Tabel Kegiatan

Fungsi : Untuk menyimpan data Jadwal Kegiatan Kampus
Jumlah Field : 14
Primary Key : idkegiatan (auto_increment)
Tabel 4.27 Struktur Tabel Kegiatan

idkegiatan Integer 11 Kode Kegiatan; Primary Key
tanggal DateTime - Tanggal Kegiatan Dikirim
userid Integer 11 Pengirim Kegiatan
judul Varchar 100 Judul Kegiatan
tempat Varchar 50 Tempat Kegiatan
alamat Varchar 50 Alamat Tempat Kegiatan
kota Varchar 50 Kota Tempat Kegiatan
tanggal_kegiatan DateTime - Tanggal Kegiatan Dilaksanakan
isi LongText - Uraian Kegiatan
sifat Varchar 20 Sifat Kegiatan
kontak Varchar 50 Kontak Person
gambar Varchar 300 Gambar Kegiatan
Sumber: Data Diolah
28. Tabel Kegiatan Post

Fungsi : Untuk menyimpan data Komentar Kegiatan
Jumlah Field :8
Foreign Key : idkegiatan, userid
Tabel 4.28 Struktur Tabel Kegiatan Post

idkegiatan Integer 11 Kode Kegiatan
Sumber: Data Diolah
79
29. Tabel Loker

Fungsi : Untuk menyimpan data Informasi Lowongan Kerja
Jumlah Field : 19
Primary Key : idloker (auto_increment)
Tabel 4.29 Struktur Tabel Loker

idloker Integer 11 Kode Loker; Primary Key
perusahaan Varchar 100 Nama Perusahaan
alamat Text - Alamat Perusahaan
posisi Varchar 50 Posisi / Jabatan
jenis_kelamin Varchar 20 Jenis Kelamin
gaji Varchar 20 Gaji Yang Ditawarkan
pendidikan Varchar 50 Pendidikan Yang Diminta
usia_min Varchar 2 Usia Minimal
usia_mak Varchar 2 Usia Maksimal
persyaratan Text - Persyaratan Melamar
alamat_lamaran Varchar 100 Alamat Lamaran
uraian Text - Uraian Konten
tanggal_tutup DateTime - Tanggal Penutupan
kontak Varchar 20 Kontak Person
gambar Varchar 300 Gambar Konten
Sumber: Data Diolah
30. Tabel Loker Post

Fungsi : Untuk menyimpan data Komentar Informasi
Lowongan Kerja
Jumlah Field :8
Foreign Key : idloker, userid
Tabel 4.30 Struktur Tabel Loker Post

idloker Integer 11 Kode Lowongan Kerja
80

Sumber: Data Diolah
31. Tabel Elearning Header

Fungsi : Untuk menyimpan data Judul Header E-Learning
Jumlah Field :4
Primary Key : idheader (auto_increment)
Tabel 4.31 Struktur Tabel Elearning Header

idheader TinyInt 3 Kode Header; Primary Key
header Varchar - Judul Header
urut TinyInt 3 Urutan Judul Header
Sumber: Data Diolah
32. Tabel Elearning Kategori

Fungsi : Untuk menyimpan data Kategori E-Learning
Jumlah Field :5
Foreign Key : idheader
Tabel 4.32 Struktur Tabel Elearning Kategori

idkategori TinyInt 3 Kode Kategori; Primary Key
idheader TinyInt 3 Kode Header
kategori Varchar 300 Kategori
urut TinyInt 3 Urutan Kategori
Sumber: Data Diolah
81
33. Tabel Elearning

Fungsi : Untuk menyimpan data Konten E-Learning
Jumlah Field : 14
Primary Key : idelearning (auto_increment)
Foreign Key : idkategori, userid
Tabel 4.33 Struktur Tabel Elearning

idelearning Integer 11 Kode Elearning; Primary Key
idkategori TinyInt 3 Kode Kategori Elearning
judul Varchar 100 Judul Konten
penulis Varchar 100 Penulis Konten
publisher Varchar 50 Penerbit Konten
bahasa Varchar 20 Bahasa Konten
tahun_terbit Varchar 4 Tahun Terbit Konten
isi LongText - Uraian Konten
file Varchar 300 File Konten
login TinyInt 1 Membutuhkan Akses Login
Sumber: Data Diolah
34. Tabel Elearning Post

Fungsi : Untuk menyimpan data Komentar E-Learning
Jumlah Field :8
Foreign Key : idelearning, userid
Tabel 4.34 Struktur Tabel Elearning Post

idelearning Integer 11 Kode E-Learning
Sumber: Data Diolah
82
35. Tabel Pesan

Fungsi : Untuk menyimpan data Pesan (Private Message)
Jumlah Field :7
Primary Key : idpesan (auto_increment)
Foreign Key : ke_userid, dari_userid
Tabel 4.35 Struktur Tabel Pesan

idpesan BigInt 20 Id Pesan; Primary Key
tanggal DateTime - Tanggal Pesan
ke_userid Integer 11 Kepada User ID
dari_userid Integer 11 Dari User ID
isi LongText - Isi Pesan
dibaca TinyInt 1 Dibaca / Belum Dibaca
kode Varchar 30 Kode Percakapan (Conversation)
Sumber: Data Diolah
36. Tabel Pemberitahuan

Fungsi : Untuk menyimpan data Pemberitahuan
Jumlah Field :8
Primary Key : idpemberitahuan (auto_increment)
Foreign Key : idkonten, ke_userid, dari_userid
Tabel 4.36 Struktur Tabel Pemberitahuan

idpemberitahuan BigInt 20 Id Pemberitahuan; Primary Key
tanggal DateTime - Tanggal Pemberitahuan
tipe Varchar 20 Tipe Pemberitahuan
idkonten BigInt 20 Kode Konten
ke_userid Integer 11 Kepada User ID
dari_userid Integer 11 Dari User ID
url Varchar 300 Link Konten
dibaca TinyInt 1 Dibaca / Belum Dibaca
Sumber: Data Diolah
83
37. Tabel Event

Fungsi : Untuk menyimpan data event-event pengguna
Jumlah Field :5
Primary Key : idevent (auto_increment)
Foreign Key : idkonten, userid
Tabel 4.37 Struktur Tabel Event

idevent BigInt 20 Id Event; Primary Key
tanggal DateTime - Tanggal Event
userid Integer 11 User ID
tipe Varchar 15 Tipe Konten
idkonten BigInt 20 Kode Konten
Sumber: Data Diolah
38. Tabel Buku Tamu

Fungsi : Untuk menyimpan data Buku Tamu
Jumlah Field :6
Primary Key : idbukutamu (auto_increment)
Tabel 4.38 Struktur Tabel Buku Tamu

idbukutamu Integer 11 Kode Buku Tamu; Primary Key
userid Integer 11 Pengirim Komentar (Admin)
nama Varchar 50 Pengirim Komentar (Tamu)
isi Text - Isi Komentar
ip Varchar 20 IP Pengirim Komentar
Sumber: Data Diolah
84
4.3 Perancangan Arsitektural (Architectural Design)
4.3.1 Struktur Menu
Berikut adalah Struktur Menu pada Website:
WEBSITE
Halaman Publik Halaman Member Halaman Administrator
Home Page Beranda Kelola User
Registrasi Profil / Edit Profil Set Level user
Forum Pengaturan Hapus User
E-Learning Kelola Akun Kelola Konten
Kelola Kirim, Edit,

Galeri Foto
Password Hapus
Pengumuman
Artikel Kelola Privasi

Kirim, Edit,
Hapus Artikel
Berita Pesan
Kirim, Edit,
Cerpen Pemberitahuan Hapus Berita
Kirim, Edit,
Jadwal Kegiatan Catatan
Hapus Galeri
Foto
Lowongan Kerja Kirim Catatan

Kirim, Edit,
Hapus Catatan
Catatan Edit Catatan
Kirim, Edit,
Download Hapus Catatan Hapus Cerpen
Publish / Kirim, Edit,

Pencarian
Unpublish Catatan Hapus Jadwal
Kegiatan
Profil User Forum

Kirim, Edit, Hapus
Informasi
Lowongan Kerja
Buku Tamu Kirim Thread
Kirim, Edit,
Hapus Konten
Edit Thread Download
Kirim, Edit,
Hapus Thread
Hapus Konten
E-Learning
Buka / Tutup
Thread
Kelola Forum
Publish /
Unpublish Thread
Kirim Pesan Ke Member
Keluar (Log Out)

Kelola Kategori
Kelola Buku Tamu
Keluar (Log Out)
Gambar 4.29 Struktur Menu Website

85
4.3.2 Struktur Program
a. Struktur Program Registrasi
REGISTRASI
INPUT PROSES OUTPUT
Nama, Tanggal Lahir, Jenis Verifikasi & Simpan Data Data User
Kelamin, Email, Password
Gambar 4.30 Struktur Program Registrasi

b. Struktur Program Login
LOGIN
INPUT PROSES OUTPUT
Email dan Password Kirim & Verifikasi Data Halaman Pengguna
Gambar 4.31 Struktur Program Login

c. Struktur Program Pesan
PESAN
INPUT PROSES OUTPUT
Isi Pesan, Tujuan Kirim & Verifikasi Data Pesan Terkirim,

Pemberitahuan
Gambar 4.32 Struktur Program Pesan

86
d. Struktur Program Komentar
KOMENTAR
INPUT PROSES OUTPUT
Isi Komentar, Tujuan Simpan & Verifikasi Data Komentar, Pemberitahuan
Gambar 4.33 Struktur Program Komentar

e. Struktur Program Status
STATUS
INPUT PROSES OUTPUT
Isi Status Simpan & Verifikasi Data Status Pengguna
Gambar 4.34 Struktur Program Status

f. Struktur Program Profil
PROFIL
INPUT PROSES OUTPUT

Informasi Umum, Kontak, Simpan & Verifikasi Data Profil Pengguna
Aktivitas & Pekerjaan,
Pendidikan, Tentang User,
Foto Profil
Gambar 4.35 Struktur Program Profil

87
g. Struktur Program Forum
FORUM
INPUT PROSES OUTPUT
Kirim Thread Baru Verifikasi Data, Simpan Data, Thread Forum

Update Data, Publish /
Unpublish Thread, Buka /
Tutup Thread, Hapus Thread
Gambar 4.36 Struktur Program Forum

h. Struktur Program Konten
KONTEN
INPUT PROSES OUTPUT
Kirim Konten Baru Verifikasi Data, Simpan Data, Halaman Konten

Update Data, Publish /
Unpublish Konten, Hapus
Konten
Gambar 4.37 Struktur Program Konten

i. Struktur Program Pengaturan
PENGATURAN
INPUT PROSES OUTPUT
Pengaturan Akun, Privasi dan Verifikasi Data, Simpan Data, Halaman Pengaturan
Password Update Data
Gambar 4.38 Struktur Program Pengaturan

88
4.4 Perancangan Prosedural (Procedural Design)
4.4.1 Flowchart Sistem
MULAI
REGISTRASI KELUAR
KELUAR LOGIN
MENU UTAMA WEBSITE
PILIH MENU
EDIT PROFIL KIRIM KONTEN KIRIM KOMENTAR PENGATURAN CEK PEMBERITAHUAN CEK PESAN
Kirim
Isi Isi Isi Isi Verify
/ Balas
Data Data Data Data Data
Pesan
SIMPAN DATA SIMPAN DATA
KELUAR
SELESAI
Gambar 4.39 Flowchart Sistem

89
4.4.2 Flowchart Program
a. Flowchart Program Proses Input Data
MULAI
Login
KELUAR Login
Ditolak
Login Diterima
Tidak
KELUAR Cek Level User Simpan Data SELESAI
Memenuhi
Memenuhi
Memenuhi
Isi Data Verifikasi Data
Tidak
Memenuhi
Gambar 4.40 Flowchart Program Proses Input Data

b. Flowchart Program Proses Edit Data
MULAI
Login
KELUAR Login Update Data SELESAI
Ditolak
Memenuhi
Login Diterima
Tidak Cek Level User,

KELUAR Cek Owner
Verifikasi Data
Memenuhi
Memenuhi Memenuhi
Tampil
Edit Data
Data
Tidak
Memenuhi
Gambar 4.41 Flowchart Program Proses Edit Data

90
c. Flowchart Program Proses Hapus Data
MULAI
Login
KELUAR Login
Ditolak
Login Diterima
Tidak Cek Level User,

KELUAR Cek Owner
Hapus Data SELESAI
Memenuhi
Delete Request
Memenuhi
Tampil
Hapus Data Batal KELUAR
Data
Gambar 4.42 Flowchart Program Proses Hapus Data

91
4.5 Perancangan Antarmuka (Interface Design)
Berikut adalah Perancangan Antarmuka (Interface Design) untuk setiap
halaman pada website:
1. Desain Antar Muka Halaman Utama (Homepage)
E-Learning Galeri Forum Buku Tamu Beranda
Pencarian . . . Mading
Mading Artikel
Artikel Berita
Berita Cerpen
Cerpen Kegiatan
Kegiatan Loker
Loker Catatan
Catatan Download
Download
KONTEN
Email
Password
KONTEN
Tetap
Tetap Masuk
Masuk LOGIN
Registrasi
Registrasi .. .. .. Lupa
Lupa Password?
Password?
KONTEN
FOOTER
960 px
Gambar 4.43 Desain Antar Muka Halaman Utama (Homepage)

2. Desain Antar Muka Halaman Registrasi
Mading Artikel
Artikel Berita
Berita Cerpen
Cerpen Kegiatan
Kegiatan Loker
Loker Catatan
Catatan Download
Download
Nama Legkap *
Tanggal Lahir * Tanggal: Bulan: Tahun:
Jenis Kelamin * Laki-laki Perempuan
E-mail *
Password *
Konfirmasi Password *
Mendaftar
FOOTER
960 px
Gambar 4.44 Desain Antar Muka Halaman Registrasi

92
3. Desain Antar Muka Halaman Beranda
Mading Artikel
Artikel Berita
Berita Cerpen
Cerpen Kegiatan
Kegiatan Loker
Loker Catatan
Catatan Download
Download
Isi Status
MEMBER BARU BERGABUNG
Sisipkan Emoticons . . . Bagikan
KONTEN STATUS EVENT TERBARU
FOOTER
960 px
Gambar 4.45 Desain Antar Muka Halaman Beranda

4. Desain Antar Muka Halaman Buku Tamu
Mading Artikel
Artikel Berita
Berita Cerpen
Cerpen Kegiatan
Kegiatan Loker
Loker Catatan
Catatan Download
Download
KOMENTAR KONTEN
KONTEN
Nama . . .
Isi Komentar . . .
Security Code . . .
Kirim Komentar
FOOTER
960 px
Gambar 4.46 Desain Antar Muka Halaman Buku Tamu

93
5. Desain Antar Muka Halaman Awal Forum
Mading Artikel
Artikel Berita
Berita Cerpen
Cerpen Kegiatan
Kegiatan Loker
Loker Catatan
Catatan Download
Download
TOP COMMENTS | TOP VIEWS | TERBARU
KONTEN BERDASARKAN KATEGORI
FOOTER
960 px
Gambar 4.47 Desain Antar Muka Halaman Awal Forum

6. Desain Antar Muka Halaman Threads Forum
Mading Artikel
Artikel Berita
Berita Cerpen
Cerpen Kegiatan
Kegiatan Loker
Loker Catatan
Catatan Download
Download
LIST THREADS THREADS TERPOPULER
FOOTER
960 px
Gambar 4.48 Desain Antar Muka Halaman Threads Forum

94
7. Desain Antar Muka Halaman Thread Lengkap
Mading Artikel
Artikel Berita
Berita Cerpen
Cerpen Kegiatan
Kegiatan Loker
Loker Catatan
Catatan Download
Download
THREAD LENGKAP
KOMENTAR THREAD
Isi Komentar . . .
Kirim Komentar
FOOTER
960 px
Gambar 4.49 Desain Antar Muka Halaman Thread Lengkap

8. Desain Antar Muka Halaman Awal Berita, Artikel, Cerpen dan
Download
Mading Artikel
Artikel Berita
Berita Cerpen
Cerpen Kegiatan
Kegiatan Loker
Loker Catatan
Catatan Download
Download
KATEGORI KONTEN
KONTEN
KONTEN TERPOPULER
FOOTER
960 px
Gambar 4.50 Desain Antar Muka Halaman Awal Berita,

Artikel, Cerpen dan Download
95
9. Desain Antar Muka Halaman Awal Mading, Kegiatan, Lowongan
Kerja, Catatan dan Galeri
Mading Artikel
Artikel Berita
Berita Cerpen
Cerpen Kegiatan
Kegiatan Loker
Loker Catatan
Catatan Download
Download
KONTEN KONTEN TERPOPULER
FOOTER
960 px
Gambar 4.51 Desain Antar Muka Halaman Awal Mading, Kegiatan,

Lowongan Kerja, Catatan dan Galeri
10. Desain Antar Muka Halaman Lengkap Berita, Artikel, Cerpen,
Download, Mading, Kegiatan, Lowongan Kerja dan Catatan
Mading Artikel
Artikel Berita
Berita Cerpen
Cerpen Kegiatan
Kegiatan Loker
Loker Catatan
Catatan Download
Download
KONTEN LENGKAP
KOMENTAR KONTEN
Isi Komentar . . .
Kirim Komentar
FOOTER
960 px
Gambar 4.52 Desain Antar Muka Halaman Lengkap Berita, Artikel,

Cerpen, Download, Mading, Kegiatan, Lowongan Kerja dan Catatan
96
11. Desain Antar Muka Halaman Lengkap Galeri
Mading Artikel
Artikel Berita
Berita Cerpen
Cerpen Kegiatan
Kegiatan Loker
Loker Catatan
Catatan Download
Download
FOTO FOTO FOTO FOTO
DESKRIPSI KONTEN
KOMENTAR KONTEN
Isi Komentar . . .
Kirim Komentar
FOOTER
960 px
Gambar 4.53 Desain Antar Muka Halaman Lengkap Galeri

12. Desain Antar Muka Halaman Awal E-Learning
Mading Artikel
Artikel Berita
Berita Cerpen
Cerpen Kegiatan
Kegiatan Loker
Loker Catatan
Catatan Download
Download
KONTEN PER KATEGORI TOP COMMENTS | TOP VIEWS | TERBARU
FOOTER
960 px
Gambar 4.54 Desain Antar Muka Halaman Awal E-Learning

97
13. Desain Antar Muka Halaman E-Learning Per Kategori
Mading Artikel
Artikel Berita
Berita Cerpen
Cerpen Kegiatan
Kegiatan Loker
Loker Catatan
Catatan Download
Download
LIST KONTEN KONTEN TERPOPULER
FOOTER
960 px
Gambar 4.55 Desain Antar Muka Halaman E-Learning Per Kategori

14. Desain Antar Muka Halaman Lengkap E-Learning
Mading Artikel
Artikel Berita
Berita Cerpen
Cerpen Kegiatan
Kegiatan Loker
Loker Catatan
Catatan Download
Download
KONTEN LENGKAP
KOMENTAR KONTEN
Isi Komentar . . .
Kirim Komentar
FOOTER
960 px
Gambar 4.56 Desain Antar Muka Halaman Lengkap E-Learning

98
15. Desain Antar Muka Halaman Pesan
Mading Artikel
Artikel Berita
Berita Cerpen
Cerpen Kegiatan
Kegiatan Loker
Loker Catatan
Catatan Download
Download
PESAN MASUK EVENT TERBARU
FOOTER
960 px
Gambar 4.57 Desain Antar Muka Halaman Pesan

16. Desain Antar Muka Halaman Pemberitahuan
Mading Artikel
Artikel Berita
Berita Cerpen
Cerpen Kegiatan
Kegiatan Loker
Loker Catatan
Catatan Download
Download
PEMBERITAHUAN BARU
EVENT TERBARU
PEMBERITAHUAN LAMA
FOOTER
960 px
Gambar 4.58 Desain Antar Muka Halaman Pemberitahuan

99
17. Desain Antar Muka Halaman Pengaturan Password
Mading Artikel
Artikel Berita
Berita Cerpen
Cerpen Kegiatan
Kegiatan Loker
Loker Catatan
Catatan Download
Download
Password
Password harus
harus terdiri
terdiri dari
dari hurup
hurup atau
atau angka
angka atau
atau gabungan
gabungan keduanya.
keduanya.
Password Lama *
Password Baru *
Konfirmasi *
CAPTCHA CODE
Security Code *
Simpan Perubahan
FOOTER
960 px
Gambar 4.59 Desain Antar Muka Halaman Pengaturan Password

18. Desain Antar Muka Halaman Pengaturan Privasi
Mading Artikel
Artikel Berita
Berita Cerpen
Cerpen Kegiatan
Kegiatan Loker
Loker Catatan
Catatan Download
Download
Pengaturan
Pengaturan Privasi
Privasi untuk
untuk Profil
Profil dan
dan Informasi
Informasi Pribadi
Pribadi Anda.
Anda.
Perbolehkan Publik Melihat Profil Saya
* Tampilkan Alamat E-mail Saya di Halaman Profil
* Tampilkan Tanggal Lahir Saya di Halaman Profil
* Tampilkan Jenis Kelamin Saya di Halaman Profil
Tampilkan Saya di List Pencarian User
( * ) Berlaku hanya jika Profil diaktifkan!
Simpan Perubahan
FOOTER
960 px
Gambar 4.60 Desain Antar Muka Halaman Pengaturan Privasi

100
19. Desain Antar Muka Halaman Pengaturan Akun
Mading Artikel
Artikel Berita
Berita Cerpen
Cerpen Kegiatan
Kegiatan Loker
Loker Catatan
Catatan Download
Download
Dengan
Dengan menambahkan
menambahkan alamat
alamat e-mail
e-mail baru,
baru, maka
maka Anda
Anda dapat
dapat mengganti
mengganti alamat
alamat e-mail
e-mail default
default Anda
Anda saat
saat ini
ini
dan
dan melakukan
melakukan login
login dengan
dengan e-mail
e-mail tersebut.
tersebut. Anda
Anda dapat
dapat menambahkan
menambahkan maksimal
maksimal 33 alamat
alamat e-mail.
e-mail.
Isi
Isi E-mail
E-mail dengan
dengan alamat
alamat E-mail
E-mail yang
yang valid,
valid, karena
karena Kode
Kode Konfirmasi
Konfirmasi akan
akan dikirim
dikirim lewat
lewat E-mail
E-mail tersebut.
tersebut.
Email Anda Sekarang:
E-mail Baru *
Password *
CAPTCHA CODE
Security Code *
Tambahkan E-mail
Dengan
Dengan menon-aktifkan
menon-aktifkan Akun,
Akun, maka
maka akan
akan membuat
membuat Akun
Akun Anda
Anda tidak
tidak aktif
aktif dan
dan tidak
tidak terlihat
terlihat oleh
oleh publik
publik secara
secara permanen.
permanen.
Untuk
Untuk memulihkan
memulihkan Akun
Akun Anda
Anda di
di kemudian
kemudian hari,
hari, silahkan
silahkan Anda
Anda login
login kembali.
kembali.
Password *
CAPTCHA CODE
Security Code *
Non-aktifkan Akun
FOOTER
960 px
Gambar 4.61 Desain Antar Muka Halaman Pengaturan Akun

20. Desain Antar Muka Halaman Kirim Pesan
Mading Artikel
Artikel Berita
Berita Cerpen
Cerpen Kegiatan
Kegiatan Loker
Loker Catatan
Catatan Download
Download
Isi Pesan *
Kirim Pesan
FOOTER
960 px
Gambar 4.62 Desain Antar Muka Halaman Kirim Pesan

101
21. Desain Antar Muka Halaman Kirim Pesan ke Member
Mading Artikel
Artikel Berita
Berita Cerpen
Cerpen Kegiatan
Kegiatan Loker
Loker Catatan
Catatan Download
Download
Pilih Tujuan * Hanya ke Member Aktif

Isi Pesan *
Kirim Pesan
FOOTER
960 px
Gambar 4.63 Desain Antar Muka Halaman Kirim Pesan ke Member

22. Desain Antar Muka Halaman Kirim / Edit Berita
Mading Artikel
Artikel Berita
Berita Cerpen
Cerpen Kegiatan
Kegiatan Loker
Loker Catatan
Catatan Download
Download
Silahkan
Silahkan isi
isi data
data dengan
dengan lengkap
lengkap dan
dan benar!
benar!
Kategori * Pilih Kategori . . .
Judul Berita *
Gambar (Opsional) Browse
Sumber (Opsional)
Isi Berita *
Publikasikan Konten Ini Sekarang
Kirim Berita
FOOTER
960 px
Gambar 4.64 Desain Antar Muka Halaman Kirim / Edit Berita

102
23. Desain Antar Muka Halaman Kirim / Edit Artikel
Mading Artikel
Artikel Berita
Berita Cerpen
Cerpen Kegiatan
Kegiatan Loker
Loker Catatan
Catatan Download
Download
Silahkan
Silahkan isi
isi data
data dengan
dengan lengkap
lengkap dan
dan benar!
benar!
Judul Artikel *
Isi Artikel *
Kirim Artikel
FOOTER
960 px
Gambar 4.65 Desain Antar Muka Halaman Kirim / Edit Artikel

24. Desain Antar Muka Halaman Kirim / Edit Catatan
Mading Artikel
Artikel Berita
Berita Cerpen
Cerpen Kegiatan
Kegiatan Loker
Loker Catatan
Catatan Download
Download
Mohon
Mohon tidak
tidak mengirim
mengirim konten-konten
konten-konten yang
yang dilarang,
dilarang, misalnya
misalnya kekerasan,
kekerasan, pornografi,
pornografi, penghinaan
penghinaan dan
dan sejenisnya!
sejenisnya!
Administrator
Administrator akan
akan menghapus
menghapus Konten
Konten Anda,
Anda, jika
jika melanggar
melanggar ketentuan
ketentuan di
di atas.
atas. Terima
Terima kasih.
kasih.
Judul Catatan *
Isi Catatan *
Kirim Catatan
FOOTER
960 px
Gambar 4.66 Desain Antar Muka Halaman Kirim / Edit Catatan

103
25. Desain Antar Muka Halaman Kirim / Edit Pengumuman
Mading Artikel
Artikel Berita
Berita Cerpen
Cerpen Kegiatan
Kegiatan Loker
Loker Catatan
Catatan Download
Download
Pengumuman
Pengumuman untuk
untuk hal-hal
hal-hal yang
yang bersifat
bersifat penting
penting dan
dan sementara.
sementara.
Judul Pengumuman *
Isi Pengumuman *
Kirim Pengumuman
FOOTER
960 px
Gambar 4.67 Desain Antar Muka Halaman Kirim / Edit Pengumuman

26. Desain Antar Muka Halaman Kirim / Edit Cerpen
Mading Artikel
Artikel Berita
Berita Cerpen
Cerpen Kegiatan
Kegiatan Loker
Loker Catatan
Catatan Download
Download
Silahkan
Silahkan isi
isi data
data dengan
dengan lengkap
lengkap dan
dan benar!
benar!
Judul Cerpen *
Isi Cerpen *
Kirim Cerpen
FOOTER
960 px
Gambar 4.68 Desain Antar Muka Halaman Kirim / Edit Cerpen

104
27. Desain Antar Muka Halaman Kirim / Edit Kegiatan
Mading Artikel
Artikel Berita
Berita Cerpen
Cerpen Kegiatan
Kegiatan Loker
Loker Catatan
Catatan Download
Download
Kirim
Kirim kegiatan
kegiatan seputar
seputar event-event
event-event kampus
kampus dan
dan pelaksanaan
pelaksanaan kegiatan
kegiatan lainnya.
lainnya.
Nama Kegiatan *
Tempat Kegiatan *
Alamat *
Kota *
Waktu Kegiatan * Tanggal: Bulan: Tahun: Jam: Menit: Detik:
Sifat Kegiatan * Sifat Kegiatan . . .
Kontak Person
Uraian Kegiatan *
Kirim Kegiatan
FOOTER
960 px
Gambar 4.69 Desain Antar Muka Halaman Kirim / Edit Kegiatan

28. Desain Antar Muka Halaman Upload File
Mading Artikel
Artikel Berita
Berita Cerpen
Cerpen Kegiatan
Kegiatan Loker
Loker Catatan
Catatan Download
Download
File
File yang
yang diupload
diupload harus
harus memiliki
memiliki format
format .zip
.zip atau
atau .pdf
.pdf dengan
dengan ukuran
ukuran maksimal
maksimal 55 mb.
mb.
Jika
Jika upload
upload mengalami
mengalami kegagalan,
kegagalan, kurangi
kurangi ukuran
ukuran file
file atau
atau memecahnya
memecahnya (split)
(split) menjadi
menjadi beberapa
beberapa bagian!
bagian!
Judul File *
Konten File * Browse
Memerlukan Login Untuk Download Konten Ini

Uraian *
Upload File
FOOTER
960 px
Gambar 4.70 Desain Antar Muka Halaman Upload File

105
29. Desain Antar Muka Halaman Kirim / Edit Lowongan Kerja
Mading Artikel
Artikel Berita
Berita Cerpen
Cerpen Kegiatan
Kegiatan Loker
Loker Catatan
Catatan Download
Download
Kirim
Kirim Informasi
Informasi Lowongan
Lowongan Kerja.
Kerja. Mohon
Mohon diisi
diisi lengkap
lengkap dan
dan benar!
benar!
Nama Perusahaan *
Alamat Perusahaan *
Posisi / Jabatan *
Gaji Yang Ditawarkan
Jenis Kelamin * Jenis Kelamin:
Pendidikan Minimal
Usia Minimal (Opsional)
Usia Maksimal (Opsional)
Persyaratan *
Alamat Lamaran *
Tanggal Penutupan * Tanggal: Bulan: Tahun:
Kontak Person (Opsional)
Keterangan (Opsional)
Kirim Informasi
FOOTER
960 px
Gambar 4.71 Desain Antar Muka Halaman Kirim / Edit Lowongan Kerja
30. Desain Antar Muka Halaman Kirim / Edit Album Foto
Mading Artikel
Artikel Berita
Berita Cerpen
Cerpen Kegiatan
Kegiatan Loker
Loker Catatan
Catatan Download
Download
Sebelum
Sebelum mengupload
mengupload foto
foto ke
ke galeri,
galeri, Album
Album Foto
Foto harus
harus dibuat
dibuat terlebih
terlebih dahulu!
dahulu!
Judul Album *
Deskripsi *
Buat Album Foto
FOOTER
960 px
Gambar 4.72 Desain Antar Muka Halaman Kirim / Edit Album Foto
106
31. Desain Antar Muka Halaman Upload Foto ke Album
Mading Artikel
Artikel Berita
Berita Cerpen
Cerpen Kegiatan
Kegiatan Loker
Loker Catatan
Catatan Download
Download
Foto
Foto yang
yang diupload
diupload harus
harus memiliki
memiliki format
format .jpg,
.jpg, .jpeg,
.jpeg, .gif,
.gif, atau
atau .png
.png dengan
dengan ukuran
ukuran maksimal
maksimal 11 mb
mb // foto.
foto.
Jika
Jika mengalami
mengalami kegagalan
kegagalan pada
pada saat
saat upload,
upload, kurangi
kurangi jumlah
jumlah foto
foto yang
yang diupload.
diupload.
Foto 1 Browse
Foto 2 Browse
Foto 3 Browse
Foto 4 Browse
Foto 5 Browse
Foto 6 Browse
Foto 7 Browse
Foto 8 Browse
Foto 9 Browse
Foto 10 Browse
Uraian (Opsional)
Upload Foto
FOOTER
960 px
Gambar 4.73 Desain Antar Muka Halaman Upload Foto ke Album

32. Desain Antar Muka Halaman Kelola Foto Album
Mading Artikel
Artikel Berita
Berita Cerpen
Cerpen Kegiatan
Kegiatan Loker
Loker Catatan
Catatan Download
Download
** Klik
Klik pada
pada foto
foto untuk
untuk tampilan
tampilan penuh!
penuh!
Uraian Foto (Maksimal 200 karakter):
FOTO 1
Simpan
Set Sampul Album Hapus Foto
Uraian Foto (Maksimal 200 karakter):
FOTO . . . n
Simpan
Set Sampul Album Hapus Foto
FOOTER
960 px
Gambar 4.74 Desain Antar Muka Halaman Kelola Foto Album

107
33. Desain Antar Muka Halaman Kirim / Edit E-Learning
Mading Artikel
Artikel Berita
Berita Cerpen
Cerpen Kegiatan
Kegiatan Loker
Loker Catatan
Catatan Download
Download
File
File yang
yang diupload
diupload harus
harus memiliki
memiliki format
format .zip
.zip atau
atau .pdf
.pdf dengan
dengan ukuran
ukuran maksimal
maksimal 55 mb.
mb.
Jika
Jika upload
upload mengalami
mengalami kegagalan,
kegagalan, kurangi
kurangi ukuran
ukuran file
file atau
atau memecahnya
memecahnya (split)
(split) menjadi
menjadi beberapa
beberapa bagian!
bagian!
Mohon
Mohon untuk
untuk mengupload
mengupload konten
konten yang
yang sesuai
sesuai dengan
dengan kategori
kategori yang
yang telah
telah ditentukan!
ditentukan!
Judul Konten *
Penulis (Opsional)
Publisher (Opsional)
Bahasa Tulisan * Bahasa Tulisan . . .
Tahun Terbit (Opsional)
Konten File * Browse
Memerlukan Login Untuk Download Konten Ini

Uraian *
Upload Konten
FOOTER
960 px
Gambar 4.75 Desain Antar Muka Halaman Kirim / Edit E-Learning

34. Desain Antar Muka Halaman Kirim / Edit Thread Forum
Mading Artikel
Artikel Berita
Berita Cerpen
Cerpen Kegiatan
Kegiatan Loker
Loker Catatan
Catatan Download
Download
Mohon
Mohon untuk
untuk membuat
membuat thread
thread pada
pada forum
forum yang
yang sesuai
sesuai dengan
dengan topik
topik yang
yang akan
akan diperbincangkan!
diperbincangkan!
Tipe Thread * Tipe Thread . . .
Judul Thread *
Deskripsi *
Kirim Thread
FOOTER
960 px
Gambar 4.76 Desain Antar Muka Halaman Kirim / Edit Thread Forum
108
35. Desain Antar Muka Halaman Reset Password
Mading Artikel
Artikel Berita
Berita Cerpen
Cerpen Kegiatan
Kegiatan Loker
Loker Catatan
Catatan Download
Download
Untuk
Untuk dapat
dapat mereset
mereset ulang
ulang password
password Anda,
Anda, masukkan
masukkan E-mail
E-mail yang
yang Anda
Anda daftarkan
daftarkan saat
saat melakukan
melakukan registrasi!
registrasi!
Alamat E-mail *
CAPTCHA CODE
Security Code *
Reset Password
FOOTER
960 px
Gambar 4.77 Desain Antar Muka Halaman Reset Password

36. Desain Antar Muka Halaman Kirim Kode Aktivasi E-mail
Mading Artikel
Artikel Berita
Berita Cerpen
Cerpen Kegiatan
Kegiatan Loker
Loker Catatan
Catatan Download
Download
Masukkan
Masukkan E-mail
E-mail yang
yang Anda
Anda daftarkan
daftarkan saat
saat melakukan
melakukan registrasi.
registrasi. Kode
Kode Aktivasi
Aktivasi akan
akan dikirim
dikirim ke
ke alamat
alamat e-mail
e-mail tersebut.
tersebut.
Alamat E-mail *
CAPTCHA CODE
Security Code *
Kirim Ulang Kode Aktivasi
FOOTER
960 px
Gambar 4.78 Desain Antar Muka Halaman Kirim Kode Aktivasi E-mail
109
37. Desain Antar Muka Halaman Edit Profil
Mading Artikel
Artikel Berita
Berita Cerpen
Cerpen Kegiatan
Kegiatan Loker
Loker Catatan
Catatan Download
Download
Informasi Umum
Nama Lengkap: *
Tanggal Lahir: *
Tanggal: Bulan: Tahun: Tampilkan di Profil
FOTO PROFIL
Jenis Kelamin: *
Laki-laki Perempuan Tampilkan di Profil
Alamat:
Status:
Status: Browse
Agama: Upload
Hobi / Kegemaran:
Informasi Kontak
Telepon / HP:
E-mail:
Tampilkan di Profil
Messengers:
Website:
Aktivitas & Pekerjaan

Pekerjaan:
Aktivitas:
Minat / Cita-cita:
Bakat / Keahlian:
Informasi Pendidikan
SMA / Aliyah:
Perguruan Tinggi:
Kursus / Pelatihan:
Ekspresi Diri
Tentang Saya:
Simpan Perubahan
FOOTER
960 px
Gambar 4.79 Desain Antar Muka Halaman Edit Profil

110
4.6 Pemilihan Bahasa Pemrograman
Bahasa pemrograman yang digunakan dalam pembangunan aplikasi ini
adalah bahasa pemrograman PHP 5. Pemilihan ini didasarkan atas kemampuan
PHP yang cukup handal (powerfull) dalam membuat script-script pemrograman
berbasis web. Untuk mengelola data-data yang diperlukan, digunakan software
DBMS MySQL Server 5. MySQL merupakan software DBMS yang sangat
populer dan tangguh dalam mengelola database skala kecil maupun besar, serta
sangat cocok dipasangkan dengan bahasa pemrograman PHP. Selain itu,
pembuatan aplikasi ini menggunakan beberapa tools pendukung, seperti Adobe
Dreamweaver dan Adobe Photoshop. Kedua software tersebut sangatlah baik
digunakan untuk mendesain halaman-halaman situs agar tampak lebih menarik.
Berikut adalah rincian software developer dan tools pendukung yang
dipakai dalam pembuatan aplikasi ini:
A. Software Developer
1. Apache 2 dan PHP 5 untuk aplikasi Server Side,
2. MySQL 5 untuk aplikasi database (DBMS),
3. HTML 4 / xHTML 1.0, CSS dan JavaScript (jQuery) untuk markup
dan aplikasi Client Side.
B. Software / Tools Pendukung
1. XAMPP 1.7, FileZilla 3.5, SQL-Front 5.1.
2. Adobe Dreamweaver CS5 dan Adobe Photoshop CS5.

111
4.7 Pengujian Perangkat Lunak
Pengujian perangkat lunak mutlak sangat diperlukan pada aplikasi yang
dibuat untuk mengurangi atau menghilangkan terjadinya kesalahan (error) pada
saat aplikasi tersebut digunakan. Salah satu metode yang digunakan dalam
pengujian perangkat lunak adalah metode black box testing. Pengujian black box
berfokus pada pengujian persyaratan fungsional perangkat lunak, untuk
mendapatkan serangkaian kondisi input yang sesuai dengan persyaratan
fungsional suatu program.
Pada bagian ini akan diuraikan pengujian pada proses registrasi user.
Pengujian dilakukan pada saat sebelum user mengirim data ke server, dengan cara
melakukan verifikasi dan validasi data sebelum disimpan di server, agar diperoleh
input data yang sesuai dengan tipe data yang ada.
A. Unit dan Proses Pengujian
Tabel 4.39 Rincian Unit Yang Akan Diuji
Proses Uji Keterangan Jenis Pengujian

Proses Registrasi Pengujian input data Black Box
Nama, Tanggal
Lahir, Email dan
Password
Sumber: Data Diolah
Tabel 4.40 Daftar Field Yang Akan Diuji

Nama Lengkap Varchar 30 Nama Lengkap
Tanggal Lahir DateTime - Tanggal Lahir
Jenis Kelamin Varchar 9 Jenis Kelamin
Email Varchar 50 Email
Password Varchar 100 Password
Sumber: Data Diolah
112
Tabel 4.41 Ketentuan Yang Harus Dipenuhi pada Proses Pengujian
Nama Field Ketentuan

Nama Lengkap Harus diisi (maksimal 50 Karakter)
Tanggal Lahir Harus diisi lengkap (Tanggal, Bulan, Tahun)
Jenis Kelamin Harus dipilih (Laki-laki atau Perempuan)
E-mail Harus diisi (maksimal 50 Karakter)
Harus diisi (minimal 6 karakter dan maksimal
Password
20 Karakter)
Konfirmasi Harus diisi dan harus sama dengan Password
Password (minimal 6 karakter dan maksimal 20 Karakter)
Sumber: Data Diolah
B. Kasus dan Hasil Pengujian
Berikut adalah kasus dan hasil eksperimen yang diperoleh:
Tabel 4.42 Hasil Eksperimen Pengujian Perangkat Lunak
Input User Ketentuan Feedback Result

Error, Nama
User tidak mengisi Registrasi
Lengkap harus
Nama Lengkapnya Ditolak
diisi!
Error, Tanggal
User tidak mengisi Registrasi
Lahir harus diisi
Tanggal Lahirnya Ditolak
User harus lengkap!
User tidak mengisi mengisi semua Error, email Registrasi
Alamat Emailnya data yang harus diisi! Ditolak
User tidak mengisi diperlukan Error, Password Registrasi
Password harus diisi! Ditolak
Error,
User tidak mengisi Konfirmasi Registrasi
Konfirmasi Password Password harus Ditolak
diisi!
User mengisi Alamat
Emailnya dengan User harus Error, email
alamat yang tidak mengisi email yang Registrasi
valid (misalnya tanpa dengan alamat dimasukkan Ditolak
simbol @, atau tanpa yang valid tidak valid!
nama domain
113
User harus
User mengisi Alamat Error, email
mengisi email
Emailnya dengan yang Registrasi
dengan alamat
alamat yang telah dimasukkan Ditolak
email yang
terdaftar telah terdaftar!
belum terdaftar
User harus
User mengisi Error, Password
mengisi Registrasi
Password kurang dari kurang dari 6
password Ditolak
6 digit digit!
minimal 6 digit
User harus
User mengisi mengisi Error,
Konfirmasi Password konfirmasi konfirmasi Registrasi
tidak sama dengan password sesuai password tidak Ditolak
Password yang diinput dengan password cocok!
yang diinput
User harus
User mengisi semua
mengisi semua Sukses,
data yang diperlukan Registrasi
data yang registrasi
dengan benar sesuai Diterima
diperlukan sesuai berhasil!
ketentuan
ketentuan
Sumber: Data Diolah
C. Kesimpulan dari Proses Pengujian
Dengan tahapan-tahapan pengujian yang telah diuraikan sebelumnya,
maka dapat diambil kesimpulan sebagai berikut:
1. Pengujian perangkat lunak sangat penting dilakukan sebelum aplikasi di-
delivery atau dipakai oleh user.
2. Validasi data pada saat registrasi pada kasus ini sangat penting diterapkan
untuk menanggulangi kesalahan data atau tipe data yang diinput, sebelum
selanjutnya diproses dan divalidasi kembali oleh aplikasi server side.
3. Pengecekan dan validasi data seperti ini akan meringankan kerja server,
karena data diproses di sisi klien (browser pengguna).

114
4.8 Kebutuhan Perangkat Keras untuk Server
Kebutuhan perangkat keras (hardware) untuk server adalah:
1. Processor
Kecepatan 2 GHz atau yang lebih tinggi.
2. Memori (RAM)
2 GB atau lebih tinggi (tergantung jumlah klien).
3. Keyboard dan Mouse.
4. Modem dan Koneksi Internet.
4.9 Kebutuhan Perangkat Lunak untuk Server
Kebutuhan perangkat lunak (software) untuk server adalah:
1. Sistem Operasi
Microsoft Windows Server, atau Linux Server dan sejenisnya dengan
update terbaru.
2. Aplikasi Web Server
Apache atau Microsoft Internet Information Service (IIS).
3. Aplikasi Server Side
a. PHP 5.27 atau versi sesudahnya,
b. PHPMyAdmin.
4. Database Server
MySQL 5.0 atau versi sesudahnya.

115
4.10 Kebutuhan Perangkat Keras untuk Klien
Kebutuhan perangkat keras (hardware) minimum untuk klien adalah:
1. Processor
Kecepatan 600 MHz atau yang lebih tinggi.
2. Memori (RAM)
256 MB untuk Windows XP dan 1 GB untuk Windows 7/Windows 8.
3. VGA
32 MB dengan resolusi minimal 1024 x 768 piksel.
4. Keyboard dan Mouse.
5. Modem dan Koneksi Internet.
4.11 Kebutuhan Perangkat Lunak untuk Klien
Kebutuhan perangkat lunak (software) untuk klien adalah:
1. Sistem Operasi
Microsoft Windows XP, Windows 7, Windows 8, Mac OS IX, atau
berbagai variant Linux terbaru.
2. Web Browser
Untuk web browser disarankan menggunakan update terbaru yang
mendukung AJAX dan CSS 3. Versi minimum web browser yang
disarankan misalnya: Microsoft Internet Explorer 7, Mozilla Firefox 5,
Chrome 6, Opera 10 dan Apple Safari 5.

116
4.12 Publikasi Website
Jika website akan dipublikasikan secara online, maka publikasi website ini
dapat dilakukan melalui jasa penyewaan hosting pada sebuah penyedia jasa web
hosting. Berikut ini akan diuraikan gambaran proses pendaftaran nama domain
dan hosting website.
4.12.1 Registrasi Nama Domain
Registrasi nama domain untuk sebuah website bergantung dari misi atau
tujuan dari website tersebut. Karena ini bertujuan untuk promosi sekolah dan
komunitas, maka nama domain yang sesuai untuk website ini adalah .com atau
.sch.id.
4.12.2 Kapasitas Hosting
Kapasitas Penyimpanan : Minimal 200 MB (Tergantung Kebutuhan)
Kapasitas Bandwidth : Minimal 10 GB / Bulan (Tergantung
Kebutuhan)
Diperlukan juga minimal 1 Akun FTP dan 1 Akun Email.
4.13 Analisis SEO (Search Engine Optimization)
Analisis SEO (Search Engine Optimization) digunakan untuk
mengoptimalkan keberadaan website pada hasil pencarian di situs-situs mesin
pencari (Search Engine), seperti Google, Bing dan Yahoo!. Pada umumnya mesin
pencari akan meng-index suatu halaman berdasarkan judul halaman (title),

117
deskripsi website (description) dan keywords yang ditulis pada setiap halaman
web, serta konten-konten seperti teks dan gambar (image).
Cara pertama dan yang paling umum dilakukan adalah dengan
menambahkan link website pada mesin pencari. Link yang ditambahkan cukup
bagian index-nya saja, dan secara otomatis mesin pencari akan memetakan dan
meng-index seluruh halaman terkait.
Cara yang kedua adalah dengan memasukkan peta situs (site map) ke
mesin pencari. Site map biasanya memiliki format XML yang isinya merupakan
tautan / link yang ada pada situs. Cara ini lebih baik, namun memerlukan
pengetahuan dan ketelitian, terutama dalam membuat tag / sintaks XML.
4.14 Promosi dan Sosialisasi Website
Promosi serta sosialisasi website dapat dilakukan dengan banyak cara,
antara lain dengan cara mempromosikannya melalui surat kabar atau majalah,
men-share alamat / link website pada blog maupun situs lainnya. Cara efektif
untuk mempromosikan website pada saat ini adalah melalui situs jejaring sosial
seperti Facebook dan Twitter, dengan cara berbagi link di status, grup, atau
membuat halaman sendiri (fans page).

BAB V
PENUTUP
5.1 Kesimpulan
Dari hasil analisis, perancangan sistem serta pembuatan website yang telah
diuraikan pada bab sebelumnya, maka dapat diambil beberapa kesimpulan sebagai
berikut:
1. Website SMK Tunas Grafika Informatika ini dapat digunakan sebagai
alternatif media promosi dan penyebarluasan informasi kepada publik atau
pihak lain yang membutuhkan.
2. Dengan adanya website ini dapat lebih memudahkan bagi siswa untuk
mendapatkan konten-konten (file, aplikasi, modul belajar dan lain
sebagainya) secara online.
3. Dalam teknologi pemrograman aplikasi berbasis web, integrasi PHP dan
MySQL dapat dijadikan sebagai salah satu pilihan yang tepat dalam
pembuatan aplikasi web dinamis, karena keunggulannya, kelengkapan
fitur-fitur yang tersedia, serta kemudahan dalam pemakaiannya.
118
119
5.2 Saran
1. Perlu diadakan pelatihan bagi staf, dimana pelatihan tersebut akan
memberikan pengarahan kepada staf yang akan dijadikan sebagai
administrator atau pengelola website.
2. Upgrade ke paket web hosting berbayar untuk lebih meningkatkan
performa dan menghilangkan keterbatasan fasilitas.
3. Dibuatkan aplikasi web berbasis mobile, agar lebih nyaman diakses melalu
tablet atau mobile device.
4. Penggunaan protokol HTTPS untuk lebih meningkatkan keamanan,
terutama pada halaman-halaman yang memerlukan akses ke akun dan
password pengguna.
5. Dilakukan update secara berkala untuk memenuhi kebutuhan sistem yang
terus berkembang sesuai perkembangan waktu dan peningkatan kebutuhan
pengguna.
Yayasan Pendidikan Ar-Risalah Analisa
SEKOLAH MENENGAH KEJURUAN
TUNAS GRAFIKA INFORMATIKA
Program Keahlian Multimedia
Terakreditasi A
Jl. H. Ilyas No.06 PetukanganUtaraPesanggrahanJakartaSelatan 12260 Tlp. 021-
5868169 - 35966686
www.grafikainformatika.sch.id . e-mail: info@grafikainformatika.sch.id
SURAT PERNYATAAN
Yang bertanda tangan di bawah ini:
Nama : Dedy Supriadi, S.Pd, SE, M.Si

Jabatan : Kepala sekolah
Menerangkan dengan sebenarnya bahwa :

Nama : Maulana Ardi
NIM : 02140060
Adalah benar-benar telah melaksanakan penelitian di SMK Tunas Grafika Informatika terhitung sejak
30 Oktober s/d 31 Desember dalam rangka penyusunan skripsi dengan judul:
SISTEM INFORMASI PENDIDIKAN DAN PEMBELAJARAN ONLINE SMK TUNAS
GRAFIKA INFORMATIKA MENGGUNAKAN PHP
Demikian surat keterangan ini kami buat dengan sebenarnya, dan untuk dipergunakan sebagaimana
mestinya.

Kepala sekolah
Dedy Supriadi, S.Pd, SE, M.Si
1
LAPORAN BIMBINGAN SKRIPSI
STMIK MAHAKARYA
NAMA :
NIM :
PROGRAM STUDY :
JUDUL :
No. Tanggal Pembahasan Paraf Dosen
Catatan :
Jumlah Pertemuan bimbingan minimal 8 X Pertemuan
Ttd.
DOSEN PEMBIMBING
(DENI HERMAWAN, M.SI)

DAFTAR PUSTAKA
Anhar. PHP & MySQL Secara Otodidak. Jakarta: Agromedia Pustaka. 2010
Arifin, Zainal. 36 Menit Belajar Komputer: PHP dan MySQL. Jakarta: Elex
Media Komputindo. 2011
Dwi Prasetyo, Didik. 101 Tip & Trik Pemrograman PHP. Jakarta: Gramedia.
2011
Kendal, Kenneth E. Kendal, Julie E. Systems Analysis and Design, 8th Edition.
Prentice Hall. 2011
Lane, David. Williams, Hugh E. Web Database Application with PHP and
MySQL, 3rd Edition. O'Reilly. 2006
Munawar. Pemodelan Visual dengan UML. Yogyakarta: Graha Ilmu. 2005
Powers, David. PHP Solutions: Dynamic Web Design Made Easy. Apress
Company. 2006
Puji Oktavian, Diar. Menjadi Programmer Jempolan Menggunakan PHP.
Yogyakarta: Mediakom. 2011
Ramadhan, Arief. Pemrograman Web Database dengan PHP dan MySQL.
Jakarta: Elex Media Komputindo. 2006
Setiawan, Ebta. Kamus Umum Bahasa Indonesia. Jakarta: Balai Pustaka. 2006
Solichin, Achmad. Pemrograman Web dengan PHP dan MySQL. Jakarta:
Universitas Budi Luhur. 2009
Sunyoto, Andi. AJAX - Membangun Web Dengan Asynchronouse JavaScript
dan XML. Yogyakarta: Andi. 2007
Utdirartatmo, Firrar. Segudang Trik Pengembangan Situs Web (Memanfaatkan
HTML, JavaScript dan CSS Secara Kreatif). Yogyakarta: Andi. 2006
Vrana, Jakub. Achour, Mehdi. Betz, Friedhelm. Dovgal, Antony. Lopes, Nuno.
Magnusson, Hannes. Richter, Georg. Seguy, Damien. PHP 5 Manual.
PHP Official Site (http://www.php.net). 2011
http://www.php.net
http://id.wikipedia.org

Sistem Informasi Pendidikan Online SMK Tunas Grafika

Загружено:

Сведения о документе

Исходное описание:

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Sistem Informasi Pendidikan Online SMK Tunas Grafika

Загружено:

Авторское право:

Доступные форматы

SISTEM INFORMASI PENDIDIKAN DAN PEMBELAJARAN

ONLINE SMK TUNAS GRAFIKA INFORMATIKA

PROGRAM STUDI SISTEM INFORMASI

PROGRAM STUDI SISTEM INFORMASI

Diajukan untuk memenuhi salah satu persyaratan

PROGRAM STUDI SISTEM INFORMASI

Nama : MAULANA ARDI

Nomor Induk Mahasiswa : 02140060

Program Studi : Sistem Informasi

Jenjang Studi : Strata 1

Judul : Pembuatan Website Informasi Pendidikan Dan Pembelajaran

Online SMK Tunas Grafika Informatika Menggunakan PHP

Jakarta, 19 Januari 2018

(Deni Hermawan, M.Si)

Nama : MAULANA ARDI

Jakarta, 19 Januari 2018

Ketua STMIK MAHAKARYA Ketua Program Studi

(Taufik Hidayat, S.Kom., M.M) (Dian Afriady, M.Kom)

Saya yang bertanda tangan dibawah ini :

Jakarta,19 januari 2018

Pengembangan jaringan komunikasi data antar komputer menjadikan

The Development of data communications between computer networks

Assalamualaikum Wr. Wb.

Dengan memanjatkan Puji Syukur kehadirat Allah SWT, yang telah

melimpahkan rahmat serta hidayah-Nya kepada Penulis, sehingga dapat

syarat menyelesaikan program sarjana di Jurusan Sistem Informasi. Keberhasilan

1. Pembina Yayasan Mahakarya Sukses Mulia, Bapak Putu Putrayasa

Wassalamualaikum Wr. Wb.

Jakarta ,Januari 2018

Gambar 2.2 Simbol Relationship.................................................................... 16

Gambar 2.3 Simbol Atribut............................................................................. 16

Gambar 2.4 Simbol Garis................................................................................ 16

Gambar 3.1 Struktur Organisasi SMK Tunas Grafika Informatika ..........................

Gambar 3.2 Paradigma Waterfall (Classic Life Cycle) .............................................

Gambar 3.5 Use Case Diagram ................................................................................

Gambar 4.1 ERD............................................................................................. 46

Gambar 4.2 LRS ........................................................................................................

Gambar 4.3 Statechart Diagram Proses Registrasi ...................................................

Gambar 4.4 Statechart Diagram Proses Login .........................................................

Gambar 4.5 Statechart Diagram Kirim Konten ........................................................

Gambar 4.6 Statechart Diagram Edit Konten ...........................................................

Gambar 4.7 Statechart Diagram Publish / Unpublish Konten .................................

Gambar 4.8 Statechart Diagram Hapus Konten .......................................................

Gambar 4.10 Statechart Diagram Edit Catatan dan Thread Forum..........................

Gambar 4.11 Statechart Diagram Publish / Unpublish Catatan dan Thread

Gambar 4.13 Statechart Diagram Buka atau Tutup Thread Forum..........................

Gambar 4.14 Statechart Diagram Hapus Komentar .................................................

Gambar 4.15 Statechart Diagram Hapus Pesan ........................................................

Gambar 4.16 Activity Diagram Melihat Website ......................................................

Gambar 4.17 Activity Diagram Melihat Buku Tamu ................................................

Gambar 4.18 Activity Diagram Registrasi ................................................................

Gambar 4.19 Activity Diagram Melihat Halaman Konten ........................................

Gambar 4.20 Activity Diagram Download Konten ...................................................

Gambar 4.21 Activity Diagram Membuka Halaman User ........................................

Gambar 4.22 Activity Diagram Membuka Halaman Admin .....................................

Gambar 4.23 Activity Diagram Bergabung di Forum ...............................................

Gambar 4.24 Sequence Diagram...............................................................................

Gambar 4.25 Collaboration Diagram .......................................................................

Gambar 4.26 Component Diagram ...........................................................................

Gambar 4.27 Deployment Diagram ..........................................................................

Gambar 4.28 Package Diagram ................................................................................

Gambar 4.29 Struktur Menu Website........................................................................