Scribd
Unggah
445 tayangan

Dasar HTML

Dokumen tersebut membahas tentang pengenalan dasar HTML dan tag-tag dasar yang digunakan untuk membuat struktur halaman web seperti tag <html>, <head>, <title>, <body>, serta tag-tag untuk memformat teks seperti <b>, <i>, <u>. Dokumen tersebut juga menjelaskan penggunaan atribut pada tag <body> untuk mengatur warna latar belakang dan tag <font> untuk mengatur ukuran dan warna huruf.

Diunggah oleh

Putra Petir
Hak Cipta
© Attribution Non-Commercial (BY-NC)
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOC, PDF, TXT atau baca online di Scribd
445 tayangan

Dasar HTML

Dokumen tersebut membahas tentang pengenalan dasar HTML dan tag-tag dasar yang digunakan untuk membuat struktur halaman web seperti tag <html>, <head>, <title>, <body>, serta tag-tag untuk memformat teks seperti <b>, <i>, <u>. Dokumen tersebut juga menjelaskan penggunaan atribut pada tag <body> untuk mengatur warna latar belakang dan tag <font> untuk mengatur ukuran dan warna huruf.

Diunggah oleh

Putra Petir
Hak Cipta
© Attribution Non-Commercial (BY-NC)
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOC, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 47

Pemrograman Web I Halaman : 1

Web dan Pemrograman HTML Dasar

HTTP (hypertext transfer protocol) merupakan protokol yang digunakan untuk


mentransfer data antara web server ke web browser. Protokol ini mentransfer dokumen-
dokumen web yang ditulis atau berformat HTML (Hypertext Markup Language). Dikatakan
Markup Language karena HTML berfungsi untuk ‘memperindah’ file teks biasa untuk
ditampilkan pada program web browser. Hal ini dilakukan dengan menambahkan tag-tag
(perintah khusus) pada file teks biasa tersebut.
Tag HTML biasa berupa tag-tag yang berpasang-pasangan dan ditandai dengan
simbol < dan >. Pasangan atau’penutup perintah’ dari sebuah tag ditandai dengan tanda ’ / ’.
Misalnya pasangan dari tag <contoh> adalah </contoh>.
Semua Tag-tag HTML bersifat dinamis, artinya kode HTML tidak dapat dijadikan
sebagai file Executable program. Hal ini disebabkan HTML hanyalah sebuah bahasa
Scripting yang dapat berjalan apabila dijalankan di dalam browser.

Struktur Dokumen HTML


Setiap dokumen atau halaman HTML memiliki struktur atau susunan file sebagai
berikut :

<HTML>

<HEAD>
<TITLE> Judul yang akan muncul pada title bar web browser </TITLE> Header HTML
</HEAD>

<BODY> Isi HTML yang


Text, gambar, atau apapun yang ingin Anda tampilkan pada ditampilkan oleh
dokumen Anda ada pada bagian ini. Browser
</BODY>

</HTML>

Pada Tag HEAD memiliki Elemen yang berguna untuk memberikan informasi yang
berhubungan dengan halaman Web HTML tersebut. Tag yang digunakan untuk
mendefinisikan informasi halaman Web tersebut adalah META dengan penggunaan
seperti berikut :

<META Atribut = “Value”>

Atribut yang digunakan di dalam Tag META :

Atribut Value Keterangan


Name Text Digunakan untuk mendeklarasikan kedudukan pengisi,
misalnya “Programmer”
Content Text Menjelaskan dari judul yang dideklarasikan pada Atribut
Name
http-equiv Text Untuk mendeklarasikan Atribut Server HTTP

Contoh Penggunaan Meta di dalam aplikasi web yang berkaitan dengan


programmernya (pembuat programnya) :

<meta name=”programmer” content=”perie bagoes handoko”>

AMIK Profesional Dosen : Perie Bagoes Handoko


Pemrograman Web I Halaman : 2

Latihan : Mengenal Struktur HTML


Ketikan baris-baris diatas dengan Notepad pada sebuah file baru dengan nama
Latihan1.HTML lalu disimpan. Jalankan Browser Anda dan buka file di atas melalui File-
Open.
Hasilnya akan terlihat seperti pada gambar berikut :
Hasil dari Tag <Title> ….. </Title>

Hasil dari Tag


<BODY>…..
</BODY>

Seperti terlihat, struktur file HTML diawali dengan sebuah tag <html> dan ditutup
dengan tag </html>. Di dalam tag ini terdapat dua buah bagian besar, yaitu yang diapit oleh
tag <head> …… </head> dan tag <body> ……. </body>.

Bagian pertama, yang diapit oleh tag HEAD merupakan header dari halaman HTML
dan tidak ditampilkan pada browser. Bagian ini berisi tag-tag header seperti <title> …..
</title> yang berfungsi untuk mengeluarkan judul pada title bar window web browser.
Bagian kedua, yang diapit oleh tag BODY merupakan bagian yang akan ditampilkan
pada halaman web browser nantinya. Pada bagian ini Anda akan menuliskan semua jenis
informasi berupa teks dengan bermacam format maupun gambar yang ingin Anda sampaikan
pada pengguna nantinya.

Tag Heading
Tag pertama yang akan kita pelajari adalah tag heading yang berfungsi untuk memformat
heading (judul dan sub judul) dari sebuah halaman web. Heading ini akan memperbesar
ukuran huruf untuk setiap jenis heading. Ada tujuh buah heading yang dikenal di HTML,
yaitu :

Tag pembuka Tag penutup Nama Fungsi


<H1> </H1> Heading 1 Judul Besar
<H2> </H2> Heading 2 Sub Judul 1
<H3> </H3> Heading 3 Sub Judul 2
<H4> </H4> Heading 4 Sub Judul 3
<H5> </H5> Heading 5 Sub Judul 4
<H6> </H6> Heading 6 Sub Judul 5
<H7> </H7> Heading 7 Sub Judul 6

AMIK Profesional Dosen : Perie Bagoes Handoko


Pemrograman Web I Halaman : 3

Latihan : Mengenal Heading


<HTML>

<HEAD>
<TITLE> Latihan menggunakan tag heading </TITLE>
</HEAD>

<BODY>
<H1> Produk PT Maju Terus </H1>
Berikut ini adalah produk yang terdapat oleh PT Maju Terus.

<H2> Komputer </H2>


Pentium II, Pentium 200, Pentium 100, Pentium 75

<H2> Asesori </H2>


Disket 1.44M, Cartridge 100 M Rp 100.000.

<H2> Printer </H2>


HP Laserjet III Rp. 2.000.000, HP Deskjet 500 Rp. 1.500.000,
HP Deskjet 600C Rp. 1.900.000.

</BODY>

</HTML>

Tampilan pada Browser :

AMIK Profesional Dosen : Perie Bagoes Handoko


Pemrograman Web I Halaman : 4

Tag Body
Sintak dari Tag Body adalah :

<body atribut=”value”>…isi…</body>

Atribut yang digunakan di dalam Tag BODY adalah :

Atribut Value Keterangan


Bgcolor #000000-#ffffff Untuk menentukan warna background
Background File gambar Membuat background gambar
Text #000000-#ffffff Warna pada text pada seluruh halaman
Link #000000-#ffffff Warna hyperlink
Vlink #000000-#ffffff Warna link yang telah dikunjungi
Alink #000000-#ffffff Warna link yang aktif
Leftmargin 0-n Mengatur jarak margin kiri halaman
Topmargin 0-n Mengatur jarak margin atas halaman
Marginwidth 0-n Mengatur jarak lebar margin halaman
marginheight 0-n Mengatur jarak tinggi marginhalaman

Contoh pewarnaan background :

<html>

<head>
<title> Contoh Background Hijau </title>
</head>

<body bgcolor=”Green”>
pewarnaan halaman depan warna hijau
</body>

</html>

Sintak pewarnaan pada link :

<body link=”warna” vlink=”warna” alink=”warna”>

Tabel Warna Standar yang sering digunakan

Warna Kode Hexadesimal


Putih #FFFFFF
Kuning #FFFF66
Merah #FF0000
Abu-Abu #CC9999
Biru #0000FF
Hijau #00FF00
Hitam #000000
Terong #CC33FF
Biru Muda #00CCFF

AMIK Profesional Dosen : Perie Bagoes Handoko


Pemrograman Web I Halaman : 5

Memformat Text
Tag yang digunakan untuk melakukan pengaturan text

