Scribd
Unggah
62 tayangan

Source Code HTML

Diunggah oleh

Yoga Prasetyo
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
62 tayangan

Source Code HTML

Diunggah oleh

Yoga Prasetyo
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 39

S o u r c e c o d e H T M L |Anitasindar, ST.

MTI- 1

 HTML
 NOTEPAD
 NOTEPAD++
 MACROMEDIA DREAMWEAVER
 PHP
S o u r c e c o d e H T M L |Anitasindar, ST.MTI- 2

I. HTML NOTEPAD NOTEPAD++


Langkah-langkah :
Open Notepad, Notepad++
New File
Simpan dalam extension .html
Buka File .html pada Internet Explorer, Mozila, Firefox, Chrome

STRUKTUR DOKUMEN HTML


<html> ... </html> : merupakan tag pembuka dari dokumen html.
<head> ... </head> :
<title> ... </title> : merupakan tag untuk memberikan judul pada dokumen html.
<body> ... </body> : merupakan body dari dokumen html.
editor notepad, lalu save, ganti save as type di pojok bawah dari text documents txt,
menjadi all files, berikan nama filenya yakni nama-file.html

Mengatur font
<html>
<head>
<title></title>
</head>
<body >
<b>Ini Text Bold</b><br>
<i>Ini Text Italic</i><br>
<u>Ini Text Underline</u><br>
<s>Ini Text Striketrue</s></br>
Text Superscript: X<sup>2</sup><br>
Text Subscript: H<sub>2</sub>O
</body>
</html>

<font size="5pt" face="Arial" color="red">


Bentuk Text arial berwarna merah
</font>
MENAMPILKAN GAMBAR PADA DOKUMEN HTML :

<img src="D:\senastek\matlabb\F1.jpg" height="50%" width="10%">


<html>
<head>
<title>web saya</title>
</head>
<body>
<font size="13pt" face="Calibri" color="Blue">
PROFILE
<img src="D:\senastek\matlabb\F1.jpg" height="50%" width="10%">
<ul>
<font size="8pt" face="Calibri" color="Green">
<li>Nama : Ali Baba Sanggah</li>
S o u r c e c o d e H T M L |Anitasindar, ST.MTI- 3

<font size="8pt" face="Calibri" color="Blue">


<li>NIM : 099990999</li>
<font size="8pt" face="Calibri" color="Green">
<li>Mata Kuliah : Pemograman</li>
<font size="8pt" face="Calibri" color="Red">
<li>Dosen : HERMANSYAH</li>
<font size="8pt" face="Calibri" color="Green">
<li>Semester : III</li>
<font size="8pt" face="Calibri" color="Res">
<li>Prodi: Teknik Informatika</li>
<font size="8pt" face="Calibri" color="Blue">
</ul>
<dl type=>
<dd>Nama : Ali Baba Sanggah</dd>
<dd>NIM : 099990999</li>
<dd>Mata Kuliah : Pemograman</dd>
<dd>Dosen : HERMANSYAH</dd>
<dd>Semester : III</li>
<dd>Prodi: Teknik Informatika</dd>
</dl>
</body>
<HTML>

Membuat Animasi Teks Bergerak


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

1. BACKGROUND

Atribut ini digunakan untuk mengeset gambar untuk digunakan sebagai latar
belakang pada sebuah halaman. penulisannya
<body background="url gambar/lokasi penyimpanan gambar">
<html>
<head>
<title>Judul Dokumen</title>
</head>
<body background="images/bg.jpg">
S o u r c e c o d e H T M L |Anitasindar, ST.MTI- 4

Mengganti background dokumen HTML dgn gambar


</body>
</html>
2. BGCOLOR
Bgcolor menentukan warna latar belakang dari halaman web. Misalnya, untuk
mengatur warna latar belakang halaman agar berwarna merah, dapat menggunakan
tag berikut :
<body bgcolor="#222222?” >
Membuat Garis Dalam Dokumen HTML
<html>
<head>
<title>Membuat Garis</title>
</head>
<body>
<h1 align="right">Ini adalah garis</h1>
<hr align="right" width="60%" color="#FF0000"
size="3">
</body>
</html>
Ada 4 jenis pembuatan link dalam html:
 Link untuk menghubungkan antar halaman
 Link untuk menghubungkan ke bagian halaman lain
 Link untuk menghubungkan ke halaman website lain
 Link untuk menghubungkan ke alamat email
Ada 3 jenis list dalam dokumen html yaitu:
1. Ordered List “<ol>”
Tag <ol> adalah kependekan dari Ordered List, yang artinya list secara berurutan.
2. Unordered List <ul>
Unordered List merupakan pengurutan list dengan menggunakan symbol/bullet.
3. List tanpa bullet <dl>
Untuk membuat list tanpa mengunakan bullet/symbol caranya <dl> dengan <dd>

Form Pendaftaran

biodata2.htm

<html>
<head>
<title>Form Input Biodata</title>
S o u r c e c o d e H T M L |Anitasindar, ST.MTI- 5

<meta name="" content="">


