universitas sumatera utara fakultas matematika dan …

SISTEM INFORMASI OBJEK WISATA DI KABUPATEN

SIMALUNGUN BERBASIS WEB

TUGAS AKHIR

TULUS ROMASTON PURBA

132406134

PROGRAM STUDI D3 TEKNIK INFORMATIKA

DEPARTEMEN MATEMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGEAHUAN ALAM

UNIVERSITAS SUMATERA UTARA

MEDAN

2016

2

SISTEM INFORMASI OBJEK WISATA DI KABUPATEN

SIMALUNGUN BERBASIS WEB

TUGAS AKHIR

Diajukan untuk melengkapi dan memenuhi syarat memperoleh Ahli

Madya


132406134


DEPARTEMEN MATEMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGEAHUAN ALAM


MEDAN

2016

3

PERSETUJUAN

Judul : SISTEM INFORMASI OBJEK WISATA DI

KABUPATEN SIMALUNGUN BERBASIS

WEB

Kategori : Tugas Akhir

Nama : Tulus Romaston Purba

Nomor Induk Mahasiswa : 132406134

Program Studi : Diploma 3 Teknik Informatika

Departemen : Matematika

Fakultas : Matematika Dan Ilmu Pengetahuan Alam

Universitas Sumatera Utara.

Disetujui di

Medan, Juni 2016

Disetujui Oleh

Program Studi D3Teknik Informatika FMIPA USU Pembimbing,

Ketua,

Dr. Elly Rosmaini, M.Si. Drs. Marihat Situmorang, M.Kom

NIP 196 005 201 985 032 002 NIP 196 312 141 989 031 001

4

PERNYATAAN

SISTEM INFORMASI OBJEK WISATA DI KABUPATEN SIMALUNGUN

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, Juni 2016


132406134

PENGHARGAAN

5

Puji syukur penulis panjatkan kepada Tuhan Yang Maha Esa atas berkat dan

kasih-Nya sehingga laporan Tugas Akhir ini dapat diselesaikan dengan baik dan

dalam waktu yang telah ditetapkan.

Penulisan Tugas Akhir ini merupakan salah satu syarat untuk

menyelesaikan pendidikan D-3 Teknik Informatika Fakultas Matematika dan Ilmu

Pengetahuan Alam Universitas Sumatera Utara.

Dalam penyusunan Tugas Akhir ini, penulis mendapatkan bantuan,

dorongan dan motivasi baik secara langsung maupun tidak, dalam merancang

aplikasi berbasis website ini, maka dari pada itu penulis mengucapkan terima

kasih kepada:

1. Tuhan Yang Maha Esa, atas Berkat dan karuniaNya sehingga penulis

dapat menyelesaikan tugas akhir ini dengan tepat waktu.

2. Orang Tua, Terkhusus penulis ucapkan terima kasih kepada kedua orang

tua penulis, serta seluruh keluarga penulis yang telah banyak memberi doa

dan dukungan materi maupun non materi sehingga tugas akhir ini dapat

terselelsaikan serta kasih sayang yang berlimpah untuk penulis.

3. Bapak Dr. Kerista Sebayang, M.S.i selaku Dekan Fakultas Matematika

dan Ilmu Pengetahuan Alam Universitas Sumatera Utara.

6

4. Bapak Drs.Marihat Situmorang, M.Kom selaku Pembimbing penulis

yang selalu memberi masukan baik kritik dan saran kepada penulis selama

pembuatan tugas akhir dari awal hingga selesai.

5. Bapak Prof. Dr. Tulus, M.Si selaku Ketua Departemen Fakultas

Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera Utara.

6. Ibu Dr. Elly Rosmaini, M.Si selaku Ketua Program Studi D-3 Teknik

Informatika Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas

Sumatera Utara.

7. Seluruh dosen pengajar Program Studi D-3 Teknik Informatika Fakultas

Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera Utara.

8. Seluruh Staff/Pegawai Fakultas MIPA Universitas Sumatera Utara

khususnya Program Studi D-3 Teknik Informatika.

9. Kepada Dinas Pariwisata Pemuda dan Olahraga Pemerintahan Kabupaten

Simalungun yang bersedia memberikan data data Objek Wisata yang

berada di Kabupaten Simlungun.

10. Buat teman-teman seperjuangan mahasiswa D3 Teknik Informatika yang

tidak dapat saya sebutkan satu per satu. Terima kasih atas dukungannya

dalam membantu menyelesaikan tugas akhir ini.

11. Kom C 2013 Program studi D-3 Teknik Informatika

12. Basri sembiring,Daniel sijabat,Firnando Silalahi,Buha Sinaga,Lewin

Hutasoit,Chrisnoel,Amron Togatorop,Castran Manik,Tumona Sinaga

sebagai sahabat terbaik.

13. Teman Saya Cahaya Romaito Manik yang turut membantu saya dalam

mengerjakan Tugas Akhir ini.

7

14. Chrisnoel Dirgantara,Buha Sinaga,Firnando Silalahi,Niusantija

Sitinjak,Anna Manurung,Obi Candra Aruan,Wiro

Batubara,Linggom Purba dan Michael juan sebagai rekan bimbingan

tugas akhir

Semoga tulisan ini bermanfaat bagi pembaca dan penulis, serta dapat memotivasi

kita untuk meningkatkan ilmu pengetahuan sebagai bekal di masa yang akan

datang.

8

ABSTRAK

Website adalah salah satu system informasi yang dapat dengan mudah diakses melalui jaringan

internet. Dalam perancangan suatu system informasi diperlukan data dan informasi yang akurat

agar system informasi yang dirancang dapat memenuhi kebutuhan yang sesuai dengan keinginan

pengguna.Pembuatan website ini bertujuan untuk memudahkan masyarakat untuk mendapatkan

informasi mengenai objek wisata Simalungun.Website

inidikembangkanmenggunakanbahasapemrograman PHP dan MYSQL

sebagaidatabasenya.Untukitupenulisakanmembahas“SistemInformasiObjekWisata Di

KabupatenSimalungunBerbasis Web” .

9

DAFTAR ISI

..................................................................................................................... Halaman

Persetujuan ............................................................................................................... i

Pernyataan ............................................................................................................... ii

Penghargaan ........................................................................................................... iii

Abstrak ................................................................................................................... vi

Daftar Isi................................................................................................................ vii

Bab 1. Pendahuluan ....................................................................................................

1.1 Latar Belakang ....................................................................................... 1

1.2 Perumusan Masalah ................................................................................ 2

1.3 Batasan Masalah ..................................................................................... 2

1.4 Tujuan Penulisan .................................................................................... 3

1.5 Manfaat .................................................................................................. 3

1.6 Metodologi Penelitian ............................................................................ 3

1.7 Sistematika Penulisan ............................................................................. 4

Bab 2. Landasan Teori ...............................................................................................

2.1 Pengertian Komputer .............................................................................. 5

2.1.1 Sejarah Komputer ......................................................................... 6

2.1.2 Jenis-jenis Komputer .................................................................... 8

2.2 Pengertian Sistem ................................................................................. 11

2.3Sistem Komputer 12

2.3.1 Sistem Informasi ....................................................................... 13

2.3.2 Sistem Informasi Berbasis Web 14

2.4 Syarat-syarat Merancang Sistem Informasi Berbasis Web ................. 15

2.5 Pengertian Internet ............................................................................... 16

2.5.1 Sejarah Internet 18

2.6 Web Server ........................................................................................... 19

2.7 Hyper Text Markup Language (HTML) .............................................. 20

2.8 Personal Home Page (PHP) .................................................................. 21

2.8.1 Sejarah PHP 21

2.8.2 Kelebihan dan Kelemahan PHP 23

2.9 Xampp ................................................................................................ 24

2.10MySql ........................................................ 26

2.10.1 Sejarah MySql 27

2.10.2 Pengertian Sql 29

2.11 Cascading Style Sheet (CSS) 29

2.12 Dreamweaver 30

Bab 3. Perancangan Sistem ........................................................................................

3.1 Perancangan Sistem .............................................................................. 32

3.2 Metode Pengembangan Sistem ............................................................ 32

10

3.3 Hasil Perancangan 33

3.3.1 Bagan Berjenjang 33

3.3.2 Data Flow Diagram 33

3.3.3 Diagram Alir (Flowchart) 35

3.3.4 Perancangan Database 36

3.4 Rancangan Antarmuka (Interface ) 37

3.5 Algoritma 38

Bab 4. Implementasi Sistem .......................................................................................

4.1 Implementasi Sistem ............................................................................ 40

4.1.1 Tujuan Implementasi Sistem ...................................................... 40

4.2 Komponen Utama Dalam Sistem ........................................................ 40

4.3 Demonstrasi Program 42

4.3.1 Halaman Utama 42

4.3.2 Halaman About 43

4.3.3 Halaman Wisata 43

4.3.4 Halaman Galery 44

4.3.5 Halaman Admin 44

Bab 5. Kesimpulan Dan Saran ...................................................................................

5.1 Kesimpulan ........................................................................................... 46

5.2 Saran ..................................................................................................... 46

Daftar Pustaka

Lampiran

11

BAB 1

PENDAHULUAN

1.1 Latar Belakang

Perkembangan teknologi informasi dan teknologi komputer berkembang dengan

sangat pesat. Kebutuhan akan itu pun semakin diminati oleh semua kalangan

masyarakat, baik masyarakat awam maupun kaum intelektual. Hal ini berkaitan

dengan kegiatan-kegiatan yang dilakukan oleh manusia yang biasanya dilakukan

secara manual dan konvensional akan semakin lebih efisien dan efektif dan tepat

jika dilakukan dengan bantuan mesin yaitu teknologi komputer. Dengan

penggunaan teknologi dapat memudahkan pengguna user dalam menjalankan

tugas dengan komputer.

Pada zaman yang semakin berkembangan ini, kemajuan teknologi yang

pesat menimbulkan berbagai macam kegiatan yang dapat dilakukan. Dari

kecanggihan tersebut berbagai informasi dapat kita peroleh. Yang kita cari

misalnya website tentang objek wisata sebagai salah satu tugas dalam penentuan

kelulusan. Dengan adanya website ini, kita dapat mengetahui tentang objek wisata

dan memberitahukan kepada masyarakat luas dengan berbagai informasi tentang

wisata yang berada di sebuah daerah. Dalam website ini membantu kita untuk

mengetahui setiap wisata di Simalungun.

12

Melihat hal itu penulis ingin membuat website tentang objek wisata agar

masyarakat tau objek wisata yang berada di daerah. Sehingga untuk memberitahu

pemakaian di atas penulis akan membuat tugas akhir dengan judul :

“SISTEM INFORMASI OBJEK WISATA DI KABUPATEN SIMALUNGUN

BERBASIS WEB”.

1.2 Rumusan Masalah

Sehubungan dengan uraian yang telah dijelaskan sebelumnya bahwa pembuatan

web tentang objek wisata agar masyarakat tau tentang wisata yang berada di

Simalungun. Dan mengajak masyarakat untuk lebih mengenal tentang

Simalungun.

1.3 Batasan Masalah

Web ini dibuat menggunakan aplikasi menggunakan Dreamweaver dikarenakan

aplikasi ini digunakan untuk membuat website secara utuh bedasarkan design

view,header dan template sendiri. Kehandalan dari Dreamweaver sendiri yaitu

kemudahan dalam membuat dan mendesain website tanpa harus menulis tag-tag

HTML satu persatu walalupun program ini tetap bisa digunakan untuk mendesain

website menggunakan kode-kode tersebut karena pada saat membuat program

dapat dibagi mejadi tampilan design, tampilan, kode, atau dua-duanya. Cakupan

web objek wisata di Simalungun ini ialah untuk mengajak masyarakat agar tau

tentang wisata yang berada di Simalungun.

13

1.4 Tujuan Penulisan

Tujuan dalam pembuatan web objek wisata ini adalah:

1. Sebagai syarat untuk penyelesaian tugas akhir kelulusan program D3

Teknik Informatika Universitas Sumatera Utara.

2. Menghasilkan suatu pengetahuan yang berisi tentang objek wisata di

Simalungun kepada masyarakat luas untuk lebih mengenali tentang wisata

dan Simalungun.

1.5 Manfaat

Manfaat yang diperoleh dari website Objek Wisata ini :

1. Memberikan kemudahan bagi masyarakat untuk mendapatkan informasi

objek wisata di Simalungun.

2. Memberikan kemudahan dalam pengaksesan informasi Objek Wisata

sehingga dapat dilakukan dimana saja.

1.6 Metodologi Penelitian

Metodologi penelitian yang digunakan penulis untuk menyelesaikan permasalah

yang terjadi di atas adalah :

a. Pengumpulan data yang erat kaitannya dengan permasalahan dengan cara

membaca buku-buku, makalah dan membaca bahan-bahan sumber lainnya di

website .

b. Mencari beberapa referensi mengenai website dalam pembuatan web dan

bahan-bahan mengenai objek wisata di Simalungun.

14

1.7 Sistematika Penulisan

Agar dapat memberikan gambaran yang jelas pada penulisan Tugas Akhir ini,

maka penulis membaginya dalam beberapa bab sebagai berikut:

BAB 1 : PENDAHULUAN

Menjelaskan mengenai latar belakang, rumusan masalah, batasan

masalah, tujuan penulisan, manfaat, dan sistematika penulisan.

BAB 2 : LANDASAN TEORI

Berisi mengenai teori-teori yang akan menjadi acuan dalam penulisan

serta dapat mendukung dalam penyusunan laporan Tugas Akhir ini.

BAB 3 : PERANCANGAN SISTEM

Berisi tentang prosedur perancangan teknik dan pembuatan rancangan

sistem aplikasi yang akan dibuat.

BAB 4 : IMPLEMENTASI SISTEM

Berisi tentang bentuk implementasi dan pengujian sistem aplikasi

yang telah dibuat.

BAB 5 : KESIMPULAN DAN SARAN

Berisi kesimpulan dari hasil laporan Tugas Akhir, serta berisi saran-

saran dari seluruh permasalahan yang dibahas

BAB 2

LANDASAN TEORI

2.1 Pengertian Komputer

Komputer adalah alat yang dipakai untuk mengolah data menurut prosedur yang

telah dirumuskan. Kata computer semula dipergunakan untuk menggambarkan

orang yang perkerjaannya melakukan perhitungan aritmatika, dengan atau tanpa

alat bantu, tetapi arti kata ini kemudian dipindahkan kepada mesin itu sendiri.

Asal mulanya, pengolahan informasi hampir eksklusif berhubungan dengan

masalah aritmatika, tetapi komputer modern dipakai untuk banyak tugas yang

tidak berhubungan dengan matematika.

Dalam arti seperti itu terdapat alat seperti slide rule, jenis kalkulator

mekanik mulai dari abakus dan seterusnya, sampai semua komputer elektronik

yang kontemporer. Istilah lebih baik yang cocok untuk arti luas seperti

"komputer" adalah "yang mengolah informasi" atau "sistem pengolah

informasi." Selama bertahun-tahun sudah ada beberapa arti yang berbeda dalam

kata "komputer", dan beberapa kata yang berbeda tersebut sekarang disebut

disebut sebagai komputer.

Kata computer secara umum pernah dipergunakan untuk mendefiniskan

orang yang melakukan perhitungan aritmatika, dengan atau tanpa mesin

16

pembantu. Menurut Barnhart Concise Dictionary of Etymology, kata tersebut

digunakan dalam bahasa Inggris pada tahun 1646 sebagai kata untuk "orang

yang menghitung" kemudian menjelang 1897 juga digunakan sebagai "alat

hitung mekanis". Selama Perang Dunia II kata tersebut menunjuk kepada para

pekerja wanita Amerika Serikat dan Inggris yang pekerjaannya menghitung jalan

artileri perang dengan mesin hitung.

2.1.1 Sejarah Komputer

Sejarah komputer yang perlu untuk diketahui secara detail. Sejarah

perkembangan komputer berawal dari penemuan seorang yang bernama Charles

Babbage. Dia adalah seorang ilmuwan di dunia yang telah banyak memberikan

kontribusi bagi kehidupan manusia, terutama perkembangan komputer.

Penemuan fenomenalnya yaitu Mesin penghitung (Difference Engine

no.1) merupakan salah satu penemuan yang paling terkenal dalam sejarah

perkembangan komputer dan merupakan kalkulator otomatis pertama sebagai

cikal bakal kompuer. Penemuan tersebut menjadikan Charles Babbage sebagai

penemu konpur dan dijuluki sebagai bapak komputer.

Berikut ini sejarah komputer dan perkembanganya:

a. 1822: Charles Babbage mengemukakan idenya yaitu sebuah alat yang

dapat membantu manusia dalam melakukan penghitungan pada tingkat

kompleksitas yang tinggi dan rumit. Mesin buatanya yang belum selesai

tersebut saat ini di musiumkan di Museum of Science London.

17

b. 1937: Dr. John V Atanasoff dan Clifford Berry mulai membuat design

komputer digital elektronis pertama. Mereka memberi nama mesin

tersebut ABC (Atanasoff-Berry Computer). Kemampuan mesin ABC

tersebut hanya sebatas menghitung tambah dan pengurangan.

c. 1943: Pada Perang Dunia 2, Seorang ilmuwan Inggris yang bernama

Alan Turing mendesain komputer elektronik yang dibuat khusus bagi