Tag Keterangan
<B> Membuat huruf tebal Latihan Memformat Text
<I> Membuat huruf miring
<U> Membuat huruf bergaris bawah <html>
<Head>
<S> Membuat huruf dicoret
<Title> Format Halaman </Title>
<SUB> Membuat huruf menjorok ke
</head>
bawah
<body>
<SUP> Membuat huruf menjorok ke atas
<b> ini huruf tebal </b> <br>
<Center> Rata Tengah
<i> ini huruf miring </i> <br>
<BR> Ganti Baris <u> ini huruf bergaris bawah </u> <br>
<P> Pindah 2 Baris Selanjutnya <s> ini huruf dicoret </s> <br>
H<sub>2</sub>O<br>
8 adalah hasil dari 2<sup>3</sup>
</body>
</html>

Menentukan Ukuran Huruf dan Warna


HTML menyediakan sebuah Tag <Font….> yang di dalamnya kita dapat
mendeklarasikan warna huruf dan ukuran.

Atribut yang digunakan di dalam Tag <FONT>

Atribut Value Keterangan


SIZE 1-7 jika lebih besar ditambah tanda (+) Menentukan besar ukuran
Contoh (+4) karakter/huruf
COLOR #00000 Menentukan warna karakter/huruf
FACE Font Menentukan Font yang digunakan

Rumus Tag HTML nya adalah :

<FONT SIZE=”Value” COLOR=”Warna” FACE=”Huruf”>

Tag List
Tag <LI> digunakan untuk menampilkan informasi dalam bentuk daftar (list). Ada
dua jenis daftar yang dikenal di HTML, yaitu daftar format bullet (bulleted list) dan dalam
bentuk nomor (ordered list). Untuk masing-masing jenis list ini diperlukan tambahan tag
yang berbeda, yaitu tag <UL> dan <OL>.
Berikut adalah beberapa daftar Tag yang digunakan dalam pembuatan list:

AMIK Profesional Dosen : Perie Bagoes Handoko


Pemrograman Web I Halaman : 6

Tag Atribut Value Keterangan


<UL> TYPE SQUARE Bulat kotak
DISC Bulat titik
CIRCLE Bulat lingkaran
<OL> TYPE I Huruf besar romawi
I Huruf kecil romawi
A Huruf besar
A Huruf kecil
<OL> START n Nilai awal penomor

Selain menggunakan sintaks di atas Anda juga dapat menggunakan beberapa sintaks yang
menghasilkan output yang sama. Sintaks itu adalah :

<MENU> <MENU>
<LI> Daftar 1</LI> Daftar 1<BR>
<LI> Daftar 2</LI> Daftar 2<BR
</MENU> </MENU>

Apabila ingin menghilangkan semua koda daftar/list yang ada, maka Tag yang digunakan
adalah
<DL> sebagai pengganti Tag <UL>
<DD> sebagai pengganti Tag <LI>

Latihan : Mengenal List


<HTML>

<HEAD>
<TITLE> Latihan menggunakan tag heading </TITLE>
</HEAD>

<BODY>
<H1> Produk PT Maju Terus </H1>
Berikut ini adalah produk yang terdapat oleh PT Maju Terus.
<H2> Komputer </H2>
<OL>
<LI> Pentium IV
<LI> Pentium III
<LI> Pentium II
</OL>
<H2> Asesori </H2>
<MENU>
<LI> Disket 1.44M
<LI> Cartridge 100 M Rp 100.000.
</MENU>
<H2> Printer </H2>
<UL>
<LI> HP Laserjet III Rp. 2.000.000
<LI> HP Deskjet 500 Rp. 1.500.000
<LI> HP Deskjet 600C Rp. 1.900.000.
</UL>
</BODY>

</HTML>

AMIK Profesional Dosen : Perie Bagoes Handoko


Pemrograman Web I Halaman : 7

Tag gambar
Anda dapat menampilkan gambar pada halaman HTML Anda jika Anda memiliki file
gambarnya yang berformat GIF atau JPG. Untuk menampilkan gambar dapat digunakan tag
IMG. Format tag ini agak berbeda dengan tag yang telah kita pelajari sebelumnya, yaitu :
<IMG SRC=nama_file_gambar>

tag ini tidak memiliki penutup tetapi memiliki sesuatu di dalamnya yang disebut dengan
parameter. Parameter yang terlihat di atas dan yang harus disertakan untuk setiap
pemanggilan tag IMG adalah parameter SRC. Parameter ini berfungsi untuk menentukan
nama file gambar yang akan ditampilkan di browser. Nama file ini harus lengkap dengan path
relatif terhadap halaman yang memanggilnya maupun absolut tempat dia berada pada web
server.

Latihan : Menggunakan Tag Gambar


<HTML>
<HEAD>
<TITLE> Latihan menggunakan tag heading </TITLE>
</HEAD>
<BODY>
<IMG SRC=logo.jpg>
<H1> Produk PT Maju Terus </H1>
Berikut ini adalah produk yang terdapat oleh PT Maju Terus.
<H2> Komputer </H2>
<DL>
<DD><img src=”bundar.gif”> Pentium II
<DD> <img src=”bundar.gif”>Pentium 200
<DD> <img src=”bundar.gif”>Pentium 100, Pentium 75
</DL>
<H2> Asesori </H2>
<OL>
<LI> Disket 1.44M
<LI> Cartridge 100 M Rp 100.000.
</OL>
<H2> Printer </H2>
<UL>
<LI> HP Laserjet III Rp. 2.000.000
<LI> HP Deskjet 500 Rp. 1.500.000
<LI> HP Deskjet 600C Rp. 1.900.000.
</UL>
</BODY>
</HTML>

Pada tag IMG ini kita dapat mendefinisikan beberapa parameter seperti :

Paramete Fungsi Isi


r
BORDER Menentukan ukuran garis pinggir gambar 0,1,2,…… (pixel)
jika dijadikan hypertext
WIDTH Menentukan ukuran lebar tabel Dapat dalam % ukuran
layar, atau dalam pixel
HEIGHT Menentukan ukurang tinggi tabel Dapat dalam % ukuran
layar, atau dalam pixel
ALT Menentukan teks yang akan muncul di Teks
browser saat gambar belum terdownload
HSPACE Menentukan ukuran spasi antar gambar 0,1,2,….(Pixel)
dengan text dalam arah horizontal

AMIK Profesional Dosen : Perie Bagoes Handoko


Pemrograman Web I Halaman : 8

VSPACE Menentukan ukuran spasi antar gambar 0,1,2,….(Pixel)


dengan text dalam arah vertikal
Membuat Animasi Marquee
Marquee adalah sebuah bentuk animasi text sederhana yang dapat diciptakan oleh
HTML. Sintaks yang digunakan adalah :

<marquee atribut=””>….text….</marquee>

Atribut dalam animasi marquee

Atribut Value Keterangan


Behavior Alternate Text bergerak ke kanan / ke kiri
Scroll Text bergerak terus menerus
Slide Text bergerak sekali
direction Left Kiri
Top Atas
Down Bawah
Right Kanan
Loop N Perulangan yang bernilai n
Bgcolor color Untuk warna latar belakang

Latihan : Menggunakan Tag Marquee


<HTML>
<HEAD>
<TITLE>Membuat Animasi Marquee</TITLE>

</HEAD>
<BODY>
<MARQUEE behavior="alternate" bgcolor="#0099FF" >ANIMASI
MARQUEE(ALTERNATE)</MARQUEE><br><br>
<MARQUEE behavior="scroll" bgcolor="#0099FF" direction="left">ANIMASI
MARQUEE(SCROLL)</MARQUEE><br><br>
<MARQUEE behavior="slide" bgcolor="#0099FF" >ANIMASI
MARQUEE(SLIDE)</MARQUEE><br><br>
</BODY>
</HTML>

AMIK Profesional Dosen : Perie Bagoes Handoko


Pemrograman Web I Halaman : 9

Menciptakan Garis Horizontal


Sebagai pembatas antara judul dengan isi, kita dapat menggunakan garis dalam
HTML. Disediakan Tag fungsi yang berguna untuk menciptakan garis dengan posisi
horizontal. Untuk membuatnya menggunakan Tag HR (Horizontal Row). Bentuk sintaksnya
adalah :

<hr atribut=””>

Dari Sintaks di atas dapat dijelaskan mengenai atribut yang dapat digunakan adalah :

Atribut Value Keterangan


SIZE N Ukuran garis
COLOR Color Warna garis
ALIGN Left, Right Letak posisi garis
WIDTH Length Lebar garis

Latihan : Script Garis


