Perancangan Sistem Informasi Inter Club Indonesia Kordinator Daerah Sumatera Utara Berbasis Web

(1)

PERANCANGAN SISTEM INFORMASI INTER CLUB INDONESIA KORDINATOR DAERAH SUMATERA UTARA

BERBASIS WEB

TUGAS AKHIR

RAHMAD RIWANDA SIREGAR 112406248

PROGRAM STUDI D3 TEKNIK INFORMATIKA DEPARTEMEN MATEMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM UNIVERSITAS SUMATERA UTARA

MEDAN 2015

PERANCANGAN SISTEM INFORMASI INTER CLUB INDONESIA KORDINATOR DAERAH SUMATERA UTARA


(2)

BERBASIS WEB

Diajukan untuk melengkapi tugas dan memenuhi syarat memperoleh gelar Ahli Madya

RAHMAD RIWANDA SIREGAR 112406248

PROGRAM STUDI D3 TEKNIK INFORMATIKA DEPARTEMEN MATEMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM UNIVERSITAS SUMATERA UTARA

MEDAN 2015


(3)

PERSETUJUAN

Judul : PERANCANGAN SISTEM INFORMASI

INTER CLUB INDONESIA

KORDINATOR DAERAH SUMATERA UTARA BERBASIS WEB

Kategori : TUGAS AKHIR

Nama : RAHMADRIWANDA SIREGAR

Nomor Induk Mahasiswa : 112406248

Program Studi : D-3 TEKNIK INFORMATIKA

Departemen : MATEMATIKA

Fakultas : MATEMATIKA DAN ILMU

PENGETAHUAN ALAM (FMIPA) UNIVERSITAS SUMATERAUTARA

Diluluskan di

Medan, 5Oktober 2015

Komisi Pembimbing : Diketahui/ Disetujui oleh

Ketua Prodi D3 Teknik Informatika Dosen Pembimbing

Dr. Elly Rosmaini, M.Si

NIP.196005201985032002 NIP.197103101997031004


(4)

PERNYATAAN

PERANCANGAN SISTEM INFORMASI INTER CLUB INDONESIA KORDINATOR DAERAH SUMATERA UTARA 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, 5 Oktober 2015

Rahmad Riwanda Siregar 112406248


(5)

PENGHARGAAN

Alhamdulillah, puji dan puja syukur penulis ucapkan kehadirat Allah SWT yang telah memberi rahmat dan hidayah-Nya sehingga penulis dapat menyelesaikan Tugas Akhir ini tepat pada waktunya. Tugas Akhir ini dibuat sebagai salah satu syarat untuk menyelesaikan perkuliahan pada Program Studi D-3 Teknik Informasi Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera Utara. Adapun judul Tugas Akhir yang penulis buat adalah “PERANCANGAN SISTEM INFORMASI INTER CLUB INDONESIA KORDINATOR DAERAH SUMATERA UTARA BERBASIS WEB”.

Pada kesempatan ini penulis menghaturkan ucapan terima kasih kepada: 1. Bapak Dr. Syahriol Sitorus, M.IT. selaku Dosen Pembimbing penulis yang

banyak sekali memberikan bantuan baik berupa saran maupun masukan dalam penyelesaian Tugas Akhit ini.

2. Bapak Dr. Sutarman, M.Sc. selaku Dekan Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera Utara.

3. Ibu Dra.Elly Rosmaini, M.Si. selaku Ketua Program Studi D3 Teknik Informatika Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera Utara.

4. Djoko Sutejo, selaku kordinator daerah Inter Club Indonesia Kordinator Sumatera Utara. Terimakasih karena telah memberi banyak saran dan mempermudah dalam mendapatkan data – data dalam pembuatan tugas akhir ini.

5. Teman – Teman yang telah menjadi keluarga besar penulis di perantauan, para member ICI Medan, Forza Inter.

6. Keluarga di kampung, Ibunda “Rima Zahara Nasution”, Ayahanda “Mazwar”, dan tiga adik perempuan penulis “Rahayu Septianda Siregar, Dinda Novita Lestari Siregar, dan Paradiba Apriliani Siregar” yang terus memberi semangat dan motivasi yang besar kepada penulis dalam penyelesaian Tugas Akhir ini.


(6)

7. Keluarga kecil satu atap di perantauan, adik sepupu Cahya Rizky. Terimakasih kasih karena selalu memberi semangat. Kakak sepupu Shofia Mastura yang berniat mendukung sampai diselesaikannya tugas akhir ini.

8. Hengki Sardi Tanjung, tidak seperti teman melainkan keluarga. Terimakasih karena telah memberi semangat penulis dengan makian dan sindiran.

9. Teman yang sama berjuang dan hampir senasib. Ikhfal Fazwi, terimakasih karena tidak menunggu. Rio Manik, tetap berjuang!

10.Teman – teman Teknik Kimia USU 2010, atas semangat dan dukungannya. Reaksikan!!!

11.Setiap teman yang mendukung penulis yang masih stay di Padangsidimpuan. 12.Sahabat – sahabat yang telah wisuda terlebih dahulu, yang selalu bertanya

“kapan Tamat??”. Terimakasih atas motivasi tiada tanding.

13.Semua sahabat, mungkin lebih pantasnya disebut sekutu yang mengatasnamakan “2010”. Maaf penulis tidak dapat mencantumkan nama satu - persatu, kecuali Firman.

14.Mulut yang hampir berbuih karena mendesak penulis segera menyelesaikan tugas akhir ini. Kamu yang kerjaannya datang dan pergi, Aya Syarifah Nasution. Terimakasih atas desakan dengan menambah masalah.

Penulis menyadari bahwa dalam penyelesaian Tugas Akhir ini banyak terdapat kekurangan dan kesalahan, untuk itu penulis berharap adanya kritikan dan juga saran yang membangun dari semua pihak untuk penyempurnaan Tugas Akhir ini. Pada akhirnya, semoga Tugas Akhir ini dapat berguna dan bermanfaat untuk kita semua dan untuk penulis khususnya.

Medan, 5 Oktober 2015

Rahmad Riwanda Siregar


(7)

Pada penulisan Tugas Akhir ini, penulis membuat Perancangan Sistem Informasi Inter Club Indonesia Kordinator Daerah Provinsi Sumatera Utara Berbasis Webmerupakan sebuah website yang akan digunakan untuk dapat mengakses data dari website pada internet.

Metode dan rancangan website ini menggunakan PHP, HTML, MySQL, dan

CSS sebagai bahasa pemrogramannya. Cara kerja dari website yang dibuat adalah

dengan mengakses data yang terdapat di websiteInter Club Indonesia Kordinator Daerah Sumatera Utara.

Hasil rancangan dari website ini dapat memberikan informasi tentang team sepak bola FC Internazionale, informasi Inter Club Indonesia, berbelanja secara online, dan berdiskusi dengan member lain yang telah terdaftar di website ini. Target yang akan dicapai dalam perancangan website Inter Club Indonesia Kordinator Daerah Sumatera Utara ini adalah user mampu mengakses informasi tentang FC Internazionale dan menjalin kekeluargaan antar user yang telah terdaftar di website ini. Kajian ini dibuat bertujuan untuk menambah wawasan merancang website yang sederhana.


(8)

DAFTAR ISI

Halaman

Persetujuan i

Pernyataan ii Penghargaan iii Abstrak v Daftar Isi vi Daftar Gambar viii Daftar Tabel ix BAB 1 PENDAHULUAN

1

1.1 Latar Belakang 1

1.2 Permasalahan 3

1.3 Maksud Dan Tujuan 4

1.4 Metodologi Penelitian 4

1.5 Lokasi Dan Waktu 5

1.6 Sistematika Penulisan 5

BAB 2 LANDASAN TEORI 7

2.1 Pengertian Komputer 7

2.2 Internet 10

2.3 Word Wide Web (Web) 11

2.3.1 Lahirnya Web 13

2.3.2 Web Browser 13

2.3.3 Fungsi WWW 15

2.3.4 Web Server 15

2.4 HTML (Hypertext Markup Language) 16

2.4.1 Dokumen HTML 17

2.4.2 Tag Dan Elemen Dalam HTML 17

2.5 PHP (Hypertext Preprocessor) 20

2.5.1 Sejarah PHP 21

2.5.2 Hubungan PHP dengan HTML 23

2.5.3 Kelebihan PHP 24

2.6 CSS (Cassading Style-Sheet) 25


(9)

2.6.2 Kelebihan Pengunaan CSS 28

2.7 MySQL 28

2.8 Sistem Informasi 29

BAB 3 GAMBARAN SEKILAS TENTANG INTER CLUB INDONESIA

KORDINATOR DAERAH SUMATERA UTARA 32

3.1 Latar Belakang Inter Club Indonesia Kordinator Daerah

Sumatera Utara 32

3.2 Azaz, Sifat, Tujuan, Tugas Pokok dan Fungsi

Inter Club Indonesia Kordinator Daerah Sumatera Utara 33 3.3 Kepengurusan dan Kegiatan Inter Club Indonesia

Kordinator Daerah Sumatera Utara 34

BAB 4 PERANCANGAN SISTEM 35

4.1 Analisis Sistem 35

4.2 Perancangan Sistem 35

4.3 Metode Pengembangan Sistem 36

4.4 Metode Perancangan 37

4.4.1 Pembuatan Diagram Alir (Flowchart) 38 4.4.2 Diagram Konteks (Context Diagram) 45 4.4.3 Entity Relationship Diagram (ERD) 55

4.5 Table Database 58

BAB 5 IMPLEMENTASI SISTEM 62

5.1 Pengertian Implementasi Sistem 62

5.1.1 Tujuan Implementasi Sistem 62

5.2 Komponen Pada Sistem 63

5.2.1 Hardware 63

5.2.2 Software 63

5.2.3 Brainware 66

5.3 Uji program 67

BAB 6 KESIMPULAN DAN SARAN 72

6.1 Kesimpulan 72

6.2 Saran 73

DAFTAR PUSTAKA LISTING PROGRAM


(10)

Gamba Judul Halaman Nomor

Gambar 2.1 Dokumen HTML5 Ditampilkan Pada Jendela

Browser MozillaFirefox 20

Gambar 4.1 Flowchart Perancangan Website Inter Club Indonesia

