PERANCANGAN SISTEM INFORMASI PARIWISATA SUMATERA UTARA KABUPATEN BATUBARA TUGAS AKHIR DANIEL SIMANJUNTAK

PERANCANGAN SISTEM INFORMASI PARIWISATA SUMATERA UTARA KABUPATEN BATUBARA TUGAS AKHIR DANIEL SIMANJUNTAK 142406186 PROGRAM STUDI D-3 TEKNIK INFORMATIKA DEPARTEMEN MATEMATIKA FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM MEDAN 2017

PERSETUJUAN Judul : SISTEM INFORMASI PARIWISATA KABUPATEN BATUBARA BERBASIS WEB Kategori : TUGAS AKHIR Nama : DANIEL SIMANJUNTAK NomorIndukMahasiswa : 142406186 Program Studi : DIPLOMA 3 TEKNIK INFORMATIKA Departemen Fakultas : MATEMATIKA : ILMU PENGETAHUAN ALAM DAN MATEMATIKA Disetujui di Medan, Juli 2017 Diketahui oleh Ketua Prodi D3 TI FMIPA USU Disetujui oleh Pembimbing Dra. Normalina Napitupulu,M.Sc NIP. 19631106 198902 2 001 Dra.Normalina Napitupulu,M.Sc NIP. 19631106 198902 2 001

PERNYATAAN SISTEM INFORMASI PARIWISATA KABUPATEN BATUBARA 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 2017 DANIEL SIMANJUNTAK 142406186

PENGHARGAAN Puji dan syukur penulis sampaikan kepada Tuhan Yang Maha Pemurah dan Maha Penyayang, dengan limpah karunia-nya penulis dapat menyelesaikan Tugas Akhir dengan baik. Penulis menyadari bahwa dalam pelaksanaannya banyak pihak yang telah membantu serta mendoakan dan memberikan dukungan sehingga terselesaikannya tugas akhir ini. Oleh karena itu penulis sampaikan ucapan terima kasih kepada: Bapak Dr. Kerista Sebayang, MS selaku Dekan Fakultas Matematika dan Ilmu Pengetahuan Alam Universtas Sumatera Utara. Bapak Prof. Dr. Tulus, Vordipl. Math, M.Si, Ph.D. selaku Ketua Departemen Matematika Fakultas Matematika dan Ilmu Pengetahuan Alam. Ibu Dra. Normalina Napitupulu, M.Sc, selaku Ketua Jurusan Program Studi D3 Teknik Informatika. Ibu Dra. Normalina Napitupulu, M.Sc, selaku Dosen Pembimbing Tugas Akhir Program Studi D3 Teknik Informatika Fakultas MIPA Universitas Sumatera Utara yang telah memberikan bimbingan dan arahan selama ini kepada penulis dalam menyelesaikan tugas akhir. Penulis menyampaikan terima kasih kepada Orang Tua dan seluruh keluarga yang selama ini memberikan dukungan baik secara maeri maupun spiritual. Akhir kata, Penulis berharap semoga Tugas Akhir ini bermanfaat bagi penulis sendiri pada khususnya dan pembaca pada umumnya. Medan, Juli 2017 Penulis, Daniel Simanjuntak

ABSTRAK Sumatera Utara terkenal dengan banyak pariwisata. Baik wisata maupun alam tapi sayang masyarakat di Sumatera Utara khususnya masyarakat Batubara kurang menyadari akan kekayaan potensi pariwisata daerahnya tersebut. Berdasarkan fakta diatas, pada penulisan tugas akhir ini penulis membahas tentang bagaimana cara memperkenalkan pariwisata di Sumatera Utara khususnya di Kabupaten Batubara kepada masyarakat Indonesia maupun Luar Negeri. Disini penulis menganalisa dan merancang struktur sistem yang akan dibangun dan yang digunakan yaitu bahasa pemrograman serta integrasi dari keduanya. Sistem ini dikembangkan dengan menggunakan bahasa pemrograman PHP dan MySQL dan disertai dengan menggunakan database yang disesuaikan dengan kebutuhan dalam proses perancangan sistem ini. Adapun hal yang terdapat dalam sistem ini meliputi berbagai informasi tentang pariwisata yang ada disumatera utara khususnya di Kabupaten Batubara. Dari hasil penelitian tugas akhir ini, dapat disimpulkan bahwa sistem informasi berlangsung secara online dan terkomputerisasikan dengan baik. Kata kunci :Sistem Informasi, PHP, MySQL, Web

DAFTAR ISI Persetujuan Pernyataan Penghargaan Abstrak Daftar Isi Daftar Tabel Daftar Gambar Daftar Lampiran Halaman i ii iii iv v vi vii viii Bab 1. PENDAHULUAN 1.1. Latar Belakang 1 1.2. Rumusan Masalah 3 1.3. Batasan Masalah 4 1.4. Tujuan Penelitian 4 1.5. Metodologi Penelitian 5 1.6. Sistematika Penulisan 7 Bab 2. LANDASAN TEORI 2.1. Sekilas Tentang Komputer 9 2.2. Pengertian Sistem 9 2.3. Informasi 10 2.4. Sistem Informasi 11 2.5. Pengertian Internet 11 2.5.1.Network 12 2.5.1.1.Web Server 13 2.5.1.2. World Wide Web (WWW) 13 2.5.1.3. Sekilas tentang HTTP 14 2.6. Pengenalan PHP 15 2.6.1. Kelebihan dan Kelemahan PHP 16 2.7. Cascading Style Sheet (CSS) 17 2.8. MySQL 17 2.9. Sublime Text 18 Bab 3. PERANCANGAN SISTEM 3.1 Perancangan Sistem 20 3.2. Data Flow Diagram (DFD) 20 3.3. Flowchart (Diagram Alir) 22 3.4. Perancangan Database 27

Bab 4. IMPLEMENTASI SISTEM 4.1 Pengertian Implementasi Sistem 32 4.2 Tujuan Implementasi Program 32 4.3 Komponen-Komponen Kebutuhan Sistem 33 4.3.1 Hardware 33 4.3.2 Software 33 4.3.3 Brainware 34 4.4 Tampilan Halaman Website 34 Bab 5. KESIMPULAN DAN SARAN 5.1. Kesimpulan 41 5.2. Saran 41 Daftar Pustaka Lampiran

DAFTAR TABEL Nomor Judul Halaman Tabel 3.4.1. Tabel Admin 27 3.4.2. Tabel Kategori 27 3.4.3. Tabel Komentar 28 3.4.4. Tabel Main Menu 28 3.4.5. Tabel Modul 29 3.4.6. Tabel Item 29 3.4.7. Tabel Sub Menu 30 3.4.8. Tabel Sub Item 30

DAFTAR GAMBAR Nomor Judul Halaman Gambar 4.1. Halaman Utama Web 35 4.2. Halaman Home Batubara 35 4.3. Halaman Kategori 36 4.4. Halaman Detail Sub Kategori 37 4.5. Halaman Tentang Web 37 4.6. Halaman Menu Galeri 38 4.7. Halaman Contact 38 4.8. Halaman Login 39 4.9. Halaman Sign up 39 4.10. Halaman Login Admin 40 4.11. Halaman Home Admin 40

