Sistem Informasi Sinergy Communication Berbasis Web

(1)

SISTEM INFORMASI SINERGY COMMUNICATION

BERBASIS WEB

TUGAS AKHIR

ALFIN HARIADI

062406155

PROGRAM STUDI D3 ILMU KOMPUTER

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SUMATERA UTARA

MEDAN

2008

(2)

SISTEM INFORMASI SINERGY COMMUNICATION

BERBASIS WEB

TUGAS AKHIR

Diajukan untuk melengkapi tugas dan memenuhi syarat menyelesaikan studi pada

program studi Diploma III Ilmu Komputer

ALFIN HARIADI

062406155

PROGRAM STUDI D3 ILMU KOMPUTER

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SUMATERA UTARA

MEDAN

2008

(3)

PERSETUJUAN

Judul

: SISTEM INFORMASI SINERGY COMMUNICATION

BERBASIS WEB

Kategori

: TUGAS AKHIR

Nama

: ALFIN HARIADI

Nomor Induk Mahasiswa

: 062406155

Program Studi

: D3 ILMU KOMPUTER

Departemen

: MATEMATIKA

Fakultas

: MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SUMATERA UTARA

Diluluskan di

Medan,

Diketahui/Disetujui oleh

Departemen Matematika FMIPA USU

Pembimbing,

Ketua,

Dr. Saib Suwilo, M.Sc

Drs. Agus Salim Harahap, M.Si

NIP : 131796149

NIP : 130936279

(4)

PERNYATAAN

SISTEM INFORMASI SINERGY COMMUNICATION

BERBASIS WEB

TUGAS AKHIR

Saya mengakui bahwa tugas akhir ini adalah hasil kerja saya sendiri, kecuali beberapa

kutipan dari ringkasan yang masing-masing disebutkan sumbernya.

Medan,

ALFIN HARIADI

062406155

(5)

PENGHARGAAN

Puji dan syukur saya panjatkan kehadirat ALLAH SWT atas segala rahmat dan

keberkahan yang telah dilimpahkan-Nya kepada saya sehingga dapat menyelesaikan

Laporan Tugas Akhir dengan baik.

Saya menyadari bahwa isi laporan Tugas Akhir ini masih terdapat kekurangan –

kekurangan dalam penyusunannya dan belum dapat memberikan informasi dengan

sebaik-baiknya.

Pada kesempatan ini saya ingin menyampaikan rasa terima kasih kepada semua

pihak yang telah membantu saya dalam menyelesaikan laporan Tugas Akhir ini, antara

lain:

1 Teristimewa buat kedua orang tua saya tercinta, terima kasih banyak atas

perhatiaan dan dukungannya serta doa-doanya selama ini.

2 Bapak Dr. Eddy Marlianto, M.Sc,selaku Dekan Fakultas Matematika dan Ilmu

Pengetahuan Alam.

3 Bapak Dr.Saib Suwilo,M.Sc,sebagai Ketua Jurusan Ilmu Komputer Fakultas

MIPA USU.

4 Bapak Drs.Agus Salim Harahap,M.Si selaku pembimbing Tugas Akhir saya.

5 Seluruh Dosen Pengajar Program Studi D-III Ilmu Komputer Fakultas MIPA

Universitas Sumatera Utara yang telah memberikan ilmu yang bermanfaat kepada

penulis selama masa perkuliahan.

6 Buat senior Bg Ivan Jaya yang telah memberikan masukan dalam menyelesaikan

tugas akhir ini.

7 Buat yang spesial Setia Dinda Sari, terima kasih banyak atas doa, semangat dan

motivasi yang telah diberikan selama kuliah.

8 Rekan–rekan seangkatan Penulis khususnya kepada Sari Ramayani, Sri Wahyuni,

Juliandri, Rizky Yudhistira, dan teman–teman seangkatan yang tidak bisa

disebutkan satu persatu. Terima kasih buat kalian semua yang telah mengisi dan

mewarnai kehidupanku.

(6)

Akhir kata saya mengucapkan terima kasih serta memohon maaf yang

sebesar-besarnya kepada semua pihak yang tidak dapat saya ucapkan satu persatu yang telah

membantu saya selama saya mengerjakan Tugas Akhir ini

(7)

ABSTRAK

Kajian ini bertujuan untuk membangun aplikasi web suatu lembaga komunikasi.

Aplikasi ini dikembangkan dengan menggunakan perangkat lunak Adobe Photoshop CS2,

Macromedia Dreamweaver 8, Macromedia Flash 8, Apache2triad 1.5.4 dan browser

Internet Explorer. Aplikasi web ini bekerja untuk dapat menyajikan informasi baik berita,

artikel dan mengenai struktur pada lembaga tersebut secara teraktual dan juga memberikan

user/pengguna untuk dapat mencari berita dan artikel yang diinginkan serta mengirimkan

artikel yang berkaitan dengan komunikasi. Tujuan aplikasi web ini adalah untuk

menyajikan dan menyebarkan informasi kepada user/pengguna dengan baik dan dapat

meng-update isi dari informasi yang terdapat pada web tersebut dengan mudah pada waktu

yang diinginkan.

(8)

DAFTAR ISI

Halaman

Persetujuan

ii

Pernyataan

iii

Penghargaan

iv

Abstrak

vi

Daftar Isi

vii

Daftar Tabel

ix

Daftar Gambar

x

Bab 1 Pendahuluan

1 1.1 Latar Belakang

1 1.2 Identifikasi Masalah

2 1.3 Maksud dan Tujuan Penulisan

3 1.4 Ruang Lingkup Masalah

4 1.5 Metode Penelitian

4 1.6 Sistematika Penulisan

5 Bab 2 Landasan Teori

7 2.1 Sejarah Singkat Internet

7 2.2 World Wide Web

8 2.2.1 Lahirnya Web

10 2.2.2 Browser Web

11 2.2.2.1 Cara Kerja Browser Mengambil Halaman / Page

12 2.2.2.2 Cara Kerja Browser Menampilkan Halaman / Page

12 2.2.3 Server Web

12 2.2.4 Istilah-Istilah Umum Yang Harus Diketahui

13 2.3. HTML (HyperText Markup Language)

14 2.3.1 Dokumen HTML

14 2.3.1.1 Penamaan Dokumen HTML

15 2.3.1.2 Elemen dan Tag HTML

15 2.4. DHTML

