Peta Interaktif USU Berbasis Web
PETA INTERAKTIF USU
BERBASIS WEB
TUGAS AKHIR
ISRA’ MIKRAZI
102406008
PROGRAM STUDI D3 TEKNIK INFORMATIKA
DEPARTEMEN MATEMATIKAFAKULTAS MATEMATIKA DAN
ILMU PENGETAHUAN ALAM
UNIVERSITAS SUMATERA UTARA
MEDAN
(2)
PETA INTERAKTIF USU
BERBASIS WEB
TUGAS AKHIR
Diajukan untuk melengkapi tugas dan memenuhi syarat memperoleh Ahli Madya
ISRA’ MIKRAZI
102406008
PROGRAM STUDI D3 TEKNIK INFORMATIKA
DEPARTEMEN MATEMATIKA FAKULTAS MATEMATIKA DAN
ILMU PENGETAHUAN ALAM
UNIVERSITAS SUMATERA UTARA
MEDAN
(3)
PERSETUJUAN
Judul : PETA INTERAKTIF USU BERBASIS WEB
Kategori : TUGAS AKHIR Nama : ISRA’ MIKRAZI Nomor Induk Mahasiswa : 102406008
Program Studi : DIPLOMA (D3) TEKNIK INFORMATIKA
Departemen : MATEMATIKA
Fakultas : MATEMATIKA DAN ILMU PENGETAHUAN
ALAM (FMIPA) UNIVERSITAS SUMATERA UTARA
Diluluskan di Medan, Juli 2013 Komisi Pembimbing :
Diketahui/Disetujui oleh Pembimbing, Departemen Matematika FMIPA USU
Ketua,
Prof. Drs. Tulus, M.Si
Drs. Marihat Situmorang,M.Kom Nip. 19620901 198803 1 002 Nip. 19631214198903001
(4)
PERNYATAAN
PETA INTERAKTIF USU BERBASIS WEB
TUGAS AKHIR
Saya mengakui bahwa Tugas Akhir ini adalah hasil kerja saya sendiri, kecuali beberapa kutipan dan ringkasan yang masing-masing disebutkan sumbernya.
Medan, Juli 2013
ISRA’ MIKRAZI 102406008
(5)
PENGHARGAAN
Alhamdulillah, Puji syukur penulis ucapkan kehadirat Allah SWT karena berkat limpahan kasih sayang-Nya penulis dapat menyelesaikan Tugas Akhir ini sesuai dengan waktu yang telah ditentukan. Tugas Akhir ini disusun guna memenuhi suatu syarat kelulusan pada Program Studi D-III Teknik Informatika Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera Utara. Adapun judul Tugas Akhir ini adalah “PETA INTERAKTIF USU BERBASIS WEB”.
Penulis menyadari bahwa penulisan Tugas Akhir ini tidak akan terselesaikan dengan baik dan tepat waktu tanpa adanya masukan, bimbingan serta bantuan moril dan materil dari berbagai pihak. Sehingga pada kesempatan ini, penulis menyampaikan ucapan terima kasih yang sebesar-besarnya kepada:
1. Bapak Drs. Marihat Situmorang, M.IT selaku Dosen Pembimbing penulis yang telah banyak memberikan bimbingan dan pengarahan kepada penulis dalam menyelesaikan Tugas Akhir ini.
2. Bapak Dr. Sutarman, M.Sc selaku dekan FMIPA USU.
3. Bapak Prof. Drs. Tulus, M.Si dan Dra. Mardiningsih, M.Si selaku Ketua dan Sekretaris Departemen Matematika USU.
4. Bapak Syahril Effendi, S.Si, M.IT dan Syahriol Sitorus, S.Si, M.IT selaku ketua dan sekretaris program studi D-III Teknik Informatika.
(6)
5. Seluruh Staf pengajar di Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera Utara khususnya program studi D-III Teknik Informatika yang telah banyak memberikan ilmu pengajaran.
6. Teristimewa ucapan terima kasih untuk orang tua saya tercinta, yang telah memberikan doa, nasihat dan dukungan baik secara moril maupun materil sehingga penulis dapat menyelesaikan Tugas Akhir ini.
7. Terima kasih untuk Dio Nando Hasibuan yang telah memberikan dukungan dan semangat untuk saya.
8. Seluruh rekan-rekan mahasiswa D-III Teknik Informatika khususnya teman-teman Kom’A 10 yang telah memberikan semangat, baik materi maupun moril apabila penulis sering membutuhkan bantuan.
Akhirnya dengan kerendahan hati penulis mempersembahkan Tugas Akhir ini, semoga Tugas Akhir ini dapat bermanfaat bagi pembaca. Dan penulis menyadari bahwa dalam Tugas Akhir ini masih banyak terdapat kekurangan dan kesalahan, untuk itu penulis sangat mengharapkan kritik dan saran dari semua pihak guna penyempurnaan laporan dimasa yang akan datang.
Medan, Juni 2013
Penulis
Isra’ Mikrazi 102406008
(7)
ABSTRAK
Tugas akhir ini merancang suatu aplikasi Peta Interaktif USU Berbasis Web yang bermanfaat untuk menyediakan informasi yang baik dengan cepat dan mudah untuk para mahasiswa maupun dosen atau pengunjung untuk mengetahui lokasi-lokasi di kampus USU. Perancangan sistem dalam merancang Peta Interaktif USU Berbasis Web ini dikembangkan dengan menggunakan perangkat lunak Adobephotoshop dan XAMPP. Dengan menggunakan XAMPP paket-paket aplikasi yang kita perlukan dalam merancang sebuah situs yang baik seperti Apache Web Server, PHP dan MySQL telah tersedia. Sistem Informasi Absensi. Peta Interaktif USU ini juga menampilkan foto gedung, dan ruangan penting di suatu lokasi maupun di setiap fakultas di kampus USU. Hal tersebut digunakan untuk mempermudah user atau pengunjung untuk dapat mengetahui secara cepat lokasi yang ingin dikunjungi.
(8)
DAFTAR ISI
Halaman
Persetujuan ii
Pernyataan iii
Penghargaan iv
Abstrak vi
Daftar Isi vii
Daftar Gambar vii
Daftar Tabel ix
BAB 1 Pendahuluan 1
Latar Belakang 1
1.1 Perumusan Masalah 3 1.2 Tujuan Penelitian 4 1.3 Pembatasan Masalah 4 1.4 Metodologi Penelitian 5 1.5 Sistematika Penulisan 5 BAB 2 Landasan Teori 6 2.1 Konsep dasar Perancangan Peta Interaktif 7
2.1.1 Pengertian Peta 7 2.1.2 Pengertian Interaktif 8 2.1.3 Pengertian Peta Interaktif 8 2.2 Teknik Perancangan Basis Data 9 2.2.1 Data Flow Diagram (DFD) 9 2.2.2 Bagan Alir (Flowchart) 10 2.3 Pengertian Website 12 2.4 HTML (HyperText Markup Language) 14
2.4.1 Dokumen HTML 14 2.4.2 Penamaan Dokumen HTML 14
2.4.3 Elemen Dan Tag HTML 14
2.4.4 CSS ( Cascading Style Sheet ) 18
2.4.5 JavaScript 19
2.5 PengenalanPHP (HyperText Preprocessor) 20
2.5.1 Sejarah PHP 20
2.5.2 Skrip PHP 21
2.5.2 Integrasi dengan Database 24 2.6 MySQL 27
(9)
BAB 3 Sekilas Universitas Sumatera Utara 28
3.1 Kondisi Umum Universitas Sumatera Utara 28
BAB 4 Rancangan Sitem Program 29
4.1 Data Flow Diagram 30 4.1 Flowchat Program 31 BAB 5 Implementasi Sistem 33
5.1 Pengertian Implementasi Sistem 33
5.2 Tujuan Implementasi Sistem 33
5.3 Komponen-komponen Kebutuhan Sistem 34
5.3.1 Hardware 34
5.3.2 Software 34
5.3.3 Brainware 34
5.4. Demonstrasi Program 36
5.4.1 Halaman Login Admin 36
5.4.2 Halaman Utama Admin 37
5.4.3 Halaman Master Data 38
5.4.4 Halaman Peta Interaktif 41
BAB 6 Kesimpulan Dan Saran 43
6.1 Kesimpulan 43
6.2 Saran 44
Daftar Pustaka 45 Lampiran:
(10)
DAFTAR GAMBAR
Halaman Gambar 2.1 Dokumen HTML ditampilkan di browser IE 20 Gambar 2.2 Dokumen PHP ditampilkan di Browser Mozila 29 Gambar 4.1 Diagram Peta Interaktif Berbasis Web 30
Gambar 4.2 Data Flow Diagram Level Nol 31
Gambar 4.3 Data Flow Diagram Peta Interaktif 32
Gambar 5.1 Tampilan Windows 7 36
Gambar 5.2 Tampilan XAMPP 36
Gambar 5.3 Halaman Admin 37
Gambar 5.4 Halaman Menu Fakultas 38
Gambar 5.6 Laporan Menu Fakultas 38
Gambar 5.7 Halaman Menu Input Gedung 39
Gambar 5.8 Laporan Menu Gedung 39
Gambar 5.9 Halaman Menu Input Ruangan 40
Gambar 5.10 Laporan Menu Ruangan 40
Gambar 5.11 Tampilan Fakultas dari Google Map 41
Gambar 5.12 Tampilan Dropdown 41
Gambar 5.13 Tampilan Gedung Fakultas 42
(11)
DAFTAR TABEL
Halaman
Tabel 2.1 Simbol Data Flow Diagram (DFD) 11
Tabel 2.2 Simbol Bagan Alir (Flowchat) 12
Tabel 2.3 Daftar Database-Database Yang Didukung PHP 30 Tabel 3.1 Nama-nama Kepala Kelurahan 35
(12)
ABSTRAK
Tugas akhir ini merancang suatu aplikasi Peta Interaktif USU Berbasis Web yang bermanfaat untuk menyediakan informasi yang baik dengan cepat dan mudah untuk para mahasiswa maupun dosen atau pengunjung untuk mengetahui lokasi-lokasi di kampus USU. Perancangan sistem dalam merancang Peta Interaktif USU Berbasis Web ini dikembangkan dengan menggunakan perangkat lunak Adobephotoshop dan XAMPP. Dengan menggunakan XAMPP paket-paket aplikasi yang kita perlukan dalam merancang sebuah situs yang baik seperti Apache Web Server, PHP dan MySQL telah tersedia. Sistem Informasi Absensi. Peta Interaktif USU ini juga menampilkan foto gedung, dan ruangan penting di suatu lokasi maupun di setiap fakultas di kampus USU. Hal tersebut digunakan untuk mempermudah user atau pengunjung untuk dapat mengetahui secara cepat lokasi yang ingin dikunjungi.
(13)
BAB 1
PENDAHULUAN
1.1 Latar Belakang
Teknologi informasi pada saat ini telah berkembang sangat pesat sehingga mempunyai dampak dalam meningkatkan efektifitas dan keefisienan dalam melakukan setiap pekerjaan. Mungkin suatu kenaifan kalau berbicara tentang teknologi informasi dan komunikasi, tanpa membicarakan suatu benda yang bernama komputer. Komputer merupakan suatu media elektronik yang memegang peranan yang sangat penting dalam perkembangan yang terjadi saat ini.
Komputer bukan lagi barang mewah atau sesuatu yang langka untuk dimiliki oleh seseorang seperti awal kedatangannya, tetapi sudah menjadi suatu keperluan bahkan kebutuhan yang sangat bersifat umum dan vital, terutama bagi perusahaan dan badan instansi baik milik pemerintah maupun swasta. Penggunaan komputer telah berkembang menjadi sebuah sarana komunikasi dan edukasi yang paling cepat saat ini. Sehingga pengunaannya menjadi penting di setiap sendi-sendi kehidupan masyarakat, termasuk dalam proses perolehan informasi pada suatu perusahaan.
(14)
Sejak munculnya teknologi Internet, proses pengiriman, penyampaian, serta penerimaan informasi itu sendiri menjadi lebih cepat dan efektif. Seiring berkembangnya teknologi internet, maka aplikasi web atau yang sering juga disebut dengan perangkat lunak berbasis web ini baik dari segi penggunaan, ukuran, dan bahasa pemrograman yang digunakan serta kompleksitasnya juga ikut berkembang. Aplikasi ini telah banyak yang bersifat dinamis dan task oriented.
PHP (Hypertext Preprocessor) merupakan bahasa pemrograman yang bersifat server side script, yaitu bahasa yang berbentuk script yang terletak dan dieksekusi di server untuk kemudian hasilnya (berupa kode HTML) dikembalikan ke browser pengguna/user/client. PHP dirancang untuk membentuk suatu web yang bersifat dinamis, yang artinya halaman yang ditampilkan dibuat saat halaman itu diminta oleh pengguna/user/client. PHP juga dapat berinteraksi dengan hampir semua teknologi web yang telah ada dan sifatnya open source (bebas pakai) sehingga memberikan kesempatan buat semua user dan programmer untuk menggunakan dan mengembangkannya.
Selain itu demi mendukung berkembangnya aplikasi web yang semakin besar, rumit, dan kompleks, maka dikembangkanlah kemampuan object oriented programming dari PHP. Keuntungan yang dapat diperoleh dari kemampuan object oriented programming dari PHP, yaitu kemudahan untuk mengolah kompleksitas yang dibuat serta kemudahan untuk melakukan perubahan dan pengembangan dari aplikasi tersebut.
(15)
Sebuah Peta Interaktif pada zaman sekarang sangat dibutuhkan untuk mempermudah pengguna Internet mengetahui suatu lokasi tujuannya.
Dengan pertimbangan diatas dan pribadi penulis yang ingin menerapkan pengetahuan yang telah diperoleh selama ini maka penulis memutuskan untuk membuat suatu aplikasi web yang berjudul : “PETA INTERAKTIF USU BERBASIS WEB”.
1.2 Perumusan Masalah
Pada umumnya setiap daerah memerlukan suatu peta interaktif untuk mengetahui spesifikasi lokasi tersebut agar para pengunjung dapat mengetahui lokasi tujuan secara detail, semua itu juga berlaku di Universitas Sumatera Utara. Sehubungan dengan hal tersebut maka dapat dirumuskan masalah yang dihadapi penulis di dalam pembuatan aplikasi ini, yaitu:
a. Bagaimana mendesain, membuat dan menghasilkan suatu sistem informasi yang berbasis web untuk dapat menyimpan dan menampilkan informasi detail terhadap suatu lokasi
b. Bagaimana informasi pada website dapat di update dengan mudah pada waktu yang diinginkan sesuai dengan tujuan aplikasi ini, yaitu website yang dinamis.
(16)
1.3Tujuan Penelitian
Demi kelancaran dan pengembangan suatu komunitas harus di dukung dengan kebutuhan akan informasi yang cepat dan tepat, dalam hal ini suatu komunitas dituntut untuk mengikuti perkembangan zaman sesuai dengan kebutuhan. Penelitian adalah langka yang paling tepat untuk mengetahui dengan jelas bagian-bagian dari sistem yang digunakan dan merupakan sumber informasi di dalam pembentukan sistem yang baru.
1. Merancang dan membuat suatu Website yang dapat memberikan informasi lokasi/gedung di Kampus Universitas Sumatera Utara .
2. Mengetahui bagaimana merancang dan membuat Website serta menghubungkannya dengan program aplikasi HTML, bahasa pemrograman PHP 5.0.
3. Untuk memenuhi salah satu persyaratan menyelesaikan Tugas Akhir Diploma (D3) FMIPA USU.
1.4 Pembatasan Masalah
Agar pembahasan masalah tidak menyimpang dari tujuan penelitian, maka berikut adalah beberapa batasan yang perlu dibuat, yaitu:
a. Website ini akan menampilkan halaman-halaman web yang statis maupun dinamis mengenai sistem informasi gedung/fakultas di Universitas Sumatera Utara.
(17)
c. Website yang dibangun mendukung bahasa pemograman web yang lainnya seperti: HTML (Hypertext Markup Language), CSS (Cascading Style Sheets), dan Javascript.
d. Aplikasi dibangun menggunakan aplikasi web server XAMPP yang terdiri dari Apache, PHP, dan MySQL.
1.5 Metodologi Penelitian
Metodologi penelitian yang digunakan penulis, meliputi antara lain: 1. Penelitian lapangan ( Field Research )
Penelitian dilakukan langsung ke lapangan yaitu Kampus USU dengan mengambil foto setiap gedung yang terdapat di USU baik itu gedung fakultas, Auditorium, Birek maupun Perpustakaan .
2. Penelitian Kepustakaan
Penulis melakukan penelitian keperpustakaan dengan tujuan agar memperoleh data teoritis yang bersumber dari buku-buku ilmiah dan tulisan yang berkaitan dengan komputer dan masalah-masalah yang berkaitan dengan tugas akhir ini.
(18)
1.6 Sistematika Penulisan
Adapun sistematika penulisan laporan tugas akhir ini adalah sebagai berikut: BAB 1 : Dalam bab ini penulis menguraikan Latar Belakang, Perumusan
Masalah Tujuan Penelitian, Pembatasan Masalah, Metodologi Penelitian dan Sistematika Penelitian.
BAB 2 : Dalam bab ini penulis menguraikan beberapa hal yang berhubungan dengan aplikasi website dinamis yang ingin dibangun penulis yaitu perancangan sistem informasi, teknik perancangan basis data, pengertian website, HTML ( HyperText Markup Language ), pengenalan konsep Object Oriented Programming dan MySQL.
BAB 3 : Sekilas Dalam bab ini penulis menyajikan gambaran tentang Kampus Universitas Sumatera Utara.
BAB 4 : Dalam bab ini penulis menguraikan tentang perancangan sistem yang dirancang yang meliputi perancangan layout, perancangan database, gambaran aplikasi website yang akan dibuat serta bagaimana algoritma aplikasi tersebut saat dijalankan.
BAB 5 : Dalam bab ini penulis menyajikan tentang pengertian implementasi aplikasi, tujuan implementasi aplikasi serta spesifikasi aplikasi. BAB 6 : Dalam bab ini penulis menguraikan tentang kesimpulan dan saran.
(19)
BAB 2
LANDASAN TEORITIS
2.1Konsep Dasar Perancangan Peta Interaktif
Suatu sistem adalah suatu jaringan kerja dari prosedur-prosedur yang saling berhubungan, berkumpul bersama-sama untuk melakukan suatu kegiatan atau untuk menyelesaikan suatu sasaran yang tertentu. Sedangkan informasi itu sendiri memiliki pengertian data yang diolah bentuk yang lebih berguna dan lebih berarti bagi yang menerimanya. Sumber dari informasi tersebut adalah data. (Sumber http://www.wikipedia.com 09 Maret 2013) .
2.1.1 Pengertian Peta
Peta adalah gambaran permukaan bumi pada bidang datar dengan skala tertentu melalui suatu sistem proyeksi. Peta bisa disajikan dalam berbagai cara yang berbeda, mulai dari peta konvensional yang tercetak hingga peta digital yang tampil di layar komputer. Istilah peta berasal dari bahasa Yunani mappa yang berarti taplak atau kain penutup meja. Namun secara umum pengertian peta adalah lembaran seluruh atau sebagian permukaan bumi pada bidang datar yang
(20)
diperkecil dengan menggunakan skala tertentu. Sebuah peta adalah representasi dua dimensi dari suatu ruang tiga dimensi. Ilmu yang mempelajari pembuatan peta disebut kartografi. Banyak peta mempunyai skala, yang menentukan seberapa besar objek pada peta dalam keadaan yang sebenarnya. Kumpulan dari beberapa peta disebut atlas (Sumber http://www.wikipedia.com 09 Maret 2013) .
2.1.2 Pengertian Interaktif
Interaktif bersifat saling melakukan aksi; antar-hubungan; saling aktif; atau komputer yang berkaitan dengan dialog antara komputer dan terminal atau antara komputer dan computer (Sumber http://www.wikipedia.com 09 Maret 2013) .
2.1.3 Pengertian Peta Interaktif
Peta Interaktif adalah penyajian peta dengan media web yang mudah digunakan untuk memperoleh informasi spasial. Anda dapat memperoleh informasi spasial tentang kehutanan dengan mudah melalui internet cukup menggunakan browser yang tersedia.
Informasi Geografis yang ada di situs ini bersifat indikatif (umum) serta akan terus disempurnakan dan dilengkapi sesuai dengan perkembangan terakhir untuk meningkatkan keakurasian, ketepatan waktu dan kelengkapan data. Batas-batas yang disajikan tidak berkekuatan hukum, untuk tujuan dimaksud harus menggunakan data (peta) yang disahkan oleh pejabat yang berwenang sesuai
(21)
ketentuan yang berlaku (Surat Keputusan) (Sumber http://www.wikipedia.com 09 Maret 2013) .
.
2.2 Teknik Perancangan Basis Data
Prinsip utama dari basis data adalah pengaturan data/arsip dengan tujuan utamanya adalah kemudahan dan kecepatan dalam mengambil kembali data/arsip. Satu hal yang harus diperhatikan, bahwa basis data bukan hanya sekedar penyimpanan data secara elektronis (dengan bantuan komputer). Artinya, tidak semua bentuk penyimpanan data secara elektronis bisa disebut basis data. (Sumber http://www.scribd.com 09 Februari 2013).
2.2.1 Data Flow Diagram (DFD)
Data flow Diagram di sebut juga dengan diagram arus data sering digunakan untuk menggambarkan suatu sistem yang telah ada atau sistem baru yang akan dikembangkan secara logika tanpa mempertimbangkan lingkungan fisik dimana data tersebut tersimpan. Simbol-simbol DFD seperti tabel 2.1
Tabel 2.1 Simbol Data Flow Diagram (DFD)
Simbol Arti
Kesatuan luar merupakan kesatuan luar sistem yang dapat berupa orang, organisasi, atau sistem lainnya yang berada dilingkungan luarnya yang akan
(22)
memberi input atau menerima output dari sistem
mengatur diantara proses simpan data dan kesatuan luar arus data dapat berupa masukan untuk hasil dari proses.
Entitas internal atau proses, dimana data masuk kealiran data keluar
Simbol ini merupakan simpanan dari data yang dapat berupa file, arsip, kotak, table acuan dan agenda (buku).
2.2.2 Bagan Alir (Flowchart)
Flowchart sering disebut juga dengan bagan alir. Flowchart atau bagan alir adalah sebagai suatu skema yang menggambarkan urutan kegiatan dari suatu program dari awal sampai akhir.
Adapun simbol-simbol flowchart dapat dilihat pada tabel 2.2
Tabel 2.2 Simbol bagan alir (flowchart)
No Simbol Fungsi
1
Terminal, untuk memulai atau mengakhiri suatu program
(23)
2
Proses suatu simbol yang menunjukkan setiap pengolahan yang dilakukan
3
Input-output untuk memasukan data ataupun menunjukan hasil dari suatu proses
4
Decesion, suatu kondisi yang akan menghasilkan beberapa kemungkinan jawaban atau pilihan
5
Preparation, proses suatu simbol yang menyediakan tempat-tempat pengolahan dalam storage
6
Conector, suatu prosedure akan masuk atau keluar melalui simbol ini dalam lembar yang sama
7
Off-page Conector, merupakan simbol masuk atau keluarnya suatu prosedure pada lembar kertas lainya
8
Flow, arus dari pada prosedure yang dapat dilakukan atas kebawah dan bawah keatas, dari kiri kekanan ataupun dari kanan kekiri
9
Stored data, penyimpanan data secara sementara
10
Predifined process, untuk menyatakan
sekumpulan langkah proses yang ditulis sebagai procedure
(24)
11
Simbol penyimpanan/storage pada komputer, misalnya menyimpan database.
2.3 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 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 Friendster, Multiply, dll. Dalam sisi pengembangannya, website statis hanya bisa diupdate oleh pemiliknya saja, sedangkan website dinamis bisa diupdate oleh pengguna maupun pemilik. (Sumber http://www.scribd.com 09 Februari 2013).
Untuk menyediakan sebuah website, maka kita harus menyediakan unsur-unsur penunjangnya, seperti halnya Nama Domain atau biasa disebut dengan Domain Name atau URL adalah alamat unik di dunia internet yang digunakan untuk mengidentifikasi sebuah website, atau dengan kata lain domain name adalah
(25)
alamat yang digunakan untuk menemukan sebuah website pada dunia internet. Contoh: http://www.nama situs.com. Nama domain diperjualbelikan secara bebas di internet dengan status sewa tahunan.
Nama Domain itu terbeli di salah satu penyedia jasa pendaftaran, maka pengguna disediakan sebuah kontrol panel untuk administrasinya. Jika pengguna lupa/tidak memperpanjang masa sewanya, maka nama domain itu akan di lepas lagi ketersediaannya untuk umum. Nama domain sendiri mempunyai identifikasi ekstensi/akhiran sesuai dengan kepentingan dan lokasi keberadaan website tersebut. Contoh nama domain ber-ekstensi internasional adalah com, net, org, info, biz, name, ws. Contoh nama domain ber-ekstensi lokasi Negara Indonesia adalah:
• .co.id : Untuk Badan Usaha yang mempunyai badan hukum sah
• .ac.id : Untuk Lembaga Pendidikan
• .go.id : Khusus untuk Lembaga Pemerintahan Republik Indonesia
• .mil.id : Khusus untuk Lembaga Militer Republik Indonesia
• .or.id : Untuk segala macam organisasi yand tidak termasuk dalam kategori “ac.id”,”co.id”,”go.id”,”mil.id” dan lain lain
• .war.net.id : untuk industri warung internet di Indonesia
• .sch.id : khusus untuk Lembaga Pendidikan yang menyelenggarakan pendidikan seperti SD, SMP dan atau SMU
(26)
2.4 HTML (HyperText Markup Language) 2.4.1 Dokumen HTML
Dokumen HTML adalah file teks murni yang dapat dibuat dengan editor teks sembarang. Dokumen ini dikenal dengan sebagai web page. Dokumen HTML merupakan dokumen yang disajikan dalam browser web surfer. Dokumen ini umumnya berisi informasi atau interface aplikasi di dalam internet.
Ada dua cara untuk membuat sebuah web page : dengan web editor (misalnya Macromedia Dreamweaver atau Microsoft Frontpage) atau dengan editor teks biasa (misalnya notepad atau editplus).
2.4.2 Penamaan Dokumen HTML
Penamaan dokumen HTML dapat dilakukan dengan memilih suatu nama, sembarang nama, kemudian menambahkan sebuah ekstensi “.htm” atau “.html” (tanda kutip tidak perlu dituliskan karena digunakan sebagai penjelas saja).
Ekstensi dokumen HTML yang menggunakan 3 karakter awalnya adalah untuk mengakomodasikan sistem penamaannya yang ada dalam sistem operasi DOS. Nama dokumen pada beberapa sistem operasi bersifat case sensitive (membedakan huruf besar dan huruf kecil). Nama dokumen yang sama tetapi dituliskan dengan case yang berbeda akan dianggap sebagai dokumen yang berbeda, misalnya dokumen.html akan berbeda dengan DOKUMEN.html. kasus
(27)
case sensitive akan dijumpai pada dokumen web yang do hosting di dalam server yang berbasis *nix (keluarga sistem operasi UNIX).
2.4.3 Elemen Dan Tag HTML
Dokumen HTML disusun oleh elemen-elemen. “Elemen” merupakan istilah bagi komponen-komponen dasar pembentuk dokumen HTML. Untuk menandai berbagai elemen dalam suatu dokumen HTML, digunakan tag. Tag HTML terdiri atas sebuah kurung sudut kiri (<, tanda lebih kecil), sebuah nama tag, dan sebuah kurung sudut kanan (>, tanda lebih besar). Tag umumnya berpasangan (misalnya <H1> dengan </H1>), tag yang menjadi pasangan selalu diawali dengan karakter garis miring. Tag yang pertama menunjukkan tag awal yang berarti awal elemen, dan yang kedua menunjukkan tag akhir, berarti akhir elemen.
Nama elemen ditunjukkan dengan nama tag nya. Suatu elemen didalam dokumen HTML harus ditandai dengan penulisan tag nya berpasangan. Ada beberapa elemen yang tidak mengharuskan tag nya dituliskan secara berpasangan, elemen tersebut diantaranya adalah:
a. Paragraf dengan tag <p>
b. Ganti baris – line break dengan tag <br> c. Garis datar – horizontal rule dengan tag <hr> d. List item dengan tag <li>
(28)
Secara umum suatu elemen dalam dokumen HTML yang dinyatakan dengan tagnya, dituliskan : <nama tag>_</nama tag>. Penulisan penamaan tag bebas, dapat menggunakan huruf besar, huruf kecil, ataupun campuran (tidak case sensitive). Tetapi untuk antisipasi pada standar penulisan tag, direkomendasikan untuk menuliskan tag dengan menggunakan huruf kecil semuanya.
Tag mark up ini digunakan sebenarnya memberi tahu browser web bagaimana memperlakukan atau menampilkan (memformat) halaman dokumen tersebut dalam browser.
Dalam membuat suatu dokumen HTML dibutuhkan elemen yang dinyatakan dengan tag <html>, <head> dan <body> berikut tag-tag pasangannya. Setiap dokumen terdiri atas tag head dan body. Elemen head berisi teks yang sebenarnya yang tersusun dari link, grafik, paragraf dan elemen lainnya.
Secara umum dokumen dibagi menjadi dua section (bagian), yaitu section head dan section body. Sehingga setiap dokumen HTML harus mempunyai pola dasar sebagai berikut:
<html> <head>
…informasi tentang dokumen HTML </head>
<body>
(29)
</body> </html>
Setiap dokumen HTML harus diawali dengan menuliskan tag <html> dan tag </html> diakhir dokumen. Tag ini menandai elemen HTML, yang berarti dokumen ini adalah dokumen HTML.
Dalam satu dokumen hanya ada satu elemen HTML. Section atau elemen head ditandai dengan tag <head> diawal, dan tag </head> di akhir. Section ini berisi informasi tentang dokumen HTMLnya. Minimal informasi yang dituliskan dalam elemen ini adalah judul dari dokumen, judul ini akan ditampilkan pada caption bar dari window browser, ditandai dengan menggunakan tag <title> dan diakhiri dengan </title>.
Section atau elemen body ditandai dengan tag <body> diawal, dan tag </body> diakhir. Section body merupakan elemen terbesar didalam dokumen HTML. Elemen ini berisi isi dokumen yang akan ditampilkan pada browser, meliputi paragraph, grafik, link, table, dan sebagainya.
Contoh penulisan suatu dokumen HTML sebagai berikut: <!—contoh.html-->
<html> <head>
(30)
</head> <body>
File ini merupakan file contoh<br>
<b>Ini untuk membuat huruf cetak tebal</b> </body>
</html>
Hasil dokumen HTML yang ditampilkan didalam browser Mozilla Firefox:
Gambar 2.1 Dokumen HTML ditampilkan di browser Mozilla. (Kadir,2002)
2.4.4 CSS ( Cascading Style Sheet )
CSS mendefinisikan karakteristik tampilan ( warna, style, dan posisi ) suatu elemen pada dokumen HTML dalam bentuk property elemen tersebut. Pemisahan isi dengan tampilan yang dilakukan dengan penerapan CSS ini, memberikan kemungkinan penyusunan struktur suatu halaman HTML dengan lebih fleksibel. CSS merupakan bagian/subset dari DOM yang sangat berperan dalam HTML.
(31)
Perbedaan implementasi antara Netscape dan Microsoft sehingga akhirnya W3C melakukan suatu standardisasi CSS. Pada awalnya, upaya standardisasi CSS dibagi dua, yaitu CSSI untuk pengaturan warna dan style, serta CSS-P untuk pengaturan posisi suatu elemen. CSS2 dari W3C selanjutnya menggabungkan kedua standar ini menjadi suatu standar yang meliputi semua setting tampilan suatu elemen halaman HTML.
Dalam spesifikasi CSS2, ada beberapa properti elemen dokumen yang berhubungan dengan posisi suatu elemen dihalaman browser. Property tersebut adalah:
a. Posisition - ada dua pilihan untuk nilai properti ini, yaitu absolute dan relative. Setting absolute mengatur posisi elemen berdasarkan jarak terhadap ujung kiri-atas elemen parent-nya. Sedangkan setting absolute bekerja sesuai layout HTML biasa dimana posisinya ditentukan berdasarkan akhir elemen sebelumnya.
b. Left dan Top – menentukan jarak kearah kanan dan ke bawah dari posisi awal elemen. Unitnya bisa dinyatakan dalam point (pt), pixel(px) atau unit standar CSS lainnya.
c. Width dan Height – menentukan lebar dan tinggi elemen. Unitnya bisa dinyatakan dalam point(pt), pixel(px) atau unit standar CSS lainnya. d. Z-index – menentukan apakah suatu elemen ditampikan dilayar. Nilainya
bisa visible (tampil) atau hidden (tersembunyi).
e. Overflow – menentukan perilaku ruang penampung jika isinya melebihi batasnya. Ada tiga untuk nilai properti ini, yaitu clip, scroll, dan none.
(32)
Setting clip berarti isi akan dipotong jika melebihi batas. Scroll akan memunculkan scrollbar pada container. Sedangkan none tidak akan melakukan apapun terhadap isi sehingga isi tersebut akan keluar dari ruang batasnya.
f. Background-color atau Layer-background-color – menentukan warna dasar dari suatu elemen. Yang pertama berlaku untuk IE, sedangkan yang kedua berlaku untuk NS.
g. Background-image atau Layer-background-image – menentukan gambar latar belakang dari suatu elemen. Yang pertama berlaku untuk IE, sedangkan yang kedua berlaku untuk NS.
2.4.5 JavaScript
JavaScript pertama kali muncul di Netscape 2.0 dan dikembangkan lebih lanjut pada Netscape 3.0. walaupun memiliki nama yang serupa. JavaScript sama sekali tidak berhubungan dengan Java.
Java adalah bahasa pemograman tingkat tinggi untuk membuat aplikasi cross-platform, sedangkan Java Script hanyalah scripting language yang terintegrasi dengan web browser untuk memberikan fleksibilitas tambahan bagi programmer untuk mengontrol elemen-elemen dalam halaman web.
Aplikasi JavaScript sebenarnya cukup luas, tetapi disini penulis menggunakan JavaScript dibatasi untuk DHTML, yaitu JavaScript yang
(33)
digunakan untuk mengakses property, method, dan event handler yang disediakan oleh DOM dan CSS.
Property didefenisikan sebagai setting nilai suatu objek tertentu. Contohnya adalah warna suatu teks, action untuk suatu form, nama file untuk suatu gambar, dll. Method adalah fungsi-fungsi yang dapat diterapkan untuk suatu objek. Misalnya maximize untuk window. Event handler menspesifikasikan bagaimana suatu objek merespon terhadap suatu kejadian, misalnya suatu button di click, window di resize,dll. (kadir,2002).
2.5 Pengenalan PHP (HyperText Preprocessor) 2.5.1 Sejarah PHP
PHP merupakan salah satu bahasa pemograman web yang masih muda namun telah mengalami perkembangan yang cukup signifikan dan telah banyak digunakan oleh banyak user dalam membuat aplikasi web baik perseorangan maupun perusahaan.
2.5.2 Skrip PHP
Skrip PHP berkedudukan sebagai tag dalam bahasa HTML. Suatu skrip akan dikenali sebagai skrip PHP bila diapit oleh tanda:
(34)
b. <?...?>
c. <script language=”PHP”>……</script>
Skrip yang dibuat dengan PHP disimpan dengan nama file dan diikuti dengan ekstensi *.php, misalnya : contoh.php. Bila skrip PHP diakses melalui computer lokal maka file PHP disimpan di folder htdocs di local web server. Sama halnya dengan penamaan dokumen HTML, pemberian nama dokumen yang sama tetapi dituliskan dengan case yang berbeda akan dianggap sebagai dokumen yang berbeda, misalnya contoh.php akan berbeda dengan CONTOH.php atau Contoh.php. Skrip PHP dapat disisipkan dibagian manapun dalam dokumen HTML, begitu pula sebaliknya skrip HTML dapat diletakkan diantara skrip PHP.
Berikut ini contoh dari skrip PHP: a. contoh1.php
<html>
<head>
<title> Menyisipkan PHP di dokumen HTML </title> </head>
<body>
Cara menyapa PHP dengan akrab:<br> <p>
<?php
Echo(“Hallo PHP, apa kabar?”); ?>
(35)
</html>
b. contoh2.php <?php
Echo(“ini ditulis dengan skrip PHP !!”); ?>
<html>
<body>
<br><hr>
ini ditulis dengan HTML </body>
</html> <?php
Echo(“<br>sekian”); ?>
(36)
2.5.3 Integrasi dengan Database
PHP yang digabungkan dengan database akan lebih berkekuatan jika digabungkan dengan database yang realible, gratis dan mudah diinstalasi. Terdapat dua jenis database yang memenuhi yaitu MySQL dan PostgreSQL. Kedua jenis database ini dipergunakan karena kinerja yang bagus dan untuk mengaksesnya.PHP mempunyai fungsi khusus. berikut ini daftar database yang didukung oleh PHP sampai versi 5:
Tabel 2.3 Daftar Database-Database Yang Didukung PHP No. Nama Database No. Nama Database
1. 2. 3. 4. 5. 6. 7. 8. 9. 10 11. Adabas D DBase Empress FilePro (read-only) Hyperware IBM DB2 Informix Ingres Interbase Frontbase MSQL 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. Direct MS-SQL MySQL ODBC
Oracle (OC17 dan OC18) Ovrimos PostgreSQL SQLite Solid Sybase Velocis Unix dbm
(37)
PHP mempunyai fungsi khusus untuk mengakses MySQL. Ada sekitar 48 fungsi yang didukung PHP dalam mengakses PHP dalam mengakses MySQL dalam membuat aplikasi. Adapun yang biasa digunakan diantaranya adalah :
a. mysql_connect()
fungsi mysql_connect adalah untuk menghubungkan PHP dengan database MySQL. Format fungsinya adalah:
mysql_connect(string hostname, srting username, string password);
b. mysql_select_db
setelah terhubung ke database MySQL dengan menggunakan mysql_connect, langkah selanjutnya adalah memilih database yang akan digunakan. Fungsi mysql_select_db digunakan untuk memilih database. Format fungsinya adalah:
mysql_select_db(string database, koneksi)
koneksi ialah variable yang terhubung ke MySQL. Jika tidak mengisi variable koneksi maka koneksi yang terbuka saat itulah yang dianggap digunakan. Manfaat berbagai macam koneksi adalah bahwa dengan pilihan seperti itu maka dalam satu file dimungkinkan mengambil query dari 2 database sekaligus.
(38)
c. mysql_query
Dalam database MySQL, perintah untuk melakukan transaksi ialah perintah SQL. Sebutan untuk mengirim perintah SQL dinamakan query. Query memberi perintah kepada database untuk melakukan apa yang dikehendaki.
Format fungsinya:
Int mysql_query(string query, int[link_identifier];
d. mysql_num_rows
kegunaan dari fungsi ini adalah untuk menghitung jumlah baris yang dikenai oleh proses SQL.Format fungsinya adalah:
Int mysql_num_rows(int result);
e. mysql_fetch_array
Fungsi ini berkaitan dengan menampilkan data. Untuk menampilkan data, digunakan fungsi mysql_fetch_array. Dengan fungsi ini, haisl query ditampung dalam bentuk array. Format fungsinya adalah:
(39)
2.6 MySQL
MySQL merupakan salah satu perangkat lunak sistem pengelola basis data (Data Base Management System). MySQL juga dapat dikategorikan sebagai Relational Data Base Management System (RDBMS), karena dalam pembuatan basis data pada MySQL terdiri atas lajur horizontal dan lajur vertical. MySQL pada saat ini banyak digunakan oleh pemograman web untuk membangun situs yang memerlukan basis data sebagai data dan pengolahan data.(Syafii,2005).
(40)
BAB 3
SEKILAS UNIVERSITAS SUMATERA UTARA
3.1 Kondisi Umum Wilayah Universitas Sumatera Utara
Uniiversitas Sumatera Utara dibangun tahun 1952 dengan Fakultas Kedokteran yang menjadi Fakultas pertama di USU, lalu disusul dengan Fakultas Ekonmi, Hukum , Pertanian, Teknik dan lain-lain. USU berada di Jalan Dr. Mansyur Kec. Padang Bulan. Sementara ini USU menjadi kampus/universitas terbesar di luar Pulau Jawa . Berikut nama dan alamat Fakultas di USU :
Tabel 3.1 Nama-nama Fakultas dan Gedung
No. Fakultas / Gedung Lokasi 1. Fak. Kedokteran Jalan Dr. Masnyur 2. Fak. Psikologi Jalan Prof. Ma’as 3. Fak. Kesehatan Masyarakat Jalan Prof. Ass’at 4. Fak. Kedokteran Gigi Jalan Alumni
5. Fak. Teknik Jalan Almamater
6. Fak. Ilmu Budaya Jalan Universitas 7. Fak. Ilmu Keperawatan Jalan Prof. Ass’at 8. Fak. MIPA Jalan Bioteknologi 9. Fak. Hukum Jalan Universitas
(41)
10 Fak. Ekonomi Jalan Prigama 11. Fak. Pertanian Jalan Dr. Sofyan 12. Fak. Farmasi Jalan Tri Dharma
13. FISIP Jalan Dr. Sofyan
(42)
Admin
Peta Interaktif Berbasis Web
Fakultas
Upload Foto BAB 4
RANCANGAN SISTEM PROGRAM
4.1 Data Flow Diagram
Perancangan DFD yang penulis buat dalam perancangan ini terdiri dari Diagram Konteks dan DFD Level Nol.
Info Data Data Gedung
Fakultas
Info Ruangan - Data Fakultas
- Data Gedung - Data Ruangan
Laporan Data
(43)
Admin Gedung
F2 Ruangan F1 Gedung
Selesai Upload
Data
Update Data
Upload Foto
Info Data Fakultas
- Data Ruangan Info Gedung
- Upload Foto Info Ruangan
- Laporan Data Fakultas - Laporan Gedung - Laporan Ruangan
Laporan Data
(44)
Flowchart Program
Gambar 4.4 Flowchart Menu Utama
BAB 5
IMPLEMENTASI SISTEM
Ya
New Passsword
Selesai
Simpan Database
End Menu
Fakultas
Gedung
Ruangan Start
Pilih Fakultas Halaman Utama
True? Database
Klik
Gedung
Nama Ruangan
Foto
Keterang an Foto
T
Ya
T Ya
T
T Ya
T
(45)
5.1 Pengertian Implementasi Sistem
Implementasi sistem adalah prosedur-prosedur yang dilakukan dalam penyelesaian desain sistem yang ada dalam rancangan sistem yang telah ditetapkan dan disetujui seperti menginstal, menguji sistem yang dibuat dan memulai sistem yang baru.
5.2 Tujuan Implementasi Sistem
Adapun tujuan dari implementasi sistem ini adalah sebagai berikut: 1. Menyelesaikan desain sistem yang telah disetujui sebelumnya.
2. Memastikan bahwa pemakai (user) dapat mengoperasikan sistem baru. 3. Menguji apakah sistem baru tersebut sesuai dengan pemakai.
4. Memastikan bahwa konversi ke sistem baru berjalan yaitu dengan membuat rencana, mengontrol dan melakukan instalasi baru secara benar.
(46)
5.3 Komponen- komponen kebutuhan sistem
Untuk menunjang penerapan sistem yang dirancang , dibutuhkan komponen-komponen yang sangat berperan terhadap kebutuhan sistem. Berikut beberapa komponen yang dibutuhkan sistem agar dapat beroperasi dengan baik.
5.3.1 Hardware
Komponen ini merupakan komponen pertama yang sangat diperlukan dalam mewujudkan sistem yang diusulkan. Dalam hal ini merincikan spesifikasi hardware yang diajukan adalah sebagai berikut:
a. Komputer dengan processor Intel Core i3 b. Memori RAM 256 MB atau lebih
c. Kapasitas Hardisk minimal 10 GB d. Microsoft Windows 7
5.3.2 Software
Dengan adanya hardware saja, tentu tidak akan dapat digunakan tanpa adanya bantuan penuh dari komponen Software. Adapun Software yang digunakan dalam pembuatan website ini adalah:
a. Sistem Operasi Windows 7
Pada saat ini sistem operasi windows 7 merupakan sistem operasi yang sering digunakan oleh masyarakat umum Indonesia. Sistem operasi ini
(47)
lebih dikenal cara pengoperasiannya atau penggunaannya disbanding sistem operasi lain. Oleh karena itu penulis menggunakan sistem operasi ini.
Gambar 5.1 Halaman Tampilan antar muka Sistem Operasi Windows 7
b. XAMPP
XAMPP merupakan software triad dari 3 aplikasi yaitu apache sebagai web servernya, PHP sebagai bahasa pemograman serta MySQL sebagai databasenya. Dengan XAMPP kebutuhan software telah terpenuhi.
(48)
Gambar 5.2 Tampilan Antar Muka Web Server
5.3.3 Brainware
Brainware adalah sumber daya manusia yang nantinya akan berperan sebagai user ataupun administrator. Brainware sebagai administrator adalah yang melakukan pengolahan website. Administrator harus mengerti tentang bahasa pemograman PHP dan MySQL serta jalannya sistem. Sedangkan user adalah pengguna website itu sendiri. User tidak harus mengerti tentang bahasa pemograman tersebut karena user hanyalah pengguna dan hanya cukup mampu mengoperasikan internet browser.
(49)
Aplikasi sistem informasi absensi Kantor Kecamatan Medan Area Berbasis Web yang penulis rancang ini memiliki beberapa halaman. Halaman – halaman yang akan ditampilkan merupakan halaman- halaman program yang penulis rancang: 5.4.1 Halaman Login Admin
Halaman login admin adalah halaman khusus admin untuk melakukan pemasukkan data. Admin harus melakukan login terlebih dahulu di halaman login admin dengan cara mengisi kotak USERNAME dan memasukkan PASSWORD.
Gambar 5.3 Halaman Utama Login Admin
5.4.2 Halaman Menu Admin
Halaman menu admin adalah halaman lanjutan setelah melakukan login pada halaman utama login admin
(50)
Gambar 5.4 Halaman Menu Admin 5.4.3 Halaman Menu Master Data
Pada halaman ini terdapat menu data Fakultas, Gedung dan Ruangan yang telah diinputkan . Di mana di menu data admin dapat melakukan pengeditan pada serta menghapus data yang ada.
(51)
Gambar 5.6 Halaman Laporan Menu Fakultas
(52)
5.8 Halaman Laporan Menu Gedung
(53)
(54)
5.4.4 Halaman Peta Interaktif
Ini merupakan tampilan awal dari setiap fakultas pada Peta Interaktif. Disini kita ambil contoh Fakultas Mipa .
5.11 Tampilan Fakultas dari Google Map
Setelah itu, kita bias pilih gedung yang ingin kita ketahui, silahkan Anda liat Dropdown yang berwarna merah .
(55)
Setelah itu kita bisa melihat tampilan gedung yang kita ingingkan dengan mengklik menu
Gedung di samping kanan. Setelah itu barulah kita liat ruangan apa-apa saja yang tersedia di gedung tersebut .
5.13 Tampilan Gedung Fakultas
(56)
(57)
BAB 6
KESIMPULAN DAN SARAN
6.1 Kesimpulan
Peta Interaktif Berbasis Web ini adalah media yang dapat digunakan untuk menyampaikan informasi khususnya para pengunjung atau mahasiswa baru yang masuk ke USU. Peta Interaktif ini dirancang penulis dengan menggunakan sistem operasi Windows 7, Photoshop CS, Aplikasi XAMPP sebagai web servernya, PHP bahasa scripting-nya dan MySQL sebagai database manajemen sistem (DBMS). Dari penjelasan pada bab-bab sebelumnya, penulis dapat merangkum beberapa kesimpulan yaitu sebagai berikut:
1. Penggunaan dan Pemanfaatan aplikasi Peta Interaktif ini dapat memberikan kemudahan bagi pengunjung yang dating ke USU .
2. Dengan adanya Peta Interaktif ini baik dosen, mahasiswa dan masyarakat umum dapat melihat langsung lokasi/gedung yang ingin dicari melalui Peta Interaktif. Peta Interaktif ini memberikan foto gedung yang ingin dikunjungi beserta alamat lokasinya .
(58)
3. Program aplikasi XAMPP yang digunakan memudahkan penulis dalam membuat aplikasi ini karena dalam hal peng-installan maupun penggunaannya sangat lah mudah.
6.2 Saran
Dari peninjauan dan riset yang telah dilakukan oleh penulis, maka penulis berkeinginan memberikan saran–saran yang mungkin dapat digunakan sebagai bahan pertimbangan bagi para pembaca, yaitu:
1. Sejalan dengan pesatnya kemajuan Teknologi, Penulis berharap agar pembaca lebih memperdalam pengetahuan dibidang komputer, mengingat penggunaan komputer dewasa ini tidak dapat dipisahkan lagi dengan aktifitas sehari-hari.
2. Dalam pembuatan Peta Interaktif Berbasis Web ini masih banyak kekurangan yang terdapat dalam sistem tersebut.
(59)
DAFTAR PUSTAKA
Al Bahra bin Ladjamudin. Analisis dan Desain Sistem Informasi. Graha Ilmu. Yogyakarta. 2005
Fathansyah., Sistem Basis Data, Informatika, Bandung, 1999. Hartono, Jogianto Pengenalan Komputer, Andi, Yogyakarta, 2004.
Kendall E, Kendall J. Analisis dan Perancangan Sistem. PT Indeks. Klaten. 2007 Kurniadi, Adi. Belajar mahir website, PT. Elex Media Komputindo Gramedia, Surabaya, 2001.
Mahyuzir Tavri., Pengelolahan Data, PT. Elex Media Komputindo, Jakarta
Nurjaman S.Ag, Shobur Abdus M.Ag, Fiqih, PT. Karya Toha Putra, Semarang, 2004.
Peranginangin, Kasiman (2006). Aplikasi Web dengan PHP dan MySql. Yogyakarta: Penerbit Andi Offset.
(60)
Listing Program 1.Admin a.Home.php <?php include("../file/koneksi.php"); session_start(); $username=$_SESSION['username']; if(empty($username)){ header("location:index.php"); } else{ ?> <html> <head> <title>IM-USU</title>
<link rel="stylesheet" type="text/css" href="style.css"> <style><?php include("file/menu.php"); ?></style>
</head> <body> <div class="wrapper"> <div class="header"> <div class="logo"> <h1><a href="home.php">IM-<span>USU</span></a></h1> </div> <div class="login"> <a href="logout.php">LOGOUT</a> </div> </div> <div class="core"> <div class="menu"> <div id="menu"> <h1>MENU FAKULTAS</h1> <ul>
<li><a id="if" href="home.php?menu=if">Input Data Fakultas</a></li>
<li><a id="lf" href="home.php?menu=lf">Lihat Data Fakultas</a></li>
</ul>
<div id="br"></div> <h1>MENU GEDUNG</h1> <ul>
<li><a id="ig" href="home.php?menu=ig">Input Data Gedung</a></li> <li><a id="lg" href="home.php?menu=lg">Lihat Data Gedung</a></li> </ul>
<div id="br"></div> <h1>MENU RUANGAN</h1> <ul>
<li><a id="ir" href="home.php?menu=ir">Input Data Ruangan</a></li> <li><a id="lr" href="home.php?menu=lr">Lihat Data Ruangan</a></li> </ul> </div> </div> <div class="content"> <div class="center"> <div class="head">
(61)
</div>
<div class="nav"> <?php
$menu=$_GET['menu']; if ($menu=='if'){
echo "<p>FORM INPUT DATA FAKULTAS</p>"; } elseif ($menu=='lf') {
echo "<p>TABEL DATA FAKULTAS</p>"; } elseif ($menu=='ig') {
echo "<p>FORM INPUT DATA GEDUNG</p>"; } elseif ($menu=='lg') {
echo "<p>TABEL DATA GEDUNG</p>"; } elseif ($menu=='ir') {
echo "<p>FORM INPUT DATA RUANGAN</p>"; } elseif ($menu=='lr') {
echo "<p>TABEL DATA RUANGAN</p>"; } ?> </div> <div class="map"> <div class="mc"> <?php if ($menu=='if'){ include("file/$menu.php"); } elseif ($menu=='lf') { include("file/$menu.php"); } elseif ($menu=='ig') { include("file/$menu.php"); } elseif ($menu=='lg') { include("file/$menu.php"); } elseif ($menu=='ir') { include("file/$menu.php"); } elseif ($menu=='lr') { include("file/$menu.php"); } ?> </div> </div> </div> </div> </div> <div class="footer"></div> </div> </body> </html> <?php } ?> b.logout.php <?php session_start(); session_destroy(); header("location:../index.php"); ?>
(62)
c.Input.php <?php include("../../file/koneksi.php"); $menu=$_GET['menu']; $nama=$_POST['nama']; $keterangan=$_POST['keterangan']; $fakultas=$_POST['fakultas']; $gedung=$_POST['gedung']; $lantai=$_POST['lantai']; $gambar=$_FILES['gambar']['name']; $tmpGambar=$_FILES['gambar']['tmp_name']; $dir="../../images/"; if(move_uploaded_file($tmpGambar, $dir.$gambar)){ if($menu=='fakultas'){
$q="INSERT INTO `fakultas`
VALUES('','$nama','$keterangan','$gambar')"; if(mysql_query($q)){ header("location:../home.php?menu=if&konfirmasi=sukes"); } else{ header("location:../home.php?menu=if&konfirmasi=gagal"); } } elseif($menu=='gedung'){
$q="INSERT INTO `gedung`
VALUES('','$fakultas','$nama','$keterangan','$gambar')"; if(mysql_query($q)){ header("location:../home.php?menu=ig&konfirmasi=sukes"); } else{ header("location:../home.php?menu=ig&konfirmasi=gagal"); } } elseif($menu=='ruangan'){ $q="INSERT INTO `ruangan`
VALUES('','$fakultas','$gedung','$nama','$lantai','$keterang an','$gambar')"; if(mysql_query($q)){ header("location:../home.php?menu=ir&konfirmasi=sukes"); } else{ header("location:../home.php?menu=ir&konfirmasi=gagal"); } } } else{ header("location:../home.php?konfirmasi=gagal-muf"); } ?>
(63)
d.Hapus.php <?php include("../../file/koneksi.php"); $menu=$_GET['menu']; $nama=$_POST['nama']; $keterangan=$_POST['keterangan']; $fakultas=$_POST['fakultas']; $gedung=$_POST['gedung']; $lantai=$_POST['lantai']; $gambar=$_FILES['gambar']['name']; $tmpGambar=$_FILES['gambar']['tmp_name']; $dir="../../images/"; if(move_uploaded_file($tmpGambar, $dir.$gambar)){ if($menu=='fakultas'){
$q="INSERT INTO `fakultas`
VALUES('','$nama','$keterangan','$gambar')"; if(mysql_query($q)){ header("location:../home.php?menu=if&konfirmasi=sukes"); } else{ header("location:../home.php?menu=if&konfirmasi=gagal"); } } elseif($menu=='gedung'){ $q="INSERT INTO `gedung`
VALUES('','$fakultas','$nama','$keterangan','$gambar')"; if(mysql_query($q)){ header("location:../home.php?menu=ig&konfirmasi=sukes"); } else{ header("location:../home.php?menu=ig&konfirmasi=gagal"); } } elseif($menu=='ruangan'){ $q="INSERT INTO `ruangan`
VALUES('','$fakultas','$gedung','$nama','$lantai','$keterang an','$gambar')"; if(mysql_query($q)){ header("location:../home.php?menu=ir&konfirmasi=sukes"); } else{ header("location:../home.php?menu=ir&konfirmasi=gagal"); } } } else{ header("location:../home.php?konfirmasi=gagal-muf"); } ?> e.If.php
(64)
<div class="ti">
<form method="post" enctype="multipart/form-data" action="file/input.php?menu=fakultas">
<table> <tr>
<th>Nama Fakultas</th>
<td><input type="text" name="nama" autofocus/></td> </tr>
<tr>
<th>Gambar Fakultas</th>
<td><input type="file" name="gambar" /></td> </tr>
<tr>
<th>Keterangan</th>
<td><textarea name="keterangan" rows="10" cols="30"></textarea></td>
</tr> <tr>
<td colspan="2" align="right">
<input type="submit" name="submit" value="INPUT" /> </td> </tr> </table> </form> </div> f.lg.php <div class="ti">
<form method="post" enctype="multipart/form-data" action="file/input.php?menu=gedung">
<table> <tr>
<th>Nama Gedung</th>
<td><input type="text" name="nama" /></td> </tr>
<tr>
<th>Nama Fakultas</th> <td>
<select name="fakultas">
<option value="">Pilih Fakultas</option> <?php
$q="SELECT `id`,`nama` FROM `fakultas` ORDER BY `nama` ASC"; $ex=mysql_query($q); while($data=mysql_fetch_array($ex)){ echo "<option value=\"".$data['id']."\">".$data['nama']."</option>"; } ?> </select> </td> </tr> <tr> <th>Gambar Gedung</th>
<td><input type="file" name="gambar" /></td> </tr>
(65)
<th>Keterangan</th>
<td><textarea name="keterangan" rows="10" cols="30"></textarea></td>
</tr> <tr>
<td colspan="2" align="right">
<input type="submit" name="submit" value="INPUT" /> </td> </tr> </table> </form> </div> g.lg.php <div class="td"> <table border="1"> <?php $no=1;
$q="SELECT * FROM `gedung` ORDER BY `id` DESC"; $ex=mysql_query($q); if(mysql_num_rows($ex)>0){ echo " <tr> <th>NO.</th> <th>GEDUNG</th> <th>FAKULTAS</th> <th>KETERANGAN</th> <th>GAMBAR</th> <th>MENU</th> </tr> "; while($data=mysql_fetch_array($ex)){ $q2="SELECT `nama` FROM `fakultas` WHERE `id`='".$data['id_fak']."'"; $ex2=mysql_query($q2); $data2=mysql_fetch_array($ex2); echo " <tr> <td id=\"center\">$no</td> <td>".$data['nama']."</td> <td>".$data2['nama']."</td> <td>".$data['keterangan']."</td> <td><img src=\"../images/".$data['gambar']."\" width=\"100\"/></td> <td><a href=\"file/hapus.php?menu=gedung&id=".$data['id']."\">hapus</a> | <a href=\"file/edit.php?menu=gedung&id=".$data['id']."\">edit</a></td > </tr> "; $no++; } } else{
echo "<p>Data masih kosong.</p>"; }
(66)
</table> </div> h.lf.php <div class="td"> <table border="1"> <?php $no=1;
$q="SELECT * FROM `fakultas` ORDER BY `id` DESC"; $ex=mysql_query($q); if(mysql_num_rows($ex)>0){ echo " <tr> <th>NO.</th> <th>FAKULTAS</th> <th>KETERANGAN</th> <th>GAMBAR</th> <th>MENU</th> </tr> "; while($data=mysql_fetch_array($ex)){ echo " <tr> <td id=\"center\">$no</td> <td>".$data['nama']."</td> <td id=\"top\">".$data['keterangan']."</td> <td><img src=\"../images/".$data['gambar']."\" width=\"100\"/></td> <td><a href=\"file/hapus.php?menu=fakultas&id=".$data['id']."\">hapus</a> | <a href=\"file/edit.php?menu=fakultas&id=".$data['id']."\">edit</a></ td> </tr> "; $no++; } } else{
echo "<p>Data masih kosong.</p>"; } ?> </table> </div> 2.File a.Koneksi.php <?php mysql_connect("localhost","root",""); mysql_select_db("map"); ?> b.Menu.php
(67)
$map=$_GET['map'];
if($map=='1'){
echo "#fakultas a#pascasarjana{ color: #f1f1f1;
background: #e84040; }";
} else if($map=='2'){
echo "#fakultas a#ilmu keperawatan{ color: #f1f1f1;
background: #e84040; }";
} else if($map=='3'){
echo "#fakultas a#psikologi{ color: #f1f1f1;
background: #e84040; }";
} else if($map=='4'){
echo "#fakultas a#farmasi{ color: #f1f1f1; background: #e84040; }";
} else if($map=='5'){
echo "#fakultas a#kesehatan{ color: #f1f1f1;
background: #e84040; }";
} else if($map=='6'){
echo "#fakultas a#sospol{ color: #f1f1f1; background: #e84040; }";
} else if($map=='7'){
echo "#fakultas a#mipa{ color: #f1f1f1; background: #e84040; }";
} else if($map=='8'){
echo "#fakultas a#budaya{ color: #f1f1f1; background: #e84040; }";
} else if($map=='9'){
echo "#fakultas a#gigi{ color: #f1f1f1; background: #e84040; }";
} else if($map=='10'){
echo "#fakultas a#ekonomi{ color: #f1f1f1; background: #e84040; }";
} else if($map=='11'){
echo "#fakultas a#teknik{ color: #f1f1f1; background: #e84040; }";
} else if($map=='12'){
(68)
color: #f1f1f1; background: #e84040; }";
} else if($map=='13'){
echo "#fakultas a#hukum{ color: #f1f1f1; background: #e84040; }";
} else if($map=='14'){
echo "#fakultas a#kedokteran{ color: #f1f1f1; background: #e84040; }"; } ?> 3.Menu.php <?php error_reporting(0); include("file/koneksi.php"); $map=$_GET['map']; $gedung=$_GET['gedung']; $ruangan=$_GET['ruangan']; ?> <html> <head> <title>IM-USU</title> <script src="js/jquery-1.9.1.js"></script> <script src="js/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"> <script>
$(function() {
$( "#fakultas" ).fakultas({ collapsible: true
}); });
$(function() {
// Clickable Dropdown
$('#ruangan > ul').toggleClass('no-js js'); $('#ruangan .js ul').hide();
$('#ruangan .js').click(function(e) {
$('#ruangan .js ul').slideToggle(200); $('.main').toggleClass('active'); e.stopPropagation();
});
$(document).click(function() {
if ($('#ruangan .js ul').is(':visible')) { $('#ruangan .js ul',
this).slideUp(); $('.main').removeClass('active'); } }); }); $(function() {
(69)
$('#gedung > ul').toggleClass('no-js js'); $('#gedung .js ul').hide();
$('#gedung .js').click(function(e) {
$('#gedung .js ul').slideToggle(200); $('.main').toggleClass('active'); e.stopPropagation();
});
$(document).click(function() {
if ($('#gedung .js ul').is(':visible')) { $('#gedung .js ul', this).slideUp(); $('.main').removeClass('active'); }
}); });
</script>
<style><?php include("file/menu.php"); ?></style> </head> <body> <div class="wrapper"> <div class="header"> <div class="logo"> <h1><a href="index.php">IM-<span>USU</span></a></h1> </div> </div> <div class="core"> <div class="menu"> <div id="fakultas">
<a id="menu" href="#">Fakultas<span id="v">v</span></a> <ul>
<?php
$q="SELECT * FROM `fakultas`"; $ex=mysql_query($q); while($data=mysql_fetch_array($ex)){ $id=strtolower($data['nama']); echo " <li><a id=\"$id\" href=\"index.php?map=".$data['id']."\">".$data['nama']."</a></li>” ; } ?> </ul> </div> </div> <div class="content"> <div class="center"> <div class="head"> <h1>INTERACTIVE MAP</h1> <!--
<a id="zplus" href="#"></a> <a id="zmin" href="#"></a> -->
</div>
<div class="nav"> <?php
$q="SELECT * FROM `fakultas` WHERE `id`='$map'"; $ex=mysql_query($q);
$data=mysql_fetch_array($ex);
(70)
$ex2=mysql_query($q2);
$data2=mysql_fetch_array($ex2);
$q3="SELECT * FROM `ruangan` WHERE `id`='$ruangan'"; $ex3=mysql_query($q3); $data3=mysql_fetch_array($ex3); echo " <p> <a href=\"index.php\">USU</a>"; if(!empty($map)){ echo " > <a href=\"index.php?map=".$data['id']."\">".$data['nama']."</a>" if(!empty($gedung)){ echo " > <a href=\"index.php?map=".$data['id']."&gedung=".$data2['id']."\">".$ data2['nama']."</a> "; if(!empty($ruangan)){ echo " > <a href=\"index.php?map=".$data['id']."&gedung=".$data2['id']."&ruang an=".$data3['id']."\">".$data3['nama']."</a>"; } } } echo "</p> "; if(!empty($gedung)){ echo " <div id=\"ruangan\"> <ul class=\"no-js\"> <li>
<a class=\"main\">Pilih Ruangan</a>";
$q="SELECT * FROM `ruangan` WHERE `id_ged`='$gedung'"; $ex=mysql_query($q); if(mysql_num_rows($ex)>0){ echo "<ul>"; while($data=mysql_fetch_array($ex)){ echo "<li><a href=\"index.php?map=".$map."&gedung=".$gedung."&ruangan=".$data[' id']."\">".$data['nama']."</a></li>"; } echo "</ul>"; } else{
echo "<ul><li>Ruangan belum tersedia</li></ul>"; } echo " </li> </ul> </div> "; } if(!empty($map)){ echo "
(71)
<ul class=\"no-js\"> <li>
<a class=\"main\">Pilih Gedung</a>";
$q="SELECT * FROM `gedung` WHERE `id_fak`='$map'"; $ex=mysql_query($q); if(mysql_num_rows($ex)>0){ echo "<ul>"; while($data=mysql_fetch_array($ex)){ echo "<li><a href=\"index.php?map=$map&gedung=".$data['id']."\">".$data['nama'] ."</a></li>"; </ul>"; } else{
echo "<ul><li>Gedung belum tersedia</li></ul>"; } echo " </li> </ul> </div> "; } ?> </div> <div class="map"> <div id="map"> <?php if(!empty($ruangan)){
$q="SELECT * FROM `ruangan` WHERE `id`='$ruangan'"; $ex=mysql_query($q);
$data=mysql_fetch_array($ex);
echo "<img class=\"imgMap\" src=\"images/".$data['gambar']."\">"; echo " <div class=\"desc\"> <h1>Ruangan ".$data['nama']."</h1> <p>".$data['keterangan']."</p> </div> } elseif(!empty($gedung)){
$q="SELECT * FROM `gedung` WHERE `id`='$gedung'"; $ex=mysql_query($q);
$data=mysql_fetch_array($ex);
echo "<img class=\"imgMap\" src=\"images/".$data['gambar']."\">"; echo "
<div class=\"desc\">
<h1>Gedung Fakultas ".$data['nama']."</h1> <p>".$data['keterangan']."</p>
</div> ";
} elseif(!empty($map)){
$q="SELECT * FROM `fakultas` WHERE `id`='$map'"; $ex=mysql_query($q);
$data=mysql_fetch_array($ex);
echo "<img class=\"imgMap\" src=\"images/".$data['gambar']."\">"; echo "
(72)
<h1>Fakultas ".$data['nama']."</h1> <p>".$data['keterangan']."</p> </div> "; } ?> </div> </div> </div> </div> </div> <div class="footer"></div> </div> </body> </html> Style.css
/* RESET */
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,block quote,fieldset,input,abbr,article,aside,command,details,figcaption ,figure,footer,header,hgroup,mark,meter,nav,output,progress,sectio n,summary,time { margin: 0; padding: 0; } h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th, figcaption { font-size: 1em; font-weight: normal; font-style: normal; } fieldset,iframe { border: none; } caption,th { text-align: left; } a{ text-decoration: none; color: #000; } table { border-collapse: collapse; border-spacing: 0; } li{ list-style-type: none; } article,aside,footer,header,hgroup,nav,section,figure,figcaption { display: block;
(73)
} @font-face{ font-family: Roboto; src: url(font/Roboto-Light.ttf); } body{ margin: 0; padding: 0; } .wrapper{ padding: 0; margin: 0; font-family: Roboto; } .header{ height: 40px; background: #1f1f1f; width: 100%; display: inline-block; vertical-align: top; position: fixed; top: 0; left: 0; z-index: 99999; } .core{ line-height: 0; font-size: 0; position: relative; background: #3d3d3d; } .menu{ margin-top: 40px; width: 20%; display: inline-block; vertical-align: top; line-height: 18px; font-size: 14px; } .content{ margin-top: 40px; padding-top: 20px; width: 80%; min-height: 92%; background: #ffffff; display: inline-block; vertical-align: top; line-height: 18px; font-size: 14px; } .footer{
(74)
height: 20px; background: #e84040; width: 100%; display: inline-block; vertical-align: top; clear: both; }
/* LEVEL-2 */ .logo{
font-size: 28px; margin-left: 10px; }
.logo h1 a{
color: #fff; } .logo span{ color: #e84040; } #fakultas{
margin: 20px 0px 0px 12px; color: #ffffff; width: 90%; } #fakultas a#menu{ outline: none; background: none; color: #fff;
border: 1px solid #fff; font-size: 14px; padding: 5px; } #fakultas span#v{ color: #fff; float: right; font-size: 14px; } #fakultas ul{ padding: 0px; margin: 0px; } #fakultas li{
margin: 5px 0px; }
#fakultas a{
font-size: 12px; color: #000; display: block; padding: 8px 5px; background: #f2f2f2;
(75)
#fakultas a:hover{ color: #f1f1f1; background: #e84040; } .center{ padding-left: 20px; width: 96%; } .center .head{ margin-bottom: 12px; }
.center .head h1{ font-size: 26px;
display: inline-block; }
.center .head a{ float: right;
padding-left: 10px; }
.center .head a#zplus{ width: 18px; height: 18px;
background: url(images/icon-plus.png) no-repeat center; }
.center .head a#zplus:hover{
background: url(images/icon-plus-hover.png) no-repeat center;
}
.center .head a#zmin{ width: 18px; height: 18px;
background: url(images/icon-min.png) no-repeat center; }
.center .head a#zmin:hover{
background: url(images/icon-min-hover.png) no-repeat center; }
.center .nav{
background: rgba(191, 194, 193, 0.19); height: 30px;
font-size: 12px; }
.center .nav p{
padding: 5px 10px; word-spacing: 5px; display: inline-block; }
.center .nav .gedung{ float: right;
(76)
display: inline-block; }
.center .nav p a:hover{ color: #e84040; }
.center .map{
margin-top: 10px;
border: 1px solid rgba(190, 190, 190, 0.63); height: 520px; position: absolute; z-index: 1; } /* .test{ margin: 1px; height: 518px; width: 1032px; background: red; position: absolute; } */ #ruangan, #gedung{ cursor: pointer; float: right; color: #000; margin-top: 0px; margin-left: 7px; margin-right: 1px; width: 100px;
padding: 5px 1px 0px 0px; position: relative; z-index: 5; } #ruangan{ z-index: 6; }
#ruangan ul ul, #gedung ul ul{ margin-top: 15px;
border: 1px solid rgba(0, 0, 0, 0.09); width: 150px;
float: right; }
#ruangan a.main, #gedung a.main{ display: block;
background: #f5f5f5; color: #a5a5a5; text-align: center;
padding: 2px 15px 2px 10px; border-radius: 0px;
(77)
#ruangan a.main:hover, #gedung a.main:hover{
box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.80); color: rgb(255, 74, 58);
}
#ruangan li li, #gedung li li{ background: rgb(235, 83, 83); padding: 5px 10px;
color: rgb(235, 235, 235); }
#ruangan li li a, #gedung li li a{ color: rgb(235, 235, 235); }
#ruangan ul li ul li a:hover, #gedung ul li ul li a:hover{ text-decoration: underline;
color: rgb(255, 255, 255); } /*MAP*/ #map{ margin: 1px; height: 618px; width: 1032px; } #map img{ float: left; } #map .desc{ float: left; width: 412px; height: 518px; padding: 10px; }
#map .desc h1{
font-size: 25px; margin-bottom: 10px; line-height: 26px; }
#map .desc p{
border-top: 2px solid black; padding-top: 10px;
(1)
<h1>Fakultas ".$data['nama']."</h1> <p>".$data['keterangan']."</p> </div>
"; } ?> </div> </div> </div> </div> </div>
<div class="footer"></div> </div>
</body> </html>
Style.css
/* RESET */
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,block quote,fieldset,input,abbr,article,aside,command,details,figcaption ,figure,footer,header,hgroup,mark,meter,nav,output,progress,sectio n,summary,time {
margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th, figcaption {
font-size: 1em; font-weight: normal; font-style: normal; }
fieldset,iframe { border: none; }
caption,th {
text-align: left; }
a{
text-decoration: none; color: #000;
}
table {
border-collapse: collapse; border-spacing: 0;
} li{
list-style-type: none; }
article,aside,footer,header,hgroup,nav,section,figure,figcaption { display: block;
(2)
}
@font-face{
font-family: Roboto;
src: url(font/Roboto-Light.ttf); }
body{
margin: 0; padding: 0; }
.wrapper{
padding: 0; margin: 0;
font-family: Roboto; }
.header{
height: 40px;
background: #1f1f1f; width: 100%;
display: inline-block; vertical-align: top; position: fixed; top: 0;
left: 0;
z-index: 99999; }
.core{
line-height: 0; font-size: 0;
position: relative; background: #3d3d3d; }
.menu{
margin-top: 40px; width: 20%;
display: inline-block; vertical-align: top; line-height: 18px; font-size: 14px; }
.content{
margin-top: 40px; padding-top: 20px; width: 80%;
min-height: 92%; background: #ffffff; display: inline-block; vertical-align: top; line-height: 18px; font-size: 14px; }
(3)
height: 20px;
background: #e84040; width: 100%;
display: inline-block; vertical-align: top; clear: both;
}
/* LEVEL-2 */ .logo{
font-size: 28px; margin-left: 10px; }
.logo h1 a{
color: #fff; }
.logo span{
color: #e84040; }
#fakultas{
margin: 20px 0px 0px 12px; color: #ffffff;
width: 90%; }
#fakultas a#menu{ outline: none; background: none; color: #fff;
border: 1px solid #fff; font-size: 14px;
padding: 5px; }
#fakultas span#v{ color: #fff; float: right; font-size: 14px; }
#fakultas ul{
padding: 0px; margin: 0px; }
#fakultas li{
margin: 5px 0px; }
#fakultas a{
font-size: 12px; color: #000; display: block; padding: 8px 5px; background: #f2f2f2; }
(4)
#fakultas a:hover{ color: #f1f1f1; background: #e84040; }
.center{
padding-left: 20px; width: 96%;
}
.center .head{
margin-bottom: 12px; }
.center .head h1{ font-size: 26px;
display: inline-block; }
.center .head a{ float: right;
padding-left: 10px; }
.center .head a#zplus{ width: 18px; height: 18px;
background: url(images/icon-plus.png) no-repeat center; }
.center .head a#zplus:hover{
background: url(images/icon-plus-hover.png) no-repeat center;
}
.center .head a#zmin{ width: 18px; height: 18px;
background: url(images/icon-min.png) no-repeat center; }
.center .head a#zmin:hover{
background: url(images/icon-min-hover.png) no-repeat center; }
.center .nav{
background: rgba(191, 194, 193, 0.19); height: 30px;
font-size: 12px; }
.center .nav p{
padding: 5px 10px; word-spacing: 5px; display: inline-block; }
.center .nav .gedung{ float: right;
(5)
display: inline-block; }
.center .nav p a:hover{ color: #e84040; }
.center .map{
margin-top: 10px;
border: 1px solid rgba(190, 190, 190, 0.63); height: 520px;
position: absolute; z-index: 1;
} /* .test{
margin: 1px; height: 518px; width: 1032px; background: red; position: absolute; }
*/
#ruangan, #gedung{ cursor: pointer; float: right; color: #000; margin-top: 0px; margin-left: 7px; margin-right: 1px; width: 100px;
padding: 5px 1px 0px 0px; position: relative;
z-index: 5; }
#ruangan{
z-index: 6; }
#ruangan ul ul, #gedung ul ul{ margin-top: 15px;
border: 1px solid rgba(0, 0, 0, 0.09); width: 150px;
float: right; }
#ruangan a.main, #gedung a.main{ display: block;
background: #f5f5f5; color: #a5a5a5; text-align: center;
padding: 2px 15px 2px 10px; border-radius: 0px;
box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.40); }
(6)
#ruangan a.main:hover, #gedung a.main:hover{
box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.80); color: rgb(255, 74, 58);
}
#ruangan li li, #gedung li li{ background: rgb(235, 83, 83); padding: 5px 10px;
color: rgb(235, 235, 235); }
#ruangan li li a, #gedung li li a{ color: rgb(235, 235, 235); }
#ruangan ul li ul li a:hover, #gedung ul li ul li a:hover{ text-decoration: underline;
color: rgb(255, 255, 255); }
/*MAP*/ #map{
margin: 1px; height: 618px; width: 1032px; }
#map img{
float: left; }
#map .desc{
float: left; width: 412px; height: 518px; padding: 10px; }
#map .desc h1{
font-size: 25px; margin-bottom: 10px; line-height: 26px; }
#map .desc p{
border-top: 2px solid black; padding-top: 10px;