BAB 1 PENDAHULUAN 1.1 Latar Belakang Pariwisata merupakan pemimpin sektor yang kuat terhadap perubahan, dan sektor yang sangat menjanjikan termasuk pada struktur global. Pariwisata sebagai salah satu sektor yang memiliki kontribusi penting terhadap penciptaan lapangan kerja, pertumbuhan ekonomi, dan penghidupan yang layak serta mendorong pemerintah daerah untuk membangun dan memelihara infrastruktur sehingga kualitas hidup masyarakat setempat juga meningkat. Pariwisata memiliki prospek cerah dan mempunyai peran yang sangat penting, baik dalam perekonomian dunia maupun Indonesia. Indonesia kaya akan berbagai potensi alam yang belum tergali di berbagai daerah yang dapat dijadikan objek dan daya tarik wisata. Melimpahnya kekayaan alam Indonesia berupa keadaan alam flora dan fauna yang sangat banyak memberikan daya tarik tersendiri bagi para wisatawan domestik maupun wisatawan mancanegara dan apabila hal tersebut dikembangkan dapat menjadi modal bagi pengembangan dan peningkatan sektor pariwisata di daerah setempat khususnya. Modal akan potensi alam yang melimpah tersebut perlu di manfaatkan secara optimal melalui

penyelenggaraan kepariwisataan yang di tujukan untuk meningkatkan pendapatan daerah, dan memiliki berbagai keuntungan misalnya dalam rangka untuk meningkatkan kesejahteraan setempat, memperluas kesempatan kerja, mendorong pembangunan daerah, memperkenalkan dan mendayagunakan potensi alam tersebut. Beragamnya potensi alam yang dimiliki Indonesia sangat menjual bagi dunia kepariwisataan. Sumatera Utara yang merupakan salah satu Provinsi di Indonesia memiliki beragam tempat wisata yang menarik dan banyak dikunjungi oleh wisatawan. Provinsi ini memiliki banyak potensi wisata seperti: panorama dan keindahan alam di daerah tujuan wisata yang tersebar di berbagai daerah kabupaten. Dilihat dari obyek dan daya tarik, wisata alam memiliki potensi yang sangat bagus untuk dikembangkan dan dapat berperan penting dalam meningkatkan pariwisata di Sumatera Utara. Objek-objek wisata ini selayaknya mendapat perhatian dari masyarakat dan pemerintah setempat. Namun, sayangnya pengelolaan pada beberapa objek wisata tersebut belum optimal. Masih terbatasnya dukungan prasarana dan sarana dalam menunjang kegiatan pariwisata telah mengakibatkan menurunnya daya tarik obyek wisata. Pola pengelolaan kawasan pariwisata yang tidak menyeluruh telah menimbulkan dampak negatif yang mengakibatkan menurunnya daya tarik obyek wisata.

Dari banyaknya wilayah yang ada di Sumatera Utara penulis memilih daerah Kabupaten Batubara yang terkenal dengan wisata alamnya. Kabupaten Batubara merupakan salah satu Kabupaten di Provinsi Sumatera Utara yang memiliki berbagai ragam sumber daya alam dan budaya, sebagai objek dan daya tarik wisata. Sumber daya alam dan budaya tersebut merupakan salah satu aset potensial kepariwisataan nasional. Adanya objek wisata ini memunculkan sebuah tantangan pada generasi sekarang. Bagaimana wisata ini terus berlanjut tetapi tidak menggangu ekosistem disekitarnya. Sungai Bingei memiliki tingkat kesulitan, tantangan, dan keindahan alam yang masih liar menjadi daya tarik bagi pengunjung yang menggemari wisata yang berbasis alam dan petualangan tersebut. Berdasarkan uraian diatas maka penulis tertarik untuk membuat suatu website dengan judul SISTEM INFORMASI PARIWISATA SUMATERA UTARA KABUPATEN BATUBARA BERBASIS WEB Penulis berharap semoga penulisan Tugas Akhir ini dapat memberikan kemudahan bagi seluruh masyarakat Indonesia dalam mengakses pariwisata di Sumatera Utara khususnya di Kabupaten Batubara secara online. 1.2Rumusan Masalah Dari latar belakang di atas, maka rumusan masalah dalam penelitian ini adalah:

1. Bagaimana pengembangan kawasan wisata di Kabupaten Batubara yang dilihat dari; objek dan daya tarik wisata, sarana wisata, prasarana wisata, masyarakat di sekitar objek wisata. 2. Apakah upaya pengembangan kawasan wisata dapat meningkatkan Pendapatan Asli Daerah Kabupaten Batubara. 1.3 Batasan Masalah Adapun yang menjadi batasan masalah dalam penulisan ini: 1. Menggali potensi wisata sebagai daya tarik wisatawan pecinta alam dan petualangan pariwisata di suatu daerah, khususnya ekowisata. 2. Bagaimana pengaruh wisata di kabupaten Batubara dalam pengembangan pariwisata di suatu daerah, khususnya ekowisata. 3. Peranan keterlibatan masyarakat setempat, pemerintah daerah setempat, dan Tour Operator/Travel Agent dalam mengembangkan/mempromosikan objek wisata tersebut. 1.4 Tujuan Penelitian Adapun maksud dari Tugas Akhir ini adalah: 1. Untuk mengetahui pengembangan kawasan wisata yang dilihat dari; objek dan daya tarik wisata, sarana wisata, prasarana wisata, masyarakat di sekitar objek wisata.

2. Untuk mengetahui apakah upaya pengembangan kawasan wisata dapat meningkatkan Pendapatan Asli Daerah Kabupaten Batubara. 3. Memberikan gambaran dan penjelasan kapada pembaca tentang masalah pengembangan dan pembangunan kepariwisataan dan pelestarian sumber daya alam yang berwawasan lingkungan hidup di Kabupaten Batubara. 1.5 Metodologi Penelitian Metodologi penelitian adalah langkah-langkah sistematik yang digunakan untuk mengejakan atau menyelesaikan suatu masalah. Metode penelitian digunakan sebagai pedoman dalam melaksanakan penelitian agar hasil yang dicapai tidak menyimpang dari tujuan yang ditentukan sebelumnya. Metode penelitian yang digunakan dalam penelitian ini antara lain: 1. Metode Pengumpulan Data a. Metode Observasi Penulis mengambil data melalui pengamatan ke lokasi wisata. b. Metode Wawancara (Interview Research) Penulis mengumpulkan data dengan bertanya langsung kepada warga sekitar untuk mengetahui tempat dan lokasi pariwisata di Kabupaten Batubara. c. Metode Studi Pustaka (Library Research)

Dalam pengumpulan data penulis mengumpulkan bahan-bahan dan bukubuku di perpustakaan fakultas maupun perpustakaan universitas yang berhubungan dengan masalah yang akan dibahas. 2. Metode Analisa Dalam metode ini penulis mengolah data yang telah didapat menjadi informasi, sehingga sifat-sifat data dapat dengan mudah dipahami dan bermanfaat bagi penulis dalam menyelesaikan masalah yang berkaitan dengan penelitian. 3. Metode Perancangan Dalam metode ini penulis dapat merancang sistem dari data yang telah diolah menjadi informasi sehingga memberi gambaran yang jelas dan rancangan sistem yang lengkap bagi penulis. 4. Pemrograman Dalam metode ini penulis melakukan proses inisialisasi kode program sesuai rancangan yang telah dibentuk agar dapat dipahami oleh mesin. Sebuah program biasanya memiliki suatu bentuk model pengeksekusian tertentu agar dapat secara langsung dieksekusi oleh computer. Salah satu bahasa program yang dipakai penulis adalah DreamWeaver sebagai pemrograman yang difungsikan untuk membangun website dan MySQL sebagai pengolah database server. 5. Implementasi dan Pengujian