tentara Inggris. Tujuan pembuatan komputer tersebut agar dapat

digunakan untuk menembus kode pertahanan Jerman.

d. 1944: Howard Hathaway Aiken (Amerika) membuat yang diberi nama

Mark I. Merupakan sebuah komputer hitung digital pertama. Komputer

tersebut memiliki luas 7,45 kaki x 50 kaki, dengan berat 35 ton. Mark I

sudah dapat digunakan untuk menghitung probabilitas.

e. 1945: Dr. John von Neumann menulis sebuah konsep penyimpanan data.

Pada saat itu masih berupa ide.

f. 1946: Dr. John W. Mauchly dan J. Presper Eckert, jr. membuat komputer

skala besar yang pertama, nama komputer tersebut adalah ENIAC

(Electronic Numerical Integrator And Computer). Dunia juga

beranggapan kedua orang ini sebagai penemu komputer digital. ENIAC

komputer memiliki berat 30 ton, terdiri dari 18.000 lampu tabung

(transistor ukuran besar), dengan lebar 30 kaki x 50 kaki, memakai

tenaga 160.000 watt. Saat pertamakali dioperasikan Pertama seluruh

18

jaringan listrik di wilayah Philadelphia mendadak mati. ENIAC sedikit

lebih maju dibandingkan Mark I yang hanya dapat menghitung. ENIAC

tidak hanya memiliki kemampuan menghitung, tambah, kurang, kali,

bagi, tapi juga dapat diprogram untuk melakukan proses sederhana.

g. 1951: The U.S. Bureau of Cencus menginstalasi komputer komersial

pertama yang bernama UNIVAC I (Universal Automatic Computer).

UNIVAC I ini dikembangkan oleh Mauchly dan Eckert untuk

Remington-Rand Corporation.

h. 1947: William Shockley, John Bardeen, dan Walter Brattain merupakan

penemu Transistor pertama di dunia. Semenjak ditemukanya transistor,

ukuran komputer menjadi semakin kecil.

2.1.2 Jenis-jenis Komputer

Komputer telah merambah ke berbagai sektor dalam kehidupan kita, tidak saja

digunakan oleh orang kantoran, akademisi, mahasiswa, anak-anakpun sudah

terbiasa dengan komputer ini. Secara sederhana, komputer dapat kita definisikan

sebagai perangkat elektronik yang menerima input (dapat berupa input dari

keyboard, mouse, sidik jari, retina mata, dan lain-lain) kemudian di proses oleh

prosesornya dan ditampilkan melalui monitor atau dalam bentuk hardcopy

(printer). Banyak sekali pembagian atau kriteria yang melekat pada komputer,

berikut ini kita bahas 8 macam jenis komputer.

19

1. PC atau Personal Computer

Sesuai dengan namanya personal komputer,maka PC adalah komputer yang

ditujukan untuk pemakaian satu orang atau dimiliki secara pribadi. Sebelum

PC ini muncul, komputer dahulunya berwujud sangat besar, sehingga hanya

dimiliki oleh perusahaan tertentu saja. PC pertama bernama Altair yang

diproduki oleh MITS pada tahun 1975.

2. Komputer Desktop

Yaitu komputer yang dirancang untuk tidak dapat dipindahkan-pindahkan,

atau khusus dirancang untuk diletakkan disuatu tempat seperti diatas meja

kerja. Komputer jenis ini sangat banyak beredar dipasaran, terutama

dikalangan perguruan tinggi, kantor dan perusahaan.

3. Laptop

Dahulu istilah laptop berbeda dengan Notebook ditinjau dari segi ukuran,

namun sekarang laptop atau notebook mengacu ke maksud yang sama, yaitu

komputer portable (mudah dibawa-bawa) yang terintegrasi langsung dengan

monitor, keyboard, mouse pad/trackbal, processor, harrdisk, memory dan

peripheral lainnya dengan ukuran yang kecil dan ringan. Kemampunya

bahkan melebihi komputer dekstop maupun PC..

4. PDA, Personal Digital Assistants

PDA adalah komputer canggih yang menggunakan flash memory sebagai

pengganti media penyimpanan. PDA tidak memiliki keyboard, namun

menggunakan teknologi layar sentuh (touchscreen) sebagai media input.

20

PDA mempunyai ukuran yang sangat kecil, sedikit diatas ukuran handphone

dan dapat dengan mudah dibawa kemana-mana.

5. Komputer Workstation

Workstation sebenarnya adalah komputer desktop yang memiliki kelebihan

utama dalam hal kemampuan prosesor, memory yang besar, dan

kemampuannya dalam menjalankan aplikasi-aplikasi yang membutuhkan

performa tinggi, seperti aplikasi 3 dimensi, grafik, multimedia dan lain

sebagainya.

6. Komputer Server

Server adalah komputer diperuntukan untuk menyediakan layanan terhadap

komputer lainnya (client) dalam sebuah jaringan. Komputer server memiliki

prosesor yang powerfull, memory yang besar dan kapasitas harddisk yang

lebih besar.

7. Komputer Mainframe

Adalah komputer dengan ukuran besar yang mampu melayani ratusan

program aplikasi secara bersamaan, mendukung puluhan bahasa

pemrograman yang berbeda, mampu menyimpan dan mengakses library rutin

dengan kapasitas yang besar, mampu melayani ratusan transaksi secara

bersamaan, bahkan lebih dan kelebihan lainnya. Komputer ini biasanya

berfungsi sebagai pusat data pada perusahaan besar. Namun dengan

perkembangan zaman, komputer-komputer terbaru saat ini secara bertahap

akan mampu menyaingi kelebihan dari komputer mainframe ini. Untuk

21

ukuran yang sedang disebut dengan mini komputer dan ukuran lebih kecil

disebut dengan mikro komputer.

8. Wearable Computer

Wearable Computer adalah perkembangan terbaru dalam bidang komputer,

yaitu perangkat komputer menyatu seperti layaknya pakaian saja. Aplikasi-

aplikasi yang biasa digunakan seperti email, database, multimedia, kalender

terintegrasi langsung dengan jam tangan, handphone atau dalam bentuk

lainnya. Sehingga perangkat komputer sudah menyatu dalam kehidupan kita

sehari-hari.

2.2 Pengertian Sistem

Sistem berasal dari bahasa Latin (systēma) dan bahasa Yunani (sustēma) adalah

suatu kesatuan yang terdiri komponen atau elemen yang dihubungkan bersama

untuk memudahkan aliran informasi, materi atau energi untuk mencapai suatu

tujuan. Istilah ini sering dipergunakan untuk menggambarkan suatu set entitas

yang berinteraksi, di mana suatu model matematika seringkali bisa dibuat.

Sistem juga merupakan kesatuan bagian-bagian yang saling berhubungan yang

berada dalam suatu wilayah serta memiliki item-item penggerak, contoh umum

misalnya seperti negara. Negara merupakan suatu kumpulan dari beberapa

elemen kesatuan lain seperti provinsi yang saling berhubungan sehingga

membentuk suatu negara dimana yang berperan sebagai penggeraknya yaitu

rakyat yang berada dinegara tersebut.

22

Kata "sistem" banyak sekali digunakan dalam percakapan sehari-hari, dalam

forum diskusi maupun dokumen ilmiah. Kata ini digunakan untuk banyak hal,

dan pada banyak bidang pula, sehingga maknanya menjadi beragam. Dalam

pengertian yang paling umum, sebuah sistem adalah sekumpulan benda yang

memiliki hubungan di antara mereka.

2.3 Sistem Komputer

Sistem komputer adalah kumpulan dari elemen-elemen computer (hardware,

software, brainware) yang saling berhubungan (terintegrasi) dan saling

berinteraksi untuk melakukan pengolahan data dengan tujuan menghasilkan

informasi sesuai dengan yang diharapkan.

Perangkat computer harus bisa difungsikan secara komperehensif

(kompak dan bersama-sama) dalam melaksanakan tugasnya yaitu dalam

mengolah data atau informasi. Untuk mewujudkan konsepsi komputer sebagai

pengolah data agar menghasilkan suatu informasi, maka diperlukan system

computer (computer system) yang elemennya terdiri dari hardware, software,

dan brainware. Ketiga elemen system computer tersebut harus saling

berhubungan dan membentuk kesatuan yang saling mendukung untuk bekerja

sama. Hardware tidak akan berfungsi apabila tanpa software, demikian juga

sebaliknya. Dan keduanya tidak akan bermanfaat apabila tidak ada manusia

(brainware) yang mengoperasikannya dan mengendalikannya

23

2.3.3 Sistem Informasi

Sistem Informasi (SI) adalah kombinasi dari teknologi informasi dan aktivitas

orang yang menggunakan teknologi itu untuk mendukung operasi dan

manajemen. Dalam arti yang sangat luas, istilah sistem informasi yang sering

digunakan merujuk kepada interaksi antara orang, proses algoritmik, data, dan

teknologi. Dalam pengertian ini, istilah ini digunakan untuk merujuk tidak hanya

pada penggunaan organisasi teknologi informasi dan komunikasi (TIK), tetapi

juga untuk cara di mana orang berinteraksi dengan teknologi ini dalam

mendukung proses bisnis.

Ada yang membuat perbedaan yang jelas antara sistem informasi, dan

komputer sistem TIK, dan proses bisnis. Sistem informasi yang berbeda dari

teknologi informasi dalam sistem informasi biasanya terlihat seperti memiliki

komponen TIK. Hal ini terutama berkaitan dengan tujuan pemanfaatan teknologi

informasi. Sistem informasi juga berbeda dari proses bisnis. Sistem informasi

membantu untuk mengontrol kinerja proses bisnis.

Alter berpendapat untuk sistem informasi sebagai tipe khusus dari

sistem kerja. Sistem kerja adalah suatu sistem di mana manusia dan/atau mesin

melakukan pekerjaan dengan menggunakan sumber daya untuk memproduksi

produk tertentu dan/atau jasa bagi pelanggan. Sistem informasi adalah suatu

sistem kerja yang kegiatannya ditujukan untuk pengolahan (menangkap,

transmisi, menyimpan, mengambil, memanipulasi dan menampilkan) informasi.

24

Dengan demikian, sistem informasi antar-berhubungan dengan sistem data di

satu sisi dan sistem aktivitas di sisi lain. Sistem informasi adalah suatu bentuk

komunikasi sistem di mana data yang mewakili dan diproses sebagai bentuk dari

memori sosial. Sistem informasi juga dapat dianggap sebagai bahasa semi

formal yang mendukung manusia dalam pengambilan keputusan dan tindakan.

Sistem informasi merupakan fokus utama dari studi untuk disiplin sistem

informasi dan organisasi informatika.

Sistem informasi adalah gabungan yang terorganisasi dari manusia,

perangkat lunak, perangkat keras, jaringan komunikasi dan sumber data dalam

mengumpulkan, mengubah, dan menyebarkan informasi dalam organisasi.

Sistem informasi adalah suatu sistem di dalam suatu organisasi yang

mempertemukan kebutuhan pengolahan transaksi harian, mendukung operasi,

bersifat manajerial dan kegiatan strategi dari suatu organisasi dan menyediakan

pihak luar tertentu dengan laporan-laporan yang diperlukan.

2.3.4 Sistem Informasi Berbasis Web

Sistem Informasi Berbasis Web adalah sebuah sistem informasi yang

menggunakan teknologi web atau internet untuk memberikan informasi dan

layanan kepada pengguna atau sistem informasi lain.

Sistem informasi berbasis web biasanya terdiri dari satu atau lebih aplikasi

web yang masing-masing komponen mempunyai fungsi tertentu. Dimana

25

masing-masing komponen tersebut saling mendukung satu sama lainnya guna

mencapai fungsi sistem informasi web sesungguhnya secara umum.

2.4 Syarat-syarat Merancang Sistem Informasi Berbasis Web

Adapun syarat-syarat agar terbentuknya sebuah website adalah:

1. Tersedianya Web Server

Baik web statis ataupun dinamis, jika ingin bisa online di internet, maka

syarat pertama haruslah memiliki server, baik berupa hardware maupun

software. Untuk hardware yaitu seperangkat komputer yang selalu

terhubung online dengan internet. Untuk software, selain operating

system, harus disediakan juga software untuk web server itu sendiri.

Untuk saat ini web server yang menjadi favorit adalah Aphace.

2. Tersedianya Software Pemrograman Web Berbasis Server

Jika ingin membuat web, berarti harus tersedia sebuah bahasa

pemrograman web selain HTML, baik itu client side maupun server side.

Untuk yang client side, memiliki kekurangan yaitu instruksi program bisaa

terlihat oleh pengguna internet. Sedangkan server side lebih aman karrena

instruksi programnya tidak terlihat oleh user, yang terlihat adalah seperti

HTML biasa. Contoh bahasa pemrograman web yang favorit adalah PHP.

3. Tersedianya Database

Database merupakan software yang digunakan untuk menyimpan dan

memanajemen data. Jika memiliki data yang sedikit, mungkin masih bisa

26

memakai file biasa sebagai media penyimpanannya. Tapi jika datanya

sudah sangat banyak, tanpa database akan sangat rumit. Database dapat

menyimpan berjuta-juta data dan dapat diakses dengan sangat cepat.

Contoh database yang bisa dipakai untuk membuat web adalah Oracle,

MySQL, dan masih banyak lagi yang lain. Database yang akan

digunakan penulis adalah MySQL.

2.5 Pengertian Internet

Internet adalah jaringan besar yang saling berhubungan dari jaringan-jaringan

komputer yang menghubungkan orang-orang dan komputer-komputer diseluruh

dunia, melalui telepon, satelit dan sistem-sistem komunikasi yang lain. Internet

dibentuk oleh jutaan komputer yang terhubung bersama dari seluruh dunia,

memberi jalan bagi informasi (mulai dari text, gambar, audio, video, dan

lainnya) untuk dapat dikirim dan dinikmati bersama. Untuk dapat bertukar

informasi, digunakan protocol standar yaitu Transmision Control Protocol dan

internet Protocol yang lebih dikenal sebagai TCP/IP.

TCP (Transmission Control Protocol) bertugas untuk memastikan bahwa

semua hubungan bekerja dengan benar, sedangkan IP (Internet Protocol) yang

mentransmisikan data dari satu komputer ke komputer lain. TPC/IP secara

umum berfungsi memilih rute terbaik transmisi data, memilih rute alternatif jika

suatu rute tidak dapat di gunakan, mengatur dan mengirimkan paket-paket

pengiriman data. Untuk dapat ikut serta menggunakan fasilitas Internet, Anda

harus berlangganan ke salah satu ISP (Internet Service Provider) yang ada dan

27

melayani daerah Anda. ISP ini biasanya disebut penyelenggara jasa internet.

Anda bisa menggunakan fasilitas dari Telkom seperti Telkomnet Instan, speedy

dan juga layanan ISP lain seperti first media, netzip dan sebagainya.

Di Indonesia, seperti negara berkembang dimana akses Internet dan

penetrasi PC sudah cukup tinggi dengan di dukungnya Internet murah dan

netbook murah, hanya saja di Indonesia operator kurang fair dalam menentukan

harga dan bahkan ada salah satu operator yang sengaja membuat “perangkap

jebakan” agar supaya si pengguna Internet bayar lebih mahal sampai ber juta-

juta rupiah!!, lainnya sekitar 42% dari akses Internet melalui fasilitas Public

Internet akses seperti warnet (warung internet), cybercafe, hotspot dll. Tempat

umum lainnya yang sering dipakai untuk akses Internet adalah di kampus, di

kantor, dan terdapat juga di toko-toko yang menyediakan akses wi-fi, seperti

Wifi-cafe. Pengguna hanya perlu membawa laptop (notebook), atau PDA, yang

mempunyai kemampuan wifi untuk mendapatkan akses Internet.

Disamping menggunakan PC (Personal Computer), kita juga dapat

mengakses Internet melalui Handphone (HP) menggunakan Fasilitas yang

disebut GPRS (General Packet Radio Service). GPRS merupakan salah satu

standar komunikasi wireless (nirkabel) yang memiliki kecepatan koneksi 115

kbps dan mendukung aplikasi yang lebih luas (grafis dan multimedia).

Teknologi GPRS dapat diakses yang mendukung fasilitas tersebut. Pen-setting-

an GPRS pada ponsel Tergantung dari operator (Telkomsel, Indosat, XL, 3)

yang digunakan. Biaya akses Internet dihitung melalui besarnya kapasitas (per-

kilobite) yang didownload

28

2.5.1 Sejarah Internet

Internet merupakan jaringan komputer yang dibentuk oleh Departemen

Pertahanan Amerika Serikat pada tahun 1969, melalui proyek ARPA yang

disebut ARPANET (Advanced Research Project Agency Network), di mana

mereka mendemonstrasikan bagaimana dengan hardware dan software komputer

yang berbasis UNIX, kita bisa melakukan komunikasi dalam jarak yang tidak

terhingga melalui saluran telepon. Proyek ARPANET merancang bentuk

jaringan, kehandalan, seberapa besar informasi dapat dipindahkan, dan akhirnya

semua standar yang mereka tentukan menjadi cikal bakal pembangunan protokol

baru yang sekarang dikenal sebagai TCP/IP (Transmission Control

Protocol/Internet Protocol).

Tujuan awal dibangunnya proyek itu adalah untuk keperluan militer.