</head>
<body>
<p><center><b><font face:"cambria">Formulir Pendaftaran<b><center></font
face></p>
<body background="asst\pictures\satu.jpg">
<table border="1" bordercolor="red">
<tr>
</td>
</tr>
<tr>
<td>
<form name="fm-input">
<table>
<tr>
<td><label for="nama">Nama
Lengkap</label></td>
<td>:</td>
<td><input type="text"
size="20" name="nama" id="nama"/></td>
<tr>
<td><label for="tll">Tempat,
Tanggal Lahir</label></td>
<td>:</td>
<td>
<input type="text"
size="20" name="nama"/>,
<input type="text"
size="2" name="tgl"/>/
<input type="text"
size="2" name="bln"/>/
<input type="text"
size="5" name="thn"/>
</td>
</tr>
<tr>
<td><label
for="alamat">Alamat</label></td>
<td>:</td>
<td><textarea name="alamat"
id="alamat" cols="40" rows="3"></textarea></td>
</tr>
<tr>
<td><label for="telp">No.
Telp/HP</label></td>
<td>:</td>
<td><input type="text"
size="20" name="telp" id="telp"/></td>
</tr>
S o u r c e c o d e H T M L |Anitasindar, ST.MTI- 6

<tr>
<td><label for="jkl">Jenis
Kelamin</label></td>
<td>:</td>
<td>
<input type="radio"
name="jkl" value="Laki-Laki" id="laki"/>
<label for="laki">Laki-
Laki</label>
<input type="radio"
name="jkl" value="Perempuan" id="perempuan"/>
<label
for="perempuan">Perempuan</label>
</td>
</tr>
<tr>
<td><label
for="agama">Agama</label></td>
<td>:</td>
<td><input type="text"
size="20" name="agama" id="agama"/></td>
</tr>
<tr>
<td><label
for="hoby">Hoby</label></td>
<td>:</td>
<td>
<input type="checkbox"
name="hoby[]" id="bacabuku" value="Baca Buku"/>
<label
for="bacabuku">Baca Buku</label>
<input type="checkbox"
name="hoby[]" id="olahraga" value="Olah Raga"/>
<label
for="olahraga">Olah Raga</label>
<input type="checkbox"
name="hoby[]" id="maingame" value="Main Game"/>
<label
for="maingame">Main Game</label>
<input type="checkbox"
name="hoby[]" id="hiking" value="hiking"/>
<label
for="hiking">Hiking</label>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
S o u r c e c o d e H T M L |Anitasindar, ST.MTI- 7

<td>
<p> Masukkan Username Anda;
<input type="text" name="user"/>
</p>
</tr>
</td>
<tr>
<td>
<p>Masukkan Password Anda;
<input type="password" name="pass"/>
</right></p>
<p><input type="submit" name="submit" value="submit"/></right>
</p>
</tr>
</td>
</table>
<body>
<html>

