ela lisnayati: 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>

</HEAD>

<BODY>

...

</BODY>

HYPERTEXT MARKUP LANGUAGE (HTML)

By ITC Bidang Kemahasiswaan Universit as Negeri Semarang

</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

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" :

Do ... While ...

Sintaks:

{

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;

{

echo "<font face=verdana size=$j>Teks ini berukuran $j</font><br>"; $j++;

}

while($j<=7); echo "</body></html>";

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.

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

<hr>

</body>

</html>

isi.php

<?PHP

Require "header.php";

<hr>

Selamat Datang

<p>

Bagian ini merupakan bagian isi I</p>

<?PHP

Require "footer.php";

isi2.php

<?PHP

Require "header.php";

<hr>

Selamat Datang

<p>

Bagian ini merupakan bagian isi II</p>

<?PHP

Require "footer.php";

Include

Sintak : include(“header.php”);

isi3.php

<?PHP include ("header.php"); ?>

<hr>

Selamat Datang

<p>

Bagian ini merupakan bagian isi III</p>

<?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.

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 :

Perancangan Database

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

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.

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

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.

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.

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;

Pengelolaan Data

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',);

Menampilkan data

Untuk menampilkan data ketik script berikut :

mysql > SELECT*FROM data_anggota;

Maka akan muncul data seperti berikut :

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

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.

Menghapus data

Untuk menghapus data digunakan script :

mysql > DELETE TABLE data_anggota WHERE no like '1';

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.

Script untuk memasukkan input ke dalam database.

Script untuk melihat database

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

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>";

}

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>";

}

Script untuk menghapus dan mengedit data

Terlebih dahulu kita rancang tampilannya. Misal tampilan diinginkan seperti berikut

NAMA

KOMENTAR

STATUS

ela lisnayati

Selasa, 24 September 2013

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

Tidak ada komentar:

Posting Komentar

Mengenai Saya