19 2.4.1 CSS (Cascading Style Sheets

20 2.4.2 Javascript

22 2.5 Pengenalan PHP (Hypertext Preprocessor)

23 2.5.1 Sejarah PHP

23 2.5.1.1 PHP/FI

24 2.5.1.2 PHP 3

25 2.5.1.3 PHP 4

25 2.5.1.4 PHP 5

26 2.5.2 Skrip PHP

26 2.5.3 Integrasi dengan Database

29 2.6 MySQL

32 2.7 Macromedia Dreamweaver

32 2.8 Macromedia Flash 8

33

(9)

4.1 Perencanaan dan Perancangan

34 4.2 Mempersiapkan Database Server

38 4.3 Membangun Halaman Situs

41 Bab 4 Implementasi Sistem

45 4.1 Pengertian Implementasi sistem

45 4.2 Tujuan Implementasi Sistem

45 4.3 Spesifikasi Sistem

46 4.4 Instalasi Apache, PHP dan MySQL

46 4.4.1 Instalasi Apache2triad 1.5.4

47 4.5 Pengujian di Browser

51 4.6 Mempromosikan Situs

53 Bab 5 Kesimpulan Dan Saran

55 5.1 Kesimpulan

55 5.2 Saran

56 Daftar Pustaka

57

(10)

DAFTAR TABEL

Halaman

Tabel 2.1 Daftar Database-Database Yang Didukung PHP

29 Tabel 3.1 Tabel Admin

38 Tabel 3.2 Tabel Pegawai

38 Tabel 3.3 Tabel Member

39 Tabel 3.4 Tabel Kontak

39 Tabel 3.5 Tabel Bonus

39 Tabel 3.6 Tabel Rekening

40 Tabel 3.7 Tabel Produk

40 Tabel 3.8 Tabel Provider

40 Tabel 3.9 Tabel Denom

41

(11)

DAFTAR GAMBAR

Halaman

Gambar 2.1 Dokumen HTML Ditampilkan di Browser IE

19 Gambar 2.2 Dokumen PHP Ditampilkan di Browser IE

28 Gambar 3.1 Flowchart Rancangan Aplikasi Web (Situs)

36 Gambar 3.2 Percabangan dalam Suatu Flowchart

37 Gambar 3.3 Tampilan Macromedia Dreamweaver 8

43 Gambar 4.1 Apache2triad 1.5.4-Installer

48 Gambar 4.2 Pilihan Installasi

48 Gambar 4.3 Installation Folder

49 Gambar 4.4 Input Password

49 Gambar 4.5 License Agreement

50 Gambar 4.6 Proses Penginstallasian

50 Gambar 4.7 Proses Konfigurasi

51 Gambar 4.8 Selesai

51 Gambar 4.9 Peletakan Folder Berisi File-File Web Dalam Folder htdocs

52 Gambar 4.10 Penulisan Alamat Di URL

52

(12)

BAB 1

PENDAHULUAN

1.1. Latar Belakang

Perkembangan aplikasi web yang semakin pesat sejak munculnya teknologi internet

sangat membantu dalam kemudahan serta kecepatan pengiriman, penyampaian dan

penerimaan informasi. Mulai dari perusahaan-perusahaan, sekolah-sekolah, perguruan

tinggi, dan lembaga atau organisasi lainnya telah banyak memanfaatkan aplikasi web

dalam kegiatan penjualan, promosi, belajar dan kegiatan lainnya dimana dibutuhkan

pengiriman, penyebaran dan penerimaan informasi sehingga memberikan kemudahan bagi

pengguna (user) yang membutuhkan.

Aplikasi web atau bisa disebut juga dengan perangkat lunak berbasis web telah

berkembang dengan pesat baik dari segi penggunaan, ukuran, bahasa yang digunakan dan

kompleksitasnya. Aplikasi web pada mulanya hanya berupa situs web yang bersifat statis

dan navigated oriented, serta lebih banyak digunakan sebagai brosur produk atau profil

perusahaan online. Pada saat ini aplikasi web telah banyak yang bersifat dinamis,

interaktif dan task oriented untuk digunakan dalam sistem informasi, telekomunikasi,

perdagangan, perbankan dan lain-lain.

PHP (Hypertext Preprocessor) merupakan bahasa server side script yaitu bahasa

berbentuk script yang terletak dan dieksekusi di server untuk kemudian hasilnya (berupa

(13)

kode HTML) dikembalikan ke browser pengguna/klien. PHP dirancang untuk membentuk

suatu web yang bersifat dinamis yang artinya halaman yang akan ditampilkan dibuat saat

halaman itu diminta oleh pengguna/klien. Misalnya dapat mengakses database dan

menampilkannya di halaman web dengan cepat dan mudah. PHP juga dapat berinteraksi

dengan hampir semua teknologi web yang telah ada dan sifatnya yang open source (bebas

pakai) memberikan kesempatan buat semua user dan programmer untuk menggunakan dan

mengembangkannya.

Dengan pertimbangan tersebut dan pribadi penulis yang ingin menerapkan

pengetahuan yang telah diperoleh maka penulis memutuskan untuk membuat suatu sistem

informasi dengan judul : “SISTEM INFORMASI SINERGY COMMUNICATION

BERBASIS WEB”.

1.2. Identifikasi Masalah

Dalam masalah penggunaan komputer masih sulit dilakukan karena harga kebutuhan yang

semakin meningkat menjadi hambatan bagi yang ingin menggunakannya, biaya yang

sedikit ingin kualitas yang baik tidak memungkinkan para karyawan memiliki harapan dan

kenyataan. Berdasarkan uraian di atas maka yang menjadi masalah adalah bagaimana

mendesain, membuat dan menghasilkan suatu desain sistem informasi untuk dapat

menyimpan, menampilkan dan mengedit data atau informasi yang akan disampaikan dan

dapat diterima oleh masyarakat luas sebagai suatu sistem informasi yang bermanfaat bagi

siapa saja yang membutuhkan informasi yang ada pada Sinergy Communication.

(14)

1. Bagaimana pemanfaatan aplikasi web dalam penyebaran informasi mengenai

Sinergy Communication.

2. Bagaimana informasi mengenai Sinergy Communication dan berita mengenai

komunikasi dapat disajikan dengan baik.

3. Bagaimana informasi pada aplikasi web dapat di-update(diperbaharui) dengan

mudah pada waktu yang diinginkan.

1.3. Maksud Dan Tujuan Penulisan

Maksud penulisan tugas akhir ini adalah untuk merancang suatu aplikasi web yang

dinamis yang dimanfaatkan untuk menyebarkan informasi yang baik dengan cepat dan

mudah.

Tujuan dari penulisan tugas akhir ini adalah untuk menunjukkan penggunaan dari

PHP dalam membangun suatu aplikasi web dinamis serta hubungannya dengan bahasa

pemrograman web dan aplikasi lainnya serta membantu kinerja dari Sinergy

Communication dalam menyebarkan dan menyediakan informasi bagi user/pengguna

yang membutuhkan.

(15)

Tugas akhir ini membahas pembuatan aplikasi web dinamis Sinergy Communication

sebagai suatu website yang memberikan informasi mengenai Sinergy Communication dan

segala hal yang berhubungan dengan komunikasi bagi user/pengguna baik dari kalangan

masyarakat umum maupun dari kalangan Sinergy Communication itu sendiri yang

membutuhkan informasi. Aplikasi web ini dibangun di bawah sistem operasi Windows XP

Professional yang mencakup aplikasi web server Apache2triad versi 1.5.4 yang terdiri

dari Apache 2.2.0, PHP 5.1.21 dan MySQL 5.0.18.

Aplikasi web ini juga didukung bahasa pemrograman web lainnya seperti HTML

(HyperText Markup Language), CSS (Cascading Style Sheets) dan JavaScript serta

menggunakan Macromedia Dreamweaver 8, Macromedia Flash 8 dan Adobe Photoshop

CS2.

1.5 Metode Penelitian

Adapun Metodologi penelitian yang digunakan penulis adalah :

a.

Penelitian Kepustakaan (Library Research)

Disini penulis menggunakan buku-buku yang berhubungan dengan masalah

sehingga dapat membantu penyelesaian masalah.

b.

Penelitian Lapangan (Field Research)

Penelitian dilakukan langsung ke Sinergy Communication untuk mendapatkan data

dimana penulis melakukan pengumpulan data dengan cara bertanya langsung

kepada karyawan yang terkait.

(16)

1.6 Sistematika Penulisan

Adapun sistematika penulisan laporan Tugas Akhir ini adalah sebagai berikut :

BAB 1

: Pendahuluan

Dalam bab ini penulis menguraikan Latar Belakang, Identifikasi Masalah, Maksud Dan

Tujuan Penulisan, Ruang Lingkup Masalah, Metode Penelitian dan Sistematika Penulisan.

BAB 2

: Landasan Teori

Dalam bab ini penulis menguraikan beberapa hal yang berhubungan dengan aplikasi web

dinamis yang ingin dibangun penulis yaitu sejarah singkat internet, World Wide Web,

HTML (HyperText Markup Language), DHTML (Dynamic HyperText Markup Language),

pengenalan PHP, MySQL, Macromedia Dreamweaver dan Macromedia Flash 8.

BAB 3

: Perancangan Sistem

Dalam bab ini penulis menguraikan tentang perancangan sistem yang dirancang yang

meliputi perancangan database server, gambaran aplikasi web yang akan dibuat serta

bagaimana algoritma aplikasi tersebut saat dijalankan.

(17)

Dalam bab ini penulis menyajikan tentang pengertian implementasi aplikasi, tujuan

implementasi aplikasi serta spesifikasi aplikasi.

BAB 5

: Kesimpulan dan Saran

Dalam bab ini penulis menguraikan tentang kesimpulan dan saran.

BAB 2

TINJAUAN TEORI

2.1 Sejarah Singkat 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 pengguna komputer lainnya.

(18)

ARPAnet (US Defense Advanced Research Projects Agency) atau Departemen

Pertahanan Amerika pada tahun 1969 membuat jaringan komputer yang tersebar untuk

menghindarkan terjadinya informasi terpusat, yang apabila terjadi perang dapat mudah

dihancurkan. Jadi bila satu bagian dari sambungan jaringan terganggu dari serangan

musuh, jalur yang melalui sambungan itu secara otomatis dipindahkan ke sambungan

lainnya.

Setelah angkatan bersenjata Amerika, dunia pendidikan pun merasa sangat perlu

mempelajari dan mengembangkan jaringan komputer. Salah satunya adalah Universitas of

California at Los Angeles (UCLA). Akhirnya pada tahun 1970 internet banyak digunakan

di universitas-universitas di Amerika dan berkembang pesat sampai saat ini. Agar para

pengguna komputer dengan merek dan tipe berlainan dapat saling berhubungan, maka para

ahli membuat sebuah protokol (semacam bahasa) yang sama untuk dipakai di internet.

Namanya TCP (Transmission Control Protocol, bahasa Indonesianya Protokol Pengendali

Transmisi) dan IP (Internet Protocol).

2.2 World Wide Web (WWW)

World Wide Web (WWW), lebih dikenal dengan web, merupakan salah satu layanan yang

didapat oleh pemakai komputer yang terhubung ke internet.

Web pada awalnya adalah ruang informasi dalam internet, dengan menggunakan

teknologi hypertext, pemakai dituntun untuk menemukan informasi dengan mengikuti link

yang disediakan dalam dokumen web yang ditampilkan dalam browser web.

(19)

Kini internet identik dengan web, karena kepopuleran web sebagai standar interface

pada layanan-layanan yang ada di internet, dari awalnya sebagai penyedia informasi, kini

digunakan juga untuk komunikasi dari email sampai dengan chatting, sampai dengan

melakukan transaksi bisnis (commerce).

Kini, web seakan lebih populer daripada email, walaupun secara statistik email masih

merupakan aplikasi terbanyak yang digunakan oleh pengguna internet. Web lebih populer

bagi khalayak umum dan pemula, terutama untuk tujuan pencarian informasi dan

melakukan komunikasi email yang menggunakan web sebagai interfacenya.

Internet identik dengan web, karena popularitasnya sebagai penyedia informasi dan

interface yang dibutuhkan oleh pengguna internet dari masalah informasi sampai dengan

komunikasi. Informasi produk dari yang serius sampai dengan yang sampah, dari yang

cuma-cuma sampai dengan yang komersial, semuanya ada.

Web memudahkan pengguna komputer untuk berinteraksi dengan pelaku internet

lainnya dan menelusuri (informasi) di internet.

Selain itu web telah diadopsi oleh perusahaan sebagai sebagian dari strategi teknologi

informasinya, karena beberapa alasan :

a.

Akses informasi mudah.

b.

Setup server lebih mudah.

(20)

d.

Bebas platform; informasi dapat disajikan oleh browser web pada sistem operasi

mana saja karena adanya standar dokumen berbagai tipe data dapat disajikan.

2.2.1 Lahirnya Web

Tahun 1989, Timothy Berners-Lee seorang ahli komputer dari Inggris dan peneliti lain di

European Particle Physics Lab (Consei European pour la Recherche Nucleaire, atau

CERN) di Geneva, Swiss, mengembangkan suatu cara untuk men-share data

antarkoleganya menggunakan sesuatu yang disebut dengan hypertext. Pemakai di CERN

dapat menampilkan dokumen pada layar komputer dengan menggunakan software browser

baru.

Kode-kode khusus disisipkan ke dalam dokumen elektronik ini, memungkinkan

pemakai untuk meloncat dari satu dokumen ke dokumen lainnya pada layar dengan hanya

memilih sebuah hyperlink.

Kemampuan intenet dimasukkan ke dalam browser ini sehingga lompat dari satu

dokumen ke dokumen lain, tidak lagi dari satu komputer saja, tetapi dapat melompat ke

dokumen lain yang letaknya pada komputer remote. Seorang peneliti dapat juga

mengirimkan sebuah file dari komputer remote ke sistem lokalnya, atau log in ke dalam

suatu sistem remote hanya dengan mengklik hyperlink, tidak perlu melalui mekanisme

FTP atau Telnet. Jalan pintas CERN digunakan sebagai dasar dari yang disebut sekarang

(21)

dengan Word Wide Web dan berikut server dan browser webnya (sekarang dimaintenance

oleh World Wide Web Consortium).

2.2.2 Browser Web

Browser web adalah software yang digunakan untuk menampilkan informasi dari server

web. Software ini kini telah dikembangkan dengan menggunakan user interface grafis,

sehingga pemakai dapat dengan mudah melakukan ‘point dan click’ untuk pindah

antardokumen.

Lynx adalah browser web yang masih menggunakan mode teks, yang akibatnya

adalah tidak ada gambar yang dapat ditampilkan. Lynx ini ada pada lingkungan DOS (Disk

Operating System) dan .nix (keluarga sistem operasi UNIX). Akan tetapi perkembangan*

dari browser mode teks ini tidaklah secepat browser web dengan GUI (Grafic User

Interface).

Di saat perkembangan WWW ada dua browser web yang populer yaitu Internet

Explorer (IE) dan Netscape Navigator. Namun saat ini bermunculan browser web lain

yang turut meramaikan persaingan untuk merebut para pengguna internet. Di antara

browser web yang telah banyak digunakan pada saat peluncurannya adalah MSN , Opera

dan Mozilla Firefox. Diantara browser web ini terdapat kelebihan dan kekurangan sehingga

pengguna dapat memilih sesuai keinginan dan kemudahan yang ditawarkan.

(22)

2.2.2.1 Cara Kerja Browser Mengambil Halaman / Page

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 :

2.2.2.2 Cara Kerja Browser Menampilkan Halaman / Page

Seluruh web page berisi instruksi-instruksi bagaimana untuk ditampilkan. Browser

menampilkan page dengan membaca instruksi-instruksi ini. Instruksi yang paling umum

untuk menampilkan disebut tag HTML. Tag HTML contohnya, yaitu <p> Ini merupakan

suatu paragraf </p>.

2.2.3 Server Web

Server web adalah komputer yang digunakan untuk menyimpan dokumen-dokumen web,

komputer ini akan melayani permintaan dokumen web dari kliennya.

Browser web seperti IE atau Opera berkomunikasi melalui jaringan (termasuk

jaringan internet) dengan server web, menggunakan HTTP. Browser akan mengirimkan

(23)

request kepada server untuk meminta dokumen tertentu atau layanan lain yang disediakan

oleh server. Server memberikan dokumen atau layanannya jika tersedia juga dengan

menggunakan protokol HTTP.

2.2.4 Istilah-Istilah Umum Yang Harus Diketahui

Berikut ini penjelasan beberapa istilah-istilah umum yang harus diketahui antara lain :

a.

Protokol; Secara definisi adalah standar pemrosesan informasi yang diterima

secara umum. Protokol TCP/IP merupakan protokol yang digunakan dalam

komunikasi dalam internet.

b.

URL (Universal Resource Locator); URL adalah konsep nama file standar yang

diperluas dengan jaringannya. Nama file ini tidak hanya menunjukkan direktori

dan nama filenya, tetapi juga nama mesinnya dalam jaringan. URL dapat

disediakan (ada atau diakses) dengan berbagai metoda, dan bisa jadi bukan

sekedar file, karena URL dapat menunjukkan query-query, dokumen yang

disimpan dalam database, hasil dari suatu perintah finger atau archie, atau apapun

yang berkaitan dengan data hasil proses.

c.

HTTP (HyperText Transfer Protocol); HTTP umumnya digunakan untuk melayani

dokumen hypertext, karena HTTP adalah protokol dengan overhead yang sangat

rendah, sehingga pada kenyataan navigasi informasi dapat ditambahkan langsung

ke dalam dokumen dengan demikian protokolnya sendiri tidak harus mendukung

navigasi secara penuh. Sebuah file dengan nama ”contoh.html” pada server

dalam direktori “/pub/files”

maka

URL-nya

(24)

adalah 80, jika suatu server HTTP berada pada port jaringan yang berbeda, misal

pada

port

1234 maka URL

menjadi

d.

Browsing / Surfing; kegiatan menelusuri dan mencari informasi dalam internet

melalui layanan informasi web.

e.

Browser / Surfer; pengguna komputer yang melakukan browsing / surfing.

2.3 HTML (HyperText Markup Language)

2.3.1 Dokumen HTML

Dokumen HTML adalah file teks murni yang dapat dibuat dengan editor teks sembarang.

Dokumen ini dikenal sebagai web page. Dokumen HTML merupakan dokumen yang

disajikan dalam browser web surfer. Dokumen ini umumnya berisi informasi atau interface

aplikasi di dalam internet.

Ada dua cara untuk membuat sebuah web page : dengan web editor (misalnya

Macromedia Dreamweaver atau Microsoft Frontpage) atau dengan editor teks biasa

(misalnya notepad atau editplus).

(25)

2.3.1.1 Penamaan Dokumen HTML

Penamaan dokumen HTML dapat dilakukan dengan memilih suatu nama, sembarang nama,

kemudian menambahkan sebuah ekstensi “.htm” atau “.html” (tanda kutip tidak perlu

dituliskan karena digunakan sebagai penjelas saja).

Ekstensi dokumen HTML yang menggunakan 3 karakter awalnya adalah untuk

mengakomodasikan sistem penamaannya yang ada dalam sistem operasi DOS. Nama

dokumen pada beberapa sistem operasi bersifat case sensitive (membedakan huruf besar

dengan huruf kecil). Nama dokumen yang sama tetapi dituliskan dengan case yang

berbeda akan dianggap sebagai dokumen yang berbeda, misalnya dokumen.html akan

berbeda dengan DOKUMEN.html. Kasus case sensitive akan dijumpai pada dokumen web

yang di-hosting di dalam server yang berbasis nix (keluarga sistem operasi UNIX).*

2.3.1.2 Elemen Dan Tag HTML

Dokumen HTML disusun oleh elemen-elemen. “Elemen” merupakan istilah bagi

komponen-komponen dasar pembentuk dokumen HTML. Untuk menandai berbagai

elemen dalam suatu dokumen HTML, digunakan tag. Tag HTML terdiri atas sebuah kurung

sudut kiri (<, tanda lebih kecil), sebuah nama tag, dan sebuah kurung sudut kanan (>, tanda

lebih besar). Tag umumnya berpasangan (misalnya <H1> dengan </H1>), tag yang

menjadi pasangan selalu diawali dengan karakter gais miring. Tag yang pertama

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

berarti akhir elemen.

(26)

Nama elemen ditunjukkan dengan nama tagnya. Suatu elemen di dalam dokumen

HTML harus ditandai dengan penulisan tagnya yang berpasangan. Ada beberapa elemen

yang tidak mengharuskan tagnya dituliskan secara berpasangan, elemen tersebut

diantaranya adalah :

a.

Paragraf dengan tag <p>.

b.

Ganti baris – line break dengan tag <br>.

c.

Garis datar – horizontal rule dengan tag <hr>.

d.

List item dengan tag <li>.

Secara umum suatu elemen dalam dokumen HTML yang dinyatakan dengan tagnya,

dituliskan : <namatag> _ </namatag>. Penulisan penamaan tag bebas, dapat

menggunakan huruf besar, huruf kecil, ataupun campuran (tidak case sensitive). Tetapi

untuk antisipasi pada standar penulisan tag, direkomendasikan untuk menuliskan tag

dengan menggunakan huruf kecil semuanya.

Tag mark up ini digunakan sebenarnya memberi tahu browser web bagaimana

memperlakukan atau menampilkan (memformat) halaman dokumen tersebut dalam

browser.

Dalam membuat suatu dokumen HTML dibutuhkan elemen yang dinyatakan dengan

tag <html>, <head> dan <body> berikut tag-tag pasangannya. Setiap dokumen terdiri

atas tag head dan body. Elemen head berisi informasi tentang dokumen tersebut, dan

(27)

elemen body berisi teks yang sebenarnya yang tersusun dari link, grafik, paragraf dan

elemen lainnya.

Secara umum dokumen dibagi menjadi dua section (bagian), yaitu section head dan

section body. Sehingga setiap dokumen HTML harus mempunyai pola dasar sebagai

berikut :

<html>

<head>

… informasi tentang dokumen HTML

</head>

<body>

… informasi yang ditampilkan dalam browser web

</body>

</html>

Setiap dokumen HTML harus diawali dengan menuliskan tag <html> dan tag

</html> di akhir dokumen. Tag ini menandai elemen HTML, yang berarti dokumen ini

adalah dokumen HTML.

Dalam satu dokumen hanya ada satu elemen HTML. Section atau elemen head

ditandai dengan tag <head> di awal, dan tag </head> di akhir. Section ini berisi informasi

tentang dokumen HTMLnya. Minimal informasi yang dituliskan dalam elemen ini adalah

judul dari dokumen, judul ini akan ditampilkan pada caption bar dari window browser,

ditandai dengan menggunakan tag <title> dan diakhiri dengan </title>.

(28)

Section atau elemen body ditandai dengan tag <body> di awal, dan tag </body> di

akhir. Section body merupakan elemen terbesar di dalam dokumen HTML. Elemen ini

berisi isi dokumen yang akan ditampilkan pada browser, meliput i paragraf, grafik, link,

tabel, dan sebagainya.

Contoh penulisan suatu dokumen HTML sebagai berikut :

<html>

<head>

<title> Halaman Contoh </title>

</head>

<body>

File ini merupakan file contoh. <br>

<b> Ini untuk membuat huruf cetak tebal </b>

</body>

</html>

(29)

Gbr 2.1 Dokumen HTML ditampilkan di browser IE

2.4 DHTML (Dinamic HyperText Markup Language)

DHTML adalah suatu istilah yang diberikan untuk suatu halaman web yang memanfaatkan

HTML dan DOM (Document Object Model), CSS (Cascading Style Sheet) dan client-side

scripting untuk membuat tampilan halaman tersebut dinamis atau interaktif. Istilah

Dynamic ditambahkan untuk membedakan sifat dinamis halaman web ini dengan halaman

web statis yang dibuat hanya berdasarkan HTML.

DHTML mulai diterapkan pada browser generasi ke empat – Microsoft Internet

Explorer 4 (IE4) dan Netscape Communicator 4 (NS4). DHTML sepenuhnya merupakan

teknologi client side yang hanya bergantung pada kemampuan browser untuk

(30)

menampilkan dan memanipulasi elemen halaman web yang tidak bisa dilakukan dengan

hanya mengandalkan HTML.

Sebagian besar hal yang bisa dibuat dengan DTML bisa juga dibuat dengan teknologi

authoring web lain seperti Java, Flash, atau Shockwave. Penggunaan DHTML mempunyai

kelebihan karena tidak memerlukan plugin apapun untuk menjalankannya dan ukurannya

jauh lebih kecil dibandingkan dengan penggunaan teknologi lain. Kelemahannya, masih

banyak hal-hal yang belum bisa dilakukan dengan menggunakan DHTML seperti suara dan

video. Saat ini sudah cukup banyak penerapan DHTML yang sering ditemukan sewaktu

mengakses internet sehari-hari. Yang umum misalnya rollover menu (baik berbentuk

image ataupun teks biasa), pulldown menu, trailing cursor, sliding text, dll.

2.4.1 CSS ( Cascading Style Sheet)

CSS mendefinisikan karakteristik tampilan (warna, style, dan posisi) suatu elemen pada

dokumen HTML dalam bentuk properti elemen tersebut. Pemisahan isi dengan tampilan

yang dilakukan dengan penerapan CSS ini, memberikan kemungkinan penyusunan struktur

suatu halaman HTML dengan lebih fleksibel. CSS merupakan bagian/subset dari DOM

yang sangat berperan dalam DHTML.

Perbedaan implementasi antara Netscape dan Microsoft sehingga akhirnya W3C

melakukan suatu standardisasi CSS. Pada awalnya, upaya standardisasi CSS dibagi dua,

yaitu CSS1 untuk pengaturan warna dan style, serta CSS-P untuk pengaturan posisi suatu

elemen. CSS2 dari W3C selanjutnya menggabungkan kedua standar ini menjadi suatu

standar yang meliputi semua setting tampilan suatu elemen halaman HTML.

(31)

Dalam spesifikasi CSS2, ada beberapa properti elemen dokumen yang berhubungan

dengan posisi suatu elemen di halaman browser. Properti tersebut adalah:

a.

position – ada dua pilihan untuk nilai properti ini, yaitu absolute dan relative.

Setting absolute mengatur posisi elemen berdasarkan jarak terhadap ujung

kiri-atas elemen parent-nya. Sedangkan setting absolute bekerja sesuai layout HTML

biasa dimana posisinya ditentukan berdasarkan akhir elemen sebelumnya.

b.

Left dan top – menentukan jarak ke arah kanan dan ke bawah dari posisi awal

elemen. Unitnya bisa dinyatakan dalam point(pt), pixel(px) atau unit standar CSS

lainnya.

c.

Width dan height – menentukan lebar dan tinggi elemen. Unitnya bisa dinyatakan

dalam point(pt), pixel(px) atau unit standar CSS lainnya.

d.

Z-index – menentukan apakah suatu elemen ditampilkan di layar. Nilainya bisa

visible (tampil) atau hidden (tersembunyi).

e.

Overflow – menentukan perilaku ruang penampung jika isinya melebihi batasnya.

Ada tiga pilihan untuk nilai properti ini, yaitu clip, scroll, dan none. Setting clip

berarti isi akan dipotong jika melebihi batas. Scroll akan memunculkan scrollbar

pada container. Sedangkan none tidak akan melakukan apapun terhadap isi

sehingga isi tersebut akan keluar dari ruang batasnya.

(32)

f.

Background-color atau layer-background-color – menentukan warna dasar dari

suatu elemen. Yang pertama berlaku untuk IE, sedangkan yang kedua berlaku

untuk NS.

g.

Background-image atau layer-background-image – menentukan gambar latar

belakang dari suatu elemen. Yang pertama berlaku untuk IE, sedangkan yang

kedua berlaku untuk NS.

2.4.2 JavaScript

JavaScript pertama kali nuncul di Netscape2.0 dan dikembangkan lebih lanjut pada

Netscape 3.0. Walaupun memiliki nama yang serupa. JavaScript sama sekali tidak

berhubungan dengan Java.

Java adalah bahasa pemrograman tingkat tinggi untuk membuat aplikasi

cross-platform, sedangkan JavaScript hanyalah scripting language yang terintegrasi dengan web

browser untuk memberikan fleksibilitas tambahan bagai 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 event 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, dll. Method

adalah fungsi-fungsi yang dapat diterapkan untuk suatu objek. Misalnya maximize untuk

(33)

window. Event handler menspesifikasikan bagaimana suatu objek merespon terhadap suatu

kejadian, misalnya suatu button di click, window di resize, dll.

2.5 Pengenalan PHP (HyperText Preprocessor)

2.5.1 Sejarah PHP

PHP merupakan salah satu bahasa pemrograman web yang masih muda namun telah

mengalami perkembangan yang cukup signifikan dan telah banyak digunakan oleh banyak

user dalam membuat aplikasi web baik perseorangan maupun perusahaan.

2.5.1.1 PHP/FI (Personal Home Page / Form Interpreter)

Pertama kali PHP dibuat dan diperkenalkan oleh Rasmus Lerdorf pada tahun 1995

menggunakan nama PHP/FI. Generasi awal PHP/FI dibuat dari Perl yang waktu itu

digunakan untuk kebutuhan pribadi saja. Pada awalnya, PHP/FI merupakan bagian dari

Personal Home Page Tools. Namun, karena kebutuhan penggunaan web yang semakin

kompleks maka dikembangkan PHP/FI dengan menggunakan bahasa C. Rasmus menulis

sejumlah besar fungsi untuk pengaksesan ke dalam database. Penulisan itu juga bertujuan

membangun halaman web menjadi dinamis.

PHP/FI merupakan akronim dari Personal Home Page/Forms Interpreter. Pada awal

penyusunan, PHP/FI hanya mempunyai fungsi dasar dari PHP yang ada sekarang ini. Jadi,

dengan kata lain, pondasi PHP sekarang ini adalah PHP/FI. Karena ketika pertama dibuat

(34)

menggunakan Perl maka PHP/FI juga mempunyai susunan dan karakter pemrogram yang

sama dengannya.

Pada tahun 1997, dikeluarkan PHP/FI versi 2.0. Fungsi-fungsi pada PHP/FI ditulis

dengan menggunakan bahasa C. Karena telah memiliki fungsi khusus untuk mengakses

database maka, pada tahun yang sama, terdapat kurang lebih 50.000 domain yang

menggunakan PHP/FI sebagai bahasa pemrograman untuk website, atau sekitar 1% dari

total domain yang ada pada waktu itu. Booming PHP/FI tersebut membuat semakin

banyak orang yang tertarik untuk berpartisipasi mengembangkan PHP/FI. Berkat

kerjasama dan konstribusi mereka, PHP versi 3.0 pun dikeluarkan walau kala itu masih

dalam tahap alpha.

2.5.1.2 PHP 3

PHP 3 merupakan generasi baru hasil pemgembangan PHP/FI. Banyak developer yang

terlibat di dalamnya. Tak heran jika PHP 3 dianggap sebagai tonggak awal bagi

terciptanya PHP versi sekarang ini. Secara resmi, peluncur PHP 3.0 ialah Andi Gutmans

dan Zeev Suraski pada tahun 1997. Mereka mengeluarkan PHP 3.0 karena melihat

kelemahan PHP/FI yang digunakan dalam aplikasi e-commerce. Kemudian, mereka

menulisnya ulang dengan masih mengacu kepada PHP/FI. Setelah PHP 3 dikeluarkan,

mereka menyarankan untuk menghentikan proyek PHP/FI karena PHP 3 masih lebih baik.

Alasan untuk mulai mengembangkan PHP, merupakan akronim dari Hypertext

Preprocessor, dan memfokuskan diri pada PHP 3.0 ialah pengembangan versi ini secara

meluas dalam mendukung berbagai jenis database, protokol dan API. Dengan dukungan

yang semakin besar dari berbagai pihak yang menyumbangkan berbagai modul maka, pada

(35)

tahun 1998, 10% dari seluruh webserver yang ada kala itu telah menginstalasi PHP versi

3.0. 2.5.1.3 PHP 4

PHP versi 4 diluncurkan untuk menangani kelemahan PHP 3, yaitu penggunaan fungsi

yang begitu kompleks. Kurangnya efisiensi waktu dan kinerja yang buruk diperbaiki dan

ditulis ulang dari inti PHP 3.

Dengan penambahan fitur baru, seperti session, output buffering dan penanganan

input, menjadikan PHP 4 aman dari berbagai jenis bahasa pemrograman berbasis web.

Selain itu, inti perbedaan mereka terletak pada penggunaan Zend Engine. Zend engine

merupakan inti dari PHP. Sebagai bagian dari inti PHP, secara fungsional ia bertugas

menangani

input, menterjemahkan dan mengeksekusinya. Ia juga berperan

menterjemahkan fungsi.

2.5.1.4 PHP 5

Pada Juni 2004, Zend merilis PHP 5.0. PHP versi 5 muncul untuk menangani

kelemahan-kelemahan yang terdapat pada versi sebelumnya. PHP versi 5 dapat membuat file swf dan

applet java. Fokus utamanya adalah mengoptimalkan penggunaan PHP untuk OOP

(Object Oriented Programming).

(36)

Skrip PHP berkedudukan sebagai tag dalam bahasa HTML. Suatu skrip akan dikenali

sebagai skrip PHP bila diapit oleh tanda :

a.

<?php . . . ?>

b.

<? . . . ?>

c.

<script language=”PHP”> . . . </script>

Skrip yang dibuat dengan PHP disimpan dengan nama file dan diikuti dengan ekstensi

*.php, misalnya : contoh.php. Bila skrip PHP diakses melalui komputer lokal maka file

PHP disimpan di folder htdocs di web server. Sama halnya dengan penamaan dokumen

HTML, pemberian nama dokumen yang sama tetapi dituliskan dengan case yang berbeda

akan dianggap sebagai dokumen yang berbeda, misalnya contoh.php akan berbeda dengan

CONTOH.php atau Contoh.php. Skip PHP dapat disisipkan di bagian manapun dalam

dokumen HTML, begitu pula sebaliknya skrip HTML dapat diletakkan di antara skrip PHP.

Berikut ini contoh dari skrip PHP:

a. contoh1.php

<html>

<head>

<title> Menyisipkan PHP di dokumen HTML </title>

</head>

<body>

Cara menyapa PHP dengan akrab: <br>

<p>

(37)

<?php

echo (“Hallo PHP, Apa khabar?”);

?>

</body>

</html>

b. contoh2.php

<?php

echo(“Ini ditulis dengan skrip PHP !!”);

?>

<html>

<body>

<br> <hr>

Ini ditulis dengan HTML

</body>

</html>

<?php

echo(“<br>sekian. “);

?>

(38)

Gambar 2.2 Dokumen PHP ditampilkan di browser IE

2.5.3 Integrasi dengan Database

PHP yang digabungkan dengan database akan lebih berkekuatan jika digabungkan dengan

database yang reliabel, 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 mempunyai fungsi khusus. Berikut ini

daftar database yang didukung oleh PHP sampai versi 5 :

Tabel 2.1 Daftar Database-Database Yang Didukung PHP

No.

Nama Database

No.

Nama Database

1.

2.

3.

4. Adabas D

DBase

Empress

FilePro (read-only)

12.

13.

14.

15. Direct MS-SQL

MySQL

ODBC

(39)

5.

6.

7.

8.

9.

10

11. Hyperwave

IBM DB2

Informix

Ingres

Interbase

FrontBase

MSQL

16.

17.

18.

19.

20.

21.

22. Ovrimos

PostgreSQL

SQLite

Solid

Sybase

Velocis

Unix dbm

PHP mempunyai fungsi khusus untuk mengakses MySQL. Ada sekitar 48 fungsi yang

didukung PHP dalam mengakses MySQL dalam membuat aplikasi. Adapun yang biasa

digunakan diantaranya adalah :

a.

mysql_connect()

Fungsi mysql_connect adalah untuk menghubungkan PHP dengan database

MySQL. Format fungsinya adalah:

mysql_connect (string hostname, string username, string password);

b.

mysql_select_db

Setelah terhubung ke database MySQL dengan menggunakan mysql_connect,

langkah selanjutnya adalah memilih database yang akan digunakan. Fungsi

mysql_select_db digunakan untuk memilih database. Format fungsinya adalah:

(40)

Koneksi ialah variabel yang terhubung ke MySQL. Jika tidak mengisi variabel

koneksi maka koneksi yang terbuka saat itulah yang dianggap digunakan. Manfaat

berbagai macam koneksi adalah bahwa dengan pilihan seperti itu maka dalam satu

file dimungkinkan mengambil query dari 2 database sekaligus.

c.

mysql_query

Dalam database MySQL, perintah untuk melakukan transaksi ialah perintah SQL.

Sebutan untuk mengirim perintah SQL dinamakan query. Query memberi perintah

kepada database untuk melakukan apa yang dikehendaki. Format fungsinya

adalah:

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

d.

mysql_num_rows

Kegunaan dari fungsi ini adalah untuk menghitung jumlah baris yang dikenai oleh

proses SQL. Format fungsinya adalah:

int mysql_num_rows(int result);

e.

mysql_fetch_array

Fungsi ini berkaitan dengan menampilkan data. Untuk menampilkan data,

digunakan fungsi mysql_fetch_array. Dengan fungsi ini, hasil query ditampung

dalam bentuk array. Format fungsinya adalah:

(41)

2.6 MySQL

MySQL merupakan salah satu perangkat lunak sistem pengelola basis data (Data Base

Management System). MySQL juga dapat dikategorikan sebagai Relational Data Base

Management System (RDBMS), karena dalam pembuatan basis data pada MySQL dapat

dipilah-pilah ke dalam berbagai tabel 2 (dua) dimensi. Setiap tabel pada MySQL terdiri atas

lajur horizontal dan lajur vertical.

MySQL, pada saat ini, banyak digunakan oleh pemrogram web untuk membangun

situs yang memerlukan basis data sebagai data dan pengolahan data.

2.7 Macromedia Dreamweaver

Dalam membuat suatu website diperlukan suatu editor. Salah satu editor yang sangat

sederhana adalah notepad. Dengan perkembangan perangkat lunak, suatu perusahaan yang

bernama Macromedia, Inc. membuat suatu editor berbasis GUI yang dikhususkan untuk

pembuatan website yang diberi nama Dreamweaver.

Dreamweaver merupakan editor HTML yang professional untuk mendesain, menulis

kode program, dan mengembangkan website, halaman web, dan aplikasi web. Dalam

(42)

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). Dreamweaver juga menyediakan alat-alat bantu untuk