catalog.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- DW6 -->
<head>
<!-- Copyright 2005 Macromedia, Inc. All rights reserved. -->
<title>Catalog</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="mm_health_nutr.css" type="text/css" />
<script language="JavaScript" type="text/javascript">
//--------------- LOCALIZEABLE GLOBALS ---------------
var d=new Date();
var monthname=new
Array("January","February","March","April","May","June","July","August","September","
October","November","December");
//Ensure correct for language. English is "January 1, 2004"
var TODAY = monthname[d.getMonth()] + " " + d.getDate() + ", " + d.getFullYear();
//--------------- END LOCALIZEABLE ---------------
</script>
</head>
<body bgcolor="#F4FFE4">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#D5EDB3">
<td width="382" colspan="2" rowspan="2"><img src="mm_health_photo.jpg"
alt="Header image" width="382" height="101" border="0" /></td>
<td width="378" height="50" id="logo" valign="bottom" align="center"
nowrap="nowrap">Jual Kopi </td>
<td width="100%">&nbsp;</td>
S o u r c e c o d e H T M L |Anitasindar, ST.MTI- 8

</tr>

<tr bgcolor="#D5EDB3">
<td height="51" id="tagline" valign="top" align="center">tiada hari tanpa kopi
</td>
<td width="100%">&nbsp;</td>
</tr>

<tr>
<td colspan="4" bgcolor="#5C743D"><img src="mm_spacer.gif" alt="" width="1"
height="2" border="0" /></td>
</tr>

<tr>
<td colspan="4" bgcolor="#99CC66" background="mm_dashed_line.gif"><img
src="mm_dashed_line.gif" alt="line decor" width="4" height="3" border="0"
/></td>
</tr>

<tr bgcolor="#99CC66">
<td>&nbsp;</td>
<td colspan="3" id="dateformat" height="20"><a
href="javascript:;">pilih</a>&nbsp;&nbsp;::&nbsp;&nbsp;
<script language="JavaScript" type="text/javascript">
document.write(TODAY); </script> </td>
</tr>

<tr>
<td colspan="4" bgcolor="#99CC66" background="mm_dashed_line.gif"><img
src="mm_dashed_line.gif" alt="line decor" width="4" height="3" border="0"
/></td>
</tr>

<tr>
<td colspan="4" bgcolor="#5C743D"><img src="mm_spacer.gif" alt="" width="1"
height="2" border="0" /></td>
</tr>
<tr>
<td width="40">&nbsp;</td>
<td colspan="2" valign="top">&nbsp;<br />
&nbsp;<br />
<table border="0" cellspacing="0" cellpadding="2" width="610">
<tr>
<td colspan="7" class="pageName">kopi kita </td>
</tr>
<tr>
<td width="22%" height="110"><img src="mm_product_sm.gif" alt="small
product photo" width="110" height="110" border="0" /></td>
<td>&nbsp;</td>
S o u r c e c o d e H T M L |Anitasindar, ST.MTI- 9

<td width="22%" height="110"><img src="mm_product_sm.gif"


alt="small product photo" width="110" height="110" border="0" /></td>
<td>&nbsp;</td>
<td width="22%" height="110"><img src="mm_product_sm.gif"
alt="small product photo" width="110" height="110" border="0" /></td>
<td>&nbsp;</td>
<td width="22%" height="110"><img src="mm_product_sm.gif"
alt="small product photo" width="110" height="110" border="0" /></td>
</tr>
<tr>
<td class="detailText" valign="top" nowrap="nowrap"><a
href="javascript:;">Kopi Aceh </a><br />
Rp. 50.000/kg </td>
<td>&nbsp;</td>
<td class="detailText" valign="top" nowrap="nowrap"><a
href="javascript:;">Kopi Siantar </a><br />
Rp. 50.000/kg </td>
<td>&nbsp;</td>
<td class="detailText" valign="top" nowrap="nowrap"><a
href="javascript:;">Kopi Sumatera </a><br />
Rp. 50.000/kg </td>
<td>&nbsp;</td>
<td class="detailText" valign="top" nowrap="nowrap"><a
href="javascript:;">Kopi Merdeka </a><br />
Rp. 50.000/kg </td>
</tr>
<tr>
<td colspan="7">&nbsp;</td>
</tr>

<tr>
<td height="110"><img src="mm_product_sm.gif" alt="small product photo"
width="110" height="110" border="0" /></td>
<td>&nbsp;</td>
<td height="110"><img src="mm_product_sm.gif" alt="small
product photo" width="110" height="110" border="0" /></td>
<td>&nbsp;</td>
<td height="110"><img src="mm_product_sm.gif" alt="small
product photo" width="110" height="110" border="0" /></td>
<td>&nbsp;</td>
<td height="110"><img src="mm_product_sm.gif" alt="small
product photo" width="110" height="110" border="0" /></td>
</tr>
<tr>
<td class="detailText" valign="top" nowrap="nowrap"><a
href="javascript:;">Kopi Sabang </a><br />
Rp. 50.000/kg </td>
<td>&nbsp;</td>
S o u r c e c o d e H T M L |Anitasindar, ST.MTI- 10

<td class="detailText" valign="top" nowrap="nowrap"><a


href="javascript:;">Kopi Papua </a><br />
Rp. 50.000/kg </td>
<td>&nbsp;</td>
<td class="detailText" valign="top" nowrap="nowrap"><a
href="javascript:;">Kopi Lampung </a><br />
Rp. 50.000/kg </td>
<td>&nbsp;</td>
<td class="detailText" valign="top" nowrap="nowrap"><a
href="javascript:;">Kopi Luwak </a><br />
Rp. 50.000/kg </td>
</tr>
<tr>
<td colspan="7">&nbsp;</td>
</tr>
</table>
</td>
<td width="100%">&nbsp;</td>
</tr>

<tr>
<td width="40">&nbsp;</td>
<td width="342">&nbsp;</td>
<td width="378">&nbsp;</td>
<td width="100%">&nbsp;</td>
</tr>
</table>
</body>
</html>

Drop Down Menu

drop down2.html
S o u r c e c o d e H T M L |Anitasindar, ST.MTI- 11

<html>
<head>
<title>Belajar WEB</title>
<link rel="stylesheet" type="text/css"
href="style.css">
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">Menu</a>
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</li>
<li><a href="#">Artikel</a>
<ul>
<li><a href="#">Artikel 1</a></li>
<li><a href="#">Artikel 2</a></li>
<li><a href="#">Artikel 3</a></li>
<li><a href="#">Artikel 4</a></li>
</ul>

</li>
<li><a href="#">Contact</a>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Phone</a></li>
</ul>
</li>
</ul>
</div>

<style>
#menu ul li a:hover{
color:white;
background-color:black;
text-shadow:none;
}
</style>

<p>A:Ternyata css itu <B><FONT


COLOR="BLUE">asik</FONT></B>,kita bisa menjadikan
tampilan <B><FONT COLOR="BLUE">web</FONT></B> kita
jadi <B><FONT COLOR="BLUE">indah</FONT></B>.<br>
B:ya, Benar sekali itu, dengan css <B><FONT
COLOR="BLUE">tampilan web</FONT></B> yang tadinya
S o u r c e c o d e H T M L |Anitasindar, ST.MTI- 12

<I>garing</I>, menjadi lebih <B><FONT


COLOR="BLUE">hidup</FONT></B>.</p>

<b>KAMU Text Bold</b><br>


<i>KAMU Text Italic</i><br>
<u>KAMU Text Underline</u><br>
<s>KAMU Text Striketrue</s></br>
Text Superscript: X<sup>2</sup><br>
Text Subscript: H<sub>2</sub>O
</body>
</html>

II. HTML CSS


Pengertian dan fungsi CSS

Cascading Style Sheet (CSS) adalah salah satu bahasa pemrograman web yang
digunakan untuk mempercantik halaman web danmengendalikan beberapa
komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS dapat
kita gunakan dalam mengendalikanukuran gambar, warna teks, warna tabel, ukuran
border, warna border,warna hyperlink, warna mouse over, spasi antar paragraf, spasi
antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS bisa
jugadiartikan sebagai bahasa style sheet yang digunakan untuk mengatur tampilan
dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman
yang sama dengan format yang berbeda.
2. Jenis-Jenis Selector CSS
CSS memiliki 3 jenis selector basic yaitu class selector, id selector, dan tag selector.
a. Class selector.
Class adalah “agen bebas” yang dapat diterapkan untuk tag HTML apapun. dapat
membuat nama class dengan hampir semua nama apapun. Karena class selector dapat
diterapkan ke beberapa tag HTML sekaligus, maka class adalah selector yang paling
serbaguna. Penulisan class selector dalam css
disymbolkan dengan tanda titik ( . ).
Penulisan code di dalam dokumen HTML
....
<h3 class=’judul’>
Belajar Membuat Website
</h3>
....
Penulisan code dalam cssnya
.judul{
Font : 12pt Impact;
}
b. ID Selector
Hampir sama dengan class, ID dapat diterapkan untuk hampir semua tagHTML, tetapi
penggunaanya hanya sekali dalam satu halaman untuk satu tag HTML tertentu.
Contoh:
Penulisan code dalam dokumen HTML
....
S o u r c e c o d e H T M L |Anitasindar, ST.MTI- 13

