Source Code H T M L

(1)



HTML



NOTEPAD



NOTEPAD++



MACROMEDIA DREAMWEAVER

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

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

<head>

<body>

<font size="13pt" face="Calibri" color="Blue"> PROFILE

(3)

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

<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

<head>

<title>Judul Dokumen</title> </head>

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

Membuat Garis Dalam Dokumen HTML <html>

<head>

<title>Membuat Garis</title> </head>

<body>

<h1 align="right">Ini adalah garis</h1>

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

(5)

<body>

<p><center><b><font face:"cambria">Formulir Pendaftaran<b><center></font face></p>

<tr>

<td><label for="nama">Nama Lengkap</label></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>

<td><textarea name="alamat"

id="alamat" cols="40" rows="3"></textarea></td> </tr>

<tr>

(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

size="20" name="agama" id="agama"/></td> </tr>

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

(7)

<td>

<p> Masukkan Username Anda; <input type="text" name="user"/> </p>

</tr> </td> <tr> <td>

<p>Masukkan Password Anda;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

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>

(8)

</tr>

<td height="51" id="tagline" valign="top" align="center">tiada hari tanpa kopi </td>

<tr>

</tr>

<tr>

</tr>

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

<tr>

</tr>

<tr>

</tr> <tr>

<tr>

(9)

<tr>

Rp. 50.000/kg </td> <td> </td>

<td class="detailText" valign="top" nowrap="nowrap"><a href="javascript:;">Kopi Siantar </a><br />

Rp. 50.000/kg </td> <td> </td>

<td class="detailText" valign="top" nowrap="nowrap"><a href="javascript:;">Kopi Sumatera </a><br />

Rp. 50.000/kg </td> <td> </td>

<td class="detailText" valign="top" nowrap="nowrap"><a href="javascript:;">Kopi Merdeka </a><br />

Rp. 50.000/kg </td> </tr>

<tr>

<tr>

</tr>

<tr>

<td class="detailText" valign="top" nowrap="nowrap"><a href="javascript:;">Kopi Sabang </a><br />

(10)

<td class="detailText" valign="top" nowrap="nowrap"><a href="javascript:;">Kopi Papua </a><br />

Rp. 50.000/kg </td> <td> </td>

<td class="detailText" valign="top" nowrap="nowrap"><a href="javascript:;">Kopi Lampung </a><br />

Rp. 50.000/kg </td> <td> </td>

<td class="detailText" valign="top" nowrap="nowrap"><a href="javascript:;">Kopi Luwak </a><br />

Rp. 50.000/kg </td> </tr>

<tr>

</table> </td>

<tr>

</table> </body> </html>

Drop Down Menu

(11)

<title>Belajar WEB</title>

</head> <body>

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

<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

(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

....

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:

(13)

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

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

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

(15)

</head>

<ul>

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

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;

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-weight:bold; }

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

M e n u 2

<title>belajar web</title> <style>

/* RESET */

(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-weight:bold;

display:inline;/*membuat tampilan list sejajar ke samping*/

padding:0px 2px 0px 2px; background-color:blue; }

(18)

<body>

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

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

<title>Untitled Document</title> </head>

<body>

</body> </html>

Personal Web.htm

</head> <body>

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

(20)

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

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

(22)

<title>Untitled Document</title>

</head> <body> <?php

?> </body> </html>

5. Simpan File driver C – xampp – Htdocs - …*php

(23)

Pengantar

pengenalan.php

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

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

(25)

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

FORM SUBMIT

</head> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

(26)

<form method ="post" action="film1.php" <p> Masukkan user name Anda:

<p> Masukkan Password Anda:

</p>

<form method ="post" action="film1.php" <p> Masukkan user name Anda:

<p> Masukkan Password Anda:

</p>

HALAMAN LOGIN

SOURCE CODE PHP

(27)

<head>

</head> <html> <head>

content="text/html; charset=iso-8859-1" /> <title>PSB Online 2011</title>

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

<form action="belajar_login.php"

method="post" name="Login" target="_self" id="Login">

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

(28)

<tr>

<td height="34"> </td> <td colspan="3" valign="top"

align="left" class="style4">User Login</td> <td> </td>

<tr>

<td height="34"> </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 height="33"> </td> <td valign="middle"

class="style6">Password</td> <td>:</td>

<td><input name="password"

type="password" id="password" size="15" /></td>

<tr>

<td height="46"> </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" />

(29)

</table> </form> </body> </html>

login1.php

belajar.php

(30)

Design php

login11.php

Template Page – PHP Template - Design

</head> <html> <head>

content="text/html; charset=iso-8859-1" /> <title>Edit Design Php</title>

.style6 {font-family: Arial, Helvetica, sans-serif; font-size: 12px;}

.style7 {

font-family: Arial, Helvetica, sans-serif; font-size: 12px;

(31)

}

.style8 {color: #FFFFFF} -->

</style> </head> <body>

<form action="periksa_login.php"

method="post" name="Login" target="_self" id="Login">

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

</tr> <tr>

<td width="171" valign="middle" bordercolor="#FFFFFF" bgcolor="#FFFFFF" class="style6"> <div align="right">Username : </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>

<tr>

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

<tr>

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

(33)

Array autoglobal $_POST

Fungsi : memproses data form 1. file proses_beasiswa.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

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

</body> </html>

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>

proses_beasiswa.php

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

<body>

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

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

<p><b>Gender:</b>

(35)

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

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

</head>

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

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

<title>Validasi Data</title>

</head> <body>

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

(38)

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

?> </body> </html>

5. validasi_form kondisi if else, ifelse

Hasil:

Code: <!DOCTYPE html PUBLIC " // training by:anitasindar//april2018//4.Validasi data: validasi_form.php">

<title>Validasi Data</title>

font-weight: bold; color:#C00 }

</style> </head> <body>

<?php //validasi name

if (! empty($_REQUEST['name'])) { $name = $_REQUEST['name']; } else {

$name = NULL;

echo '<p class="error">Please Input Your Name!</p>';

(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>'; }