Perancangan Website Integritas Bangsa (Learning Center) Menggunakan PHP Dan MySQL

PERANCANGAN WEBSITE INTEGRITAS BANGSA

(LEARNING CENTER)

MENGGUNAKAN PHP DAN MYSQL

TUGAS AKHIR

DEA YULIANDA PRATIWI

112406028

PROGRAM STUDI D3 TEKNIK INFORMATIKA

DEPARTEMEN MATEMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SUMATERA UTARA

MEDAN

2014

PERANCANGAN WEBSITE INTEGRITAS BANGSA

(LEARNING CENTER)

MENGGUNAKAN PHP DAN MYSQL

TUGAS AKHIR

Diajukan untuk melengkapi tugas akhir dan memenuhi syarat mencapai gelar Ahli Madya Komputer

DEA YULIANDA PRATIWI 112406028

PROGRAM STUDI D3 TEKNIK INFORMATIKA DEPARTEMEN MATEMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM UNIVERSITAS SUMATERA UTARA

MEDAN 2014

PERSETUJUAN

Judul : Perancangan Website Integritas Bangsa ( Learning

Center ) Menggunakan PHP dan

Kategori : Tugas Akhir

Nama : Dea Yulianda Pratiwi

Nomor Induk Mahasiswa : 112406028

Program Studi : D-3 Teknik Informatika

Departemen : Matematika

Fakultas : Matematika Dan Ilmu Pengetahuan Alam Universitas Sumatera Utara

Disetujui di Medan, Juni 2014

Diketahui Oleh,

Program Studi D3 Teknik Informatika Pembimbing

FMIPA USU Ketua,

Dr. Elly Rosmaini, M.Si Drs. Rachmad Sitepu,M.Si

PERNYATAAN

PERANCANGAN WEBSITE INTEGRITAS BANGSA (LEARNING CENTER)

MENGGUNAKAN PHP DAN MYSQL

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 2014

Dea Yulianda Pratiwi 112406028

PENGHARGAAN

Puji dan syukur penulis panjatkan kepada Tuhan Yang Maha Pemurah dan Maha Penyayang, dengan limpah karunia-Nya Penulis dapat menyelesaikan penyusunan Tugas Akhir ini dengan judul Perancangan Website Integritas Bangsa (Learning Center) Menggunakan PHP Dan MySQL.

Terimakasih penulis sampaikan kepada Drs. Rachmad Sitepu, M.Si selaku pembimbing yang telah meluangkan waktunya selama penyusunan tugas akhir ini. Terimakasih kepada Ibu Dr. Elly Rosmaini, M.Si dan Bapak Syahriol Sitorus, S.Si, M.IT selaku Ketua Program Studi dan Sekretaris Program Studi D3 Teknik Informatika FMIPA USU. Bapak Prof. Dr. Tulus, M.Si dan Ibu Dr. Mardiningsih, M.Si Selaku Ketua dan Sekretaris Departemen Matematika FMIPA USU, Bapak Dr. Sutarman, M.Sc Selaku Dekan FMIPA USU, seluruh staff dan Dosen Program Studi D3 Teknik Informatika FMIPA USU, pegawai FMIPA USU dan rekan-rekan kuliah. Akhirnya tidak terlupakan kepada Ayah A. Boni Siswanto, Ibu Loly Erwita dan keluarga yang selama ini memberikan bantuan dan dorongan yang diperlukan. Semoga Tuhan Yang Maha Esa akan membalasnya.

ABSTRAK

Memperkenalkan Bahasa Inggris, dan musik pada anak sejak dini maupun remaja sangatlah penting. Pada penulisan Tugas Akhir ini, penulis membuat perancangan

website Integritas Bangsa (Learning School) yang merupakan sebuah website yang

digunakan untuk mengakses dan menginput data dari website pada internet. Metode dan rancangan website Integritas Bangsa (Learning Center) ini dikembangkan dengan menggunakan perangkat lunak Macromedia Dreamweaver 8, PHP , MySQL,dan JavaScript sebagai pelengkap. Cara kerja dari website yang dibuat adalah dengan mengakses data yang terdapat pada website Integritas Bangsa (learning Center). Kajian ini dibuat bertujuan untuk menambah wawasan cara membuat website yang sederhana. Website ini berfungsi untuk memberikan kemudahan dalam masyarakat yang mencari informasi dan tempat pendidikan informal untuk menunjang pendidikan anak sejak dini dan untuk memperkenalkan bahwa sebuah website sangat penting dalam perkembangan usaha. serta dapat meningkatkan kualitas sumber daya manusia yang berbasis Teknologi Informasi dan Komunikasi. Sasaran aplikasi ini adalah anak – anak tingkat playgroup sampai dewasa.

DAFTAR ISI

HALAMAN

Persetujuan ii

Pernyataan iii

Penghargaan iv

Abstrak v

Daftar Isi vi

Daftar Gambar viii

Daftar Tabel ix

BAB 1 PENDAHULUAN 1

1.1. Latar Belakang 1

1.2. Rumusan Masalah 4

1.3. Batasan Masalah 4

1.4. Maksud dan Tujuan 5

1.5. Metodelogi Penelitian 5

1.6. Lokasi dan Waktu 7

1.7. Sistematis Penulisan 7

BAB 2 LANDASAN TEORI 9

2.1. Sekilas Tentang Integritas Bangsa School 9

2.2. Pengertian Komputer 9

2.3. Internet 10

2.3.1. Pengertian Internet 10 2.3.2. Sejarah Internet 11 2.3.3. Manfaat Internet 12 2.4. Website World Wide Web (WWW) 13

2.4.1. Pengertian Website 13

2.4.2. Browser Web 14

2.5. HTML 15

2.5.1. Elemen dan Tag HTML 16 2.6. PHP 18

2.6.1. Pengertian PHP 18

2.6.2. Sejarah SIngkat PHP 18 2.6.3. Kelebihan PHP 20 2.6.4. Kelemahan PHP 20

2.6.5. Skrip PHP 21

2.6.5. Integrasi dengan Database 22

2.7. MySQL 24 2.7.1. Pengertian MySQL 24

2.11. JavaScript 28

2.12. Data Flow Diagram (DFD) 28

2.13. Flowchart 30

BAB 3 GAMBARAN SEKILAS INTEGRITAS BANGSA (LEARNING CENTER) 31

3.1. Sekilas Tentang Integritas Bangsa School 31 3.2. Struktur Organisasi Yayasan Ambasador Integritas Bangsa 33 3.3. Visi dan Misi Integritas Bangsa School 33

BAB 4 PERANCANGAN SISTEM 35 4.1. Perancangan Sistem 35

4.2. Spesifikasi Sistem 35

4.3. Gambaran Kerja Sistem 35

4.4. Pembuatan Algoritma dan Flowchart 36

4.5. Tabel Database 40

4.6. Relasi Antar Tabel (ERD) 41

4.7. Data Flow Diagram 43

BAB 5 IMPLEMENTASI SISTEM 45 5.1. Implementasi Sistem 45 5.2. Tujuan Implementasi Sistem 45 5.3. Komponen Utama dalam Sistem 46

5.3.1. Perangkat Keras / Hardware 46 5.3.2. Perangkat Lunak / Software 47 5.3.3. Pengguna / User / Brainware 48 5.4. Uji Program 48 5.5. Evaluasi 55 BAB 6 PENUTUP 56

6.1. Kesimpulan 56

6.2. Saran 57

DAFTAR PUSTAKA 58

DAFTAR GAMBAR

HALAMAN

Gambar 2.1. Tampilan Start Page Macromedia Dreamweaver 8 27

Gambar 2.2. XAMPP Countrol 27

Gambar 4.1. Gambar Kerja Sistem 36

Gambar 4.2. Halaman index.php 37

Gambar 4.3. Kontak.php 38

Gambar 4.4. Gambar diagram Flowchart website Integritas Bangsa 39

Gambar 4.5. Penentuan Atibut pada table buku 41

Gambar 4.6. Penentuan Atribut pada table_foto 42

Gambar 4.7. Gambar Diagram Konteks 43

Gambar 4.8. Gambar DFD level 0 44

Gambar 5.1. Windows XP Profesional 47

Gambar 5.2. Mengaktifkan XAMPP 47

Gambar 5.3. Halaman index.php 49

Gambar 5.4. Halaman inggris.php 50

Gambar 5.5. Halaman musik.php 51

Gambar 5.6. Halaman play.php 52

Gambar 5.7. Halaman galeri.php 53

DAFTAR TABEL

HALAMAN

Tabel 2.1. Simbol Data Flow Diagram (DFD) 29

Tabel 2.2. Simbol Flowchart 30

Tabel 4.1. Tabel Database Tamu 40

Tabel 4.2. Tabel Database Galeri 40

Tabel 4.3. Tabel Notasi dan Keterangan ERD 41

Tabel 4.4. Tabel buku 42

ABSTRAK

Memperkenalkan Bahasa Inggris, dan musik pada anak sejak dini maupun remaja sangatlah penting. Pada penulisan Tugas Akhir ini, penulis membuat perancangan

website Integritas Bangsa (Learning School) yang merupakan sebuah website yang

digunakan untuk mengakses dan menginput data dari website pada internet. Metode dan rancangan website Integritas Bangsa (Learning Center) ini dikembangkan dengan menggunakan perangkat lunak Macromedia Dreamweaver 8, PHP , MySQL,dan JavaScript sebagai pelengkap. Cara kerja dari website yang dibuat adalah dengan mengakses data yang terdapat pada website Integritas Bangsa (learning Center). Kajian ini dibuat bertujuan untuk menambah wawasan cara membuat website yang sederhana. Website ini berfungsi untuk memberikan kemudahan dalam masyarakat yang mencari informasi dan tempat pendidikan informal untuk menunjang pendidikan anak sejak dini dan untuk memperkenalkan bahwa sebuah website sangat penting dalam perkembangan usaha. serta dapat meningkatkan kualitas sumber daya manusia yang berbasis Teknologi Informasi dan Komunikasi. Sasaran aplikasi ini adalah anak – anak tingkat playgroup sampai dewasa.

BAB 1

