PEMBUATAN SITUS WEB UNTUK ORGANISASI
DENGAN STUDI KASUS PADA ORGANISASI
MEDIA FOR ECO-TECHNOLOGY
SKRIPSI
Diajukan untuk Memenuhi Salah Satu Syarat
Memperoleh Gelar Sarjana Teknik
Program Studi Teknik Informatika
Oleh:
Nama : Albertus Febi Adityo Putro
NIM : 025314046
PROGRAM STUDI TEKNIK INFORMATIKA
JURUSAN TEKNIK INFORMATIKA
FAKULTAS SAINS DAN TEKNOLOGI
UNIVERSITAS SANATA DHARMA
BUILDING AN ORGANIZATION WEB SITE
WITH A CASE STUDY AT
MEDIA FOR ECO-TECHNOLOGY
A Thesis
Presented as Partial Fulfillment of the Requirements
To Obtain the Sarjana Teknik Degree
In Informatics Engineering
By:
Name : Albertus Febi Adityo Putro
NIM : 025314046
INFORMATICS ENGINEERING STUDY PROGRAM
DEPARTMENT OF INFORMATICS ENGINEERING
FACULTY OF SAINS AND TECHNOLOGY
SANATA DHARMA UNIVERSITY
HALAMAN MOTTO
I w ant …
T o serve everyone w ho n eeds, w ith m y talent
T o forgive peop le w ho w rong m e
T o love people w ithout any condition at all
T o strength their w ho need encouragem ent
T o love their w ho need love
T o give all m y best
T o care for those w ho doesn’t
H A L A M A N P E R S E M B A H A N
H A L A M A N P E R S E M B A H A N
H A L A M A N P E R S E M B A H A N
H A L A M A N P E R S E M B A H A N
K upersem bahkan skripsi ini untuk
K upersem bahkan skripsi ini untuk
K upersem bahkan skripsi ini untuk
K upersem bahkan skripsi ini untuk
:
Y esus K ristus p em bim bing, p elind u ng, d an juru sela m atk u.
B ap ak d an Ibu k u tercinta atas sem angat, d oa d an d u k unga n
secara m oril d an m ateril.
A d ik k u tercinta L eon ard o D id it S.P
INTISARI
Situs web organisasi
Media for Eco-Technology
(MeET) ini merupakan
sarana bagi MeET, untuk menginformasikan MeET sebagai suatu organisasi
dengan semagat orang muda yang bergerak di bidang teknologi tepat guna yang
ramah lingkungan. Selain itu tujuan dari pembuatan situs web ini adalah untuk
membantu menginformasikan teknologi-teknologi tepat guna yang murah dan
ramah lingkungan kepada masyarakat luas dengan harapan dapat dibuat dan
dikembangkan oleh masyarakat. Situs web MeET ini dilengkapi dengan pencarian
dimana setiap pengunjung dapat melakukan pencarian berdasarkan kategori yang
diinginkan dan forum diskusi dimana setiap pengunjung dapat saling mengisikan
komentar dan tanya jawab
.
Metode pengembangan sistem yang digunakan untuk melakukan
pengembangan
situs
Media for Eco-Technology
ini adalah metode terstruktur
yaitu pengembangan sistem berdasarkan pada urutan proses yang terdapat dalam
DFD .Situs ini akan menampilkan informasi berita-berita terbaru mengenai suatu
teknologi yang sedang diteliti oleh MeET. Layanan pemasukkan data diskusi dari
pengunjung dilakukan melalui situs web dengan cara mengisikan form tambah
topik yang terdapat pada halaman situs
.
Sedangkan bagi pengunjung yang sedang
melihat-lihat berita, situs ini menawarkan fasilitas pencarian berdasar ketegori
sesuai dengan keinginannya.
Kelebihan dari situs MeET ini adalah tampilan yang mudah dimengerti,
menyediakan informasi teknologi tepat guna dengan cukup lengkap, dan juga
memiliki fasilitas pencarian. Sedangkan situs ini juga masih terdapat kekurangan
yaitu tampilan yang masih sederhana, kurang dalam mengatasi
error handling,
KATA PENGANTAR
Puji serta syukur saya panjatkan kepadaYesus Kristus, karena atas berkat
dan rahmat-Nya saya dapat menyelesaikan tugas akhir ini dengan baik dan lancar.
Dalam proses penulisan tugas akhir ini saya menyadari bahwa ada begitu
banyak pihak yang telah memberikan perhatian dan bantuan dengan caranya
masing-masing sehingga tugas akhir ini dapat selesai tepat waktu dan lancar. Oleh
karena itu saya ingin mengucapkan terima kasih antara lain kepada :
1.
Ibu Agnes Maria Polina, S.Kom., M.Sc., selaku Ketua Jurusan Teknik dan
Dosen Pembimbingku, yang telah meluangkan waktu untuk memberikan
bimbingan, dan dukungan sehingga saya dapat menyelesaikan tugas akhir
ini dengan baik.
2.
Ibu Merry, S.T., selaku Dosen Pembimbing Tugas akhirku, yang telah
meluangkan waktu dan perhatiannya untuk membimbing dan mendukung
saya dari awal pengerjaan sampai tugas akhir ini bisa selesai.
3.
Bapak DS. Bambang Soelistijanto, S.T., M.S. dan Bapak Alb. Agung
Hadhiatma, S.T., M.T. selaku panitia penguji yang telah memberikan
banyak kritik dan saran demi sempurnanya tugas akhir saya.
4.
Pak Bele, Mas Danang, Mas Catur, Agus dan seluruh staff sekretariat
Teknik, yang telah memberikan bantuannya terutama dalam proses
pengerjaan tugas akhir ini.
5.
Papi, Mami, mbahku dan adikku tercinta. Terima kasih atas doa, semangat,
dukungan dan cintanya sehingga saya bisa menyelesaikan studi dengan
6.
Sahabatku Andika yang telah banyak membantu dalam menyelesaikan tugas
akhir ini (terutama dalam pemrograman PHP 5 nya).
7.
Sahabat-sahabatku selama kuliah: Widy, Andika, Hasto, Mc De, Pram, Ase ,
Aceng, Bowo, Niko, Nata, Handie,Presto, Budi N’dut, Yohana, Kristi, Ika,
Gwen, Derry, Mang Juhai, Angkringan Agung, Burjo Komeng, Andre, dll.
8.
Anak-anak Kost Pomahan dan Mang Juhai atas kerelaannya meminjamkan
tempat dalam pengerjaan tugas akhir ini dan mohon maaf atas semua
gangguan yang telah ditimbulkan selama pengerjaan.
9.
Dear Poetri Paramitha yang baik, Terima kasih banyak atas dorongan,
semangat, pengertian, perhatiannya dan kasih sayang. Lama tidak bertemu
lagi
☺
.
10.
Sahabat-sahabat baikku Belek, Beckham, Dongo, Apyang, CB, Tirot dan
Krebo atas semua dukungan, doa dan dorongan semangatnya untuk
menyelesaikan tugas akhir ini.
11.
Mas Tanto (terima kasih banyak), Pak Simbah dan ibu, Sahabat-sahabatku :
Uut, Wiwid, Yakob, Felix, Nug, Sukma, Peter, Agus, Advendo, Dimaz, Pak
Luki, Pak Gatot, Vivi, Bin, Lita, Fosin, (alm) mbak Hesti, Pater Xave,
Lukas, Mundus, dll
12.
Semua wanita yang sudah menerima cintaku dan menjadi bagian hidupku,
dan yang menolak cintaku dan yang tidak bisa kumiliki. Terima kasih atas
13.
Teman-teman Teknik Informatika khususnya angkatan 2002 dan Anilop F.C
atas dukungan dan kebersamaan kita selama ini yang tidak akan pernah
kulupakan.
14.
Anjingku “Merah”, yang selalu menggonggong ketika aku pulang malam.
Dan menyambutku dengan riang gembira. Kamu tidak akan aku sengsu.
Juga anjingku si”Moly” yang terlanjur di sengsu orang.
15.
Bapak Ir. Gregorius Heliarko SJ, SS, BST, MA, M.Sc selaku Dekan
Fakultas Sains Dan Teknologi Universitas Sanata Dharma.
16.
Dan seluruh pihak yang telah ambil bagian dalam proses penulisan tugas
akhir ini yang tidak bisa saya sebutkan satu per satu.
Dengan rendah hati saya menyadari bahwa tugas akhir ini masih jauh dari
sempurna, oleh karena itu berbagai kritik dan saran untuk perbaikan tugas akhir
ini sangat saya harapkan. Akhir kata, semoga tugas akhir ini bermanfaat bagi
semua pihak. Terima kasih.
Yogyakarta, 26 September 2007
DAFTAR ISI
JUDUL ...
HALAMAN PERSETUJUAN ...
HALAMAN PENGESAHAN ...
PERNYATAAN KEASLIAN KARYA ...
HALAMAN MOTTO ...
HALAMAN PERSEMBAHAN ...
INTISARI...
KATA PENGANTAR ...
DAFTAR ISI ...
DAFTAR GAMBAR ...
DAFTAR TABEL ...
i
iii
iv
v
vi
vii
viii
ix
xii
xvi
xviii
BAB I PENDAHULUAN
1.1
Latar Belakang Masalah...
1.2
Rumusan Masalah...
1.3
Batasan Masalah...
1.4
Tujuan dan Manfaat……...
1.5
Metodologi Penelitian………...
1.6
Sistematika Penulisan ...
1
1
2
2
2
3
BAB II LANDASAN TEORI
2.1
HTML (HyperText Markup Language)...
2.1.1
Baris………...
2.1.2
Judul………...
2.1.3
Huruf………..
2.2
HTTP (Hypertext Transfer Protocol)...
2.3
WWW (World Wide Web)………...
2.4
PHP (Page Hypertext Preprocecor)...
2.4.1
Variabel dala PHP……….
2.4.2
Tipe Data………...
2.4.3
Operator……….
2.4.4
Fungsi………
2.4.5
Struktur Kendali / Struktur Kontrol………...
2.4.5.1
Percabangan………...
2.4.5.2
Perulangan……….……….
2.4.6
Array/Larik……….………
2.4.7
Require( ) dan Include( )………
2.4.8
Manajemen File dan Direktori………...
2.5
MySQL..………...
2.5.1
Bahasa dalam MySQL………...
2.5.2
Tipe Data dalam MySQL...…………...…….…...………….
BAB III ANALISA DAN PERANCANGAN SISTEM
3.1
Analisis Sistem ...
3.1.1
Use Case Diagram...
3.1.2
Pemodelan Proses Dengan Menggunakan DFD (Data Flow
Diagram)………...
3.1.2.1
Diagram Konteks...
3.1.2.2
Diagram Berjenjang (Decomposition Diagram)…....
3.1.2.3
Overview Diagram...
3.1.2.3.1
Diagram Berjenjang Untuk Admin...
3.1.2.3.2
Diagram Berjenjang Untuk User...
3.1.2.3.3
Overview Diagram Admin……….
3.1.2.3.4
Overview Diagram User……….
3.1.3
Pemodelan Data Dengan Menggunakan ER Diagram...
3.2
Disain Sistem... ...
3.2.1
Disain BasisData...
3.2.1.1
Disain Basis Data Secara Logika………..
3.2.1.2
Disain Basis Data Secara Fisikal………
3.2.2
Disain User Interface...
3.2.2.1
Disain User Interface Subsistem User………..
3.2.2.2
Disain User Interface Subsistem Admin…...………
BAB IV. IMPLEMENTASI SISTEM
4.1
Pembuatan Database...
4.3
Pembuatan Antar Muka Pemakai (User Interface)...
BAB V. ANALISA HASIL
5.1
Analisa Manfaat...
5.2
Kelebihan Sistem yang Dibuat...
5.3
Kekurangan Sistem yang Dibuat...
BAB VI. PENUTUP
6.1
Kesimpulan...
6.2
Saran...
DAFTAR PUSTAKA
44
84
84
84
85
86
86
DAFTAR GAMBAR
Gambar
Keterangan
Halaman
3.1
Use Case
Diagram
23
3.2
Gambar Diagram Konteks
24
3.3
Gambar Diagram Berjenjang Untuk Admin
25
3.4
Gambar Diagram Berjenjang Untuk User
26
3.5
Overview
diagram Admin
26
3.6
Overview
diagram User
27
3.7
Gambar ER Diagram
28
3.8
Relasi antar tabel
29
3.9
Halaman
home
32
3.10
Halaman Berita
32
3.11
Halaman Kegiatan
33
3.12
Halaman Teknologi Tepat Guna
33
3.13
Halaman Galleri
34
3.14
Halaman Pencarian
34
3.15
Halaman Login Admin
35
3.16
Halaman home Admin
35
3.17
Halaman Kelola Berita
36
3.18
Halaman Kelola Kegiatan
36
3.19
Halaman Kelola Teknologi Tepat Guna
37
3.20
Halaman Kelola Diskusi
37
3.21
Halaman Kelola Galleri
38
3.22
Halaman Kelola Anggota
38
4.1
Halaman
Database
meet
43
4.2
Halaman
Index
45
4.3
Halaman
Index
(Lanjutan)
45
4.4
Halaman Berita
49
4.5
Halaman Kegiatan
51
4.7
Halaman Diskusi
54
4.8
Halaman Form Tambah Diskusi
55
4.9
Halaman Galleri
57
4.10
Halaman pencarian
59
4.11
Halaman Login Admin
62
4.12
Halaman
Home Admin
64
4.13
Halaman Kelola Berita
65
4.14
Halaman Kelola Kegiatan
69
4.15
Halaman Kelola Teknologi Tepat Guna
73
4.16
Halaman Kelola Diskusi
77
DAFTAR TABEL
Tabel
Keterangan
Halaman
2.1
Tabel OperatorAritmatika pada PHP
11
2.2
Tabel Operator Logika pada PHP
11
2.3
Tabel kebenaran operasi logika
12
2.4
Beberapa fungsi manajemen file dan direktori
pada PHP
16
2.5
Tabel Tipe Data pada MySQL
19
3.1
Tabel input output proses modeling
24
3.2
Tabel
admin
29
3.3
Tabel berita
29
3.4
Tabel kegiatan
30
3.5
Tabel tepatguna
30
3.6
Tabel diskusi
30
3.7
Tabel jawaban
30
3.8
Tabel galleri
31
BAB I
PENDAHULUAN
1.1
Latar Belakang
Media for Eco-Technology (MeET) adalah suatu lembaga yang bergerak di
bidang teknologi tepat guna yang berwawasan lingkungan, yang mana
kegiatan-kegiatannya selalu berhubungan dengan penelitian dan pengembangan mengenai
teknologi-teknologi tepat guna yang berwawasan lingkungan dan hasil penelitiannya
dapat ditiru, digunakan oleh masyarakat luas.
Sebagai suatu organisasi yang bergerak dalam bidang teknologi tepat guna
yang berwawasan lingkungan dan pemberdayaan masyarakat, MeET membutuhkan
suatu media informasi yang bertujuan untuk menginformasikan suatu
teknologi-teknologi tepat guna yang berwawasan lingkungan kepada masyarakat luas dan
sekaligus juga sebagai jembatan komunikasi antara MeET dengan masyarakat,
khususnya masyarakat yang memerlukan informasi mengenai teknologi-teknologi
tepat guna dan berwawasan lingkungan. Sejauh ini informasi-informasi tersebut
hanya didapat di Sekretariat MeET atau Bengkel kerja MeET.
1.2
Rumusan Masalah
Rumusan masalah dalam tugas akhir ini adalah bagaimana mengembangkan
situs web yang sesuai dengan organisasi
Media for Eco-Technology.
.
1.3
Batasan Masalah
Batasan masalah dalam pembuatan situs web MeET yaitu :
1.
Informasi yang disampaikan berupa text dan grafis tidak
menyediakan video.
2.
Fasilitas yang terdapat dalam web ini adalah : Pencarian dan
diskusi
1.4. Tujuan dan Manfaat
Tujuan yang ingin dicapai :
Situs web
Media for Eco-Technology
dengan perangkat lunak PHP dan
MySQL.
Manfaat yang ingin dicapai penulis:
1.
Memberikan informasi-informasi mengenai teknologi-teknologi
tepat guna dan berwawasan lingkungan.
2.
Memberikan kemudahan dalam penyampaian informasi dan
komunikasi antara MeET dengan masyarakat dan pihak lain yang
berkepentingan.
1.5. Metodologi Penelitian
Penelitian yang digunakan adalah studi kasus pada lembaga MeET. Adapun
metologi pengembangan sistem menggunakan
Structure System Analysis and Design
Method.
Langkah-langkahnya adalah:
1.
Library Research (Penelitian Kepustakaan)
Dilakukan dengan mempelajari bahan-bahan tertulis seperti buku, jurnal,
internet dan situs organisasi lain yang ada kaitanya dengan pengembangan dan
pembangunan web MeET.
2.
Wawancara dan observasi
Dilakukan dengan cara ikut terlibat dalam kegiatan MeET ,tanya jawab dan
bertatap muka dengan para anggota-anggota MeET. Untuk mendapatkan suatu
informasi mengenai permasalahan yang ada.
3.
Analisis Sistem
Pada tahap ini dilakukan pemodelan sistem ke dalam bentuk
use case
,
Data
Flow Diagram
(DFD), dan
Entity Relationship Diagram
(ERD).
4.
Desain Sistem
Pada tahap ini dilakukan disain sistem secara umum, yang meliputi disain
database, disain
user interface
, dan disain struktur menu.
5.
Implementasi Sistem
Pada tahap ini dilakukan pengimplementasian sistem berdasarkan analisis dan
disain sistem yang telah dibuat.
6.
Uji coba Sistem
hasil sudah sesuai dengan rancangan yang diinginkan dan mencari
kesalahan-kesalahan yang mungkin terjadi.
1.6
Sistematika Penulisan
Sistematika penulisan yang akan digunakan dalam penyusunan laporan tugas
akhir ini adalah :
BAB I
: PENDAHULUAN
Terdiri dari latar belakang masalah, batasan masalah, tujuan tugas akhir,
metodologi penulisan, dan sistematika penulisan tugas akhir ini.
BAB II
: LANDASAN TEORI
Bab ini berisi dasar-dasar teori tentang pemrograman PHP dan MySQL,
serta HTML yang digunakan dalam pembuatan program.
BAB III : ANALISIS DAN PERANCANGAN SISTEM
Bab ini membahas tentang perancangan program yang akan dibuat,
seperti disain sistem dalam diagram, perancangan antar muka,
perancangan database serta perancangan teknologi yang kan digunakan.
BAB IV
: IMPLEMENTASI
Bab
ini
membahas
pengimplementasian
rancangan
program
menggunakan pemrograman web PHP dan MySQL.
BAB V
: ANALISA HASIL
Berisi tentang hasil analisa sistem yang dibangun, kelebihan dan
kekurangan sistem.
BAB II
LANDASAN TEORI
Aplikasi web yang ada sekarang ini pada awalnya dibangun hanya dengan
menggunakan HTML (
Hypertext Tranfer Protocol
). Pada perkembangan
selanjutnya sejumlah kode dan objek seperti PHP (
Personal Home Page Hypertext
Preprocessor
), ASP (
Active Server Page
) dan
applet (java)
dikembangkan untuk
memperluas kemampuan HTML.
Aplikasi web dapat dibagi menjadi web statis dan web dinamis. Web statis
dibuat dengan menggunakan bahasa HTML yang tidak mendukung pengaksesan
database. Web dinamis tidak dapat dibuat dengan bahasa HTML saja, namun harus
dibuat dengan bahasa pemrograman web. Selain itu dapat berinteraksi dengan
database
. Web dinamis juga dapat menampilkan setiap perubahan yang terjadi pada
web tersebut.
Dari sisi teknologi yang dapat digunakan untuk membentuk web dinamis
terdapat dua macam pengelompokan, yaitu :
1.Teknologi pada sisi klien (
client side technology
)
Teknologi pada sisi klien diimplementasikan dengan mengirimkan kode
perluasan HTML dan HTML ke klien. Yang termasuk dalam teknologi ini yaitu
kontrol Active X, Java Applet dan java Script. Kelemahan teknologi ini adalah
terdapat kemungkinan
browser
tidak mendukung fitur kode perluasan HTML.
Teknologi ini memungkinkan pemrosesan kode di dalam server, sehingga kode
yang diterima klien akan berbentuk HTML. Salah satu kelebihan teknologi ini
yaitu klien dapat berinteraksi dengan
database
. Beberapa teknologi yang
berjalan di server adalah CGI,ASP,PHP,JSP.
2.1 HTML (
HyperText Markup Language
)
HTML (
HyperText Markup Language
) merupakan bahasa pemrograman
yang dipakai untuk menampilkan informasi di halaman web. Untuk menampilkan
informasi di dalam web. Untuk membuat sebuah halaman web, kode-kode HTML
dapat ditulis secara langsung melalui editor teks maupun tidak langsung melalui
perangkat keras seperti
Front Page
,
Macromedia Dreamweaver
di lingkungan
Windows dan
Quanta
di lingkungan Linux.
HTML terdiri dari dua bagian , yaitu bagian header yang ditandai dengan
pasangan tag <HEAD> dan </HEAD> dan bagian body yang ditandai dengan
pasangan tag<HEAD> dan </HEAD> serta bagian body yang ditandai dengan tag
pasangan <BODY> dan </BODY>. Struktur penulisan kode HTML dapat dilihat
dibawah ini:
<html>
<head>
<title> Judul Program</title>
</head>
<body>Isi Program </body>
Tag HTML boleh ditulis dengan huruf kecil, huruf kapital atau kombinasi
keduanya. Tag HTML ditulis didalam tanda <dan> dan antara tanda <> dengan
nama tag tidak boleh ada spasi dalam penulisannya.
2.1.1 Baris
Untuk mengatur perpindahan baris, dapat dipakai dua macam tag HTML. Tag
<BR> dipakai untuk pindah baris baru tanpa spasi. Sedangkan tag <P> dipakai
untuk pindah baris baru dengan diselingi satu baris kosong.
2.1.2 Judul
HTML menyediakan 6 buah tag heading yang dapat dipakai untuk mengatur
jumlah ukuran teks yang dijadikan sebagai judul dalam badan dokumen. Tag
heading ini berbentuk <H1>heading</H1> sampai <H6> heading </H6>. Tag
heading mempunyai beberapa atribut. Salah satunya adalah atribut ALIGN yang
berfungsi untuk mengatur posisi heding . Atribut ALIGN mempunyai beberapa nilai
yaitu LEFT, CENTER , RIGHT , dan JUSTIFY. Bentuk penulisan atribut ini yaitu :
<h1 align = “Center”>heading rate tengah </h1>
2.1.3 Huruf
Tag<font>...</font> berguna untuk mengatur jenis ukuran maupun warna
font. Berikut ini contoh penulisan tag font dan pengaturan font dengan memakai
atribut:
•
Jenis font : <font face = “arial”>jenis font</font>
•
Ukuran font : <font size = “3”> size3 : jenis font <>
Nilai atribut color dapat berupa nilai warna atau nilai RGB yang dinyatakan
dengan “#RRGGBB”. Masing-masing RR,GG dan BB berupa dua bilangan digit
heksadesimal yang menyatakan komponen warna.
2.2HTTP (
HyperText Transfer Protocol
)
HTTP (
Hypertext Transfer Protocol
) merupakan protokol yang digunakan
untuk mentransfer data antara
web server
(
server
) ke
web browser
(
client
). Protokol
ini mentransfer dokumen-dokumen
web
yang ditulis atau berformat HTML.
Protokol adalah kumpulan aturan-aturan yang mengatur dan menentukan agar dapat
saling bertukar informasi.
2.3 WWW (
World Wide Web
)
WWW (
World Wide Web
) merupakan suatu sistem yang digunakan untuk
menampilkan dan menata informasi di internet. Pada awal penggunaannya,
teknologi ini dipakai untuk menampilkan dan menata informasi di internet.
Teknologi ini juga dipakai untuk saling berbagi dokumen lewat internet. Proses
transfer dokumen antar WWW ke server menggunakan sebuah protokol, yaitu
protokol HTTP. Setiap dokumen
hypertex
t yang lewat protokol HTTP ditulis
dengan format standard yaitu HTML. Dalam WWW juga dikenal dengan istilah
URL (
Uniform Resource Locator
) yang berfungsi sebagai penunjuk alamat di
internet. HTTP merupakan protokol yang digunakan untuk mentransfer data dari
web server
ke
web browser
. Web server adalah komputer yang digunakan untuk
menyimpan dokumen-dokumen web dan bertugas melayani permintaan dokumen
web dari klien. Dengan menggunakan protokol HTTP, web server berkomunikasi
2.4
PHP (
Page Hypertext Preprocessor
)
PHP (
Page Hypertext Preprocessor
) adalah salah satu bahasa pemrograman
di internet yang biasa digunakan untuk membuat halaman web yang dinamis dan
interaktif. PHP dapat dijalankan
multiplatform
. PHP merupakan bahasa scripting
yang menyatu dengan HTML dan dijalankan pada
server-side
. Artinya semua
sintaks yang diberikan akan sepenuhnya dijalankan pada
server
sedangkan yang
dikirimkan ke browser hanya hasilnya saja.
Ada tiga cara untuk menuliskan script PHP, yaitu :
a.
<?
...
?>
b.
<?php
...
?>
c.
<SCRIPT LANGUAGE=”php”>
...
</SCRIPT>
Untuk pengetikan komentar digunakan :
/* komentar anda */
atau
//komentar anda
2.4.1 Variabel dalam PHP
Variabel dalam PHP ditandai dengan tanda dolar ($). Variabel dalam PHP
bersifat case sensitive sama halnya dengan bahasa C.
2.4.2 Tipe Data
PHP memiliki 6 buah tipe data, yaitu :
a.
Empat tipe skalar :
−
boolean
−
integer
−
floating-point number (float)
b.
Dua tipe gabungan :
−
array
−
object
2.4.3 Operator
Operator Aritmatika
Operator aritmatika merupakan operator yang berhubungan dengan fungsi
matematika. Operator arimatika yang biasanya digunakan didalam PHP terdapat
pada tabel 2.1.
Tabel 2.1 Tabel Operator Aritmatika pada PHP
Operator
Operasi
+
Penambahan
-
Pengurangan
*
Perkalian
/
Pembagian bulat
%
Modulus / Sisa hasil bagi
Operator Logika / Pembanding
Operator logika berfungsi untuk membandingkan kondisi benar (
true
) dan
salah (
false
). Seperti bahasa C nilai benar adalah bernilai 1 dan salah adalah
bernilai 0. Tabel 2.2 merupakan tabel operator logika pada PHP dan Tabel 2.3
merupakan tabel kebenaran operasi logika.
Tabel 2.2 Tabel Operator Logika pada PHP
Operator
Operasi
= =
Sama dengan
!=
Tidak sama dengan
<
Lebih kecil
>
Lebih besar
< =
Lebih kecil sama dengan
> =
Lebih besar sama dengan
OR atau ||
Logika OR
XOR
Logika XOR
!
Logika not
Tabel 2.3 Tabel kebenaran operasi logika
p q p AND q p OR q p XOR q
!p
1 1
1
1
0
0
1 0
0
1
1
0
0 1
0
1
1
1
0 0
0
0
0
1
2.4.4 Fungsi
Fungsi pada PHP ada yang mempunyai nilai balik ada juga yang tidak
mempunyai nilai balik. Fungsi beragumen juga dikenal di PHP baik dengan
teknik
passing by value
dan
passing by reference
. Perintah untuk membuat fungsi
dalam PHP adalah
fuction
. Perintah
return
yang digunakan untuk mengembalikan
nilai tertentu.
fuction nama_fungsi(argumen)
{
kode perintah
}
2.4.5 Struktur Kendali / Struktur Kontrol
Ada dua jenis struktur kendali didalam PHP, yaitu : struktur percabangan
dan struktur perulangan.
2.4.5.1 Percabangan
Perintah percabangan adalah perintah yang memungkinkan pemilihan atas
perintah yang akan dijalankan sesuai dengan kondisi tertentu (sebagai
pengambilan keputusan). Ada 3 macam perintah percabangan, yaitu : IF,
a.
IF
IF digunakan untuk menjalankan satu atau lebih perintah yang menyatakan
keadaan. Format penulisannya adalah sebagai berikut :
If (kondisi)
{
Perintah yang akan dijalankan jika kondisi benar
}
b.
IF...ELSE
IF...ELSE mirip dengan perintah IF hanya saja didalam IF...ELSE digunakan
untuk banyak blok perintah. Format penulisannya adalah :
If (kondisi1)
{
Perintah 1 yang akan dijalankan jika kondisi1 benar
}
Elseif (kondisi2)
{
Perintah 2 yang akan dijalankan jika kondisi 1 bernilai
salah dan kondisi 2 bernilai benar
}
Else
{
Perintah yang dijalankan jika kondisi 1 dan 2 salah
}
c.
SWITCH
Format penulisan perintah SWITCH adalah :
switch (kondisi)
{
case konstanta1 :
perintah1;
break;
case konstanta2 :
perintah2;
break;
default :
2.4.5.2 Perulangan
Perulangan digunakan untuk mengulang suatu perintah tanpa menulis
perintah yang akan diulang sebanyak perulangan yang diinginkan. Didalam PHP
ada tiga macam perintah pengulangan, yaitu : FOR, WHILE, dan DO...WHILE.
a.
FOR
Perintah FOR digunakan untuk mengulang perintah dengan jumlah
perulangan yang sudah diketahui. Pada perintah FOR tidak ada kondisi yang
diuji yang diperlukan hanyalah mendeklarasikan nilai awal dan akhir variabel
penghitung. Nilai variabel penghitung secara otomatis bertambah atau
bekurang setiap kali perulangan dilaksanakan. Format penulisannya adalah :
for ($i=nilai_awal, $i=nilai_akhir, $i++
atau
$i--)
{
perintah yang akan dijalankan
}
b.
WHILE
Perintah WHILE digunakan untuk mengulang sebuah perintah sampai kondisi
tertentu bernilai salah. Perulangan akan terus berjalan selama kondisi masih
bernilai benar. Format penulisan perintahnya adalah :
while (kondisi)
{
perintah yang akan dijalankan
}
c.
DO...WHILE
Perintah ini mirip dengan perintah WHILE. Proses perulangan akan berjalan
selama kondisi yang diperiksa di while bernilai benar dan perulangan
DO...WHILE adalah letak dari kondisi yang diperiksa. Pada perintah WHILE
terletak di awal perulangan sehingga sebelum masuk ke perulangan kondisi
tersebut harus bernilai benar. Sedangkan pada DO...WHILE, kondisi diperiksa
diakhir perulangan. Ini berarti paling sedikit sebuah perulangan akan
dilakukan DO...WHILE, karena untuk masuk perulangan tidak ada kondisi
yang harus dipenuhi. Format penulisan perintahnya adalah :
do
{
perintah yang akan dijalankan
}while (kondisi)
2.4.6Array / Larik
Array pada PHP mirip dengan array dalam bahasa C. Indeks larik dimulai
dari indeks 0. Untuk menginisialisasi larik, ada beberapa cara yang dapat
dilakukan.
$b[] = 'a';
$b[] = 'b';
$b[] = 'c';
Array diatas akan setara dengan inisialisasi array seperti di bawah ini:
$b[0] = 'a';
$b[1] = 'b';
$b[2] = 'c';
2.4.7 Require( ) dan Include( )
Fungsi require( ) adalah pernyataan yang berfungsi menukar fungsi require(
adalah sebuah fungsi yang bertujuan untuk memasukkan atau mengikutsertakan
file yang ditunjuk serta mengevaluasi file tersebut.
2.4.8 Manajemen File dan Direktori
Beberapa fungsi untuk manajemen file dan direktori pada PHP dapat dilihat
pada Tabel 2.4.
Tabel 2.4. Beberapa fungsi manajemen file dan direktori pada PHP
Fungsi
Keterangan
$file_handler =
fopen(“nama_file”, “mode”);
Fungsi fopen( ) digunakan untuk
membuka file.
mode “a” : untuk membuka dan
menambah data pada akhir file.
mode “r” : untuk membuka file secara
read-only
.
mode “w” : untuk membuka dan menulis
file (data yang sudah ada pada file akan
terhapus).
fclose($file_handler);
Fungsi fclose( ) digunakan untuk
menutup file.
1. fgets($file_handler);
2. fgets($file_handler, $max);
1. Digunakan untuk membaca satu baris
dari file yang dibuka.
2. Digunakan untuk membaca satu baris
file
sebanyak
$max
-1
karakter.
(termasuk spasi)
fread($file_handler, $max);
Digunakan
untuk
membaca
file
sebanyak $max karakter (termasuk
spasi).
fwrite($file_handler, $string);
Digunakan
untuk
menulis
$string
kedalam file dan mengembalikan berapa
bite yang dituliskan atau “FALSE” jika
terdapat error.
file_get_contents(“nama_file”);
Digunakan untuk membaca isi dari file
kedalam string.
readfile(“nama_file”);
Digunakan untuk membaca isi dari file
dengan cara menuliskan isi secara direct
ke output dan mengembalikan jumlah
bite yang ditulis.
file_put_contents(“nama_file”,
$string);
Digunakan
untuk
menulis
$string
- fseek($file_handler, $offset);
- rewind($file_handler);
- ftell($file_handler);
fseek( ) digunakan untuk men-set posisi
pada $offset bite dari awal file.
rewind( ) digunakan untuk men-set dari
posisi sekarang ke awal file.
ftell( ) digunakan untuk mengembalikan
ke posisi sekarang.
unlink(“nama_file”);
Digunakan untuk menghapus file.
rename($lama, $baru);
Digunakan untuk mengganti nama file
dari $lama menjdi $baru.
copy($original, $copy);
Digunakan untuk menduplikat (copy)
file $original ke file $copy.
mkdir($namafolder);
rmdir($namafolder);
mkdir( ) digunakan untuk membuat
folder dengan nama $namafolder.
rmdir( ) digunakan untuk menghapus
folder $namafolder.
(kedua fungsi diatas bergantung pada
system permission
).
file_exists($namafile)
Digunakan
untuk
mengecek
file
$namafile ada atau tidak, fungsi ini
mengembalikan nilai TRUE atau FALSE
2.5 MySQL
MySQL merupakan sebuah
Database Management System
(DBMS). MySQL
memiliki kemampuan
multithread
yang dapat menangani banyak permintaan
(
request
) layanan secara bersamaan sehingga MySQL bisa digunakan sebagai
multi
user database server
.
2.5.1 Bahasa dalam MySQL
MySQL menggunakan bahasa
Structured Query Language
(SQL). SQL
merupakan bahasa yang telah distandarisasi dan digunakan dalam mengakses dan
mengelola
server
database
. Di dalam SQL terdapat 3 sub bahasa, yaitu :
DDL adalah perintah SQL yang digunakan untuk mendefinisikan atau mengatur
objek-objek yang akan menampung atau mengelola
record
data.
Perintah yang digolongkan kedalam DDL adalah :
-
CREATE
: untuk membuat objek.
-
ALTER
: untuk memodifikasi objek.
-
DROP
: untuk menghapus objek.
Objek yang dimaksud misalnya database dan tabel.
2.
Data Manipulation Language
(DML)
DML adalah perintah SQL yang digunakan untuk mengelola
record
data,
seperti menambah, menghapus, mengubah, dan menampilkannya.
Perintah yang digolongkan kedalam DML adalah :
-
INSERT
: untuk menambahkan record data.
-
UPDATE
: untuk mengubah record data.
-
DELETE
: untuk menghapus record data.
-
SELECT
: untuk menampilkan data.
3.
Data Control Language
(DCL)
DCL adalah perintah yang digunakan untuk memberi hak-hak akses tertentu
bagi setiap user.
Perintah yang digolongkan kedalam DCL adalah :
-
GRANT : untuk memberi hak-hak tertentu kepada user.
-
REVOKE : untuk mencabut hak-hak dari user.
Grant dan revoke diberikan oleh user yang mempunyai hak untuk memberikan
2.5.2 Tipe Data dalam MySQL
Tipe data yang dapat digunakan dalam MySQL dapat dilihat pada Tabel 2.5.
Tabel 2.5 Tipe Data pada MySQL
Tipe Data
Keterangan
tinyint
Ukuran terkecil dari integer
smallint
Ukuran kecil dari integer
mediumint
Ukuran menengah dari integer
int,
integer
integer
bigint
Ukuran terbesar dari integer
float
Presisi tunggal
double,
double precision,
real
Presisi ganda
decimal,
numeric
Pecahan dengan range seperti tipe data double.
date
Tanggal. Format : ‘YYYY-MM-DD’
datetime
Kombinasi tanggal dan jam.
Format : ‘YYYY-MM-DD HH:MM:SS’
timestamp
Kombinasi tanggal dan jam yang berisi waktu
saat tabel diakses.
Format
:
‘YYMMDDHHMMSS’,
‘YYMMDDHHSS’, atau ‘YYMMDD’.
time
Jam
Format : ‘HH:MM:SS’.
year
Tahun
Format : ‘YYYY’
char
Karakter, dengan menghilangkan spasi pada saat
penyimpanan.
Range : 1 s.d. 255 karakter.
nchar,
national char
Karakter, dengan tidak menghilangkan spasi
pada saat penyimpanan.
Range : 1 s.d. 255 karakter.
varchar
Karakter, dengan menghilangkan spasi pada saat
penyimpanan.
Range : 1 s.d. 255 karakter.
tinyblob
tinytext
teks/blob dengan panjang karakter maksimal
255.
blob
text
Deretan karakter yang panjang. Biasa dipakai
sebagai pengganti format data text karena
keterbatasan ukuran format text. Dengan
panjang maksimum 65535 karakter.
medium text
65535.
long blob
long text
teks/blob dengan panjang karakter maksimal
16777215.
enum
(‘value1’,value2’,...)
Objek string yang hanya boleh diisi dari daftar
pilihan
value
yang diberikan, NULL, atau error
value. Maksimum value : 65535.
set
(‘value1’,value2’,...)
Objek string yang hanya boleh diisi dari daftar
pilihan
value
yang diberikan, NULL, atau error
value. Maksimum value : 64.
2.6
Sekilas tentang
Media for Eco-Technology
(MeET)
Media for EcoTechnology
(MeET) adalah suatu organisasi yang lahir dari
keprihatinan beberapa mahasiswa yang tergabung dalam suatu komunitas
bernama
Epsilon
, terhadap krisis energi dan keadaan bangsa Indonesia yang
kaya akan sumber daya tetapi masih belum dapat memanfaatkannya dengan
baik Keprihatinan itu sempat menjadi wacana di beberapa kalangan mahasiswa
Fakultas Teknik Universitas Sanata Dharma pada waktu itu. Karena sebagian
besar anggotanya masih merupakan mahasiswa fakultas teknik, maka terdorong
keinginan untuk membuat suatu teknologi-teknologi yang murah, bisa dibuat
oleh masyarakat luas, ramah lingkungan dan tepat guna. Keprihatinan beberapa
mahasiswa yang pada waktu itu masih merupakan wacana, disambut baik oleh
beberapa kalangan dan beberapa dosen Fakultas Teknik Universitas Sanata
Dharma. Sehingga pada tanggal 17 Agustus 2005 di Wisma YKS, Srowolan,
Pakem, Sleman, Yogyakarta, lahirlah
Media for Eco-Technology
sebagai suatu
organisasi yang bergerak di bidang teknologi tepat guna dan ramah lingkungan.
Pada tanggal 9 September 2005, di Laboratorium Konversi Energi,
Kampus III Universitas Sanata Dharma, Paingan, Maguwoharjo, Sleman,
Universitas Sanata Dharma dengan pihak
Ordo Fratrum Minorum
(OFM)
yang
menghasilkan suatu
Memorandum of Understanding
mengenai pemanfaatan
suatu teknologi yang ramah lingkungan, murah, dapat dibuat oleh masyarakat,
tepat guna dan dapat menghasilkan energi untuk masyarakat Atambua,NTT.
Pihak Universitas Sanata Dharma, menunjuk
Media for Eco-Technology
sebagai
pelaksana
MOU
tersebut.
Berangkat dari
MOU
tersebut,
Media for Eco-Technology
mulai
mengadakan beberapa penelitian mengenai beberapa teknologi yang sebenarnya
sudah untuk dikembangkan lagi. Seperti kincir angin untuk mengangkat air dan
pembangkit tenaga listrik,
Biogas
untuk pembangkit listrik dan memasak,
Hydram
untuk mengangkat air dan teknologi-teknologi lain yang berhasil
dikembangkan dan dibuat. Teknologi-teknologi yang sudah dibuat dan
dikembangkan tersebut, sengaja tidak dipatenkan oleh
Media for
Eco-Technology
, agar dapat masyarakat dapat membuatnya dengan bebas dan gratis,
serta dapat dikembangkan oleh masyarakat itu sendiri.
Selain dengan
OFM ,
organisasi
Media for Eco-Technology
juga bekerja
sama
dengan LSM Tanda Baca untuk menangani kincir angin di
BAB III
ANALISIS DAN PERANCANGAN SISTEM
3.1
Analisa Sistem
Sistem yang akan dirancang yaitu situs informasi Media for
Eco-Technology, dimana tujuan utamanya adalah untuk memudahkan Media for
Eco-Tecnology sebagai suatu organisasi, dalam penyampaian informasi
mengenai suatu teknologi tepat guna yang berwawasan lingkungan kepada
masyarakat. Informasi ditampilkan dalam bentuk teks dan gambar sehingga
memudahkan pengguna informasi (
user
) memahami informasi yang di
berikan. Sistem ini juga dirancang agar pengguna sistem informasi (
user)
dan MeET, dapat saling berinteraksi.
Pengguna aplikasi ini adalah
Admin
dan
user
(pengguna informasi).
Admin
berperan sebagai pengelola data-data, yaitu dapat melakukan proses
kelola data antara lain: Kelola Berita, Kelola Kegiatan, Kelola Diskusi,
Kelola Teknologi Tepat Guna, Kelola Gallery. Seorang
admin
harus
memiliki
ID
dan
Password
untuk melakukan proses tersebut.
User
dalam
sistem ini mendapatkan informasi berdasarkan pilihan menu yang diberikan
dan juga dapat melakukan proses pencariaan data berita, Kegiatan,
Teknologi Tepat Guna berdasarkan ketegori yang dipilih dan menggunakan
kata kunci tertentu. Selain itu
user
juga dapat mengisikan topik dan
3.1.1
Use Case Diagram
Use Case Diagram
dari situs MeET dapat dilihat pada Gambar 3.1.
3.1.2
Pemodelan Proses Dengan Menggunakan
DFD
(
Data Flow Diagram
)
Proses
modeling
digunakan
untuk
mengorganisasikan
dan
mendokumentasikan proses dari sistem. Tabel input output proses modeling untuk
situs MeET dapat dilihat pada tabel 3.1.
Tabel 3.1 Tabel input output proses modeling
ENTITAS
INPUT
OUTPUT
Admin
Username, password, Kelola
Berita,
Kelola
Kegiatan,
Kelola
Gallery
,
Kelola
Teknologi Tepat Guna. Kelola
Diskusi
.
Konfirmasi
login,
Berita
Terupdate, Kegiatan terupdate,
Gallery
terupdate, Teknologi
Tepat Guna terupdate, Diskusi
Terupdate, Konfirmasi Logout
User
Diskusi, kata kunci, Pilihan
menu user.
Berita,
informasi
Kegiatan,
informasi
Profil,
informasi
Teknologi
Tepat
Guna,
informasi Pencarian, informasi
Diskusi, informasi
Gallery
.
3.1.2.1
Diagram Konteks
3.1.2.2
Diagram Berjenjang (
Decomposition Diagram
)
Bagan
berjenjang
digunakan
untuk
menggambarkan
dekomposisi/hirarki dari sistem.
3.1.2.3
Overview Diagram
Berikut ini adalah overview diagram untuk Situs MeET :
3.1.2.3.1 Diagram Berjenjang Untuk Admin
3.1.2.3.2 Diagram Berjenjang Untuk User
Gambar 3.4 Gambar Bagan Berjenjang untuk User
3.1.2.3.3
Overview Diagram Admin
3.1.2.3.3 Overview Diagram User
Gambar 3.6 Overview Diagram User
3.1.3
Pemodelan Data Dengan Menggunakan ER Diagram
Gambar ERD untuk Situs MeET dapat dilihat pada Gambar 3.10.
Gambar 3.7 Gambar ER Diagram
3.2
Disain Sistem
Dalam tahap disain sistem ini akan disajikan mengenai disain
database, disain
user interface
, dan disain struktur menu untuk Situs MeET.
3.2.1Disain Basis Data
3.2.1.1
Disain Basis Data Secara Logika
Sistem ini menggunakan 7 tabel yaitu tabel admin, berita, kegiatan,
tepatguna, diskusi, jawaban, galleri. Terdapat satu relasi pada database ini.
Relasi antar tabel di dalam disain database dapat dilihat pada gambar 3.11
Gambar 3.8 Relasi antar tabel
3.2.1.2
Disain Basis Data Secara Fisikal
Disain fisikal dari sistem yang dibuat adalah sebagai berikut :
1.
Tabel admin
Tabel 3.2 Tabel admin
Nama
Field
Tipe Data
Ukuran
Field
Username
varchar
20
Password
varchar
20
2.
Tabel berita
Tabel 3.3 Tabel berita
Nama
Field
Tipe Data
Ukuran
Field
Id_berita
Int
10
tgl_berita
Date
Kategori
varchar
20
penulis
varchar
10
judul_berita
varchar
50
Browse_poto
varchar
100
3.
Tabel kegiatan
Tabel 3.4 kegiatan
Nama
Field
Tipe Data
Ukuran
Field
Id_kegiatan
Int
11
jenis_keg
varchar
20
judul_kegiatan
varchar
50
Tanggal_keg
Date
browsephoto_keg
varchar
100
ket_keg
longtext
4.
Tabel tepatguna
Tabel 3.5 Tabel tepatguna
Nama
Field
Tipe Data
Ukuran
Field
Id_ttg
int
10
nama_ttg
varchar
40
browsephoto_ttg
varchar
100
ket_ttg
longtext
5.
Tabel diskusi
Tabel 3.6 Tabel diskusi
Nama
Field
Tipe Data
Ukuran
Field
Idi_diskusi
Int
10
kategori
varchar
20
judul_dis
varchar
100
penulis_dis
varchar
30
email_dis
varchar
40
tanggal_dis
Date
pertanyaan
longtext
status
varchar
1
6.
Tabel jawaban
Nama
Field
Tipe Data
Ukuran
Field
Id_jawaban
Int
10
Id_diskusi
Int
10
tanggal_jwb
Date
penulis_jwb
varchar
40
email_jwb
varchar
40
tanggapan
longtext
status
varchar
1
7.
Tabel galleri
Tabel 3.8 Tabel galleri
Nama
Field
Tipe Data
Ukuran
Field
Id_gallery
Int
10
Tanggal_gal
Date
keterangan_gal
varchar
100
gambar
varchar
100
8.
Tabel anggota
Tabel 3.9 Tabel anggota
Nama
Field
Tipe Data
Ukuran
Field
Id_anggota
Int
10
nama
varchar
50
jabatan
varchar
50
3.2.2 Disain
User Interface
Desain
user interface
untuk Situs MeET terbagi menjadi 2 bagian
yaitu disain
user interface
untuk subsistem user dan disain
user interface
untuk subsistem admin.
3.2.2.1
Disain
User Interface
Subsistem User
1.
Halaman home
Gambar 3.9 Halaman home
2.
Halaman Berita
Gambar 3.10 Halaman Berita
Gambar 3.11 Halaman Kegiatan
4.
Halaman Teknologi Tepat Guna
Gambar 3.12 Teknologi Tepat Guna
Gambar 3.13 Halaman Galleri
6.
Halaman Pencarian
Gambar 3.14 Halaman Pencarian
3.2.2.2
Disain
User Interface
Admin
dahulu.
1.
Halaman login admin
Gambar 3.15 Halaman login Admin
2.
Halaman home admin
Gambar 3.16 Halaman home admin
Gambar 3.17 Halaman Kelola Berita
4.
Halaman Kelola Kegiatan
! "
#$$ " %
&
! ''(((
'''' '''' (((
) (((
''(((
'''' '''' (((
) (((
''(((
'''' '''' (((
) (((
((( ((( (((
&
Gambar 3.18 Halaman Kelola Kegiatan
! "
#$$ " % & ! ''((( '''' '''' ((( ) ((( ''((( '''' '''' ((( ) ((( ''((( '''' '''' ((( ) ((( ((( ((( ((( &
Gambar 3.19 Halaman Kelola Teknologi Tepat Guna
6.
Halaman Kelola Diskusi
! "
#$$ " % & & % % * *
Gambar 3.20 Halaman Kelola Diskusi
! "
#$$ " %
&
! ''(((
'''' '''' (((
) (((
''(((
'''' '''' (((
) (((
''(((
'''' '''' (((
) (((
((( ((( (((
&
Gambar 3.21 Halaman Kelola Galleri
8.
Halaman Kelola Anggota
BAB IV
IMPLEMENTASI SISTEM
Setelah selesai merancang dan menganalisa sistem yang akan dibuat,
langkah selanjutnya adalah mencoba mengimplementasikan ke dalam bahasa yang
dapat dimengerti oleh mesin.
Sistem ini dibuat dengan spesifikasi
Software
dan
Hardware
sebagai
berikut :
Spesifikasi
Software
3
Sistem Operasi Windows XP Professional.
4
Macromedia Dreamweaver MX
5
AppServ v2.5.7 dengan MySQL 5.0.24a dan PHP 5.1.6
6
Macromedia Flash MX 2004
7
Microsoft Internet Explorer.
8
Adobe Photoshop 7.0
Spesifikasi
Hardware
1.
Prosessor Intel Pentium IV 1.8 GHz
2.
Memory 256 MB
3.
HardDisk 80 GB
4.1 Pembuatan Database
Pertama – tama yang dilakukan dalam pembangunan situs Media
menggunakan
database
MySQL. Jadi sistem yang dibuat hanya mengacu
pada satu
database
yang diberi nama meet.
Adapun langkah pembuatan
database
meet adalah sebagai berikut :
Database
terdiri dari lima tabel utama. Struktur tabel-tabel dalam situs
penawaran properti berbasis web adalah sebagai berikut :
a. Tabel
admin,
tabel dibuat dengan sintak SQL sebagai berikut:
! "# $ % $
b.
Tabel
berita,
tabel dibuat dengan sintak SQL sebagai berikut:
& '
" (& ' ' ) ' ( '
'*+(& ' '
, ' * - +'
+ - +'
. +(& ' /
& ( ' ) - +'
(& ' + *' 0'
! "# $ % $ " (& '
c.
Tabel
kegiatan,
tabel dibuat dengan sintak SQL sebagai berikut:
" (+ , ' )
" (''* ' )
" (, * ' ' )) ' ( '
. (, *
. +(, * ' /
' ** +(, * '
& ' (, * ) - +'
, '(, * + *' 0'
! "# $ % $ " (, * '
d. Tabel
tepatguna,
tabel dibuat dengan sintak SQL sebagai berikut:
' '*
" (''* ' ) ' ( '
(''* 1
& ' (''* ) - +'
, '(''* + *' 0'
! "# $ % $ " (''*
e. Tabel
diskusi,
tabel dibuat dengan sintak SQL sebagai berikut:
,
" ( , ' ) ' ( '
, ' *
. +( )
+ ( 2
+( 1
' ** +( '
' 3 + *' 0'
' ' )
f. Tabel
jawaban,
tabel dibuat dengan sintak SQL sebagai berikut:
. &
" (. & ' ) ' ( '
" ( , ' )
' ** +(. & '
+ (. & 1
+(. & 1
' ** + *' 0'
' ' )
! "# $ % $ " (. &
g. Tabel
galleri,
tabel dibuat dengan sintak SQL sebagai berikut:
* ++
" (* ++ ' ) ' ( '
' ** +(* + '
, ' * (* + )
* & )
! "# $ % $ " (* ++
h. Tabel
anggota,
tabel dibuat dengan sintak SQL sebagai berikut:
** '
" ( ** ' ' )) ' ( '
)
. & ' )
Hasil terakhir
database
meet menggunakan MySQL dapat dilihat
pada
gambar 4.1.
Gambar 4.1 Halaman Database meet
4.2 Koneksi Database
Tabel – tabel yang telah dibuat belum dapat terhubung dengan
sistem. Untuk menghubungkan MySQL dengan sistem, maka digunakan
sintak sebagai berikut :
<?php
$db_host = "localhost";
$db_name = "properti_db";
$db_user = "root";
$db_password = "";
function opendb()
{
global $db_host, $db_user, $db_password, $db_name, $db_connection;
$db_connection = mysql_connect($db_host, $db_user, $db_password) or die ("Gagal
membuka database!");
}
function querydb($query)
{
global $result;
$result = mysql_query($query) or die ("Gagal melakukan query = $query");
return $result;
}
function closedb()
{
global $db_connection;
mysql_close($db_connection);
}
?>
Dalam melakukan koneksi, empat variabel yang dideklarasikan adalah :
1.
db_host = digunakan untuk menunjuk nama host dari komputer
server.
2.
db_
user
= digunakan untuk menunjuk nama
user
yang bertugas
sebagai administrator
database
dalam MySQL.
3.
db_
password
=
password
administrator
database
MySQL.
4.
db_name = digunakan untuk menunjuk nama
database
yang akan
diakses.
4.3 Antar Muka (User Interface)
Berikut ini merupakan halaman antar muka pemakai (
user
interface
) situs Media for Eco-Technology :
Gambar 4.2 Halaman index
4.3.2
Halaman Index (Lanjutan)
Gambar 4.3 Halaman index (Lanjutan)
Melalui halaman
index
, pengunjung dapat melakukan beberapa hal,
diantaranya adalah :
1.
Melihat informasi berita terbaru, melihat informasi kegiatan terbaru,
melihat informasi teknologi terbaru.
2.
Melakukan
link
ke website-website yang merupakan partner MeET..
Tampilan halaman
index
dibuat dengan menggunakan
file
index.php
.
456 $! 7 # ! " 89::;2 ::6 6 7 # 1< ) ' +:: 8 8 '' =:: < 2< *: : ' +1:+ < ' 8>
4 ' +> 4 >
4' '+ ># - 9 + *34:' '+ >
4 ' '' 9 ? @8 ' '9 3 8 ' '@8' 0': ' +A '@ 9BB/C9)8> 4 '3+ '3 @8' 0': 8>
4599
< '3+ 2 D + =E FF G < '3+ B D + = E G < '3+ C D + = EHHHHHHG 99>
4: '3+ > 4: >
4+ , -@8 < 8 +@8 '3+ '8 '3 @8' 0': 8> 4& 3>
4' &+ ' @8B1 8 & @8 8 + * @8 ' 8 & + @8E HH8> 4' >
4' ' @8B1 8 @8 +8>4 &. ' + @8 + =6 I 6 F 9 F69)) -9CF B9
111//2/1 8
& @8 '' =:: + < < : &: , : & :-+ : -+ < &E
@F C 8 ' @8B2)8 * '@8B18>
4 @8 8 + @8 * : '2< -8>
4 @8? + '38 + @8 * 8>
4 & @8 * : '2< -8 ? + '3@8 * 8
+ * * @8 '' =:: < < :* :* '-+ + 3 8 '3 @8 + ' :09
, 9-+ 8 ' @8B2)8 * '@8B18>4: & > 4: &. '>4:' >
4:' > 4:' &+ >
4' &+ ' @8B1 8 & @8 8 + * @8 ' 8> 4' >
4' ' @8B1 8 * '@82 8 + * @8 ' 8 &* + @8E21) )8 + @8 '3+ 28> 4 + @8 '3+ 28>
4 -@8 0< 8>JJ 7 JJ4: > 4 -@8& ' < 8>JJ ' JJ4: > 4 -@8, * ' < 8>JJ % * ' JJ4: >
4 -@8' , + * ' '* < 8>JJ , + * ' K JJ4: > 4 -@8 , < 8>JJ 6 , JJ4: >
4 -@8* ++ < 8>JJ K ++ JJ4: >
4 -@8 < 8>JJ ! JJ4: >
4: > 4:' >
4:' > 4:' &+ >
4' &+ ' @8B1 8 * '@81) 8 & @8 8 + * @8 ' 8> 4' >
4' ' @8) B8 * '@82 28 + * @8 ' 8 + * @8' 8 &* + @8E21) )8 @8 +8>
4 @8 8>
# 4: >
4 @8 8>
4 -@8' ' * '< 8 @8 8>4 @8 / 8> ' *
# 4: >4: >
4 -@8' < 8>4 @8 / 8> 4: >4: >
4 -@8, ' ,, < 8>4 @8 / 8>% ' , % 4: > 4: > 4: >
4 @8& '' 8>L & A4: > 4& >4& >4& >4& >
4 @8 8>
4 -@8 '' =:: < < < 8>
4 * & @8 8 @8 * :+ * <. *8 ' @8CC8 * '@8)))8>4: > 4 -@8 '' =:: < < '8>
4 * & @8 8 @8 * : < *8 ' @8CC8 * '@82 8>4: > 4 -@8 '' =:: < , ++< '8>
4 * & @8 8 @8 * : , ++<. *8 ' @8CC8 * '@8/ 8>4: > 4 -@8 '' =:: < ++ < '8>
4 * & @8 8 @8 * : ++ <. *8 ' @8CC8 * '@8/ 8>4: > 4: ' >
4 @8& '' 8>L & A4: > 4:' >
4' ' @8F) 8 + * @8+ -'8 + * @8' 8 @8 +8 @8 " 8>4' &+ ' @8) M8 & @8 8>
4' >
4' * '@8 B8 + * @8 ' 8 &* + @8E21) )8 @8 +8>4 + @8 '3+ C8>
4 ? >N + ' 6 ' * 6 N ' # - 9
+ *34: ? > 4: >4:' > 4:' >
4' * '@8 B8 + * @8+ -'8 @8 " 8 @8 +8> ' ' , 4:' >
4:' > 4' >
4' @8 +8 @8 8>
4O
+ 8, , < 8A & A
P ?+@ 8 N Q H # & ' 6 $ (& ' 6 N "#" ) 8A ? 3 & P ?+ A
P ' (& ' @ 3 ?+(- ' ( P +' A 84 1>P ' (& ' R. +(& ' S4: 1>8A 84 >6 ' + + = P ' (& ' R + S8 <8L & AL & AL & A8 <8 ** + = 8 < ' 8 9 9
$8 ' ' ' P ' (& ' RT'*+(& ' TS <84: >8A 84 >8A
84 * @T& ' :P ' (& ' R& ( ' ST ' @T T * '@T)/ T + * @T+ -'T>8A
+ & & ' P ' (& ' RT (& ' TS IFB A 8<<<<< 4
-@T& ' < O @P ' (& ' R" (& ' ST>N + *, 3 4: >8A 84: >8A
O> 4:' > 4:' >
4' >
4' @8 +8>L & A4:' > 4:' >
4' >
4' * '@8 B8 + * @8+ -'8 @8 " 8 @8 +8>% * ' 4:' > 4:' >
4' >
4' @8 +8 @8 8>
4O
P ?+@ 8 N Q H # , * ' 6 $ ' ** +(, * 6 N "#" )8A
? 3 & P ?+ A
P ' (, * ' @ 3 ?+(- ' ( P +' A
84 1>P ' (, * ' R. +(, * ' S4: 1>8A 84 >U , * ' = P ' (, * ' R. (, *S8 <8L & AL & AL & A8
<8 ** + = 8 < ' 8 9 9 $8 ' ' ' P ' (, * ' RT' ** +(, *TS <84: >8A
84 >8A
+ & & ' P ' (, * ' RT, '(, *TS IFC A 8<<<<< 4
-@T, * ' < O @P ' (, * ' R" (, * ' ST>N + *, 3 4: >8A 84: >8A
O> 4:' > 4:' >
4:' &+ >
4' &+ ' @8F F8 & @8 8> 4' >
4' &* + @8E21) )8 @8 +8>4 + @8 '3+ B8>4 -@8 0< 8>JJ 7 JJ4: > 4 -@8& ' < 8>JJ ' JJ4: > 4 -@8, * ' < 8>JJ % * ' JJ4: > 4 -@8' , + * ' '* < 8>JJ , + * ' K JJ4: > 4 -@8 , < 8>JJ 6 , JJ4: > 4
-@8* ++ < 8>JJ K ++ JJ4: > 4 -@8 < 8>JJ ! JJ4: > 4: >4:' >
4:' > 4:' &+ >4:' >
4' ' @8) B8 + * @8 ' 8 + * @8' 8 &* + @8EHHHHHH8
@8 +8>4' &+ ' @8) M8 @ 8* , ( & 8 & @8 8 ++ *@8 8 ++ *@8 8>
4' >
4' @8 +8> 4O
P ?+@ 8 N Q H # ' '* 6 $ (''* 6 N "#" ) 8A
? 3 & P ?+ A
P ' (''*@ 3 ?+(- ' ( P +' A
84 >8A 84' >4
-@T' , + * ' '* < O @P ' (''*R" (''*ST @T&+ T>4 * @T' '* :P ' (''*R& ' (''*ST ' @TB/T * '@TB/T + * @T ' T>4:' >8A
84: >8A
84 I>P ' (''*R (''*S4: I>8A 84 >8A
84: >8A O>
4:' > 4:' >
4:' &+ >
4' &+ ' @8) M8 & @8 8 ++ *@8 8 ++ *@8 8 @8* , ( & 8>
4' >
4' @8 +8>4O
P ?+@ 8 N Q H # ' '* 6 $ (''* 6 N "#"
) F8A
? 3 & P ?+ A
P ' (''*@ 3 ?+(- ' ( P +' A
84 >8A 84' >4
-@T' , + * ' '* < O @P ' (''*R" (''*ST @T&+ T>4 * @T' '* :P ' (''*R& ' (''*ST ' @TB/T * '@TB/T + * @T ' T>4:' >8A
84: >8A
84 I>P ' (''*R (''*S4: I>8A 84 >8A
84: >8A + & A O>4:' > 4:' >
4:' &+ >
4 >L & A4: > 4 >L & A4: > 4 >4: >
4' &+ ' @8) M8 & @8 8 ++ *@8 8 ++ *@8 8
4' >
4' + * @8& '' 8 @8 +8>4:' > 4:' >
4:' &+ > 4 >L & A4: >4:' > 4:' >
4:' &+ >
4' &+ ' @8B1 8 & @8 8 + * @8 ' 8 & + @8EFBI 68> 4' >
4' &* + @8EC /28 @8 +8>4 + @8 '3+ B8> 3 * 'V I &3= +& ' H & 4: >4:' >
4:' > 4:' &+ > 4:& 3> 4: ' +>
4.3.3
Halaman Berita
Gambar 4.4 Halaman Berita
Gambar 4.4 akan muncul jika pengunjung ingin melihat berita-berita
yang ada. Halaman berita juga dilengkapi dengan pencarian. Dimana
pengunjung dapat melakukan pencarian berita berdasarkan kategori yang
ada.
Script
halaman untuk melakukan pencarian dan menampilkan data ini
adalah:
4O
+ 8, , < 8A & A
88 D
P, ' * @ + P(! N RT, ' * TS AP, ' , @ + P(! N RT,
' , TS A
84 + * @T+ -'T>% ' , = 8 <P, ' , <84: >8A
P ?+@ 8 N Q H # & ' ;7 P, ' * "% TMP, ' , MT 6 $
" (& ' 6 N 8A G
+ D
:: 8&8A
P ?+@ 8 N Q H # & ' 6 $ " (& ' 6 N "#" F 8A
G
? 3 & P ?+ A
P. + (& ' @ 3 ?+( ( P +' A
+ & A O>
4O
- P. + (& ' @@ D
8 , & ' 58A G
+ D
+ P ' (& ' @ 3 ?+(- ' ( P +' D
84' &+ ' @T) MT & @T T @T T>8A 84' >8A
84' >8A
84 1>P ' (& ' R. +(& ' S4: 1>8A
84 >6 ' + + = P ' (& ' R + S8 <8L & AL & AL & A8 <8 ** + = 8 < ' 8 9 9$8 ' ' ' P ' (& ' RT'*+(& ' TS <84: >8A
84 >8A
84 * @T& ' :P ' (& ' R& ( ' ST ' @T T * '@T)/ T + * @T+ -'T>8A
+ & ' ' , P ' (& ' RT (& ' TS TT A 84: >8A
84:' >8A 84:' >8