Dalam metode ini penulis melakukan tahap pengujian dan penerapan sistem untuk mengurangi terjadinya kesalahan pada sistem, dan dapat menilai kelebihan dan kekurangan sistem juga untuk menilai apakah sistem yang dirancang sudah sesuai dengan apa yang diharapkan. 6. Pembuatan Laporan Dalam metode ini penulis memberi atau menyajikan hasil kegiatan yang telah dilakukan dalam penelitian berdasarkan keadaan objektif yang di alami penulis sendiri. Ini sebagai dasar penentu kebijakan dan pengarahan dari Dosen Pembimbing. 1.6 Sistematika Penulisan Sistematika penulisan tentang Tugas Akhir yang berjudul Sistem Informasi Pariwisata Kabupaten Batubara Berbasis Web disusun dalam lima bab yang memiliki keterikatan atara satu bab dengan bab lainnya. BAB 1 : PENDAHULUAN Bab pertama berisi uraian tentang latar belakang, batasan masalah, tujuan penulisan, manfaat penelitian, metode penelitian, dan sistematika penulisan.

BAB 2 : LANDASAN TEORI Dalam bab ini berisikan beberapa teori-teori yang mendukung dalam pembahasan penyusunan tugas akhir ini yang terdiri dari pengertian sistem informasi, basis data, serta bahasa pemrograman yang digunakan. BAB 3 : PERANCANGAN SISTEM Bab ini penulis membahas tentang perancangan sistem yang meliputi definisi tentang perancangan sistem, Data Flow Diagram (DFD), dan perancangan database. BAB 4 : IMPLEMENTASI SISTEM Bab ini penulis membahas tentang pengertian, tujuan dan komponen utama implementasi sistem, langkah-langkah implementasi sistem dan spesifikasi kebutuhan sistem. BAB 5 : KESIMPULAN DAN SARAN Bab ini berisi tentang kesimpulan dan saran dari hasil penelitian.

BAB 2 LANDASAN TEORI 2.1 Sekilas Tentang Komputer Komputer berasal dari bahasa latin computare yang mengandung arti menghitung. Komputer juga sebagai alat informasi dan komunikasi yang mampu mengolah data dan kemudian menyimpannya.karena luasnya bidang garapan ilmu komputer, para pakar dan peneliti sedikit berbeda dalam mendefinisikan termininologi komputer. 1. Menurut Hamacher, komputer adalah mesin penghitung elektronik yang cepat dan dapat menerima informasi input digital, kemudian memprosesnya sesuai dengan program yang tersimpan di memorinya, dan menghasilkan output berupa informasi. 2. Donald H.Sanders Komputer adalah sistem elektronik untuk memanipulasi data yang cepatdan tepat serta dirancang dan diorganisasikan supaya secara otomatis menerima danmenyimpan data input, memprosesnya dan menghasilkan output dibawah pengawasan suatulangkah-langkah instruksi-instruksi program yang tersimpan di memori.

2.2 Pengertian Sistem Sistem adalah seperangkat elemen-elemen yang membentuk suatu kumpulan dari berbagai prosedur atau berbagai bagan pengolahan untuk mencari sebuah tujuan bersama dengan cara mengoperasikan data maupun barang untuk menghasilkan suatu informasi (murdick,r.g). Dari uraian diatas mengenai definisi sistem, penulis dapat menyimpulkan pengertian dari sistem yang berkaitan dengan judul, yaitu Sistem adalah suatu cara yang dibuat sedemikian rupa yang terdiri dari dua elemen atau lebih yang saling berhubungan mengatasi masalah atau kendala-kendala yang terjadi dengan tujuan yang diinginkan. 2.3 Informasi Informasi adalah data yang telah diolah menjadi bentuk yang memiliki arti bagi sipenerima dan bermanfaat bagi pengambilan keputusan saat ini atau mendatang (Raymond Mc.leod). Kegunaan informasi adalah untuk mengurangi ketidakpastian didalam proses pengambilan keputusan tentang suatu keadaan. Informasi yang digunakan di dalam suatu sistem informasi umumnya digunakan untuk beberapa keguanaan. Informasi digunakan tidak hanya oleh satu orang pihak dalam suatu organisasi.

Kualitas informasi sangat dipengaruhi atau ditentukan oleh beberapa hal yaitu: a. Relevan(Relevancy) b. Akurat(Accurancy) c. Tepat Waktu (TimeLines) d. Ekonomis(Economy) e. Efisien(Efficiency) f. Ketersediaan(Availability) g. Dapat dipercaya(reliability) h. Konsisten 2.4 Sistem Informasi Sistem Informasi adalah sistem pengolah data menjadi sebuah informasi yang berkualitas dan dipergunakan untuk suatu alat bantu pengambilan keputusan. Menurut Mohamad Subhan (2012:17) dalam bukunya yang berjudul Analisa Perancangan Sistem. Sistem Informasi merupakan kumpulan data yang diolah menjadi bentuk yang lebih berguna dan lebih berarti bagi yang menerima. Tanpa suatu informasi, suatu sistem tidak akan berjalan dengan lancar dan akhirnyua bisa mati. Dengan kata lain, sumber dari informasi adalah data. Data menggambarkan suatu kejadian yang sering terjadi, dimana data tersebut akan diolah dan akan diterapkan dalam sistem menjadi input yang berguna dalam suatu sistem. Data merupakan bentuk yang belum dapat memberikan manfaat yang besar bagi

penerimanya, sehingga perlu suatu model yang nantinya akan dikelompokkan dan diproses untuk menghasilkan informasi. 2.5 Pengertian Internet Internet adalah sekumpulan jaringan berbeda yang saling terhubung bersama sebagai suatu kesatuan dengan menggunakan berbagai macam protokol, salah satunya adalah protokol TCP/IP (Transmission Control Protocol/Internet Protocol) (Shalahuddin, Mdan Rossa A.S, 2010). TCP/IP adalah protokol yang paling banyak digunakan di internet. Protokol TCP/IP merupakan cara standard untuk memakietkan dan mengalamatkan data komputer (sinyal eletronik) sehingga data tersebut dapat dikirim ke komputer terdekat atau keliling dunia dan tiba dalam waktu cepat tanpa rusak atau hilang. Asal-usul internet berasal dari jaringan komputer yang dibentuk pada tahun 1970-an. Jaringan komputer tersebut disebut dengan Arpanet, yaitu jaringan komputer yang dibentuk olah departemen pertahanan Amerika Serikat. Selanjutnya, jaringan komputer tersebut diperbaharui dan dikembangakan, dan sekarang penerusnya menjadi tulang punggung global untuk sumber daya informasi yang disebut dengan internet. 2.5.1 Network