Pada saat itu Departemen Pertahanan Amerika Serikat (US Department of

Defense) membuat sistem jaringan komputer yang tersebar dengan

menghubungkan komputer di daerah-daerah vital untuk mengatasi masalah bila

terjadi serangan nuklir dan untuk menghindari terjadinya informasi terpusat,

yang apabila terjadi perang dapat mudah dihancurkan.

Pada mulanya ARPANET hanya menghubungkan 4 situs saja yaitu

Stanford Research Institute, University of California, Santa Barbara, University

of Utah, di mana mereka membentuk satu jaringan terpadu pada tahun 1969, dan

secara umum ARPANET diperkenalkan pada bulan Oktober 1972. Tidak lama

kemudian proyek ini berkembang pesat di seluruh daerah, dan semua universitas

29

di negara tersebut ingin bergabung, sehingga membuat ARPANET kesulitan

untuk mengaturnya.

Oleh sebab itu ARPANET dipecah manjadi dua, yaitu "MILNET" untuk

keperluan militer dan "ARPANET" baru yang lebih kecil untuk keperluan non-

militer seperti, universitas-universitas. Gabungan kedua jaringan akhirnya

dikenal dengan nama DARPA Internet, yang kemudian disederhanakan menjadi

Internet.

2.6 Web Server

Dalam kemajuan teknologi zaman sekarang, jaringan internet sangat dibutuhkan

oleh masyarakat pada umumnya. Jika bicara tentang internet, tentu tidak akan

bisa lepas yang namanya web server. Sebagian orang mungkin mengetahui

istilah web server, akan tetapi tidak sedikit juga orang yang belum tahu

mengenai Pengertian Web Server ini. Secara umum dapat disimpulkan bahwa

Pengertian Web Server adalah sebuah layanan internet yang telah disediakan

oleh komputer.

Dalam memasukkan web yang telah dirancang dalam internet, maka

terlebih dahulu memiliki ruangan dalam internet dan ruangan inilah disediakan

oleh server. Selain itu juga,Pengertian Web server merupakan sebuah perangkat

komputer yang digunakan untuk mengakses segala jenis file yang terdapat pada

halaman web melalui HTTP/HTTPS dengan menggunakan aplikasi atau

program tertentu (dikenal dengan nama web browser) dan mengirimkan kembali

30

hasil permintaannya dalam bentuk halaman – halaman web yang berbentuk

dokumen HTML.

2.7 HyperText Markup Language (HTML)

HTML (Hyper Text Markup Language) adalah sebuah bahasa markup yang

digunakan untuk membuat sebuah halaman web dan menampilkan berbagai

informasi di dalam sebuah browser Internet. Bermula dari sebuah bahasa yang

sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut

dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah

standar yang digunakan secara luas untuk menampilkan halaman web. HTML

saat ini merupakan standar Internet yang didefinisikan dan dikendalikan

penggunaannya oleh World Wide Web Consortium (W3C).

HTML berupa kode-kode tag yang menginstruksikan browser untuk

menghasilkan tampilan sesuai dengan yang diinginkan. Sebuah file yang

merupakan file HTML dapat dibuka dengan menggunakan browser web seperti

Mozilla Firefox atau Microsoft Internet Explorer. HTML juga dapat dikenali

oleh aplikasi pembuka email ataupun dari PDA dan program lain yang memiliki

kemampuan browser.

HTML dokumen tersebut mirip dengan dokumen teks biasa, hanya dalam

dokumen ini sebuah teks bisa memuat instruksi yang ditandai dengan kode atau

lebih dikenal dengan TAG tertentu. Sebagai contoh jika ingin membuat teks

ditampilkan menjadi tebal seperti: TAMPIL TEBAL, maka penulisannya

31

dilakukan dengan cara: <b>TAMPIL TEBAL</b>. Tanda <b> digunakan untuk

mengaktifkan instruksi cetak tebal, diikuti oleh teks yang ingin ditebalkan, dan

diakhiri dengan tanda </b> untuk menonaktifkan cetak tebal tersebut.

2.8 Personal Home Page

PHP adalah singkatan dari "PHP: Hypertext Prepocessor", yaitu bahasa

pemrograman yang digunakan secara luas untuk penanganan pembuatan dan

pengembangan sebuah situs web dan bisa digunakan bersamaan dengan HTML.

PHP diciptakan oleh Rasmus Lerdorf pertama kali tahun 1994. Pada awalnya

PHP adalah singkatan dari "Personal Home Page Tools". Selanjutnya diganti

menjadi FI ("Forms Interpreter"). Sejak versi 3.0, nama bahasa ini diubah

menjadi "PHP: Hypertext Prepocessor" dengan singkatannya "PHP". PHP versi

terbaru adalah versi ke-5. Berdasarkan survey Netcraft pada bulan Desember

1999, lebih dari sejuta site menggunakan PHP, di antaranya adalah NASA,

Mitsubishi, dan RedHat.

2.8.1 Sejarah PHP

Pada awalnya PHP merupakan kependekan dari Personal Home Page (Situs

personal). PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995. Pada

waktu itu PHP masih bernama Form Interpreted (FI), yang wujudnya berupa

sekumpulan skrip yang digunakan untuk mengolah data formulir dari web.

Selanjutnya Rasmus merilis kode sumber tersebut untuk umum dan

menamakannya PHP/FI. Dengan perilisan kode sumber ini menjadi sumber

32

terbuka, maka banyak pemrogram yang tertarik untuk ikut mengembangkan

PHP.

Pada November 1997, dirilis PHP/FI 2.0. Pada rilis ini, interpreter PHP

sudah diimplementasikan dalam program C. Dalam rilis ini disertakan juga

modul-modul ekstensi yang meningkatkan kemampuan PHP/FI secara

signifikan.

Pada tahun 1997, sebuah perusahaan bernama Zend menulis ulang

interpreter PHP menjadi lebih bersih, lebih baik, dan lebih cepat. Kemudian

pada Juni 1998, perusahaan tersebut merilis interpreter baru untuk PHP dan

meresmikan rilis tersebut sebagai PHP 3.0 dan singkatan PHP diubah menjadi

akronim berulang PHP: Hypertext Preprocessing.

Pada pertengahan tahun 1999, Zend merilis interpreter PHP baru dan rilis

tersebut dikenal dengan PHP 4.0. PHP 4.0 adalah versi PHP yang paling banyak

dipakai pada awal abad ke-21. Versi ini banyak dipakai disebabkan

kemampuannya untuk membangun aplikasi web kompleks tetapi tetap memiliki

kecepatan dan stabilitas yang tinggi.

Pada Juni 2004, Zend merilis PHP 5.0. Dalam versi ini, inti dari

interpreter PHP mengalami perubahan besar. Versi ini juga memasukkan model

pemrograman berorientasi objek ke dalam PHP untuk menjawab perkembangan

bahasa pemrograman ke arah paradigma berorientasi objek.

33

2.8.2 Kelebihan dan Kelemahan PHP

Kelebihan PHP :

a. Bahasa pemrograman PHP adalah sebuah bahasa script yang tidak

melakukan sebuah kompilasi dalam penggunaanya.

b. Web Server yang mendukung PHP dapat ditemukan dimana – mana dari

mulai apache, IIS, Lighttpd, hingga Xitami dengan konfigurasi yang

relatif mudah.

c. Dalam sisi pengembangan lebih mudah, karena banyaknya milis – milis

dan developer yang siap membantu dalam pengembangan.

d. Dalam sisi pemahamanan, PHP adalah bahasa scripting yang paling

mudah karena memiliki referensi yang banyak.

e. PHP adalah bahasa open source yang dapat digunakan di berbagai mesin

(Linux, Unix, Macintosh, Windows) dan dapat dijalankan secara runtime

melalui console serta juga dapat menjalankan perintah-perintah system.‟

Kelemahan PHP :

a. Tidak ideal untuk pengembangan skala besar.

b. Tidak memiliki sistem pemrograman berorientasi objek yang

sesungguhnya (sampai versi 4 ini)

c. Tidak bisa memisahkan antara tampilan dengan logik dengan baik (walau

penggunaan template dapat memperbaikinya)

d. PHP memiliki kelemahan security tertentu apabila programmer tidak jeli

dalam melakukan pemrograman dan kurang memperhatikan isu dan

konfigurasi PHP

34

e. Kode PHP dapat dibaca semua orang, dan kompilasi hanya dapat

dilakukan dengan tool yang mahal dari Zend ($2000).

2.9 Xampp

XAMPP adalah program aplikasi pengembang yang berguna untuk

pengembangan website berbasis PHP dan MySQL. Versi terbaru program ini

adalah XAMPP 1.7.7, yang dirilis pada tanggal 20 September 2011. Software

XAMPP dibuat dan dikembangkan oleh Apache Friends.

Perangkat lunak komputer ini memiliki kelebihan untuk bisa berperan

sebagai server web Apache untuk simulasi pengembangan website. Tool

pengembangan web ini mendukung teknologi web populer seperti PHP,

MySQL, dan Perl. Melalui program ini, programmer web dapat menguji aplikasi

web yang dikembangkan dan mempresentasikannya ke pihak lain secara

langsung dari komputer, tanpa perlu terkoneksi ke internet. XAMPP juga

dilengkapi fitur manajemen database PHPMyAdmin seperti pada server hosting

sungguhan, sehingga pengembang web dapat mengembangkan aplikasi web

berbasis database secara mudah.

Program XAMPP banyak diaplikasikan dan digunakan oleh kalangan

pengguna komputer di bidang pemrograman web. XAMPP merupakan software

gratis. XAMPP dapat dijalankan di sistem operasi Windows 2000/XP/Vista/7

dan sistem operasi lain. Untuk menginstall versi terbaru program ini, Anda

cukup menginstal file installer XAMPP ke komputer Windows Anda.

35

Berikut ini Penjelasan dari bagian-bagian XAMPP:

a. X , Kenapa disebut dengan system operasi? karena XAMPP bisa dijalankan

di 4 OS besar yang sering digunakan oleh pengguna komputer saat ini. Dan 4

OS tersebut tidak lain dan tidak bukan adalah Windows, Linux, Mac OS dan

Solaris.

b. A(Apacahe) merupakan aplikasi web server. Apache ini bersifat opensource

yang berarti gratis dan bisa diedit oleh penggunanya. Tugas utama Apache

adalah menghasilkan halaman web yang benar kepada user berdasarkan kode

PHP yang dituliskan oleh pembuat halaman web. jika diperlukan juga

berdasarkan kode PHP yang dituliskan,maka dapat saja suatu database

diakses terlebih dahulu (misalnya dalam MySQL) untuk mendukung

halaman web yang dihasilkan.

c. M ( MySQL), merupakan aplikasi database server. Perkembangannya

disebut SQL yang merupakan kepanjangan dari Structured Query Language.

SQL merupakan bahasa terstruktur yang digunakan untuk mengolah

database. MySQL dapat digunakan untuk membuat dan mengelola database

beserta isinya. Kita dapat memanfaatkan MySQL untuk menambahkan,

mengubah, dan menghapus data yang berada dalam database.

d. P (PHP), bahasa pemrograman web. Bahasa pemrograman PHP merupakan

bahasa pemrograman untuk membuat web yang bersifat server-side

scripting. PHP memungkinkan kita untuk membuat halaman web yang

bersifat dinamis. Sistem manajemen basis data yang sering digunakan

bersama PHP adalah MySQl. namun PHP juga mendukung sistem

36

manajement database Oracle, Microsoft Access, Interbase, d-base,

PostgreSQL, dan sebagainya.

e. P (Perl), bahasa pemrograman, pertama kali dikembangkan oleh Larry Wall

di mesin Unix. Perl pertama kali dirilis pada tanggal 18 Desember 1987

ditandai dengan keluarnya Perl 1. Dua diantara karakteristik utama perl

adalah penanganan teks dan berbagai jalan pintas untuk meyelesaikan

persoalan-persoalan umum.Perl sangat populer di gunakan dalam program-

rogram CGI (Common Gateway Interface) dan protokol internet lainnya.

Fungsi dari Xampp adalah sebagai server yang berdiri sendiri (localhost),

yang terdiri atas program Apache HTTP Server, MySQL database, dan

penerjemah bahasa yang ditulis dengan bahasa pemrograman PHP dan Perl.

Nama XAMPP merupakan singkatan dari X (empat sistem operasi apapun),

Apache, MySQL, PHP dan Perl. Program ini tersedia dalam GNU General

Public License dan bebas, merupakan web server yang mudah digunakan yang

dapat melayani tampilan halaman web yang dinamis.

2.10 MySql

MySQL adalah sebuah perangkat lunak system manajemen basis data SQL

(DBMS) yang multithread, dan multi-user. MySQL adalah implementasi dari

system manajemen basisdata relasional (RDBMS). MySQL dibuah oleh TcX

dan telah dipercaya mengelola system dengan 40 buah database berisi 10.000

tabel dan 500 di antaranya memiliki 7 juta baris. MySQL AB merupakan

perusahaan komersial Swedia yang mensponsori dan yang memiliki MySQL.

37

Pendiri MySQL AB adalah dua orang Swedia yang bernama David Axmark,

Allan Larsson dan satu orang Finlandia bernama Michael “Monty”. Setiap

pengguna MySQL dapat menggunakannya secara bebas yang didistribusikan

gratis dibawah lisensi GPL(General Public License) namun tidak boleh

menjadikan produk turunan yang bersifat komersial.

Pada saat ini MySQL merupakan database server yang sangat terkenal di

dunia, semua itu tak lain karena bahasa dasar yang digunakan untuk mengakses

database yaitu SQL. SQL (Structured Query Language) pertama kali diterapkan

pada sebuah proyek riset pada laboratorium riset San Jose, IBM yang bernama

system R. Kemudian SQL juga dikembangan oleh Oracle, Informix dan Sybase.

Dengan menggunakan SQL, proses pengaksesan database lebih user-friendly

dibandingan dengan yang lain, misalnya dBase atau Clipper karena mereka

masih menggunakan perintah-perintah pemrograman murni.

2.10.1 Sejarah Mysql

MySQL pada awalnya diciptakan pada tahun 1979, oleh Michael "Monty"

Widenius, seorang programmer komputer asal Swedia. Monty mengembangkan

sebuah sistem database sederhana yang dinamakan UNIREG yang menggunakan

koneksi low-level ISAM database engine dengan indexing. Pada saat itu Monty

bekerja pada perusahaan bernama TcX di Swedia.

TcX pada tahun 1994 mulai mengembangkan aplikasi berbasis web, dan

berencana menggunakan UNIREG sebagai sistem database. Namun sayangnya,

UNIREG dianggagap tidak cocok untuk database yang dinamis seperti web.

38

TcX kemudian mencoba mencari alternatif sistem database lainnya, salah

satunya adalah mSQL (miniSQL). Namun mSQL versi 1 ini juga memiliki

kekurangan, yaitu tidak mendukung indexing, sehingga performanya tidak

terlalu bagus.

Dengan tujuan memperbaiki performa mSQL, Monty mencoba

menghubungi David Hughes (programmer yang mengembangkan mSQL) untuk

menanyakan apakah ia tertarik mengembangkan sebuah konektor di mSQL yang

dapat dihubungkan dengan UNIREG ISAM sehingga mendukung indexing.

Namun saat itu Hughes menolak, dengan alasan sedang mengembangkan

teknologi indexing yang independen untuk mSQL versi 2.

Dikarenakan penolakan tersebut, David Hughes, TcX (dan juga Monty)

akhirnya memutuskan untuk merancang dan mengembangkan sendiri konsep

sistem database baru. Sistem ini merupakan gabungan dari UNIREG dan mSQL

(yang source codenya dapat bebas digunakan). Sehingga pada May 1995, sebuah

RDBMS baru, yang dinamakan MySQL dirilis.

David Axmark dari Detron HB, rekanan TcX mengusulkan agar MySQL

di „jual‟ dengan model bisnis baru. Ia mengusulkan agar MySQL dikembangkan

dan dirilis dengan gratis. Pendapatan perusahaan selanjutnya di dapat dari

menjual jasa “support” untuk perusahaan yang ingin mengimplementasikan

MySQL. Konsep bisnis ini sekarang dikenal dengan istilah Open Source. Pada

tahun 1995 itu juga, TcX berubah nama menjadi MySQL AB, dengan Michael

39

Widenius, David Axmark dan Allan Larsson sebagai pendirinya. Titel “AB”

dibelakang MySQL, adalah singkatan dari “Aktiebolag”, istilah PT (Perseroan

Terbatas) bagi perusahaan Swedia.

2.10.2 Pengertian Sql

Structured Query Language (SQL) adalah sekumpulan perintah khusus yang

digunakan untuk mengakses data dalam database relasional. SQL merupakan

sebuah bahasa komputer yang mengikuti standar ANSI (American Nasional

Standard Institute) yang digunakan dalam manajemen database relasional.

Dengan SQL, kita dapat mengakses database, menjalankan query untuk

mengambil data dari database, menambahkan data ke database, menghapus data

di dalam database, dan mengubah data di dalam database. Saat ini hampir semua

server database yang ada mendukung SQL untuk melakukan manajemen

datanya.

2.11 Cascading Style Sheet (CSS)

Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web

untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan

lebih terstruktur dan seragam. Sama halnya styles dalam aplikasi pengolahan

kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya

heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat

digunakan bersama-sama dalam beberapa file. Pada umumnya CSS dipakai

untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan

40

XHTML.CSS dapat mengendalikan ukuran gambar, warna body teks, warna

tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi

antar paragraf, spasi antar teks, margin kiri/kanan/atas/bawah, dan parameter

lainnya.CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan

dokument. Dengan adanya CSS memungkinkan kita untuk menampilkan

halaman yang sama dengan format yang berbeda.

2.12 Dreamveaver

Dreamveaver merupakan teks editor multiplatform & powerfull karena dengan

ukuran yang kecil, Dreamveaver memiliki fitur luar biasa dan kinerja yang

sangat luar biasa.

Dreamveaver adalah editor teks untuk berbagai bahasa pemrograman.

Tampilan screenshotnya menyediakan minimap script yang ditampilkan. Kedua,

aplikasi multiplatform tersedia untuk Linux juga tersedia di Windows dan Mac

OS.

Untuk Linux dan Mac OS tersedia mulai versi Dreamveaver 2 Alpha.

Versi alpha, sudah bisa digunakan untuk mulai coding dan buat project. Aplikasi

ini sangat ringan, tidak terlalu banyak memakan resource. Bahkan lebih ringan

dari gedit bawaan ubuntu.

Fitur yang tersedia: minimap, membuka script secara side by side, bracket

highlight sehingga tidak bingung mencari pasangannya, kode snippets, drag and

drop direktori ke sidebar mirip dengan TextMate untuk Mac OS dan masih

41

banyak lagi. Dreamveaver 2 adalah kompetitor yang tangguh untuk TextMate

karena tersedia untuk beberapa platform sekaligus dengan fitur mirip.

42

BAB 3

PERANCANGAN SISTEM

3.1 Perancangan Sistem

Perancangan sistem adalah tahap setelah analisis dari siklus pengembangan sistem,

pendefenisian dari kebutuhan-kebutuhan fungsional persiapan untuk rancang bangun

implementasi menggambarkan bagaimana suatu sistem dibentuk yang dapat berupa

penggambaran, perencanaan dan pembuatan sketsa atau pengaturan dari beberapa elemen

yang terpisah ke dalam satu kesatuan yang utuh dan berfungsi termasuk mengkonfigurasi

perangkat lunak dan perangkat keras dari suatu sistem.

3.2 Metode Pengembangan Sistem

Dalam pembuatan Tugas Akhir ini, penulis menggunakan Metode Fabbri dan Schwan yang

terdiri dari :

1. Studi Kelayakan

Studi kelayakan bertujuan untuk mengidentifikasi apakah sistem informasi yang

akan dibuat sesuai dengan kebutuhan.

2. Rencana Pendahuluan

Rencana pendahuluan bertujuan untuk menentukan lingkup sistem yang akan

ditangani.

3. Analisis Sistem

43

Penguraian dari suatu sistem informasi yang utuh ke dalam bagian-bagian

komponennnya dengan maksud untuk mengidentifikasi dan mengevaluasi

permasalahan-permasalahan, kesempatan-kesempatan, hambatan-hambatan yang

terjadi dan kebutuhan-kebutuhan yang diharapkan sehingga dapat diusulkan

perbaikan-perbaikan.

4. Perancangan Sistem

Pendefinisian dari kebutuhan-kebutuhan fungsional, persiapan untuk rancang

bangun implementasi, menggambarkan bagaimana suatu sistem dibentuk serta

mengkonfigurasi komponen-komponen perangkat lunak dan perangkat keras dari

suatu sistem.

5. Implementasi Sistem

Tahap untuk meletakkan sistem supaya siap untuk dijalankan.

3.3 Hasil Perancangan

3.3.1 Bagan Berjenjang

Bagan berjenjang dapat dijadikan pedoman untuk perancangan selanjutnya, karena berisi

semua proses yang ada pada perangkat lunak yang dirancang ini.

3.3.2 Data Flow Diagram (DFD)

Data Flow Diagram (DFD) adalah suatu diagram yang menggunakan notasi-notasi untuk

menggambarkan arus dari data sistem, yang penggunaannya sangat membantu untuk

memahami sistem secara logika, tersruktur dan jelas.

44

Data Flow Diagram (DFD) adalah alat pembuatan model yang memungkinkan profesional

sistem untuk menggambarkan sistem sebagai suatu jaringan proses fungsional yang

dihubungkan satu sama lain dengan alur data, baik secara manual maupun komputerisasi.

DFD ini adalah salah satu alat pembuatan model yang sering digunakan, khususnya

bila fungsi-fungsi sistem merupakan bagian yang lebih penting dan kompleks dari pada data

yang dimanipulasi oleh sistem. Dengan kata lain, DFD adalah alat pembuatan model yang

memberikan penekanan hanya pada fungsi sistem.

DFD ini merupakan alat perancangan sistem yang berorientasi pada alur data dengan konsep

dekomposisi dapat digunakan untuk penggambaran analisa maupun rancangan sistem yang

mudah dikomunikasikan oleh profesional sistem kepada pemakai maupun pembuat program.

DFD merupakan alat bantu dalam menggambarkan atau menjelaskan sistem yang

sedang berjalan logis.

a. Kesatuan Luar

Merupakan kesatuan lingkungan di luar sistem yang dapat berupa orang, organisasi

atau sistem lainnya yang berada di lingkungan luarnya yang akan memberikan input

atau menerima output dari sistem.

b. Arus Data

Arus data ini mengalir diantara proses, simpanan data dan kesatuan luar. Arus data ini

menunjukkan arus dari data yang dapat berupa masukan untuk sistem atau hasil dari

proses sistem. Arus data ini ditunjukkan dengan simbol panah.

c. Proses

Suatu proses adalah kegiatan atau kerja yang dilakukan oleh orang, mesin atau

komputer dari hasil suatu arus data yang masuk ke dalam proses untuk menghasilkan

arus data yang akan keluar dari proses.

45

d. Simpan data

Simpanan data merupakan simpanan dari data yang dapat berupa:

1. Suatu file atau database di sistem komputer

2. Suatu arsip atau catatan manual

3. Suatu kotak tempat data di meja seseorang

4. Suatu tabel acuan manual

5. Suatu agenda atau buku

3.3.3 Diagram Alir (Flowchart)

Flowchart atau diagram alir merupakan sebuah diagram dengan simbol-simbol grafis yang

menyatakan aliran algoritma atau proses yang menampilkan langkah-langkah yang

disimbolkan dalam bentuk kotak, beserta urutannya dengan menghubungkan masing masing

langkah tersebut menggunakan tanda panah. Diagram ini bisa memberi solusi selangkah demi

selangkah untuk penyelesaian masalah yang ada di dalam proses atau algoritma tersebut.

Tujuan utama penggunaan flowchart adalah untuk menyederhanakan rangkaian proses

atau prosedur untuk memudahkan pemahaman pengguna terhadap informasi tersebut. Oleh

karena itu, design sebuah flowchart harus ringkas, jelas, dan logis.

3.3.4 Perancangan Database

Desain database dari sistem ini terdiri dari lima table. Berikut adalah tabel-tabel dalam

sistem tersebut:

Tabel 3.1 Tabel Wisata

46

Field Name Type Field Size Keterangan

id_wisata Int 20 Id wisata

nama_wisata text Nama wisata

gambar text Gambar wisata

lokasi text Lokasi wisata

detail text detail

Tabel 3.2 Pengunjung


id_pengunjung Int 30 id_pengunjung

periode Varchar - periode

jumlah Varchar - Jumlah pengunjung

Tabel 3.3 Berita


id_berita Int 30 id_berita

nama Text - Nama berita

gambar Text - gambar

tanggal Date Tanggal berita

detail Text Detail

Tabel 3.4 Galery

47


id_gambar Int 20 id_gambar

nama Text - nama

gambar Varchar 50 Gambar

Tabel 3.5 Kecamatan


id_kecamatan Int 20 id_kecamatan

Nama_kecamatan Text - nama

3.4 Rancangan Antarmuka (Interface)

Rancangan antarmuka dari sistem ini dibagi menjadi tiga bagian yaitu kepala (header),

bagian kiri (menu), bagian kanan (content) dan bagian kaki (footer). Bagian kepala terdiri

dari logo dan slider. Bagian kiri terdiri dari menu. Bagian kanan terdiri dari isi penjelasan

dari menu sebelah kiri. Bagian kaki terdiri dari datadiri penulis.

3.5 Algoritma

Algoritma merupakan langkah-langkah maupun urutan bertahap dan spesifik dari suatu

masalah. Algoritma digunakan untuk menganalisa serta menjelaskan urutan dan hubungan

antara kegiatan-kegiatan yang akan ditempuh. Selain itu algoritma juga berfungsi untuk

menyelesaikan suatu masalah sehingga tercapai suatu tujuan.

Berikut ini merupakan algoritma yang menjadi inti dari perancangan sistem yaitu:

Langkah 1 : Tampilkan halaman index.php lalu klik salah satu menu yang tersedia

48

a. Home

b. About

c. Wisata

d. Pengunjung

e. Berita

f. Galery

Langkah 2 : Klik menu Home

Maka akan tampil isi beberapa objek wisata Simalungun

Langkah 3 : Klik menu About

Maka akan tampil penjelasan tentang Kabupaten Simalungun.

Langkah 4 : Klik menu Wisata

Maka akan tampil Objek Wisata Simalungun

Langkah 5 : Klik menu Pengunjung

Maka akan tampil jumlah kunjungan wisatawan di Simalungun

Langkah 6 : Klik menu Berita

Maka akan tampil berita berita terupdate

Langkah 7 : Klik menu Galery

Maka akan tampil foto foto Objek Wisata Simalungun

49

BAB 4

IMPLEMENTASI SISTEM

4.1 Implementasi Sistem

Implementasi sistem merupakan tahap untuk meletakkan sistem supaya siap dioperasikan,

termasuk juga menulis kode program jika tidak digunakan paket perangkat lunak aplikasi.

4.1.1 Tujuan Implementasi Sistem

Adapun tujuan dari implementasi sistem ini adalah untuk mengetahui sistem yang telah ada

sebelumnya dan untuk mengetahui kelebihan dan kekurangan dari sistem yang baru.

4.2 Komponen Utama dalam Sistem

Dalam pembuatan Sistem Informasi . . . yang sudah dirancang membutuhkan perangkat keras

(hardware), perangkat lunak (software) dan tenaga pelaksana (brainware). Kebutuhan sistem

yang dibutuhkan bersifat opsional, yaitu :

a. Perangkat Keras (hardware)

1. Prosesor Intel Pentium

2. Hardisk sebagai media penyimpanan data dan tempat program beroperasi.

3. Memori

4. Monitor

5. Keyboard

6. Mouse

7. Printer

50

8. Dan lain-lain.

b. Perangkat Lunak (software)

1. Sistem Operasi Windows 7, yaitu menggunakan perangkat lunak (software) PHP,

Mysql dan Dreamveaver.

2. Anti virus untuk mengetahui terjadinya kerusakan sistem.

3. Dan lain-lain.

c. Tenaga Pelaksana (Brainware) yaitu seorang yang memiliki keahlian yang baik dan

mengerti sistem operasi computer untuk menjalankan program.

4.2 Pemeliharaan

Berdasarkan penjelasan dari halaman sebelumnya, diperlukan pemeliharaan sistem agar

sistem tersebut dapat berjalan sebagaimana mestinya. Adapun tujuan dari pemeliharaan

sistem ini adalah sebagai berikut :

1. Mencegah terjadinya kelainan sistem yang dapat mendatangkan masalah-

masalah baru.

2. Menggantikan pemeliharaan sistem dengan survei sistem jika modifikasi yang

diminta relatif besar.

4.3 Demonstrasi Program

51

4.3.1 Halaman Utama

Halaman Utama ini merupakan halaman web yang pertama kali muncul ketika mulai dibuka

di web browser. Pada Halaman utama ini terdapat sebuah slider dan tiga menu dibagian kiri

dari website ini. Dimana ketiga menu ini merupakan link menuju penjelasan dari menu

tersebut.

Gambar 4.1 Tampilan Utama Website

52

4.3.2 Halaman About

Gambar 4.2 Tampilan Halaman About

4.3.3 Halaman Wisata

Gambar 4.3 Tampilan Halaman Wisata

53

4.3.4 Halaman Galery

Halaman Galery ini berisikan foto foto tempat wisata Simalungun.

Gambar 4.6 Tampilan Halaman Galery

4.3.5 Halaman Admin

Halaman admin ini merupakan halaman yang didalamnya admin bisa melakukan perubahan

pada website yang telah dibuat. Bisa menghapus data pada website dan mengedit nya.

Gambar 4.7

Tampilan Halaman Admin

54

BAB 5

KESIMPULAN DAN SARAN

5.1 Kesimpulan

Setelah melalukan pembahasan akhirnya penulis dapat membuat kesimpulan sebagai berikut:

1. Website objek wisata Simalungun ini adalah sarana informasi online yang dapat

diakses oleh siapa saja, baik dari pihak sekolah maupun para pengunjung yang

mengunjungi website-nya.

2. Perkembangan website pada daerah membuat penulis mengambil inisiatif membuat

tugas akhir berupa website

3. Membangun sebuah website yang tidak hanya berdasarkan kebutuhan dari pihak

pemberi order semata, melainkan lebih dititikberatkan kepada perkembangan

informasi melalui jaringan internet yang bersifat global.

5.2 Saran

Dalam mengakhiri penulisan Tugas Akhir penulis menguraikan beberapa saran antara lain:

1. Hendaknya program yang dibuat dapat dikembangkan lebih lanjut untuk membentuk

suatu sistem yang lebih baik sesuai dengan keputusan guna menunjang pengambilan

keputusan yang sempurna.

2. Hendaknya pembuatan file cadangan dilakukan secara berkala. Hal ini sangat penting

artinya untuk mencegah kemungkinan kehilangan dan kerusakan data yang telah

disimpan.

55

3. Sebaiknya digunakan program antivirus yang residen. Hal ini dimaksudkan untuk

mencegah terjadinya kerusakan pada program ataupun data yang lain.

56

55

DAFTAR PUSTAKA

Azwar, 1998 . http://www.library.upnvj.ac.id. Diakses 23 Maret 2015.

Bernard, R. S. Prijono, A., dan Agustaf, R. 2005. Mudah dan Cepat Menguasai

Pemrograman Web. Bandung: Informatika Bandung.

Disainweb, 2012 Pengertian website. http://desainweb.com/site/pengertian-

website-apa-ituwebsite. Diakses 23 Maret 2015

ST, Anhar .2010. Panduan Menguasai PHP dan MySQL Secara Otodidak. Jakarta

: Media Kita.

Suprianto, Dodit. 2008.Buku Pintar pemrograman php. Bandung : Oase media.

Wikipedia, 2012. Hotel. http://id.wikipedia.org/wiki/Hotel/. Diakses 20 Mei 2016.

Yuanita, Agnes Heri Tri, 2006. Membuat Website Interaktif Dengan Macromedia

Dreamweaver 4. Jogjakarta: CV Adi.

57

SURAT KETERANGAN

Hasil Uji Program Tugas Akhir

Yang bertanda tangan di bawah ini, menerangkan bahwa Mahasiswa Tugas Akhir

Program D3 Teknik Informatika :

Nama : Tulus Romaston Purba

NIM : 132406134

Program Studi : D3 Teknik Informatika

Judul Tugas Akhir : SISTEM INFORMASI OBJEK WISATA DI

KABUPATEN SIMALUNGUN BERBASIS WEB

telah melakukan test program Tugas Akhir Mahasiswa tersebut di atas pada

tanggal …..../06/2016.

Dengan hasil : SUKSES / GAGAL

Demikian diterangkan untuk digunakan melengkapi Syarat Pendaftaran Meja

Hijau Tugas Akhir Mahasiswa bersangkutan di Departemen Matematika FMIPA

USU Medan.

Medan, Juli 2016

Dosen Pembimbing

Drs. Marihat Situmorang, M.Kom

NIP 196 312 141 989 031 001

58

KEMENTERIAN RISET TEKNOLOGI DAN PENDIDIKAN TINGGI


FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM


Jl. Bioteknologi No.1 Kampus USU Padang Bulan Medan-20155

Telp. (061) 8211050, 8214290, Fax (061) 8214290

KARTU BIMBINGAN TUGAS AKHIR MAHASISWA

Nama Mahasiswa : Tulus Romaston Purba

Nomor Induk Mahasiswa : 132406134

Judul Tugas akhir : Sistem Informasi Objek Wisata di Kabupaten

Simalungun Berbasis Web

Dosen Pembimbing : Drs.Marihat Situmorang, M.Kom

Tanggal Mulai Bimbingan :

Tanggal Selesai Bimbingan :

No Tanggal Asistensi

Bimbingan

Pembahasan

Asistensi Pada Bab

Paraf Dosen

Pembimbing

Keterangan

1

2

3

4

5

6

7

*Kartu ini harap dikembalikan ke jurusan Matematika bila bimbingan mahasiswa telah selesai

Disetujui oleh

Program Studi D3 Teknik Informatika

Fakultas MIPA USU

Ketua, Pembimbing,

Dr. Elly Rosmaini, M.Si. Drs. Marihat Situmorang, M.Kom

NIP. 196 005 201 985 032 002 NIP. 196 312 141 989 031 001