<html>
<head>
<title>membuat animasi garis</title>
</head>

<body>
<h1 align=”right”>Kuis Siapa Dia</h1>
<hr align=”right” width=”60% color=”#ff0000” size=”3”>
<div align=”right”>adalah kuis yang saya sukai</div>
</body>
</html>

Tampilan pada Browser :

AMIK Profesional Dosen : Perie Bagoes Handoko


Pemrograman Web I Halaman : 10

Link
Kemampuan web untuk dapat melompat ke halaman lain atau ke alamat Internet
(URL) lain merupakan salah satu fasilitas yang sangat istimewa karena dapat sangat
memudahkan pencarian informasi di Internet. Sifat ini disebut hyperlink dan teks atau gambar
yang dapat kita klik untuk menuju suatu halaman atau alamat tertentu disebut hypertext.
Untuk membuat hypertext ke halaman atau alamat URL lain digunakan tag sebagai
berikut :
<A HREF=URL_Tujuan> hypertext </A>

URL_tujuan dapat berupa nama file yang akan dibuka setelah hypertext diklik oleh
pengguna, maupun URL dari sebuah halaman yang ada di Internet.

Latihan : Menggunakan Link


Buka file Latihan4.HTML lalu beri nama Latihan5.HTML. ketikkan baris-baris tambahan
berikut ini :
<HTML>

<HEAD>
<TITLE> Latihan menggunakan Link </TITLE>
</HEAD>

<BODY>
<IMG SRC=logo.jpg>

<H1> Produk PT Maju Terus </H1>


Berikut ini adalah produk yang terdapat oleh PT Maju Terus.

<H2> Komputer </H2>


<OL>
<LI> <A HREF=http://www.compaq.com> Compaq Pentium II </A>
<LI> <A HREF=http://www.hp.com> HP Pentium 200 </A>
<LI> <A HREF=http://www.acer.com> Acer Pentium 100 </A>
</OL>

<H2> Asesori </H2>


<OL>
<LI> Disket 1.44M
<LI> Cartridge 100 M Rp 100.000.
</OL>

<H2> Printer </H2>


<UL>
<LI> HP Laserjet III Rp. 2.000.000
<LI> HP Deskjet 500 Rp. 1.500.000
<LI> HP Deskjet 600C Rp. 1.900.000.
</UL>

</BODY>
</HTML>

AMIK Profesional Dosen : Perie Bagoes Handoko


Pemrograman Web I Halaman : 11

Tampilan pada Browser :

Link dapat juga terjadi ke halaman lain pada server yang sama. Untuk ini parameter HREF
cukup diisikan nama file HTML tujuan yang ingin Anda buka. Contohnya :
<A HREF=disket.html> Disket 1.44MB </A>

Tag ini akan menyebabkan jika Anda mengklik teks “Disket 1.44 MB” browser akan
membuka file DISKET.HTML pada direktori yang sama dengan file yang memanggil tag ini.

Link pada Satu Halaman


Link dapat juga terjadi dokumen yang sama, terutama jika dokumen itu terdiri atas
banyak halaman yang menyulitkan pengguna untuk membacanya. Link pada satu dokumen
ini dapat diibaratkan sebagai daftar isi dari dokumen tersebut.

Untuk membuat link pada satu halaman, digunakan kombinasi tag

<A NAME=tujuan1>…….</A>

dengan tag

<A HREF=#tujuan1>……</A>

Contohnya jika Anda memiliki bagian dokumen sebagai berikut :


<H2> <A Name=bab2> BAB 2 Pembibitan </A> </H2>

maka bagian lain pada dokumen Anda dapat membuat link ke bagian di atas dengan tag
sebagai berikut :

detail mengenai pembibitan dapat dilihat pada <A HREF=#bab2> Bab 2 </A>

AMIK Profesional Dosen : Perie Bagoes Handoko


Pemrograman Web I Halaman : 12

Link pada Suatu Gambar


Link dapat pula kita buat bukan hanya pada teks, namun juga pada gambar. Untuk
melakukan ini, gunakan tag sebagai berikut :

<A HREF=url_tujuan> <IMG SRC=gambar.jpg> </A>

Tabel HTML
Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri
atas baris dan kolom. Untuk menampilkan data dalam bentuk tabel pada HTML, digunakan
tag <TABLE>………</TABLE>.
Tag ini berisi tag :
<TR>…….</TR> untuk menentukan baris (table row)
<TD>…….</TD> untuk menampilkan data pada setiap sel tabel (table data).

Struktur tag ini adalah sebagai berikut :

<TABLE atribut=”Value”>
<TR>
<TD> atribut=”Value”>……ISI…..</TD>
…………..
</TR>
……………
……………
</TABLE>

Atribut pada Tag <TABLE>

Atribut Keterangan
Align Digunakan untuk meratakan tabel ke kiri, ke tengah, ke kanan atau kanan-
kiri, align dapat bernilai left, center, right atau justify
Border Border digunakan untuk mengatur ketebalan garis pembatas antar sel
Width Digunakan untuk menentukan lebar tabel dengan nilai persen (%)
Cellspacing Digunakan untuk menyatakan jarak (spasi) antar sel satu dengan lainnya
serta antar sel dengan batas tabel.
Cellpading Untuk menyatakan jarak (spasi) antara isi sel dengan batas sel (border)
Bgcolor Menunjukkan warna background untuk semua cell pada tabel
Bordercolor Digunakan untuk membuat warna pada garis/border

Atribut pada Tag <TR>

Atribut Keterangan
Align Dapat bernilai left, center, right atau justify. Digunakan untuk melakukan
perataan tabel
Valign Digunakan untuk melakukan perataan yang bersifat horizontal
(alignment)
Bgcolor Menunjukkan warna background pada batas (row)

AMIK Profesional Dosen : Perie Bagoes Handoko


Pemrograman Web I Halaman : 13

Latihan : Menggunakan Tabel


<html>
<head>
<title>Belajar Tabel</title>
</head>

<BODY>
<TABLE Border=”2” BorderColor=”Red”>
<TR>
<TD Bgcolor=”green”>Kolom 1</TD>
<TD Bgcolor=”green”>Kolom 2</TD>
<TD Bgcolor=”green”>Kolom 3</TD>
</TR>
<TR>
<TD>cel</TD>
<TD>cel</TD>
<TD>cel</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Merger Cell
Digunakan untuk menggabungkan antar cell. Atribut yang digunakan adalah :
 Rowspan : digunakan untuk menggabungkan antara baris, jika akan menggabungkan
3 baris maka Rowspan kita beri nilai 3.
 Colspan : digunakan untuk menggabungkan kolom dengan kolom. Cara penggunaan-
nya sama dengan atribut Rowspan.

Sintaksnya adalah :

<TABLE>
<TR>
<TD COLSPAN=”Value”>Merger</TD>
</TR>
<TR>
<TD> Cell 1</TD>
<TD> Cell 2</TD>
</TR>
</TABLE>

Latihan : Menggunakan Merge Cell


<HTML>
<HEAD>
<TITLE>Belajar Tabel</TITLE>
</HEAD>
<BODY>

AMIK Profesional Dosen : Perie Bagoes Handoko


Pemrograman Web I Halaman : 14

<TABLE Border=”1”>
<TR>
<TD RowSpan=”2”>Daftar</TD>
<TD ColSpan=”2”>Nama Teman</TD>
</TR>
<TR>
<TD>Arief</TD>
<TD>Budi</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Tampilan pada Browser :

Mengenal Formulir
Form adalah sebuah metode yang digunakan dalam Web Site yang mengizinkan
seorang pengunjung untuk dapat berinteraksi dengan Server ataupun dengan pengelola Web
Site. Untuk dapat menciptakan halaman web yang dapat berinteraksi dengan pengunjung
salah satunya menggunakan Formulir. Yang kemudian formulir tersebut akan dikirim
menggunakan sebuah program aplikasi Web berbasis Server Side menuju Database Server.
Adapun beberapa program Server Side yang dimaksud antara lain adalah PHP, ASP, PERL
dan lain-lain.
Dalam Web Site, Form biasanya digunakan sebagai media yang digunakan untuk
pengunjung dalam mengirimkan permintaan ataupun mengirimkan pesan seperti Buku Tamu,
Email, Pencarian, Pendaftaran Online ataupun untuk melakukan pemesanan barang secara
online dengan E-Commerce.

Sintaks pembuatan Form adalah sbb :

<Form action=”” Method=”” name=””>


<Input>
<Input>
………
</Form>