Network adalah jaringan dari sistem komunikasi data yang melibatkan sebuah atau lebih sistem komputer yang dihubungkan dengan jalur transmisi alat komunikasi membentuk satu sistem. Dengan network, komputer yang satu dapat menggunakan data di komputer lain, dapatmencetak laporan di printer komputer lain, dapat memberi berita ke komputer lain walaupun berlainan area. Network merupakan cara yang sangat berguna untuk mengintegrasikan sistem informasi dan menyalurkan arus informasi dari satu area ke area lainnya. 2.5.1.1 Web Server Web server adalah internet server yang mampu untuk melayani koneksi perpindahan data dalam protokol http web serverdisamping e-mail. Dikarenakan web server dirancang untuk menampilkan data, dimulai dari teks, hypertext, gambar yang merupakan keunggulan dari web sehingga web tidak hanya dapat diterima di universitas tetapi di seluruh perusahaan komersial yang dapat menampilkan datanya dalam internet. Macam-macam web server antara lain Apache (Open Source), Xitami, IIS, PWS. Website (situs web) merupakan alamat (URL) yang berfungsi sebagai tempat penyimpanan data dan informasi dengan berdasarkan topik tertentu. URL adalah

suatu sarana yang digunakan untuk menentukan lokasi informasi pada suatu web server. Situs atau web dapat dikategorikan menjadi 2 yaitu: 1. Web Statis, yaitu web yang berisi atau menampilkan informasi-informasi yang sifatnya statis(tetap), 2. Web Dinamis, yaitu web yang menampilkan informasi serta dapat berinteraksi dengan user yang sifatnya dinamis. 2.5.1.2World Wide Web (WWW) World Wide Web (WWW), lebih dikenal dengan web, merupakan salah satu layanan yang didapat oleh pemakai komputer yang terhubung ke internet. Web pada awalnya adalah ruang informasi dalam internet, dengan menggunakan teknologi hypertext, pemakai dituntun untuk menemukan informasi dengan mengikuti link yang disediakan dalam dokumen web ytang ditampilkan dalam browser web. Agar file yang berisi hypertext ini bisa dikirimkan, diperlukan protokol pengiriman data yang spesifik yang disebut Hypertext Transfer Protocol (HTTP). Untuk menemukan setiap hubungan Hypertext digunakan Uniform Resource Locator (URL). Karena itu, halaman WWW juga disebut dokumen URL. (Konsep dan Aplikasi Pemrograman Client Server dan Sistem Terdistribusi, Budi Sutedjo Dharma Oetomo, 2000). 2.5.1.3 Sekilas tentang HTTP

HTTP (Hypertext Transfer Protocol) adalah protokol yang banyak digunakan di internet untuk pertukaran berkas atau data lainnya didalam World Wide Web dengan menggunakan browser. Sebuah browser disebut client HTTP, sedangkan penyedia halaman web yang diakses oleh browser disebut serverhttp (web server). Sumber yang akan diakses memiliki alamat yang disebut Universal Resources Locator (URL). Resources (sumber daya) yang dimaksud disini dapat berupa berkas, hasil output dari sebuah program (seperti PHP), hasil query dari server basis data dan lain-lain. HTTP memiliki dua versi, HTTP yang pertama kali diciptakan adalah HTTP 1.0, kemudian dikembangkan lagi menjadi HTTP 1.1 yang banyak digunakan sekarang. (Konsep dan Aplikasi Pemrograman Client server dan Sistem Terdistribusi, Budi Sutedjo Dharma Oetomo, 2000). 2.6 Pengenalan PHP PHP singkatan dari Hypertext Preprocessor yang digunakan sebagai bahan bahasa skripserver-side dalam pengembangan web yang disisipkan pada dokumen HTML. Penggunaan PHP memungkinkan web dapat dibuat dinamis sehingga maintance situs web tersebut menjadi lebih mudah dan efisien. PHP merupakan software Open Source yang disebarkan secara bebas dari situs resminya. PHP diciptakan pertama kali oleh Rasmus Lerdorf pada tahun 1994. Awalnya, PHP digunakan untuk mencatat jumlah serta untuk mengetahui siapa saja pengunjung pada homepage-nya. Rasmus

Lerdorf adalah seorang pendukung open source. Oleh karena itu, ia mengeluarkan Personal Home Page Tools versi 1.0 secara gratis kemudian menambah kemampuan PHP 1.0 dan meluncurkan PHP 2.0. Pada tahun 1996, PHP telah banyak digunakan dalam website di dunia. Sebuah kelompok pengembang software terdiri dari Rasmus, Zeew Suraski, Andi Gutman, Stig Bakkken, Shane Caraveo, dan Jim Winstead bekerja sama untuk menyempurnakan PHP 2.0. Akhirnya, pada tahun 1998, PHP 3.0 diluncurkan. Penyempurnaan terus dilakukan sehingga pada tahun 2000 dikeluarkan PHP 4.0. Tidak berhenti sampai disitu, kemampuan PHP terus ditambah, dan saat ini telah ada PHP versi baru yaitu 5.0.x. Semua script PHP dimulai dengan tag <?php dan diakhiri dengan tag?> dan diakhir perintah ditandai dengan tanda titik koma (;). Untuk lebih jelasnya,perhatikan contoh script PHP berikut ini: <?php Echo Saya sedang mencoba menggunakan PHP ;?> (Aplikasi Web dengan PHP dan Mysql, Kasiman Peranginangin, 2006) 2.6.1 Kelebihan dan Kelemahan PHP

Kelebihan PHP sebagai bahasa server-side adalah : 1. Bahasa pemrograman PHP adalah sebuah bahasa script yang tidak melakukan sebuah kompilasi dalam penggunaannya. 2.Web Server yang mendukung PHP dapat ditemukan dimana-mana dari mulai IIS sampai dengan apache, dengan konfigurasi yang relatif mudah. 3.Dapat digunakan diberbagai mesin (linux, unix, windows) dan dapat dijalankan secara runtime melalui console serta juga dapat menjalankan perintah-perintah sistem. Adapun kelemahan PHP adalah : 1. Tidak ideal untuk pengembangan skala besar 2.Tidak bisa memisahkan antara tampilan dengan logik dan baik (walaupun penggunaan tempalte dapat memperbaikinya) 3. PHP memiliki kelemahan security tertentu apabila programmer tidak jeli dalam melakukan pemrograman dan kurang memperhatikan isu dn konfigurasi PHP. 2.7Cascading Style Sheet (CSS) CSS merupakan kependekanan dari Cascading Style Sheet yang berfungsi untuk mengatur tampilan dengan kemampuan jauh lebih baik dari tag maupun atribut standar HTML (HyperText Markup Language). CSS sebenarnya adalah suatu kumpulan atribut untuk fungsi format tampilan dan dapat digunakan untuk