mengembangkan kreativitas pembuatan web.

2.8 Macromedia Flash 8

Macromedia Flash 8 merupakan salah satu tool yang sangat bagus digunakan untuk

membuat animasi di halaman web. Kelebihan dari penggunaan Macromedia Flash adalah

gambarnya yang berbasis vektor yang apabila diperbesar tidak mengalami pemecahan

gambar.

Macromedia Flash menghasilkan animasi dengan format (.swf) yang mengompres*

ukuran filenya menjadi kecil tanpa mengurangi kualitas dari animasi tersebut. Flash juga

mempunyai kemampuan untuk mengimpor gambar, video dan suara yang membuat

animasi semakin hidup. Di samping itu, Flash juga dilengkapi dengan actionscript, sejenis

bahasa pemrograman yang membuat animasi dapat ditampilkan secara dinamis dan

interaktif.

(43)

BAB 3

PERANCANGAN SISTEM

3.1 Perencanaan dan Perancangan

Membuat suatu situs memerlukan persiapan, perencanaan yang baik, tujuan yang jelas dan

percobaan yang berulang-ulang karena menyangkut semua elemen yang membentuk situs.

Sebelum membangun situs, perlu dilakukan identifikasi awal antara lain:

a.

Situs apa yang ingin dibuat?

b.