59

LAMPIRAN LISTING PROGRAM WEBSITE

1. Halaman Home (index.php)

<!DOCTYPE html>

<html>

<head>

<title>Wisata Simalungun</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="keywords" content="My Trip Responsive web template, Bootstrap Web Templates,

Flat Web Templates, Android Compatible web template,

Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson,

Motorola web design" />

<script type="application/x-javascript"> addEventListener("load", function() {

setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>



<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />





<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />



<link rel="stylesheet" href="css/ken-burns.css">



<link href="css/font-awesome.css" rel="stylesheet">

60

<link href='//fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'>

<link href='//fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>



<script src="js/jquery-1.11.1.min.js"></script>

<script src="js/bootstrap.js"></script>

</head>

<body>



<div class="banner">

<div class="top-banner">

<div class="container">

<div class="top-banner-left">

<ul>

<li><i class="fa fa-phone" aria-hidden="true"></i>

Pemkab Simalungun</li>

<li><a href="mailto:[email protected]"><i

class="fa fa-envelope" aria-hidden="true"></i> Dinas Pariwisata Kab Simalungun</a></li>

</ul>

</div>

<div class="top-banner-right">

<ul>

<li><a class="facebook" href="#"><i class="fa fa-

facebook" aria-hidden="true"></i></a></li>


twitter" aria-hidden="true"></i></a></li>


dribbble" aria-hidden="true"></i></a></li>


google-plus" aria-hidden="true"></i></a></li>

</ul>

61

</div>

<div class="clearfix"> </div>

</div>

</div>

<div class="header">


<div class="logo">

<h1>

<marquee><font

size="20"color="#FF0066"><b>Wisata Simalungun</b></font></marquee>

</h1>

</div>

<div class="top-nav">

<nav class="navbar navbar-default">

<button type="button" class="navbar-toggle

collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">Menu

</button>



<div class="collapse navbar-collapse" id="bs-

example-navbar-collapse-1">

<ul class="nav navbar-nav">

<li><a class="active"

href="index.php">Home</font></a></li>

<li><a

href="about.php">About</a></li>

62

<li><a

href="wisata.php">Wisata</a></li>

<li><a

href="pengunjung.php">Pengunjung</a></li>

<li><a

href="berita.php">Berita</a></li>

<li><a

href="gallery.php">Galery</a></li>

</font>


</ul>

</div>

</nav>

</div>


</div>

</div>

</div>



<div id="kb" class="carousel kb_elastic animate_text kb_wrapper" data-ride="carousel"

data-interval="6000" data-pause="hover">



<div class="carousel-inner" role="listbox">



<div class="item">

<div class="slider slider2">

<div class="carousel-caption kb_caption kb_caption_center slider-grid">

<h3>Kawah Putih</h3>

63

<p>Kawah Putih Tinggi Raja</p>

</div>

</div>

</div>



<div class="item">

<div class="slider slider1">

<div class="carousel-caption kb_caption kb_caption_right slider-grid">

<h3>Rumah Bolon</h3>

<p>Rumah Peninggalan Kerajaan Purba</p>

</div>

</div>

</div>



<div class="item active">

<div class="slider">

<div class="carousel-caption kb_caption slider-grid">

<h3>Kebun Teh Sidamanik</h3>

<p>Kebun teh yang berada di Kecamatan Sidamanika</p>

</div>

</div>

</div>

</div>





<a class="left carousel-control kb_control_left" href="#kb" role="button" data-slide="prev">

<span class="fa fa-angle-left kb_icons" aria-hidden="true"></span>

64

<span class="sr-only">Sebelumnya</span>

</a>



<a class="right carousel-control kb_control_right" href="#kb" role="button" data-

slide="next">

<span class="fa fa-angle-right kb_icons" aria-hidden="true"></span>

<span class="sr-only">Selanjutnya</span>

</a>

</div>



<div class="about">


<div class="w3l-about-heading">

<h2>Danau Toba</h2>

<p>Pemandangan indah yang menunjukkan keindahan Danau

Toba</P>

</div>

<div class="about-grids">

<div class="col-md-3 about-grid">

<div class="about-grid-info effect-1">

<h4>Haranggaol</h4>

</div>

</div>


<div class="about-grid-info about-grid-info1 effect-1">

<h4>Tanjung Unta</h4>

</div>

65

</div>



<h4>Simarjarunjung</h4>

</div>

</div>



<h4>Tigaras</h4>

</div>

</div>


</div>

</div>

</div>





<script src="js/SmoothScroll.min.js"></script>

</body>

</html>

2. Halaman About (about.php) <!DOCTYPE html>

<html>

<head>

66




<meta name="keywords" content="My Trip Responsive web template, Bootstrap Web

Templates, Flat Web Templates, Android Compatible web template,


















<link href='//fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet'

type='text/css'>









<script src="js/jarallax.js"></script>

67

</head>

<body>



<div class="banner about-bg">

<div class="top-banner about-top-banner">



<ul>





</ul>

</div>


<ul>









</ul>

</div>


</div>

</div>

68






</button>


for toggling -->




<li><a

href="index.php">Home</a></li>



<li><a


<li><a


<li><a


<li><a

href="galery.php">Galery</a></li>


</ul>

</div>

</nav>

</div>


</div>

69

</div>

</div>





<div class="a-grid">



<h2>KABUPATEN SIMALUNGUN</h2>

<p>Habonaron Do Bona</p>

</div>

<div class="agileits-a-about-grids">

<div class="col-md-5 agileits-a-about-left">

<img src="images/11.jpg" alt="" />

</div>

<div class="col-md-7 agileits-a-about-right">

<h3>Kabupaten Simalungun</h3>

<h4>Simalungun Adalah salah satu kabupaten yang terletak

di Sumatera Utara yang bermottokan "HABONARON DO BONA".</p>

Luas Wilayahnya 438.660 Ha atau 6,12% dari luas wilayah propinsi Sumatera Utara dengan

ibukota Pamatang Raya.

Kabupaten Simalungun terletak pada 2° 36` - 3° 18` Lintang Utara, 98° 32` - 99° 35`

Bujur Timur dengan rata-rata ketinggian 369 meter diatas permukaan laut dan berbatasan

dengan lima kabupaten / kota yaitu:

<li>sebelah utara berbatasan dengan kabupaten serdang bedagai</li>

<li>sebelah timur berbatasan dengan kabupaten Batubara</li>

<li>sebelah selatan berbatasan dengan kabupaten Toba Samosir</li>

<li>sebelah barat berbatasan dengan kabupaten Karo </li>

<li> dan ditengah kabupaten yaitu Kota Pematang Siantar</li></p>

70

Adapun keadaan penduduk berjumlah ...... jiwa yang terdiri dari beragam etnis diantaranya :

Simalungun, Toba, Karo, Jawa, Cina, dan lain lain denagn sumber mata

pencaharian didominasi bidang pertanian seperti persawahan, sayur-sayuran, buah-

buahan.Disamping pertanian tersebut Simalungun juga memiliki Perkebunan yang luas

seperti Karet, Kelapa Sawit, Kopi dan Coklat.

Selain dari sektor pertanian Simalungun juga mengedepankan potensi objek wisata alam

seperti Danau Toba, Tigaras, Haranggaol, Tinggiraja, Pemandian Alam Sejuk, Pemandian Karang

Anyer, dll. Namun tak hanya itu, kabupaten Simalungun juga memiliki tempat wisata cagar

budaya rumah adat di Kecamatan Purba untuk menarik kunjungan wisatawan dalam dan luar

negeri..

</h4>

</div>


</div>

</div>

</div>

<div class="team-grids">

<div class="col-md-3 agileinfo-team-grid">

<img src="images/pakaian.jpg" alt="" />

<div class="captn">

<h4>Pakaian Adat Simalungun</h4>

</div>

</div>


<img src="images/l2.jpg" alt="" />

<div class="captn">

<h4>Rumah Adat Simalungun</h4>

</div>

</div>

71


<img src="images/l3.jpg" alt="" />

<div class="captn">

<h4>Lambang Kabupaten SIimalungun</h4>

</div>

</div>


<img src="images/L4.jpg" alt="" />

<div class="captn">

<h4>Bupati Simalungun beserta Keluarga</h4>

</div>

</div>


</div>

</div>

</div>

<div class="copyright">

<p>© 2016 Tulus Purba </p>

</div>

</div>

</div>



</body>

</html>

72

3. Halaman Wisata (wisata.php) <?php

error_reporting(0);

include("koneksi.php");

?>

<!DOCTYPE html>

<html>

<head>


<link rel="stylesheet" type="text/css" href="assets/css/fonts.css">

<link rel="stylesheet" type="text/css" href="assets/css/style.css">

<script type="text/javascript" src="../assets/js/jquery.min.js"></script>





Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG,

SonyEricsson, Motorola web design" />

73










type='text/css'>






</head>

<body>







<ul>

<li><i class="fa fa-phone" aria-

hidden="true"></i> Pemkab Simalungun</li>

<li><a

href="mailto:[email protected]"><i class="fa fa-envelope" aria-hidden="true"></i> Dinas

Pariwisata Kab Simalungun</a></li>

</ul>

</div>

74

<ul>

<li><a class="facebook" href="#"><i

class="fa fa-facebook" aria-hidden="true"></i></a></li>


class="fa fa-twitter" aria-hidden="true"></i></a></li>


class="fa fa-dribbble" aria-hidden="true"></i></a></li>


class="fa fa-google-plus" aria-hidden="true"></i></a></li>

</ul>

</div>


</div>

</div>



<div class="logo">

<h1> <font size="20"color="#FF0066"><b>Wisata Simalungun</b></font> </h1>

</div>

<div class="top-nav"> <nav class="navbar navbar-default">

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-

target="#bs-example-navbar-collapse-1">Menu

</button>



<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">


<li><a class="active" href="index.php">Home</a></li>

<li><a href="about.php">About</a></li>

75

<li><a href="wisata.php">Wisata</a></li>

<li><a href="pengunjung.php">Pengunjung</a></li>

<li><a href="berita.php">Berita</a></li>

<li><a href="gallery.php">Galery</a></li>


</ul>

</div>

</nav> </div>


</div>

</div>

</div>



<div class="more-bottom">


<div class="content">

<div class="welcon">

<ul>

<?php

$q="SELECT * FROM `wisata` ORDER BY `wisata`.`id_wisata` DESC";

$eq=mysql_query($q);

while($de=mysql_fetch_array($eq)){

$nama=$de['nama_wisata'];

$gambar=$de['gambar'];

$harga=$de['lokasi'];

echo "

76

<li>

<h2>".$nama."</h2>

<img src=\"images/".$gambar."\">

<h2>".$harga."</h2>

<a href='lihat-

detail.php?id=$de[id_wisata]'>detail</a>

</li>

";

}

?>

</ul>

</div>

</div>


</div>

</div>

</div>





</body>

</html>

4. Halaman Pengunjung (pengunjung.php) <!DOCTYPE html>

<html>

<head>

77






Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG,

SonyEricsson, Motorola web design" />

















type='text/css'>

78

</head>

<body>







<ul>

<li><i class="fa fa-phone" aria-

hidden="true"></i> Pemkab Simalungun</li>

<li><a

href="mailto:[email protected]"><i class="fa fa-envelope" aria-hidden="true"></i> Dinas

Pariwisata Kab Simalungun</a></li>

</ul>

</div>


<ul>


class="fa fa-facebook" aria-hidden="true"></i></a></li>


class="fa fa-twitter" aria-hidden="true"></i></a></li>


class="fa fa-dribbble" aria-hidden="true"></i></a></li>


class="fa fa-google-plus" aria-hidden="true"></i></a></li>

</ul>

</div>


</div>

</div>

79



<div class="logo">

<h1>

<marquee><font


</h1>

</div>



<button type="button"

class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-

collapse-1">Menu

</button>



<div class="collapse navbar-collapse"

id="bs-example-navbar-collapse-1">


<li><a




<li><a


<li><a


<li><a


<li><a

80

</ul>

</div>

</nav>

</div>


</div>

</div>

</div>








<h2>PEMERINTAH KABUPATEN SIMALUNGUN</h2>

<p>Dinas Pariwisata Pemuda dan Olahraga</p>

</div>

<p></p>

<center><p>Kabupaten Simalungun memiliki potensi wisata yang

cukup banyak untuk ditonjolkan kepada wisatawan yang tidak dimiliki oleh daerah lain di

Indonesia.Potensi ini beraneka ragam yaitu:kebudayaan tari-tarian,adat istiadat,peninggalan

sejarah,rumah tradisional,dan objek wisata yang banyak tersebar di daerah kabupaten

Simalungun</p></center>

<center>

<h2>Berikut data pengunjung dari tahun 2010-2015</h2>

<p></p>

<img src="images/3data.jpg"width="610" height="480"" div id="body">

</center>

<center>

81

<h3>Data Pengunjung Wisatawan</h3>

<h4>

Data tersebut merupakan daftar kunjungan wisatawan tahun 2010-2015

dari dalam maupun luar negeri yang diambil dari 5 tempat wisata Simalungun.Yaitu

Parapat,Karang Anyer,Rumah Bolon Purba,Haranggaol, dan Pemandian Alam Sejuk.

Agar lebih jelas,berikut keterangan jumlah pengunjung dari tahun 2010-

2015 diambil dari 5 daerah tersebut:

<ul>>Jumlah sudah termasuk wisatawan Nusantara maupun Mancanegara

</ul>

<li>Tahun 2010 : 357.202 jiwa</li>

<li>Tahun 2011 : 312.773 jiwa</li>

<li>Tahun 2012 : 326.058 jiwa</li>

<li>Tahun 2013 : 345.425 jiwa</li>

<li>Tahun 2014 : 359.751 jiwa</li>

<li>Tahun 2015 : 294.444 jiwa</li>

</center>

</div>


</div>

</div>

</div>

<center>

</p><p>sumber:Dinas Pariwisata pemuda dan Olahraga Kabupaten

Simalungun</p></p></h4>

</center>


<center><div class="footer">

82

<center><div class="container">

<div class="footer-grids">

<div class="col-md-3 footer-grid">

<div class="footer-grid-heading">

<h4><center>Alamat</center></h4>

</div>

<div class="footer-grid-info">

<p>Dinas Pariwisata Pemuda dan

Olahraga</p>

<p>Komplek Perkantoran Pemkab

Simalungun

<span>Pamatang Raya.</span>

</p>

</div></center>

</div></center>





<p>© 2016 Tulus Purba </p>

</div>

</div>

</div>



</body>

</html>

83

5. Halaman Berita (berita.php)

<!DOCTYPE html>

<html>

<head>

84


</head>

<body>







<ul>





</ul>

</div>


<ul>









</ul>

</div>


</div>

</div>

85



<div class="logo">

<h1>

<font size="10"color="#FF0066"><b>Wisata

Simalungun</b></font>

</h1>

</div>





</button>


for toggling -->






<li><a


<li><a


<li><a


<li><a


<li><a



86

</ul>

</div>

</nav>

</div>


</div>

</div>

</div>





<p></p>

<p></p>

<p></p>

<p></p>

<div class="contact">

<div class="agile-contact-form">

<div class="col-md-6 contact-form-left">

<div class="contact-form-top">

<div class="common_content">

<p> </p>

<div class="common_content">

<h2>Berita Apa Terbaru?</h2>

<p> Berikut ini beberapa Berita terbaru </p>

</div>

<div class="top_content">

87

<div class="column_one">

<img src="images/jokowi.jpg" height="200" width="170">

<p>

Presiden Jokowi Tiba di Jerman untuk Kunjungan Kenegaraan </p> <br>

<p><a class="btn" href="read1.php">Read more</a></p></div>

<div class="column_two border_left">

<img src="images/susi.jpg" height="200" width="178">

<p>Perkuat Pengawasan, Menteri Susi Akan Beli Kapal Induk </p> <br>


</div>

</div>

<div class="right_section">

<div class="top_content">

<div class="column_one">

<img src="images/lk.jpg" height="200" width="178">

<p>

Pelaku Penyalahgunaan Narkoba

</p>

<br>


<div class="column_two border_left">

<img src="images/ah.jpg" height="200" width="178">

<p>Ahok Menolak Proyek Reklamasi Disamakan dengan Proyek Hambalang </p> <br>


88

</div>

</div>


<p>© 2016 Tulus Purba</a> </p>

</div>


</div>

</div>

</div>

</body>

</html>

6. Halaman Galery (gallery.php)

<!DOCTYPE html>

<html>

<head>










89


























</head>

<body>







<ul>

90





</ul>

</div>


<ul>









</ul>

</div>


</div>

</div>



<div class="logo">

<h1>

<marquee><font


</h1>

</div>


91




</button>


for toggling -->




<li><a




<li><a


<li><a


<li><a


<li><a



</ul>

</div>

</nav>

</div>


</div>

</div>

</div>

92








<h2>Gallery Foto</h2>

<p>Beberapa Foto Wisata Simalungun.</p>

</div>

<div class="gallery">

<div class="gallery-small gallery-middle">

<div class="gallery-small-text effect-3">

<a href="images/gal1.jpg"><img

src="images/gal1.jpg" alt="" title=" Kebun Teh Sidamanik"/></a>

</div>

</div>




src="images/gal2.jpg" alt="" title="Kota Turis Parapat"/></a>

</div>

</div>




src="images/gal3.jpg" alt="" title="Jabu Bolon Pamatang Purba."/></a>

</div>

</div>

93




src="images/gal4.jpg" alt="" title="Batu gantung."/></a>

</div>

</div>




src="images/gal5.jpg" alt="" title="Air terjun Bah biak Sidamanik."/></a>

</div>

</div>




src="images/gal6.jpg" alt="" title="Haranggaol."/></a>

</div>

</div>




src="images/gal7.jpg" alt="" title="Tanjung Unta."/></a>

</div>

</div>




src="images/gal8.jpg" alt="" title="Dolok Simarsolpah."/></a>

</div>

94

</div>




src="images/gal9.jpg" alt="" title="Puncak Simarjarunjung"/></a>

</div>

</div>




src="images/gal10.jpg" alt="" title="Air terjun Tarakni Onggang."/></a>

</div>

</div>




src="images/gal11.jpg" alt="" title="Tigaras"/></a>

</div>

</div>




src="images/gal12.jpg" alt="" title="Kawah Putih Tinggi Raja.."/></a>

</div>

</div>




src="images/gal13.jpg" alt="" title="Batu Silaon."/></a>

95

</div>

</div>




src="images/gal14.jpg" alt="" title="Panatapan Simarjarunjung."/></a>

</div>

</div>




src="images/gal15.jpg" alt="" title="Gapura Selamat Datang."/></a>

</div>

</div>

<div class="clearfix"></div>

</div>


<p>© 2016 Tulus Purba</a> </p>

</div>

</div>

</div>



</body>

</html>

96

7. Style Css

body a {

transition: 0.5s all;

-webkit-transition: 0.5s all;

-o-transition: 0.5s all;

-moz-transition: 0.5s all;

-ms-transition: 0.5s all;

}

html, body{

font-family: 'Oswald', sans-serif;

font-size: 100%;

}

.banner{

background-size: cover;

padding: 0;

position: absolute;

top: 0;

z-index: 99;

left: 13%;

}

.top-banner-left{

float:left;

width:40%;

}

.top-banner-left ul{

padding:0;

margin:0;

97

}

.top-banner-left ul li{

display:inline-block;

color:#fff;

font-size:.875em;

}

.top-banner-left ul li a{

color: #fff;

font-size: 1em;

}

.top-banner-left ul li:nth-child(2) {

margin-left: 3em;

}

.top-banner {

padding: .5em 0;

border-bottom: solid 1px rgba(255, 255, 255, 0.23);

}

.top-banner-right{

float:right;

}

.top-banner-right ul{

padding:0;

margin:0;

}

.top-banner-right ul li{


margin:0 1em;

98

}

.top-banner-right ul li:nth-child(4){

margin-right:0;

}

.top-banner-right ul li a{

color:#fff;

font-size:1em;

}

.top-banner-right ul li a:hover{

color:#fd5c63;

}

.navbar-default {

border: none !important;

background: none !important;

margin: 0 !important;

min-height: 0 !important;

padding: 0 !important;

}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-

default .navbar-nav > .active > a:focus {


}

div#bs-example-navbar-collapse-1 {

padding: 0;

}

.logo{

float: left;

margin: 1em 0 0 0;

99

}

.logo h1{

margin:0;

}

.logo h1 a{

color:#fff;

font-size:1em;

text-decoration:none;

font-family: 'Pacifico', cursive;

}

/*-- top-nav --*/

.top-nav {

margin: 2em 0 0 0;

float: right;

}

.top-nav ul{

padding: 0;

margin: 0;

}

.top-nav ul li{

display: inline-block;

margin: 0 1em;

float: left;

}

.top-nav ul li:nth-child(6){

margin-right:0;

}

100

ul.nav.navbar-nav {

float: right;

}

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-

default .navbar-nav > .open > a:focus {


border-right: solid 1px #EFEFEF;

box-shadow: 1px 0px 0px 0px rgba(72, 72, 72, 0);

}

.top-nav ul li a{

color: #fff !important;

font-size: 1em;

margin: 0;

text-decoration: none;

padding: 0;

}

.top-nav ul li a:hover{

color: #fd5c63 !important;

}

.top-nav ul li a.active{

color: #fd5c63 !important;

}

.caret {

margin-left: 14px;

}

/*-- slider --*/

.slider {

background: url(../images/KT.jpg) no-repeat 0px 0px;

101


min-height: 800px;

}

.slider1 {

background: url(../images/RB.jpg) no-repeat 0px 0px;


}

.slider2 {

background: url(../images/trj.jpg) no-repeat 0px 0px;


}

.slider-grid{

width: 290px !important;

top: 23%;

position: absolute;

height: 290px;

margin: 3em auto 0;

text-align: center;

border: solid 2px #fff;

padding: 5em 0 0 0;

border-radius: 50%;

-webkit-border-radius: 50%;

-ms-border-radius: 50%;

-o-border-radius: 50%;

-moz-border-radius: 50%;

}

.slider-grid h3{

102

color: #fff;

font-size: 3em;

margin: 0;


}

.slider-grid p{

color: #fff;

font-size: .875em;

width: 84%;

margin: 2em auto 0;

}

.copyright{

margin:1em 0 0 0;

text-align:center;

}

.copyright p{

margin: 0;

font-size: .875em;

color: #red;

}

.copyright p a{

color: #red;

}

.copyright p a:hover{

color: #red;

}

/*-- //slider --*/

103

/*-- about --*/

.about{

padding: 4em 0;

background: #DCEDF9;

}

.w3l-about-heading h2,.codes-heading h2,.w3l-contact-heading h2 {

text-align: center;

margin: 0;

font-size: 3em;

color: #blue;


}

.w3l-about-heading p,.codes-heading p,.w3l-contact-heading p{

text-align: center;

margin: 1em 0 0 0;

font-size: .875em;

color: #383838;

}

.about-grids {

margin: 4em 0 0 0;

}

.about-grid{

text-align:center;

}

.about-grid-info{

background: url(../images/aa0.jpg)no-repeat 0px 0px;


104

min-height: 255px;

}

.about-grid-info h4{

color: #FFF;

font-size: 2em;

margin: 0;


line-height: 7.5em;

}

.about-grid-info1{



min-height: 255px;

}

.about-grid-info2{



min-height: 255px;

}

.about-grid-info3{



min-height: 255px;

}

/*-- Effect 1--*/

.about-grid-info:after {

pointer-events: none;

105

position: absolute;

width: 200px;

height: 200px;



border-radius: 50%;

content: '';

-webkit-box-sizing: content-box;

-moz-box-sizing: content-box;

box-sizing: content-box;

}

.effect-1 {

-webkit-transition: background 0.5s, color 0.2s;

-moz-transition: background 0.5s, color 0.2s;

transition: background 0.5s, color 0.2s;

}

.effect-1:after {

top: 29px;

left: 44px;

box-shadow: 0 0 0 2px #FFFFFF;

-webkit-transition: -webkit-transform 0.5s, opacity 0.2s;

-webkit-transform: scale(0.8);

-moz-transition: -moz-transform 0.5s, opacity 0.2s;

-moz-transform: scale(0.8);

-ms-transform: scale(0.8);

transition: transform 0.5s, opacity 0.2s;

transform: scale(0.8);

106

opacity: 0;

}

.about-grid:hover.about-grid-info{

background:#FF7200;


}

.about-grid:hover .about-grid-info:after {

-webkit-transform: scale(1);

-moz-transform: scale(1);

-ms-transform: scale(1);

transform: scale(1);

opacity: 1;

}

/*--//Effect 1--*/

/*-- //about --*/

/*-- offer --*/

.offer{

padding: 4em 0;

background: #CEDDB6;

}

.wthree-offer-grid{

background: url(../images/o1.jpg) no-repeat 0px 0px;


min-height: 385px;

box-shadow: 0 -1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);

text-align:center;

}