PENDAHULUAN

1.1Latar Belakang

Perkembangan internet sekarang ini sangat jauh berbeda dengan masa awal kehadirannya. Kini internet telah banyak digunakan oleh berbagai instansi, organisasi dan perusahaan untuk mendukung kelancaran usaha dari sekedar penanganan pertukaran informasi, pengolahan data sampai ke penyelenggaraan bisnis lainnya. Kebutuhan akan informasi yang akurat dan tepat waktu untuk menyajikan data yang lengkap sangatlah diperlukan oleh suatu instansi baik instansi pemerintah maupun instansi swasta, organisasi dan perusahaan.

Kini internet yang popular sering disebut dengan Web atau sering juga disebut perangkat lunak berbasis Web yang telah berkembang dengan pesat baik dari segi penggunaan, ukuran, bahasa yang digunakan dan kompleksitasnya. Aplikasi web pada mulanya hanyalah berupa situs yang bersifat statis dan navigated oriented, tapi saat ini telah banyak yang bersifat dinamis, interaktif dan task oriented yang digunakan dalam system informasi dan telekomunikasi. Situs web merupakan kumpulan halaman

web yang berhubungan dan saling terkait. Keterhubungan ini mempengaruhi keputusan para perancang web dalam menangani setiap elemen web dan proses-prosesnya. Dalam dunia pendidikan komputer memiliki peranan besar khususnya

dalam kegiatan belajar mengajar. Masyarakat memanfaatkan perkembangan teknologi tersebut untuk mempermudah penyelesaian berbagai pekerjaan. Masyarakat harus memiliki pengetahuan agar mampu mengikuti perkembangan teknologi. Kualitas pengetahuan seseorang ditentukan oleh berapa lama manusia tersebut mengenyam pendidikan formal maupun nonformal, sebab melalui pendidikan manusia akan menjadi tahu dari yang mereka tidak ketahui sebelumnya.

Dewasa ini pendidikan formal saja tidak cukup untuk mendapatkan kedudukan yang baik dalam suatu instansi. Beberapa instansi menuntut kita untuk pandai berbahasa lain selain bahasa Indonesia, terutama bahasa internasional yaitu bahasa inggris dan menuntut beberapa keahlian lainnya. Bahkan komputer dan alat komunikasi lainnya menggunakan bahasa inggris sebagai bahasa standart. Oleh karena itu, masyarakat pada umumnya harus mengetahui informasi agar mampu mengatasi masalah yang mungkin akan timbul akibat perkembangan teknologi yang semakin canggih.

Pemanfaatan komputer selalu dikaitkan dengan berbagai hal, salah satunya dalam proses pencarian informasi. Namun beberapa dari mereka masih melakukan kegiatan secara manual. Apabila kegiatan tersebut dilakukan dengan menggunakan website dan aplikasi pemrograman, maka proses tersebut akan menjadi lebih efektif dan efisien.

Atas dasar pertimbangan itu, maka penulis tertarik membuat website

pengenalan suatu instansi dengan judul : ’’PERANCANGAN WEBSITE

INTEGRITAS BANGSA (LEARNING CENTER) MENGGUNAKAN PHP DAN MYSQL’’.

Agar dapat menjadi acuan berkembang atau tidaknya dalam bidang pendidikan. Seiring dengan perkembangan teknologi informasi di Indonesia yang akurat dan tepat waktu untuk menyajikan data yang lengkap sangatlah diperlukan oleh suatu organisasi. Maka penulis dituntut untuk bisa mempunyai sebuah

homepage/website sendiri. Hal ini sangatlah wajar mengingat manfaat yang kita dapatkan dengan mempunyai website sendiri dan database yang termanajemen dengan baik. Kemudahan orang lain untuk mengakses data dan informasi yang benar melalui internet akan menjadi nilai tambah bagi instansi kantor tersebut sebagai suatu syarat yang mutlak untuk mempromosikan daerah tersebut dalam bidang pendidikan informal dan bisa lebih mudah.

Diharapkan dengan adanya website ini dapat mempermudah pengenalan dunia pendidikan informal pada bahasa internasional yaitu bahasa inggris dan seni musik . Semua kegiatan pengaksesan informasi dapat dilakukan dengan efisien dan efektif serta mempermudah masyarakat mendapat informasi.

1.2Rumusan Masalah

Pada umumnya setiap organisasi tidak akan terlepas dari masalah dalam aktifitasnya untuk mencapi tujuan. Masalah yang akan dipecahkan adalah bagaimana Integritas Bangsa (Learning Center) dapat memanfaatkan aplikasi web sebagai suatu sarana untuk penyajian dan mengirimkan informasi dengan lebih cepat dan mudah bagi masyarakat umum. Adapun permasalahan yang akan dibahas dalam tulisan ini adalah sebagai berikut:

1. Bagaimana cara pembuatan database untuk mendukung sistem pengiriman saran dan komentar yang mengunjungi website Integritas Bangsa.

2. Bagaimana cara mempermudah meneruskan berbagai informasi kepada setiap orang yang ingin kursus bahasa inggris, kursus musik, dan playgroup.

3. Bagaimana cara membuat suatu website sehingga dapat menarik perhatian pengunjung situs baik dari segi kalangan masyarakat umum maupun dari yayasan itu sendiri.

1.3Batasan Masalah

Batasan masalah yang dilakukan penulis dalam membangun perancangan website

Integritas Bangsa (Learning Center) ini adalah :

1. Website Integritas Bangsa ini hanya menampilkan kelebihan pada masing - masing bidang kursus yang ada pada Yayasan Ambasador Integritas Bangsa. 2. Website ini hanya menyediakan sarana untuk berkomentar dan memberi saran

3. Memberikan informasi berupa fasilitas, kegiatan, staf pengajar. Dalam tugas akhir ini penulis tidak membahas data akademik siswa, dan data keuangan yayasan Ambasador Integritas Bangsa.

4. Website ini tidak menyajikan form pendaftaran.

5. Memberikan informasi yang perlu disampaikan pada semua orang ataupun mengabadikan setiap kegiatan dan acara yang ada disekolah tersebut.

1.4Maksud dan Tujuan

Adapun maksud penulisan tugas akhir ini adalah untuk memenuhi syarat menyelesaikan perkuliahan di program studi D3 Teknik Informatika Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera Utara. Adapun tujuan dari penelitian ini adalah sebagai berikut:

1. Untuk membantu orang lain dalam mendapatkan info tentang kursus bahasa inggris, kursus musik, kursus matematika agar proses lebih cepat.

2. Merancang website sehingga Yayasan Ambasador Integritas Bangsa School dapat lebih efektif dan efisien dalam memperomosikan sekolahnya pada media

internet dengan website yang saya rancang tersebut.

1.5 Metodelogi Penelitian

Metodologi Penelitian adalah langkah – langkah sistematik yang digunakan untuk mengerjakan atau meyelesaikan suatu masalah. Metode penelitian digunakan sebagai pedoman dalam melaksanakan penelitian agar hasil yang dicapai tidak menyimpang

dari tujuan yang ditentukan sebelumnya. Metode penelitian yang digunakan dalam penelitian ini antara lain :

1. Metode Pengumpulan Data

Metode pengumpulan data yang meliputi metode observasi yaitu metode pengumpulan data dengan cara bertanya langsung ke petugas yayasan yang bersangkutan mengenai informasi sekolah, metode dokumentasi yaitu Metode pengumpulan data dengan melihat laporan yang telah ada, dan metode studi pustaka yaitu pengumpulan data atau informasi yang diambil dari buku-buku yang berhubungan dengan HTML, PHP dan MySQL.

2. Membuat Rancangan sistem pada Website.

Pembuatan program dilakukan di Macromedia Dreamweaver 8, dan membuat

design system. Kemudianmembuat desain halaman web yang menarik dan simple

yang membuat tampilan menjadi indah dan menarik perhatian masyarakat. Dan Setelah diketahui data apa saja yang dibutuhkan sebagai sarana pendukung dalam pembuatan website ini, maka akan dilanjutkan dengan perancangan sistem pada

website. Disini perancangan sistem menggunakan Data Flow Diagram (DFD) sebagai gambaran sistemnya, dan ERD sebagai rancangan relasi tabelnya.

3. Implementasi sistem.

Sedangkan untuk implementasi pembuatan website nya penulis menggunakan HTML, PHP sebagai bahasa pemrograman dan MySQL sebagai databasenya. 4. Pengujian Program

Menguji apakah program yang dibuat telah berhasil berjalan sesuai dengan keinginan dan melakukan perbaikan kesalahan jika masih terdapat error pada

Tahap akhir dari penelitian yang dilakukan, yaitu membuat laporan tentang penelitian yang telah dilakukan.

6. Revisi laporan Tugas Akhir.

1.6 Lokasi dan Waktu

Dalam menyusun tugas akhir ini penulis melakukan metode penelitian untuk memperoleh data yang dibutuhkan, sehingga mempermudah penulis dalam menyusun tugas akhir dan dapat diselesaikan dengan baik. Adapun lokasi penelitian yang penulis lakukan yakni di kantor Yayasan Ambasador Integritas Bangsa (Learning Center) yang berada di Jln. Binjai km 8,5 No.16/470 Medan Kampung Lalang. Untuk mengetahui sistem yang sedang berjalan pada saat ini, penulis membutuhkan waktu beberapa hari yaitu dari bulan Desember 2014 sampai Mei 2013.

1.7 Sistematika Penulisan

Secara garis besar tugas akhir ini terdiri dari 5 (lima) bab dan beberapa lampiran. Dimana setiap bab terdiri dari sub – sub bab. Adapun sistematika penulisan Laporan Tugas Akhir adalah sebagai berikut :

BAB 1: PENDAHULUAN

Dalam bab ini penulis menguraikan latar belakang masalah, rumusan masalah, batasan masalah, maksud dan tujuan, metode penelitian, lokasi dan waktu, serta sistematika penulisan.

BAB 2: LANDASAN TEORI

Dalam bab ini penulis meguraikan tentang pengertian yang berhubungan dengan website ini yaitu, sekilas tentang Integritas Bangsa School, yang berhubungan dengan komputer, sejarah singkat internet, Word Wide Web,