Siapa saja pengunjung yang diharapkan berkunjung ke situs tersebut?

c.

Apa saja aktivitas yang dapat mereka lakukan dalam situs?

d.

Apa target yang ingin dicapai dari pembuatan situs tersebut?

Dengan menjawab pertanyaan-pertanyaan di atas, akan semakin memperjelas dan

mempermudah dalam membangun situs karena dari situlah nantinya akan terbentuk kata

kunci untuk membuat dan mengembangkan situs lebih lanjut.

Berkenaan dengan situs yang akan dibangun, maka jawaban untuk pertanyaan di

atas sebagai berikut:

(44)

a.

Situs yang akan dibuat adalah situs lembaga komunikasi, dalam hal ini adalah Sinergy

Communication, yang menyediakan informasi-informasi mengenai lembaga

komunikasi tersebut, berita dan yang berkenaan dengan komunikasi.

b.

Pengunjungnya adalah pegawai dan member Sinergy Communication, penulis

komunikasi dan masyarakat awam yang ingin mengetahui informasi seputar Sinergy

Communication.

c.

Aktivitas yang akan dijumpai di dalam situs tersebut adalah pengunjung dapat

mengetahui informasi mengenai Sinergy Communication, membaca atau berita seputar

masalah komunikasi, mencari berita mengenai komunikasi, menulis berita mengenai