mengontrol tampilan banyak dokumen secara bersama. Keuntungan menggunakan CSS, yaitu jika kita ingin mengubah format dokumen, maka tidak perlu mengedit satu persatu. Penggunakan CSS ada dua cara, yaitu dengan menyisipkan kode CSS langsung dalam kode HTML atau simpan file tersendiri berektensi.css. Dengan menyimpan sebagai file tersendiri akan lebih memudahkan untuk mengontrol tampilan dalam banyak dokumen secara langsung. CSS mendapat dukungan penuh pada browser versi 4 (empat) dan pada versi sebelumnya. Perlu diketahui bahwa tampilan CSS dapat berbeda bila ditampilkan pada menu browser yang berbeda pula. 2.8MySQL MySQL adalah sebuah aplikasi Relational Database Management Server (RDBMS). Dengan menggunakan MySQLserver, maka data dapat diakses oleh banyak pemakai secara bersamaan. MySQL menggunakan bahasa SQL (Structure Query Language) yaitu bahasa pemrograman standar yang digunakan untuk mengakses server database. Tiap database memiliki tabel-tabel, tiap table memiliki field-field. Umumnya, informasi tersimpan dalam tabel-tabel yang secara logis merupakan struktur-struktur dimensi terdiri atas baris dan kolom. Field-field tersebut dapat berupa data seperti int, real, char, date, time, dan lainnya.

MySQL mempunyai keunggulan, diantaranya: a. bekerja pada berbagai platform (tersedia berbagai versi untuk berbagai sistem operasi) b.pengaksesan database dapat dilakukan dengan mudah c. memiliki jenis kolom yang cukup banyak sehingga memudahkan konfigurasi sistem database d. mendukung record yang memiliki kolom dengan panjang bervariasi, dan masih banyak keunggulan lainnya. e. MySQL dan PHP saling terintegritasi, maksudnya adalah pembuatan database dengan menggunakan sintaks PHP dapat dibuat. Sedangkan input yang dimasukkan melalui aplikasi web yang menggunakan skrip server side seperti PHP dapat langsung dimasukkan ke databasemysql yang ada di server dan tentunya web tersebut web server. 2.9Sublime Text Sublime text merupakan teks editor multiplatform dan powerfull, karena dengan ukuran yang kecil. Sublime text memiliki fitur yang luar biasa dan kinerja yang sangat sederhana. Fiturnya sangat lengkap (bisa digunakan untuk berbagai bahasa pemrograman) dan juga dapat menambah extension untuk memudahkan dalam coding. Ada beberapa fitur yang membuat menarik dalam pemakaiannya, yaitu:

1. Do anything adalah fitur yang bisa membuka file dengan tombol ctrl + P pada keyboard guna membuka file dengan jumlah banyak. 2. Multiple Selections adalah fitur yang bisa mengubah banyak baris, mengubah variabel dengan menekan ctrl + shift + L dan ctrl + shift + D. 3. Cross platform artinya fitur ini bisa digunakan di berbagai OS. BAB 3 PERANCANGAN SISTEM 3.1. Perancangan Sistem Membuat suatu situs memerlukan persiapan, perencanaan yang baik, tujuan yang jelas dan percobaan yang berulang-ulang karena menyangkut semua elemen yang membentuk situs. Rancangan sistem adalah penentuan proses dan data yang diperlukan oleh sistem baru. Tujuan dari perancangan sistem adalah untuk memenuhi kebutuhan user mengenai gambaran yang jelas tentang perancangan sistem yang akan dibuat serta diimplementasikan. Rancangan program ini dapat digambarkan dengan menggunakan flowchart (diagram alir). 3.2. Data Flow Diagram Data flow diagram yaitu suatu diagram yang menggunakan notasi-notasi untuk menggambarkan arus data dari suatu sistem dengan menggunakan pendekatan

metode analisis sistem terstruktur. Tujuan data flow diagram yaitu memberikan indikasi mengenai bagaimana data ditransformasi pada saat data bergerak melalui sistem dan menggambarkan fungsi-fungsi yang mentransformasi aliran data. Komponen-komponen data flow diagram yaitu : entitas luar, proses penyimpanan data, dan arus data. DFD memiliki simbol-simbol yang digunakan untuk menggambarkan model data seperti yang tertera pada table berikut ini. Gane/Sarson Yourdon/De Marco Keterangan Entitas Eksternal Entitas Eksternal Entitas eksternal dapat berupa unit terkait yang berinteraksi dengan system tapi berada di luar sistem. Unit yang mempergunakan atau melakukan transformasi data. Komponen fisik tidak diidentifikasi. Aliran data dengan arah khusus dari sumber ketujuan.

Data Store Penyimpanan data atau tempat data dilihat oleh proses. Tabel 3.1 Simbol Data Flow Diagram 3.3. Gambar Diagram DFD Input Data Meminta Info wisata Admin Login Sistem Informasi Pariwisata Kab. Batubara User Verifikasi Login Modifikasi data Gambar 3.3 Diagram DFD Memberikan Request user 3.4. Flowchart (diagram alir) Flowchart adalah bagan yang menggambarkan arus logika dari data yang akan diproses dalam suatu program dari awal sampai akhir. Flowchart digunakan untuk menggambarkan sebuah algoritma. Menurut bentuknya flowchart dibedakan

manjadi tiga jenis: 1.Flowchart berurut, yaitu bentuk flowchart yang bentuknya urut ke bawah dan biasanya hanya menyelesaikan satu persoalan dengan satu penyelesaian. 2.Flowchart memilih yaitu bentuk flowchart yang digunakan untuk menyelesaikan persoalan dengan penyelesaian lebih dari satu, biasa memilih satu diantara dua penyelesaian. 3.Flowchart berulang yaitu bentuk flowchart yang digunakan untuk menyelesaikan persoalan dengan bentuk berulang.

7 Connector untuk menunjukkan sambungan dari flowchart yang terputus di halaman yang sama atau halaman berikutnya 8 Untuk menyimpan data Gambar 3.4 Flowchart (Diagram Alir) 3.4.1. Flowchart Menu Utama Flowchart menu utama dapat dilihat pada gambar di bawah ini

Start Halaman Utama Login Tampilan Login Login Form Login A Daftar Form Datar B Home Sejarah Pakaian Adat Rumah Adat Other Info Kategori Pilih Link C Tentang Web Tenatng Web Menu Pariwisata Tampilan Menu Pariwisata Show By Kategori Tampilan Pilihan Kategori Pilih Link Tampilan Link Contact Pilih Link D Gambar 3.4.1. Flowchart Menu Utama

3.4.2. Flowchart Admin Flowchart Admin dapat dilihat pada gambar di bawah ini : A Input Username dan Password If True Tidak Username dan Password Salah Ya Halaman Administrator Edit Data Keluar End Gambar3.4.2Alur Flowchart Admin 3.4.3. Flowchart Login User Flowchart Login User dapat dilihat di bawah ini.

Start Input Username dan Password If True Tidak Username dan Password Salah Ya Hallo Pengunjung Keluar End Gambar 3.4.2 Alur Flowchart Login User 3.4.3. Flowchart Daftar Flowchart Daftar dapat dilihat di bawah ini.

B Input Data Diri Dafar Tidak Lengkap Data Belum Lengkap Ya Daftar Berhasil Keluar End Gambar 3.4.2 Alur Flowchart Daftar