HTML, PHP, dan MySQL

BAB 3: PERANCANGAN SISTEM

Dalam bab ini penulis menguraikan tentang perancangan sistem yang dirancang dan meliputi database dari sistem yang dirancang, gambaran aplikasi web yang akan dibuat serta bagaimana algoritma aplikasi tersebut dijalankan.

BAB 4: IMPLEMENTASI SISTEM

Dalam bab ini penulis menyajikan tentang pengertian dan tujuan implementa sisistem dan komponen–komponen yang dibutuhkan sistem.

BAB 5: KESIMPULAN DAN SARAN

BAB 2

LANDASAN TEORI

2.1 Sekilas Tentang Integritas Bangsa School

Integritas Bangsa School yang berada di Jln. Binjai KM 8,5 No. 16/470 Medan Kampung Lalang adalah sebuah sekolah informal yang mengajarkan pelajaran tambahan diluar mata pelajaran sekolah seperti sekolah – sekolah formal biasanya yaitu bahasa inggris, kursus musik, dan ada juga untuk playgroup. Seperti sekolah-sekolah lain pada umumnya memiliki ruang kelas full AC untuk kegiatan belajar mengajar siswa-siswinya serta dukungan laboratorium untuk pelaksanaan praktikum, fasilitas olahraga, fasilitas alat musik, golf area, lapangan parker yang luas, bus antar jemput, dan gratis pemeriksaan – kesehatan anak secara berkala oleh dokter, serta tidak mengenyampingkan moral dan akhlak siswa - siswi.

2.2 Pengertian Komputer

Komputer adalah serangkaian ataupun sekelompok mesin elektronik yang terdiri dari ribuan bahkan jutaan komponen yang dapat saling bekerja sama, serta membentuk sebuah sistem kerja yang rapi dan teliti. Sistem ini kemudian dugunakan untuk melaksanakan serangkaian pekerjaan secara otomatis, berdasarkan urutan instruksi ataupun program yang diberikan kepadanya.

Komputer bersal dari bahasa Yunani “compute” yang kemudian diartikan kedalam bahasa Inggris “to compute” yang berarti menghitung. Tetapi computer bisa juga diartikan ke dalam bahasa Indonesia yaitu mesin hitung.

Sejalan dengan perkembangan teknologi, para ahli memiliki definisi tentang komputer. Menurut Donald H. Sanderes, (1985) komputer adalah sistem elektronik yang memiliki kemampuan memanipulasi data dengan cepat dan tepat serta dirancang dan diorganisasikan agar secara otomatis menerima dan menyimpan data input, memprosesnya, dan menghasilkan output dibawah pengawasan suatu langkah – langkah instruksi program (os / operating system) yang tersimpan di dalam penyimpanannya (stored program).

2.3 Internet

2.3.1 Pengertian Internet

Internet (Internasional Networking) adalah suatu kumpulan jaringan komputer dari berbagai tipe, yang saling berkomunikasi dengan menggunakan suatu standar komunikasi. Saat ini ada jutaan system komputer dengan puluhan juta pengguna di seluruh dunia telah bergabung dengan internet. Menurut El - Ansary, Frost ( 2003,p8 ) Intenet adalah seluruh jaringan yang saling terhubung satu sama lain. Beberapa komputer – komputer dalam jaringan ini menyimpan file, seperti halaman

Secara teknis internet merupakan dua computer atau lebih yang saling berhubungan membentuk jaringan komputer hingga meliputi jutaan komputer di dunia, yang saling berinteraksi dan bertukar informasi. Sedangkan dari segi ilmu pengetahuan, internet merupakan sebuah perpustakaan yang di dalamnya terdapat jutaan bahkan miliaran informasi atau data yang dapat berupa teks, grafik, suara maupun animasi untuk melakukan pertukaran informasi jarak jauh.

2.3.2 Sejarah Internet

Internet berawal dari diciptakannya teknologi jaringan komputer.Jaringan komputer merupakan beberapa komputer yang terhubung satu sama lain dengan memakai kabel dalam satu lokasi, misalnya satu kantor atau gedung. Jaringan komputer ini berfungsi agar pengguna komputer bisa bertukar informasi dan data dengan komputer lainnya.

ARPAnet (US Defense Advanced Reseach Project Agency) atau departemen pertahanan Amerika pada tahun 1969 membuat jaringan komputer yang tersebar untuk menghindarkan terjadinya informasi terpusat, yang apabila perang dapat dengan mudah dihancurkan. Jadi suatu bagian dari sambungan itu secara otomatis dipindahkan kesambungan lainnya.

Setelah angkatan Amerika, dunia pendidikan pun merasa sangat perlu mempelajari dan mengembangkan jaringan komputer. Salah satunya adalah University of California at Los Angeles (UCLA). Akhirnya pada tahun 1970 internet banyak digunakan Universitas di Amerika dan berkembang pesat saat ini. Agar pengguna komputer dengan merek dan tipe berbeda dapat saling berhubungan, maka para ahli

membuat sebuah protocol (semacam bahasa) yang sama untuk dipakai di Internet. Namanya TCP (Transmission Control Protokol) protokol pengendali transmisi dan IP

(Internet Protokol).

2.3.3 Manfaat Internet

Sejalan dengan meningkatkan peranan informasi dalam bisnis maupun teknologi, akses terhadap sumber dan jarinan informasi semakin penting bagi pengguna. Internet adalah jaringan informasi computer mancanegara yang berkembang sangat pesat dan pada saat ini dapat dikatakan sebagai jaringan informasi terbesar di dunia. Sehingga manfaat internet sangat terasa bagi pengguna.

Adapun manfaat yang bisa diperoleh dari internet adalah sebagai berikut: 1. Informasi yang didapat lebih cepat dan murah dengan menggunakan aplikasi

fasilitas internet seperti e-mail, www, newsgroup dan lain sebagainya.

2. Mengurangi biaya kertas dan biaya distribusi, dengan adanya Koran, majalah dan brosur di dalam internet.

3. Sebagai media promosi, misalnya pengenalan dan pemesanan produk perusahaan. 4. Kominikasi interaktif melauli e-mail, video conferencing, dan sebagainnya. 5. Sebagai alat peneliti dan pengembangan.

6. Sebagai alat pertukaran data.

2.4.1 Pengertian Website atau World Wide Web (WWW)

Website atau world wide web sering disingkat sebagai www atau web, yaitu sebuah sistem dimana informasi dalam bentuk teks, gambar, suara, dan lain-lain dipresentasikan dalam bentuk hypertext dan dapat diakses oleh perangkat lunak yang disebut browser. Menurut Mico Pardosi, (2001) website merupakan suatu dokumen dalam internet.

Kemampuan di atas telah menjadikan web sebagai service yang paling cepat pertumbuhannya. Web mengijinkan pemberian highlight (penyorotan) pada kata-kata atau gambar dalam sebuah dokumen untuk menghubungkan atau menunjuk dari sembarang tempat pada dokumen lain. Dengan sebuah browser yang dimiliki

graphical user interface (GUI), link-link dapat dihubungkan ke tujuannya dengan menunjuk link tersebut dengan mouse dan meng-klik link tersebut. Menurut kemampuannya, web dapat dibedakan menjadi 2 (dua), yaitu :

a. Web statis, adalah web yang berisi informasi yang sifatnya statis (tetap). Disebut statis karena pengguna tidak dapat berinteraksi dengan web tersebut. Untuk mengetahui web tersebut statis atau dinamis dapat dilihat dari tampilannya. Jika suatu web hanya berhubungan dengan halaman web lain berisi suatu informasi yang tetap maka web tersebut statis. Pada web statis, pengguna hanya dapat melihat isi dokumen pada halaman web yang berisis informasi yang tetap atau tidak berubah. Interaksi pengguna hanya terbatas dapat melihat informasi yang ditampilkan. Web satis biasanya merupakan HTML yang ditulis pada editor teks

b. Web dinamis, adalah web yang menampilkan informasi serta berinteraksi dengan pengguna. Web yang dinamis memungkinkan pengguna untuk berinteraksi menggunakan form sehingga dapat mengolah informasi yang ditampilkan. Web dinamis bersifat intteraktif, tidak kaku, dan terlihat lebih indah. Informasi di web pada umumnya ditulis dalam format HTML dan PHP.

Pada prinsipnya WWW bekerja dengan cara menampilkan file – file di HTML yang berasal dari server web pada program client khusus, yaitu browser web. Program browser web pada client mengirimkan perintah kepada server web yang kemudian akan dikirim oleh server dalam bentuk HTML. File HTML berisi instruksi yang diperlukan untuk membuat tampilan. Perintah – perintah HTML ini kemudian diterjemahkan oleh browser web sehingga isi informasinya dapat ditampilkan secara visual kepada pengguna / user. Mico Pordasi ( 1994 )

2.4.2 Browser Web

Browser web adalah software yang digunakan untuk menampilkan informasi dari

server web.Software ini kini telah berkembang dengan menggunakan user interface

grafis, sehingga pemakai dapat dengan mudah memakai poin atau klik untuk pindah antar dokumen.

Suatu browser mengambil sebuah web page dari server dengan sebuah request. Sebuah request adalah HTTP standar yang berisi sebuah page address. Sebuah page address terlihat seperti berikut :http://www.google.com/

2.4.2.2 Cara Kerja Browser Menampilkan Halaman

Seluruh webpage berisi instruksi-instruksi bagaimana untuk ditampilkan.Browser

menampilkan page dengan membaca instruksi-instruksi ini. Instruksi yang paling umum untuk menampilkan disebut tag HTML. TagHTML contohnya, yaitu <p> ini merupakan suatu paragraph </p>.

2.5 HTML (Hypertext Markup Language)

HTML (Hyper Text 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 digunkan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standart Generalized Markup Language), menurut Sutarman, S.Kom, (2003) HTML adalah suatu bahasa yang digunakan untuk menulis halaman web. HTML saat ini merupakan standart 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. Pengertian HTML Menuru Adhi Prasetio, (2013) : 1. HTML merupakan kependekan dari Hyper Text Markup Language