Kordinator Daerah Sumatera Utara 43

Gambar 4.2 Flowchart User 44

Gambar 4.3 Flowchart Admin 45

Gambar 4.4 Diagram Konteks Perancangan Website Inter Club Indonesia

Kordinator Daerah Sumatera Utara 46

Gambar 4.5 DFD Level 0 47

Gambar 4.6 DFD Level 1 News 48

Gambar 4.7 DFD Level 1 Inter 49

Gambar 4.8 DFD Level 1 ICI PROVSU 50

Gambar 4.9 DFD Level 1 Gallery 51

Gambar 4.10DFD Level 1 Store 52

Gambar 4.11 DFD Level 1 Forum 53

Gambar 4.12 DFD Level 1 Contact 54

Gambar 4.13 ERD News 55

Gambar 4.14 ERD Pertandingan 55

Gambar 4.15 ERD ICIPROVSU 56

Gambar 4.16 ERD Gallery 56

Gambar 4.17 ERD Produk 56

Gambar 4.18 ERD Forum 57

Gambar 4.19 ERD Contact 57

Gambar 4.20 ERD Admin dan User 57

Gambar 5.1 Windows 8 Pro 64

Gambar 5.2 Sublime Text 2 64

Gambar 5.3 XAMPP Control Panel 65

Gambar 5.4 Localhost XAMPP 65

Gambar 5.5 Adobe PhotoShop CS3 Extended 66

Gambar 5.6 Tampilan Halaman Welcome Screen 67

Gambar 5.7 Tampilan Halaman Home 67

Gambar 5.8 Tampilan Halaman News 68

Gambar 5.9 Tampilan Halaman Inter 68

Gambar 5.10 Tampilan Halaman ICIPROVSU 69

Gambar 5.11 Tampilan Halaman Gallery 69

Gambar 5.12 Tampilan Halaman Store 70

Gambar 5.13 Tampilan Halaman Forum 70

Gambar 5.14 Tampilan Halaman Contact 71


(11)

DAFTAR TABEL

Tabel Judul Halaman

Nomor

Tabel 4.1 Tabel Database News 58

Tabel 4.2 Tabel Database Pertandingan 59

Tabel 4.3 Tabel Database ICIPROVSU (Regional) 59

Tabel 4.4 Tabel Database Gallery 59

Tabel 4.5 Tabel Database Produk 60

Tabel 4.6 Tabel Database Forum 60


(12)

(13)

BAB 1

PENDAHULUAN

1.1 Latar Belakang

Kebutuhan akan informasi yang akurat dan tepat waktu untuk menyajikan data yang lengkap sangatlah diperlukan oleh instansi baik instansi pemerintah maupun instansi swasta, organisasi dan perusahaan. Komputer sesuai fungsinya adalah sebagai alat untuk mengolah data menjadi informasi yang benar, akurat, tepat guna dan tepat waktu.

Perkembangan internet sekarang ini sangat jauh berbeda dengan awal masa kehadirannya. Kini internet telah banyak digunakan oleh berbagai instansi, organisasi dan perusahaan untuk mendukung kelancaran usaha dari sekedar penanganan pertukaran informasi, pengolahan data sampai kepenyelenggaraan bisnis lainnya. Kini internet yang popular sering disebut dengan web atau juga sering juga disebut peragkat 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 situs dan navigated oriented, tapi saat ini telah banyak bersifat dinamis, interaktif dan task oriented yang digunakan dalam system informasi dan telekomunikasi.


(14)

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.

Pada umumnya tujuan suatu instansi ataupun perusahaan adalah untuk menjamin dan meningkatkan mutu dan kualitas dengan harapan memperoleh hasil yang maksimal. Inter Club Indonesia Kordinator Daerah Provinsi Sumatera Utara adalah tolak ukur untuk menyatakan kordinator organisasi tersebut berhasil, apalagi data dan informasi yang mengalir didalamnya mampu disajikan dalam bentuk sistem informasi yang tersusun sedemikian rupa dan dituangkan dalam bentuk sistem informasi yang berbasis web, sehingga orang lain yang membutuhkan informasi dapat mengakses data dan melakukan komunikasi dengan mudah.

Dengan pertimbangan diataslah penulis mengangkat judul “PERANCANGAN

SISTEM INFORMASI INTER CLUB INDONESIA KORDINATOR DAERAH PROVINSI SUMATERA UTARA BERBASIS WEB”sebagai salah satu acuan agar

kordinator organisasi tersebut maju dalam bidang pengolahan data dan informasi sehingga sejajar dengan kordinator - kordinator lainnya yang terlebih dahalu telah menerapkan sistem tersebut.

Inter Club Indonesia adalah sebuah organisasi fans ataupun penggemar club sepak bola yang berasal dari Italy, FC Internazionale. Karena meningkatnya jumlah member yang terbentuk di Indonesia Indonesia, Inter Club Indonesia membagi kordinator tiap provinsi di Indonesia salah satunya kordinator daerah provinsi Sumatera Utara. Seiring dengan perkembangan teknologi informasi di Indonesia yang akurat dan tepat waktu untuk menyajikan data yang lengkap sangatlah diperlukan suatu organisasi. Maka kita dituntut untuk bisa mempunyai website sendiri seperti membuat sistem informasi. Hal ini sangatlah wajar mengingat manfaat yang kita dapatkan adalahmempunya website sendiri dan

database yang termenajemen dengan baik. Kemudahan orang lain untuk mengakses data


(15)

sebagai suatu syarat yang mutlak untuk mempromosikan kordinaor tersebut dalam bidang membagi informasi dengan cepat dan mudah.

1.2 Permasalahan

Pada umumnya setiap organisasi tidak akan terlepas dari beberapa masalah dalam aktivitasnya untuk mencapai tujuan. Masalah yang akan dipecahkan adalah bagaimana Inter Club Indonesia Kordinator Daerah Sumatera Utara dapat memanfaatkan aplikasi web sebagai suatu sarana untuk penyajian dan mengirimkan informasi dengan lebih cepat dan mudah bagi masyarakat umum dan kalangan anggota Inter Club Indonesia yang berada dalam daerah Provinsi Sumatera Utara.

Sehubungan dengan hal tersebut dapat dirumuskan permasalahan sebagai berikut:

1. Bagaimana pemanfaatan aplikasi web dalam penyebaran informasi mengenai FC Internazione dan Inter Club Indonesia.

2. Bagaimana informasi mengenai Inter Club Indonesia Korditor Daerah Sumatera Utara dapat disajikan dengan baik.

3. Bagaimana informasi berbasis websiteyang telah dirancang ini dapat diperbaharui (update) dengan mudah pada waktu yang diinginkan.

Untuk memperjelas dan untuk lebih memudahkan penelitian ini agar tidak menyimpang dari sasaran yang dituju, maka penulis melakukan pembatasan masalah :


(16)

1. Penelitian dilakukan pada Inter Club Indonesia Kordinator Daerah Sumatera Utara.

2. Data yang di analisa yaitusejarah organisasi, informasi seputar FC Internazionale, sistem penjualan merchandise, dan informasi seputar Inter Club Indonesia.

1.3 Maksud 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.

Tujuan dari penulisan tugas akhir ini adalah untuk merancang sistem informasi berbasis web pada Inter Club Indonesia Kordinator Daerah Sumatera Utara dengan menggunakan bahasa pemrograman web dan aplikasi lainnya untuk membantu dalam menyajikan informasi bagi member ataupun nonmember yang berada di Sumatera Utara ataupun diluar Sumatera Utara.

1.4 Metodologi Penelitian

Adapun metodologi penelitian yang diguunakan penulis adalah : a. Penelitian kepustakaan (Library research)

Disini penulis menggunakan buku-buku dan websiteyang berhubungan dengan masalah dalam menyusun tugas akhir sehingga dapat membantu penyelesaian masalah tersebut.


(17)

b. Penelitian lapangan (Field research)

Studi lapangan dilakukan dengan cara meneliti organisasi secara langsung untuk mendapatkan data-data yang berhubungan dengan masalah yang di teliti.

1.5 Lokasi dan Waktu

Dalam menyusun tugas akhir ini penulis melakukan metode penelitian untuk memperoleh data yang dibutuhkan, sehingga memudahkan penulis dalam menyusun tugas akhir dan dapat diselesaikan dengan baik. Adapun lokasi penelitian yang penulis lakukan yakni di basecamp Inter Club Indonesia Regional Medan yang dulunya berada di Kaswari Food Court, Jalan Kaswari Medan sekarang telah pindah ke Jalan Titi Papan No. 17 Medan. Untuk mengetahui sistem yang sedang berjalan pada saat ini, penulis membutuhkan waktu yaitu dari 24 November 2014sampai 31 Desember 2014.

1.6 Sistematika Penulisan

Adapun seistematika penulisan Laporan Tugas Akhir adalah sebagai berikut :

BAB 1 : PENDAHULUAN

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


(18)

BAB 2: LANDASAN TEORI

Dalam bab ini penulis menguraikan tentang pengertian yang berhubungan dengan komputer, sistem informasi, sejarah singkat internet, Word Wide

Web, HTML, PHP, javasript dan jquery, MySQL, dan Adobe Photoshop.

BAB 3: GAMBARAN SEKILAS TENTANG INTER CLUB INDONESIA KORDINATOR DAERAH SUMATERA UTARA

Dalam bab ini peulis menjelaskan sekilas gambaran Inter Club Indonesia Kordinator Daerah Sumatera Utara yang terdiri dari profil, struktur organisasi, visi dan misi Inter Club Indonesia Kordinator Daerah Sumatera Utara.

BAB 4: 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 5: IMPLEMENTASI SISTEM

Dalam bab ini penulis menyajikan tentang pengrtian dan tujuan implementasi dan komponen-komponen yang dibutuhkan sistem.

BAB 6 : KESIMPULAN DAN SARAN


(19)

(20)

BAB 2

LANDASAN TEORI

2.1 Pengertian Komputer

Komputer (computer)berasal dari Bahasa latin computare yang berarti menghitung. Kompoter mempunyai arti yang sangat luas dan berbeda untuk orang yang berbeda. Komputer adalah system elektronik untuk memanipulasi data yang cepat dan tepat serta dirancang dan diorganisasikan supaya secara otomatis menerima dan menyimpan data input, memprosesnya dan menghasilkan output dibawah pengawasan suatu langkah – langkah instruksi program yang tersimpan di memori