3.5. Perancangan Database Database adalah kumpulan dari data yang berhubungan antara yang satu dengan yang lainnya, tersimpan diperangkat keras komputer dan menggunakan perangkat lunak untuk memanipulasinya. Database merupakan salah satu komponen yang penting dalam sistem informasi, karena database merupakan kumpulan dari beberapa file, dalam hal ini file-file tersebut dikelompokkan secara terstruktur dalam beberapa tabel sesuai dengan informasi yang terkandung didalamnya. Berikut rancangan tabel yang penulis gunakan dalam membangun sistem informasi : 1.Tabel Admin Nama Field Tipe Data Auto-Increment (AI) Indeks Username Varchar(50) - - Password Varchar (50) - Primary Email Varchar (50) - - Nama_Lengkap Varchar (50) - - Tabel 3.5.1 Tabel Admin 2. Tabel Kategori Nama Field Tipe Data Auto-Increment (AI) Indeks

Id_Kategori Integer (5) Ya - Nama_kategori Varchar (100) - Primary Kategori_Seo Varchar (100) - Parimary Tabel 3.5.2 Tabel Kategori 3. Tabel Komentar Nama Field Tipe Data Auto-Increment (AI) Indeks Id_komentar Int (5) Ya - Id_Item Int (5) - Primary Nama_Komentar Varchar(100) - Primary Url Varchar (100) - Primary Isi_Komentar Varchar (100) - - Tanggal Date - Primary Jam_Komentar Time - Primary Aktif Enum( Y,N ) - Primary Tabel 3.5.3Tabel Komentar 4.Tabel Main Menu

Nama Field Tipe Data Auto-Increment (AI) Indeks Id_Main Int (5) Ya - Nama_Menu Varchar (50) - Primary Link Varchar(100) - Primary Aktif Enum( Y,N ) - Primary Tabel 3.5.4 Main Menu 5.Tabel Main Modul Nama Field Tipe Data Auto-Increment (AI) Indeks Id_Modul Int (5) Ya - Nama_Modul Varchar (50) - Primary Link Varchar(100) - Primary Static_Cotent Text - - Gambar Varchar(100) - Primary Status Enum( user, admin ) - Primary Aktif Enum( Y,N ) - Primary Urutan Int(5) - Primary

Tabel 3.5.5 Tabel Modul 6.Tabel Item Nama Field Tipe Data Auto-Increment (AI) Indeks Id_Item Int (5) Ya - Id_kategori Int(5) - Primary Nama_Item Varchar(50) - Primary Item_Seo Varchar(50) - Primary Deskripsi Text - - Tanggal_masuk Date - Primary Gambar Varchar(100) - Primary Tabel 3.5.6 Tabel Item 7.Tabel Sub Item Nama Field Tipe Data Auto-Increment (AI) Indeks Id_Sub Int (5) Ya - Nama_Sub Varchar(50) - Primary Link_Sub Varchar(50) - Primary

Id_Main Varchar(50) - Primary Tabel 3.5.7 Tabel Sub Item 8.Tabel Sub Item Nama Field Tipe Data Auto-Increment (AI) Indeks Id_SubItem Int (5) Ya - Id_Item Int(5) - Primary Gambar Varchar(100) - Primary Tabel 3.5.8 Tabel Sub Item

BAB 4 IMPLEMENTASI SISTEM 4.1 Pengertian Implementasi Sistem Implementasi sistem adalah langkah-langkah atau prosedur-prosedur yang dilakukan dalam menyelesaikan desain sistem yang ada dalam rancangan sistem yang telah ditetapkan dan disetujui seperti menginstal, menguji sistem yang dibuat dan memulai sistem yang baru. 4.2. Tujuan Implementasi Sistem Adapun tujuan-tujuan dari implementasi sistem yaitu: a. Menyelesaikan desain sistem yang telah ditetapkan dan disetujui sebelumnya. b. Memastikan bahwa pemakai (user) dapat mengoperasikan sistem dengan mudah sehingga mendapat informasi yang baik dan jelas. c. Menguji apakah sistem tersebut sesuai dengan permintaan pemakai (user). d. Memastikan bahwa konversi ke sistem baru telah berjalan dengan baik dan lancar dengan membuat rencana, mengontrol dan melakukan instalasi secara benar.

4.3. Komponen-Komponen Kebutuhan Sistem Untuk menunjang penerapan sistem yang dirancang, dibutuhkan komponenkomponen yang sangat berperan terhadap kebutuhan sistem. Berikut beberapa komponen yang dibutuhkan sistem agar dapat beroperasi dengan baik. 4.3.1.Hardware Komponen ini merupakan komponen pertama yang sangat diperlukan dalam mewujudkan sistem yang diusulkan. Dalam hal ini penulis merincikan spesifikasi hardware yang dianjurkan adalah sebagai berikut: a. Personal Computer dengan processor Intel Pentium IV 1.8 GHz atau setara. b. Memori RAM 256 MB atau lebih. c. Kapasitas Harddisk minimal 5 GB d. Microsoft Windows 2000 atau XP Home e. Microsoft Windows XP Professional (lebih disarankan) f. Monitor Super VGA, Keyboard dan Mouse 4.3.2.Software

Dengan adanya fasilitas 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 XP b. Macromedia Dreamweaver c. XAMPP 4.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 pemrograman PHP dan MySQP serta jalannya sistem. Sedangkan user adalah pengguna website itu sendiri. User tidak harus mengerti tentang bahasa pemrograman tersebut karena user hanyalah pengguna dan hanya cukup mampu mengoperasikan internet browser. 4.4.Tampilan Halaman Website Pada tampilan awal menu, kita akan dihadapkan pada beberapa pilihan pariwisata yang akan kita lihat. Untuk lebih jelasnya dapat dilihat pada Gambar 4.1. Untuk menjalankan sistem gunakan web browser firefox atau Google Crome dan ketikkan pada addres bar http//localhost/tugasakhir/index.php. Halaman utama sistem tersebut seperti pada gambar berikut:

Gambar 4.1 Halaman Utama Web

Gambar 4.2 Halaman Home Batubara

Gambar 4.3 Halaman Kategori Gambar 4.4 Halaman Detail Sub Kategori

Gambar 4.5 Halaman Tentang Web Gambar 4.6 Halaman Menu Galeri

Gambar 4.7 Halaman Contact Gambar 4.8 Halaman Login

Gambar 4.9 Halaman Sign Up Gambar 4.10 Halaman Log In Admin

Gambar 4.11 Halaman Home Admin

BAB 5 KESIMPULAN DAN SARAN 5.1 Kesimpulan Dalam penulisan tugas akhir ini telah diuraikan bagaimana perancangan sistem dalam pembangunan website Pariwisata Kabupaten Batubara, maka penulis dapat membuat kesimpulan sebagai berikut: 1. Dalam membuat website yang dinamis menggunakan Aapache sebagai web server, PHP sebagai web scripting dan MySQL sebagai database. 2. Sebuah website dinamis adalah website yang secara berkala informasi didalamnya dapat diperbaharui. 3. Pembuatan suatu aplikasi website dapat dilakukan di komputer lokal tanpa terkoneksi ke internet yaitu dengan menggunakan web server Apache. 4. Situs Pariwisata Batubara ini adalah sarana informasi online yang bisa diakses oleh siapapun juga, baik dari pihak Dinas Pariwisata Batubara, masyarakat Batubara maupun masyarakat dari mancanegara. 5.2 Saran

1. Diharapkan partisipasi dari pihak Dinas Pariwisata Batubara dalam memelihara dan memperbaharui data dan informasi di dalam website Pariwisata Batubara. 2. Isi situs website seharusnya diperbaharui oleh admin secara berkala guna memberian informasi yang terbaru dan tercepat. 3. Kecepatan dalam membuka halaman website Pariwisata Batubara perlu diperhatikan, agar pengunjung tidak merasa bosan karena harus menunggu lama untuk membuka halaman website.