<div id=’footer’>
copy-Right Cyber Bussiner School – 2011
</div>
....
c. Tag selector
Nama dari element HTML digunakan sebagai selector untuk mendefinisikan tag
HTML yang berasosiasi. Misalnya, selector dari <h1> adalah h1. HTMLselector
digunakan dalam CSS rule untuk mendefinisikan bagaimana suatu tag akan
ditampilkan.
Penulisan code di dokumen HTML
....
<h1> Mengarungi Samudra PHP </h1>
<h1> Belajar HTML dan CSS </h1>
....
Penulisan code di cssnya
h1{
font: 12pt Impact;
color:red;
}
Ada 3 cara penggunaan css yaitu inline css, embedded css, external css.
a. Inline CSS
Inline css merupakan cara penggunaan css dengan menambahkan langsung di tag
dokumen htmlnya sebagai atribut.
Contoh:
....
<p style="color:blue">
Membuat tulisan warna biru
</p>
<p style="font-style:italic;">
Membuat tulisan miring
</p>
....
Penulisan CSS dengan cara inline ini di mulai dengan kata style lalu di ikutidengan
syntax property: value.
b. Embedded CSS
Embedded CSS merupakan cara penggunaan css yang disisipkan di dalam tag
<style> ...</style>. Tag style tersebut disimpan di antara tag <head>...</head>
Contoh:
<html>
<head>
<style>
p{
color:green;
font-family:arial;
font-size:120%;
}
</style>
</head>
<body>
S o u r c e c o d e H T M L |Anitasindar, ST.MTI- 14

<p>Belajar Css Mudah</p>


<p>Pengaturan paragraf dengan menggunakan
CSS di dalam header dokumen html</p>
<p>Dengan contoh ini, maka setiap paragraf
atau yang berada diantara </p><p>dan</p>akan memiliki format yang sama
</body>
</html>
c. External CSS.
Cara ini menggunakan file Css yang dituliskan secara terpisah dengan dokumen html.
Dengan cara ini, anda hanya perlu memiliki satu set kode CSS yang digunakan untuk
semua halaman web.
Ada dua langkah yang harus dikerjakan untuk menggunakan css dengan cara ini
1) Anda membuat satu file dengan notepad atau teks editor lain, dan berinama,
misalkan: style.css, lalu tuliskan kode-kode css di dalam file tersebut.
p{
font-family: arial;
font-size: small;
}
h1{
color: red;
}
2) Langkah kedua adalah memanggil file style.css dari semua halaman web.
Caranya dengan memasukkan kode di bawah ini yang disisipkan di antara
tag < head > dan < / head >
....
<head>
<link rel=”stylesheet” href=”style.css”
type=”text/css”></link>
</head>
....
Bekerja Dengan CSS
<html>
<head>
<title>belajar web</title>
</head>
<body>
Selamat Malam <B>Good Night</B>Apa kabar semua <B>Saya
bernama.......</B> Alamat :.........
<B>HP:..........</B>Thank You<br>
Topik yang akan sy bahas.......<B>Design
Web</B> yang menarik dan mudah dipergunakan <I>Tampilan
Familiar</I>, tidak membosankan
<B>Silahkan Dilihat</B>.
</body>
</html>
3. Membuat Menu
<html>
<head>
<title>belajar web</title>
S o u r c e c o d e H T M L |Anitasindar, ST.MTI- 15

</head>
<body background=satu.JPG>
<div id="menu">
<B> <font size="25pt" face="Calibri" color="Blue"> </B>
<a href="#"></a>MENU</li>
<ul>
<font size="10pt" face="Calibri" color="Green">
<li><a href="#">HOME</a></li>
<li><a href="#">PRODUCT</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</div>

<style>
#menu ul li a{
color:green;
text-decoration:none;
padding:0px 5px 0px 5px;/*meberi jarak antar
teks*/
font:15pt cambria;/*mengatur format teks dgn
size 15pt dan jns font cambria*/
font-weight:bold;
}
</style>

<style>
#menu ul li a:hover{
color:blue;
background-color:red;
}
</style>

</body>
</html>
merubah style dari teks link
<style>
#menu ul li a{
color:red;
text-decoration:none;
padding:0px 5px 0px 5px;/*meberi jarak antar
teks*/
font:15pt cambria;/*mengatur format teks dgn
size 15pt dan jns font cambria*/
font-weight:bold;
}
</style>
S o u r c e c o d e H T M L |Anitasindar, ST.MTI- 16

Membuat menu sejajar


#menu ul li{
display:inline;/*membuat tampilan list
sejajar ke samping*/
padding:0px 2px 0px 2px;
background-color:blue;
}
</style>

/* RESET */
html, body, div, span, applet, object, iframe,
h1, h3, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0; padding: 0; outline: 0; font-size:
100%;
vertical-align: baseline; background:
transparent;
height: auto; border-top-width: 0;
border-bottom-width: 0; border-left-width: 0;}
blockquote:before, blockquote:after,q:before, q:after
{content: none;}
blockquote, q {quotes: none;}
:focus {outline: 0;}
.clear {clear: both;display: block;height:
1px;overflow: hidden;margin: 0;padding: 0;}
ins {text-decoration: none;}
del {text-decoration: line-through;}
table {border-collapse: collapse;border-spacing: 0;}
ol, ul {list-style: none;}
ol, ul {list-style: none;}
body {background-color: #ffffff;background-position:
center center;}
/* RESET */