2. Sebuah file HTML merupakan sebuah file teks yang berisi tag – tag markup 3. Tag markup memberitahukan browser bagaimana harus menampilkan sebuah

halaman

4. File HTML harus memiliki ekstensi htm atau html

2.5.1 Elemen dan Tag HTML

Dokumen HTML disusun oleh elemen-elemen. Elemen merupakan istilah bagi komponen-komponen dasar pembentuk dokumen HTML untuk menandai berbagai elemen dalam suatu dokumen HTML, digunakan Tag. Tag HTML terdiri dari sebuah kurung sudut kiri (<, tanda lebih kecil), sebuah nama tag, dan sebuah kurung sudut kanan (>, tanda lebih besar). Tag umumnya berpasangan (misalnya, <H1> dengan </H1>), atau yang menjadi pasangan selalu diawali dengan karakter garis miring.Tag

yang menunjukkan tag awal yang berarti awal elemen, dan yang kedua menunjukkan

tag akhir, berarti akhir elemen.

Nama elemen ditunjukkan dengan nama tagnya. Suatu elemen didalam dokumen HTML harus ditandai dengan tagnya yang berpasangan. Ada beberapa elemen yang tidak mengharuskan tagnya ditulis secara berpasangan, elemen tersebut diantarnya adalah:

3. Ganti datar –horizontal rule dengan tag <hr>. 4. List item dengan tag<Li>.

Secara umum elemen dalam dokumen HTML yang dinyatakan dengan tagnya, dituliskan: <namatag>_</nametag> penulisan penamaan tag bebas, dapat menggunakan huruf besar, huruf kecil, ataupun campuran (tidak case sensitive). Tetapi untuk antisipasi pada standar penulisan tag, direkomendasikan untuk menuliskan tag dengan menggunakan huruf kecil semuanya.Tag mark up sebenarnya memberi tahu browser bagaimana memberlakukan atau menampilkan (memformat) halaman dokumen tersebut dalam browser.

Dalam membuat dokumen HTML dibutuhkan elemen yang dinyatakan dengan

tag<html>, <head> dan <body>. Setiap dokumen terdiri atas tag head dan body. Elemen head berisi tentang informasi dokumen tersebut, dan elemen body berisi teks yang sebenarnya yang tersusun dari link, grafik, paragraf dan elemen lainnya.

Dalam suatu dokumen hanya ada satu dokumen HTML, section atau elemen

head ditandai dengan tag<head> diawal, dan tag</head> diakhir. Section ini berisi informasi tentang dokumen HTML lainnya. Minimal informasi yang dituliskan dalam elemen ini adalah judul dari elemen, judul ini akan ditampilkan pada captionBr dari

windows browser, ditandai dengan menggunakan tag<title>dan diakhiri dengan </title>.

Section atau elemen body ditandai dengan tag<body> diawal, dan tag </body> diakhir.Section body merupakan elemen terbesar didalam dokumen HTML. Elemen ini

berisi dokumen yang akan ditampilkan pada browser, meliputi paragraf grafik, link, tabel, dan sebagainya.

2.6PHP (Hypertext Preprocessor)

2.6.1 Pengertian PHP

Menurut Adhi Prasetio, (2013) PHP singkata Hypertext Preprocessor, itu merupakan bahasa berbentuk script yang ditanam dalam server. Menurut Medio, (2001)

berdasarkan dokumen resmi PHP, merupakan bahasa berbentuk script yang di tempatkan dalam server dan diproses di server kemudian hasilnya akan dikirimkan ke klien yang merupakan tempat pemakai menggunakan browser.

2.6.2 Sejarah Singkat PHP

PHP diperkenalkan pada tahun 1994 sebagai sebuah kumpulan script freeware yang berbasis perl dan dikenal sebagai “Personal Homepage” tools. Pembuatnya bernama Rasmus Lerdorf. Ternyata paket tersebut banyak mengundang minat para developer dan professional. Pada tahun 1995, sebuah milis dibuat untuk menyediakan tempat diskusi termasuk memberikan feedback, perbaikan bug dan ide – ide kode skrip tersebut.

memiliki kemampuan untuk mengambil informasi yang dikirim dari form web dan mengubahnya menjadi fariabel yang dapat digunakan. Hal yang penting dari fungsi ini adalah bahwa kita bisa menangkap dan mengolah fariabel tadi sehingga memungkinkan pengembangan aplikasi web yang interaktif dan lebih kompleks.

Kira- kira pada waktu yang sama, PHP berubah dari kerjaan satu orang menjadi pekerjaan kelompok yang terdiri dari 7 orang developer utama. Mereka memperbaiki sintaks dan menambahkan fungsi dan metode tambahan, serta kemampuan bagi programmer PHP lain untuk meningkatkan kemampuat bahasa PHP tersebut dengan modul – modul plug in.

Sehingga saat ini, PHP masih bersifat gratis dan merupakan pelopor dalam gerakan opern source. Namun demikian, tidak seperti kebanyakan proyek – proyek open source lainnya, PHP semakin menjadi penting karena semakin banyak organisasi dan bisnis yang menggunakan PHP.

Bagi developer profesinal, salah satu hal yang paling menarik adalah diluncurkannya Zend Encoder, yang memungkinkan kode sumber PHP di enkripsi. Encoder tersebut memang tidak gratis, namun menjanjikan kemungkinan untuk perjualan skrip – skrip PHP.

Diantara maraknya pemrograman server web saat ni adalah ASP yang berkembang menjadi ASP.NET, JSP, CFML, dan PHP. Jika dibandingkan diantara 3 terbesar pemrograman web server diatas, terdapat kelebihan dari PHP yaitu :

1. Kesederhanaan. Bagi pemula belajar pemograman dapat dengan cepat dan memulai membuat aplikasi lengkap. Hal ini dikarenakan PHP memang secara khusus di desain untuk membuat aplikasi web.

2. PHP bersifat open source. Karena source code PHP tersedia secara gratis, maka hal tersebut memungkinkan komunikasi developer untuk selalu melakukan perbaikan, pengembangan dan menemukan bug dalam bahasa PHP

3. Stabilitas dan Kompatibilitas. Saat ini, PHP berjalan dengan stabil diberbagai macam sistem operasi seperti UNIX, LINUX, WINDOWA, dan MAC. PHP juga terintegrasi dengan baik dengan berbagai web server termasuk 2 yang paling popular yaitu IIS dan Apache.

4. PHP juga dilengkapi dengan berbagai macam pendukung lain seperti support langsung ke berbagai macam database yang popular.

2.6.4 Kelemahan PHP

Seperti pemrograman aplikasi atau web lainnya, PHP pun memiliki beberapa kelemahan, diantaranya :

1. Tidak ideal untuk pengembangan skala besar.

2. Tidak memiliki sistem pemrograman berorientasi objek yang sesungguhnya (sampai versi 4 saja). Namun pada versi PHP 5.0 sudah dilengkapi OOP yang

2.6.5 Script PHP

Script PHP berkedudukan sebagai tag dalam bahasa HTML. Suatu script akan dikenali sebagai scriptPHP bila didapati tanda :

1. <?php……….?>

2. <?...?>

3. <script language=”php”>…</script>

Script yang dibuat oleh php disimpan dengan namafile dan diketahui dengan ekstensi *.php. misalnya‘contoh.php’. Bila script php diakses melalui komputer lokal maka file PHP di folder htdocs di web server. Sama halnya dengan pemakaian dokumen HTML, pemberian dokumen yang sama tetapi dituliskan dengan case yang berbeda akan dianggap sebagai dokumen yang berbeda, misalnya ‘contoh.php’ akan berbeda dengan ‘CONTOH.php’ atau ‘Contoh.php’. ScriptPHP dapat disisipkan dibagian manapun dalam dokumen HTML, begitu pula sebaliknya scriptHTML dapat diletakkan diantara script PHP. Berikut contoh dari scriptPHP :

2.6.6 Integrasi dengan Database

(program aplikasi) untuk menghasilkan informasi. Pendefinisian basis data meliputi spesifikasi berupa tipe data, struktur, dan juga batasan-batasan data yang akan disimpan. Basis data merupakan aspek yang sangat penting dalam sistem informasi dimana basis data merupakan gudang penyimpanan data yang akan diolah lebih lanjut. Basis data menjadi penting karena dapat menghidari duplikasi data, hubungan antar data yang tidak jelas, organisasi data, dan juga update yang rumit. Menurut Ramakrishnan dan Gehrke (2003), menyatakan basisdata (database) sebagai kumpulan data, umumnya mendeskripsikan aktivitas satu organisasi atau lebih yang berhubungan.

PHP yang digabungkan dengan database akan lebih berkekuatan jika digabungkan dengan database yang realibel, gratis dan mudah diinstalasi. Terdapat 2 jenis database yang memenuhi yaitu MYSQL dan PostgreSQL. Kedua jenis database ini dipergunakan karena kinerja yang bagus dan untuk mengaksesnya, PHP mempuyai fungsi khusus.

PHP mempunyai fungsi khusus untuk mengakses MySQL.Ada sekitar 48 fungsi yang dapat didukung PHP dalam mengakses MySQL dalam membuat aplikasi. Adapun yang biasa digunakan diantaranya.

1. Mysql_connect()

Fungsi mysql_connect adalah untuk mrnghubungkan PHP dengan

2. Mysql_select db

Setelah terhubung ke databaseMYSQL dengan menggunakan mysql_connect,

langkah selanjutnya adalah mmilih database yang akan digunakan. Fungsi

mysql_select_db digunakan untuk memilih database. Format fungsinya adalah:

mysql_select_db (string database, koneksi). Koneksi adalah variable yang terhubung ke MySQL.Jika tidak mengisi variable koneksi yang terbuka saat itulah yang dianggap digunakan. Manfaat berbagai macam koneksi adalah bahwa dengan pilihan seperti itu maka dalam suatu file dimungkinkan mengambil query

dari 2 database sekaligus.

3. Mysql_query

Dalam database MySQL, perintah untuk melakukan transaksi adalah perintah