(stored program).

Bila dijabarkan, defenisi dari komputer adalah seperangkat peralatan elektronik yang bekerja bersama – sama secara otomatis, menerima output, memproses data dan menghasilkan data secara logis (output), cepat dan tepat berdasarkan perintah – perintah yang diberikan oleh user dan komputer itu sendiri merupakan bagian dari system komputerisasi.

Sistem komputer adalah suatu sistem yang terdiri atas komputer dan seluruh komponen – komponen yang menunjang terlaksananya proses pengolahan data dan


(21)

menjadikan komputer sebagai alat yang berguna. Sistem komputer memiliki bebrapa komponen, yaitu :

a. Perangkat Keras (Hardware)

Perangkat keras merupakan perangkat yang secara fisik dapat dilihat dan diraba, yang membentuk kesatuan, sehingga dapat difungsikan. Berdasarkan kegunaannya, perangkat keras dapat digolongkan kedalam tiga bagian :

1. Alat Input

Alat input adalah alat yang memiliki fungsi untuk memasukkan data ataupun program yang akan diproses komputer, seperti keyboard, mouse, printer,

scanner, dan lainnya.

2. Alat Proses

Alat proses atau CPU (Central Processing Unit), merupakan alau atau unit terpenting didalam sistem komputer. Fungsi utamanya adalah pusat pemprosesan data dan mengontrol keseluruhan sistem komputer selama pengolahan data berlangsung, contohnya processor.

3. Alat Output

Alat output adalah alat untuk menampilkan hasil pengolahan data yang dilakukan oleh CPU, misalnya monitor dan printer.


(22)

b. Perangkat Lunak (Software)

Perangkat lunak adalah komponen komputer yang merupakan kumpulan program dan prosedur yang memungkinkan perangkat keras komputer dapat menjalankan fungsinya sebagai alat pengolahan data. Komponen ini tidak nyata secara fisik. Perangkat lunak berfungsi sebagai perantara antara computer dan user sehingga dapat digunakan.

c. Perangkat Komputer (Brainware)

Pengguna komputer adalah manusia yang menangani suatu sistem komputer atau orang yang mampu menangani suatu sistem operasi komputer. Brainware dapat dikelompokkan dalam beberapa bagian, yaitu :

1. Sistem Analisis

Orang yang bertugas untuk membentuk dan merancang fasilitas suatu sistem komputer yang akan dibangun.

2. Programmer

Orang yang bertugas menerjemahkan spesifikasi yang telah dirancang oleh sistem analisis kedalam suatu Bahasa program tertentu.

3. Komputer Operator

Orang yang bertugas menangani pengolahan data secara langsung.

4. Data Entry Operator

Orang yang bertugas melakukan pengurusan data yang akan diolah, mulai dari pengumpulan data, perekaman data kedalam media penyimpanan hingga pemeriksaan dan pengiriman informasi yang akan dihasilkan oleh Komputer.


(23)

2.2 Internet

Pertahanan disebut mendemonstrasikan bagaimana dengan berbasis 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

Tujuan awal dibangunnya proyek itu adalah untuk keperluan militer. Pada saat itu membuat siste komputer di daerah-daerah vital untuk mengatasi masalah bila terjadi serangan terjadi perang dapat mudah dihancurkan.

Pada mulanya ARPANET hanya menghubungkan 4 situs saja yaitu pada tahun


(24)

bula daerah, dan semua 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

2.3 Word Wide Web (WWW)

World Wide Web (biasa disingkat WWW) adalah suatu ruang informasi yang yang

dipakai oleh pengenal global untuk mengidentifikasi sumber-sumber daya yang berguna. WWW sering dianggap sama dengan internet secara keseluruhan, walaupun sebenarnya ia hanyalah bagian daripada internet. WWW merupakan kumpulan serverweb dari seluruh dunia yang mempunyai kegunaan untuk menyediakan data dan informasi untuk dapat digunakan bersama.

WWW adalah bagian yang paling menarik dari Internet. Melalui web, para pengguna dapat mengakses informasi-informasi yang tidak hanya berupa teks tetapi bisa juga berupa gambar, suara, video dan animasi. Kegunaan ini tergolong masih baru dibandingkan surat elektronik, sebenarnya WWW merupakan kumpulan dokumen yang tersimpan di server web, dan tersebar di lima benua termasuk Indonesia yang terhubung menjadi satu melalui jaringan internet.


(25)

Dokumen-dokumen informasi ini disimpan atau dibuat dengan format HTML (Hypertext Markup Language).

Suatu halaman dokumen informasi dapat terdiri atas teks yang saling terkait dengan teks lainnya atau bahkan dengan dokumen lain. Keterkaitan halaman lewat teks ini disebut hyperlink. Dokumen infomasi ini tidak hanya terdiri dari teks tetapi dapat juga berupa gambar, mengandung suara bahkan klip video. Kaitan antar-dokumen yang seperti itu biasa disebut hipermedia. Jadi dapat disimpulkan bahwa WWW adalah sekelompok dokumen multimedia yang saling bertautan dengan menggunakan tautan hiperteks atau hyperlink. Dengan mengeklik hyperlink, maka para pengguna bisa berpindah dari satu dokumen ke dokumen lainnya.

Interface identik dengan web, Karena poularitas sebagai penyedia informasi

dan interface yang digunakan oleh pengguna internet dari masalah informasi sampai dengan komunikasi. Dari yang gratis sampai dengan yang komersil.

Web memudahkan pengguna komputer untuk berinteraksi dengan pelaku internet

lainnya. Selain itu web telah diadopsi oleh perusahaan sebagai bagian dari startegi teknologi informasi, karena bebrapa kelebihan yaitu :

a. Update informasi dengan cepat dan mudah. b. Menghemat biaya komunikasi dan administrasi.

c. Beriklan dan menyampaikan informasi tanpa henti 24 jam sehari. Edukasi klien dan calon klien tentang produk atau jasa yang anda berikan.

d. Brand Awarness dengan cara iklan di web terkemuka atau dengan tukar link. e. Desain dan isi web dapat mencerminkan keseriusan anda atau perusahaan anda.


(26)

f. Bonafiditas naik. Kartu nama tidak lagi hanya berisi kontak alamat, telepon dan email.

2.3.1 LahirnyaWeb

Sejarah World Wide Web bermula di European Laboratory for Particle Physics (lebih dikenal dengan nama CERN), di kota Geneva dekat perbatasan Perancis dan Swiss. CERN merupakan suatu organisasi yang didirikan oleh 18 negara di Eropa. Dibulan Maret 1989, Tim Berners dan peneliti lainnya dari CERN mengusulkan suatu protokol sistem distribusi informasi di Internet yang memungkinkan para anggotanya yang tersebar di seluruh dunia saling membagi informasi dan bahkan untuk menampilkan informasi tersebut dalam bentuk grafik.

2.3.2 Web Browser

Web Browser pertama dibuat dengan berbasiskan pada teks. Untuk menyatakan

suatu link, dibuat sebarisan nomor yang mirip dengan suatu menu. Pemakai mengetikkan suatu nomor untuk melakukan navigasi di dalam web. Kebanyakan

software tersebut dibuat untuk komputer-komputer yang menggunakan Sistem

Operasi UNIX, dan belum banyak yang bisa dilakukan oleh pemakai komputer saat itu yang telah menggunakan Windows. Tetapi semua ini berubah setelah munculnya browser Mosaic dari NCSA (National Center for Supercomputing


(27)

Di bulan Mei 1993, Marc Andreesen dan beberapa murid dari NCSA membuat web browser untuk sistem X-Windows yang berbasiskan grafik dan yang mudah untuk digunakan. Dalam beberapa bulan saja, Mosaic telah menarik perhatian baik dari pemakai lama maupun pemakai baru di Internet. Kemudian NCSA mengembangkan versi-versi Mosaic lainnya untuk komputer berbasis UNIX, NeXT, Windows dan Macintosh.

Pada tahun 1994, Marc Andreesen meninggalkan NCSA, dan kemudian bersama Jim Clark, salah satu pendiri dari Silicon Graphics, membuat Netscape versi pertama. Kehadiran Netscape ini menggantikan kepopuleran Mosaic sebagai

web browser dan bahkan sampai saat ini Netscape merupakan browser yang

banyak digunakan setelah Internet Explorer dari Microsoft. Pada tahun yang sama CERN dan MIT mendirikan suatu konsorsium yang dinamakan World Wide Web

Consortium (W3C) yang bertugas untuk membangun standar bagi teknologi web.

Pada awal perkembangannya, sewaktu browser masih berbasiskan teks hanya terdapat sekitar 50 web. Di akhir tahun 1995 jumlah ini telah berkembang mencapai sekitar 300.000 web site. Dan diperkirakan sekarang ini jumlah pemakai

web telah mencapat sekitar 30-an juta pemakai diseluruh dunia.

Diantara browser web yang telah banyak digunakan pada saat peluncurannya diantaranya adalah MSN, Opera Mini, Mozila Firefox, Google

Chrome dan lain sebagainya. Diantara web browser ini terdapat kelebihan dan

kekurangan masing-masing sehinnga pengguna dapat memilih web browser sesuai dengan kemudahan yang ditawarkan.


(28)

2.3.3 Fungsi WWW

Fungsi WWW adalah menyediakan data dan informasi untuk dapat digunakan bersama. Hal ini senada dengan pengertian www yang telah disebutkan di atas. Dengan demikian, salah satu fungsi www di internet menawarkan berbagai kecanggihan dan kemudahan pemakai intenet mendapatkan dan menampilan informasi dimana saja di internet secara mudah dan cepat.

Cara Kerja Browser Mengambil Halaman

Suatu browser mengambil halaman sebuah web page dari server dengan sebuah

request. Sebuah request adalah HTTP standar yang berisi sebuah page address.

Sebuah page address dapat di contohkan sebagai berikut :

2.3.4 Web Server

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.

Web server juga merupakan sebuah perangkat komputer yang digunakan untuk

mengakses segala jenis file yang terdapat pada halaman web melalui HTTP/HTTPS dengan menggunakan web browser dan mengirimkan kembali hasil permintaannya dalam bentuk halaman – halaman web yang berbentuk dokumen HTML.


(29)

2.4 HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language) yaitu bahasa pemrograman standar yang digunakan untuk membuat sebuah halaman web, yang kemudian dapat diakses untuk menampilkan berbagai informasi di dalam sebuah penjelajah web browser. HTML dapat juga digunakan sebagai link link antara file-file dalam situs atau dalam komputer dengan menggunakan localhost, atau link yang menghubungkan antar situs dalam dunia