Keterangan :
 <Form> : digunakan mendeklarasikan awalan Tag sebuah Form
 <Input> : digunakan untuk memasukkan komponen-komponen Formulir
 Action : Atribut ACTION yang berada di dalam tag <FORM>. Atribut ini digunakan
untuk menentukan alamat dimana data dari komponen form akan dikirimkan.
Pengiriman ini pada umumnya dialamatkan pada sebuah halaman yang berisi
kode program aplikasi seperti PHP, ASP dan lainnya.
 Method : Atribut yang digunakan untuk membedakan metode pengiriman data.
 Name : digunakan untuk memberi nama variabel.

AMIK Profesional Dosen : Perie Bagoes Handoko


Pemrograman Web I Halaman : 15

Contoh :

<Form Action=”Simpan.php” methode=”get|post|” name=”Buku_Tamu”>


<Input>
………
<Input>
</form>

Atribut Keterangan
GET Pengiriman data ke dalam halaman lain yang tidak berhubungan dengan
halaman selanjutnya
POST Melakukan pengiriman data pada halaman lain yang selanjutnya dapat
diproses menuju halaman berikutnya ataupun melakukan pengiriman ke
dalam database.

Komponen Masukan pada Form


1. INPUT  Ada 6 bentuk : Text, Password, Button, Select, Radio Button,
CheckBox, List Menu
2. TEXTAREA
3. SELECT

Sintaks Tag <Input>

<Input Type=”Text” Name=”alamat” Size=”Panjang_Text”


MaxLength=”Panjang_Maximal_Text”>

Keterangan :
 Size : Digunakan untuk menentukan panjang komponen form yang berupa text di
dalam browser
 MaxLength : Digunakan untuk melakukan pembatasan data yang dimasukkan ke dalam
media masukkan.

Latihan : Menggunakan Form


<html>
<head>
<Title>Belajar Form</Title>
</head>
<body>
<form action=”” name=””>
<table width=”280” border=”0”>
<tr>
<td width=”86”>nama</td>
<td width=”184”>
<input name=”nama” type=”text” id=”nama” size=”25” maxlength=”20”>
</td>
</tr>
<tr>
<td>alamat</td>
<td>
<input name=”alamat” type=”text” id=”alamat” size=”40” maxlength=”50”>
</td>
</tr>

AMIK Profesional Dosen : Perie Bagoes Handoko


Pemrograman Web I Halaman : 16

<tr>
<td>e-mail</td>
<td>
<input name=”email” type=”text” id=”email” size=”35” maxlength=”30”>
</td>
</tr>
</table>
</body>
</Form>

Tampilan pada Browser :

Latihan : Menggunakan Form Password


<html>
<head>
<title>Belajar Form Password</title>
</head>
<body>
<form action=”” name=””>
<table width=”280” border=”0”>
<tr>
<td width=”86”>Login</td>
<td width=”184”>
<input name=”login” type=”text” id=”login” size=”30 maxlength=”30>
</td>
</tr>
<td>Password</td>
<td>
<input name=”kunci” type=”password” id=”kunci” size=”30” maxlength=”30”>
</td>
</tr>
</table>
</form>
</body>
</html>

Tampilan pada Browser :

AMIK Profesional Dosen : Perie Bagoes Handoko


Pemrograman Web I Halaman : 17

Masukkan berupa Pilihan tunggal (Radio Button)


Penulisan Sintaks Radio Button :

<input type=”radio” name=”variabel” value=”value”>

Latihan : Menggunakan Radio Button


<html>
<head>
<title>Menggunakan Radio Button</title>
</head>
<body>
<form action=”” name=””>
<p>Sistem Operasi manakah yang Anda gunakan di rumah ?</p>
<p>
<input type=”radio” name=”so” value=”windows 9x”>Windows 9x<br>
<input type=”radio” name=”so” value=”windows nt server”>Windows NT Server<br>
<input type=”radio” name=”so” value=”mac os”>Mac OS<br>
<input type=”radio” name=”so” value=”unix / linux”>Unix / Linux<br>
</p>
</form>
</body>
</html>

Tampilan Pada Browser :

Masukkan berupa Pilihan ganda (CheckBox)


Penulisan Sintaks CheckBox :

<input type=”checkbox” name=”variabel”>

Latihan : Menggunakan Checkbox


<html>
<head>
<title>Menggunakan CheckBox</title>
</head>
<body>
<form action=”” name=””>
<p>Mata Kuliah mana yang telah Anda ambil ?<br>
<input name=”cek1” type=”checkbox” id=”cek1” value=”Kalkulus 1”>Kalkulus I<br>
<input name=”cek2” type=”checkbox” id=”cek2” value=”Kalkulus 2”>Kalkulus II<br>

AMIK Profesional Dosen : Perie Bagoes Handoko


Pemrograman Web I Halaman : 18

<input name=”cek3” type=”checkbox” id=”cek3” value=”matematika


diskrit”>Matematika Diskrit<br>
<input name=”cek4” type=”checkbox” id=”cek4” value=”fisika dasar”>Fisika
Dasar<br>
<input name=”cek5” type=”checkbox” id=”cek5” value=”metode penelitian”>Metode
Penelitian<br>
</p>
</form>
</body>
</html>

Tampilan pada Browser :

Masukkan berupa Pulldown (List Menu)


Penulisan Sintaks List Menu :

<Select name=””>
<option value=”value”>…………..Karakter isi 1</option>
<option value=”value”>…………..Karakter isi 2</option>
<option value=”value”>…………..Karakter isi 3</option>
</Select>

Latihan : Menggunakan List Menu


<html>
<head>
<title>Menggunakan CheckBox</title>
</head>
<body>
<form action=”” name=””>
<p>Anda memiliki golongan darah jenis apa
<select name=”goldar” id=”goldar”>
<option value=”a”>A</option>
<option value=”b”>B</option>
<option value=”ab”>AB</option>
<option value=”o”>O</option>
</select><br></p>
</form>
</body>
</html>

Tampilan pada Browser :

AMIK Profesional Dosen : Perie Bagoes Handoko


Pemrograman Web I Halaman : 19

Masukkan berupa Ungkapan/Komentar (TextArea)


Penulisan Sintaks TextArea :

<textarea name=variabel” rows=”value” cols=”value”>


</textarea>

Latihan : Menggunakan Textarea


<html>
<head>
<title>Belajar menggunakan TextArea</title>
</head>
<body>
<form action="" name="">
<table width="280" border="0">
<tr>
<td width="86">nama</td>
<td width="184">
<input name="nama" type="text" size="25" maxlength="20">
</td>
</tr>
<tr>
<td>alamat</td>
<td>
<input name="alamat" type="text" size="25" maxlength="50">
</td>
</tr>
<tr>
<td>pesan</td>
<td>
<textarea name="pesan" cols="30" rows="4"> </textarea>
</td>
</tr>
</table>
</form>
</body>
</html>

Tampilan pada Browser :

AMIK Profesional Dosen : Perie Bagoes Handoko


Pemrograman Web I Halaman : 20

Masukkan berupa pengambilan data komputer local (File Field)


Pengambilan data yang berkenaan dengan data yang ada komputer yang sedang kita
pakai biasanya digunakan untuk aplikasi Upload File. Hal ini akan Anda jumpai pada saat
berada pada aplikasi Site Manager yang mengizinkan Anda untuk melakukan upload data.

Penulisan Sintaks pengambilan data (File Field) :

<input type=”file” name=”variabel”>

Latihan : Menggunakan Form File Upload


<html>
<head>
<title>Belajar Upload File</title>
</head>
<body>
<form action="" enctype="multipart/form-data" name="">
<table width="310" border="0">
<tr>
<td width="86">data 1</td>
<td><input name="data1" type="file" size="25"></td>
</tr>
<tr>
<td>data 2</td>
<td><input name="data2" type="file" size="25"></td>
</tr>
<tr>
<td>data 3</td>
<td><input name="data3" type="file" size="25"></td>
</tr>
</table>
</form>
</body>
</html>

Tampilan pada Browser :

AMIK Profesional Dosen : Perie Bagoes Handoko


Pemrograman Web I Halaman : 21

Membuat Tombol (Button)


Sintaks penulisannya seperti berikut :

<input type=”submit|reset|button” name=”variabel” value=”value”>

Komponen pada Button

Tipe Button Fungsi


