Peta Interaktif USU Berbasis Web

(1)

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,

(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

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

(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

(7)

ABSTRAK

(8)

DAFTAR ISI

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

(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

(12)

ABSTRAK

(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

(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

(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

(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

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

(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

(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

(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

(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

(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

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

(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

(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

(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

(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>

(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-->

(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

(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).

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

(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>

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

(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

(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

(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

(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

(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

(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

(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

(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

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

(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

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

(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') {

(62)

(63)

(64)

<tr>

<th>Gambar Fakultas</th>

$q="SELECT `id`,`nama` FROM `fakultas` ORDER BY `nama` ASC"; $ex=mysql_query($q);

(65)

<th>Keterangan</th>

$q="SELECT * FROM `gedung` ORDER BY `id` DESC"; $ex=mysql_query($q); $q2="SELECT `nama` FROM `fakultas` WHERE `id`='".$data['id_fak']."'";

echo "<p>Data masih kosong.</p>"; }

(66)

</table>

$q="SELECT * FROM `fakultas` ORDER BY `id` DESC"; $ex=mysql_query($q);

(67)

$map=$_GET['map'];

(68)

color: #f1f1f1;

$('#ruangan > ul').toggleClass('no-js js'); $('#ruangan .js ul').hide();

(69)

$('#gedung > ul').toggleClass('no-js js');

if ($('#gedung .js ul').is(':visible')) { $('#gedung .js ul', this).slideUp(); $('.main').removeClass('active'); }

}); });

</script>

<a id="menu" href="#">Fakultas<span id="v">v</span></a> <ul>

<?php

$q="SELECT * FROM `fakultas`"; $ex=mysql_query($q);

$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);

$q="SELECT * FROM `ruangan` WHERE `id_ged`='$gedung'"; $ex=mysql_query($q);

(71)

<a class=\"main\">Pilih Gedung</a>";

$q="SELECT * FROM `gedung` WHERE `id_fak`='$map'"; $ex=mysql_query($q);

echo "<ul><li>Gedung belum tersedia</li></ul>"; }

$q="SELECT * FROM `ruangan` WHERE `id`='$ruangan'"; $ex=mysql_query($q);

echo "<img class=\"imgMap\" src=\"images/".$data['gambar']."\">"; echo "

<h1>Ruangan ".$data['nama']."</h1> <p>".$data['keterangan']."</p> </div>

} elseif(!empty($gedung)){

$q="SELECT * FROM `gedung` WHERE `id`='$gedung'"; $ex=mysql_query($q);

$q="SELECT * FROM `fakultas` WHERE `id`='$map'"; $ex=mysql_query($q);

(72)

(73)

(74)

height: 20px;

margin: 20px 0px 0px 12px; color: #ffffff;

(75)

#fakultas a:hover{

background: url(images/icon-plus.png) no-repeat center; }

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{

(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;

padding: 5px 1px 0px 0px; position: relative;

#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); }

border-top: 2px solid black; padding-top: 10px;