D A S A R – D A S A R P E M R O G R A M A N W E B S I T E Menggunakan HT ML , PHP, dan MySQL
1). HTML adalah bahasa standar yang digunakan untuk
menyusun/membangun suatu halaman web.
Meskipun telah muncul software-software yang dapat digunakan
untuk membangun suatu
halaman web tanpa susah-susah memperhatikan struktur
HTML-nya, tidak ada salahnya
kalau HTML itu sendiri dipelajari. Manfaat yang diperoleh
apabila mempelajari HTML
selain mampu membangun halaman web, juga dapat dikembangkan
untuk pemrograman
web. Pemrograman web akan selalu terkait dengan HTML
tersebut. Pemrograman web
biasanya dikembangkan untuk membangun web yang dinamis.
Setiap homepage yang dikunjungi, pasti bisa dijumpai
HTML-nya yang selanjutnya disebut
SOURCE
.
A. Struktur HTML
Bahasa HTML (tag) dapat ditulis/dibuat melalui berbagai
macam word editor, misalnya
Notepad, Wordpad, PHP Designer 2005, dll. Tag-tag tersebut
dapat dituliskan dengan
huruf besar ataupun huruf kecil. Setelah tag HTML ditulis
dengan menggunakan
Notepad atau word editor yang lain, simpanlah file tersebut
dengan format file
nama_file.htm atau nama_file.html
Sebagai contoh, file HTML tersebut disimpan dengan nama
index.htm atau index.html
Adapun struktur HTML adalah sbb:
<HTML>
<HEAD>
<META>
<TITLE> ... </TITLE>
</HEAD>
<BODY>
...
</BODY>
HYPERTEXT MARKUP LANGUAGE (HTML)
By ITC Bidang Kemahasiswaan Universit as Negeri Semarang
1
</HTML>
Keterangan:
-
Tag HTML secara default dimulai dari <HTML> dan
diakhiri dengan </HTML>.
-
Tag <HEAD> ... </HEAD> merupakan tag kepala
sebelum badan. Tag kepala ini
akan terlebih dulu dieksekusi sebelum tag badan. Di dalam
tag ini berisi tag
<META> dan <TITLE>. Tag <META> merupakan
informasi atau header suatu
dokumen HTML. Atribut yang dimiliki oleh tag ini antara
lain:
-
HTTP_EQUIV, atribut ini berfungsi untuk menampilkan dokumen
HTML secara
otomatis dalam jangka waktu tertentu.
-
CONTENT, atribut ini berisi informasi tentang isi document
HTML yang akan
dipanggil.
-
NAME, atribut ini merupakan identifikasi dari meta itu
sendiri.
Tag <META> dalam suatu document HTML boleh ada maupun
tidak.
Sedangkan tag <TITLE> ... </TITLE> adalah tag
judul. Sebaiknya setiap halaman
web memiliki judul, dan judul tersebut dituliskan di dalam
<TITLE> ... </TITLE>.
Judul ini akan muncul dalam titlebar dari browser.
-
Sedangkan tag <BODY> ... </BODY> adalah tag
berisi content dari suatu halaman
web.
Setelah tag tersebut di atas ditulis, simpan dalam format
.htm atau .html (misal
index.htm) akan tetapi terlebih dahulu ubah
Save as type
ke dalam
All Files
.
Kemudian tentukan letak direktori mana file tersebut akan
disimpan, selanjutnya klik
Save
.
Selanjutnya document HTML tersebut dipanggil dengan browser
untuk melihat
hasilnya.
Dari tampilan pada browser di atas, dapat terlihat bahwa apa
yang ditulis pada
<TITLE> ... </TITLE> akan muncul pada titlebar
browser dan apa yang ditulis pada
<BODY> ... </BODY> akan muncul pada halaman web.
Untuk selanjutnya, kita hanya akan memperhatikan tag-tag
yang ada di dalam
<BODY> ... </BODY> karena bentuk tampilan/desain
web tergantung pada tag yang
ditulis di dalam <BODY> ... </BODY>.
B. Penyunting Text
Berikut ini berbagai macam tag yang dapat digunakan untuk
penyuntingan teks.
1. Heading
2. Garis horizontal
3. Teks miring
4. Teks tebal
5. Teks dengan garis bawah
6. Center
7.Center
8. Alignment (Rata kiri, tengah, kanan, justifikasi)
9. Jenis huruf
10. superscripts
11. Subscripts
12. List/daftar
Penjelasannya :
1. Heading
Fungsi: untuk membuat/memilih ukuran teks, umumnya untuk
judul karena
ukurannya yang besar.
Sintaks:
<H1> ... </H1>,
<H2> ... </H2>,
<H3> ... </H3>, s/d
<H6> ... </H6>
Ket: Semakin besar angka 1 s/d 6 maka semakin kecil ukuran
hurufnya.
Contoh:
<HTML>
<HEAD>
<TITLE>Penyuntingan teks dengan Heading</TITLE>
</HEAD>
<BODY>
<H1>Teks ini ditulis dengan H1</H1>
<H2>Teks ini ditulis dengan H2</H2>
</BODY>
</HTML>
Coba hasilnya Anda lihat di browser, selanjutnya bandingkan
apabila digunakan
<H3>...</H3>, <H4>...</H4>, dst.
<BODY>
<H1><I>Teks ini ditulis dengan H1 dan
miring</I></H1>
</BODY>
</HTML>
4. Teks tebal (bold)
Sintaks: <B> ... </B>
Contoh:
<HTML>
<HEAD>
<TITLE>Penyuntingan teks dengan bold</TITLE>
</HEAD>
<BODY>
<H1><B>Teks ini ditulis dengan H1 dan
bold</B></H1>
</BODY>
</HTML>
Apabila diinginkan suatu teks miring dan tebal, perhatikan
penulisan berikut ini.
<HTML>
<HEAD>
<TITLE>Penyuntingan teks dengan italic dan
bold</TITLE>
</HEAD>
<BODY>
<H1><I><B>Teks ini ditulis dengan H1,
miring dan tebal
</B></I></H1>
</BODY>
</HTML>
Penulisan <I>, <B> dan </I>, </B>
bisa dibolak-balik, misalnya
<I><B>Teks ini ditulis dengan H1, miring dan
tebal </B></I>
atau
<B><I>Teks ini ditulis dengan H1, miring dan
tebal </I></B>
atau
<I><B>Teks ini ditulis dengan H1, miring dan
tebal </I></B>
atau
<B><I>Teks ini ditulis dengan H1, miring dan
tebal </B></I>
5. Teks dengan garis bawah (underlined)
Sintaks: <U> ... </U>
Contoh:
<HTML>
<HEAD>
<TITLE>Penyuntingan teks dengan
underline</TITLE>
</HEAD>
<BODY>
<H1><U>Teks ini ditulis dengan H1 dan bergaris
bawah</U></H1>
</BODY>
</HTML>
Apabila suatu teks dengan gabungan sifat bold, italic, dan
underlined maka
penulisannya
<HTML>
<HEAD>
<TITLE>Penyuntingan teks dengan bold, italic, dan
bergaris bawah
</TITLE>
</HEAD>
<BODY>
<H1><I><B><U>Teks ini ditulis dengan
H1, bold, italic dan miring
</U></B></I></H1>
</BODY>
</HTML>
6. Center
Fungsi: membuat teks (tunggal) berada di tengah halaman
Sintaks: <center> ... </center>
Contoh:
<HTML>
<HEAD>
Struktur SWITCH adalah
Switch(kondisi)
case
konstanta1
:
pernyataan1;
break;
case
konstanta2 :
pernyataan2;
break;
case
konstanta3 :
pernyataan3;
break;
.
.
.
default
:
pernyataan default;
Keterangan:
Pernyataan1
akan dijalankan apabila dipenuhi
kondisi = konstanta1
,
demikian pula untuk
pernyataan2
dan
pernyataan3
. Sedangkan apabila tidak ada
konstanta yang memenuhi kondisi, maka yang akan dijalankan
adalah pernyataan
default
.
Perhatikan contoh script di bawah ini!
switch1.php
<?PHP
echo "<html><head><title>Contoh
Switch 1</title></head><body>";
echo "<a href=$PHP_SELF?op=link1>ini adalah
link1</a><br>";
echo "<a href=$PHP_SELF?op=link2>ini adalah
link2</a><br>";
echo "<a href=$PHP_SELF?op=link3>ini adalah
link3</a><br><br>";
switch ($op)
{
case "link1" :
c.
Do ... While ...
Sintaks:
DO
{
pernyataan1;
pernyataan2;
}
WHILE(kondisi);
Hampir sama dengan WHILE, namun perbedaannya adalah paling
tidak sekali
pernyataan1
,
pernyataan2
, dst akan dijalankan.
Hal ini karena pengecekan
kondisi
berada di akhir, beda halnya dengan WHILE sebelumnya. Pada
WHILE sebelumnya, sebelum masuk perulangan dicek dulu apakah
kondisinya
TRUE atau FALSE. Sedangkan pada DO ... WHILE, dikerjakan
dulu baru
dicek.
Contoh:
Pernyataan WHILE dari script sebelumnya juga dapat
dinyatakan sebagai DO
...
WHILE
loop3.php
<?PHP
echo "<html><head><title>Contoh DO...
WHILE</title></head><body>"; $j = 1;
do
{
echo "<font face=verdana size=$j>Teks ini
berukuran $j</font><br>"; $j++;
}
while($j<=7); echo
"</body></html>";
?>
D.
Modulasi
Modularisasi dalam pemrograman umum dilakukan dan sangat
diperlukan untuk
mempermudah debugging dan pengembangan program. Modularisasi
berarti
melakukan pembuatan program berdasarkan modul-modul. Modul
dapat berupa fungsi
maupun prosedur.
Dengan memiliki modul-modul ini diharapkan pemrogram dapat
dengan mudah dan
cepat mengembangkan aplikasi-aplikasi yang dibutuhkan.
Setiap kali ada modul
tambahan, pemrogram harus mengumpulkannya dalam suatu
library menjadi
semacam koleksi. Sehingga saat dibutuhkan pemrogram cukup
menggabung-
gabungkannya saja.
1.
Require
Require adalah suatu bentuk fungsi untuk menggabungkan suatu
script PHP atau
teks dari file lain dengan script PHP yang memanggilnya.
Script atau file yang
digabung tidak harus berisi script program PHP.
Teknik require cocok untuk membuat template yang memudahkan
proses
pengembangan aplikasi dengan menggunakan template. Pemrogram
dan desainer
web dapat dengan mudah melakukan kerja tim untuk membangun
suatu situs web.
Contoh:
Diinginkan tampilan untuk halaman web yang kita bangun
mempunyai konsistensi
pada layout, bahwa ada header dan footer, dan pada bagian
tengah ada isinya.
Untuk itu kita dapat membagi untuk bagian header dan footer
sebagai file tersendiri.
Setiap halaman yang akan ditampilkan dapat
memanggil/menggabungkan header
dan footer ini dengan menggunakan require.
Header.php
<html>
<head><title>Demo Require</title>
</head>
<body>
<h1>Judul</h1>
Ini adalah contoh penggunaan require<BR>
Footer.php
<p> </p>
<hr>
<small>Copyright 2003 - By CV. Benang
Ruwet</small>
</body>
</html>
isi.php
<?PHP
Require "header.php";
?>
<hr>
Selamat Datang
<p>
Bagian ini merupakan bagian isi I</p>
<a href=isi2.php>Klik di sini</a>
<?PHP
Require "footer.php";
?>
isi2.php
<?PHP
Require "header.php";
?>
<hr>
Selamat Datang
<p>
Bagian ini merupakan bagian isi II</p>
<a href=isi.php>Klik di sini</a>
<?PHP
Require "footer.php";
?>
2.
Include
Sintak : include(“header.php”);
isi3.php
<?PHP include ("header.php"); ?>
<hr>
Selamat Datang
<p>
Bagian ini merupakan bagian isi III</p>
<a href=isi.php>Klik di sini</a>
<?PHP include ("footer.php");
?>
Lalu enter, maka akan muncul ucapan selamat datang di MySQL monitor.
Setelah muncul, kita tinggal menggunakan bahasa MySQL untuk
melakukan
pengelolaan database tersebut.
Sedangkan untuk OpenSUSE cara menjalankan nya sebagai
berikut :
Klik START > Applications > System > Terminal
Konsole;
Maka akan muncul jendela konsole seperti pada gambar;
Pada konsole ketikkan
simawa:~# mysql -uroot
Lalu tekan enter, maka akan muncul ucapan selamat datang di
MySQL monitor
seperti gambar diatas.
Setelah muncul, kita tinggal menggunakan bahasa MySQL untuk
melakukan
pengelolaan database tersebut.
B.
Pengelolaan MySQL
Database berfungsi sebagai tempat penyimpanan data, sehingga
pengelolaan yang
dilakukan juga berkaitan dengan penyimpanan data yang
meliputi : memasukkan data,
mengubah data, menampilkan data, dan menghapus data. Sebelum
kita melakukan
pengelolaan data, tentunya kita harus merancang dahulu
database serta atribut –
atribut penyimpanan yang meliputi : pembuatan databases,
pembuatan tabel,
pembuatan query, penambahan query, hingga pemilihan
database. Berikut kami
jelaskan secara sederhana :
1.
Perancangan Database
a.
Membuat Database
Dalam setiap server dimungkinkan memiliki database lebih
dari satu, misalkan
database bem_km, database bem_fmipa, database bem_fip
dansebagainya.
Cara membuat database-database tersebut kita gunakan script
:
mysql > CREATE DATABASE bem_km;
Cobalah anda buat database sesuai dengan lembaga
masing-masing
b.
Memilih Database
Setelah database dibuat, selanjutnya adalah memilih dan
masuk dalam sistem
database yang telah kita buat. Untuk masuk ke dalam database
script yang
digunakan adalah :
mysql > USE bem_km;
Nah sekarang kita telah masuk ke dalam database bem_km.
c.
Membuat Tabel
Setelah kita masuk ke dalam suatu database, selanjutnya kita
membuat tabel.
Didalam tabel terdapat query, query berisi komponen –
komponen data,
misalkan tabel data_anggota dengan query (komponen) : No,
nama anggota,
nim anggota, alamat anggota, email anggota.
Tabel . Data anggota
No.
NAMA
NIM
ALAMAT
EMAIL
*)
*)
*)
*)
*)
*)
*)
*)
*)
*)
Keteranngan :
*) Data – data
Ketika membuat sebuah tabel, kita juga harus memberikan
query di dalam tabel.
Cara membuat tabel di dalam database menggunakan script :
mysql > CREATE DATABASE data_anggota (
-->no int(255) not null auto_increment,
-->nama varchar(200),
-->nim int(13),
-->alamat text,
-->email varchar(200),
-->primary key(no));
Dari script diatas kita lihat terdapat tipe data
int(13),text,varchar(200). Int
merupakan tipe data integer dengan banyaknya bilangan
sebanyak 13 bilangan.
Text, merupakan tipe data text dengan maksimum data tidak
dibatasi berapa
karakter. Sedangkan varchar merupakan tipe data karakter
dengan pembatasan
maksimal sejumlah 200 karakter saja yang dapat disimpan.
Script not null berarti query tersebut tidak diperkenankan
kosong, harus terdapat
data didalamnya, sedangkan auto_increment merupakan
penomoran otomatis
oleh MySQL.
d.
Merubah Query
Terkadang kita ingin menambahkan satu query didalam tabel
yang telah kita
buat sebelumnya. Cara menambahkannya menggunakan script :
mysql > ALTER TABLE data_anggota ADD tanggal_lahir text
AFTER email;
Dengan menggunakan ini MySQL akan menambahkan satu query
dengan
variabel tanggal_lahir dan ditempatkan setelah query email.
e.
Melihat database dan tabel
Untuk melihat database-database yang ada di server kita,
digunakan script :
mysql > SHOW DATABASES;
Untuk melihat tabel-tabel yang ada di database kita,
digunakan script :
mysql > SHOW TABLES;
2.
Pengelolaan Data
a.
Memasukkan data
untuk memasukkan data ketiklah script berikut :
mysql > INSERT INTO data_anggota (nama,nim,alamat,email,tanggal_lahir)
--> VALUES ('Heri Siswanto Bayu Nugroho',
--> '257523536', 'Banaran, Sekaran, Semarang',
'hsbn89@yahoo.co.id
',
--> '13 Juni 1989',);
b.
Menampilkan data
Untuk menampilkan data ketik script berikut :
mysql > SELECT*FROM data_anggota;
Maka akan muncul data seperti berikut :
c.
Mencari data
Untuk mencari data ketik script berikut :
mysql > SELECT*FROM data_anggota WHERE email like
--> 'hsbn89@yahoo.co.id';
Diatas merupakan script yang digunakan untuk mencari data
anggota yang
memiliki alamat email
hsbn89@yahoo.co.id
.
d.
Merubah data
Untuk merubah data yang telah ada digunakan script :
mysql > UPDATE data_anggota SET email =
'hsbn89@plasa.com'
--> WHERE no like '1';
script diatas digunakan untuk mengganti data query email yang
semula datanya
berisi
hsbn89@yahoo.co.id
kemudian diganti dengan email
hsbn89@plasa.com
sedangkan script WHERE no like '1' digunakan untuk mencari
data mana yang
akan di ganti.
e.
Menghapus data
Untuk menghapus data digunakan script :
mysql > DELETE TABLE data_anggota WHERE no like '1';
C.
PHP MySQL
Dalam PHP telah tersedia fungsi untuk melakukan koneksi ke
MySQL.
Sintaks:
mysql_connect("host","username","password");
fungsi tersebut akan mereturn/mengembalikan nilai TRUE jika
koneksi ke MySQL
sukses dan akan mengembalikan nilai FALSE jika koneksi
gagal.
Selanjutnya apabila koneksi telah berhasil, langkah
berikutnya adalah memilih
database yang diperlukan.
Sintaks:
mysql_select_db("nama database");
Seperti halnya fungsi koneksi sebelumnya, fungsi select db
juga akan mengembalikan
nilai TRUE jika nama database ditemukan dan FALSE bila
database yang diinginkan
tidak ditemukan.
Fungsi lain yang diperlukan untuk mengakses database adalah
mysql_query. Fungsi
tersebut adalah untuk menjalankan query yang kemudian akan
diolah sehingga akan
dihasillkan data yang berkaitan dengan query tadi.
Sintaks:
$hasil = mysql_query("pernyataan query");
Fungsi tersebut akan menghasilkan nilai TRUE jika query
sukses dijalankan. FALSE
jika query gagal dilakukan.
Apabila query yang diberikan berkaitan dengan pencarian
record data, maka
selanjutnya hasil pencarian record tersebut diambil untuk
kemudian di tampilkan
sebagai output.
Untuk mengambil record dari query, digunakan fungsi
fetch_row.
Sintaks:
$array_hasil = mysql_fetch_row($hasil);
Fungsi di atas dihasilkan suatu array, dimana masing-masing
elemen dari array
berkaitan dengan field pada database tersebut.
Contoh script:
Di bawah ini adalah script untuk membuat buku tamu dengan
menggunakan database.
Script dibagi menjadi 3 pengelolaan, yaitu.
1.
Script untuk memasukkan input ke dalam database.
2.
Script untuk melihat database
3.
Script untuk
mengedit
masukan dalam database.
Sebelumnya, terlebih dahulu Anda buat modul untuk fungsi
koneksi ke database.
Misal nama database nya adalah
guestbook
. Hostnya adalah
localhost
. Username
adalah
root
. Passwordnya kosong. Maka file modul untuk koneksi adalah
sbb:
<?PHP
mysql_connect("localhost","root","");
mysql_select_db("bem_unnes");
?>
atau
<?PHP
$nama_host = "localhost";
$nama_user = "root";
$password = "";
$nama_db = "guestbook";
mysql_connect($nama_host,$nama_user,$password);
mysql_select_db($nama_db);
?>
Kemudian anda simpan modul tersebut sebagai file
koneksi.php
1.
Script untuk memasukkan input ke database.
input.php
<?PHP
If ($submit)
{
include "koneksi.php";
$query = "INSERT INTO
bukutamu(nama,alamat,email,komentar) VALUES
('$nama','$alamat','$email','$komentar')";
$hasil = mysql_query($query);
if ($hasil)
{
echo "Input data sukses";
}
else
{
echo "Input data gagal";
}
}
else
{
echo "<form method=post action=$PHP_SELF>";
echo "Nama : <input type=text
name=nama><br>";
echo "Email : <input type=text
name=email><br>";
echo "Alamat : <input type=text
name=alamat><br>";
echo "Komentar : <textarea
name=komentar></textarea><br>";
echo "<input type=submit name=submit value=Kirim>
<input type=reset name=reset value=Hapus>";
echo "</form>";
}
?>
2.
Script
untuk
melihat data yang ada dalam database
lihat.php
<?PHP
include "koneksi.php";
$query = "SELECT nama,alamat,email,komentar FROM bukutamu";
$hasil = mysql_query($query);
echo "Daftar Buku
Tamu<BR><HR><BR>";
while($data = mysql_fetch_row($hasil))
{
echo "Nama : $data[0]<br>";
echo "Alamat : $data[1]<br>";
echo "E-mail : $data[2]<br>";
echo "Komentar :
$data[3]<br><hr><br>";
}
?>
3.
Script untuk menghapus dan mengedit data
Terlebih dahulu kita rancang tampilannya. Misal tampilan
diinginkan seperti berikut
ID
NAMA
KOMENTAR
STATUS
Tidak ada komentar:
Posting Komentar