107

.wthree-offer-grid h4{

font-size: 4em;

margin: 0;

padding: 1.4em 0 0 0;

color: #FFF;

text-transform: uppercase;

letter-spacing: 22px;

}

.wthree-offer-grid p{

margin: 2em auto 0;

font-size: 0.875em;

color: #FFF;

width: 64%;

}

.click-button{

margin: 2em 0 0 0;

}

.click-button a{

color: #383838;

font-size: .875em;

padding: .5em 2em;

background: #FFF;

border-radius: 5px;


}

.click-button a:hover{

background:#fd5c63;

108

color:#FFF;

}

/*-- //offer --*/

/*-- news --*/

.news{

padding: 4em 0;


}

.news-heading h3 {

text-align: center;

margin: 0;

font-size: 3em;

color: #383838;


}

.news-heading p {

text-align: center;

margin: 1em 0 0 0;

font-size: .875em;

color: #383838;

}

.news-grids {

margin: 4em 0 0 0;

}

.agile-news-grid-info{

background: #FFF;

padding: .5em;

109

}

.news-grid-info-img a img{

width:100%;

}

.news-grid-info-bottom{

padding: 1em;

}

.news-grid-info-bottom-text {

margin: 1em 0 0 0;

}

.news-grid-info-bottom-text a{

color: #fd5c63;

font-size: 1em;

margin: 0;

font-weight: 600;


}

.news-grid-info-bottom-text a:hover{

color:#383838;

}

.news-grid-info-bottom-text p{

margin: 1em 0 0 0;

font-size: .875em;

color: #BBBBBB;

line-height: 1.8em;

}

.admin{

110

float:left;

}

.admin a{

color:#383838;

font-size:.875em;

margin:0;


}

.admin a:hover{

color:#fd5c63;

}

.time{

float: left;

margin-left: 7em;

}

.time p{

color:#383838;

font-size:.875em;

margin:0;

}

/*-- //news --*/

/*-- footer --*/

.footer{

padding: 4em 0;

background: #FFF;

}

.footer-grid-heading h4{

111

color:#383838;

font-size:2em;

margin:0;

}

.footer-grid-info {

margin: 1em 0 0 0;

}

.footer-grid-info p{

margin:0;

font-size: .875em;

color: #BBBBBB;

line-height: 1.8em;

}

.footer-grid-info p span{

display:block;

}

.footer-grid-info p span a{

color: #BBBBBB;


}

.footer-grid-info p span a:hover{

color: #fd5c63;

}

.footer-grid-info ul{

padding:0;

margin:0;

}

112

.footer-grid-info ul li{

display:block;

}

.footer-grid-info ul li a{

font-size: .875em;

color: #BBBBBB;

line-height: 1.8em;


}

.footer-grid-info ul li a:hover{

color:#fd5c63;

}

.social-grid{

margin: 1em 0 0 0;

}

.social {

margin: 1em 0 0 0;

}

.social ul{

padding:0;

margin:0;

}

.social ul li{


}

.social ul li a {

color: #333;

113

text-align: center;

}

.social ul li a i.fa.fa-facebook{

height: 40px;

width: 40px;

background: #383838;

line-height: 40px;

color: #FFF;

border-radius: 50%;





transition:0.5s all;

-webkit-transition:0.5s all;

-moz-transition:0.5s all;

-o-transition:0.5s all;

-ms-transition:0.5s all;

}

.social ul li a i.fa.fa-facebook:hover {

height: 40px;

width: 40px;

line-height: 40px;

background: #F44336;

}

.social ul li a i.fa.fa-twitter{

height: 40px;

114

width: 40px;


line-height: 40px;

color: #FFF;

border-radius: 50%;










}

.social ul li a i.fa.fa-twitter:hover{

height: 40px;

width: 40px;

line-height: 40px;


}

.social ul li a i.fa.fa-rss{

height: 40px;

width: 40px;


line-height: 40px;

color: #FFF;

115

border-radius: 50%;










}

.social ul li a i.fa.fa-rss:hover{

height: 40px;

width: 40px;

line-height: 40px;


}

.social ul li a i.fa.fa-vk{

height: 40px;

width: 40px;


line-height: 40px;

color: #FFF;

border-radius: 50%;




116







}

.social ul li a i.fa.fa-vk:hover{

height: 40px;

width: 40px;

line-height: 40px;


}

.social ul li:nth-child(2){

margin:0 .5em;

}

.social ul li:nth-child(3){

margin:0 .5em 0 0;

}

.footer-grid-info form input[type="email"] {

background: #fff;

box-shadow: none !important;

padding: 10px 10px;

color: #BBBBBB;

font-size: .875em;

width: 100% !important;

font-weight: 400;

117

border: 1px solid #BBBBBB;

margin: 0 0 1em 0;

}

.footer-grid-info form input[type="email"]:focus {

outline: none;

}

.footer-grid-info form input[type="submit"] {

border: solid 2px #383838;

color: #383838;

font-size: .875em;

padding: .5em 2em;


background: none;

border-radius: 5px;

-webkit-border-radius: 5px;

-ms-border-radius: 5px;

-moz-border-radius: 5px;

-o-border-radius: 5px;

}

.footer-grid-info form input[type="submit"]:hover{

color:#fd5c63;

border:solid 2px #fd5c63;






118

}

/*-- //footer --*/

/*-- a-about --*/

.a-grid{

padding: 4em 0;


}

.about-bg{

background: url(../images/gorga.jpg) no-repeat 0px 0px;


position: inherit;

min-height: 205px;

}

.about-top-banner {

padding: .5em 0;

border-bottom: solid 1px rgba(255, 255, 255, 0.23);


margin: 0 auto;

}

.agileits-a-about-left {

padding: 0;

}

.agileits-a-about-grids {

margin: 4em 0 0 0;

background: #FFF;

padding: 1em;

}

119

.agileits-a-about-left img{

width:100%;

}

.agileits-a-about-right h3{

color: #fd5c63;

font-size: 2em;

margin: 0;

}

.agileits-a-about-right h4{

color: #383838;

font-size: .875em;

margin: 1em 0;

font-weight: 600;


line-height: 1.8em;

}

.agileits-a-about-right p{

margin: 1em 0 0 0;

font-size: .875em;

color: #BBBBBB;

line-height: 1.8em;

}

.agileits-a-about-right p span{

display: block;

margin: 1em 0 0 0;

}

/*-- //a-about --*/

120

/*-- different --*/

.different{

background: url(../images/gorga.jpg) no-repeat 0px 0px;

padding: 4em 0;


}

.w3-different-heading h3,.agileinfo-team-heading h3,.more-bottom-heading h3{

text-align: center;

margin: 0;

font-size: 3em;

color: #FFF;


}

.w3-different-heading p,.agileinfo-team-heading p,.more-bottom-heading p {

text-align: center;

margin: 1em 0 0 0;

font-size: .875em;

color: #FFF;

}

.w3agile-different-info p{

text-align: center;

margin: 3em auto 0;

font-size: .875em;

color: #FFF;

width: 73%;

line-height: 1.8em;

}

121

.w3agile-button {

margin: 3em 0 0 0;

text-align: center;

}

.w3agile-button a{

border: solid 2px #FFFFFF;

color: #FFFFFF;

font-size: .875em;

padding: .5em 2em;


background: none;

border-radius: 5px;





}

.w3agile-button a:hover{

border: solid 2px #FD5C63;

color: #FD5C63;

}

.jarallax {

position: relative;


background-repeat: no-repeat;

background-position: 50% 50%;

}

122

/*-- //different --*/

/*-- team --*/

.team{

padding: 4em 0;


}

.agileinfo-team-heading h3,.more-bottom-heading h3{

color:#383838;

}

.agileinfo-team-heading p,.more-bottom-heading p{

color:#383838;

}

.team-grids {

margin: 4em 0 0 0;

}

.agileinfo-team-grid{

position:relative;

}

.agileinfo-team-grid img{

width:100%;

}

.captn {

background: rgba(47, 47, 47, 0.42);

padding: 2em;

position: absolute;

border: solid 1px #FFF;

left: 15%;

123

bottom: -100%;

text-align: center;

width: 200px;

height: 200px;

-webkit-transition: .5s all;

transition: .5s all;

-moz-transition: .5s all;

}

.captn h4 {

font-size: 1.5em;

color: #fff;

}

.captn p {

margin: 0.3em 0 .8em;

color: #DCEDF9;

font-size: .875em;

}

.agileinfo-team-grid {

overflow: hidden;

}

.agileinfo-team-grid:hover .captn{

bottom: 11%;

}

.w3l-social {

margin: 1em 0 0 0;

}

.w3l-social ul{

124

padding:0;

margin:0;

}

.w3l-social ul li{


}

.w3l-social ul li a {

color: #333;

text-align: center;

}

.w3l-social ul li a i.fa.fa-facebook{

height: 40px;

width: 40px;

background: #FFFFFF;

line-height: 40px;

color: #383838;

border-radius: 50%;










}

125

.w3l-social ul li a i.fa.fa-facebook:hover {

height: 40px;

width: 40px;

line-height: 40px;


color: #FFFFFF;

}

.w3l-social ul li a i.fa.fa-twitter{

height: 40px;

width: 40px;


line-height: 40px;

color: #383838;

border-radius: 50%;










}

.w3l-social ul li a i.fa.fa-twitter:hover{

height: 40px;

width: 40px;

126

line-height: 40px;


color: #FFFFFF;

}

.w3l-social ul li a i.fa.fa-rss{

height: 40px;

width: 40px;


line-height: 40px;

color: #383838;

border-radius: 50%;










}

.w3l-social ul li a i.fa.fa-rss:hover{

height: 40px;

width: 40px;

line-height: 40px;


color: #FFFFFF;

127

}