Menu2

<html>
<head>
<title>belajar web</title>
<style>
/* RESET */
html, body, div, span, applet, object, iframe,
h1, h3, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
S o u r c e c o d e H T M L |Anitasindar, ST.MTI- 17

del, dfn, em, font, img, ins, kbd, q, s, samp,


small, strike, strong, sub, sup, tt, var,
b, u, i, center,dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0; padding: 0; outline: 0; fontsize:
100%;
vertical-align: baseline; background:
transparent;
height: auto; border-top-width: 0;
border-bottom-width: 0; border-left-width:
0;}
blockquote:before, blockquote:after,q:before,
q:after {content: none;}

blockquote, q {quotes: none;}


:focus {outline: 0;}
.clear {clear: both;display: block;height:
1px;overflow: hidden;margin: 0;padding: 0;}
ins {text-decoration: none;}
del {text-decoration: line-through;}
table {border-collapse: collapse;border-spacing:
0;}
ol, ul {list-style: none;}
ol, ul {list-style: none;}
body {background-color: #ffffff;backgroundposition:
center center;}
/* RESET */
#menu ul li a{
color:red;
text-decoration:none;
padding:0px 5px 0px 5px;/*memberi jarak
antar teks*/
font:15pt cambria;/*mengatur format teks dgn
size 15pt dan jns font cambria*/
font-weight:bold;
}
#menu ul li a:hover{
color:white;
background-color:red;
}
#menu ul li{
display:inline;/*membuat tampilan list
sejajar ke samping*/
padding:0px 2px 0px 2px;
background-color:blue;
}
</style>
</head>
S o u r c e c o d e H T M L |Anitasindar, ST.MTI- 18

<body>
<div id="menu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">PRODUCT</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</div>
</body>
</html>
S o u r c e c o d e H T M L |Anitasindar, ST.MTI- 19

III. HTML - MACROMEDIA DREAMWEAVER 8


Langkah-langkah :
Open Macromedia Dreamweaver
File – New = Basic Page – HTML - Code

Mulai bekerja pada Code (file disimpan dalam .html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0


Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>Untitled Document</title>
</head>

<body>

</body>
</html>

Personal Web.htm

<html><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<title>Personal Web</title>
</head>
<body>
<table width="1200" align="center" cellpadding="5" cellspacing="2"
bordercolor="#CCCC00" bgcolor="#99FF99">
<tbody><tr>
<td height="150" align="center" bordercolor="#F0F0F0" bgcolor="#FFCCCC">
<img src="Personal%20Web_files/satu.jpg" <="" td="" height="75%" width="55%">
</td><td>
<b> <font face="Georgia, Times New Roman, Times, serif" size="25"><b>PERSONAL
WEB SITE SAYA</b></font> <br>

<hr color="#FF0000" size="3" width="100%">


<i>"Media Silahturahmi Online"</i></b></td>
</tr>
<tr><td>
<marquee behavior="alternate" bgcolor="#0099FF">HP :
09009999999</marquee><br><br>

</td>
</tr><tr>
S o u r c e c o d e H T M L |Anitasindar, ST.MTI- 20

<td <font="" face="Tahoma" size="15" bgcolor="#33CC33&quot;" valign="top"


width="200"><b>
<p align="left"><b>MENU UTAMA</b></p>
<ul>
<li><a href="file:///D:/poliprofesi/index.htm">Home</a></li>
<li><a href="file:///D:/poliprofesi/profile.htm">Profile</a></li>
<li><a href="file:///D:/poliprofesi/profile.htm">Modul</a></li>
<li><a href="file:///D:/poliprofesi/profile.htm">Galeri</a></li>
<li><a href="file:///D:/poliprofesi/profile.htm">Kontak</a></li>
</ul>
<style>
#menu ul li a:hover{
color:blue;
background-color:yellow;
}
</style>

</b>
</td><td with="600" bgcolor="#CCFFFFF" valign="top">
<p align="Justify"><font face="trebuchet ms"><b>Terima Kasih telah mengunjungi
web site saya</b></font>
</p><p align="Justify"><font face="trebuchet ms"><b><i>Berbicara
mengenai web, hal pertama yang timbul di benak penulis adalah dunia
internet. Ya, web memang sangat berkaitan erat dengan dunia jaringan
internet. Kedua istilah ini (web dan jaringan internet) merupakan dua
hal yang saling terkait satu sama lainnya. Halaman web membutuhkan
jaringan internet sebagai media penyampaian, sedangkan jaringan internet
membutuhkan halaman web sebagai isi atau pun content yang dapat
dibagikan kepada para penggunanya.</i></b></font>
</p>
</td>
</tr>
<tr>
<td colspan="2" bgcolor="#009933&quot;" height="40">
<p "center"="" <font="" face="trebuchet ms&gt; font size=" 2"="" align="">
<b> copy right ©2018 Pemilik Web<br> all right reserved</b></p></td>
</tr>
</tbody></table>
</body></html>
S o u r c e c o d e H T M L |Anitasindar, ST.MTI- 21

DESIGN - MACROMEDIA DREAMWEAVER 8


Langkah-langkah :
Open Macromedia Dreamweaver
File – New = Basic Page – HTML – Design
Gunakan tool-tool pada properties untuk membantu mempercantik design
Tekan 12 untuk melihat dan edit hasil design