SQL.Sebutan untuk mengirim perintah SQL dinamakan query. Querymemberikan perintah kepada database untuk melakukan apa yang dikehendaki. Format fungsinya adalah :

Int mysql_query (string query, int [link_identifier]);

4. Mysql_num_row

Kegunaan dari fungsi ini adalah untuk menghitung jumlah baris yang dikenal oleh proses SQL. Format fungsinya adalah:

Int mysql_num_row)int result); 5. Mysql_fetch_array

Fungsi ini berkaitan dengan menampilkan data.Untuk menampilkan data, digunakan fungsi mysql_fetch_array.Dengan fungsi ini, hasil query ditampung

array mysql_fetch_array(I nt result, int[result_type]);

2.7MySQL

2.7.1 Pengertian MySQL

Menurut Adhi Prasetio, (2013) MySQL adalah sebuah server database open source. Kepopulerannya disebabkan MySQL menggunakan Structure Query Language (SQL) sebagai bahasa dasar untuk mengakses databasenya. Selain itu, ia bersifat gratis (tidak perlu membayar untuk menggunakannya) pada berbagai platform (kecuali pada windows, yang bersifat shareware atau perlu membayar setelah melakukan evaluasi dan memutuskan untuk digunakan untuk keperluan produksi).

MySQL merupakan sistem management database relasional. Suatu relasional menyimpan data dalam tabel terpisah. Hal ini memungkinkan kecepatan dan fleksibilitas. Tabel - tabel yang dihubungkan dengan relasi yang ditentukan membuatnya bisa mengkombinasi data dari beberapa tabel dari suatu permintaan. Bagian SQL dari kata MySQL berasal dari Structured Query Language bahasa paling umum yang dipergunakan untuk mengkases database.

MyQSL termasuk jenis Relation Database Management Sistem (RDBMS)

Relation Database Management System . Pada MySQL, sebuah database mengandung atu atau sejumlah tabel. Tabel terdiri atas sejumlah baris dan setiap baris mengandung

2.8 Cassanding Style Sheet (CSS)

Menurut Adhi Prasetio, (2003) CSS merupakan suatu teknologi yang digunakan untuk memperindah tampilan halaman suatu website (situs). Cassanding Style Sheet (CSS) banyak digunakan untuk memperluas kemampuan HTML dalam memformat dokumen web atau untuk mempercantik tampilan web, bahkan untuk pemosisian dan

layoutting halaman web. Dengan mendefinisikan suatu style sekali saja dapat digunakan berulang kali.

CSS banyak didukung browser, terutama versi baru sehingga penempatan layout menjadi lebih fleksibel. Membuat HTML menggunakan tag minimal berpengaruh terhadap ukuran file, dapat menampilkan konten utama terlebih dahulu sementara gambar dan yang lainnya dapat ditampilkan sesudahnya. Selain itu, penggunaan CSS pada file terpisah dapat mempermudah pengubahan tampilan situs secara keseluruhan.

2.9 Macromedia Dreamweaver 8

Menurut Onno W. Purbo, (2006) Dreamweaver merupakan software web design yang berguna untuk mendesign atau merancang web dan layout halaman web. Saat ini Dramweaver merupakan software utama yang digunakan oleh web server designer

maupun web programmer dalam membangun suatu web. Dreeamweaver memberikan kemudahan bagi penggunanya dalam menentukan ruang kerja yang diinginkan. Tipe ruang kerja, fasilitas dan kemampuan dreamweaver mampu meningkatkan produktivitas dan efektivitas dalam design maupun dalam membangun web.

Versi terbaru Macromedia Dreamweaver di tahun 2005 adalah Macromedia Dreamweaver 8 yang merupakan penyempurnaan dari versi sebelumnya dan semakin mudah dalam penggunaanya. Fasilitas terbaru dari Macromedia Dreamweaver 8 adalah Zoom Tool and Guides, Panel CSS yang baru, Code Collapse, Coding Toolbar, Insert Flash Video dan tampilan baru dalam Dreamweaver 8 membuat pekerjaan anda lebih cepat selesai.

Dreamweaver merupakan editor HTML yang professional untuk mendesain, menulis kode program, dan mengembangkan website, halaman web, dan aplikasi web. Dalam pengerjaannya, Dreamweaver memberikan 3 (tiga) pilihan yaitu bekerja dengan menulis kode program (menu code), dengan pengeditan secara visual (Mode Design) dan dengan tampilan keduanya (mode split).

Gambar 2.1 Tampilan Start page Macromedia Dreamwever 8

2.10 Pengenalan XAMPP

XAMPP merupakan kumpulan aplikasi yang menyangkut apache sebagai web servernya, PHP sebagai bahasa pemogramannya serta mySQL sebagai databasenya. Dengan XAMPP kebutuhan software telah terpenuhi.

2.11 JavaScript

Menurut Adhi Prasetio,(2003) JavaScript adalah bahasa pemograman yang digunakan untuk membuat web lebih dinamis dan interaktif. JavaScript pertama kali muncul di Netscape 2.0 dan dikembangkan lebih lanjut pada Netscape 3.0. Walaupun memiliki nama yang serupa. JavaScript sama sekali tidak berhubungan dengan Java.

Java adalah bahasa pemograman tingkat tinggi untuk membuat aplikasi cross platform, sedangkan JavaScript hanyalah scripting language yang terintegrasi dengan web browser untuk memberikan fleksibilitas tambahan bagi programmer untuk mengontrol elemen – elemen dalam halaman web.

Aplikasi JavaScript sebenarnya cukup luas, tetapi disini penulis menggunakan JavaScript dibatasi untuk DHTML, yaitu JavaScript yang digunakan untuk mengakses property, method, dan handler yang disediakan oleh DOM dan CSS.

Property didefinisikan sebagai setting nilai suatu objek tertentu. Contohnya adalah warna suatu teks, action untuk suatu form, nama file untuk suatu gambar, dan yang lainnya. Method adalah fungsi – fungsi yang dapat diterapkan untuk suatu objek. Misalnya maximize untuk window.

2.12 Data Flow Diagram (DFD)

sistem yang telah ada atau sistem baru yang akan dikembangkan secara logika tanpa mempertimbangkan lingkungan fisik di mana data tersebut mengalir.

Tabel 2.1 Simbol Data Flow Diagram (DFD)

No Simbol Fungsi

1. Data store (simpan data) adalah merupakan simpanan

dari data yang dapat berupa suatu file, database, dan lain – lain. Simpan data disimbolkan dengan sepasang garis horizontal pararel yang tertutup disalah satu ujungnya.

2. Proses adalah kegiatan atau kerja yang dilakukan

oleh orang, mesin atau computer dari hasil suatu arus data yang masuk ke dalam proses untuk dihasilakan arus data yang akan keluar dari proses. Proses disimbolkan dengan lingkaran atau empat persegi panjang tegak dengan sudut – sudutnya tumpul.

3. Data flow (arus data) yaitu merupakan arus data yang

diberi symbol suatu panah. Arus data ini mengalir diantara proses, simpan data dan kesatuan luar. Arus data menunjukkan arus dari data yang berupa masukan untuk sistem atau hasil dari proses sistem.

4. External entity (kesatuan luar) atau boundary (batas

sistem). Kesatuan luar merupakan kesatuan (entity), di lingkungan luar sistem yang dapat berupa orang, organisasi.

2.13 Pengertian Flowchart

Opim S. Sitompul, (Pemograman di Lingkungan C Linux, 2011). “ Flowchart adalah sebuah diagram umum yang mempresentasikan sebuah algoritma atau proses menggunakan beberapa bangun geometri untuk memperlihatkan langkah – langkah yang dilakukan oleh program dalam menyelesaikan masalah. Secara umum Flowchart merupakan sekumpulan simbol – simbol yang menunjukan atau menggambarkan rangkaian kegiatan – kegiatan program dari awal hingga akhir, jadi flowchart ini digunakan untuk menggambarkan urutan langkah – langkah suatu algoritma. Penjelasan arti lambang – lambang flowchart dapat didefinisikan seperti table dibawah ini :

Tabel 2.2 Simbol Flowchart

No. Simbol Fungsi

1. Terminal, untuk memulai dan mengakhiri suatu

program.

2. Proses, suatu simbol yang menunjukan setiap

pengolahan yang dilakukan oleh komputer.

3. Input – Output, untuk memasukkan data maupun

menunjukkan hasil dari suatu proses.

4. Decision, suatu kondisi yang akan menghasilkan beberapa kemungkinan jawaban ataupun pilihan. 5. Predifined process, suatu simbol untuk

6. Connector, suatu prosedur akan masuk dan keluar melalui symbol ini dalam lembar yang sama. 7. Off Line Connector, merupakan simbol masuk dan

keluarnya suatu prosedur pada lembar kerja yang lain.

8. Arus atau flow, prosedur yang dapat dilakukan

dari atas kebawah, bawah ke atas, dari kanan ke kiri atau dari kiri ke kanan.

9. Document merupakan symbol untuk data yang berbentuk informasi

10. Untuk menyatakan sekumpulan langkah proses

yang ditulis sebagai prosedur

11. Simbol untuk output yang ditujukan suatu divice,

seperti printer, plotter

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

1. Perlu dikembangkan agar website ini lebih luas dan dapat berkembang dengan baik.

2. Buatlah penyimpanan cadangan file secara berkala. Hal ini sangat penting untuk mencegah kemungkinan kehilangan dan kerusakan data yang telah tersimpan. 3. Gunakanlah program anti virus yang residen. Hal ini perlu untuk mencegah

DAFTAR PUSTAKA

Kadir, Abdul. 2001. Dasar Pemograman Web Dinamis Menggunakan PHP.

Yogyakarta: Andhi Offset

Pardosi, Mico. 2001. Bahasa Pemograman Internet HTML dan JavaScript. Surabaya :Indah

Prasetio, Adhi. 2013. Buku Sakti WebMaster. Bandung : MediaKita

Saleh,SH.I, Rachmad., Aqdi, Basalama, Muslikhul., Mursodo, Sudarisman, Joko. 2006. Panduan Lengkap Desain Web Macromedia Dreamweaver8. Jakarta : Gava Media