/*-- //team --*/

/*-- services --*/

.agileits-services-grids {

margin: 4em 0 0 0;

}

.services-grid-info h4{

color: #383838;

font-size: 2em;

margin: 0;


line-height: 1.8em;

}

.services-grid-info p{

margin: 1em 0 0 0;

font-size: .875em;

color: #383838;

line-height: 1.8em;

}

.services-grid-info:nth-child(2){

margin:2em 0;

}

.more-offer{

background: url(../images/3.jpg) no-repeat 0px 0px;

padding: 4em 0;


}

128

.more-bottom{

padding: 4em 0;


}

.more-bottom-grids {

margin: 4em 0 0 0;

}

.more-bottom-grid-img img{

width:100%;

}

.more-bottom-grid-info {

background: #FFF;

padding: .5em;

}

.more-bottom-grid-text {

padding: 1em;

}

.more-bottom-grid-text h5{

margin: 0;

font-size: .875em;

color: #383838;

line-height: 1.8em;

}

.more-bottom-grid-text p{

margin: 1em 0 0 0;

font-size: .875em;

color: #BBBBBB;

129

line-height: 1.8em;

}

/*-- //services --*/

/*--Shortcodes--*/

.codes {

padding: 4em 0;


}

.codes-heading {

text-align: center;

}

h3.hdg {

font-size: 2.5em;

color:#000 !important;

}

.show-grid [class^=col-] {

background: #fff;

text-align: center;

margin-bottom: 10px;

line-height: 2em;

border: 10px solid #f0f0f0;

}

.show-grid [class*="col-"]:hover {

background: #e0e0e0;

}

.grid_3{

margin-bottom:2em;

130

}

.xs h3, h3.m_1{

color:#000;

font-size:1.7em;

font-weight:300;

margin-bottom: 1em;

}

.grid_3 p{

color: #555;

font-size: 0.85em;

margin-bottom: 1em;

font-weight: 300;

}

.grid_4{

background:none;

margin-top:50px;

}

.label {

font-weight: 300 !important;

border-radius:4px;

}

.grid_5{

background:none;

padding:2em 0;

}

.grid_5 h3, .grid_5 h2, .grid_5 h1, .grid_5 h4, .grid_5 h5, h3.hdg {

margin-bottom:1em;

131

color: #333;

}

.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table >

tbody > tr > td, .table > tfoot > tr > td {

border-top: none !important;

}

.tab-content > .active {

display: block;

visibility: visible;

}

.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination >

.active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {

z-index: 0;

}

.badge-primary {

background-color: #03a9f4;

}

.badge-success {

background-color: #8bc34a;

}

.badge-warning {

background-color: #ffc107;

}

.badge-danger {

background-color: #e51c23;

}

.grid_3 p{

line-height: 2em;

132

color: #888;

font-size: 0.9em;

margin-bottom: 1em;

font-weight: 300;

}

.bs-docs-example {

margin: 1em 0;

}

section#tables p {

margin-top: 1em;

}

.tab-container .tab-content {

border-radius: 0 2px 2px 2px;

border: 1px solid #e0e0e0;

padding: 16px;

background-color: #ffffff;

}

.table td, .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th,

.table>thead>tr>td, .table>thead>tr>th {

padding: 15px!important;

}

.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table >

tbody > tr > td, .table > tfoot > tr > td {

font-size: 0.9em;

color: #555;

border-top: none !important;

}

.tab-content > .active {

133

display: block;

visibility: visible;

}

.label {

font-weight: 300 !important;

}

.label {

padding: 4px 6px;

border: none;

text-shadow: none;

}

.nav-tabs {

margin-bottom: 1em;

}

.alert {

font-size: 0.85em;

}

h1.t-button,h2.t-button,h3.t-button,h4.t-button,h5.t-button {

line-height:1.8em;

margin-top:0.5em;

margin-bottom: 0.5em;

}

li.list-group-item1 {

line-height: 2.5em;

}

.input-group {


134

}

.in-gp-tl{

padding:0;

}

.in-gp-tb{

padding-right:0;

}

.list-group {


}

ol {


}

h2.typoh2{

margin: 0 0 10px;

}

@media (max-width:768px){

.grid_5 {

padding: 0 0 1em;

}

.grid_3 {

margin-bottom: 0em;

}

}


h1, .h1, h2, .h2, h3, .h3 {

margin-top: 0px;

135

margin-bottom: 0px;

}

.grid_5 h3, .grid_5 h2, .grid_5 h1, .grid_5 h4, .grid_5 h5, h3.hdg, h3.bars {

margin-bottom: .5em;

}

.progress {

height: 10px;


}

ol.breadcrumb li,.grid_3 p,ul.list-group li,li.list-group-item1 {

font-size: 14px;

}

.breadcrumb {


}

.well {

font-size: 14px;


}

h2.typoh2 {

font-size: 1.5em;

}

.grid_4 {

margin-top: 30px;

}

}


136

.table h1 {

font-size: 26px;

}

.table h2 {

font-size: 23px;

}

.table h3 {

font-size: 20px;

}

.label {

font-size: 53%;

}

.alert,p {

font-size: 14px;

}

.pagination {

margin: 20px 0 0px;

}

}

@media (max-width: 320px){

.grid_4 {

margin-top: 18px;

}

.alert, p,ol.breadcrumb li, .grid_3 p,.well, ul.list-group li, li.list-group-item1,a.list-group-item {

font-size: 13px;

}

.alert {

137

padding: 10px;


}

ul.pagination li a {

font-size: 14px;

padding: 5px 11px !important;

}

.list-group {


}

.well {

padding: 10px;

}

.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td,

.table > tbody > tr > td, .table > tfoot > tr > td {

font-size: 0.81em;

}

.table td, .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th,

.table>thead>tr>td, .table>thead>tr>th {

padding: 13px!important;

}

.codes .row {

margin: 0;

}

}

/*--//Shortcodes--*/

/*-- gallery --*/

.gallery {

138

margin: 4em 0 0 0;

}

.gallery-bg {

float: left;

width: 40%;

height: auto;

padding: .1em;

-webkit-transition: -webkit-transform .15s ease;

-moz-transition: -moz-transform .15s ease;

-o-transition: -o-transform .15s ease;

-ms-transition: -ms-transform .15s ease;

transition: transform .15s ease;

position: relative;

}

.gallery-bg a img{

}

.gallery-bg a img{

width:100%;

}

.gallery-small{

float: left;

width: 20%;

height: auto;

padding: .1em;

-webkit-transition: -webkit-transform .15s ease;

-moz-transition: -moz-transform .15s ease;

139

-o-transition: -o-transform .15s ease;

-ms-transition: -ms-transform .15s ease;

transition: transform .15s ease;

position: relative;

}

.gallery-small a img{

width:100%;

}

.align-center {

text-align: center;

}

/*-- Effect 2--*/

.gallery-bg-text:after {


position: absolute;

width: 400px;


height: 175px;

content: '';




}

.effect-2 {




140

}

.effect-2:after {

top: 27px;

left: 27px;









background: url(../images/search.png) no-repeat 50% 50% rgba(0, 0, 0, 0.36);

opacity: 0;

}

.gallery-bg:hover.gallery-bg-text{

background:#FF7200;


}

.gallery-bg:hover .gallery-bg-text:after {





opacity: 1;

}

/*--//Effect 2--*/

141

/*-- Effect 3--*/

.gallery-small-text:after {


position: absolute;

width: 175px;


height: 175px;

content: '';




}

.effect-3 {




}

.effect-3:after {

top: 27px;

left: 27px;








142


background: url(../images/search.png) no-repeat 50% 50% rgba(0, 0, 0, 0.36);

opacity: 0;

}

.gallery-small:hover.gallery-small-text{

background:#FF7200;


}

.gallery-small:hover .gallery-small-text:after {





opacity: 1;

}

/*--//Effect 2--*/

/*-- //gallery --*/

/*-- contact --*/

.contact{

padding: 4em 0;


}

.agile-contact-form{

padding: 2em 1em;


margin: 4em 0 0 0;

}

143

.contact-form-top h3{

color: #383838;

font-size: 2em;

margin: 0;

}

.contact-form-top p{

color: #BBBBBB;

margin: 2em 0;

font-size: .875em;

line-height: 1.8em;

}

.contact-address{

margin: 3em 0 0 0;

}

.contact-address ul{

padding:0;

margin:0;

}

.contact-address ul li{

display:block;

margin:1em 0;

}

.contact-address ul li span{

color: #BBBBBB;

font-size: .875em;

margin-left:1em;

}

144

.contact-address ul li span a{

color: #BBBBBB;


}

.contact-address ul li span a:hover{

color:#383838;

}

.contact-address ul li i.fa.fa-phone,.contact-address ul li i.fa.fa-map-marker{

height: 40px;

width: 40px;


line-height: 40px;

text-align: center;

color: #FFF;

border-radius: 50%;










}

.contact-form-grid {

margin: 2em 0 0 0;

145

}

.contact-form-grid input[type="text"] {


background: none;

border: 1.5px solid #BBBBBB;

width: 100%;

outline: none;

padding: 10px 15px 10px 15px;

font-size: .9em;

color: #BBBBBB;

margin-bottom: 1.5em;

}

.contact-form-grid input[type="email"] {


background: none;


width: 100%;

outline: none;


font-size: .9em;

color: #BBBBBB;

margin: 0 0 1.5em 0;

}

.contact-form-grid textarea {

background: none;


width: 100%;

146

display: block;

height: 150px;

outline: none;

font-size: 0.9em;

color: #BBBBBB;

resize: none;


margin-bottom: 1em;

}

button.btn1{


color: #383838;

font-size: .875em;

padding: .5em 2em;


background: none;

border-radius: 5px;





}

button.btn1:hover{

color: #fd5c63;

border: solid 2px #fd5c63;



147




}

.w3agile-map{

padding: 2em;


margin: 2em 0 0 0;

}

.w3agile-map h3{

color: #383838;

font-size: 2em;

margin: 0 0 1em 0;

}

.w3agile-map iframe{

border: none;

min-height: 300px;

width: 100%;

}

/*-- //contact --*/

/*-- single --*/

.blog {

padding: 4em 0;


}

.blog-left {

padding: 1em;

148


}

.single-left-left p{

margin: 0 0 1em;

font-size: .875em;

font-weight: 500;

color: #383838;

}

.single-left-left p a {

color: #fd5c63;


}

.single-left-left p a:hover{

color:#383838;

}

.single-left-left img{

width:100%;

}

.left-single{

padding-right: 0;

}

.response {

margin: 1em 0;

padding: 1em;


}

.response h3 {

149

font-size: 1.5em;

margin: 0 0 1em 0;

color: #fd5c63;

}

.media.response-info {

margin-top: 3em;

}

.media-left.response-text-left {

width: 13%;

float: left;

}

.media-left.response-text-left a img {

width: 80%;

}

.media-left.response-text-left h5 a {

color: #BBBBBB

}

.media-left.response-text-left h5 a:hover {

color: #3b3b3b;


}

.response-text-left h5 {

font-size: .875em;

margin: 1em 0 0 0;

}

.response-text-right p {

color: #383838;

150

font-size: .875em;

margin: 0 0 1em;

line-height: 1.8em;

}

.response-text-right ul {

padding: 0;

text-align: right;

}

.response-text-right ul li {


color: #AFAFAF;

font-size: .875em;

margin-right: 1em;

}

.response-text-right ul li a {

color: #fd5c63;


}

.response-text-right ul li a:hover {

color: #3b3b3b;

}

.media.response-info {

margin-top: 1em;

}

.opinion {

padding: 1em;


151

}

.opinion h2{

font-size: 1.5em;

margin: 0;

padding-bottom: .5em;

color: #fd5c63;

}

.opinion form{

margin: 1em 0 0 0;

}

.opinion form input[type="text"] {

width: 100%;

color: #BBBBBB;

outline: none;

font-size: .875em;

padding: .5em;

margin: 0 .5em 1em 0;

border: solid 1px #BBBBBB;

-webkit-appearance: none;

}

.opinion form textarea {

resize: none;

width: 100%;

color: #BBBBBB;

font-size: .875em;

outline: none;

resize: none;

152

padding: .5em;

border: solid 1px #BBBBBB;

min-height: 125px;

}

.opinion form input[type="submit"] {


color: #383838;

font-size: .875em;

padding: .5em 2em;

margin: 1em 0 0 0;


background: none;

border-radius: 5px;




}

.opinion form input[type="submit"]:hover {

color: #fd5c63;

border: solid 2px #fd5c63;






}

.blog-left-bottom p{

153

font-size: .875em;

margin: 0.5em 0;

color: #383838;

line-height: 1.8em;

}

.blog-left-bottom {

margin: .5em 0;

}

.blog-top-right-grid {

padding: 0 !important;

}

.categories {

padding: 1em;


}

.categories:nth-child(2){

margin:1em 0 0 0;

}

.categories h3 {

font-size: 1.5em;

margin: 0;

color: #fd5c63;

}

.categories ul {

margin: 1em 0 0 0;

padding: 0;

}

154

.categories ul li {

display: block;

background: url(../images/arrow.png) no-repeat 0px 2px;

margin-bottom: 1em;

}

.categories ul li a {

font-size: .875em;

margin: 0;

color: #383838;

padding-left: 2em;

}

.categories ul li a:hover {

color: #BBBBBB;


transition: .5s all;

-webkit-transition: .5s all;

-moz-transition: .5s all;

-o-transition: .5s all;

-ms-transition: .5s all;

}

/*-- //single --*/

/*-- responsive --*/


.banner {

left: 9%;

}

.about-top-banner {

155


}

}


.banner {

left: 7%;

}

.about-top-banner {


}

}


.banner {

left: 4%;

}

.about-top-banner {


}

}


.about-grid-info {

min-height: 205px;

}

.about-grid-info h4 {

font-size: 1.5em;

}

.effect-1:after {

156

top: 21px;

left: 36px;

}


width: 165px;

height: 165px;

}

.time {

margin-left: 6em;

}


width: 325px;

height: 135px;

}


width: 135px;

height: 135px;

}

.captn {

bottom: -100%;

width: 165px;

height: 165px;

padding: 1em;

}

.captn h4 {

font-size: 1.4em;

}

157

}


.banner {

left: 2%;

}

.about-top-banner {


}

}


.banner {

left: 11%;

}

.about-top-banner {


}

.about-grid {

float: left;

width: 25%;

}

.about-grid-info {

min-height: 150px;

}


line-height: 7em;

font-size: 1.3em;

}

158


width: 120px;

height: 120px;

top: 16px;

left: 31px;

}

.wthree-offer-grid h4 {

font-size: 2.5em;

}

.wthree-offer-grid {

min-height: 300px;

}

.time {

margin-left: 1.7em;

}

.footer-grid:nth-child(2) {

margin: 1em 0;

}

.footer-grid:nth-child(3) {

margin: 0 0 1em 0;

}


width: 25%;

float: left;

}

.captn {

width: 142px;

159

height: 142px;

left: 10%;

}

.w3l-social ul li a i.fa.fa-facebook,.w3l-social ul li a i.fa.fa-twitter,.w3l-social ul li a i.fa.fa-rss {

height: 30px;

width: 30px;

line-height: 34px;

}

.w3l-social ul li a i.fa.fa-facebook:hover,.w3l-social ul li a i.fa.fa-twitter:hover,.w3l-social ul li

a i.fa.fa-rss:hover {

height: 30px;

width: 30px;

line-height: 34px;

}

.captn h4 {

font-size: 1.2em;

}

.agileinfo-team-grid:hover .captn {

bottom: 3%;

left: 10%;

}

.more-bottom-grid {

float: left;

width: 33.33%;

}


width: 260px;

height: 115px;

160

}

.effect-2:after {

top: 15px;

left: 15px;

}

.effect-3:after {

top: 15px;

left: 15px;

}


width: 115px;

height: 115px;

}

.blog-top-left-grid {

padding: 0;

}

.blog-top-right-grid {

margin: 1em 0 0 0;

}

.agileits-a-about-right {

margin: 1em 0 0 0;

}

.news-grid {

float: left;

width: 33.33%;

}

}

161


.banner {

left: 2%;

}

.about-top-banner {


}

}


.banner {

left: 0%;

width: 100%;

}

.about-top-banner {


}

.slider {

min-height: 518px;

}

}


.about-grid-info {

min-height: 315px;

}

.about-grid {

float: left;

width: 50%;

162

}


width: 250px;

height: 250px;

}


line-height: 9.5em;

font-size: 2em;

}


top: 30px;

left: 45px;

}

}


.about-grid-info {

min-height: 280px;

}


line-height: 8.5em;

}


width: 215px;

height: 215px;

}

}


163

.banner {

width: 100%;

}

.navbar-default .navbar-toggle {

border-color: #FFF;

color: #FFF;

margin-right: 0;

}

.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {

background: none;

}

.top-banner-left {

width: 50%;

}

.top-nav {

margin: 1em 0 0 0;

float: left;

width: 77%;

}

div#bs-example-navbar-collapse-1 {

padding: 0;

width: 100%;

position: absolute;

top: 4em;

z-index: 999;

}

ul.nav.navbar-nav {

164

float: none;


}

.top-nav ul {

padding: 0;

margin: 0;

}

.top-nav ul li {

display: block;

margin: 0;

float: none;

}