Untuk dapat menghasiilkan tampilan wujud yang terintegrasi, format

hiperteks sederhana ditulis dalam berkas format ASCII sehingga menjadi halaman web dengan perintah-perintah HTML.

Ada beberapa versi dalam HTML, yaitu :

a.

b.

c.

d.

e.

f.

Disini penulis menggunakan versi HTML 5.


(30)

Dokumen HTML adalah teks murni yang dibuat menggunakan editor teks. Dokumen HTML merupakan dokumen yang disajikan dalam web surfer. Dokumen pada umumnya berisi informasi atau interface aplikasi dalam internet.

Penamaan dokumen HTML pada beberapa sistem operasi bersifat case

sensitive (membedakan huruf kapital dan biasa). Nama dokumen yang sama tapi

dituliskan dengancase yang berbeda akan dianggap menjadi dokumen yang berbeda, misalnya “file.html” berbeda dengan “FILE.html” dan sebagainya.

Dokumen HTML mirip dengan dokumen tulisan biasa, hanya dalam dokumen ini sebuah tulisan bisa memuat instruksi yang ditandai dengan kode atau lebih dikenal dengan tag tertentu.

2.4.2 Tag dan Elemen Dalam HTML

Tag adalah teks atau disebut dengan istilah script yang ditulis diantara tanda < dan >. Tag berfungsi untuk menentukan bagaimana sebuah web akan dibuat. Dengan kata lain tag mengontrol bentuk teks, paragraf, tabel dan banyak lagi.

Elemen merupakan istilah untuk komponen dasar pembentuk HTML5. Nama elemen ditunjukkan dengan tag. Suatu elemen harus ditandai dengan tag yang berpasangan, namun ada beberapa elemen yang tidak mengharuskan tag nya ditulis secara berpasangan. Contohnya :


(31)

b. Ganti garis - break time dengan tag<br>. c. Ganti datar - horizontal dengan tag<hr>. d. List item dengan tag<li>.

Pada penulisan script HTML5 dimulai dengan menentikan tipe dokumen lewat tag :

<!DOCTYPE HTML>

Fungsi Document Type diatas untuk menginformasikan kepada browser jenis dokumen yang akan dibuat yaitu dokumen HTML, secara spesifik adalah HTML5.

Struktur script dasar adalah menulis tag diawal sebagai berikut : <html>

<head> <body>

Selanjutnya bisa menulis materi yang akan ditampilkan dalam jendela browser dengan tag <p>. Kemudian tutup script dengan mengetik tag penutup untuk body dan html :

</body> </head> </html>

Tag <head> .... </head> ditulis sebelum body memiliki fungsi spesifik,

yaitu mencantumkan informasi yang secara umum tidak diletakkan dalam desain

web secara langsung. Dan tag <title> .... </title> fungsinya untuk menulis judul


(32)

Berikut adalah contoh susunan script sederhana <!DOCTYPE>

<html> <head>

<title> ... tugas akhir d3 MIPA USU </title>

</head> <body>

<h1> TUGAS AKHIR </h1>

<p> ini adalah contoh script sederhana </body>


(33)

Hasil dokumen HTML5 yang ditampilkan ditampilan Mozila Firefox sebagai berikut :

Gambar 2.1 Dokumen HTML5 ditampilkan pada jendela browser Mozila Firefox

2.5 PHP (Hypertext Preprocessor)

PHP adalah singkatan dari "PHP: Hypertext Preprocessor", yang merupakan sebuah bahasa scripting yang terpasang pada HTML. Sebagian besar sintaks mirip dengan bahasa C, Java dan Perl, ditambah beberapa fungsi PHP yang spesifik.


(34)

Tujuan utama penggunaan bahasa ini adalah untuk memungkinkan perancang web menulis halaman web dinamik degan cepat.

2.5.1 Sejarah PHP

PHP pertama kali dibuat oleh Rasmus Lerdroft, seorang programmer C. Semula PHP digunakannya untuk menghitung jumlah pengunjung di dalam

webnya. Kemudian ia mengeluarkan Personal Home Page Tools versi 1.0 secara

gratis. Versi ini pertama kali keluar pada tahun 1995. Isinya adalah sekumpulan script PERL yang dibuatnya untuk membuat halaman webnya menjadi dinamis. Kemudian pada tahun 1996 ia mengeluarkan PHP versi 2.0 yang kemampuannya telah dapat mengakses database dan dapat terintegrasi dengan HTML.

Pada tahun 1998 tepatnya pada tanggal 6 Juni 1998 keluarlah PHP versi 3.0 yang dikeluarkan oleh Rasmus sendiri bersama kelompok pengembang softwarenya.Versi terbaru, yaitu PHP 4.0 keluar pada tanggal 22 Mei 2000 merupakan versi yang lebih lengkap lagi dibandingkan dengan versi sebelumnya.

Perubahan yang paling mendasar pada PHP 4.0 adalah terintegrasinya Zend Engine yang dibuat oleh Zend Suraski dan Andi Gutmans yang merupakan penyempurnaan dari PHP scripting engine. Yang lainnya adalah build in HTTP session, tidak lagi menggunakan library tambahan seperti pada PHP. Tujuan dari bahasa scripting ini adalah untuk membuat aplikasi-aplikasi yang dijalankan di atas teknologi web.


(35)

Dalam hal ini, aplikasi pada umumnya akan memberikan hasil pada web

browser, tetapi prosesnya secara keseluruhan dijalankan web server.

Seluruh aplikasi berbasis web dapat dibuat dengan PHP. Namun kekuatan yang paling utama PHP adalah pada konektivitasnya dengan system database di dalam web. Sistem database yang dapat didukung oleh PHP adalah :

1. Oracle 2. MySQL 3. Sybase 4. PostgreSQL 5. Dan lainnya

PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995. Pada waktu itu PHP bernama FI (Form Interpreted). Pada saat tersebut PHP adalah sekumpulan script yang digunakan untuk mengolah data form dari web.

Perkembangan selanjutnya adalah Rasmus melepaskan kode sumber tersebut dan menamakannya PHP/FI, pada saat tersebut kepanjangan dari PHP/FI adalah Personal HomePage/Form Interpreter. Dengan pelepasan kode sumber ini menjadi open source, maka banyak programmer yang tertarik untuk ikut mengembangkan PHP.


(36)

Pada November 1997, dirilis PHP/FI 2.0. Pada rilis ini interpreter sudah diimplementasikan dalam 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 nama rilis tersebut menjadi PHP 3.0.

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. Versi ini banyak dipakai sebab versi ini mampu dipakai untuk membangun aplikasi web kompleks tetapi tetap memiliki kecepatan proses dan stabilitas yang tinggi.

Pada Juni 2004, Zend merilis PHP 5.0. Versi ini adalah versi mutakhir dari PHP. Dalam versi ini, inti dari interpreter PHP mengalami perubahan besar. Dalam versi ini juga dikenalkan model pemrograman berorientasi objek baru untuk menjawab perkembangan bahas pemrograman kearah pemrograman berorientasi objek.

2.5.2 Hubungan PHP Dengan HTML

Halaman web biasanya disusun dari script html yang disimpan dalam sebuah file berekstensi .html. File html ini dikirimkan oleh server (atau file) ke browser,


(37)

Kemudian browser menerjemahkan script tersebut sehingga menghasilkan suatu tampilan yang indah. Lain halnya dengan program php, program ini harus diterjemahkan oleh web server sehingga menghasilkan kode html yang dikirim ke

browser agar dapat ditampilkan.

Program ini dapat berdiri sendiri ataupun disisipkan di antara script html sehingga dapat langsung ditampilkan bersama dengan script HTML tersebut.

Program php dapat ditambahkan dengan mengapit program tersebut di antara tanda. Tanda-tanda tersebut biasanya disebut tanda untuk escaping (kabur) dari script html. File html yang telah dibubuhi program php harus diganti ekstensi nya menjadi .php3 atau php.

PHP merupakan bahasa pemograman web yang bersifat server-side HTML=embedded scripting, di mana script nya menyatu dengan HTML dan berada si server. Artinya adalah sintaks dan perintah-perintah yang kita berikan akan sepenuhnya dijalankan di server tetapi disertakan HTML biasa. PHP dikenal sebagai bahasa scripting yang menyatu dengan tag HTML, dieksekusi di server dan digunakan untuk membuat halaman web yang dinamis seperti ASP (Active

Server Pages) dan JSP (Java Server Pages).

2.5.3 Kelebihan PHP

Ketika teknologi komunikasi semakin berkembang, situs-situs yang statispun semakin ditinggalkan, karena dianggap sudah tidak memenuhi keinginan pasar.


(38)

Padahal situs tersebut harus tetap dinamis. Pada saat ini bahasa PERL dan CGI sudah jauh ketinggalan jaman sehingga sebagian besar designer web banyak beralih ke bahasa server-side scripting yang lebih dinamis seperti PHP.

Pemrograman kearah pemrograman berorientasi objek. Kelebihan PHP dari bahasa pemrograman lain

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 IIS sampai dengan apache, 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 referensi yang banyak.

e. PHP adalah bahasa open source yang dapat digunakan di berbagai mesin (linux, unix, windows) dan dapat dijalankan secara runtime melalui perangkat serta juga dapat menjalankan perintah-perintah sistem.

2.6 CSS (Cassading Style-Sheet)

CSS (Cascading Style-Sheet) adalah sebuah pengembangan atas script HTML yang sudah ada sebelumnya. Dengan CSS, kita bisa menentukan sebuah struktur dasar


(39)

halaman web secara lebih mudah dan cepat, serta irit ukuran. CSS juga membantu kita untuk menyeragamkan seluruh halaman web dengan tampilan yang konsisten.

Misalnya, kita mau seluruh hurufyang ada di web kita adalah huruf "Tahoma", maka dengan bantuan CSS kita bisa bikin proses itu menjadi otomatis tanpa harus mengganti-ganti huruf secara manual di setiap halaman.