latcss22.php

IV. PHP-MACROMEDIA DREAMWEAVER 8-XAMPP


Software yang biasa digunakan dalam belajar ataupun pengembangan web PHP
adalah software XAMPP. Didalam software tersebut sudah terdapat beberapa
komponen software pendukung yaitu :
 Apache untuk webserver yang digunakan untuk menjalankan PHP.
 MySQL untuk DMBS (Database Management System) yang digunakan untuk
menyimpan content atau isi web didalam sebuah database.
 PhpMyadmin aplikasi MySQL berbasi web yang digunakan untuk merancang dan
membuat database dan table-table.
 Macromedia Dreamweaver, Notepad++ yang digunakan sebagai text editor.

Langkah-langkah :
1. aktifkan XAMPP
2. Aktifkan Apache, Aktifkan MySql
3. Aktifkan localhost pada Browser :Mozilla / Firefox / Chrome
4. Aktifkan Macomedia Dreamweaver – New – Template Page – PHP Tmplate
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- TemplateBeginEditable name="doctitle" -->
S o u r c e c o d e H T M L |Anitasindar, ST.MTI- 22

<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>
<body>
<?php

?>
</body>
</html>
5. Simpan File driver C – xampp – Htdocs - …*php
6. Aktifkan http://localhost/ pada Mozilla/Chrome/irefox
S o u r c e c o d e H T M L |Anitasindar, ST.MTI- 23

Pengantar

pengenalan.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>
<body>
<?php
echo"<h1><Center>Selamat Datang</center></h1>";
echo"<h2>Mari Belajar Script PHP</h2>";
echo"<h3>Harus bisa Friends</h3>";
echo'<h3>OK</h3>';
echo'<h3>__________________________________________________</h3>';
?>
<?php
echo"<h1>Identitas</h1>";
echo"<p>Nama : ............</p>";
echo"<p>NIM : ..............</p>";
echo"<p>Jurusan : ............</p>";
echo"<p>Tahun Akademik : ..............</p>";
echo'<p>__________________________________________________</p>';
?>
<?php
$nama_depan = 'LEONARDO';
$nama_belakang = 'DICAPRIO';
$film = 'TITANIC';
S o u r c e c o d e H T M L |Anitasindar, ST.MTI- 24

echo "<p>Film dengan judul $film diperankan oleh $nama_depan


$nama_belakang.</p>";
?>
<?php #Dasar Angka PHP
//Menetapkan variabel
$kuantitas = 35;
$harga = 5670.99;
$pajak = .05; // 5% pajak
$total = $kuantitas * $harga;
// menghitung total
$total = $kuantitas * $harga;
$total = $total + ($total * $pajak);
//format total
$total = number_format ($total, 2);
// hasil
echo '<p>Anda membeli <b>' . $kuantitas . '</b> sepasang sepatu dengan harga
<b>Rp.' . $harga .'</b>. Termasuk Pajak, Total menjadi <b>Rp.' .$total .'</b>.</p>';
?>

<?php
echo 'Selamat Datang di Web Saya, ';
///variabel
define ('SportFav', 'Swimming');
define ('ratingsport', '5');
echo '<br>';
echo 'Sport Favorite Saya adalah ';
echo SportFav;
echo '<br/>';
$ratingsport = 5;
echo 'Rating Sport berikut untuk swimming adalah : ';
echo ratingsport;
?>
</body>
</html>
S o u r c e c o d e H T M L |Anitasindar, ST.MTI- 25

method ="post" action="file.php"

FORM SUBMIT

formPhp.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
S o u r c e c o d e H T M L |Anitasindar, ST.MTI- 26

<body>
<?php
session_unset();
?>
<html>
<head>
<body>
<form method ="post" action="film1.php"
<p> Masukkan user name Anda:
<input type="text" name="user"/>
</p>
<p> Masukkan Password Anda:
<input type="password" name="pass"/>
<p>
</p>
<input type="submit" name="submit"/>
</p>
</form>
</body>
</html>
<body>
<?php
session_unset();
?>
<html>
<head>
<body>
<form method ="post" action="film1.php"
<p> Masukkan user name Anda:
<input type="text" name="user"/>
</p>
<p> Masukkan Password Anda:
<input type="password" name="pass"/>
<p>
</p>
<input type="submit" name="submit"/>
</p>
</form>
</body>
</html>
______________________________________________________________________

HALAMAN LOGIN

SOURCE CODE PHP


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
S o u r c e c o d e H T M L |Anitasindar, ST.MTI- 27

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<title>PSB Online 2011</title>
<style type="text/css">
<!--
.style4 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.style6 {font-family: Arial, Helvetica,
sans-serif; font-size: 12px;}
.style7 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: italic;
color: #F00;
}
-->
</style>
</head>
<body>
<form action="belajar_login.php"
method="post" name="Login" target="_self"
id="Login">
<table width="1343" border="0">
<tr>
<td colspan="6"
bgcolor="#FFCCFF"><img
src="apache_pb.gif" width="500"
height="130" /></td>
</tr>
<tr>
<td height="21" colspan="6"
bgcolor="#E5E5F0"><img
src="image/menu_bar.jpg" width="1340"
height="20"></td>
</tr>
<tr>
<td width="36">&nbsp;</td>
S o u r c e c o d e H T M L |Anitasindar, ST.MTI- 28