.navbar-default .navbar-nav > li > a {

text-align: center;

border: none;

box-shadow: 0 0 0;

}

.top-nav ul li a {

padding: 1em 0;

}

.slider-grid {

top: 18%;

}

.kb_control_left, .kb_control_right {

top: 50% !important;

}

.slider {

165

min-height: 480px;

}


font-size: 1.2em;

}

.about-grid {

float: left;

width: 50%;

}

.about-grid-info {

min-height: 267px;

}

.about-grid:nth-child(3){

margin:1em 0 0 0;

}


margin:1em 0 0 0;

}


font-size: 2em;

line-height: 7.5em;

}


width: 200px;

height: 200px;

top: 32px;

left: 48px;

166

}


font-size: 2em;


}


min-height: 275px;

}

.news-grid {

float: none;

width: 100%;

}

.time {

margin-left: 22.7em;

}

.news-grid:nth-child(2){

margin:1em 0;

}

.w3l-about-heading h2, .codes-heading h2, .w3l-contact-heading h2 {

font-size: 2.5em;

}

.news-heading h3 {

font-size: 2.5em;

}

.w3-different-heading h3, .agileinfo-team-heading h3, .more-bottom-heading h3 {

font-size: 2.5em;

}

167


width: 50%;

float: left;

}

.agileinfo-team-grid:nth-child(3),.agileinfo-team-grid:nth-child(4){

margin:1em 0 0 0;

}


bottom: 5%;

left: 10%;

width: 235px;

height: 235px;

}

.captn {

padding: 2em;

left: 10%;

width: 235px;

height: 235px;

}

.captn h4 {

font-size: 1.5em;

}

.w3l-social ul li a i.fa.fa-facebook, .w3l-social ul li a i.fa.fa-twitter, .w3l-social ul li a i.fa.fa-rss {

height: 40px;

width: 40px;

line-height: 40px;

}

168

.w3l-social ul li a i.fa.fa-facebook:hover, .w3l-social ul li a i.fa.fa-twitter:hover, .w3l-social ul li


height: 40px;

width: 40px;

line-height: 40px;

}

.more-bottom-grid {

float: none;

width: 100%;

}

.more-bottom-grid:nth-child(2){

margin:1em 0;

}


width: 210px;

height: 92px;

}


width: 90px;

height: 90px;

}

.about {

padding: 2em 0;

}

.offer {

padding: 2em 0;

}

.news {

169

padding: 2em 0;

}

.news-grids {

margin: 2em 0 0 0;

}

.a-grid {

padding: 2em 0;

}

.agileits-a-about-grids {

margin: 2em 0 0 0;

}

.team {

padding: 2em 0;

}

.footer {

padding: 2em 0;

}

.wthree-offer-grid p {

width: 100%;

}

.w3agile-different-info p {

width: 100%;

}


margin: 2em 0 0 0;

}


170

width: 100%;

}

.more-bottom {

padding: 2em 0;

}

.more-bottom-grids {

margin: 2em 0 0 0;

}

.codes {

padding: 2em 0;

}

.gallery {

margin: 2em 0 0 0;

}

.contact {

padding: 2em 0;

}

.agile-contact-form {

margin: 2em 0 0 0;

}

}


.top-nav {

width: 76%;

}

}


171

.top-nav {

margin: 1em 0 0 0;

float: left;

width: 69%;

}

.slider-grid h3 {

font-size: 2em;

}

.slider-grid {


height: 220px;

padding: 3em 0 0 0;

margin: 7em auto 0;

}

.w3l-about-heading p, .codes-heading p, .w3l-contact-heading p {

line-height: 1.8em;

}

.top-banner-left {

width: 100%;

text-align: center;

float: none;

}

.top-banner-right {

float: none;

text-align: center;

margin: 1em 0 0 0;

}

172

.slider {

min-height: 460px;

}

.kb_control_left, .kb_control_right {

top: 59% !important;

}

.kb_icons {

font-size: 26px!important;

}


font-size: 1.5em;

line-height: 7.5em;

}

.about-grid-info {

min-height: 187px;

}


width: 145px;

height: 145px;

top: 20px;

left: 36px;

}

.time {

margin-left: 12.7em;

}

.footer-grid-heading h4 {

font-size: 1.5em;

173

}

.top-nav ul li a {

padding: .5em 0;

}

.news-heading h3 {

font-size: 2em;

}


font-size: 2em;

}

.top-nav ul li a {

font-size: .875em;

}

.different {

padding: 2em 0;

}


font-size: 2em;

}

.captn {

padding: 1em;

left: 11%;

width: 170px;

height: 235px;

bottom: -127%;

}


174

width: 172px;

height: 172px;

padding: 1em;

}

.services-grid-info h4 {

font-size: 1.5em;

}

.gallery-bg {

float: none;

width: 100%;

}

.gallery-bg {

float: none;

width: 100%;

}

.gallery-small {

float: none;

width: 100%;

}


width: 400px;

height: 190px;

}


width: 400px;

height: 400px;

}

175

.contact-form-top h3 {

font-size: 1.5em;

}

.contact-form-top p {

margin: 1em 0;

}

.w3agile-map h3 {

font-size: 1.5em;

}

}


.top-nav {

width: 64%;

}

.about-grid-info {

min-height: 154px;

}


font-size: 1.3em;

line-height: 7em;

}


width: 125px;

height: 125px;

top: 15px;

left: 30px;

}

176



}


width: 146px;

height: 146px;

padding: .5em;

bottom: 3%;

left: 10%;

}

.captn {

padding: .5em;

width: 145px;

height: 235px;

bottom: -160%;

left: 10%;

}

.media-left.response-text-left {

width: 25%;

}


width: 335px;

height: 155px;

}


width: 335px;

height: 335px;

177

}

}


.top-nav {

width: 61%;

}

.about-grid-info {

min-height: 139px;

}


line-height: 6em;

}


width: 120px;

height: 120px;

top: 9px;

left: 24px;

}

.time {

margin-left: 7.7em;

}

.captn {

width: 134px;

height: 134px;

}


width: 134px;

178

height: 134px;

bottom: 2%;

}

.captn h4 {

font-size: 1.3em;

}

.w3l-social ul li a i.fa.fa-facebook, .w3l-social ul li a i.fa.fa-twitter, .w3l-social ul li a i.fa.fa-rss {

height: 30px;

width: 30px;

line-height: 32px;

}

.w3l-social ul li a i.fa.fa-facebook:hover, .w3l-social ul li a i.fa.fa-twitter:hover, .w3l-social ul li


height: 30px;

width: 30px;

line-height: 32px;

}


width: 305px;

height: 140px;

}


width: 305px;

height: 305px;

}

.contact-form-left {

padding: 0;

}

179

.team-grids {

margin: 2em 0 0 0;

}

}


.top-nav {

width: 60%;

}

.about-grid-info {

min-height: 134px;

}


top: 7px;

left: 23px;

}

.time {

margin-left: 5.7em;

}


width: 300px;

height: 135px;

}

.captn {

left: 9%;

}


bottom: 0%;

180

left: 9%;

}


width: 300px;

height: 300px;

}

.sl-wrapper .sl-image .sl-caption {

font-size: .8em;

}

}


.logo h1 a {

font-size: .8em;

}

.top-nav {

width: 61%;

}

.slider-grid h3 {

font-size: 1.5em;

}

.slider-grid {


height: 180px;

padding: 2em 0 0 0;

margin: 6em auto 0;

}

.slider {

181

min-height: 380px;

}

.about-grid {

float: none;

width: 100%;

}

.about-grid-info {

background: url(../images/a.png)no-repeat 50% 50%;

min-height: 175px;

background-size: 72%;

}

.about-grid-info1 {

background: url(../images/a1.png)no-repeat 50% 50%;


}

.about-grid-info2 {



}

.about-grid-info3 {



}


line-height: 7em;

font-size: 1.5em;

}

182


top: 16px;

left: 65px;

width: 145px;

height: 145px;

}

.about-grid{

margin-bottom:1em;

}


margin-bottom:0;

}



font-size: 1.5em;

}

.offer {

padding: 1em 0;

}

.time {

margin-left: 3.7em;

}

.services-grid-info h4 {

font-size: 1.2em;

}

.w3agile-map h3 {

font-size: 1.2em;

183

}

.news-heading h3 {

font-size: 1.5em;

}

.footer-grid-heading h4 {

font-size: 1.2em;

}

.response h3 {

font-size: 1.2em;

}

.opinion h2 {

font-size: 1.2em;

}

.categories h3 {

font-size: 1.2em;

}

.news-grid-info-bottom-text a {

font-size: .875em;

}

.agileits-a-about-right h3 {

font-size: 1.5em;

}

.agileits-a-about-right {

padding: 0;

}


font-size: 1.5em;

184

}


font-size: 1.5em;

}


margin: 2em auto 0;

}


width: 100%;

float: none;

}

.captn {

left: 13%;

width: 200px;

padding: 1.5em;

height: 200px;

}


bottom: 8%;

left: 13%;

width: 200px;

height: 200px;

padding: 1.5em;

}


margin: 1em 0 0 0;

}

185

.services-grid-info:nth-child(2) {

margin: 1em 0;

}

.more-offer {

padding: 2em 0;

}

.more-bottom-grid-text {

padding: 1em 0 0 0;

}

.more-bottom-grid-text p {

margin: .5em 0 0 0;

}

.navbar-toggle {

padding: 6px 10px;

}

.top-nav {

margin: .5em 0 0 0;

}

.logo {

margin: .5em 0 0 0;

}


width: 240px;

height: 110px;

}


width: 240px;

186

height: 240px;

}

.agile-contact-form {

padding: 1em 1em;

}

.contact-form-right {

padding: 0;

margin: 1em 0 0 0;

}

.contact-form-grid {

margin: 1em 0 0 0;

}


padding: 7px 10px;

}

.contact-form-grid input[type="email"] {

padding: 7px 10px;

}

.contact-address {

margin: 2em 0 0 0;

}

.w3agile-map {

padding: 1em;

}

.w3agile-map iframe {

min-height: 190px;

}

187

.categories ul li a {

font-size: .8em;

}

.blog {

padding: 2em 0;

}

.blog-left-bottom p {

font-size: .8em;

}

.single-left-left p {

font-size: .8em;

}

.w3l-about-heading p, .codes-heading p, .w3l-contact-heading p {

font-size: .8em;

}

.about-grids {

margin: 2em 0 0 0;

}

.wthree-offer-grid p {

font-size: 0.8em;

}


min-height: 250px;

}

.news-heading p {

font-size: .8em;

}

188

.news-grid-info-bottom-text p {

font-size: .8em;

}

.footer-grid-info p {

font-size: .8em;

}

.agileits-a-about-right h4 {

font-size: .8em;

}

.agileits-a-about-right p {

font-size: .8em;

}


font-size: .8em;

}

.w3-different-heading p, .agileinfo-team-heading p, .more-bottom-heading p {

font-size: .8em;

}

.services-grid-info p {

font-size: .8em;

margin: 0em 0 0 0;

}

.more-bottom-grid-text p {

font-size: .8em;

}

.sl-wrapper .sl-image .sl-caption {

font-size: .8em;

189

}

.contact-form-top p {

font-size: .8em;

}

.contact-address ul li span {

font-size: .8em;

}


font-size: .8em;

}

.contact-form-grid textarea {

font-size: 0.8em;

}

}

/*-- //responsive --*/

ul{

list-style: none;

}

.wrap_content{

padding: 40px 80px;

}

.common_content{

padding:40px 80px

}

.right_section{

padding:40px 80px

}

190

8. Admin (Index.php)

<div style="

background: -moz-linear-gradient(-40deg, black, green, yellow, orange, blue, indigo, violet);

background: -webkit-gradient(linear, left bottom,

right top, from(red), color-stop(16%,orange), color-stop(32%,yellow), color-stop(48%,green),

color-stop(64%,blue), color-stop(80%,indigo), to(violet));">

<p> </p>

<center><p><a class="btn" href="tambah.php">Tambah Data</a></p></center>

<p> </p>

<p> </p>

<table cellpadding="5" cellspacing="0" border="1">

<tr bgcolor="#CCCCCC">

<th>No.</th>

<th>Nama Wisata</th>

<th>Gambar</th>

<th>Lokasi</th>

<th>Detail</th>

<th>aksi</th>

</tr>

<?php

//iclude file koneksi ke database

include('koneksi.php');

//query ke database dg SELECT table siswa diurutkan berdasarkan NIS paling besar

$query = mysql_query("SELECT * FROM wisata ORDER BY id_wisata DESC") or

die(mysql_error());

191

//cek, apakakah hasil query di atas mendapatkan hasil atau tidak (data kosong atau

tidak)

if(mysql_num_rows($query) == 0){ //ini artinya jika data hasil query di atas

kosong

//jika data kosong, maka akan menampilkan row kosong

echo '<tr><td colspan="8">Tidak ada data!</td></tr>';

}else{ //else ini artinya jika data hasil query ada (data diu database tidak kosong)

//jika data tidak kosong, maka akan melakukan perulangan while

$no = 1; //membuat variabel $no untuk membuat nomor urut

while($data = mysql_fetch_assoc($query)){ //perulangan while dg

membuat variabel $data yang akan mengambil data di database

//menampilkan row dengan data di database

echo '<tr>';

echo '<td>'.$no.'</td>'; //menampilkan nomor urut

echo '<td>'.$data['nama_wisata'].'</td>';

//menampilkan data nis dari database

echo '<td>'.$data['gambar'].'</td>'; //menampilkan

data nama lengkap dari database

echo '<td>'.$data['lokasi'].'</td>'; //menampilkan

data kelas dari database

echo '<td>'.$data['detail'].'</td>'; //menampilkan

data jurusan dari database

echo '<td><a

href="edit.php?id='.$data['id_wisata'].'">Edit</a> / <a href="hapus.php?id='.$data['id_wisata'].'"

onclick="return confirm(\'Yakin?\')">Hapus</a></td>'; //menampilkan link edit dan hapus dimana

tiap link terdapat GET id -> ?id=siswa_id

echo '</tr>';

192

$no++; //menambah jumlah nomor urut setiap row

}

}

?>

</table>

</div>

9. Admin Tambah Data (tambah.php)

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body>


<h3>Tambah Data</h3>

<form action="tambah-proses.php" method="post">

<table cellpadding="3" cellspacing="0">

<tr>

<td>Nama</td>

<td>:</td>

<td><input type="text" name="nama" required></td>

193

</tr>

<tr>

<td>Gambar</td>

<td>:</td>

<td><input name="uploadedfile" type="file" size='14'

tabindex='6'><?php if(!empty($mess_uploadedfile)) { print $mess_uploadedfile; } ?></td>

</tr>

<tr>

<td>Lokasi</td>

<td>:</td>

<td><input type="text" name="lokasi" size="30" required></td>

</tr>

<tr>

<td>Detail</td>

<td>:</td>

<td><input type="text" name="detail" size="500" required></td>

</tr>

<tr>

<tr>

<td> </td>

<td></td>

<td><input type="submit" name="tambah" value="Tambah"></td>

</tr>

</table>

</form>

194

</div>

</body>

</html>

10. Proses Tambah (tambah-proses.php)

<?php

if(isset($_POST['tambah'])){

//inlcude atau memasukkan file koneksi ke database


//jika tombol tambah benar di klik maka lanjut prosesnya

$nama = $_POST['nama'];

$gambar = $_POST['uploadedfile'];

$lokasi = $_POST['lokasi'];

$detail = $_POST['detail'];

//melakukan query dengan perintah INSERT INTO untuk memasukkan data ke database

$input = mysql_query("INSERT INTO wisata VALUES(NULL, '$nama','$gambar','$lokasi',

'$detail')") or die(mysql_error());

//jika query input sukses

if($input){

echo 'Data berhasil di tambahkan! '; //Pesan jika proses tambah sukses

195

echo '<a href="index.php">Kembali</a>'; //membuat Link untuk kembali ke

halaman tambah

}else{

echo 'Gagal menambahkan data! '; //Pesan jika proses tambah gagal

echo '<a href="tambah.php">Kembali</a>'; //membuat Link untuk kembali ke

halaman tambah

}

}else{ //jika tidak terdeteksi tombol tambah di klik

//redirect atau dikembalikan ke halaman tambah

echo '<script>window.history.back()</script>';

}

?>

11. Hapus (hapus.php)

<?php

if(isset($_GET['id'])){


$id = $_GET['id'];

$cek = mysql_query("SELECT id_wisata FROM wisata WHERE id_wisata='$id'") or

die(mysql_error());

if(mysql_num_rows($cek) == 0){

196


}else{

$del = mysql_query("DELETE FROM wisata WHERE id_wisata='$id'");

if($del){

echo 'Data berhasil di hapus! ';

echo '<a href="index.php">Kembali</a>';

}else{

echo 'Gagal menghapus data! ';

echo '<a href="index.php">Kembali</a>';

}

}

}else{


}

?>

12. Koneksi

197

<?php

$server = "localhost";

$user = "root";

$pass = "";

$database = "ta";

$dbconn = mysql_connect("$server","$user","$pass");

if (!$dbconn) die ("Gagal Melakukan Koneksi");

mysql_select_db($database,$dbconn) or die ("Database Tidak Diketemukan di Server");

?>

universitas sumatera utara fakultas matematika dan …

Documents