Sebelum CSS menjadi standar untuk mendesain halaman web seperti sekarang, halaman web di desain menggunakan <table>. Terlebih dahulu pengerjaan desain, dalam format .psd atau jpeg, lalu di slice atau di potong potong menjadi bagian – bagian terpisah. Kemudian pembuatan tabel dengan ukuran yang sesuai, lalu desain tadi di “tempel” pada table sebagai image yang melekat pada tabel, atau sebagai background. Kelemahan dari cara seperti ini adalah, halaman

web menjadi berat karena kolom – kolom penyusun table <tr> dan <td> diberi

tambahan atribut image source. Side effect dari hal ini adalah halaman web menjadi padat dan tidak SEO friendly.

Pada perkembangannya CSS sudah masuk lelvel 3 untuk sekarang, dimana dimulai CSS level 1 atau yang sering di sebut CSS aja, kemudian level 2 yang merupakan penyempurnaan dari CSS level sebelumnya, yaitu CSS level 1.

CSS merupakan alternatif bahasa pemrograman web masa yang akan datang, dimana mempunyai banyak keuntungan, diantaranya :

a. Ukuran file lebih kecil b. Load file lebih cepat


(40)

d. Pasangan setia XHTML

e. Menghemat pekerjaan tentunya, dimana hanya membuat 1 halaman CSS. f. Mudah mengganti-ganti tampilan dengan hanya merubah file CSS saja.

2.6.1 Sejarah CSS

Pada tanggal 17 Agustus 1996, World Wide Web Consortium (W3C) menjadikan CSS sebagai bahasa pemrograman standart dalam pembuatan dokumen web. Tujuannya adalah mengurangi pembuatan tag-tag baru oleh Netscape dan Internet Explorer, karena kedua kedua browser pada saat itu bersaing mengembangkan TAG sendiri untuk mengatur tampilan web.

CSS level 1 mendukung pengaturan tampilan dalam hal: a. Huruf (jenis, ketebalan)

b. Warna, teks, backgrounf dan elemen lainnya

c. Text attributes, misalnya spasi antar baris, kata dan huruf d. Posisi teks, gambar, table dan elemen lainnya

e. Marjin, border dan padding.

Selanjutnya di tahun 1998, W3c menyempurnakan CSS awal dengan menciptakan standar CSS2 (CSS level 2) yang menjadi standar hingga saat ini. Pada CSS level 2 ini, di masukkan semua atribut dari CSS1, serta diperluas dengan penekanan pada Internasional accessibility and capability khususnya media-specific CSS. Bahkan pada tahun 2000, tidak lama setelah CSS2 di implementasikan. CSS2 ini sampai sekarang masih terus dikembangkan, spesifikasinya dibagi pada beberapa topik atau modul.


(41)

Adapun kelebihan dengan menggunakan CSS adalah sebagai berikut :

a. Halaman web menjadi tidak padat, hingga halaman web menjadi SEO friendly b. Dapat dengan mudah mengganti tampilan web dengan cukup mengganti nilai dan

definisi pada pada satu file CSS saja.

2.7 MySQL

MySQL adalah satu perangkat lunak sistem pengola basis data (Database Management System). MySQL juga dapat dikategorikan sebagai Relation Database Management System (RDBMS). Karena dalam pembuatan basis data pada MySQL

dapat dibedakan dalam berbagai tabel dua dimensi. Setiap tabel pada MySQL terdiri atas lajur horizontal dan lajur vertikal.

MySQL pada saat ini banyak digunakan oleh pemrograman web untuk

membangun situs yang memerlukan basis data sebagai data dan pengolahan data. Untuk keperluan menampung data dalam server haruslah diperlukan database.

MySQL merupakan sebuah program aplikasi untuk membuat database yang umum

digunakan pada web server. MySQL banyak digunakan karena kemampuannya dalam menampung data yang cukup besar dan proses yang cepat dalam memanggil data.


(42)

2.8 Sistem Informasi

Sistem adalah suatu jaringan kerja dari prosedur-prosedur yang saling berhubungan, berkumpul bersama-sama untuk melakukan suatu kegiatan atau untuk menyelesaikan suatu sasaran yang tertentu. Sistem adalah kumpulan dari elemen-elemen yang berinteraksi untuk mencapai suatu tujuan tertentu.

Informasi merupakan hal yang sangat vital dalam suatu organisasi. Jika informasi tesebut dapat memberikan arti bagi penerimanya, maka informasi itu mempengaruhi suatu keputusan yang telah diambil sebelumnya sehingga dapat memberi suatu nilai tertentu, mengemukakan bahwa informasi adalah data yang telah diolah menjadi bentuk yang lebih berguna bagi penerimanya dan bermanfaat dalam mengambil keputusan baik saat ini atau mendatang.

Informasi adalah data yang diolah menjadi bentuk yang lebih berarti dan lebih berguna bagi yang menerimanya. Sumber informasi adalah data. Data merupakan bentuk jamak dari bentuk tunggal datim atau data item. Data adalah kenyataan yang menggambarkan suatu kejadian-kejadian dan kesatuan nyata. Kejadian (event) adalah suatu yang terjadi pada saat tertentu. Kesatuan nyata merupakan objek nyata seperti tempat, benda, orang dan lain sebagainya yang betul-betul ada dan terjadi.

Data diolah melalui suatu model yang disebut siklus informasi atau siklus pengolahan. Data yang diolah atau diproses yang akan menghasilkan keluaran berupa


(43)

informasi, informasi tersebut akan menjadi input bagi proses berikutnya dan seterusnya lagi terus berputar.

Sistem informasi adalah suatu sistem atau tatanan kerja buatan manusia yang secara umum terdiri atas sekumpulan komponen berbasis komputer dan manual yang dibuat untuk menghimpun, menyimpan, dan mengelola data serta menyediakan informasi keluaran kepada para pemakai.

Adapun yang harus diperhatikan dalam membuat sistem informasi adalah sebagai berikut :

1. Kualitas Informasi

a. Akurat berarti informasi harus bebas dari kesalahan dan tidak menyesatkan. Informasi harus akurat dari sumber informasi sampai ke penerima informasi. b. Tepat pada waktunya, artinya informasi yang datang pada penerima tidak boleh

terlambat, informasi yang sudah usang tidak mempunyai nilai lagi dan bila informasi terlambat akan dapat menimbulkan masalah dalam organisasi.

c. Relevan berarti informasi tersebut mempunyai manfaat untuk pemakainya. Relevansinya informasi untuk tiap-tiap orang, satu dengan yang lainnya berbeda.

2. Informasi dalam ruang lingkup sistem informasi memiliki beberapa ciri yaitu sebagai berikut :

a. Benar atau salah, ini dapat berhubungan dengan realita atau tidak. b. Baru, informasi dapat sama sekali baru dan segar bagi penerimanya.


(44)

c. Tambahan, informasi dapat mempengaruhi atau memberikan tambahan baru pada informasi yang telah ada.

d. Korektif, informasi dapat menjadi suatu koreksi dan informasi salah atau palsu sebelumnya.

e. Penegas, informasi dapat mempertegas informasi yang telah ada.

Dalam berbagai literature manajemen, terkandung suatu pengertian informasi yang sasaran akhirnya adalah untuk pengambilan keputusan. Penggunaan informasi diharapkan akan menambah pengetahuan bagi yang menggunakannya. Namun demikian tidak selamanya bahwa pengguna informasi akan mengakibatkan suatu pilihan mutlak.

3. Nilai Informasi

Nilai dari informasi (Value of Information) ditentukan dari dua hal, yaitu manfaat dan biaya mendapatkannya. Suatu informasi dikatakan bernilai bila manfaatnya lebih efektif dibandingkan dengan biaya mendapatkannya. Akan tetapi perlu diperhatikan dalam informasi, umumnya dapat digunakan untuk beberapa kegunaan. Sehingga tidak memungkinkan untuk menghubungkan suatu bagian informasi pada suatu masalah yang tertentu dengan biaya untuk memperolehnya, karena sebagian informasi dinikmati tidak hanya oleh satu pihak dalam perusahaan. Lebih lanjut sebagian informasi tidak dapat ditaksir keuntungannya dengan satuan nilai uang, tetapi ditaksir efektivitasnya.


(45)

(46)

BAB 3

GABARAN SEKILAS TENTANG

INTER CLUB INDONESIA

KORDINATOR DAERAH PROVINSI SUMATERA UTARA

3.1 Latar Belakang Inter Club Indonesia Kordinator Daerah Sumatera Utara

ICI adalah organisasi pendukung klub sepakbola FC Internazionale di Italia yang beraffiliasi dan tunduk pada regulasi serta peraturan- peraturan yang dikeluarkan oleh CCIC (Centro Coordinamento Inter Club).

Organisasi Inter Club Indonesia disingkat ICI yang didirikan pada tanggal 24 Agustus di Jakarta. Pengurus pusat ICI berkedudukan di Jakarta dan pengurus regional berkedudukan di setiap wilayah Provinsi/Kabupaten/ Kotamadya di Indonesia, kecuali dalam kondisi tertentu yang diputuskan oleh Pengurus Pusat.

Inter Club Indonesia Kordinator Daerah Sumatera Utara dibentuk agar mempermudah mengkordinasi Organisasi ICI yang berada di daerah Sumatera Utara. Pengurus Inter Club Indonesia Kordinator Daerah Sumatera Utara berkedudukan di Kota Medan, Sumatera Utara.

3.2 Azaz, Sifat, Tujuan, Tugas Pokok dan Fungsi Inter Club Indonesia Kordinator Daerah Sumatera Utara

Inter Club Indonesia berazaskan “kebersamaan, kekeluargaan dan anti kekerasan” dengan bersifat “independen, profesional, demokratis dan bertanggung jawab”.


(47)

Inter Club Indonesia Kordinator Daerah Sumatera Utaradidirikan dengan tujuan untuk menjadi wadah resmi dan ajang silaturahmi bagi para pendukung FC

Internazionale yang ada di wilayah Sumatera Utara.

Inter Club Indonesia Kordinator Daerah Sumatera Utara mempunyai tugas pokok sebagai berikut :