komunikasi, mengisi buku tamu dan mengirimkan pesan singkat ke email Sinergy

Communication.

d.

Target yang akan dicapai dari situs tersebut adalah pengunjung mendapatkan informasi

tentang Sinergy Communication dan pengetahuan seputar masalah komunikasi.

Kemudian langkah selanjutnya adalah membuat outline atau garis besar dari situs

tersebut. Salah satu cara yang dapat digunakan adalah dengan membuat aliran informasi

atau flowchart (bagan alir) situs tersebut. Flowchart merupakan gambaran yang

menampilkan struktur, hierarki dan isi halaman per halaman, biasanya berbentuk pohon

yang bercabang-cabang.

(45)

Dengan adanya flowchart, akan sangat membantu untuk memvisualisasikan isi dari

setiap halaman dan link atau navigasi antara halaman-halaman tersebut. Di samping itu,

juga dapat mempermudah dalam mengatur kode dan file HTML-nya, terutama link untuk

navigasi penjelajahan ke seluruh halaman web. Secara sederhana flowchart dalam

membangun situs ini dapat dilihat pada gambar di bawah ini:

Gambar komunikasi 3.1 Flowchart rancangan aplikasi web (situs)

Pada gambar 3.1, flowchartnya masih sangatlah sederhana karena di setiap cabang