DAFTAR PUSTAKA Mohamad Subhan dalam bukunya yang berjudul Analisa Perancangan Sistem https://1nuy4s4.wordpress.com/pengertian-jaringan-komputer/ https://idcloudhost.com/pengertian-web-server-dan-fungsinya/ http://www.cuthawe.com/2016/02/pengertian-fungsi-dan-cara-kerja-css.html http://pemulabelajar.com/2016/03/pengertian-sublime-text-editor.html expresisastra.blogspot.co.id/pengertian-metode-dan-metodologi-penelitiandan-perbedaannya.html. http://infokomputerrakitan.blogspot.co.id/2015/05/pengertian-komputermenurut-para-ahli.html http://www.nesabamedia.com/pengertian-fungsi-dan-manfaat-internetlengkap/ http://www.duniailkom.com/pengertian-dan-fungsi-php-dalam-pemogramanweb/ http://www.pro.co.id/kegunaan-dan-fungsi-simbol-simbol-flowchart-padapembuatan-sistem/

LISTING PROGRAM 1. INDEX.PHP <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link href="css/metro-bootstrap.css" rel="stylesheet"> <link href="css/metro-bootstrap-responsive.css" rel="stylesheet"> <link href="css/iconfont.css" rel="stylesheet"> <link href="css/docs.css" rel="stylesheet"> <link href="scroll-persen.css" rel="stylesheet">  <script src="js/jquery/jquery.min.js"></script> <script src="js/jquery/jquery.widget.min.js"></script> <script src="js/jquery/jquery.mousewheel.js"></script> <script src="scroll-persen.js"></script>  <script src="js/load-metro.js"></script> <script src="js/docs.js"></script> <style> </style> <title>selamat Datang di Website Kami</title>

</head> <body class="metro"><div id="scroll"> <header class="bg-darkcobalt" data-load ="atasan.php"> </header> <div class="" data-load="sampul.html"><br /> <div class="container" data-load="beranda.php"> </body> </html> <footer class="dark" data-load="bawahan.html"></footer> 2. BERANDA.PHP <?php include "config/koneksi.php";?> <div class="container"> <div class="grid"> <div class="row"> <div class="border padding20 span10" style= "backgroundcolor: #F5F5F5;"> <div class="panel no-border"> <?php $comot= mysql_query("select * FROM setup_dasboard ORDER BY id_dasboard DESC LIMIT 3"); while($ngisi= mysql_fetch_array($comot)){?> <div class="panel-header ribbed-amber fg-white"> <strong> <?php echo $ngisi['nama'];?></strong> <?php <div class="panel-content fg-dark nlp nrp">

if ($ngisi['gambar']!=""){?> <img src= "images/ <?php echo $ngisi['gambar'];?>" class= "place-right margin10 nlm ntm size3"> <?php }?> <?php echo $ngisi['konten'];?> <?php }?> <div class="padding20 span4" style="background-color: #F1F1F1;"> <div class="panel no-border"> <div class="panel-header ribbed-cyan fg-white"> Waktu Sekarang <div class="panel-content fg-dark nlp nrp"> <center><div class="calendar" data-role= "calendar"> </center> <br /> <div class="times" data-role="times" data-style-background="bglightblue" data-style-divider="fg-lightblue"> <div class="panel no-border"> <div class="panel-header ribbed-cyan fg-white" >Komentar <div class="panel-content fg-dark nlp nrp"> <div id="komenlist" class="border" data-role= "scrollbox" datascroll="vertical"> <?php $comot_komen = mysql_query("select * FROM komentar ORDER BY id_komentar DESC LIMIT 5"); while($ngisi_komen = mysql_fetch_array($comot_komen)){

$thn=substr($ngisi_komen['waktu'],0,4); $bln=substr($ngisi_komen['waktu'],5,2); $tgl=substr($ngisi_komen['waktu'],8,2); $jam=substr($ngisi_komen['waktu'],11,8); if($bln==1){ $x="jan"; } else if($bln==2){ $x="feb"; } else if($bln==3){ $x="mar"; } else if($bln==4){ $x="apr"; } else if($bln==5){ $x="mei"; } else if($bln==6){ $x="jun"; } else if($bln==7){ $x="jul"; } else if($bln==8){ $x="agu"; } else if($bln==9){ $x="sep"; } else if($bln==10){ $x="okt"; } else if($bln==11){ $x="nov"; } else{ $x="des"; } echo "<p class='text-info'><strong>".$ngisi_komen['nama']."</strong> <em>says </em> :"; echo "<br><small>".$jam.", ".$tgl."&nbsp".$x."&nbsp".$thn." </small></p>"; echo "<p class='tertiary-text-secondary'><em>".$ngisi_komen ['komentar']."</em></p>"; }?> echo "<br />"; <script> $(function(){ $("#komenlist").scrollbar({

height: 300, axis: 'y' }); }); </script> <form method="post" action="kirimkomentar.php"> <fieldset> <div class="input-control text" data-role="input-control"> <input type="text" name="nama" required placeholder= Nama:" > "Input <button class="btn-clear" tabindex="-1"></button> <div class="input-control textarea" data-role="input-control" placeholder="tuliskan komntar disini!"> <textarea name="komentar" rows=3></textarea> <input name="tambah" type="submit" value="kirim" class="bg-dark fgwhite" data-hint="silahkan tinggalkan komentar"> </fieldset> </form> <div class="panel no-border"> <div class="panel-header ribbed-cyan fg-white" >Slider <div class="panel-content fg-dark nlp nrp"> <div class="tile double live" data-role="live-tile"> <div class="tile-content image"> <img src="images/galeri/batubara2.jpg" class= "cover1" /> <div class="tile-content image"> <img src="images/galeri/batubara3.jpg" class= "cover1" />

<div class="tile-content image"> <img src="images/galeri/batubara5.jpg" class= "cover1"/> <div class="tile-content image"> <img src="images/galeri/rumahadat.jpg" class= "cover1" /> 3. STYLE.CSS body { height: 100%; margin: 0; padding: 0; }.metro.page { width: 980px; margin: 0 auto; padding: 0 20px; }.description { margin: 10px 0; }.show-grid.row [class*="span"] { line-height: 40px; background: rgba(193, 179, 123, 0.52); text-align: center; min-height: 10px!important; }.color-stack li, #icon-list li {

margin-bottom: 5px; }.example > img { margin: 5px; display: inline-block; }.example.image-container { margin: 10px; display: inline-block; vertical-align: middle; }.layout { min-height: 100%; position: relative; } header { height: 45px; position: relative; } footer { width: 100%; height: 25px; } @media only screen and (max-width: 640px) {.prettyprint,.example { display: none; } } 4. GALERI.PHP <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset =utf-8" /> <link href="css/metro-bootstrap.css" rel="stylesheet"> <link href="css/metro-bootstrap-responsive.css" rel="stylesheet"> <link href="css/iconfont.css" rel="stylesheet"> <link href="css/docs.css" rel="stylesheet">