1. Membina dan mengayomi seluruh anggota untuk menjadi pendukung yang profesional, anti kekerasan, dan menjunjung tinggi perdamaian antar

pendukung.

2. Memberikan kesempatan yang sama kepada setiap anggota untuk mengembangkan karier organisasi sesuai dengan kemampuan masing-masing.

Di dalam melaksanakan tugas pokok, Inter Club Indonesia Kordinator Daerah Sumatera Utara mempunyai fungsi sebagai berikut :

1. Sebagai sarana penampung dan penyalur aspirasi para anggota.

2. Sebagai penyelenggara kegiatan dalam rangka mendukung FC Internazionale di Sumatera Utara.


(48)

3.3 Kepengurusan dan Kegiatan Inter Club Indonesia Kordinator Daerah Sumatera Utara

Kepengurusaan Inter Club Indonesia Kordinator Daerah Sumatera Utara dipilih dari dan oleh anggota melalui mekanisme musyawarah pembentukan kepengurusan di Sumatera Utara. Setiap yang dapat dipilih menjadi pengurus Inter Club Indonesia Kordinator Daerah Sumatera Utaraadalah anggota ICI Moratti yang memenuhi syarat sebagai berikut:

1. Bersedia menjadi pengurus tanpa imbalan / pamrih apapun. 2. Memiliki kemauan dan kemampuan mengelola organisasi. 3. Bertanggung jawab serta mau bekerja keras.

Inter Club Indonesia Kordinator Daerah Sumatera Utara menyelenggarakan kegiatan yang terdiri dari:

1. Kegiatan rutin keanggotaan.


(49)

BAB 4

PERANCANGAN SISTEM

4.1 Analisis Sistem

Analisis sistem bertujuan untuk mengidentifkasi jalannya suatu sistem dan permasalahan – permasalahan yang terjadi pada sistem yang dibuat, yang meliputi perangkat keras (Hardware), perangkat lunak (Software), dan pengguna (Brainware). Analisis sistem dibutuhkan sebagai tahapan dasar perancangan sistem yang bekerja, yaitu meliputi pembahasan desain, deskripsi sistem, rancangan umum, spesifikasi kebutuhan, dan perancangan basis data (RED).

4.2 Perancangan Sistem

Perancangan merupakan proses setelah analisis dari siklus pengembangan sistem, pendefenisian dari kebutuhan – kebutuhan fungsional, persiapan untuk merancang implementasi, menggambarkan bagaimana suatu sistem dibentuk yang dapat berupa penggambaran, perancangan dan pembuatan sketsa atau pengaturan dari beberapa elemen yang terpisah kedalam satu kesatuan yang utuh dan berfungsi mengkonfigurasikan perangkat lunak dan perangkat keras dari suatu sistem.


(50)

Dalam hal ini, sistem yang akan penulis rancang adalah dengan menggunakan PHP dan HTML sebagai bahasa pemogramannya dan MySQL sebagai database nya serta Sublime Textsebagai media untuk merancang bahasa program dari sistem inforamsi berbasis web ini.

Adapun spesifikasi serta target terhadap sistem yang akan dibuat yaitu :

1. Perancangan yang akan dibuat yaitu “Perancangan Sistem Informasi Inter Club

Indonesia Kordinator Daerah Sumatera Utara Berbasis Web”. Yang

menyediakan informasi-informasi yang berkaitan dengan FC. Internazionale dan Inter Club Indonesia.

2. Target yang ingin dicapai dalam perancangan sistem informasi berbasis web ini adalah diharapkan sebagai media ataupun wadah untuk mempermudah member Inter Club Indonesia yang berada dalam naungan ataupun diluar naungan Kordinator Daerah Sumatera Utara dalam pengaksesan informasi serta data – data yang dibutuhkan member Inter Club Indonesia.

4.3 Metode Pengembangan Sistem

Dalam pembuatan tugas akhir ini, penulis menggunakan metode yang terdiri dari :

1. Studi Kelayakan

Studi kelayakan adalah studi awal untuk memeriksa kebutuhan informasi calon pengguna akhir dan tujuannya, batasan, kebutuhan sumber daya, biaya, manfaat, dan kelayakan dari proyek yang diusulkan.


(51)

2. Rencana Pendahuluan

Yaitu menentukan lingkup sistem yang akan ditangani.

3. Analisi Sistem

Penguraian dari suatu sistem informasi yang utuh ke dalam bagian – bagian komponennya 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

Pendefenisian dari kebutuhan – kebutuhan fungsional, persiapan untuk merancang bangun implementasi, menggambarkan bagaimana suatu sistem dibentuk serta mengkonfigurasikan komponen – komponen perangkat lunak dan perangkat keras dari sistem.

5. Implementasi Sistem

Tahap untuk meletakkan sistem supaya siap untuk dijalankan.

4.4 Metode Perancangan

Metode perancangan sistem ini menggunakan metode pendekatan atas-bawah (top

and down approach). Perancangan ini dimulai dari bentuk yang luas yaitu diagram


(52)

4.4.1 Pembuatan Diagram Alir (Flowchart)

Dengan adanya flowchart, akan sangat membantu untuk memvisualisasikan isi dari setiap halaman dan navigasi antara halaman tersebut. Secara sederhana

flowchart keseluruhan web ini dapat dilihat sebagai berikut :

Keterangan :


(53)

Keterangan :

B = Tampilan Home F = Tampilan Galeri C = Tampilan Berita G = Tampilan Toko D = Tampilan Inter H = Tampilan Forum E = Tampilan ICI PROVSU I = Tampilan Kontak


(54)

(55)

(56)

(57)

(58)

Gambar 4.1 FlowchartPerancangan Website Inter Club Indonesia Kordinator Daerah Sumatera Utara


(59)

Gambar 4.2 Flowchart User

Login

Login

Logout

Halaman Utama

Input Username dan Pasword


(60)

Gambar 4.3 Flowchart Admin

4.4.2 Diagram Konteks (Contex Diagram)

Diagram Kontek (Contex Diagram) adalah diagram level tertinggi dari DFD yang menggambarkan hubungan sistem dengan sistem dengan lingkungan luar web.

Data flow Diagram (DFD) merupakan model dari sistem untuk menggambarkan

pembagian sistem ke modul yang lebih kecil. Salah satu keuntungan menggunakan Login

Login

Logout

Halaman Admin

Input Username dan Pasword


(61)

diagram alir data adalah memudahkan pemakai yang kurang menguasai bidang komputer untuk mengerti sistem yang akan dikerjakan. Pada tahap analisa, penanganan notasi simbol lingkaran dan anak panah menggambarkan arus data dalam perancangan sistem sangat membantu dalam komunikasi dengan pemakaian sistem menggunakan notasi-notasi untuk menggambarkan arus dari data sistem. Berikut ini adalah gambar DFD level 0 dan DFD level 1 yang merupakan perincian dari diagram konteks.

Disamping itu DFD 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.


(62)

Gambar 4.4 Diagram Konteks Perancangan Sistem InformasiInter Club Indonesia Kordinator Daerah Sumatera Utara Berbasis Web


(63)

(64)

(65)

(66)

(67)

(68)

(69)

(70)

(71)

4.4.3 Entity Relationship Diagram (ERD)

Entity Relationship Diagram (ERD) adalah suatu model untuk menjelaskan hubungan antar data dalam basis data (database) berdasarkan objek-objek dasar data yang mempunyai hubungan antar relasi.

Gambar 4.13 ERD News

Gambar 4.14 ERD Pertandingan

News Tanggal

Isi Id

Gambar Judul


(72)

Gambar 4.15 ERD ICIPROVSU

Gambar 4.16 ERD Gallery


(73)

Gambar 4.18 ERD Forum


(74)

Gambar 4.20 ERD Admin dan User

4.5 Tabel Database

Database digunakan untuk tempat penyimpanan data yang di masukkan atau diinput. Kemudian data tersebut akan ditampilkan dalam website. Berikut tabel database Website Pemerintahan Desa Firdaus Kecamatan Sei Rampah.

Nama Field Tipe Data Ukuran Keterangan

id Int 9 Id Berita

isi Text Text Isi Berita

judul Text Text Judul Berita


(75)

gambar Varchar 50 Gambar Berita

status Varchar 50 Status Berita

Tabel 4.1 Tabel Database News

Nama Filed Tipe Data Ukuran Keterangan

id Int 3 Id Pertandingan

gambar Text Text Gambar Pertandingan

hari Text Text Tanggal Pertandingan

jam Text Text Waktu Pertandingan

des Text Text Deskripsi Pertandingan

cup Varchar 20 Kejuaraan Pertandingan

skor Varchar 10 Skor Pertandingan

tanggal Text Text Waktu Update

status Varchar 50 Status Pertandingan

4.2 Tabel Database Pertandingan

Nama Field Tipe Data Ukuran Keterangan

id Int 10 Id Regional

regional Varchar 50 Nama Regional

agenda Text Text AgendaRegional

pengurus Text Text Pengurus Regional

kontak Text Text Kontak Regional


(76)

waktu Timestamp Timestamp (on update) Tanggal Update

Tabel 4.3 Tabel Database ICIPROVSU (Regional)

Nama Field Tipe Data Ukuran Keterangan

id Int 3 Id Gambar

gambar Text Text Gambar

des Text Text Deskripsi Gambar

waktu Timestamp Timestamp (on

update)

Taggal Update


(77)

Nama Field Tipe Data Ukuran Keterangan

idbrg Int 3 Id Produk

tgl Timestamp Timestamp (on

update)

Tanggal Update

namabrg Varchar 50 Nama Produk

spek Text Text Spesifikasi Produk

hargabrg Int 7 Harga Produk

stok Int 2 Stok Produk

gambar Varchar 225 Gambar Produk

status Varchar 50 Status Produk

Tabel 4.5 Tabel Database Produk

Nama Field Tipe Data Ukuran Keterangan

id_topik Int 5 Id Topik

nama Varchar 50 Nama User

avatar Varchar 50 Avatar User

topik Varchar 255 Topik Forum

isi Text Text Isi Topik

id_reply Int 5 Id Reply

waktu Timestamp Timestamp (on

update)

Tanggal Update

nama_reply Varchar 20 Nama Reply


(78)

Nama Field Tipe Data Ukuran Keterangan

id Int 3 Id Pesan

waktu Timestamp Timestamp (on

update)