SUBMIT Tombol ini digunakan untuk mengeksekusi seluruh komponen form menuju
halaman yang telah dialamatkan pada atribut ACTION yang ada di dalam
badan Form
RESET Berguna untuk mengosongkan semua data yang telah diisikan ke dalam
komponen sebelumnya
BUTTON Tombol ini dapat digunakan sebagai tombol yang memiliki alamat sesuai
dengan yang diinginkan, untuk dapat membuat alamat ini kita akan
memerlukan bantuan JAVA SCRIPT dalam pengalamatannya
(onClick=”parent.location=’alamat.htm’”;)

Atribut yang digunakan di dalam Button

Atribut Keterangan
Type Untuk menentukan Tipe Tombol yaitu Submit, Reset dan Button
Name Digunakan untuk mendeklarasikan tombol sebagai variabel
Value Digunakan untuk memberi label pada tombol, sehingga akan tampak pada
halaman browser.

Latihan : Menggunakan Form Button


<HTML>
<HEAD>
<TITLE>Belajar Form Button</TITLE>
</HEAD>
<BODY>

<FORM ACTION="eksekusi.php" NAME="form_coba" >


<TABLE width="280" border="0">
<TR>
<TD width="86">Nama</TD>
<TD width="184"><input name="nama" type="text" id="nama3" size="25"
maxlength="20">
</TD>
</TR>
<TR>
<TD>Alamat</TD>
<TD><input name="alamat" type="text" id="alamat3" size="30" maxlength="50">
</TD>
</TR>
<TR>
<TD>Kelamin</TD>
<TD><select name="sex" id="sex">
<option>Kelamin</option>
<option value="Pria">Pria</option>
<option value="Wanita">Wanita</option>
</select> </TD>

AMIK Profesional Dosen : Perie Bagoes Handoko


Pemrograman Web I Halaman : 22

</TR>
<TR>
<TD>&nbsp;</TD>
<TD><input type="submit" name="Submit" value="Kirim">
<input type="reset" name="Submit2" value="Bersih">
<input type="button" name="Submit3" value="Kembali"
onClick="parent.location='utama.htm'"></TD>
</TR>
</TABLE>
</FORM>
</BODY>

Tampilan pada Browser :

Membuat Link untuk E-Mail


Sintaks penulisannya seperti berikut :

<A href=”mailto:[email protected]”>Hubungi Kami</A>

Latihan : Membuat Link untuk E-Mail


<html>
<head>
<title>Belajar Link</title>
</head>
<body>
<a href="mailto:[email protected]">Hubungi Saya</a>
</body>
</html>

AMIK Profesional Dosen : Perie Bagoes Handoko


Pemrograman Web I Halaman : 23

Frame HTML
Frame HTML dapat digunakan untuk membuat tampilan halaman HTML yang terbagi-bagi
menjadi beberapa bagian di mana setiap bagiannya merupakan satu halaman HTML
terpisah.ini dilakukan untuk membuat tampilan halaman HTML yang salah satu atau
beberapa bagian berganti-ganti isinya sedangkan bagian lain tetap sehingga dapat menghemat
bandwidth internet dan mempercepat proses download secara keseluruhan.

Struktur tag Frame adalah :


<FRAMESET ROWS=a,b,c,…. Atau COLS=a,b,c……>
<FRAME NAME=”nama_frame1” SRC=”nama_file_html_frame1”>
<FRAME NAME=”nama_frame2” SRC=”nama_file_html_frame2”>
<FRAME NAME=”nama_frame3” SRC=”nama_file_html_frame3”>
</FRAMESET>

Berikut ini contoh ilustrasi dari frame HTML :

File Utama

Header.html

kiri.html kanan.html

Atribut Tag Frameset

Atribut Value Keterangan


Rows Persentasi atau ukuran dalam pixel Membagi tampilan menjadi baris-baris frame.
Contoh :
Rows=40,100
Artinya :
frame dibagi 2 masing-masing 40
dan 100 pixel
Cols Persentasi atau ukuran dalam pixel Membagi tampilan menjadi kolom-kolom
Contoh : frame.
Cols=20%,*
Artinya :
frame dibagi 2 masing-masing 20%
dan 80% dari lebar window
browser

Atribut tag Frame

Atribut Keterangan
Name Menentukan identifikasi berupa nama dari frame. Identifikasi ini diperlukan untuk
hubungan antar frame
SRC Berisi nama file HTML yang akan ditampilkan pada frame

AMIK Profesional Dosen : Perie Bagoes Handoko


Pemrograman Web I Halaman : 24

Mengelola Database MySQL

MySQL memiliki query yang telah distandartkan oleh ANSI/ISO yaitu menggunakan
bahasa SQL sebagai bahasa permintaannya. Selain itu MySQL mampu mendukung
Relasional Database Manajemen Sistem (RDBMS), sehingga dengan kemampuan ini
MySQL akan mampu menangani data-data yang berukuran sangat besar hingga Giga Byte.
MySQL adalah software database yang bersifat Free (gratis) karena MySQL dilisensi
oleh GNU General Public License (GPL).

Menghidupkan Server MySQL

1. apabila Anda menggunakan PHPTriad yang diinstall pada Sistem Operasi Windows,
maka yang harus Anda lakukan adalah dengan mengetik perintah pada Command line
DOS sebagai berikut :

C:\cd apache2
C:\apache2\cd mysql
C:\apache2\mysql\cd bin
C:\apache2\mysql\bin\mysqld

2. Apabila Anda menggunakan paket program yang sama dan Sistem Operasi Anda adalah
Windows NT atau Windows 2000 Server maka perintah dapat digunakan adalah :

C:\cd apache2
C:\apache2\cd mysql
C:\apache2\mysql\cd bin
C:\apache2\mysql\bin\mysqld-nt

3. Setelah Server MySQL diaktifkan, maka untuk selanjutnya Anda telah dapat
menggunakan database ini secara bebas, artinya Anda tidak harus menggunakan User dan
Password sebagai validasi pintu masuknya. Untuk masuk pertama kali Anda
menggunakan perintah mysql sebagai berikut :

C:\apache2\mysql\bin>mysqld
C:\apache2\mysql\bin>mysql
Welcome to the MySQL monitor. Commands end with ; or \g.
Your MySQL connection id is 1 to server version : 4.0.13-log
Type 'help;' or '\h' for help. Type '\c' to clear the buffer.

Perintah MySQL
1. Menampilkan Database
Untuk melihat daftar database MySQL gunakan perintah :
Show Databases

Hasilnya :
Mysql> SHOW DATABASES;
+-----------------+
| Database |
+-----------------+
| mysql |
| test |
+-----------------+
2 rows in set (0.13 sec)

AMIK Profesional Dosen : Perie Bagoes Handoko


Pemrograman Web I Halaman : 25

2. Membuat Database
Bentuk penulisannya adalah :

CREATE DATABASE nama_database

Misalnya : membuat database perpustakaan

CREATE DATABASE perpustakaan;

Hasilnya :

Mysql> CREATE DATABASE perpustakaan;


Query OK, 1 row affected (0.02 sec)

Mysql> SHOW DATABASES;


+-----------------+
| Database |
+-----------------+
| mysql |
| perpustakaan |
| test |
+-----------------+
3 rows in set (0.00 sec)

3. Menghubungkan dengan Database


Sintaks penulisannya :
USE nama_database

Contoh :
USE perpustakaan;
Database changed

4. Menghapus Database
Sintaks penulisannya :
DROP DATABASE nama_database

Contoh :
DROP DATABASE perpustakaan;

TYPE DATA pada MySQL


Jenis Type data Numerik

Type Bytes Keterangan


TINYINT 1 -128 sampai dengan 127
SMALLINT 2 -32768 sampai dengan 32767
MEDIUMINT 3 -8388608 sampai dengan 8388607
INT 4 -2147483648 sampai dengan 2147483647
BIGINT 8 -9223372036854775808 sampai 9223372036854775807

AMIK Profesional Dosen : Perie Bagoes Handoko


Pemrograman Web I Halaman : 26

Jenis Type Data Penanggalan dan Waktu

Type Keterangan
Bentuk ‘0000-00-00 00:00:00’
DATETIME
Contoh ‘2006-10-07 08:15:45’
Bentuk ‘0000-00-00’
DATE
Contoh ‘2006-10-07’
TIMESTAMP Bentuk ‘00000000000000’
Bentuk ’00:00:00’
TIME
Contoh ’08:35:55’
Bentuk ‘0000’
YEAR
Contoh ‘2006’

Jenis Type Data String untuk menangani data Text besar

Type Bytes
TINYTEXT 255
TINYBLOB 255
TEXT 65535
BLOB 65535
MEDIUMTEXT 16777215
MEDIUMBLOB 16777215
LONGBLOB 4294967295