flowchart masih terdapat cabang-cabang lagi bergantung pada seberapa kompleks dan

seberapa banyak halaman yang akan dibuat. Misalnya pada bagian ’Login’ dibagi lagi ke

’Halaman Administrator’ dan ’Halaman Pegawai’, maka harus dibuat dua cabang lagi.

Lihat Gambar 3.2.

Login Index

Profil Kontak Format Produk Bonus Rekening

Login

(46)

Gambar 3.2 Percabangan Dalam Suatu Flowchart

Pada kasus pembuatan situs yang berskala besar, seperti situs berita atau portal

yang memuat sampai ribuan berita atau , maka tidak mungkin lagi untuk membuat situs

secara statiskarena flowchart-nya akan mempunyai cabang-cabang yang sangat banyak.

Dengan demikian, PHP membangun suatu situs menjadi dinamis, dimana pada suatu

halaman akan dipakai oleh ribuan yang ditampilkan sesuai dengan permintaan user.

3.2 Mempersiapkan Database Server

Pada tahap ini dipersiapkan tempat untuk menampung data di server, data tersebut

nantinya akan diproses oleh program yang kita buat pada tahap pemrograman, baik

penambahan, pengeditan, panghapusan dan menampilkan isi database ke halaman web.

Database terdiri atas tabel-tabel yang dibuat dengan menggunakan program MySQL.

Adapun database yang dibuat oleh penulis adalah database scom dengan

tabel-tabel sebagai berikut:

(47)

a.

Tabel admin terdiri dari :

Field

Jenis

Name

Varchar(20)

Pass

Varchar(20)

Tabel 3.1 Tabel Admin

b.

Tabel pegawai terdiri dari :

Field

Jenis

Id_key

int(3)

Name

char(20)

Pass

char(50)

3.2 Tabel Pegawai

c.

Tabel member terdiri dari :

Field

Jenis

Id_key

varchar(30)

Id_member varchar(30)

name

Text

3.3 Tabel Member

d.

Tabel kontak terdiri dari :

Field

Jenis

Id

int(3)

Nama

Varchar(30)

No_hp

Varchar(12)

Email

Varchar(30)

Pesan

Longtext

(48)

Waktu

Varchar(30)

3.4 Tabel Kontak

e.

Tabel bonus terdiri dari :

Field

Jenis

Id_bonus

int(5)

Id_key