Tanggal Update

nama Varchar 255 Nama User/Guest

email Varchar 255 Email User/Guest

pesan Varchar 255 Isi Pesan

avatar Text Text Avatar User

status Text Text Status User/Guest

username Text Text Username User


(79)

(80)

BAB 5

IMPLEMENTASI SISTEM

5.1 Pengertian Implementasi Sistem

Implementasi sistem adalah prosedur yang dilakukan untuk menyelesaikan desain sistem supaya siap untuk dioperasikan, termasuk juga menulis kode program jika tidak digunakan perangkat lunak seperti aplikasi.

5.1.1 Tujuan Implementasi Sistem

Adapun tujuan – tujuan dari implementasi sistem, yaitu :

a. mengkaji rangkaian sistem baik dari segi software maupun hardware sebagai sarana penyaji informasi.

b. Menyelesaikan rancangan sistem yang ada dalam dokumen sistem yang baru atau yang telah disetujui.

c. Memastikan bahwa pengunjung dapat mengoperasikan dengan mudah terhadap sistem yang baru dan mendapat informasi yang baik dan jelas.

d. Mempethitungkan bahwa sistem telah memenuhi permintaan pemakai, yaitu dengan menguji sistem secara menyeluruh.


(81)

e. Memastikan bahwa sistem telah berjalan dengan lancar dengan mengontrol dan melakukan instalasi secara benar.

5.2 Komponen Pada Sistem

Beberapa komponen yang sangat dibutuhkan pada perancangan web ini antara lain :

5.2.1 Hardware

Hardware merupakan komponen yang membantu menunjang terlaksananya sitem

yang dirancang. Dalam hal ini penulis merinci komponen hardware yang digunakan dalam perancangan, yaitu :