Jenis Type Data String untuk menangani data kecil atau String yang sederhana

Type Keterangan
VARCHAR Max 225 Karakter
CHAR Max 225 Karakter bedanya :
Jika Type VARCHAR(25) artinya data paling banyak 25 digit dan juga
dapat dimasukki data kurang dari 25 digit.
Jika Type CHAR(4) maka Anda harus mengisi data paling banyak 4
karakter & paling sedikit 4 karakter
ENUM Merupakan Type data Validasi
Jika data golongan darah yang memiliki anggota A, B, AB dan O. maka
bentuk penulisannya adalah :
ENUM(‘A’,’B’,’AB’,’O’)
SET Type data ini memiliki fungsi yang sama dengan type ENUM, yaitu
dengan mendeklarasikan anggota dari isi kolom yang mungkin akan
menjadi anggotanya.

Latihan Membuat Database


Buat database dengan nama DATA_MHS dengan sebuah tabel yang digunakan untuk
menyimpan data MAHASISWA.

Prototype Tabel Mahasiswa


Field Type Length Keterangan
No_mhs Char 9 Nomor Mahasiswa
Nama Varchar 30 Nama Mahasiswa
Asal_sek Varchar 35 Asal Sekolah
Sex Char 1 Jenis Kelamin
Jurusan Char 2 Jurusan
Alamat Varchar 50 Alamat Tinggal

AMIK Profesional Dosen : Perie Bagoes Handoko


Pemrograman Web I Halaman : 27

Perintah untuk membuatnya adalah :

mysql> create database data_mhs;


Query OK, 1 row affected (0.00 sec)

mysql> use data_mhs;


Database changed

mysql> create table mahasiswa(


-> no_mhs char(9), Not Null
-> nama varchar(30), Not Null
-> asal_sek varchar(35),
-> sex char(35),
-> jurusan char(2),
-> alamat varchar(50),
-> PRIMARY KEY (no_mhs)
-> );
Query OK, 0 rows affected (0.08 sec)

Untuk menampilkan struktur tabel yang baru dibuat :

mysql> describe mahasiswa;


+----------+--------------+-------+------+---------+-------+
| Field | Type | Null | Key | Default | Extra |
+----------+--------------+--------+-----+---------+-------+
| no_mhs | varchar(9) | | PRI | | |
| nama | varchar(30) | | | | |
| asal_sek | varchar(35) | YES | | NULL | |
| sex | varchar(35) | YES | | NULL | |
| jurusan | char(2) | YES | | NULL | |
| alamat | varchar(50) | YES | | NULL | |
+----------+---------------+-------+------+----------+-------+
6 rows in set (0.06 sec)

Untuk melihat daftar tabel yang sudah dibuat :

mysql> show tables;


+------------------------+
| Tables_in_data_mhs |
+------------------------+
| mahasiswa |
+------------------------+
1 row in set (0.00 sec)

Mengubah Struktur Tabel


1. Merubah Nama Tabel
Sintaks penulisannya :
ALTER TABLE nama_tabel RENAME nama_baru

2. Menambah Kolom
Sintaks penulisannya :
ALTER TABLE nama_tabel
ADD kolom_baru_type(panjang);

AMIK Profesional Dosen : Perie Bagoes Handoko


Pemrograman Web I Halaman : 28

3. Merubah Nama Kolom


Sintaks penulisannya :
ALTER TABLE nama_tabel
CHANGE kolom_lama kolom_baru type(panjang);

4. Menghapus Kolom
Sintaks penulisannya :
ALTER TABLE nama_tabel
DROP nama_kolom;

Memasukkan Data
1. Memasukkan Data Tunggal
Sintaks penulisannya :
INSERT INTO nama_tabel
(kolom_a, Kolom_b, ……, kolom_n)
VALUES
(‘isi_kolom_a’,’isi_kolom_b’,’……..’,’isi_kolom_n’);

Contoh :
INSERT INTO mahasiswa
(nama,sex,jurusan)
VALUES
(‘Perry’,’P’,’TI’);

2. Memasukkan Data Secara Bersamaan


Sintaks penulisannya :
INSERT INTO nama_tabel
(kolom_a, Kolom_b, ……, kolom_n)
VALUES
(‘isi_kolom_a’,’isi_kolom_b’,’……..’,’isi_kolom_n’),
(‘isi_kolom_a’,’isi_kolom_b’,’……..’,’isi_kolom_n’),
(‘isi_kolom_a’,’isi_kolom_b’,’……..’,’isi_kolom_n’);

Contoh :
INSERT INTO mahasiswa
(no_mhs,nama,sex,jurusan)
VALUES
(‘07211501’,‘Mita’,’W’,’KA’),
(‘07211502’,‘Lily’,’W’,’KA’),
(‘07211503’,‘Kiky’,’W’,’KA’);

MengUpdate Data
Sintaks penulisannya :
UPDATE nama_tabel
SET kolom=’data_baru’;

Contoh :
UPDATE mahasiswa
SET sex=’P’;
Artinya :
Merubah seluruh data Sex menjadi ‘P’

AMIK Profesional Dosen : Perie Bagoes Handoko


Pemrograman Web I Halaman : 29

Menampilkan Data
Perintah yang digunakan untuk menampilkan data adalah SELECT
Bentuk umumnya adalah
SELECT * FROM nama_tabel;

Contoh :
SELECT * FROM mahasiswa;

Jika hanya ingin menampilkan beberapa kolom no_mhs, nama, sex & jurusan saja maka
perintahnya menjadi :
SELECT no_mhs,nama,sex,jurusan
FORM mahasiswa;

Menampilkan dengan Kondisi

Pernyataan yang berguna untuk menciptakan kondisi adalah klausa WHERE yang kemudian
diikuti oleh kondisi yang diinginkan.
Bentuk penulisannya adalah :
SELECT * FROM nama_tabel
WHERE [kondisi];

Contoh :
SELECT * FROM mahasiswa
WHERE sex=’P’;
Artinya :
Query diatas hanya ingin menampilkan data mahasiswa yang berjenis kelamin Pria.

Merubah data dengan kondisi

Sintaks penulisannya : UPDATE nama_tabel


SET kolom=’data_baru’
WHERE [kondisi];
Misalkan data pada tabel mahasiswa pada kolom no_mhs yang bernama Perry bernilai
kosong. Maka untuk menambahkan no_mhs pada data Perry adalah sebagai berikut :

UPDATE mahasiswa
SET no_mhs=’07211505’
WHERE nama=’Perry’;

Menghapus Data

Sintaks penulisannya : DELETE FROM nama_tabel


WHERE [kondisi]
Contoh :
DELETE FROM mahasiswa
WHERE no_mahasiswa=’07211502’;

Jika dituliskan tanpa kondisi maka perintah ini akan menghapus seluruh data. Hati-hatilah
menggunakan perintah tersebut karena akan mengakibatkan kefatalan yang tidak mungkin
dapat dikembalikan seperti semula.

AMIK Profesional Dosen : Perie Bagoes Handoko


Pemrograman Web I Halaman : 30

Mengenal AntarMuka PhpMyAdmin

Alternatif lain dalam membuat database MySQL adalah dengan menggunakan fasilitas
PhpMyAdmin. Fasilitas ini akan lebih memudahkan Anda dalam membuat sebuah database
tanpa melalui command line. Untuk membuka layar PhpMyAdmin ikuti langkah-langkah
sebagai berikut:
1. Jalankan layar Internet Explorer.
2. ketik pada address bar :
http://localhost/PhpMyAdmin
3. lalu akan muncul layar login seperti pada gambar

User : root
Password : triadpass

4. setelah user dan password diisi maka akan ditampilkan layar utama PhpMyAdmin :

5. Dengan interface yang sudah berbahasa Indonesia, saya yakin Anda tidak akan kesulitan.
Untuk membuat database, ketik nama database pada kotak yang telah tersedia.

AMIK Profesional Dosen : Perie Bagoes Handoko


Pemrograman Web I Halaman : 31

6. Untuk membuat tabel di dalam Database, ikuti ilustrasi pada gambar berikut :

7. Lalu isi kolom field beserta type data yang ingin Anda buat :

8. untuk membuat Kunci Primer, Anda dapat mengaktifkan Radio Button yang ada pada
samping kanan pendefinisian kolom.

9. untuk menyimpan Tabel, klik tombol Simpan yang ada dibagian bawah.

AMIK Profesional Dosen : Perie Bagoes Handoko