Varchar(12)

Bulan

Varchar(20)

Jumlah

Varchar(10)

3.5 Tabel Bonus

f.

Tabel rekening terdiri dari :

Field

Jenis

Id_bank

int(2)

Nama

Varchar(20)

Nomor

Varchar(20)

Bank

Varchar(40)

3.6 Tabel Rekening

g.

Tabel produk terdiri dari :

Field

Jenis

Id_produk

int(3)

Kode_produk Varchar(7)

Nama

Varchar(15)

Id_provider

Varchar(3)

Id_denom

Varchar(2)

(49)

Harga

Varchar(15)

Id_type

Varchar(2)

3.7 Tabel Produk

h.

Tabel provider

Field

Jenis

Id_provider

int(3)

Nama_provider Varchar(20)

3.8 Tabel Provider

i.

Tabel denom

Field

Jenis

Id_denom

int(2)

Nama_denom Varchar(10)

3.9 Tabel Denom

j.

Tabel type

Field

Jenis

Id_type

int(2)

Nama_type Varchar(10)

(50)

3.3 Membangun Halaman Situs

Adapun halaman-halaman yang dibangun oleh penulis adalah:

a.

Halaman index.php, merupakan halaman utama yang akan diakses pertama kali situs

dibuka. Halaman ini berisikan informasi dan promosi secara singkat dan link-link

menuju halaman berikutnya.

b.

Halaman profil.php, merupakan halaman yang memberikan informasi tentang sejarah,

visi dan misi, kata sambutan dan struktur organisasi dari Sinergy Communication.

c.

Halaman format.php, merupakan halaman yang memberikan informasi tentang

transaksi yang terdapat di Sinergy Communication.

d.

Halaman produk.php, merupakan halaman yang memberikan informasi produk yang

tersedia di Sinergy Communication.

e.

Halaman rekening.php, merupakan halaman yang memberikan informasi mengenai

daftar rekening untuk penambahan saldo via bank.

f.

Halaman kontak.php, merupakan halaman yang mengizinkan pengunjung untuk

mengisikan pesan sehingga diketahui siapa saja yang mengunjungi situs.

g.

Halaman bonus.php, merupakan halaman yang memberikan informsi tentang peride

bonus yang diperoleh reseller yang memiliki downline di Sinergy Communication.

(51)

h.

Halaman index.php (administrator), merupakan halaman yang khusus diakses oleh

admin untuk melakukan pengaturan seperti membuat, menghapus atau mengubah data

yang ada.

i.

Halaman index.php (pegawai), merupakan halaman yang khusus diakses pegawai yang

terdaftar untuk membalas pesan yang masuk dari member ataupun masyarakat umum

lainnya dan mengubah data account dan mengganti password.

Tahap-tahap yang dilakukan penulis dalam membangun halaman situs adalah

sebagai berikut:

1. Membuka software Macromedia Dreamweaver 8 sebagai software pengatur letak

layout dan penulisan skrip-skrip PHP dalam membangun halaman. Tampilannya dapat

dilihat seperti gambar berikut ini:

(52)

Gambar 3.3 Tampilan Macromedia Dreamweaver 8

2. Mengatur letak layout dengan memanfaatkan tool dan perintah yang terdapat pada

Macromedia Dreamweaver yaitu dengan meletakkan link-link, grafik, animasi, isi

berita dan modul-modul lainnya di tempat yang telah ditentukan.

3. Menulis dan meletakkan skrip-skrip PHP dan HTML yang diperlukan pada tempat

yang sesuai yang dikerjakan di jendela Code pada Macromedia Dreamweaver.

4. Menulis skrip CSS untuk memperindah tampilan situs dan skrip javascript untuk

melakukan peringatan (alert) pada pengisian form.

(53)

BAB 4

IMPLEMENTASI SISTEM

4.1 Pengertian Implementasi Sistem

Implementasi sistem adalah langkah-langkah atau prosedur-prosedur yang dilakukan dalam

menyelesaikan desain sistem yang telah disetujui, untuk menginstal, menguji dan memulai

sistem baru atau sistem yang diperbaiki.

4.2 Tujuan Implementasi Sistem

Adapun tujuan dari implementasi sistem ini adalah sebagai berikut:

1. Menyelesaikan desain sistem yang telah disetujui sebelumnya.

2. Memastikan bahwa pemakai (user) dapat mengoperasikan sistem baru

3. Menguji apakah sistem baru tersebut sesuai dengan pemkai.

4. Memastikan bahwa konversi ke sistem baru berjalan yaitu dengan membuat rencana,

mengontrol dan melakukan instalasi baru secara benar.

(54)

Spesifikasi sistem untuk yang dianjurkan penulis untuk membuat dan menjalankan aplikasi

web ini di komputer lokal adalah sebagai berikut:

1. Komputer dengan processor Intel Pentium 4 1800 MHz (1,8 GHz) atau setara.

2. Memori RAM 256 MB atau lebih.

3. Kapasitas Hardisk minimal 10 GB.

4. Microsoft Windows 2000 service pack 4 atau XP Home.

5. Microsoft Windows XP Professional (lebih disarankan).

4.4 Instalasi Apache, PHP dan MySQL

Dalam menginstalasi Apache, PHP dan MySQL dilakukan secara satu per satu. Adapun

softwarenya dapat diperoleh dari situs

instalasinya dimulai dengan menginstalasi Apache, kemudian disusul dengan menginstalasi

PHP dan MySQL. Setelah instalasi selesai dilanjutkan dengan melakukan pengaturan

konfigurasi yang diberikan setelah instalasi selesai. Namun hal ini memerlukan pengaturan

yang sedikit rumit.

Alternatif lain yang digunakan penulis adalah dengan menginstalasi Apache2triad.

Perangkat lunak Apache2triad dengan versi 1.5.4 ini penulis download di situs

4.4.1 Instalasi Apache2triad 1.5.4

(55)

a.

Apache 2.2.0

b.

MySQL 5.0.18

c.

PHP 5.1.2 + PEAR 1.3.4

d.

mod_Perl 2.0.3

e.

MiniPerl 5.8.7

f.

MySQL Administrator 1.1.8

g.

PHPMyAdmin 2.7.0-pl2

h.

SlimFTPd 3.18

i.

Smarty 2.6.3

j.

Zend Optimizer 2.6.2

Dengan menginstalasi Apache2triad secara otomatis ketiga software utama yang

akan digunakan yaitu Apache, PHP dan MySQL telah dapat digunakan tanpa perlu

konfigurasi yang rumit.

Adapun tahap-tahap instalasinya adalah sebagai berikut:

(56)

Gambar 4.1 Apache2triad 1.5.4-Installer

2. Pilih tombol next untuk melanjutkan pengintalasian

Gambar 4.2 Pilihan Installasi

3. Klik tombol next.

(57)

Gambar 4.3 Installation Folder

4. Klik tombol next apabila anda tidak ingin menggunakan password.

Gambar 4.4 Input Password

5. Pada kotak dialog license agreement, pilih tombol ’I Agree’.

(58)

Gambar 4.5 License Agreement

6. Tunggu proses instalasi sampai selesai. Proses ini memerlukan waktu yang cukup

lama.

Gambar 4.6 Proses Penginstallasian

(59)

Gambar 4.7 Proses Konfigurasi

8. Pilih tombol ’OK’ untuk merestart komputer. Setelah proses restart selesai,

apache2triad 1.5.4 dapat digunakan.

Gambar 4.8 Selesai

4.5 Pengujian di Browser

Setelah menginstalasi apache2triad, maka aplikasi web telah dapat diujikan di komputer

lokal. Adapun caranya adalah sebagai berikut:

1. Letakkan file-file yang membangun web tadi ke dalam suatu folder kemudian

diletakkan di dalam folder htdocs, terlihat seperti gambar berikut:

(60)

Gambar 4.9 Peletakan Folder Berisi File-File Web Dalam Folder htdocs

2. Buka browser Internet Explorer.

3. Pada kotak URL ketikkan

meletakkan file-file web di folder sinergy maka alamatnya sebagai berikut:

Gambar 4.10 Penulisan Alamat Di URL

(61)

Gambar 4.11 Hasil Pengujian Aplikasi Web Di Browser

4.6 Mempromosikan Situs

Salah satu cara agar situs dapat terlihat saat orang lain melakukan pencarian adalah dengan

mempromosikan situs. Salah satu usaha yang dapat dilakukan adalah dengan mendaftarkan

alamat situs ke mesin pencari/search engine. Dengan demikian, akan membuka

kemungkinan lebih besar bahwa situs yang dibuat akan diakses oleh orang lain. Lain

search engine, maka lain pula aturan atau cara pendaftarannya. Berikut cara mendaftarkan