a. Personal Computer dengan Processor AMD E-350 APU with Radeon(tm) HD Graphic (2 CPUs), `1.6GHz

b. Hard Disk 298 GB

c. Memory 2048MB RAM

5.2.2 Software

Software sangat berhubungan dengan Hardware. Tanpa adanya software, Hardware tidak akan berfungsi sesuai dengan yang diharapkan. Adapun software


(82)

a. Operasi Windows 8 Pro 32-bit (6.2, Build 9200)

Gambar 5.1 Windows 8 Pro

b. Sublime Text 2

Software ini berfungsi sebagai teks editor dalam pembuatan script perancangan website.

Gambar 5.2 Sublime Text 2


(83)

XAMPP digunakan sebagai web server, PHP sebagai bahasa pemrograman dan MySQL sebagai databasenya.

Gambar 5.3 XAMPP Control Panel


(84)

d. Adobe Photoshop CS3 Extended

Adobe Photohsop digunakan sebagai desain gambar atau pun objek yang berjenis image yang dibutuhkan untuk kebutuhan website.

Gambar 5.5Adobe Photoshop CS3 Extended

5.2.3 Brainware

Brainware adalah setiap orang yang terlibat dalam kegiatan pemanfaatan komputer

atau sistem pengolahan. Brainware juga dapat diartikan sebagai perangkat intelektual yang mengoperasikan kemampuan dari hardware dan juga software komputer. Brainware yang dibutuhkan adalah administrator dan pengguna (user). Administrator dibutuhkan untuk bekerja pada server dalam pengolahan data

website dan mengeri tentang bahas pemrogramannya. Sedangkan pengguna (user)

tidak harus memiiki kemampuan khusus, hanya saja mampu menggunakan internet serta browsing.


(85)

5.3 Uji Program

Dari hasil uji program yang telah dilakukan, maka dapat dilihat tampilan hasil desain web dinamis pada website Inter Club Indonesia Kordinator Daerah Sumatera Utara, sebagai berikut :


(86)

Tampilan 5.7 Tampilan HalamanHome

Gambar 5.8 Tampilan Halaman News


(87)

Gambar 5.10 Tampilan Halaman ICIPROVSU


(88)

Gambar 5.12 Tampilan Halaman Store


(89)

Gambar 5.14 Tampilan Halaman Contact


(90)

(91)

BAB 6

KESIMPULAN DAN SARAN

6.1 Kesimpulan

Berdasarkan pembahasan pada bab-bab sebelumnya, maka pada bab ini yang merupakan bab terakhir dari tugas akhir , penulis akan mencoba menarik kesimpulan yakni sebagai berikut :

1. Aplikasi berbasis web dapat menjadi alternative pilihan sebagian besar masyarakat yang ingin mencari barang ataupun informasi yang sebelumnya menghabiskan waktu, tenaga, dan uang.

2. Setiap fans Internazionale di daerah manapun di Indonesia khususnya di Sumatera Utara, dengan adanya website ini semakin mempermudah dalam mendapatkan informasi, berbelanja merchandise, dan berdiskusi seputar Internazionale.

3. Dengan menggunakan internet, penyampaian informasi dapat lebih luas tersebar diberbagai wilayah dan lebih mudah untuk mengaksesnya.

4. Dengan menggunakan Bahasa pemrograman PHP dan MySQL sebagai sistem database-nya, dapat dibuat sebuah website yang sederhana dan sebagai media penyampaian informasi bagi Inter Club Indonesia Kordinator Daerah Sumatera Utara.

5. Penyajian informasi yang baik dapat dilakukan dengan meng-update isi dari situs tersebut secara berkala dan sesuai dengan perkembangan.


(92)

6. Dengan menggunakan internet, penyampaian informasi dapat lebih mudah tersebar dan mudah dalam aksesnya.

6.2 Saran

Dalam mengakhiri penulisan Tugas Akhir ini penulis menguraikan beberapasaran, antara lain :

1. Data pada situs website seharusnya selalu di-update oleh admin secara berkala sesuai dengan perkembangan yang terjadi sekarang ini, sehingga dapat memberikan informasi yang update dan teraktual kepada masyarakat. 2. Diharapkan komputer yang digunakan sebagai serverwebsite ini adalah

komputer yang mempunyai spesifikasi yang tinggi, sehingga mempermudah dalam pengaksesan data dan sumber daya komputer kita. 3. Hendaklah pembuatan berkas cadangan secara berkala untuk mencegah

kemungkinan kehilangan atau kerusakan data yang telah tersimpan.

4. Adanya pengembangan website agar sistem informasi ini mendapat cakupan yang lebih luas dan perkembangan yang lebih baik.

5. Sebaiknya dalam pembuatan website digunakan program anvirus ataupun security yang resistant untuk mencegah terjadinya kerusakan pada program ataupun data.


(93)

KARTU BIMBINGAN TUGAS AKHIR MAHASISWA

Nama Mahasiswa : Rahmad Riwanda Siregar Nomor Induk Mahasiswa : 112406248

Judul Tugas akhir : PERANCANGAN SISTEM INFORMASI

INTER CLUB INDONESIA KORDINATOR DAERAH PROVINSI SUMATERA UTARA BERBASIS WEB Dosen Pembimbing : Dr. Syahriol Sitorus, M.IT

Tanggal Mulai Bimbingan : 3 September 2015 Tanggal Selesai Bimbingan : 5 Oktober 2015

No Tanggal Asisten Bimbingan

Pembahasan Pada Asistensi Mengenai, pada Bab

Paraf Dosen

Pembimbing Keterangan

1 3 September 2015 Bab 1

2 3 September 2015 Bab 2

3 3 September 2015 Bab 3

4 5 Oktober 2015 Bab 4

5 5 Oktober 2015 Bab 5 dan Bab 6 6 5 Oktober 2015 Pengujian Program

∗ Kartu ini harap dikembalikan ke Departemen Matematika bila bimbingan telah selesai.

Diketahui Disetujui

Ketua Prodi D3 Teknik Informatika Pembimbing Utama

Dr. Elly Rosmaini, M.Si

NIP. 196005201985032002 NIP. 197103101997031004


(94)

Hasil Uji Program Tugas Akhir

SURAT KETERANGAN

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

Nama : Rahmad Riwanda Siregar

Nim : 112406248

Program Studi : D-3 Teknik Informatika

Judul TA : Perancangan Sistem InformasiInter Club Indonesia Kordinator Daerah Provinsi Sumatera Utara Berbasis Web Telah melaksanakan tugas test program Tugas Akhir Mahasiswa tersebut di atas pada tanggal 5 Oktober 2015.

Dengan Hasil : Sukses / Gagal

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

Medan, 5 Oktober 2015 Dosen Pembimbing

NIP. 197103101997031004 Dr.Syahriol Sitorus, M.IT


(95)

DAFTAR PUSTAKA

Agung, Gregorius, 2012, Buku Pintar HTML 5 + CSS3 + Dreamweaver CS6, PT Gramedia, Jakarta.

Ardana YM, Kusuma, 2012, Membuat Website 30 Juta Rupiah, Jasakom, Jakarta.

Destiyarto, Anggi, 2011, Cara Mudah Membuat Read More Artikel,

diakses pada 8 April 2015 ).

Keuntungan Punya Website

, diakses

tanggal 27 Oktober 2014).

Mardian, M., 2013, Pengertian Website dan Sejarah Website

Nugroho, Bunafit, 2008, Paduan Lengkap Menguasai Perintah SQL, mediakita, Jakarta.

Panduan Tatacara Penulisan Skripsi & Tugas Akhir.2008. Dokumen Nomor :

Akad/05/2005. Medan : Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera Utara.

P as u n d an , P r ab u , 2 0 1 2 , M em b ua t Fo r u m S e d e r h a n a (P HP + My s q l ), sederhana-phpmysql.html , diakses pada tanggal 11 April 2015).


(96)

Pino, 2013, Membuat Halaman Dinamis Dengan PHP, pada 26 Maret 2015).

Qineu Blankeship, Said, 2013, Membuat Web Jual Beli dengan PHP,

Sunardi, 2014, Aplikasi Artikel Disertai Foto Dengan PHP,

Win S, Jemmy, 2009, Membuat Forum Sederhana PHP MYSQL,


(97)

Listing Program

conn.php (Koneksi Database) <?

ini_set('display_errors',FALSE); $host = "localhost";

$user = "root"; $pass = "";

$db = "iciprovsu"; $entries=10;

$koneksi=mysql_connect($host,$user,$pass); $database=mysql_select_db($db,$koneksi); date_default_timezone_set("Asia/Jakarta"); $tanggal=date('D, d-M-Y H:i:s');

mysql_connect($host, $user, $pass); mysql_select_db($db)

or die ("Koneksi Gagal : ".mysql_error()); ?> index.php <?php include "head.php" ?> <?php session_start(); setcookie("counter","visitor",time()+3600); ?> <?php include "isi.php" ?> isi.php (Halaman) <? error_reporting(0); $page=$_GET['page']; switch($page) { case "0"; include "welcome.php"; break; case "1"; include "home.php"; break; case "2"; include "news.php"; break; case "3"; include "inter.php"; break;


(98)

case "4"; include "view_beritaici.php"; break; case "5"; include "view-berita-inter.php"; break; case "6"; include "jadwal_sebelumnya.php"; break; case "7"; include "iciprovsu.php"; break; case "8"; include "galeri.php"; break; case "9"; include "store.php"; break; case "10"; include "e-transaksi.php"; break; case "11"; include "e-pemesanan.php"; break; case "12"; include "e-rincian.php"; break; case "13"; include "e-konfirmasi.php"; break; case "14"; include "pembayaran.php"; break; case "15"; include "forum.php"; break; case "16"; include "forum-view.php"; break; case "17"; include "forum-new.php"; break; case "18"; include "forum-reply.php"; break;


(99)

case "19"; include "contact.php"; break; case "20"; include "edit_profil.php"; break; case "21"; include "edit_bio.php"; break; case "22"; include "edit_pass.php"; break; default; include "welcome.php"; break; } ?>

home.php (Halaman Home) <style> body{ margin: 0; overflow-x: hidden; } </style> <body>

<? include "header.php"; ?> <? include "home-slide.php"; ?> <? include "home-text.php"; ?> <? include "footer.php"; ?> <? include "navigasi.php";?> </body> header.php <style> body{ margin: 0; } .at{

background:#222 url(images/bg2.jpg) repeat top left; box-shadow: 0 0 5px 2px rgba(0,0,0,.35);

height: 130px; margin: 0 auto; } #menu{ padding:10px 15px; text-decoration: none; color: #fff; font-size: 35px; font-family: dusthome; letter-spacing: 3;


(100)

margin-left: 100px;

text-shadow: 1px 3px 1px #000; } #menu img{ margin-bottom: -6px; margin-top: 45px; } #menu:hover{ color: #ccc; -webkit-transition:all 1s; -moz-transition:all 1s; transition:all 1s; } #masuk{ float: right; width: 20%; height: 45%; margin-top: 40px; } #log, #sig{

border: 1px solid #fff; height: 40px; width: 80px; margin-left: 10px; background: none; color: #fff; font-family: dusthome; cursor: pointer; border-radius: 5px; } #log:hover, #sig:hover{ background: rgba(256,256,256,0.1); -webkit-transition:all 1s; -moz-transition:all 1s; transition:all 1s; } </style> <body> <div class="at">

<a id="menu" href="index.php?page=1">

<img src="images/logo.png" height="40">ICIPROVSU </a> <?php error_reporting(0); if ($_SESSION['user_name']) { include "member.php"; }else{ ?> <div id="masuk">

<input id="log" TYPE="button" VALUE="LOGIN" onClick="location.replace('login2.php');">

<input id="sig" TYPE="button" VALUE="SIGNUP" onClick="location.replace('signup.php');"> </div> <? } ?> </div>


(1)

margin-left: 20px; margin-top: 20px; cursor: pointer;

-webkit-animation: moveLeft 1s ease-in-out 0.2s backwards; -moz-animation: moveLeft 1s ease-in-out 0.2s backwards; -o-animation: moveLeft 1s ease-in-out 0.2s backwards; -ms-animation: moveLeft 1s ease-in-out 0.2s backwards; animation: moveLeft 1s ease-in-out 0.2s backwards; }

nav a.slide-1{ width: 50%;

padding-top: 20px; padding-bottom: 20px;

background-image: url(images/admin/10.jpg); margin-left: 165px;

-webkit-animation: moveLeft 1s ease-in-out 0.2s backwards; -moz-animation: moveLeft 1s ease-in-out 0.2s backwards; -o-animation: moveLeft 1s ease-in-out 0.2s backwards; -ms-animation: moveLeft 1s ease-in-out 0.2s backwards; animation: moveLeft 1s ease-in-out 0.2s backwards; }

nav a.slide-2{ width: 50%;

padding-top: 20px; padding-bottom: 20px;

background-image: url(images/admin/10-1.jpg); margin-right: 165px;

right: 180px; margin-top: 120px;

-webkit-animation: moveRight 1s ease-in-out 0.2s backwards; -moz-animation: moveRight 1s ease-in-out 0.2s backwards; -o-animation: moveRight 1s ease-in-out 0.2s backwards; -ms-animation: moveRight 1s ease-in-out 0.2s backwards; animation: moveRight 1s ease-in-out 0.2s backwards; }

</style>

edit-contact.php <?

session_start();

if ($_SESSION['user_name'] == "admin") {

include "../include/conn.php"; ?>

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

<link rel="stylesheet" type="text/css" href="css/isi-admin.css" />

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

href="../css/menu/page.css" /> <body>


(2)

<?include"menu-atas.php";?> <div class="menu">

<h2>CONTACT</h2>

<a href="index.php?page=23" class="cn-back">Back</a>

<div class="cn-content"> <?

$query = mysql_query("SELECT * FROM contact ");

while($show=mysql_fetch_array($query)):

?>

<table align="center" width="90%"> <tr>

<td id="judul" align="center">

<img class='pop' src='../images/icons/homebase.png' height='30' width="50"><br>

<font size="1" color="#ccc" face="Verdana">HOMEBASE</font>

</td>

<td id="judul" width="60%">

<font size="2" color="#fff" face="Verdana"><? echo $show['homebase'] ?></font>

</td>

<td id="judul" align="center" width="10%">

<a href="update-contact.php?action=homebase&alamat=<? echo $show['homebase'] ?>" style='text-decoration:none'>

<img src="../images/icons/edit-2.png" height="20" title="Update">

</a> </td> </tr> <tr>

<td id="judul" align="center">

<img class='pop' src='../images/icons/phone.png' height='30' width="50"><br>

<font size="1" color="#ccc" face="Verdana">PHONE</font>

</td>


(3)

<font size="2" color="#fff" face="Verdana"><? echo $show['phone'] ?></font>

</td>

<td id="judul" align="center" width="10%">

<a

href="update-contact.php?action=phone&phone=<? echo $show['phone'] ?>" style='text-decoration:none'>

<img src="../images/icons/edit-2.png" height="20" title="Update">

</a> </td> </tr> <tr>

<td id="judul" align="center">

<img class='pop' src='../images/icons/email.png' height='30' width="50"><br>

<font size="1" color="#ccc" face="Verdana">EMAIL</font>

</td>

<td id="judul"> <font size="2" color="#fff" face="Verdana"><? echo $show['email'] ?></font>

</td>

<td id="judul" align="center" width="10%">

<a

href="update-contact.php?action=email&email=<? echo $show['email'] ?>" style='text-decoration:none'>

<img src="../images/icons/edit-2.png" height="20" title="Update">

</a> </td> </tr> <tr>

<td id="judul" align="center">

<img class='pop' src='../images/icons/fb.png' height='30'

width="50"><br>

<font size="1" color="#ccc" face="Verdana">FACEBOOK</font>

</td>

<td id="judul"> <font

size="2" color="#fff" face="Verdana"><? echo $show['fb'] ?></font> </td>


(4)

<td id="judul" align="center" width="10%">

<a

href="update-contact.php?action=facebook&fb=<? echo $show['fb'] ?>" style='text-decoration:none'>

<img src="../images/icons/edit-2.png" height="20" title="Update">

</a> </td> </tr> <tr>

<td id="judul" align="center">

<img class='pop' src='../images/icons/twit.png' height='40' width="50"><br>

</td>

<td id="judul"> <font size="2" color="#fff" face="Verdana"><? echo $show['twitter'] ?></font>

</td>

<td id="judul" align="center" width="10%">

<a href="update-contact.php?action=twitter&twitter=<? echo $show['twitter'] ?>" style='text-decoration:none'>

<img src="../images/icons/edit-2.png" height="20" title="Update">

</a> </td> </tr> <tr>

<td id="judul" align="center">

<img class='pop' src='../images/icons/insta.png' height='30' width="50"><br>

<font size="1" color="#ccc" face="Verdana">INSTAGRAM</font>

</td>

<td id="judul"> <font size="2" color="#fff" face="Verdana"><? echo $show['insta'] ?></font>

</td>

<td id="judul" align="center" width="10%">

<a href="update-contact.php?action=instagram&instagram=<? echo $show['insta'] ?>" style='text-decoration:none'>

<img src="../images/icons/edit-2.png" height="20" title="Update">


(5)

</a> </td> </tr> <?

endwhile; ?>

</table> </div>

</div>

<?include"menu-bawah.php";?> <?

}else{

echo "<script> document.location.href='akses.php'; </script>";

} ?> <style> .cn-back{

outline: none;

text-indent: -9000px; width: 49px;

height: 42px;

background: transparent url(images/admin/arrow.png) no-repeat center center;

position: absolute; margin-left: 20px; margin-top: 20px; cursor: pointer;

-webkit-animation: moveLeft 1s ease-in-out 0.2s backwards; -moz-animation: moveLeft 1s ease-in-out 0.2s backwards; -o-animation: moveLeft 1s ease-in-out 0.2s backwards; -ms-animation: moveLeft 1s ease-in-out 0.2s backwards; animation: moveLeft 1s ease-in-out 0.2s backwards; }

.cn-content{

background: #80B8CE url(images/admin/10.jpg) no-repeat center center;

background-size:100% 100%;

box-shadow: 1px 1px 3px rgba(0,0,0,0.1); border: 8px solid #fff;

width: 80%; height: 65%; overflow-y: auto; display: inline-block; margin-top: -30px; margin-left: 100px; border-radius: 15px;

-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */

-moz-animation: fadein 2s; /* Firefox < 16 */ -ms-animation: fadein 2s; /* Internet Explorer */ -o-animation: fadein 2s; /* Opera < 12.1 */ animation: fadein 2s;


(6)

table{

margin: 10px auto; }