Pemrograman Web I Halaman : 32

Dasar-Dasar Pemrograman Web dengan PHP

PHP (Hypertext Preprocessor) adalah sebuah bahasa pemrograman yang berbentuk


Scripting, sistem kerja dari program ini adalah sebagai interpreter bukan sebagai compiler.
Untuk memulai program PHP yang, Anda dapat memulainya dengan mengenal
sebuah tag pengenal PHP yang digunakan untuk menuliskan kode PHP.
Bentuk pembuka program PHP.

Awal Akhir
<? ?>
<?php ?>
<script language=’php’> </script>
<% %>

Menampilkan Data di Dalam Program

Tidak seperti pada Tag HTML, di dalam program PHP kelompok informasi yang hendak
disajikan ke dalam halaman browser harus ditampilkan dengan suatu perintah penampil,
diantaranya adalah echo dan print, seperti pada sintaks berikut :

<?php echo “Informasi yang akan ditampilkan” ?>


atau
<?php print (‘informasi yang ditampilkan’) ?>

Contoh :
<?php

echo “Belajar PHP bersama Perry”;


echo “<br>”;
print (‘<br>’);
print (‘Selamat Belajar PHP’);

?>

PHP di dalam Tag HTML

Salah satu kelebihan yang dimiliki oleh PHP adalah dapat disisipkan ke dalam Tag-Tag
HTML, istilah dari pengertian ini adalah bahasa yang dapat embeded di dalam bahasa
program lain.Tetapi PHP juga dapat berjalan sendiri tanpa berada di sela-sela program yang
lain.
Contoh PHP yang berada di Dalam Tag HTML

<html>
<head>
<title>Embeded di dalam Tag HTML </title>
</head>
<body>
<h1>
<?php
echo “Selamat datang di Amik Profesional Makassar”;
?>
</h1>
</body>
</html>

AMIK Profesional Dosen : Perie Bagoes Handoko


Pemrograman Web I Halaman : 33

HTML di dalam PHP

Selain embeded, PHP juga dapat dibuat menggunakan format Tag PHP murni. Hal yang
harus diperhatikan jika ingin menggunakan HTML di dalam PHP adalah dengan
menghilangkan tanda petik (“) yang ada pada setiap atribut Tag HTML.

Contoh :
<?php
echo “<html>”;
echo “<head>”;
echo “<title>HTML dalam Script PHP</title>”;
echo “</head>”;
echo “<body>”;
echo “<h1>”;
echo “<div align=center>”;
echo “<font color=#000000 size=+2>”;

echo “Selamat datang di Kota Anging Mamiri”;

echo “</font>”;
echo “</div>”;
echo “</h1>”;
echo “</body>”;
echo “</html>”;
?>

Variabel dalam PHP

Pembentukan variabel dapat dibuat dengan menggunakan tanda String ($) sebagai
pendeklarasian awal, dengan menggunakan tanda $ maka karakter yang ada setelahnya akan
dianggap sebagai bentuk variabel.
Aturan-aturan yang dapat digunakan untuk menuliskan variabel adalah sebagai berikut :
 Pendeklarasian variabel harus ditandai dengan String ($)
 Variabel dapat menggunakan huruf kecil maupun huruf besar atau perpaduan antara
keduanya.
 Penulisan awal variabel tidak boleh menggunakan angka.
 Tidak boleh menggunakan bentuk-bentuk karakter yang tergolong ke dalam kode
ASCII.

Contoh 1:
<?php
$var = “Amik”
$Var = “Profesional”
echo “$var, $Var”;
?>

Contoh 2:
<?php
$kampus = “AMIK Profesional”;
$angkatan = ‘2006 / 2007’;

echo “ Saya adalah mahasiswa “;


echo “ $kampus ”;
echo “ Angkatan $angkatan “;
?>

AMIK Profesional Dosen : Perie Bagoes Handoko


Pemrograman Web I Halaman : 34

Contoh 3:
<?php
$angka1 = ’10’;
$angka2 = ‘2’;
$Jumlah = $angka1 + $angka2;
$Kali = $angka1 * $angka2;
echo “Hasil dari Penjumlahan $angka1 dan & $angka2 adalah $Jumlah”;
Echo “Hasil dari Perkalian $angka1 dan $angka2 adalah $Kali”;
?>

Variabel Antar Halaman

Bentuk variabel ini biasanya berasal dari hasil data semacam form data yang berhubungan
dengan halaman lainnya. Berikut contoh penggunaannya :

<html>
<head>
<title>Variabel luar</title>
<body>
<form action="variabel-hasil.php" method="POST">
<pre>
Nama: <input type="text" name="nama"><br>
Email: <input type="text" name="email"><br>
<input type="submit" name="submit" value="Tampilkan!">
</pre>
</form>
</head>
</body>
</html>

Listing Variabel-hasil.php

<?php
print $_POST['nama'];
echo "<br>";
print $_REQUEST['nama'];
echo "<br>";
print $HTTP_POST_VARS['email'];
?>

Interaksi Database MySQL dengan PHP

1. Membuka Koneksi MySQL


Langkah pertama yang harus dilakukan untuk menghubungkan sebuah program PHP
dengan database MySQL adalah membuka koneksi, dalam hal ini kita akan melakukan
ijin akses yang menunjuk pada alamat server dan soket yang dimiliki oleh database
MySQL. MySQL memiliki soket bernilai 3306. untuk melakukan pembukaan koneksi
dengan database PHP memiliki fungsi yang disebut mysql_connect(), dengan sintaks
dasar sebagai berikut :

Mysql_connect($host, $username, $password)


Or die (“Koneksi Gagal”.mysql_error());

Contoh connect.php:
<?php
$host="localhost";
$user="root";

AMIK Profesional Dosen : Perie Bagoes Handoko


Pemrograman Web I Halaman : 35

$pass="triadpass";

mysql_connect($host, $user, $pass)


or die("Koneksi gagal dilakukan: " . mysql_error());
echo "Koneksi Sukses";
?>

2. Menutup Koneksi
Bentuk penulisannya : mysql_close(link_koneksi)

Keterangan :
Link_koneksi merupakan variabel yang telah dideklarasikan pada koneksi server

3. Mengaktifkan Database
Bentuk Penulisannya :

Mysql_select_db($Nama_Database)
Or die (“Database Tidak Ada”);

4. Menyimpan Data ke Database


Bentuk Penulisannya :

mysql_query(“INSERT INTO Nama_table


(Field1, Field2, Field3, ………. , dst)
VALUES
(‘$Variabel1’,’$Variabel2’,’$Variabel3’, ………….. , dst) “);

5. Menampilkan Data dari Database


MySQL memiliki beberapa fungsi yang berkaitan dengan menampilkan data salah
satunya adalah mysql_fetch_row().

Contoh listing fetch_row.php :


<html>
<head>
<title>Menggunakan MySQL fetch_row</title>
</head>
<body>
<?php
$host="localhost";
$user="root";
$pass="triadpass";
$database="db_guestbook";
$konek=mysql_connect($host, $user, $pass)
or die("Koneksi gagal dilakukan: " . mysql_error());

mysql_select_db($database)
or die (" Database tidak ada");

$perintah=mysql_query("SELECT * FROM guestbook")


or die ("Perintah salah");
while ($hasil=mysql_fetch_row($perintah))
{
echo " Nama : $hasil[1] \n<br>";
echo " Email: $hasil[2] \n<br>";
echo " Pesan: $hasil[3] \n<br><br>";
}
mysql_close($konek);

AMIK Profesional Dosen : Perie Bagoes Handoko


Pemrograman Web I Halaman : 36

?>
</body>
</html>

6. Mengkoneksikan dengan Bentuk Form


Berikut adalah contoh formulir guest book yang datanya akan disimpan langsung ke
database MySQL.

Contoh listing guestbook.htm :


<html>
<head>
<title>Form Guestbook</title>
</head>

<body>
<form name="form1" method="post" action="fm_guestbook.php">
<table width="300" border="0" align="center" cellpadding="0"
cellspacing="0">
<tr>
<td colspan="2"><strong><font size="4">
Form Guestbook</font></strong></td>
</tr>
<tr>
<td width="74">Nama</td>
<td width="176">
<input name="fm_nama" type="text" id="fm_nama" size="25"
maxlength="35">
</td>
</tr>
<tr>
<td>Email</td>
<td>
<input name="fm_email" type="text" id="fm_email" size="25"
maxlength="35">
</td>
</tr>
<tr>
<td>Pesan</td>
<td>
<textarea name="fm_pesan" cols="25" rows="2"
id="fm_pesan"></textarea>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>
<input type="submit" name="Submit" value=" Simpan ">
</td>
</tr>
</table>
</form>