alamat situs di Google:

1. Ketikkan alamat situs

(62)

3. Tunggu kira-kira sebulan, kemudian coba ketikkan kata kunci situs yang telah dibuat di

search engine Google. Jika beruntung, situs tersebut akan tampil di salah satu daftar

pencarian. Selain memerlukan waktu yang lama untuk validasinya, juga didukung

faktor keberuntungan apakah situs tersebut diperbolehkan terdaftar di search engine

tersebut.

Salah satu alternatif lain adalah dengan menggunakan software sejenis URL Submitter

dan Indo URL Submitter yang mempunyai kemampuan untuk mendaftarkan situs ke

ribuan search engine secara otomatis. Software tersebut dapat di-download dari situs

(63)

BAB 5

KESIMPULAN DAN SARAN

5.1 Kesimpulan

1. Pembuatan suatu aplikasi web dapat dilakukan di komputer lokal tanpa terkoneksi ke

internet. Koneksi internet diperlukan ketika proses upload file dan pengaksesan situs.

2. Untuk mempercepat loading ketika mengakses situs di internet, dapat dilakukan teknik

slicing (pemotongan) pada grafis web dan optimasi gambar yaitu dengan mengurangi

warna dari grafis web.

3. Untuk menarik minat pengunjung, perlu dibuat rancangan layout/template dengan

gambar dan animasi yang menarik.

4. Penyajian informasi yang baik dapat dilakukan dengan meng-update isi dari situs

tersebut secara berkala.

5. Promosi web dapat dilakukan dengan mendaftarkan alamat situs ke search enginge dan

menggunakan software pendaftar alamat situs otomatis.

(64)

1. Isi situs web seharusnya di-update oleh admin secara berkala guna memberikan

informasi yang teraktual.

2. Komputer yang digunakan dalam membuat suatu aplikasi web sebaiknya memiliki

spesifikasi dengan level menengah karena penggunaan software-software yang banyak

memakan sumber daya komputer seperti memori dan kapasitas hardisk.

3. Dalam membuat suatu situs, perlu diberikan fasilitas download file kepada pengunjung

sehingga dapat menambah pengetahuan pengunjung dengan membaca artikel atau

berita yang di-download.

(65)

DAFTAR PUSTAKA

Bambang, P, Mahardika,I, dan Djalle, Z. G. 2004. Flash MX: 3 in 1. Bandung: Informatika

Bandung.

Hakim, L, dan Musalini, U. 2004. Cara Mudah Memadukan Web Design dan Web

Programming. Jakarta: PT Elex Media Komputindo.

Syafii, M. 2005. Panduan Membuat Aplikasi Database dengan PHP5 MySQL PostgreSQL

Oracle. Yogyakarta: Andi.

(66)

(67)

LAMPIRAN A: TAMPILAN HALAMAN WEBSITE

(68)

(69)

(70)

(71)

(72)

(73)

(74)

(75)

(76)

LAMPIRAN B: LISTING PROGRAM HALAMAN WEBSITE

B.1 Halaman index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Sinergy Communication | Home</title>

var time = 3000; var numofitems = 7;

//menu constructor

function menu(allitems,thisitem,startstate){ callname= "gl"+thisitem;

divname="subglobal"+thisitem; this.numberofmenuitems = allitems;

this.caller = document.getElementById(callname); this.thediv = document.getElementById(divname); this.thediv.style.visibility = startstate; }

//menu methods

function ehandler(event,theobj){

for (var i=1; i<= theobj.numberofmenuitems; i++){ var shutdiv =eval( "menuitem"+i+".thediv"); shutdiv.style.visibility="hidden";

}

theobj.thediv.style.visibility="visible"; }

function closesubnav(event){

if ((event.clientY <48)||(event.clientY > 107)){ for (var i=1; i<= numofitems; i++){

var shutdiv =eval('menuitem'+i+'.thediv'); shutdiv.style.visibility='hidden'; } } } // --> </script> <style type="text/css"> <!--

.style2 {color: #000000} .style3 {

font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold;

color: #21536A; }

(1)

#utility a{

color: #ffffff; }

#utility a:hover{

text-decoration: underline; }

/************** pageName styles ****************/

#pageName{

padding: 0px 0px 14px 10px; margin: 0px;

border-bottom:1px solid #ccd2d2; }

#pageName h2{

font: bold 175% Arial,sans-serif; color: #000000;

margin:0px; padding: 0px; }

#pageName img{

position: absolute; top: 0px;

right: 6px; padding: 0px; margin: 0px; }

#kontak { overflow:auto; height:250px; border:solid 1px; border-color:#cccccc; }

/************* globalNav styles ****************/

#globalNav{

position: relative; width: 100%;

min-width: 640px; height: 32px; color: #cccccc; padding: 0px; margin: 0px;

background-image: url(glbnav_background.gif); }

#globalNav img{

margin-bottom: -4px;

}

#gnl {

(2)

top: 0px; left:0px; }

#gnr {

position: absolute; top: 0px;

right:0px; }

#globalLink{

position: absolute; top: 6px;

height: 22px; min-width: 640px; padding: 0px; margin: 0px; left: 10px; z-index: 100; }

a.glink, a.glink:visited{

font-size: small;

color: #21536A;

font-weight: bold; margin: 0px;

padding: 2px 5px 4px 5px;

border-right: 1px solid #8FB8BC; }

a.glink:hover{

background-image: url(glblnav_selected.gif);

text-decoration: none; }

.skipLinks {display: none;}

/************ subglobalNav styles **************/

.subglobalNav{

position: absolute; top: 84px;

left: 0px;

/*width: 100%;*/ min-width: 640px; height: 20px;

padding: 0px 0px 0px 10px; visibility: hidden;

color: #ffffff; }

.subglobalNav a:link, .subglobalNav a:visited { font-size: 80%;

color: #ffffff; }

.subglobalNav a:hover{ color: #cccccc;

(3)

}

/*************** search styles *****************/

#search{

position: absolute; top: 5px;

right: 10px; z-index: 101; }

#search input{ font-size: 70%;

margin: 0px 0px 0px 10px; }

#search a:link, #search a:visited { font-size: 80%;

font-weight: bold;

}

#search a:hover{ margin: 0px; }

/************* breadCrumb styles ***************/

#breadCrumb{

padding: 5px 0px 5px 10px; font: small Verdana,sans-serif; color: #AAAAAA;

}

#breadCrumb a{

color: #AAAAAA; }

#breadCrumb a:hover{ color: #005FA9;

text-decoration: underline; }

/************** feature styles *****************/

.feature{

padding: 0px 0px 10px 10px; font-size: 80%;

min-height: 200px; height: 200px; }

html>body .feature {height: auto;}

.feature h3{

font: bold 175% Arial,sans-serif; color: #21536A;

(4)

}

.feature img{ float: left;

padding: 0px 10px 0px 0px; }

/*************** story styles ******************/

.story {

padding: 10px 0px 0px 10px; font-size: 80%;

}

.story h3{

font: bold 125% Arial,sans-serif; color: #000000;

}

.story p {

padding: 0px 0px 10px 0px; }

.story a.capsule{

font: bold 1em Arial,sans-serif; color: #005FA9;

display:block;

padding-bottom: 5px; }

.story a.capsule:hover{

text-decoration: underline; }

td.storyLeft{

padding-right: 12px; }

/************** siteInfo styles ****************/

#siteInfo{

clear: both;

border-top: 1px solid #cccccc; font-size: small;

color: #cccccc;

padding: 10px 10px 10px 10px; margin-top: 0px;

}

#siteInfo img{

padding: 4px 4px 4px 0px; vertical-align: middle; }

(5)

#sectionLinks{ margin: 0px; padding: 0px;

}

#sectionLinks h3{

padding: 10px 0px 2px 10px;

border-bottom: 1px solid #cccccc; }

#sectionLinks a:link, #sectionLinks a:visited { display: block;

border-top: 1px solid #ffffff; border-bottom: 1px solid #cccccc; background-image: url(bg_nav.jpg); font-weight: bold;

padding: 3px 0px 3px 10px; color: #21536A;

}

#sectionLinks a:hover{

border-top: 1px solid #cccccc; background-color: #ff99ff; background-image: none; font-weight: bold; text-decoration: none; }

/************* relatedLinks styles **************/

.relatedLinks{ margin: 0px;

padding: 0px 0px 10px 10px;

border-bottom: 1px solid #cccccc; }

.relatedLinks h3{

padding: 10px 0px 2px 0px; }

.relatedLinks a{

display: block; }

/**************** advert styles *****************/

#advert{

padding: 0px; }

#advert img{

display: block; }

(6)