<div class="slide"> <img src="images/galeri/pantaijono3.jpg" class="cover1"/> <div class="slide"> <img src="images/galeri/pantaijono4.jpg" class="cover1" /> <div class="slide"> <img src="images/galeri/pantaijono5.jpg" class="cover1" /> <div class="span7"> <legend>galeri Pantai Bunga</legend> <div class="carousel" id="imgslide1"> <div class="slide"> <img src="images/galeri/pantai bunga.jpg" class="cover1" /> <div class="slide"> <img src="images/galeri/batubara5.jpg" class="cover1" /> <div class="border padding15"> <div class="row"> <div class="span7"> <legend>galeri Pulau Salah Namo</legend> <div class="carousel" id="imgslide2">

<div class="slide"> <img src="images /galeri/pulau salah namo1.jpg" class="cover1" /> <div class="slide"> <img src="images/galeri/pulausalahnama2.jpg" class="cover1"/> <div class="slide"> <img src="images/galeri/pulausalahnama3.jpg" class="cover1" /> <div class="slide"> <img src="images/galeri/pulausalahnama4.jpg" class="cover1" /> <div class="span7"> <legend>galeri Pantai Datuk</legend> <div class="carousel" id="imgslide3"> <div class="slide"> <img src="images/galeri/pantaidatuk1.jpg" class="cover1" /> <div class="slide"> <img src="images/galeri/pantaidatuk2.jpg" class="cover1" /> <div class="slide"> <img src="images/galeri/pantaidatuk3.jpg" class="cover1" />

<div class="border padding15"> <div class="row"> <div class="span7"> <legend>galeri Danau Laut Tador</legend> <div class="carousel" id="imgslide4"> <div class="slide"> <img src="images/galeri/danau tador1.jpg" class="cover1" /> <div class="slide"> <img src="images/galeri/danaulauttador2.jpg" class="cover1" /> <div class="span7"> <legend>galeri Pulau Pandang</legend> <div class="carousel" id="imgslide5"> <div class="slide"> <img src="images/galeri/pulaupandang1.jpg" class="cover1" /> <div class="slide"> <img src="images/galeri/pulaupandang4.jpg" class="cover1" /> <div class="slide"> <img src="images/galeri/pulaupandang3.jpg" class="cover1" /> <div class="border padding15">

<div class="row"> <div class="span7"> <legend>galeri Pantai Bogak</legend> <div class="carousel" id="imgslide6"> <div class="slide"> <img src="images/galeri/pantaibogak4.jpg" class="cover1" /> <div class="slide"> <img src="images/galeri/pantaibogak3.jpg" class="cover1"/> <div class="slide"> <img src="images/galeri/pantaibogak2.jpg" class="cover1" /> <footer class="dark" data-load="bawahan.html"></footer> <script> $(function(){ $("#imgslide").carousel({ effect: 'slide', period: 3000, markers: { show: true, type: 'default', position: 'bottom-right' } });

$("#imgslide1").carousel({ effect: 'fade', period: 3000, markers: { show: true, type: 'default', position: 'bottom-right' } }); $("#imgslide2").carousel({ effect: 'slowdown', period: 3000, markers: { show: true, type: 'default', position: 'bottom-right' } }); $("#imgslide3").carousel({ effect: 'switch', period: 3000, markers: { show: true, type: 'default', position: 'bottom-right' } }); $("#imgslide4").carousel({ effect: 'switch', period: 3000, markers: {

show: true, type: 'default', position: 'bottom-right' } }); $("#imgslide5").carousel({ effect: 'switch', period: 3000, markers: { show: true, type: 'default', position: 'bottom-right' } }); $("#imgslide6").carousel({ effect: 'switch', period: 3000, markers: { show: true, type: 'default', position: 'bottom-right' } }); }) </script> </body> </html> 5. CONTACT.PHP CONTACT

<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link href="css/metro-bootstrap.css" rel="stylesheet"> <link href="css/metro-bootstrap-responsive.css" rel="stylesheet"> <link href="css/iconfont.css" rel="stylesheet"> <link href="css/docs.css" rel="stylesheet">  <script src="js/jquery/jquery.min.js"></script> <script src="js/jquery/jquery.widget.min.js"></script> <script src="js/jquery/jquery.mousewheel.js"></script>  <script src="js/load-metro.js"></script>  <script src="js/docs.js"></script> <style> </style> <title>contact</title> </head> <body class="metro"> <header class="bg-darkcobalt" data-load="atasan.php"></header> <div class="" data-load="slider.php">

<br />  <div class="container"> <div class="panel" data-role="panel"> <div class="panel-header bg-darkred fg-white"> Contact <div class="panel-content"> <?php include "config/koneksi.php"; $comot=mysql_query("select * FROM contact LIMIT 1"); $ngisi= mysql_fetch_array($comot);?> <div class="grid"> <div class="row"> <div class="span4"> <table class="table hovered"> <tbody> <tr class=""><td>alamat</td><td class="right"><?php echo $ngisi['alamat'];?></td></tr> <tr class=""><td>kota</td><td class="right"><strong><?php echo $ngisi['kota'];?></strong></td></tr> <tr class=""><td>e-mail</td><td class="right"><strong><?php echo $ngisi['email'];?></strong></td></tr> <tr class=""><td>telepon</td><td class="right"><strong><?php echo $ngisi['no_tlp'];?></strong></td></tr> <tr class=""><td>handphone</td><td class="right"><strong> <?php echo $ngisi['no_hp'];?></strong></td></tr> </tbody> </table>

<div class="span8"> <p><?php echo $ngisi['content'];?></p>  </body> </html> <br /> <footer class="dark" data-load="bawahan.html"></footer> 6. BATUBARA.PHP <?php include "config/koneksi.php";?> <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link href="css/metro-bootstrap.css" rel="stylesheet"> <link href="css/metro-bootstrap-responsive.css" rel= "stylesheet"> <link href="css/iconfont.css" rel="stylesheet"> <link href="css/docs.css" rel="stylesheet"  <script src="js/jquery/jquery.min.js"></script> <script src="js/jquery/jquery.widget.min.js"></script> <script src="js/jquery/jquery.mousewheel.js"></script>  <script src="js/load-metro.js"></script>

<script src="js/docs.js"></script> <style> </style> <title>tentang Batubara</title> </head> <body class="metro"> <header class="bg-darkcobalt" data-load="atasan.php"></header> <div class="" data-load="sampul.html"> <br />  <div class="container row"> <div class="grid fluid"> <div class="border padding20"> <?php if($_get['post']=='profil'){ $is="profil"; }else if($_get['post']=='sejarah'){ $is="sejarah"; }else if($_get['post']=='wisata'){ $is="pariwisata yang ada di"; }else if($_get['post']=='kuliner'){ $is="kuliner khas di"; }else if($_get['post']=='budaya'){ $is="kebudayaan"; }?> <legend class="text-right"><h2><?php echo $is;?> Batubara </h2> </legend> <?php $comot=mysql_query("select * FROM setup_batubara where kat_batubara= '$_GET[post]'"); while($ngisi= mysql_fetch_array($comot)){ if ($ngisi['judul_batubara']!=""){?> <div class="span4"> <legend><h3><?php echo $ngisi['judul_batubara'];?></h3></legend> <?php } echo $ngisi['konten_batubara']; echo "<br />"; }