<td width="72">&nbsp;</td>
<td width="13">&nbsp;</td>
<td width="114">&nbsp;</td>
<td width="935">&nbsp;</td>
<td width="150">&nbsp;</td>
</tr>
<tr>
<td height="34">&nbsp;</td>
<td colspan="3" valign="top"
align="left" class="style4">User Login</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="34">&nbsp;</td>
<td valign="middle"
class="style6">Username</td>
<td>:</td>
<td><center><input name="username"
type="text" id="username" size="15" /></center></td>
<td class="style7">
<?php

?>
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="33">&nbsp;</td>
<td valign="middle"
class="style6">Password</td>
<td>:</td>
<td><input name="password"
type="password" id="password" size="15"
/></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="46">&nbsp;</td>
<td colspan="3" align="left">
<input name="BtnLogin"
type="submit" id="BtnLogin" value="Login"
/>
<a href="batal.php"><input
name="BtnBatal" type="button" id="BtnBatal"
value="Batal" />
</a></td>
<td>&nbsp;</td>
S o u r c e c o d e H T M L |Anitasindar, ST.MTI- 29

<td>&nbsp;</td>
</tr>
</table>
</form>
</body>
</html>

login1.php

belajar.php

batal.php
S o u r c e c o d e H T M L |Anitasindar, ST.MTI- 30

Design php

login11.php