Salim, Sitompul, Opim. 2011. Pemograman di Lingkungan CLinux. Medan : UsuPress Sutarman, S.Kom. 2003. Membangun Aplikasi Web dengan PHP dan Mysql.

Yogyakarta : Graha Ilmu

Niez Pipao (2012). Teori dan Tahapan Pembuatan ERD From

http://niezpipao.blogspot.com/2012/11/teori-dan-tahapan-pembuatan-erd-a.html, 6 Mei 2014

Vicky. (2013). Pengertian Software Perangkat Lunak Komputer From http://belajar-komputer-mu.com/pengertian-software-perangkat-lunak-komputer/, 6 Mei 2014

A,Achmad. (2005). Pengertian Komputer Menurut Ahli From

http://www.likethisya.com/pengertian-komputer.html, 18 mei 2014

Agussari, Ayu. (2013). Pengertian Internet Menurut Para Ahli From http://ayuagussari13.wordpress.com/2013/07/04/pengertian-internet-menurut-para-ahli/, 18 Mei 2014

Panduan Tatacara Penulisan Skripsi & Tugas Akhir. 2013. Dokumen Nomor: Akad/05/2005. Medan: Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera Utara.

DEPARTEMEN PENDIDIKAN DAN KEBUDAYAAN UNIVERSITAS SUMATERA UTARA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

Jln. Bioteknologi No. 1 Kampus USU Telp. (061) 8212050-8214920. Fax. (061) 8214290 Medan 20155

KARTU BIMBINGAN TUGAS AKHIR MAHASISWA

Nama : Dea Yulianda Pratiwi

Nomor Induk Mahasiswa : 112406028

Judul Tugas Akhir : Perancangan Website Integritas Bangsa

(Learning Center) Menggunakan PHP dan MySQL

Dosen Pembimbing : Drs. Rachmad Sitepu, M.Si

Tanggal Mulai Bimbingan :

Tanggal Selesai Bimbingan :

No TANGGAL

BIMBINGAN

PEMBAHASAN ASISTENSI MENGENAI BAB

PARAF DOSEN PEMBIMBING

KETERANGAN

1 2 3 4 5 6 7

 Kartu ini harap dikembalikan ke Departemen Matematika bila bimbingan mahasiswa telah selesai

Diketahui, Disetujui,

Program Studi D-3 Teknik Informatika Pembimbing

SURAT KETERANGAN Hasil Uji Program Tugas Akhir

Yang bertanda tangan dibawah ini, menerangkan bahwa Mahasiswa Tugas Akhir Program D3 Teknik Informatika :

Nama : DEA YULIANDA PRATIWI

NIM : 112406028

Prog. Studi : DIPLOMA (D3) TEKNIK INFORMATIKA

Judul Tugas Akhir : PERANCANGAN WEBSITE INTEGRITAS BANGSA

(LEARNING CENTER) MENGGUNAKAN PHP DAN MYSQL

Telah melaksanakan test program Tugas Akhir Mahasiswa tersebut di atas pada tanggal……….

Dengan Hasil : Sukses / Gagal

Demikian diterangkan untuk digunakan melengkapi syarat pendaftaran Ujian Meja Hijau Tugas Akhir Mahasiswa bersangkutan di Departemen Matematika FMIPA USU Medan.

Medan, Mei 2014

Dosen Pembimbing

Drs. Rachmad Sitepu, M.Si

LISTING PROGRAM

Index.php

<html> <head>

<title>Integritas Bangsa (LEARNING CENTER)</title> <link href="header.css" rel="stylesheet" type="text/css"> <style type="text/css">

<!-- #Layer1 {

position:absolute; left:204px;

top:3px; width:809px; height:195px; z-index:1;

line-height: normal; color: #000000;

border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-top-width: thin; border-right-width: thin; border-bottom-width: thin; border-left-width: thin; }

#Layer4 {

position:absolute; left:1068px; top:24px; width:220px; height:83px; z-index:2;

border: thick ridge #EEEEEE; background-color: #0099FF; }

#Layer6 {

position:absolute; left:233px;

top:397px; width:271px; height:553px; z-index:3;

background-color: #0099FF; border: medium double #EEEEEE; }

#Layer2 {

position:absolute; left:234px;

top:1001px; width:270px; height:358px; z-index:4;

border: medium double #EEEEEE; background-color: #0099FF; }

#Layer3 {

position:absolute; left:1137px; top:120px; width:149px; height:93px; z-index:5; }

--> </style>

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

<style> #wrapper {

width:920px; height:780px; background:; margin:0px auto; }

#header {

height:200px;

background-color: #FF9900; }

#menu {

height:55px; padding:0px;

background-color: #99FF33; }

#content {

height:1150px;

background-color:#CC0099; background-image: none; }

#left_content {

margin: 20px 3px 5px 3px; padding: 8px;

float: left; height: 780px; width: 300px; border: ;

border-radius :5px 5px 5px 5px; }

#right_content {

margin: 20px 3px 5px 3px; padding: 10px;

float: right; height: 1040px; width: 550px;

border: 1px solid #000000; border-radius :5px 5px 5px 5px; background-color:#CCFFFF;

font-family: Arial, Helvetica, sans-serif; font-size: 16px;

font-style: normal; line-height: normal; color: #000000;

#footer {

height:20px;

background-color: #C46200; }

.style3 {font-size: 24px} .style6 {font-size: 36px} .style8 {font-size: 18px} .style9 {

font-family: Geneva, Arial, Helvetica, sans-serif; color: #EEEEEE;

text-decoration: blink; }