</body>
</html>

AMIK Profesional Dosen : Perie Bagoes Handoko


Praktikum Pemrograman Web I

Praktikum 1 :

Buatlah halaman dengan menggunakan editor Notepad seperti pada tampilan berikut :

Petunjuk Praktikum :

1. Ubahlah warna text “AMIK Profesional” sesuai dengan keinginan Anda


2. Ubahlah Bentuk Text “Akademi Manajemen Informatika dan Komputer” menjadi Italic
3. Ubahlah warna Backgroundnya
4. Buatlah satu paragraf (min. 3 Baris) tentang AMIK dibawah list jurusan

==================================================================
NB:
Jika ada kesulitan, Tanyakan pada Dosen atau asisten yang berada di Lab.

AMIK Profesional Dosen : Perie Bagoes Handoko


Praktikum Pemrograman Web I

Praktikum 2 :

Buatlah halaman dengan menggunakan editor Notepad seperti pada tampilan berikut :

Petunjuk Praktikum :

1. Beri pesan pada gambar saat mouse melewati area gambar.


2. Ubah letak gambar agar tampil di sebelah kanan layar.
3. Tambahkan bingkai (border) pada gambar
4. Tambahkan Item barang “CDROM/DVDROM” (Min. 3 Jenis)

==================================================================
NB:
Jika ada kesulitan, Tanyakan pada Dosen atau asisten yang berada di Lab.

AMIK Profesional Dosen : Perie Bagoes Handoko


Praktikum Pemrograman Web I

Praktikum 3 :

Buatlah halaman dengan menggunakan editor Notepad seperti pada tampilan berikut :

Petunjuk Praktikum :

1. Ubahlah warna text “Tabel Nilai Mahasiswa” menjadi warna biru.


2. Tambahkan Kolom Nomor Induk Mahasiswa (NIM) di antara kolom No dan Nama
Mahasiswa
3. Berikan warna background pada header tabel

==================================================================
NB:
Jika ada kesulitan, Tanyakan pada Dosen atau asisten yang berada di Lab.

AMIK Profesional Dosen : Perie Bagoes Handoko


Praktikum Pemrograman Web I

Praktikum 4 :

Buatlah halaman dengan menggunakan editor Notepad seperti pada tampilan berikut :

Petunjuk Praktikum :

1. Tambahkan komponen option untuk pilihan “Jurusan”


2. Tambahkan komponen select untuk data “Golongan Darah”
3. Ubahlah warna dasarnya.

==================================================================
NB:
Jika ada kesulitan, Tanyakan pada Dosen atau asisten yang berada di Lab.

AMIK Profesional Dosen : Perie Bagoes Handoko


Praktikum Pemrograman Web I

Praktikum 5 :

Buatlah halaman dengan menggunakan editor Notepad seperti pada tampilan berikut :

Petunjuk Praktikum :

1. Untuk mengerjakan praktikum ini. Buat file masing-masing : frame.html, header.html,


kiri.html, kanan.html
2. Modifikasilah tampilan masing-masing frame sesuai dengan keinginan anda.

==================================================================
NB:
Jika ada kesulitan, Tanyakan pada Dosen atau asisten yang berada di Lab.

AMIK Profesional Dosen : Perie Bagoes Handoko


Praktikum Pemrograman Web I

Praktikum 6 :

Petunjuk Praktikum :
1. Buatlah database dengan menggunakan MySQL dan beri nama AMIK.
2. Buat tabel pada database AMIK tersebut dan beri nama tabel tersebut Mahasiswa.
Struktur tabelnya adalah sebagai berikut :

Field Type Null Key Default


NIM Int(4) Pri
Password Varchar(25)
Nama Varchar(25)
Alamat Varchar(60)
Email Varchar(35) YES NULL
Sex Enum(‘Pria’,’Wanita’)
Agama Varchar(10)
Hoby Varchar(16) YES NULL
Date Date

3. Jika sudah selesai tabel dibuat, tambahkan beberapa data ke dalam tabel yang baru
anda buat tadi. (min. 3 data)

==================================================================

AMIK Profesional Dosen : Perie Bagoes Handoko


Praktikum Pemrograman Web I

Praktikum 7 – 8 :

Petunjuk Praktikum :
1. Bukalah file praktikum 4 mengenai pembuatan formulir online.

2. Ubahlah bagian deklarasi Form sbb :


ACTION=”Hasil-input.php”
METHOD=”Post”
3. Tambahkan juga Tombol SIMPAN pada form yang digunakan untuk menyimpan
hasil input.
4. Lalu buatlah file Hasil-input.php dengan menggunakan editor Notepad. File ini
nantinya digunakan untuk menampilkan hasil yang diinputkan pada formulir Data
Mahasiswa.
5. Buatlah folder berdasarkan NIM Anda di C:\apache2\htdocs\
6. lalu simpanlah pekerjaan anda di folder tersebut.
7. Jalankan file Anda lewat Internet Explorer Dengan format
http://localhost/NIM_Anda/file_html.html
.

==================================================================
NB:
Jika ada kesulitan, Tanyakan pada Dosen atau asisten yang berada di Lab.

AMIK Profesional Dosen : Perie Bagoes Handoko


Praktikum Pemrograman Web I

AMIK Profesional Dosen : Perie Bagoes Handoko


Praktikum Pemrograman Web I

Praktikum 9 – 10 :
Buatlah form untuk login dan beri nama filenya Login.htm yang tampilannya seperti pada
gambar dibawah ini :

Petunjuk Praktikum :
1. Buatlah Tabel Login yang berisi Field User dan Password
2. Gunakan perintah SQL berikut untuk memeriksa user dan password
$sql="SELECT user,password
FROM login
WHERE (user='$fm_userid'
AND password='$fm_passwd')"
3. Gunakan juga Perintah dibawah ini untuk memeriksa perintah SQL yang ada, apabila
perintah yang dijalankan salah atau query SQL-nya tidak dipenuhi oleh database
MySQL, maka progran akan menampilkan pesan “Perintah Salah”
if(!$hasil=mysql_query($sql))
{
echo "Perintah salah ". mysql_error();
}
4. Tambahkan perintah untuk memeriksa jumlah data yang dihasilkan. Apabila data
yang didapatkan atau yang ada dalam tabel login melebihi 1 data atau lebih, maka sesi
akan dikerjakan.
if($ada_baris >= 1)
{
session_register("fm_userid");
echo "Password diterima,<br>
Anda berhak mengakses seluruh halaman ini";
exit;
}
else
{
echo "<b>User / Password Salah !<b>";
include "login.htm";
exit;
}

AMIK Profesional Dosen : Perie Bagoes Handoko


KATA PENGANTAR

Semua dokumen dan aplikasi yang dapat berjalan di atas web browser umumnya
memiliki format hypertext markup language (HTML). Karena itu, untuk bisa melakukan
pemrograman aplikasi di atas web Anda harus terlebih dahulu menguasai HTML. Walupun
sekarang telah banyak terdapat tool yang dapat Anda gunakan untuk membuat halaman
secara Wysiwyg seperti Frontpage dan Netscape Editor, namun Anda tetap harus menguasai
HTML terutama untuk membuat aplikasi dengan teknologi CGI.

Setelah mempelajari bagian ini Anda diharapkan akan mampu :


• Menguasai dasar-dasar HTML.
• Mengenal dan mampu menggunakan tag-tag HTML dasar, yaitu H1, H2, dan
seterusnya, list, ordered list, dan unordered list.
• Menguasai tabel HTML untuk menampilkan informasi statis dalam bentuk tabel.
• Melakukan pemformatan paragraf pada dokumen HTML.
• Menentukan warna dokumen HTML.
• Menggunakan frame HTML.
• Melakukan pemformatan font pada dokumen HTML.
• Mengerti form HTML untuk menerima input dari user.
MODUL
PRAKTIKUM

 Pemrograman HTML dasar dan


Lanjut
 Pemrograman dengan PHP
dasar
 Perintah-Perintah SQL dalam
MySQL
 Mengelola Database MySQL
 Membuat Formulir Online
 Membuat Program Login
Dengan
Dosen :
PHP & MySQL Perie Bagoes Handoko, S.Kom

AMIK PROFESIONAL
Jl. A.P. Pettarani No. 27 Makassar

Anda mungkin juga menyukai