Template Page – PHP Template - Design

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<title>Edit Design Php</title>
<style type="text/css">
<!--
.style6 {font-family: Arial, Helvetica,
sans-serif; font-size: 12px;}
.style7 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: italic;
color: #F00;
S o u r c e c o d e H T M L |Anitasindar, ST.MTI- 31

}
.style8 {color: #FFFFFF}
-->
</style>
</head>
<body>
<form action="periksa_login.php"
method="post" name="Login" target="_self"
id="Login">
<table width="1343" border="0">
<tr>
<td colspan="6"
bgcolor="#FFCCFF"><img
src="apache_pb.gif" width="500"
height="130" /></td>
</tr>

<tr>
<td colspan="3" bgcolor="#990066"><div align="center"
class="style8">PROFILE</div></td>
<td bgcolor="#990066"><div align="center" class="style8">ARCHIVE</div></td>
<td bgcolor="#990066"><div align="center" class="style8">LINK</div></td>
<td width="182" bgcolor="#990066"><div align="center"
class="style8">CONTACT</div></td>
</tr>
<tr>
<td height="28" colspan="5"><div align="center">User Login</div></td>
<td>&nbsp;</td>
</tr>
<tr>
<td width="369" height="32">&nbsp;</td>
<td width="171" valign="middle" bordercolor="#FFFFFF" bgcolor="#FFFFFF"
class="style6"> <div align="right">Username : </div></td>
<td width="26" bordercolor="#FFFFFF" bgcolor="#FFFFFF"><div
align="right"></div></td>
<td width="328" bordercolor="#FFFFFF" bgcolor="#FFFFFF"><div align="left">
<input name="username"
type="text" id="username" size="15" />
</div></td>
<td width="241" class="style7">
<?php

?></td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="32">&nbsp;</td>
<td valign="middle" bordercolor="#FFFFFF" bgcolor="#FFFFFF"
class="style6"><div align="right">Password : </div></td>
S o u r c e c o d e H T M L |Anitasindar, ST.MTI- 32

<td bordercolor="#FFFFFF" bgcolor="#FFFFFF"><div align="right"></div></td>


<td bordercolor="#FFFFFF" bgcolor="#FFFFFF"><input name="password"
type="password" id="password" size="15"
/></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="46">&nbsp;</td>
<td colspan="3" align="left" bordercolor="#FFFFFF" bgcolor="#FFFFFF">
<div align="center">
<input name="BtnLogin"
type="submit" id="BtnLogin" value="Login"
/>
<a href="index.php">
<input
name="BtnBatal" type="button" id="BtnBatal"
value="Batal" />
</a></div></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</form>
</body>
</html>
</body>
</html>
S o u r c e c o d e H T M L |Anitasindar, ST.MTI- 33

Array autoglobal $_POST


Fungsi : memproses data form
1. file proses_beasiswa.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<head>
</head>
<body>
<h2 style="text-align">FORMULIR BEASISWA</h2>
<form name="beasiswa" action="isi_form.php" method="post"
<p>Nama Depan: <input type="text" name="dNama" /><p>
<p>Nama Belakang: <input type="test" name="bNama" /><p>
<p><input type="reset" value="Clear"<nbsp;
<p><input type="submit" name="submit" value="Send" /><nbsp;
</form>
</body>
</html>

proses_beasiswa.php

2. isi_form.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Proses Formulir</title>
</head>
<body>
<h2>Proses Formulir Beasiswa</h2>
<?php
$namaDepan = $_POST['dNama'];
$namaBelakang = $_POST['bNama'];
echo "Terima kasih telah mengisi formulir secara benar",
"$namaDepan ".$namaBelakang ;
?>
</body>
</html>

isi_form.php
S o u r c e c o d e H T M L |Anitasindar, ST.MTI- 34

1. Membuat form html: tag.html, buatkan code html dengan format .html simpan
pada hotdocs.
2. Membuat scipt php: komentar1.php
3. Validasi data: validasi_input.php // menggunakan fungsi isset(), kosong
dianggap TRUE, gunakan NULL
// menggunakan kondisi if else, ifelse
4. <form action="validasi_form" method="post"> form html diawal simpan:
tag2.html
5. Kondisi if else, ifelse; file: validasi_form.php

1. form html: tag.html


File:

tag.html

Hasil :

code:
<!DOCTYPE html PUBLIC //tag form pada PHP // anitasindar//april2018>
<html>
<head>
<title>tag form pada PHP</title>
</head>
<body>
<!--form.html-->
<form action="komentar1.php" method="post">

<fieldset><legend>Masukkan informasi Anda pada form berikut:</legend>

<p><b>Name:</b><input type="text" name="name" size="30"


maxlength="40"/></p>

<p><b>Email:</b><input type="text" name="email" size="20"


maxlength="60"/></p>

<p><b>Gender:</b>
<input type="radio" name="Gender" value="M" /> Male
<input type="radio" name="Gender" value="F" /> Female</p>
S o u r c e c o d e H T M L |Anitasindar, ST.MTI- 35

<p><b>Age:</b><select name="age">
<option value="0-29">Under 30 </option>
<option value="30-60">Between 30 </option>
<option value="60+">Up 60 </option>
</select></p>

<p><b>Comment:</b><textarea name="comment" rows="3"


cols="40"></textarea></p>

</fieldset>

<div align="center"><input type="Submit" name=submit value=


"Submit Informasi" /></div>

</body>
</html>

2. Script PHP:komentar1.php

komentar1.php

hasil:

source code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"anitasindar//april2018//untuk mahasiswaku">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>

<body>
<?php
S o u r c e c o d e H T M L |Anitasindar, ST.MTI- 36

$name = $_REQUEST['name'];
$email = $_REQUEST['email'];
$comment = $_REQUEST['comment'];
?>

<?php
/*tidak digunakan
$_REQUEST['Age']
$_REQUEST['Gender']
$_REQUEST['Submit']
*/

echo "<h1><p><center>Thank You </center><b></h1>


<center>$name</b></center> <center>for your comment:<br />
$comment</center></p>
<p><center> We wiil tell you</center>
<i><center>$email</center></i>.</p>\n";
?>

</body>
</html>

4.Validasi data: validasi_form.php

validasi_input.php

Hasil:

Code:

<!DOCTYPE html PUBLIC " // anitasindar//april2018//4.Validasi data:


validasi_form.php">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Validasi Data</title>

</head>
<body>
<?php //validasi_input.php
S o u r c e c o d e H T M L |Anitasindar, ST.MTI- 37

//validasi name

if (! empty($_REQUEST['name'])) {
$name = $_REQUEST['name'];
} else
$name = NULL;
echo '<p class="error">Please Input Your Name!</p>';

//validasi email

if (! empty($_REQUEST['email'])) {
$email = $_REQUEST['email'];
} else
$email = NULL;
echo '<p class="error">Please Input Your Email!</p>';

//validasi comment

if (! empty($_REQUEST['comment'])) {
$comment = $_REQUEST['comment'];
} else
$name = NULL;
echo '<p class="error">Please Input Your Comment!</p>';

//validasi gender

if (! empty($_REQUEST['gender'])) {
$gender = $_REQUEST['gender'];

if ($gender == 'F') {
echo '<p><b>Good Afternoon Madam/Sir</b></p>';
} elseif ($gender == 'M') {
echo '<p><b>Good Afternoon Madam/Sir</b></p>';
} else { //cant empty
$gender = NULL;
echo '<p>Not "F" or "M"</p>';
}
} else { // $_REQUEST['gender']
$gender = NULL;
echo '<p><b>Please Cek your Gender Madam/Sir</b></p>';
}

//if finishing input ok


if ($name && $email && $gender && $comment ) {
echo "<p> Thank You <b>$name</b> for your comment:<br />
$comment</p>
<p>We wiil tell you <i>$email</i>.</p>\n";

} else { //nothing input


S o u r c e c o d e H T M L |Anitasindar, ST.MTI- 38

echo '<p class="error">Please Check Again Your Form.</p>';


}
?>
</body>
</html>

5. validasi_form kondisi if else, ifelse

Hasil:

validasi_form.php

Code:
<!DOCTYPE html PUBLIC " // training by:anitasindar//april2018//4.Validasi data:
validasi_form.php">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Validasi Data</title>
<style type="text/css" title="text/ css" media="all">;
.error {
font-weight: bold;
color:#C00
}
</style>
</head>
<body>
<!--form.html-->
<?php //validasi name
if (! empty($_REQUEST['name'])) {
$name = $_REQUEST['name'];
} else {
$name = NULL;
echo '<p class="error">Please Input Your Name!</p>';
S o u r c e c o d e H T M L |Anitasindar, ST.MTI- 39

}
?>

<?php //validasi email


if (! empty($_REQUEST['email'])) {
$email = $_REQUEST['email'];
} else {
$email = NULL;
echo '<p class="error">Please Input Your Email!</p>';
}
?>

<?php //validasi comment


if (! empty($_REQUEST['comment'])) {
$comment = $_REQUEST['comment'];
} else {
$name = NULL;
echo '<p class="error">Please Input Your Comment!</p>';
}
?>

<?php //validasi gender


if (isset($_REQUEST['gender'])) {
$gender = $_REQUEST['gender'];
if ($gender == 'M') {
echo '<p><b>Good Afternoon Madam/Sir?</b></p>';
} elseif ($gender == 'F') {
echo '<p><b>Good Afternoon Madam/Sir!</b></p>';
} else {
$gender = NULL;
echo '<p class="error">Not Female or Male!</p>';
}
} else {
$gender = NULL;
echo '<p class="error">Please Cek your Gender Madam/Sir</p>';
}
?>
<?php //if finishing input ok
if ($name && $email && $gender && $comment ) {
echo "<p> Thank You <b>$name</b> for your comment:<br />
$comment</p>
<p>We wiil tell you <i>$email</i>.</p>\n";
} else { //nothing input
echo '<p class="error">Please Check Again Your Form.</p>';
}

?>
</body>
</html>

Anda mungkin juga menyukai