WEBSITE
SARANA dan PRASARANA
UNIVERSITAS SANATA DHARMA
SKRIPSI
Diajukan untuk Memenuhi Salah Satu Syarat
Memperoleh Gelar Sarjana Teknik
Program Studi Teknik Informatika
Oleh:
Novy Chrisdiyanto Adi Putra
055314122
PROGRAM STUDI TEKNIK INFORMATIKA
FAKULTAS SAINS DAN TEKNOLOGI
UNIVERSITAS SANATA DHARMA
YOGYAKARTA
2010
WEBSITE of FASILITIES and INFRASTRUCTURE
Of SANATA DHARMA UNIVERSITY
A THESIS
Presented as Partial Fulfillment of the Requirements
To Obtain the Sarjana Teknik Degree
In Department of Informatics Engineering
By:
Novy Chrisdiyanto Adi Putra
055314122
INFORMATICS ENGINEERING STUDY PROGRAM
INFORMATICS ENGINEERING DEPARTMENT
FACULTY OF SCIENCE AN TECHNOLOGY
SANATA DHARMA UNIVERSITY
YOGYAKARTA
2010
MOTTO
Bangkit
dari
kegagalan
bukanlah
hal
yang
mudah.
Tetapi
ketika
kita
bisa
bangkit,
kita
akan
lebih
kuat
dari
sebelumnya.
Rencana
Tuhan
pasti
lebih
baik.
PERNYATAAN KEASLIAN KARYA
Saya menyatakan dengan sesungguhnya bahwa skripsi yang saya tulis ini tidak memuat
karya orang lain, kecuali yang telah disebutkan dalam kutipan dan daftar pustaka,
sebagaimana layaknya karya ilmiah.
Yogyakarta, 23-09-2010
Penulis
Novy Chrisdiyanto Adi Putra
LEMBAR PERNYATAAN PERSETUJUAN
PUBLIKASI KARYA ILMIAH UNTUK KEPENTINGAN AKADEMIS
Yang bertanda tangan di bawah ini, saya mahasiswa Universitas Sanata Dharma : Nama : Novy Chrisdiyanto Adi Putra
NIM : 055314122
Demi pengembangan ilmu pengetahuan, saya memberikan kepada Universitas Sanata Dharma karya ilmiah saya yang berjudul :
WEBSITE SARANA dan PRASARANA
UNIVERSITAS SANATA DHARMA
Beserta perangkat yang diperlukan (bila ada). Dengan demikian saya memberikan kepada Perpustakaan Universitas Sanata Dharma hak untuk menyimpan, mengalihkan dalam bentuk media lain, mengelolanya dalam bentuk pangkalan data, mendistribusikan secara terbatas, dan mempublikasikannya di Internet maupun di media lain untuk kepentingan akademis tanpa perlu meminta ijin dari saya maupun memberikan royalty kepada saya selama tetap mencantumkan nama saya sebagai penulis.
Demikian pernyataan ini saya buat sebenarnya. Dibuat di Yogyakarta
Pada tanggal : 23 September 2010 Yang menyatakan
Novy Chrisdiyanto Adi Putra
ABSTRAK
Universitas Sanata Dharma (USD) memiliki 5 kampus besar yang tersebar di
Yogyakarta. Dalam penyampaian informasi kepada masyarakat khususnya calon
mahasiswa, USD menggunakan media berbasis website sebagai salah satu media
komuikasi. Sampai saat ini website yang dimiliki USD belum menampilkan informasi
sarana prasarana kampus yang dimiliki. Sehingga masyarakat khususnya calon
mahasiswa baru perlu datang langsung untuk mengetahui kondisi dan fasilitas yang
disediakan oleh universitas tersebut.
Sistem yang dibuat ini bertujuan untuk memberikan informasi sarana prasarana
kampus. Informasi – informasi yang disajikan antara lain tentang keadaan kampus,
gedung, ruang kuliah, laboratorium, komputer dan fasilitas – fasilitas lain yang ada di
USD.
Sistem ini diimplementasikan menggunakan DBMS MySQL dan PHP sebagai
bahasa pemrogramannya. Digunakan juga aplikasi CMS untuk mempermudah
pengelolaan content.
Hasil akhir yang diperoleh adalah sebuah Website Sarana Prasarana Universitas
Sanata Dharma yang mempunyai user interface yang bersahabat, menu dan dan navigasi
yang mudah digunakan, memiliki kemampuan untuk menampilkan kampus, gedung,
ruang kuliah, laboratorium dan fasilitas - fasilitas lain yang disediakan oleh universitas.
ABSTRACT
Dharma Sanata (USD) has five large campuses scattered in Yogyakarta. In
disseminating information to the public, particularly prospective students, USD using
web-based media as one komuikasi media. Until now, this website is not owned by the
CAD display information infrastructure owned campus. So that people, especially
prospective new students need to come directly to determine condition and the facilities
provided by the university.
The system is intended to provide campus information infrastructure. Information
- information that is presented among other things about the state of the campus,
buildings, classrooms, laboratories, computer and facility - other facilities available in
USD.
This system is implemented using a DBMS for MySQL and PHP programming
language. CMS applications are also used to simplify the management of the content.
The final result obtained is an Infrastructure Support Website Sanata Dharma
which has a friendly user interface, and navigation menus and easy to use, has the ability
to display the campus, building, lecture halls, laboratories and facilities - other facilities
provided by university.
KATA PENGANTAR
Puji syukur kepada Tuhan Yang Maha Esa atas segala berkat dan rahmat-Nya
sehingga penulis dapat menyelesaikan skripsi dengan judul “Website Sarana dan
Prasarana Universitas Sanata Dharma”.
Penulisan skripsi ini diajukan untuk memenuhi salah satu syarat memperoleh
Gelar Sarjana Teknik Program Studi Teknik Informatika Universitas Sanata Dharma
Yogyakarta.
Dengan terselesaikannya penulisan skripsi ini, penulis mengucapkan terima kasih
kepada pihak-pihak yang telah membantu dan memberikan dukungan baik berupa
masukan ataupun saran. Ucapan terima kasih yang sebesar-besarnya ditujukan pada :
1. Tuhan Yesus dan Bunda Maria, yang telah memberikan berkat, pertolongan dan
kekuatan dalam proses pembuatan tugas akhir ini.
2. Yosef Agung Cahyanta, S.T., M.T., selaku Dekan Fakultas Sains dan Teknologi
Universitas Sanata Dharma.
3. Puspaningtyas Sanjaya Adi, S.T., M.T., selaku ketua program studi Teknik
Informatika yang telah banyak membantu penulis selama studi.
4. Agnes Maria Polina, S.Kom.,M.Sc.. selaku dosen pembimbing atas bimbingan, waktu
dan saran yang diberikan kepada penulis.
5. Paulina Heruningsih Prima Rosa S.Si., M.Sc. selaku dosen pembimbing akademik
Teknik Informatika angkatan 2005 yang selalu sabar menghadapi penulis.
6. Ibu Woro dan seluruh staff BSP (Biro Sarana dan Prasarana) Univ. Sanata Dharma
atas semua sarana, fasilitas dan semua informasi yang telah diberikan.
7. Seluruh staff Multimedia Univ. Sanata Dharma yang telah memberikan banyak waktu
dan informasi.
8. Seluruh Humas PMB (Penerimaan Mahasiswa Baru) atas waktu dan fasilitas yang
telah diberikan kepada penulis.
9. Bapak, Ibu, Kakak - kakak dan semua keluarga yang telah memberikan dukungan
kepada penulis baik spiritual maupun material.
10. Noven Beni, Setiawan Sony, Orpha Biringkaka, Yuanita, Tika Lusi, Vindi, Wahyu,
Siska, Putri, Dimas dan semua teman yang tidak dapat penulis sebutkan satu-persatu,
terima kasih telah banyak membantu penulis sehingga skripsi ini dapat terselesaikan.
Dalam penulisan skripsi ini, dirasa masih banyak kekurangannya. Oleh karena itu
segala saran ataupun kritik yang bersifat membangun dari pembaca sekalian sangat
diharapkan guna menyempurnakan isi dari skripsi ini.
Akhir kata, semoga penulisan skripsi ini berguna bagi para pembaca sekalian
khususnya para mahasiswa Teknik Informatika, dan dapat menambah wawasan para
pembaca sekalian.
Yogyakarta, September 2010
Penulis
Daftar Isi
Halaman Judul...………...…… i
Halaman Judul (Ing)... ii
Halaman Persetujuan Pembimbing... iii
Halaman Pengesahan... iv
Halaman MOTTO... v
Pernyataan Keaslian Karya... vi
Abstraksi………...… vii
Abstract..………...… viii
Kata Pengantar...……….ix
Lembar Pernyataan Persetujuan……… xi
Daftar isi………xii
Daftar tabel…...……….… xxi
Daftar gambar………xxii
Daftar listing program………...… xxviii
Bab I Pendahuluan……… 1
1.1. Latar Belakang……… 1
1.2 Rumusan Masalah……… 2
1.3 Tujuan dan Manfaat………..… 2
1.4 Batasan Masalah………...… 2
1.5 Metodologi Penelitian………..… 3
Bab II. Landasan Teori……….… 5
2.1 CMS………..… 5
2.2 Kriteria Pengembangan Website………..… 6
2.3 PHP………...… 8
2.4 Sarana dan Prasarana……… 10
Bab III Analisis dan Perancangan Sistem……….… 11
3.1 Analisis sistem………... 11
3.1.1 Gambaran Sistem………..… 11
3.1.2 Use Case Diagram……… 11
3.1.2.1 Use case Package User………... 13
3.1.2.2 Use Case Package Kampus……….... 13
3.1.2.3 Use Case Pakage Foto Kampus………..… 14
3.1.2.4 Use Case Package Unit………...… 15
3.1.2.5 Use Case Package Foto Unit………..… 15
3.1.2.6 Use Case Package Tingkat……….… 16
3.1.2.7 Use Case Package Lantai……… 16
3.1.2.8 Use Case Package Ruang………... 17
3.1.2.9 Use Case Package Foto Ruang………...… 17
3.1.2.10 Use Case Package Sarana………...… 18
3.1.2.11 Use Case Package Sarana Ruang………18
3.1.3 DFD………..… 19
3.1.3.1 Diagram Context ………..……….… 19
3.1.3.2 Diagram Berjenjang……….... 20
3.1.3.3 DFD Level 0 Proses 1………. 23
3.1.3.4 DFD Level 0 Proses 2………. 23
3.1.3.5 DFD Level 0 Proses 3………. 24
3.1.3.6 DFD Level 0 Proses 4………. 24
3.1.3.7 DFD Level 0 Proses 5………. 25
3.1.3.8 DFD Level 0 Proses 6………. 25
3.1.3.9 DFD Level 0 Proses 7………. 26
3.1.3.10 DFD Level 0 Proses 8………. 26
3.1.3.11 DFD Level 0 Proses 9………. 27
3.1.3.12 DFD Level 0 Proses 10………... 27
3.1.3.13 DFD Level 0 Proses 11………... 28
3.1.3.14 DFD Level 0 Proses 12………... 28
3.1.3.15 DFD Level 1 Proses 2………. 29
3.1.3.16 DFD Level 1 Proses 3………. 29
3.1.3.17 DFD Level 1 Proses 4………. 30
3.1.3.18 DFD Level 1 Proses 5………. 30
3.1.3.19 DFD Level 1 Proses 6………. 31
3.1.3.20 DFD Level 1 Proses 7………. 31
3.1.3.21 DFD Level 1 Proses 8………. 32
3.1.3.22 DFD Level 1 Proses 9………. 32
3.1.3.23 DFD Level 1 Proses 10………... 33
3.1.3.24 DFD Level 1 Proses 11………... 33
3.1.3.25 DFD Level 1 Proses 12………... 34
3.2 Perancangan Sistem………..… 34
3.2.1 Perancangan Database Sistem….……… 34
3.2.1.1 ER Diagram……… 35
3.2.1.2 Logical Database Design………...… 36
3.2.1.3 Physical Database Design………..……… 37
3.2.1.3.1 Tabel user…..…………...……….………...… 37
3.2.1.3.2 Tabel kampus…………...……….………...… 37
3.2.1.3.3 Tabel foto_kampus……….……..… 38
3.2.1.3.4 Tabel unit………..……… 38
3.2.1.3.5 Tabel foto_unit.………...……….……… 38
3.2.1.3.6 Tabel tingkat……….……… 39
3.2.1.3.7 Tabel lantai……….……..… 39
3.2.1.3.8 Tabel ruang………..……….… 39
3.2.1.3.9 Tabel foto_ruang.……...……….……….… 40
3.2.1.3.10 Tabel sarana..…………...……….………..… 40
3.2.1.3.11 Tabel sarana_ruang……...……….………. 41
3.2.1.3.12 Tabel menu..…………...……….………...… 41
3.2.2 Desain User Interface..……… 42
3.2.2.1 Desain Halaman User……...……….………. 42
3.2.2.1.1 Desain Halaman Kampus.………...…….… 42
3.2.2.1.2 Desain Halaman Unit…..………...……… 43
3.2.2.1.3 DesainHalaman Lantai...……….………….……… 44
3.2.2.1.4 Desain Halaman Ruang……… 45
3.2.2.2 Desain Halaman Admin.…..……….…. 46
3.2.2.2.1 Desain Halaman Login Admin………..…….. 46
3.2.2.2.2 Desain Halaman Utama Admin………..….... 46
3.2.2.2.3 Desain Halaman Tabel Kampus…….………..……..……. 47
3.2.2.2.4 Desain Halaman Tambah Kampus…….……….…… 47
3.2.2.2.5 Desain Halaman Edit Kampus………...………. 48
3.2.2.2.6 Desain Halaman Tabel Foto Kampus………...…..………. 49
3.2.2.2.7 Desain Halaman Tambah Foto Kampus.………….……… 49
3.2.2.2.8 Desain Halaman Edit Foto Kampus………...………. 50
3.2.2.2.9 Desain Halaman Tabel Unit……….…..………. 51
3.2.2.2.10 Desain Halaman Tambah Unit………...………..…...….. 51
3.2.2.2.11 Desain Halaman Edit Unit….……….……...…..……….. 52
3.2.2.2.12 Desain Halaman Tabel Foto Unit….…………...………. 53
3.2.1.3.13 Desain Halaman Tambah Foto Unit….………….………. 53
3.2.1.3.14 Desain Halaman Edit Foto Unit……….…...………. 54
3.2.2.2.15 Desain Halaman Tabel Tingkat……….………...………. 55
3.2.2.2.16 Desain Halaman Tambah Tingkat….………....………… 55
3.2.2.2.17 Desain Halaman Edit Tingkat……….…..……. 56
3.2.2.2.18 Desain Halaman Tabel Lantai……….……….……. 56
3.2.2.2.19 Desain Halaman Tambah Lantai….………..……… 57
3.2.2.2.20 Desain Halaman Edit Lantai……….…………. 58
3.2.2.2.21 Desain Halaman Tabel Ruang……….…………..………. 59
3.2.2.2.22 Desain Halaman Tambah Ruang ……….………. 60
3.2.2.2.23 Desain Halaman Edit Ruang ……….……...…. 61
3.2.2.2.24 Desain Halaman Tabel Foto Ruang………..……. 62
3.2.1.3.25 Desain Halaman Tambah Foto Ruang.………..……. 62
3.2.1.3.26 Desain Halaman Edit Foto Ruang……….…………. 63
3.2.2.2.27 Desain Halaman Tabel Sarana……….……...…..………. 64
3.2.2.2.28 Desain Halaman Tambah Sarana ………...……..………. 64
3.2.2.2.29 Desain Halaman Edit Sarana ………. 65
3.2.2.2.30 Desain Halaman Tabel Sarana Ruang…………...………. 65
3.2.1.3.31 Desain Halaman Tambah Sarana Ruang.………...… 66
3.2.1.3.32 Desain Halaman Edit Sarana Ruang……….…….… 67
Bab IV Implementasi………..………..… 68
4.1 Pembuatan Database……… 68
4.2 Pembuatan trigger………...………..… 73
4.3 Setting koneksi dari PHP ke MySQL.………..… 76
4.4 Pembuatan Antar Muka...………...………..… 77
4.4.1 Halaman Pengunjung………....….……….… 77
4.4.1.1 Halaman Kampus………….………...… 77
4.4.1.2 Halaman Unit…………..….………...… 81
4.4.1.3 Halaman Lantai…………....………...… 83
4.4.1.4 Halaman Ruang……..…………..………...… 86
4.4.2 Halaman Admin……..………....….………...… 87
4.4.2.1 Halaman Staff BSP……….……… 89
4.4.2.1.1 Halaman Home……….………..… 89
4.4.2.1.2 Halaman Tabel User……..……….… 89
4.4.2.2 Halaman Administrator….………..… 90
4.4.2.2.1 Halaman Home Ka. BSP.………...… 90
4.4.2.2.2 Halaman Tabel User……..……… 91
4.4.2.2.3 Halaman Tambah user….………...… 92
4.4.2.2.4 Halaman Edit User………..……… 93
4.4.2.2.5 Halaman Hapus user…...………...… 94
4.4.2.2.6 Halaman Tabel Kampus…..………...… 94
4.4.2.2.7 Halaman Tambah Kampus…..………...… 96
4.4.2.2.8 Halaman Edit Kampus…..………..… 98
4.4.2.2.9 Halaman Hapus Kampus…….………...… 100
4.4.2.2.10 Halaman Tabel Foto Kampus……..………...… 101
4.4.2.2.11 Halaman Tambah Foto Kampus….……… 103
4.4.2.2.12 Halaman Edit Foto Kampus…….………..… 105
4.4.2.2.13 Halaman Hapus Foto Kampus….………...… 107
4.4.2.2.14 Halaman Tabel Unit……….………..… 108
4.4.2.2.15 Halaman Tambah unit……..………..… 110
4.4.2.2.16 Halaman Edit Unit…...…….……….… 112
4.4.2.2.17 Halaman Hapus unit………….….……….… 113
4.4.2.2.18 Halaman Tabel Foto Unit….………..… 114
4.4.2.2.19 Halaman Tambah Foto Unit.………... 115
4.4.2.2.20 Halaman Edit Foto Unit…...………..… 115
4.4.2.2.21 Halaman Hapus Foto Unit……….……… 116
4.3.2.2.22 Halaman Tabel Tingkat………..……… 117
4.4.2.2.23 Halaman Tambah Tingkat….……….… 117
4.4.2.2.24 Halaman Edit Tingkat……….………...… 118
4.4.2.2.25 Halaman Hapus Tingka.…….……… 118
4.3.2.2.26Halaman Tabel Lantai………..………...… 119
4.4.2.2.27 Halaman Tambah Lantai….………...… 121
4.4.2.2.28 Halaman Edit Lantai……….………..… 124
4.4.2.2.29 Halaman Hapus Lantai……….….……….… 126
4.4.2.2.30 Halaman Tabel Ruang…….………...… 126
4.4.2.2.31 Halaman Tambah Ruang ………..…….……… 127
4.4.2.2.32 Halaman Edit Ruang ………..……...… 130
4.4.2.2.33 Halaman Hapus Ruang………...… 133
4.4.2.2.34 Halaman Tabel Foto Ruang.………...… 134
4.4.2.2.35 Halaman Tambah Foto Ruang……… 135
4.4.2.2.36 Halaman Edit Foto Ruang………..… 136
4.4.2.2.37 Halaman Hapus Foto Ruang………...… 136
4.4.2.2.38 Halaman Tabel Sarana …………..…….……… 137
4.4.2.2.39 Halaman Tambah Sarana ………..…….……… 138
4.4.2.2.40 Halaman Edit Sarana ………..……...… 138
4.4.2.2.41 Halaman Hapus Sarana...………...… 139
4.4.2.2.42 Halaman Tabel Sarana Ruang……… 139
4.4.2.2.43 Halaman Tambah Sarana Ruang……… 140
4.4.2.2.44 Halaman Edit Sarana Ruang………...… 140
4.4.2.2.45 Halaman Hapus Sarana Ruang………...… 141
Bab V Analisa Hasil………..………142
5.1 Hasil Analisa Sistem.………...… 142
5.1.1 Kelebihan sistem...………... 142
5.1.2 kekurangan sistem...……….… 142
5.2 Hasil Uji terhadap Pengguna…...………...… 142
5.3 Form Kuisioner…...………...……….. 144
5.3 Hasil dan Pembahasan…………...………... 144
Bab VI Penutup………..………... 151
6.1 Kesimpulan…...……… 151
6.2 Saran………...………...………….… 152
Daftar Pustaka ………...………...……… 153
Daftar Tabel
3.1 Tabel User…….……… 37
3.2 Tabel Kampus……… 37
3.3 Tabel Foto Kampus……… 38
3.4 Tabel Unit………. 38
3.5 Tabel Foto Unit………. 38
3.6 Tabel Tingkat..……….. 39
3.7 Tabel Lantai……….. 39
3.8 Tabel Ruang………... 39
3.9 Tabel Foto Ruang………..……….. 40
3.10 Tabel Sarana.……….…….. 40
3.11 Tabel Sarana Ruang.……….…….. 41
3.12 Tabel Menu..……… 41
Daftar Gambar
2.1 Konsep Kerja PHP……… 9
3.1 Use Case Diagram ...……… 12
3.2 Use Case Package User……… 13
3.3 Use Case Package Kampus..……… 14
3.4 Use Case Package Foto Kampus..……… 14
3.5 Use Case Package Unit……… 15
3.6 Use Case Package Foto Unit……… 15
3.7 Use Case Package Tingkat……… 16
3.8 Use Case Package Lantai..……… 16
3.9 Use Case Package Ruang………..……… 17
3.10 Use Case Package Foto Ruang..……….……… 18
3.11 Use Case Package Sarana……… 18
3.12 Use Case Package SaranaRuang……… 19
3.13 Diagram Context .……… 19
3.14 Diagram Berjenjang 1………..……… 21
3.15 Diagram Berjenjang 2………..……… 22
3.16 DFD Level 0 Proses 1………..……… 23
3.17 DFD Level 0 Proses 2………..……… 23
3.18 DFD Level 0 Proses 3………..……… 24
3.19 DFD Level 0 Proses 4……….……… 24
3.20 DFD Level 0 Proses 5……….……… 25
3.21 DFD Level 0 Proses 6……… 25
3.22 DFD Level 0 Proses 7……… 26
3.23 DFD Level 0 Proses 8……… 26
3.24 DFD Level 0 Proses 9……….……… 27
3.25 DFD Level 0 Proses 10……… 27
3.26 DFD Level 0 Proses 11……… 28
3.27 DFD Level 0 Proses 12……… 28
3.28 DFD Level 1 Proses 2……….……… 29
3.29 DFD Level 1 Proses 3……… 29
3.30 DFD Level 1 Proses 4……… 30
3.31 DFD Level 1 Proses 5……… 30
3.32 DFD Level 1 Proses 6……… 31
3.33 DFD Level 1 Proses 7……… 31
3.34 DFD Level 1 Proses 8……… 32
3.35 DFD Level 1 Proses 9……… 32
3.36 DFD Level 1 Proses 10……… 33
3.37 DFD Level 1 Proses 11……… 33
3.38 DFD Level 1 Proses 12……… 34
3.39 Entity Relational Diagram……….……… 35
3.40 Relational Tabel……… 36
3.41 Desain Halaman Kampus ..……….. 42
3.42 Desain Halaman Unit ..……… 43
3.43 Desain Halaman Lantai ..………. 44
3.44 Desain Halaman Ruang ..……….……… 45
3.45 Desain Halaman Login Admin……….. 46
3.46 Desain Halaman Utama Admin………..……….. 46
3.47 Desain Halaman Tabel Kampus……… 47
3.48 Desain Halaman Tambah Kampus..………. 47
3.49 Desain Halaman Edit Kampus..……… 48
3.50 Desain Halaman Tabel Foto Kampus.……….. 49
3.51 Desain Halaman Tambah Foto Kampus……… 49
3.52 Desain Halaman Edit Foto Kampus………. 50
3.53 Desain Halaman Tabel Unit.……… 51
3.54 Desain Halaman Tambah Unit………. 51
3.55 Desain Halaman Edit Unit.……… 52
3.56 Desain Halaman Tabel Foto Unit……….. 53
3.57 Desain Halaman Tambah Foto Unit..……… 53
3.58 Desain Halaman Edit Foto Unit...………. 54
3.59 Desain Halaman Tabel Tingkat.……… 55
3.60 Desain Halaman Tambah Tingkat...……….. 55
3.61 Desain Halaman Edit Tingkat………...……… 56
3.62 Desain Halaman Tabel Lantai...……… 56
3.63 Desain Halaman Tambah Lantai.……….. 57
3.64 Desain Halaman Edit Lantai.……… 58
3.65 Desain Halaman Tabel Ruang..………. 59
3.66 Desain Halaman Tambah Ruang ………..……… 60
3.67 Desain Halaman Edit Ruang………….……… 61
3.68 Desain Halaman Tabel Foto Ruang.……….……… 62
3.69 Desain Halaman Tambah Foto Ruang………..…… 62
3.70 Desain Halaman Edit Foto Ruang……… 63
3.71 Desain Halaman Tabel Sarana..……… 64
3.72 Desain Halaman Tambah Sarana……….. 64
3.73 Desain Halaman Edit Sarana.……… 65
3.74 Desain Halaman Tabel Sarana Ruang...……… 65
3.75 Desain Halaman Tambah Sarana Ruang……….. 66
3.76 Desain Halaman Edit Sarana Ruang……… 67
4.1 Tabel – Tabel Database Kampus...…..……… 72
4.2 Halaman Kampus…..……… 77
4.3 Halaman Unit……… 81
4.4 Halaman Lantai…..………...……… 83
4.5 Halaman Ruang……… 86
4.6 Halaman Login Staff BSP………. 87
4.7 Halaman Login Ka. BSP……..………. 87
4.8 Halaman Home Staff BSP………. 89
4.9 Halaman Tabel user Staff BSP………. 89
4.10 Halaman Home Ka. BSP……..………. 90
4.11 Halaman Tabel user Ka. BSP…..………. 91
4.12 Halaman Tambah user Ka. BSP…..………. 92
4.13 Halaman Edit user ………..…..…...………. 93
4.14 Pesan konfirmasi hapus user…....………. 94
4.15 Halaman Tabel Kampus……… 94
4.16 Halaman Tambah Kampus..………. 96
4.17 Halaman Edit Kampus..……….. 98
4.18 Pesan konfirmasi hapus kampus...………. 100
4.19 Halaman Tabel Foto Kampus.………. 101
4.20 Halaman Tambah Foto Kampus………. 103
4.21 Halaman Edit Foto Kampus……… 105
4.22 Pesan konfirmasi hapus foto kampus…...………. 107
3.23 Halaman Tabel Unit.……….……… 108
4.24 Halaman Tambah Unit………..……… 110
4.25 Halaman Edit Unit.………..………. 112
4.26 Pesan konfirmasi hapus unit…...………. 113
4.27 Halaman Tabel Foto Unit……….……… 114
4.28 Halaman Tambah Foto Unit..………..………. 115
4.29 Halaman Edit Foto Unit...……….. 115
4.30 Pesan konfirmasi hapus foto unit.………. 116
4.31 Halaman Tabel Tingkat...………. 117
4.32 Halaman Tambah Tingkat.……… 117
4.33 Halaman Edit Tingkat.……….………. 118
4.34 Pesan konfirmasi hapus Tingkat...………. 118
4.35 Halaman Tabel Lantai...………...………. 119
4.36 Halaman Tambah Lantai.……….……… 121
4.37 Halaman Edit Lantai.………..………. 124
4.38 Pesan konfirmasi hapus lantai....………. 126
4.39 Halaman Tabel Ruang..………..………. 126
4.40 Halaman Tambah Ruang ………. 127
4.41 Halaman Edit Ruang …………..………. 130
4.42 Pesan konfirmasi hapus ruang....……….………. 133
4.43 Halaman Tabel Foto Ruang.………...………. 134
4.44 Halaman Tambah Foto Ruang……….…..….. 135
4.45 Halaman Edit Foto Ruang……… 136
4.46 Pesan konfirmasi hapus Foto Ruang………. 136
4.47 Halaman Tabel Sarana..………..……. 137
4.48 Halaman Tambah Sarana ………. 138
4.49 Halaman Edit Sarana…………..………. 138
4.50 Pesan konfirmasi hapus Sarana....………. 139
4.51 Halaman Tabel Sarana Ruang.………. 139
4.52 Halaman Tambah Sarana Ruang……….. 140
4.53 Halaman Edit Sarana Ruang……… 140
4.54 Pesan konfirmasi hapus Sarana Ruang………. 141
Daftar Listing Program
4.1 Koneksi.php…...……… 76
4.2 Tampil Kampus..………...………..……… 78
4.3 Tampil Unit..…..………...………..……… 82
4.4 Tampil Lantai..…..………...………..……… 84
4.5 cek_login.php..…..………...………..……… 88
4.6 mod_userb.php…..………...………..……… 90
4.7 mod_user.php…..………...………..……… 91
4.8 Proses Tambah User………...………..…..…… 92
4.9 Proses Edit User………...………..……….… 93
4.10 Tampil Tabel Kampus……… 95
4.11 Proses Tambah Kampus……… 96
4.12 Proses Edit Kampus..……… 99
4.13 Tampil Tabel Foto Kampus……… 101
4.14 Proses Tambah Foto Kampus……… 103
4.15 Proses Edit Foto Kampus ……… 106
4.16 Tampil Tabel Unit……… 108
4.17 Proses Tambah Unit……… 110
4.18 Proses Edit Unit…..……… 112
4.19 Tampil Tabel Lantai……… 119
4.20 Proses Tambah Lantai………. 122
4.21 Proses Edit Lantai…..……… 124
4.22 Proses Tambah Ruang……… 128
xxix
BAB I
PENDAHULUAN
1.1. Latar Belakang
Universitas Sanata Dharma (USD) memiliki 5 kampus yang tersebar di
wilayah Yogyakarta. Universitas ini merupakan salah satu universitas unggulan
yang menjadi salah satu tujuan calon mahasiswa dari berbagai daerah untuk
melanjutkan studinya.
Universitas Sanata Dharma telah memiliki website sebagai salah satu
media untuk menyampaikan informasi bagi calon mahasiswa baru dan
masyarakat luas, namun website yang ada, baru sebatas menyajikan informasi
profile universitas, informasi akademik universitas, dan informasi penerimaan
calon mahasiswa tahun ajaran baru. Informasi yang berkaitan dengan sarana
prasarana kampus (seperti gedung, laboratorium, dan fasilitas-fasilitas lain) belum
ada dalam website tersebut.
Bila calon mahasiswa baru, atau masyarakat umum ingin melihat seperti
apa bentuk kampus USD, mereka harus datang langsung ke kampus - kampus
yang dimiliki oleh Universitas Sanata Dharma untuk mengetahui keadaan dan
fasilitas yang telah disediakan. Hal ini tentu memakan waktu dan biaya.
Dari latar belakang tersebut, penulis tertarik untuk membuat Website
Sarana dan Prasarana Universitas Sanata Dharma untuk lebih meningkatkan
kualitas dan pelayanan dalam memberikan informasi berbasis web yang mampu
menyajikan informasi tentang sarana prasarana kampus dan fasilitas – fasilitas
yang disediakan universitas tersebut dengan menggunakan bahasa pemrograman
2
PHP dan database MySQL.
1.1. Rumusan Masalah
Berdasarkan uraian singkat latar belakang masalah diatas, maka rumusan
masalah untuk penelitian ini adalah “ Bagaimana membuat website Sarana
Prasarana Universitas Sanata Dharma.“
1.2. Tujuan dan Manfaat
Tujuan dari pembuatan sistem ini adalah membuat Sistem Informasi Sarana
Prasarana Kampus yang memberikan informasi tentang sarana dan prasarana di
Universitas Sanata Dharma bagi masyarakat luas khususnya calon mahasiswa.
Manfaat dalam pembuatan sistem ini adalah mempermudah masyarakat
luas khususnya calon mahasiswa baru dalam mendapatkan informasi yang lebih
detail tentang Universitas Sanata Dharma khususnya tentang sarana dan prasarana
seperti kampus, gedung, laboratorium, ruang kelas, dan lain-lain.
1.3. Batasan Masalah
Sistem yang dibuat memiliki batasan masalah :
1. Website ini dapat menampilkan format – format file gambar *.jpg, file
video *.flv dan file animasi *.swf.
3
1.4. Metodologi Penelitian
Menggunakan studi kasus dengan langkah – langkah sebagai berikut :
1. Metode pengamatan langsung atau observasi ke kampus Universitas
Sanata Dharma dan interview dengan pihak BSP (Biro Sarana Prasarana)
yang mengelola fasilitas dari USD, guna mendapat gambaran cara kerja
sistem ini nantinya dan fasilitas yang ada.
2. Studi literatur dengan mengumpulkan data atau informasi dari berbagai
referensi yang sesuai dengan pembuatan sistem dalam tugas ahkir ini.
Metode pembelajaran bersumber dari buku – buku yang berhubungan
dalam pembuatan sistem ini, dan aturan-aturan dalam pemograman yang
berhubungan dengan pengolahan data-data.
3. Metode pengembangan sistem dengan menggunakan metodologi
pengembangan sistem secara terstruktur.
Metodologi ini terbagi menjadi beberapa fase yaitu :
a. Fase Analisis Sistem (Analysis Phase)
Analisis sistem bertujuan untuk mengidentifikasikan dan mengevaluasi
permasalahan–permasalahan yang dihadapi dan kebutuhan–kebutuhan
yang diharapkan sehingga dapat menyelesaikan hambatan–hambatan
yang terjadi dalam pengembangan sistem.
b. Fase Perancangan (Design Phase)
Merupakan langkah multiproses yang memusatkan kerja pada
perancangan sistem secara umum misalnya perancangan menu,
4
c. Fase Implementasi (Implementation Phase)
Setelah melakukan perancangan sistem yang diinginkan maka hasil
rancangan tersebut diimplementasikan, yaitu diterjemahkan kedalam
bahasa pemrograman.
d. Fase Pengujian (Testing Phase)
Pengujian ini dimaksudkan untuk menguji apakah hasil sudah sesuai
dengan perancangan yang diinginkan serta mencari segala kesalahan
yang mungkin terjadi.
4. Uji coba kelayakan sistem kepada pihak BSP (Bagian Sarana Prasarana)
Universitas Sanata Dharma, calon mahasiswa baru, dosen dan karyawan
USD, masyarakat umum dan pelajar SMA sederajat (calon mahasiswa
BAB II
LANDASAN TEORI
2.1. Content Management System (CMS)
CMS didefinisikan sebagai sebuah aplikasi yang bisa dimanfaatkan untuk
mengelola berbagai metode yang berhubungan dengan web publishing. CMS
secara umum bisa dikustomasi dengan menambahkan atau mengurangi fitur yang
spesifik, sehingga hanya fitur-fitur tertentu yang diinginkan saja yang akan
ditampilkan kepada publik (Douglas, et.al, 2006). Dalam perkembangan teknologi
saat ini, CMS banyak dikembangkan untuk membuat forum diskusi, website jual
beli online, website komunitas, galeri foto online, dan masih banyak lagi.
Content Management System setidaknya terdiri dari tiga hal (Frazer, et.al,
2002 dalam ), yakni :
− Content Management Application (CMA).
CMA akan melakukan manajemen komponen-komponen konten aplikasi,
yang terdiri dari gambar, teks, dan sebagainya.
− Metacontent Management Application (MMA).
MMA akan mengatur manajemen informasi yang dimiliki oleh komponen
komponen konten aplikasi.
− Content Delivery Application (CDA).
bertugas mengambil komponen-komponen konten, membaca informasi yang
dibawa oleh masing-masing komponen tersebut, kemudian menampilkannya
kepada pengguna aplikasi.
6
1.1. Kriteria Pengembangan Website
Menurut CNET / Builder ada 7 kriteria yang menentukan sebuah website
termasuk website yang baik (
http://ict.perbanas.ac.id/Article/Apa-kriteria-website-yang-baik.php), yaitu :
a. Usability
Jacob Nielsen sang guru usability, usability adalah dapatkah seorang user
menemukan cara untuk menggunakan website tersebut dengan efektif.
Menurut Jacob, usability memiliki 5 karakteristik :
− Mudah untuk dipelajari
− Efisien untuk digunakan
− Mudah untuk diingat
− Tingkat frekuensi kesalahan
− Tingkat kepuasan pemakai
Karakteristik yang telah ditentukan oleh Jacob Nielsen akan sangat sulit
diterapkan 100%, apalagi kalau sudah menyangkut kepentingan klien web,
tetapi paling tidak bisa menjadi acuan yang membantu untuk merancang
layout suatu website, agar website tersebut :
− Mudah dipelajari penggunaannya oleh pengunjung.
− Mudah diingat dan digunakan navigasinya oleh pengunjung.
− Dapat digunakan secara efisien.
− Memperkecil tingkat kesalahan pemakaian oleh pengunjung dalam
7
− Memuaskan pengunjung hingga akhirnya tertarik untuk kembali lagi.
b. Sistem navigasi
Navigasi yang mudah dipahami oleh pengunjung secara keseluruhan.
c. GraphicDesign
Pemilihan grafis, layout, warna, bentuk maupun typografi yang menarik
visual pengunjung untuk menjelajahi website.
d. Content / Isi
Isi / konten yang bermanfaat dan sesuai dengan tujuan pembuatan website.
e. Kompatibilitas
Seberapa luas sebuah webite didukung kompabilitas peralatan yang ada,
misalnya browser dengan berbagai plug-in nya ( IE, Mozilla, Opera, Netscape,
Lynx, Avant, Maxthon dan masih banyak lagi dengan berbagai versi dan
plugin-nya)
f. Loading time
Waktu panggil (loading time), walaupun ada banyak faktor yang akan
mempengaruhi waktu panggil (loading time) website yang akan dibuka,
diantaranya : besar bandwith / koneksi pengakses, kondisi webserver pada saat
diakses, aplikasi yang digunakan dalam membangun website, dan lain
sebagainya.
g. Functionality
Ini akan melibatkan programmer dengan script-scriptnya, misal
8
interaktif dan 'hidup' yang bisa mengajak pengunjung berkomunikasi secara
langsung. Seberapa baik sebuah website bekerja dari aspek teknologikalnya.
1.2. PHP (PHP Hypertext Preprocessor)
PHP singkatan dari PHP Hypertext Preprocessor atau Personal Home
Page Tools adalah sebuah bahasa server side scripting yang bisa digunakan
dengan bahasa HTML atau dokumennya secara bersamaan untuk membangun
sebuah aplikasi di web yang sangat banyak kegunaannya. Maksud dari server
side scripting adalah sintaks dan perintah-perintah yang diberikan akan
sepenuhnya dijalankan di server tetapi disertakan pada dokumen HTML.
Script PHP dijalankan di sisi server kemudian hasilnya ditransfer ke client.
Keuntungan yang dapat diperoleh dengan proses yang dijalankan di server yaitu :
1. Keamanan data atau prosedur, dengan meletakan aplikasi dan data di
server maka dapat lebih terkontrol. Tidak ada client yang dapat melihat
program dan mengubah data secara mudah.
2. Kemanan komunikasi, dengan terintegrasinya SSL atau HTTPS, PHP
dapat membuat data lebih aman dari pembajakan. Ini penting digunakan
terutama jika data tersebut dilewatkan pada jaringan public seperti
internet.
3. Terkontrol, server side application secara umum lebih mudah untuk
dimonitor dan diupdate. Hal ini karena hanya satu komputer yang menjadi
server yang perlu dimonitor, dibandingkan dengan pengawasan terhadap
aplikasi yang tersebar pada banyak komputer Client.
9
diawali dengan tag <? atau tag <?PHP dan ditutup dengan tag ?>. File yang berisi
tag HTML dan kode PHP ini diberi ekstensi .PHP atau ekstensi lainnya yang
ditetapkan pada apache / web server. Berdasarkan ekstensi ini, pada saat file
diakses, server akan tahu bahwa file ini mengandung kode PHP. Server akan
menerjemahkan kode ini dan menghasilkan output dalam bentuk tag HTML yang
akan dikirim ke browser client yang mengakses file tersebut.
Konsep kerja PHP :
Web server
Kode HTML
Browser Perm int aan HTTP
( sesuat u.php)
Tangga pan HTTP Skrip PHP
Mesin PHP
Klien
Gambar 2.1 Konsep Kerja PHP
Pada skema diatas dapat dijelaskan cara kerja PHP pada web sebagai berikut :
1. Pemakai mengakses suatu situs web, dengan mengetikkan alamat yang
dituju pada web browser.
2. Web browser akan memberikan permintaan HTTP yaitu file-file PHP
ke Web Server.
10
Kemudian hasilnya akan ditampilkan pada web browser beserta hasil
terjemahan HTML oleh web browser.
1.3. Sarana dan Prasarana
Sarana dan prasarana adalah unsur penunjang dalam pelaksanaan
Tridharma Perguruan Tinggi, yang mencakup bangunan, perabotan, peralatan
(perangkat keras dan lunak), dan sistem pengamanan aset dan kampus. Sesuai
dengan visi, misi atau mandatnya maka suatu perguruan tinggi membutuhkan
pengembangan suatu sistem pengelolaan yang mencakup perencanaan,
pengadaan, pendataan, pemanfaatan, pemeliharaan, penghapusan, serta
pemutahiran semua sarana dan prasarana. Perguruan tinggi harus memiliki
panduan khusus mengenai kelengkapan dan kecukupan sarana dan prasarana yang
dibutuhkan, termasuk sistem klasifikasi, inventarisasi dan informasi
keberadaannya. Perguruan tinggi harus memiliki sistem pengelolaan yang
menjamin adanya akses yang lebih luas terutama bagi mahasiswa dan dosen
melalui penerapan model-model resource sharing. Bentuk kepemilikan lain
seperti sewa, pinjam atau hibah harus dinyatakan dalam surat kesepakatan antara
perguruan tinggi dan pihak terkait dengan kepastian hukum yang jelas.
(http://akreditasi.unair.ac.id/folderfile/standar%205.doc)
BAB III
ANALISIS DAN PERANCANGAN SISTEM
3.1. Analisis Sistem
Dalam tahap ini dilakukan analisi sistem yang akan dibuat untuk
mengetahui kebutuhan – kebutuhan yang diperlukan untuk melancarkan
implementasi yang akan dilakukan pada tahap selanjutnya.
3.1.1 Gambaran sistem
Sistem ini dibuat karena Universitas Sanata Dharma (USD) belum
memiliki website yang bisa menampilkan Informasi yang berkaitan dengan sarana
prasarana kampus (seperti gedung, laboratorium, dan fasilitas-fasilitas lain).
Sistem ini dibuat berbasis web dengan tujuan, masyarakat bisa mendapatkan
informasi dengan mudah tanpa perlu datang langsung.
Sistem ini menampilkan video dan foto - foto dari tiap kampus USD yang
ditampilkan berdasarkan ruangan yang ada di tiap lantai pada setiap unit / gedung
kampus. Pengunjung dapat melihat video untuk tiap kampus dan ruang. Dengan
website ini pengunjung juga dapat melihat denah tiap lantai serta foto gedung dan
foto ruangan – ruangan yang ada di tiap kampus USD.
3.1.2 Use case diagram
Kegiatan atau proses - proses dari sistem yang dapat dilakukan oleh semua
pengguna bisa digambarkan dengan use case diagram. Di bawah ini adalah use
case diagram dari Website Sarana PrasaranaUniversitas Sanata Dharma :
12
Ka. BSP
Website sarana dan prasarana USD
Login
Pengunjung
<depend on>
logout
Staff BSP
user
foto kampus
foto unit
sarana tingkat
foto ruang ruang lantai unit kampus
sarana ruang
13
Penjelasan use case diagram :
Use case ini mengambarkan sistem membagi user menjadi 3 yaitu Ka.
BSP, staff BSP dan pengunjung. Sistem ini terdiri dari 11 package yaitu package
user, kampus, foto kampus, unit, foto unit, tingkat, lantai, ruang, foto ruang,
sarana dan saran ruang.
1.1.1.1 Use case PackageUser
Package user, terdiri dari 2 user yaitu Ka. BSP dan Staff BSP.
Untuk Ka. BSP dapat melakukan insert, edit, delete dan view data user.
Sedangkan Staff BSP dapat melakukan edit , delete dan view data user saja
seperti yang terlihat pada gambar 3.2.
Gambar 3.2 Use case package user
1.1.1.2 Use case Package Kampus
Package kampus, terdiri dari 3 user yaitu Ka. BSP, Staff BSP
dan pengunjung. Untuk Ka. BSP dan Staff BSP dapat melakukan insert,
edit, delete, view dan search data kampus. Sedangkan pengunjung dapat
melakukan view dan search data kampus saja seperti yang terlihat pada
14
Kampus
Ka. BSP
insert data kampus
edit data kampus
delete data kampus
view data kampus
search data kampus
Staff BSP
Pengunjung
Gambar 3.3 Use case package kampus
1.1.1.3 Use case Package Foto Kampus
Package foto kampus, terdiri dari 3 user yaitu Ka. BSP, Staff
BSP dan pengunjung. Untuk Ka. BSP dan Staff BSP dapat melakukan
insert, edit, delete,view dan search foto kampus. Sedangkan pengunjung
dapat melakukan view dan search foto kampus saja seperti yang terlihat
pada gambar 3.4.
15
1.1.1.4 Use case Package Unit
Package unit, terdiri dari 3 user yaitu Ka. BSP, Staff BSP dan
pengunjung. Untuk Ka. BSP dan Staff BSP dapat melakukan insert, edit,
delete,view dan search data unit. Sedangkan pengunjung dapat melakukan
view dan search data unitsaja seperti yang terlihat pada gambar 3.5.
Unit
Ka. BSP
Staff BSP insert unit
edit unit delete unit
view unit search unit
Pengunjung
Gambar 3.5 Use case package unit
1.1.1.5 Use case Package Foto Unit
Package foto unit, terdiri dari 3 user yaitu Ka. BSP, Staff BSP
dan pengunjung. Untuk Ka. BSP dan Staff BSP dapat melakukan insert,
edit, delete, view dan search foto unit. Sedangkan pengunjung dapat
melakukan view dan search foto unit saja seperti yang terlihat pada
gambar 3.6.
16
1.1.1.6 Use case Package Tingkat
Package user, terdiri dari 1 user saja yaitu Ka. Ka. BSP dapat
melakukan insert, edit, delete dan view data tingkat seperti yang terlihat
pada gambar 3.7.
tingkat
Ka. BSP
insert tingkat
edit tingkat
delete tingkat
view tingkat
Gambar 3.7 Use case package tingkat
1.1.1.7 Use case Package Lantai
Package data lantai, terdiri dari 3 user yaitu Ka. BSP, Staff BSP
dan pengunjung. Untuk Ka. BSP dan Staff BSP dapat melakukan insert,
edit, delete, view dan search data lantai. Sedangkan pengunjung dapat
melakukan view dan search data lantai saja seperti yang terlihat pada
gambar 3.8.
Lantai
Ka. BSP
Staff BSP
Pengunjung insert lantai
edit lantai
delete lantai
view lantai
search lantai
17
1.1.1.8 Use case Package Ruang
Package data ruang, terdiri dari 3 user yaitu Ka. BSP, Staff BSP
dan pengunjung. Untuk Ka. BSP dan Staff BSP dapat melakukan insert,
edit, delete, view dan search data ruang. Sedangkan pengunjung dapat
melakukan view dan search foto unit saja seperti yang terlihat pada
gambar 3.9.
ruang
Staff BSP insert ruang
edit ruang
delete ruang
Ka. BSP view ruang
search ruang
Pengunjung
Gambar 3.9 Use case package ruang
1.1.1.9 Use case Package Foto Ruang
Package foto ruang, terdiri dari 3 user yaitu Ka. BSP, Staff BSP
dan pengunjung. Untuk Ka. BSP dan Staff BSP dapat melakukan insert,
edit, delete, view dan search foto ruang. Sedangkan pengunjung dapat
melakukan view dan search foto ruang saja seperti yang terlihat pada
18
foto ruang
Ka. BSP
Staff BSP insert foto ruang
edit foto ruang
delete foto ruang
Pengunjung view foto ruang
search foto ruang
Gambar 3.10 Use case package foto ruang
1.1.1.10 Use case Package Sarana
Package user, terdiri dari 1 user saja yaitu Ka. BSP. Ka. BSP
dapat melakukan insert, edit, delete dan view data sarana seperti yang
terlihat pada gambar 3.11.
sarana
Ka. BSP
insert sarana
edit sarana
delete sarana
view sarana
search sarana
Gambar 3.11 Use case package sarana
1.1.1.11 Use case Package Sarana Ruang
Package sarana ruang, terdiri dari 3 user yaitu Ka. BSP, Staff
19
insert, edit, delete, view dan search sarana ruang. Sedangkan pengunjung
dapat melakukan view dan search sarana ruang saja seperti yang terlihat
pada gambar 3.12.
Gambar 3.12 Use case package sarana ruang
1.1.2 DFD (Data Flow Diagram)
1.1.2.1Diagram Context
0 Website
Sarana Prasarana
USD
Pengunjung Ka. BSP
data user, kampus, unit, lantai dan ruang
Informasi data user, kampus, unit, lantai dan
ruang Informasi data kampus, unit, lantai dan ruang
keyword
Staff BSP
data user, kampus, unit, lantai dan ruang data user, kampus, unit,
lantai dan ruang
Gambar 3.13 Diagram Context
Pada gambar 3.13 terlihat 3 entitas yang terhubung dengan sistem yaitu
20
sama dari sistem. Tetapi entitas Ka. BSP dan staff BSP dapat memasukan data
kampus, unit, lantai dan ruang.
1.1.2.2Diagram Berjenjang
Berikut ini adalah diagram berjenjang dari sistem Website Sarana Prasarana USD
yang digunakan untuk menggambarkan proses-proses yang akan ditangani oleh
21
Gambar 3.14
Diagram
berjen
22
Gambar 3.15
Diagram
berjen
23
Penjelasan diagram berjenjang :
Pada gambar 3.14 dan gambar 3.15 menggambarkan sistem yang
akan dibangun memiliki 12 proses yaitu login, pengolahan data user,
pengolahan data kampus, pengolahan foto kampus, pengolahan data unit,
pengolahan foto unit, pengolahan data tingkat, pengolahan data lantai,
pengolahan data ruang, pengolahan foto ruang, pengolahan data sarana dan
pengolahan sarana ruang. Pada proses pengolahan data user, kampus, foto
kampus, unit, foto unit, lantai, ruang, foto ruang, sarana dan sarana ruang
terdiri dari 5 sub proses. 5 sub proses tersebut adalah insert, edit, delete
dan view data sesuai dengan pengolahan prosesnya. Sedangkan proses
pengolahan data tingkat hanya terdiri dari 4 sub yaitu insert, edit, delete
dan view.
1.1.2.3DFD Level 0 Proses 1
Gambar 3.16 DFD level 0 proses 1
1.1.2.4DFD Level 0 Proses 2
24
1.1.2.5DFD Level 0 Proses 3
3 Pengolahan data kampus
kampus
Data kampus baru Data kampus
Ka. BSP
Pengunjung Data kampus
Data kampus Data kampus
baru
Staff BSP
Data kampus Data kampus baru
menu
Data kampus baru Data kampus
1
Status login terpenuhi
Gambar 3.18 DFD level 0 proses 3
1.1.2.6DFD Level 0 Proses 4
4 Pengolahan foto kampus
foto_kampus
foto kampus baru foto kampus
Ka. BSP
Pengunjung foto kampus
foto kampus foto kampus baru
Staff BSP
foto kampus foto kampus baru
1
Status login terpenuhi
kampus
data kampus
25
1.1.2.7DFD Level 0 Proses 5
5 Pengolahan
data unit
unit
Data unit baru Data unit
Ka. BSP
Pengunjung Data unit
Data unit Data unit baru
Staff BSP
Data unit Data unit baru
menu
Data unit baru Data unit Data kampus
1
Status login terpenuhi
kampus
Gambar 3.20 DFD level 0 proses 5
1.1.2.8DFD Level 0 Proses 6
6 Pengolahan
foto unit
foto_unit
foto unit baru foto unit
Ka. BSP
Pengunjung foto unit
foto unit foto unit baru
Staff BSP
foto unit foto unit baru
1
Status login terpenuhi
unit
data unit
26
1.1.2.9DFD Level 0 Proses 7
7 Pengolahan data tingkat
tingkat
Data tingkat baru Data tingkat
Ka. BSP
Data tingkat
1
Status login terpenuhi
Data tingkat baru
Gambar 3.22 DFD level 0 proses 7
1.1.2.10 D FD Level 0 Proses 8
8 Pengolahan
data lantai
lantai
Data lantai baru Data lantai
Ka. BSP
Pengunjung Data lantai
Data lantai Data lantai baru
Staff BSP
Data lantai Data lantai baru
menu
Data lantai baru Data lantai Id unit dan nama unit
1
Status login terpenuhi
unit
tingkat
Id lantai dan nama lantai
27
1.1.2.11 DFD Level 0 Proses 9
9 Pengolahan
data ruang
ruang
Data ruang baru Data ruang
Ka. BSP
Pengunjung Data ruang
Data ruang Data ruang baru
Staff BSP
Data ruang Data ruang baru
menu
Data ruang baru Data ruang
1
Status login terpenuhi
lantai
Data lantai
Gambar 3.24 DFD level 0 proses 9
1.1.2.12 DFD Level 0 Proses 10
10 Pengolahan
foto ruang
foto_ruang
foto ruang baru foto ruang
Ka. BSP
Pengunjung foto ruang
foto ruang foto ruang baru
Staff BSP
foto ruang foto ruang baru
1
Status login terpenuhi
ruang
data ruang
28
1.1.2.13 DFD Level 0 Proses 11
11 Pengolahan data sarana
sarana
foto ruang baru foto ruang
Ka. BSP
Data sarana
1
Status login terpenuhi Data sarana baru
Gambar 3.26 DFD level 0 proses 11
1.1.2.14 DFD Level 0 Proses 12
12 Pengolahan sarana ruang
sarana_ruang
sarana ruang baru sarana ruang
Ka. BSP
Pengunjung sarana ruang
sarana ruang sarana ruang
baru
Staff BSP
sarana ruang sarana ruang baru
1
Status login terpenuhi
ruang
data ruang
sarana
data sarana
29
1.1.2.15 DFD Level 1 Proses 2
Gambar 3.28 DFD level 1 proses 2
1.1.2.16 DFD level 1 Proses 3
kampus 3.3P Delete data kampus Ka. BSP id_kampus id_kampus Data kampus 3.1P Insert data kampus Data kampus baru
Data kampus baru
3.2P Edit data
kampus id_kampus, data kampus baru
id_kampus, data kampus baru Data kampus 3.5P View data kampus Data kampus Data kampus Pengunjung Data kampus
3.4P Search data kampus diskripsi, diskripsi_video Data kampus diskripsi, diskripsi_video Data kampus diskripsi, diskripsi_video Data kampus Staff BSP Data kampus diskripsi, diskripsi_video id_kampus Data kampus baru
id_kampus, data kampus baru
menu Data menu baru
Data menu Data menu
Data menu Data menu baru
Data menu
30
1.1.2.17 DFD Level 1 Proses 4
foto_kampus 4.3P Delete foto kampus Ka. BSP id_ftkmps id_ftkmps foto kampus 4.1P Insert foto kampus
foto kampus baru
foto kampus baru
4.2P Edit foto kampus
id_ftkmps, foto kampus baru
id_ftkmps, foto kampus baru foto kampus 4.5P View foto kampus foto kampus Data kampus
Pengunjung foto kampus
4.4P Search foto kampus nama_kampus, ket foto kampus diskripsi, diskripsi_video foto kampus diskripsi, diskripsi_video foto kampus Staff BSP foto kampus nama_kampus, ket id_ftkmps foto kampus baru
id_ftkmps, foto kampus baru
kampus
Data kampus
Data kampus
Data kampus
Data kampus
Gambar 3.30 DFD level 1 proses 4
1.1.2.18 DFD Level 1 Proses 5
unit 5.3P Delete data unit Ka. BSP id_unit id_unit Data unit 5.1P Insert data unit Data unit baru
Data unit baru
5.2P Edit data unit id_unit, data unit baru
id_unit, data unit baru Data unit
5.5P View data unit Data unit
Data unit Pengunjung Data unit
5.4P Search data unit nama_unit, diskripsi Data unit nama_unit, diskripsi Data unit nama_unit, diskripsi Data unit Staff BSP Data unit nama_unit, diskripsi id_unit Data unit baru
id_unit, data unit baru
menu Data menu baru
Data menu Data menu
Data menu Data menu baru
Data menu kampus Data kampus
Data kampus
Data menu
31
1.1.2.19 DFD Level 1 Proses 6
foto_unit 6.3P Delete foto unit Ka. BSP id_ftunit id_ftunit Foto unit 6.1P Insert foto unit
foto unit baru
foto unit baru
6.2P Edit foto unit
id_ftunit, foto unit baru
id_ftunit, foto unit baru foto unit
6.5P View foto unit
foto unit
Data unit
Pengunjung foto unit
6.4P Search foto unit nama_unit, ket foto unit diskripsi, diskripsi_video foto unit diskripsi, diskripsi_video foto unit Staff BSP foto unit nama_unit, ket id_ftunit foto unit baru
id_ftunit, foto unit baru
unit
Data unit
Data unit
Data unit
Data unit
Gambar 3.32 DFD level 1 proses 6
1.1.2.20 DFD Level 1 Proses 7
32
1.1.2.21 DFD Level 1 Proses 8
lantai 8.3P Delete data lantai Ka. BSP id_unit, id_lantai id_unit, id_lantai Data lantai 8.1P Insert data lantai Data lantai baru
Data lantai baru
8.2P Edit data
lantai id_unit, id_lantai, data lantai baru
id_unit, id_lantai, data lantai baru Data lantai 8.5P View data lantai Data lantai Data lantai Pengunjung Data lantai
8.4P Search data lantai diskripsi, ket Data lantai diskripsi, ket Data lantai diskripsi, ket Data lantai Staff BSP Data lantai diskripsi, ket id_unit, id_lantai Data lantai baru
id_unit, id_lantai, data lantai baru
menu Data menu baru
Data menu Data menu
Data menu Data menu baru
Data menu tingkat id_unit, nama_unit id_lantai, nama_lantai id_unit, nama_unit Data menu unit id_lantai, nama_lantai
Gambar 3.34 DFD level 1 proses 8
1.1.2.22 DFD Level 1 Proses 9
ruang 9.3P Delete data ruang Ka. BSP id_ruang id_ruang Data ruang 9.1P Insert data ruang Data ruang baru
Data ruang baru
9.2P Edit data
ruang id_ruang, data ruang baru
id_ruang, data ruang baru Data ruang 9.5P View data ruang Data ruang Data ruang Pengunjung Data ruang
9.4P Search data ruang diskripsi, diskripsi_video Data ruang diskripsi, diskripsi_video Data ruang diskripsi, diskripsi_video Data ruang Staff BSP Data ruang diskripsi, diskripsi_video id_ruang Data ruang baru
id_ruang, data ruang baru
menu Data menu baru
Data menu Data menu
Data menu Data menu baru
Data menu lantai Data lantai
Data lantai
Data menu
33
1.1.2.23 DFD Level 1 Proses 10
foto_ruang 10.3P Delete foto ruang Ka. BSP id_ftruang foto ruang 10.1P Insert foto ruang
foto ruang baru
foto ruang baru
10.2P Edit foto
ruang
id_ftruang, foto ruang baru
id_ftruang, foto ruang baru foto ruang 10.5P View foto ruang foto ruang Data ruang
Pengunjung foto ruang
10.4P Search foto ruang nama_ruang, ket foto ruang diskripsi, diskripsi_video foto ruang diskripsi, diskripsi_video foto unit Staff BSP foto ruang nama_ruang, ket id_ftruang foto ruang baru
id_ftruang, foto ruang baru
ruang
Data ruang
Data ruang
Data ruang
Data ruang
Gambar 3.36 DFD level 1 proses 10
1.1.2.24 DFD Level 1 Proses 11
sarana 11.3P Delete data sarana id_sarana Dara sarana 11.1P Insert data sarana
Data sarana baru
11.2P Edit data
sarana
id_sarana, data sarana baru
id_sarana, data sarana baru
Data sarana 11.5P View data sarana Data sarana Data sarana 11.4P Search data sarana nama_sarana, ket Data sarana Data sarana Ka. BSP id_sarana Data sarana baru
34
1.1.2.25 DFD Level 1 Proses 12
sarana_ruang 12.3P Delete sarana ruang Ka. BSP Id_srn sarana ruang 12.1P Insert sarana ruang
sarana ruang baru
sarana ruang baru
12.2P Edit sarana
ruang
id_srn, sarana ruang baru
id_srn, sarana ruang baru sarana ruang 12.5P View sarana ruang sarana ruang Data ruang
Pengunjung sarana ruang
12.4P Search sarana ruang nama_sarana, ket sarana ruang nama_sarana, ket sarana ruang
nama_ruang, nama_sarana, ket sarana unit
Staff BSP
sarana ruang nama_sarana, ket
id_srn Sarana ruang baru baru
id_srn, sarana ruang baru
ruang
Data ruang
Data ruang
Data ruang
Data ruang
Gambar 3.38 DFD level 1 proses 12
1.2. Perancangan Sistem
Pada tahap ini dibuat perancangan sistem sesuai dengan analisi yang telah
dibuat sebelumnya. Perancangan sistem ini terdiri dari desain database dan user
interface.
1.2.1 Perancangan Database Sistem
Langkah pertama dalam perancangan database sistem adalah membuat
conceptual database design. Alat yang digunakan adalah ER-Diagram (entity
relational). Entity relational diagram digunakan untuk menggambarkan hubungan
35
1.2.1.1 ER Diagram (Conceptual Design)
Gambar 3.39 Entity Relational Diagram
Pada gambar 3.39 menggambarkan hubungan antar etitas. Entitas kampus memiliki hubungan one to many
dengan entitas foto_kampus dan unit. Entitas denah_lantai memiliki hubungan one to many dengan entitas unit dan
hubungan one to one dengan entitas lantai. Entitas denah_lantai juga memiliki hubungan one to many dengan entitas
ruang. Sedangkan entitas ruang memiliki hubungan one to many dengan entitas foto_ruang. Entitas menu memiliki
36
1.2.1.2 Logical Database Design (Relation Model)
unit kampus foto_unit foto_kampus ruang tingkat foto_ruang id_kampus (PK) nama_kampus diskripsi video diskripsi_video judul id_unit (PK) id_lantai (PK) nama_lantai id_ruang (PK) id_unit (FK) id_lantai (FK) nama_ruang diskripsi video diskripsi_video judul id_ftkmps (PK) id_kampus (FK) foto id_ftunit (PK) id_unit (FK) foto id_ftruang (PK) id_ruang (FK) foto ket ket ket nama_unit id_kampus (FK) diskripsi lantai id_dnhlnt (PK) id_unit (FK) (PK) id_lantai (FK) (PK) denah ket diskripsi judul judul user id_user (PK) password nama_lengkap level menu id (PK) parent_id url id_unit id_lantai title sarana id_sarana (PK) nama_sarana ket sarana_ruang id_srn (PK) id_ruang id_sarana jml
Gambar 3.40 Relational Tabel
Keterangan :
Relation model mengambarkan entitas – entitas dari ER diagram yang menjadi tabel. Untuk nama entitas menjadi
37
1.2.1.3 Physical Database Design (Relation Model)
Bedasarkan relation model pada gambar 3.23, dapat dibuat physical
database design.
1.2.1.3.1 Tabel User
Tabel ini digunakan untuk menyimpan data kampus.
KEY NAMA FIELD TIPE DATA PANJANG KETERANGAN
PK id_user varchar 50 ID user
password varchar 50 Password user
nama_lengkap varchar 100 Isi halaman kampus
level varchar 50 level user
Tabel 3.1 Tabel User
1.2.1.3.2 Tabel kampus
Tabel ini digunakan untuk menyimpan data kampus.
KEY NAMA FIELD TIPE DATA PANJANG KETERANGAN
PK id_kampus int 10 ID kampus
nama_kampus varchar 100 Nama kampus
diskripsi varchar 4000 Isi halaman kampus
video varchar 100 Nama file dari video
kampus
diskripsi_video varchar 4000 Diskripsi video kampus
38
1.2.1.3.3 Tabel foto_kampus
Tabel ini digunakan untuk menyimpan semua foto kampus
KEY NAMA FIELD TIPE DATA PANJANG KETERANGAN
PK id_ftkmps int 10 ID foto kampus
FK id_kampus int 10 ID kampus
foto varchar 100 Nama file foto kampus
ket varchar 500 keterangan foto kampus
Tabel 3.3 Tabel Foto Kampus
1.2.1.3.4 Tabel unit
Tabel ini digunakan untuk menyimpan data unit
KEY NAMA FIELD TIPE DATA PANJANG KETERANGAN
PK id_unit int 10 ID unit
FK id_kampus int 10 ID kampus
nama_unit varchar 100 Nama unit
diskripsi varchar 4000 Isi halaman unit
Tabel 3.4 Tabel Unit
1.2.1.3.5 Tabel foto_unit
Tabel ini digunakan untuk menyimpan foto unit
KEY NAMA FIELD TIPE DATA PANJANG KETERANGAN
PK id_ftunit int 10 ID foto unit
FK id_unit int 10 ID unit
39
ket varchar 500 keterangan foto unit
Tabel 3.5 Tabel Foto Unit
1.2.1.3.6 Tabel tingkat
Tabel ini digunakan untuk menyimpan nama tingkat
KEY NAMA FIELD TIPE DATA PANJANG KETERANGAN
PK id_lantai int 10 ID foto lantai
nama_lantai Varchar 100 Nama lantai
Tabel 3.6 Tabel Tingkat
1.2.1.3.7 Tabel lantai
Tabel ini digunakan untuk menyimpan data lantai
KEY NAMA FIELD TIPE DATA PANJANG KETERANGAN
FK id_unit int 10 ID unit
FK id_lantai int 10 ID lantai
denah varchar 100 Nama file dari denah
diskripsi varchar 4000 Isi halaman lantai
ket varchar 500 keterangan denah lantai
Tabel 3.7 Tabel Lantai
1.2.1.3.8 Tabel Ruang
Tabel ini digunakan untuk menyimpan data ruang.
KEY NAMA FIELD TIPE DATA PANJANG KETERANGAN
PK id_ruang int 10 ID ruang
40
FK id_lantai int 10 ID lantai
nama_ruang varchar 100 Nama lantai
diskripsi varchar 4000 Isi halaman ruang
video varchar 100 Nama file dari video
ruang
diskrisi_video varchar 4000 Diskripsi video
Tabel 3.8 Tabel Ruang
1.2.1.3.9 Tabel foto_ruang
Tabel ini digunakan untuk menyimpan foto ruang
KEY NAMA FIELD TIPE DATA PANJANG KETERANGAN
PK id_ftruang int 10 ID foto ruang
FK id_ruang int 10 ID ruang
foto varchar 100 Nama file dari foto ruang
ket varchar 500 kerangan foto ruang
Tabel 3.9 Tabel Foto Ruang
1.2.1.3.10 Tabel sarana
Tabel ini digunakan untuk menyimpan sarana
KEY NAMA FIELD TIPE DATA PANJANG KETERANGAN
PK id_sarana int 10 ID sarana
nama_sarana varchar 100 nama sarana
ket varchar 500 url dari menu
41
1.2.1.3.11 Tabel sarana_ruang
Tabel ini digunakan untuk menyimpan sarana ruang
KEY NAMA FIELD TIPE DATA PANJANG KETERANGAN
PK id_srn int 10 ID sarana ruang
id_ruang int 10 ID ruang
id_sarana varchar 100 ID sarana
jml int 100 url dari menu
Tabel 3.11 Tabel Sarana Ruang
1.2.1.3.12 Tabel menu
Tabel ini digunakan untuk menyimpan menu
KEY NAMA FIELD TIPE DATA PANJANG KETERANGAN
PK id int 10 ID menu
Parent_id int 10 Parent id dari menu
title varchar 100 nama menu
url varchar 300 url dari menu
Tabel 3.12 Tabel menu
• Field title berisi data dari field nama_kampus pada tabel kampus,
field nama_unit pada tabel unit, field nama_lantai pada tabel lantai
dan field nama_ruang pada tabel ruang.
• Field url berisi penggabungan nama modul dan id Primary Key
dari tabel kampus, unit, denah_lantai dan ruang. Misal url kampus :
?module=kampus&id=1. Url tersebur berasal dari nama
42
1.2.2 Desain User Interface
User interface adalah rancangan sistem yang akan digunakan oleh
pengguna. Dengan user interface ini, pengguna dapat memasukkan data ke
dalam sistem dan sistem akan menampilkannya. Desain user interface ini
dirancang untuk memudahkan pengguna dalam menjalankan sistem ini.
III.2.2.1 Desain Halaman User
III.2.2.1.1 Desain Halaman Kampus
Logo animasi flash Kampus V Kampus IV Kampus III Kampus II
Galeri foto Kampus I
foto - foto kampus
<< prev next >>
Copyright @ USD Kampus I
Kampus I
... diskripsi kampus 1... ... ... ...
Video Kampus
... diskripsi video kampus 1... ... ... ...
Ga