.style12 {

font-family: Geneva, Arial, Helvetica, sans-serif; font-style: italic;

color: #EEEEEE; font-size: 17px; }

.style13 {

font-family: "Monotype Corsiva"; font-style: italic;

color: #CC0000; font-size: 36px; }

</style>

<link href="js-image-slider.css" rel="stylesheet" type="text/css" /> <script src="js-image-slider.js" type="text/javascript"></script> </head>

<body bgcolor="#FF9900">

<div id="Layer1"><img src="g/logo 2.jpg" width="294" height="206" hspace="30" border="0" align="left" usemap="#Map">

<h2 align="center" style="color: black"; font-family: Times New Roman"><strong><span class="style3"><br>

<span class="style6"><br>

INTEGRITAS BANGSA</span></span></strong></h2>

<h3 align="center" class="style6" style="color: black; font-family: Times New Roman"> <strong>(Learning Center)</strong></h3>

</div>

<div id="Layer4">

<p><span class="style1" style="color: black">Jl. Binjai KM 8,5 No. 16/470 MEDAN KAMPUNG LALANG<br>

Telp.(061)8451083</span><br> </p>

</div>

<div id="Layer2">

<p align="center"><span class="flt1 lp_box2bg"><img src="g/say.jpg" alt="" width="140" height="183" align="left" class="flt1 lp_imgclient" /><span class="flt lp_txtclint style5 style8 style9">Child Speak<br>

</span></span><span class="flt1 lp_box2bg"><span class="flt lp_txtclint style5 style8"><br>

<span class="style12">waktunya generasi muda berbicara bersama Integritas Bangsa </span></span></span><br>

<br> <br>

<span class="flt1 lp_box2txt">&#8220;<span id="result_box"

lang="en">One hour of fun and intensive, much better and profitable than many years of dreaming and pondering.</span>&#8221;<br />

<span style="float:right; color:#F3FF9F;">- John Ambrose</span></span></p>

</div>

<div id="Layer3"> <div id="clock"></div>

<script type="text/javascript"> <!--

function showTime() { var a_p = "";

var today = new Date();

var curr_hour = today.getHours(); var curr_minute = today.getMinutes(); var curr_second = today.getSeconds(); if (curr_hour < 12) {

a_p = "AM"; } else {

a_p = "PM"; }

if (curr_hour == 0) { curr_hour = 12; }

if (curr_hour > 12) {

curr_hour = curr_hour - 12; }

curr_hour = checkTime(curr_hour); curr_minute = checkTime(curr_minute);

document.getElementById('clock').innerHTML=curr_hour + ":" + curr_minute + ":" + curr_second + " " + a_p;

}

function checkTime(i) { if (i < 10) {

i = "0" + i; }

return i; }

setInterval(showTime, 500); //-->

</script> </div> </div>

<div id="wrapper">

<div id="header"></div> <div id="menu">

<link href="dropdown.css" rel="stylesheet" type="text/css" media="screen" />

<nav> <ul>

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

<li><a href="inggris.php">ENGLISH COURSE</a></li> <li><a href="musik.php">MUSIC COURSE</a></li> <li><a href="play.php">PLAYGROUP & TAMAN KANAK-KANAK</a></li>

<li><a href="galeri.php">GALERI</a></li> <li><a href="kontak.php">CONTACT</a></li> <link href="style1.css" rel="stylesheet" type="text/css">

</ul> </nav> </div>

<div id="content">

<h3 style="color: blue"><marquee direction="left" scrollamount="4"><strong>WELCOME TO THE INTEGRITAS BANGSA</strong></marquee></h3>

<div id="left_content"> <div id="Layer6">

<div align="center"><span class="style7">&nbsp;&nbsp;<span class="style3">STAF PENGAJAR&nbsp;</span> </span><br> <br>

<br> </div>

<div align="left"> <div id="sliderFrame"> <div id="slider">

<img src="g/sir.jpg" alt="Welcome to Integritas Bangsa School" width="159" height="145" /></a>

<img src="g/dr.jpg" alt="" width="159" height="145" /> <img src="g/gr.jpg" alt="" width="159" height="145" /> <img src="g/gr1.jpg" alt="" width="159" height="145" />

<img src="g/gr2.jpg" alt="" width="159" height="145" />

<img src="g/gr3.jpg" alt="" width="159" height="145" />

<img src="g/gr4.jpg" alt="" width="159" height="145" /></div>

<div id="htmlcaption" style="display: none;"> <em>HTML</em> caption. Link to <a href="http://www.google.com/">Google</a>. </div>

</div> </p> </div> <br> <div>

<div align="center">

<p>Gambar di atas merupakan beberapa dari staf pengajar di Yayasan Ambasador Integritas Bangsa. </p>

<p>Dengan profesionalisme dan dalam bidang masing-masing yang di terapkan pada Integritas Bangsa School bersama-sama mencerdaskan bangsa Indonesia. </p>

</div> </div> </div> </div>

<div id="right_content"><span class="style13">

<p class="style13"><strong>our services...</strong></p> </span>

<p><img src="g/2.jpg" width="296" height="200" align="left"></p> <div>

<div align="justify"><span class="flt rp_weltxt">Bahasa inggris adalah bahasa yang paling banyak digunakan di dunia. bahasa ini merupakan

bahasa ibu untuk lebih dari 400 juta orang diseluruh dunia. dalam setiap hari jutaan orang menggunakan bahasa inggris di tempat kerja maupun di

kehidupan sosial. Ketika kepala pemerintahan bertemu, Bahasa inggris adalah bahasa yang paling sering digunakan. Dan ketika orang-orang dari bangsa yang berbeda saling bertemu, bahasa inggris adalah satu-satunya bahasa penghubung yang digunakan oleh mereka. <br>

<br>

Kami memberikan pelayanan terbaik untuk meningkatkan

pengetahuan siswa dalam hal ini adalah memperlancar komunikasi dalam bahasa internasional yaitu bahasa inggris. kami menyediakan pelayanan diskusi dengan staf pengajar dan para siswa membentuk sebuah forum diskusi diluar kegiatan akademik di Integritas Bangsa dengan menggunakan bahasa inggris (conversation) untuk melatih kelancaran dalam berbahasa asing<br> <br> </span></div> </div> <div align="justify"> <p class="flt rp_weltxt">... ...</p>

<p class="flt rp_weltxt"><img src="g/tesss.jpeg" alt="" width="148" height="108" align="left" class="flt1 rp_abacus" />Proses mendengar musik merupakan salah satu bentuk komunikasi afektif dan memberikan pengalaman emosional. Emosi yang merupakan suatu pengalaman subjektif yang inherent terdapat pada setiap manusia. Untuk dapat merasakan dan menghayati serta mengevaluasi makna dari interaksi dengan lingkungan, ternyata dapat dirangsang dan dioptimalkan

perkembangannya melalui musik sejak masa dini. Efek atau suasana perasaan dan emosi baik persepsi, ekspresi, maupun kesadaran pengalaman

emosional, secara predominan diperantarai oleh hemisfer otak kanan. Artinya, hemisfer ini memainkan peran besar dalam proses perkembangan emosi, yang sangat penting bagi perkembangan sifat-sifat manusia yang manusiawi.<br>

<br>

Kehalusan dan kepekaan seseorang untuk dapat ikut merasakan perasaan orang lain, menghayati pengalaman kehidupan dengan "perasaan", adalah fungsi otak kanan, sedang kemampuan mengerti perasaan orang lain, mengerti pengalaman dengan rasio adalah fungsi otak kiri. Kemampuan

seseorang untuk dapat berkomunikasi dengan baik dan manusiawi dengan orang lain merupakan percampuran (blending antara otak kanan dan kiri).<br>

<br /> </p>

</div> <p><br> </p>

<p>&nbsp;</p>

</p>

</div> </div>

<div id="footer bgcolor="#C46200">

<p align="center">Copyright &copy; 2014 | Integritas Bangsa. All Rights Reserved.</p>

</div> </div> </body> </html>

Inggris.php

<html> <head>

<title>Integritas Bangsa (LEARNING CENTER)</title> <link href="header.css" rel="stylesheet" type="text/css"> <style type="text/css">

<!-- #Layer1 {

position:absolute; left:204px;

top:3px; width:809px; height:195px; z-index:1;

line-height: normal; color: #000000;

border-top-width: thin; border-right-width: thin; border-bottom-width: thin; border-left-width: thin; }

#Layer4 {

position:absolute; left:1060px; top:17px; width:220px; height:83px; z-index:2;

border: thick ridge #EEEEEE; background-color: #0099FF; }

.style1 {

font-family: "Times New Roman", Times, serif; font-size: 14px;

}

#Layer6 {

position:absolute; left:58px;

top:64px; width:291px; height:606px; z-index:3;

background-color: #0099FF; font-style: normal;

border-top-width: medium; border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-top-style: none; border-right-style: dashed; border-bottom-style: none; border-left-style: none; border-top-color: #000000; border-right-color: #000000; border-bottom-color: #000000; border-left-color: #000000; }

#Layer2 {

position:absolute; left:267px;

width:805px; height:711px; z-index:4;

border: medium double #EEEEEE; background-color: #0099FF; }

#Layer3 {

position:absolute; left:1156px; top:109px; width:151px; height:79px; z-index:4;

border: medium none #EEEEEE; }

#Layer5 {

position:absolute; left:566px;

top:645px; width:535px; height:292px; z-index:5;

background-color: #800000; border: medium solid #EEEEEE; }

#Layer7 {

position:absolute; left:455px;

top:62px; width:307px; height:607px; z-index:6;

background-color: #0099FF; border-top-width: medium; border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: dashed; border-left-color: #000000; border-top-color: #000000; border-right-color: #000000;

--> </style>

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

<style> #wrapper {

width:920px; height:780px; background:; margin:0px auto; }

#header {

height:200px;

background-color: #FF9900; }

#menu {

height:55px; padding:0px;

background-color: #FF9900; }

#content {

height:1170px;

background-color:#800000; }

#footer {

height:20px;

background-color: #C46200; }

.style3 {font-size: 24px} .style14 {font-size: 36px} .style16 {

font-size: 24px; font-weight: bold; font-style: italic; }

</style> </head>

<body bgcolor="#FF9900">

<div id="Layer1"><img src="g/logo 2.jpg" width="294" height="206" hspace="30" border="0" align="left" usemap="#Map">

<h2 align="center" style="color: black"; font-family: Times New Roman"><strong><span class="style3"><br>

<span class="style14"><br>

INTEGRITAS BANGSA</span></span></strong></h2>

<h3 align="center" class="style14" style="color: black; font-family: Times New Roman"> <strong>(Learning Center)</strong></h3>

</div>

<div id="Layer4">

<p><span class="style1" style="color: black">Jl. Binjai KM 8,5 No. 16/470 MEDAN KAMPUNG LALANG<br>

(SIMP. PINANG BARIS)<br> Telp.(061)8451083</span><br> </p>

</div>

<div id="wrapper"> <div id="header"></div> <div id="menu">

<link href="dropdown.css" rel="stylesheet" type="text/css" media="screen" />

<nav> <ul>

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

<li><a href="inggris.php">ENGLISH COURSE</a></li> <li><a href="musik.php">MUSIC COURSE</a>

<li><a href="play.php">PLAYGROUP & TAMAN KANAK-KANAK</a></li>

<li><a href="galeri.php">GALERI</a> </li> <li><a href="kontak.php">CONTACT</a></li> </li>

</ul> </nav> </div>

<img src="g/Screenshot_2014-04-09-13-01-45-1.jpg" width="532" height="357" align="left"><img src="g/Kursus-bahasa-Inggris-untuk-remaja-di-Depok-Beacon-English.jpg" width="363" height="177" hspace="20" align="absbottom"> <img src="g/images.jpg" width="363" height="172" hspace="20">&nbsp;

<div id="Layer2"> <div id="Layer6"> <p align="justify">

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs p;IB <em>Integritas Bangsa</em> menyediakan beragam kursus bahasa Inggris bagi kelompok usia yang berbeda-beda. Mulai dari program kursus bahasa Inggris untuk anak-anak, remaja dan dewasa, serta pelatihan bahasa Inggris untuk perusahaan, semua bisa Anda temukan di Integritas Bangsa School.</p>

<p

align="justify">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs p;&nbsp;IB <em>Integritas Bangsa</em> menyediakan serangkaian program <strong>kursus bahasa inggris untuk anak - anak</strong> untuk memenuhi kebutuhan belajar anak dari kelompok usia yang berbeda. Anak usia 4 tahun sudah dapat bergabung dengan program Small Stars dari IB. Sedangkan bagi anak berusia 7-9 tahun, tersedia program High Flyers.</p>

<p

align="justify">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs p;&nbsp;&nbsp;Program<strong> kursus bahasa ingris untuk

remaja</strong> di IB <em>Integrita Bangsa</em> dibedakan menjadi program Trailblazers untuk remaja berusia 10-13 tahun dan program Frontrunner untuk remaja berusia 14 tahun keatas. Selain kedua program ini, para remaja juga bisa mengikuti program Conversation Club untuk meningkatkan kemampuan berbahasa Inggris lisan dan International Exams Preparation untuk mempersiapkan diri mengikuti berbagai ujian

internasional.</p> </div>

<div id="Layer7"> <p

align="justify">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs p;Selain untuk anak-anak dan remaja, IB <em>Integritas Bangsa</em> juga menyediakan rangkaian <strong>kursus bahasa inggris untuk

dewasa</strong> dan <strong>pelatihan bahasa inggris untuk

perusahaan</strong>. Kami mengerti bahwa bagi siswa dewasa, kesuksesan dalam belajar bahasa Inggris tidak hanya ditentukan dari kemampuan berbicara dan penggunakan kosakata bahasa Inggris saja, melainkan juga dari kemampuan berbahasa Inggris secara tepat, alami dan percaya diri. Di IB <em>Integritas Bangsa</em>, melalui sistem pembelajaran terkini, siswa dewasa akan diajarkan cara mengaplikasikan bahasa Inggris mereka untuk situasi bisnis dan profesional dengan fasih, akurat dan penuh percaya diri.</p>

<p

align="justify">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs p;Produk inovatif IB dibangun berdasarkan sistem Efekta. Sistem ini

merupakan gabungan sempurna antara teknik pengajaran terbaik dan teknologi mutakhir. Guru berpengalaman dan bersertifikasi memberikan pengajaran di dalam kelas menggunakan teknologi pendukung terkini. Pembelajaran di dalam kelas ini juga didukung oleh tutorial online iLAB yang dapat diakses kapan saja, di mana saja. </p>

<p align="justify"><strong><em>&quot; Temukan program yang sesuai dengan kelompok usia dan tingkat kemampuan Anda di Integritas Bangsa! &quot;</em></strong></p>

</div>

<div id="layer"> <div align="center">

<p><span class="style16">Beragam Kursus Bahasa Inggris di IB </span></p>

</div> </div>

<p align="center"><span class="flt1 lp_box2txt"><br /> </span></p>

</div> </div>

<div id="footer bgcolor="#C46200">

<p align="center">Copyright &copy; 2014 | Integritas Bangsa. All Rights Reserved.</p>

</div> </div> </body> </html>

Musik.php

<html> <head>

<title>Integritas Bangsa (LEARNING CENTER)</title> <link href="header.css" rel="stylesheet" type="text/css"> <style type="text/css">

<!-- #Layer1 {

position:absolute; left:204px;

top:3px; width:809px;

color: #000000;

border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-top-width: thin; border-right-width: thin; border-bottom-width: thin; border-left-width: thin; }

#Layer4 {

position:absolute; left:1073px; top:23px; width:220px; height:83px; z-index:2;

background-color: #0099FF; border: thick ridge #EEEEEE; }

.style1 {

font-family: "Times New Roman", Times, serif; font-size: 14px;

}

#Layer6 {

position:absolute; left:242px;

top:536px; width:271px; height:522px; z-index:3;

background-color: #0099FF; border: thick double #EEEEEE; font-style: italic;

}

#Layer2 {

position:absolute; left:239px;

top:876px; width:270px; height:336px; z-index:4;

border: medium double #EEEEEE; background-color: #0099FF; }

#Layer3 {

position:absolute; left:569px;

top:313px; width:532px; height:286px; z-index:4;

background-color: #CC0099; border: medium solid #EEEEEE; }

#Layer5 {

position:absolute; left:566px;

top:645px; width:535px; height:292px; z-index:5;

background-color: #CC0099; border: medium solid #EEEEEE; }

#Layer7 {

position:absolute; left:563px;

top:984px; width:538px; height:305px; z-index:6;

background-color: #CC0099; border: medium solid #EEEEEE; }

--> </style>

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

#wrapper {

width:920px; height:780px; background:; margin:0px auto; }

{

height:200px;

background-color: #FF9900; }

#menu {

height:55px; padding:0px;

background-color: #FF9900; }

#content {

height:1050px;

background-color:#CC0099; }

#left_content {

wmargin: 20px 40px 20px 40px; padding: 8px;

float: left; height: 780px; width: 300px; border: ;

border-radius :5px 5px 5px 5px; font-family: "Monotype Corsiva"; font-size: 18px;

text-transform: capitalize; color: #EEEEEE;

font-style: italic; font-variant: normal; border: thin none #000000; }

#right_content {

margin: 20px 3px 5px 3px; padding: 10px;

float: right; height: 990px; width: 550px;

border: 3px solid #EEEEEE; border-radius :5px 5px 5px 5px;

background-color:#0099FF;

font-family: Arial, Helvetica, sans-serif; font-size: 16px;

font-style: normal; line-height: normal; color: #EEEEEE; }

#footer {

height:20px;

background-color: #C46200; }

.style3 {font-size: 24px} .style6 {

font-size: 36px;

font-family: "Monotype Corsiva"; color: #0099FF;

font-style: italic; }

.style8 {font-size: 18px} .style9 {

font-family: Geneva, Arial, Helvetica, sans-serif; color: #EEEEEE;

text-decoration: blink; }

.style12 {

font-family: Geneva, Arial, Helvetica, sans-serif; font-style: italic;

color: #EEEEEE; }

.style13 {

font-family: "Monotype Corsiva"; font-style: italic;

color: #CC0000; font-size: 36px; }

.style14 {font-size: 36px} </style>

</head>

<body bgcolor="#FF9900">

<div id="Layer1"><img src="g/logo 2.jpg" width="294" height="206" hspace="30" border="0" align="left" usemap="#Map">

<html> <head>

<title>New Picture</title> </head>

<body>

<form name="form1" action="save-galeri.php" method="post" enctype="multipart/form-data">

File: <input type="file" name="file" id="file"/><br/>

Deskripsi: <textarea name="deskripsi" id="deskripsi"></textarea><br/>

<input type="submit" name="save" value="Upload"/> </form>

</body> </html>

Input.php

<?php

error_reporting(null);

include("koneksi.php"); $int_id=$_GET['id'];

$var_nama=$_POST['nama']; $var_email=$_POST['email']; $var_saran=$_POST['saran'];

$query="INSERT INTO `buku`

VALUES('$int_id','$var_nama','$var_email','$var_saran')"; if(mysql_query($query)){

} else{

echo "<p>Data gagal di input: <br /><b>".mysql_error()."</b></p>"; }

?>

Koneksi.php <?php

mysql_connect("localhost", "root", ""); mysql_select_db("tamu");

?>

<?php

//koneksi ke database

$conn = mysql_connect('localhost', 'root', ''); mysql_select_db('galeri');

//upload file

if(!empty($_FILES) && $_FILES['file']['size'] > 0 && $_FILES['file']['error'] == 0){ $fileName = $_FILES['file']['name'];

$move = move_uploaded_file($_FILES['file']['tmp_name'], 'upload/'.$fileName);

if($move){

//simpan deskripsi dan nama file ke database

$sql = "insert into table_foto (nama_file, deskripsi) values ('$fileName', '".$_POST['deskripsi']."')"; mysql_query($sql);

header("Location: galeri.php"); exit;

} }

Menu.css

<style type="text/css"> <!--

#Layer1 {

position:absolute; left:7px;

top:219px; width:321px; height:399px; z-index:1; }

--> </style> </head>

<body bgcolor="cream">

<link href="dropdown.css" rel="stylesheet" type="text/css" media="screen" /> <nav>

<ul>

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

<li><a href="inggris.php">ENGLISH COURSE</a></li> <li><a href="musik.php">MUSIC COURSE</a>

<li><a href="play.php">MATHEMATICS</a></li>

<li><a href="galeri.php">PLAYGROUP & TAMAN KANAK-KANAK</a></li>

</li> <p>&nbsp;</p> </ul>

</nav>

Dropdown.css

*{

margin:1; padding:3;

font-family:times new roman; } /* simple CSS Reset */

nav ul {

list-style:none;

background-image:url(url(url(url(url(url(url(url(-webkit-linear-gradient(top,#ffa500,#ffa500)))))))));

background-color:#0099CC;

box-shadow:0 10px 15px rgba(0,60,0,90); }

nav ul:after{ content:" "; display:block; clear:both; }

nav ul li{

float:left;

position:relative; }

nav ul li a{

color:black; display:block; font-size:14px; padding:5px 16px; text-decoration:none; }

nav ul ul{

color:black; display:block; visibility:invisible; position:absolute; top:90%;

text-decoration:none; background-color: #FF6600;

}

nav ul ul li{

float:none; }

nav ul ul{

position:right; top:90%;

display:none; /* sembunyikan sub menu */ }

nav ul li:hover > ul{ display:block; }

nav ul li:hover > a, nav ul ul li:hover > a { color :#FF9900;

background-image:url(-webkit-linear-gradient(top,%20#506def,#2041DE)); background-color:#0000FF;

}

js-image-slider.css

#sliderFrame {

position:left; width:200px;

margin:0 auto; /*center-aligned*/ }

#slider, #slider div.sliderInner {

width:195px;height:145px;/* Must be the same size as the slider images */ }

#slider {

background:#fff url(loading.gif) no-repeat 50% 50%; position:relative;

margin:0 auto; /*center-aligned*/ transform: translate3d(0,0,0);

box-shadow: 0px 1px 5px #999999; }

/* image wrapper */

#slider a.imgLink, #slider div.video { z-index:2;

position:absolute;

top:0px;left:0px;border:0;padding:0;margin:0; width:100%;height:100%;

#slider .video {

background:transparent url(video.png) no-repeat 50% 50%; }

/* Caption styles */

#slider div.mc-caption-bg, #slider div.mc-caption-bg2 { position:absolute;

width:100%; height:auto;

padding:10px 0;/* 10px will increase the height.*/

left:0px; /*if the caption needs to be aligned from right, specify by right instead of left. i.e. right:20px;*/

bottom:0px;/*if the caption needs to be aligned from top, specify by top instead of bottom. i.e. top:150px;*/

z-index:3;

overflow:hidden; font-size: 0; }

#slider div.mc-caption-bg {

/* NOTE: Its opacity is to be set through the sliderOptions.captionOpacity setting in the js-image-slider.js file.*/

background:Black;/* or any other colors such as White, or: background:none; */

}

#slider div.mc-caption-bg2 { background:none;

}

#slider div.mc-caption {

font: bold 14px/20px Arial; color:#EEE;

z-index:4;

text-align:center; background:none; }

#slider div.mc-caption a { color:#FB0; }

#slider div.mc-caption a:hover { color:#DA0;

}

/* --- built-in navigation bullets wrapper ---*/

/* Note: check themes\2\js-image-slider.css to see how to hide nav bullets */ #slider div.navBulletsWrapper {

top:150px;/* Its position is relative to the #slider */ text-align:center;

background:none; position:relative; z-index:1;

}

/* each bullet */

#slider div.navBulletsWrapper div {

width:11px; height:11px;

font-size:5;color:white;/*hide the index number in the bullet element*/ background:transparent url(bullet.png) no-repeat 0 0;

display:inline-block; *display:inline; zoom:1; overflow:hidden;cursor:pointer;

margin:0 6px;/* set distance between each bullet*/ }

#slider div.navBulletsWrapper div.active {background-position:0 -11px;} /* --- Others --- */

#slider div.loading {

width:100%; height:100%;

background:transparent url(loading.gif) no-repeat 50% 50%; filter: alpha(opacity=60);

opacity:0.6; position:absolute; left:0;

top:0; z-index:9; }

#slider img, #slider>b, #slider a>b {

position:absolute; border:none; display:none; }

#slider div.sliderInner { overflow:hidden;

-webkit-transform: rotate(0.000001deg);/* fixed the Chrome not crop border-radius bug*/