Belajar HTML dan PHP sederhana
HyperText Markup Language (HTML) adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah Penjelajah web
Internet dan formating hypertext sederhana yang ditulis kedalam berkas
format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.
Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah
kata dan disimpan kedalam format ASCII normal sehingga menjadi home page dengan perintah-perintah HTML.
Pengertian PHP
PHP adalah singkatan dari "PHP: Hypertext Preprocessor", yang merupakan
sebuah bahasa scripting yang terpasang pada HTML. Sebagian besar sintaks mirip
dengan bahasa C, Java dan Perl, ditambah beberapa fungsi PHP yang spesifik.
Tujuan utama penggunaan bahasa ini adalah untuk memungkinkan perancang web
menulis halaman web dinamik dengan cepat.
Hubungan PHP dengan HTML
Halaman web biasanya disusun dari kode-kode html yang disimpan dalam
sebuah file berekstensi .html. File html ini dikirimkan oleh server (atau file) ke
browser, kemudian browser menerjemahkan kode-kode tersebut sehingga
menghasilkan suatu tampilan yang indah. Lain halnya dengan program php, program
ini harus diterjemahkan oleh web-server sehingga menghasilkan kode html yang
dikirim ke browser agar dapat ditampilkan. Program ini dapat berdiri sendiri ataupun
disisipkan di antara kode-kode html sehingga dapat langsung ditampilkan bersama
dengan kode-kode html tersebut.
1. Prog Text.Html
Pengertian PHP
PHP adalah singkatan dari "PHP: Hypertext Preprocessor", yang merupakan
sebuah bahasa scripting yang terpasang pada HTML. Sebagian besar sintaks mirip
dengan bahasa C, Java dan Perl, ditambah beberapa fungsi PHP yang spesifik.
Tujuan utama penggunaan bahasa ini adalah untuk memungkinkan perancang web
menulis halaman web dinamik dengan cepat.
Hubungan PHP dengan HTML
Halaman web biasanya disusun dari kode-kode html yang disimpan dalam
sebuah file berekstensi .html. File html ini dikirimkan oleh server (atau file) ke
browser, kemudian browser menerjemahkan kode-kode tersebut sehingga
menghasilkan suatu tampilan yang indah. Lain halnya dengan program php, program
ini harus diterjemahkan oleh web-server sehingga menghasilkan kode html yang
dikirim ke browser agar dapat ditampilkan. Program ini dapat berdiri sendiri ataupun
disisipkan di antara kode-kode html sehingga dapat langsung ditampilkan bersama
dengan kode-kode html tersebut.
1. Prog Text.Html
<HTML>
<HEAD>
<TITLE>Struktur Dokumen HTML</TITLE>
</HEAD>
<BODY>
Hello World apa kabar
</BODY>
</HTML>
2. Prog Heading.Html
<HTML>
<HEAD>
<TITLE>Heading</TITLE>
</HEAD>
<BODY>
<H1>Heading level 1</H1>
<H2>Heading level 2</H2>
<H3>Heading level 3</H3>
<H4>Heading level 4</H4>
<H5>Heading level 5</H5>
<H6>Heading level 6</H6>
</BODY>
</HTML>
3. Prog Paragraf.Html
<HTML>
<HEAD>
<TITLE>Paragraf</TITLE>
</HEAD>
<BODY>
<P ALIGN="right">
Beberapa tahun yang lalu,
seorang hartawan meninggal dunia sedangkan ia tidak
memiliki ahli waris. Kepada pengacaranya, ia meninggalkan dua
buah surat yang disegel.Yang sebuah berisi permintaan agar jenazahnya
dikuburkan pada jam empat dini hari. Surat yang kedua belum diketahui isinya
karena disampulnya tertulis pesan agar dibuka seusai pemakaman jenazah
<P ALIGN="center">
Sesuai dengan wasiat, jenazah itu dikebumikan pada pukul
empat dini hari. Karena tidak lazimnya waktu pemakaman pada jam tersebut, yang
ikut mengantar jenazahnya hanya empat orang kawannya yang paling setia
<P ALIGN="left">
Seusai pemakaman, surat wasiat yang kedua dibuka. Betapa
terkejutnya pengacara ketika membaca isinya, ialah wasiat bahwa seluruh harta
warisan (yang bernilai lebih dari 800.000 pound) dibagi rata kepada orang-orang
yang mengantarkan jenazahnya ke pemakaman. Dengan demikian, yang berhak
memperoleh harta yang banyak itu hanya empat orang, sebagai imbalan bagi
kesetiaan mereka. Sumber humor, kisah dan pepatah
</P>
</BODY>
</HTML>
4. Prog Blockquote.Html
<HTML>
<HEAD>
<TITLE>BLOCKQUOTE</TITLE>
</HEAD>
<BODY>
<H3>Sesuatu yang tidak perlu
dicoba</H3>
<BLOCKQUOTE>
Sesuatu yang kelihatan mengasyikkan tapi sebenarnya lebih
banyak menambah masalah pada remaja adalah narkoba, seks, alkohol dan merokok.
Jangan sekali-kali mencoba jika tidak ingin membuat masalah baru
</BLOCKQUOTE>
</BODY>
</HTML>
5. Prog Performated.Html
<HTML>
<HEAD>
<TITLE>Preformatted Text</TITLE>
</HEAD>
<BODY>
<PRE>
w w w . a r c . i t b . a c . i d
tulisan diatas menggunakan spasi dan ini adalah baris baru
daftar situs menarik di itb
------------------------------
radiokampus.ee.itb.ac.id
www.arc.itb.ac.id
</PRE>
</BODY>
</HTML>
6. Prog_Pindah baris.Html
<HTML>
<HEAD>
<TITLE>Line Break</TITLE>
</HEAD>
<BODY>
<P>Banyak cara yang dapat digunakan untuk
melakukan instalasi FreeBSD. Namun
ada tiga cara yang paling
sering dilakukan , yaitu :
<BR> Instalasi melalui FTP
<BR> Instalasi melalui CDROM
<BR> Instalasi melalui partisi DOS
</BODY>
</HTML>
7. Prog Ukuran_font.Html
<HTML>
<HEAD>
<TITLE>Ukuran font</TITLE>
</HEAD>
<BODY>
<FONT SIZE=1>Ukuran font 1</FONT>
<FONT SIZE=2>Ukuran font 2</FONT>
<FONT SIZE=3>Ukuran font 3</FONT>
<FONT SIZE=4>Ukuran font 4</FONT>
<FONT SIZE=5>Ukuran font 5</FONT>
<FONT SIZE=6>Ukuran font 6</FONT>
<FONT SIZE=7>Ukuran font 7</FONT>
</BODY>
</HTML>
8. Prog Jenis_font.Html
<HTML>
<HEAD>
<TITLE>Jenis Font</TITLE>
</HEAD>
<BODY>
<FONT SIZE=5>
<FONT FACE =
"Arial">Arial , contoh AC Milan <P>
<FONT FACE =
"Verdana">Verdana , contoh Persebaya <P>
<FONT FACE =
"Tahoma">Tahoma , contoh Indonesia <P>
</BODY>
</HTML>
9. Prog Warna_font.Html
<HTML>
<HEAD>
<TITLE>Warna Font</TITLE>
</HEAD>
<BODY>
<FONT SIZE=5>
<FONT COLOR=
"red">PSM Makassar <P>
<FONT COLOR = "#FF0000">tetap
PSM Makassar kan <P>
<FONT COLOR =
"#00FF00">Ini baru Persebaya <P>
</BODY>
</HTML>
10. Prog Link.Html
<HTML>
<HEAD>
<TITLE>Link</TITLE>
</HEAD>
<BODY>
<A
NAME="lengkap">Pemain-pemain AC Milan menurut abjad</A>
<BLOCKQUOTE>
<P>Abbiati ,<A
HREF="#abbiati">info lengkap</A>
<P>Ayala
<P>Ambrosini
<P>Albertini
<P>Boban
<P>
<A HREF="Sambungan.html">kalo
mau tahu lagi klik
disini</A>
</BLOCKQUOTE>
<P><A
NAME="abbiati">Abbiati</A>
<BLOCKQUOTE>
<P>Kiper ketiga timnas Italia runner up Euro 2000
<BR>Kiper utama U-21 juara Piala Eropa U-21
<BR>Kiper utama AC Milan juara Seri-A 19981-1999
</BLOCKQUOTE>
<P><A
HREF="#lengkap">kembali ke atas</A>
</BODY>
</HTML>
11. Prog Sambungan.Html
<HTML>
<HEAD>
<TITLE>Link tujuan</TITLE>
</HEAD>
<BODY>
<P ALIGN="center"> Maaf, hanya
sedikit
<BR>Chamot
<BR>Dida
<BR>Shevchenko
<BR><A
HREF="link.html">kembali</A>
</BODY>
</HTML>
12. Prog Kolom_Text.html
<HTML>
<HEAD>
<TITLE>Tabel</TITLE>
</HEAD>
<BODY>
<TABLE>
<CAPTION>Seputar Calciomeecato</CAPTION>
<TR>
<TH>Nama Klub</TH>
<TH>Berita</TH>
</TR>
<TR>
<TD>Fiorentina</TD>
<TD>Fiorentina mendatangkan Nuno
Gomes untuk menggantikan sang legenda Batigol</TD>
</TR>
<TR>
<TD>Lazio</TD>
<TD>Lazio menjadi klub dengan rekor
pembelian pemain sebesar 240 miliar lira!</TD>
</TR>
<TR>
<TD>Perugia</TD>
<TD>Ahn Jung-Whan resmi menjadi
pemain pinjaman Perugia</TD>
</TR>
<TR>
<TD>Udinese</TD>
<TD>Pemain Spanyol berusia 23
tahun, Luis Helguera menjadi pemain Udinese <BR>
dengan transfer senilai 349 juta
lira</TD>
</TR>
</TABLE>
</BODY>
</HTML>
13. Prog Cell_kolom.html
<HTML>
<HEAD>
<TITLE>Tabel dengan CELLSPACING dan
CELLPADDING</TITLE>
</HEAD>
<BODY>
<TABLE BORDER="3" CELLPADDING="5"
CELLSPACING="5" WIDTH="85%">
<TR>
<TD WIDTH="43%">baris 1,
kolom 1</TD>
<TD WIDTH="57%">baris 1,
kolom 2</TD>
</TR>
<TR>
<TD WIDTH="43%">baris 2,
kolom 1</TD>
<TD WIDTH="57%">baris 2,
kolom 2</TD>
</TR>
</TABLE>
</BODY>
</HTML>
14. Program_checkbox.html
<HTML>
<HEAD>
<TITLE>Form Input dengan Check box</TITLE>
</HEAD>
<BODY>
<P>Pilih yang Anda suka </P>
<P>Daftar Jurusan</P>
<P>
<INPUT TYPE="checkbox" NAME="C1"
CHECKED>Teknik Elektro<BR>
<INPUT TYPE="checkbox"
NAME="C2">Pertanian<BR>
<INPUT TYPE="checkbox"
NAME="C3">Kedokteran<BR>
<INPUT TYPE="checkbox"
NAME="C4">Teknik Informatika
</P>
</BODY>
</HTML>
15. Program_Radiobutton.html
<HTML>
<HEAD>
<TITLE>Form Input dengan Radio box</TITLE>
</HEAD>
<BODY>
<P>Pilih salah satu </P>
<P>Usia Anda</P>
<P>
<INPUT TYPE="radio" VALUE="V1"
CHECKED NAME="R1">< 15 Tahun<BR>
<INPUT TYPE="radio" VALUE="V2"
NAME="R1">15-19 Tahun<BR>
<INPUT TYPE="radio" VALUE="V3"
NAME="R1">19-25 Tahun<BR>
<INPUT TYPE="radio" VALUE="V4"
NAME="R1">25-35 Tahun<BR>
<INPUT TYPE="radio" VALUE="V5"
NAME="R1"> > 35 Tahun<BR>
</P>
</BODY>
</HTML>
16. Program Buku_tamu.html
<HTML>
<HEAD>
<TITLE>BUKU TAMU</TITLE>
</HEAD>
<BODY>
<H3>
<P ALIGN="center">BUKU TAMU</P>
</H3>
<FORM METHOD="POST"
ACTION="thanks.html">
<TABLE BORDER="0"
CELLPADDING="2" WIDTH="100%">
<TR>
<TD
WIDTH="3%">Nama</TD>
<TD
WIDTH="1%">:</TD>
<TD
WIDTH="88%"><INPUT TYPE="text" NAME="nama"
SIZE="20"></TD>
</TR>
<TR>
<TD
WIDTH="8%">Asal</TD>
<TD
WIDTH="4%">:</TD>
<TD
WIDTH="88%"><INPUT TYPE="text" NAME="asal"
SIZE="20"></TD>
</TR>
<TR>
<TD
WIDTH="8%">Email</TD>
<TD
WIDTH="4%">:</TD>
<TD
WIDTH="88%"><INPUT TYPE="text" NAME="email"
SIZEe="20" size="20"></TD>
</TR>
<TR>
<TD WIDTH="8%"
VALIGN="top">Homepageku</TD>
<TD WIDTH="4%"
VALIGN="top">:</TD>
<TD
WIDTH="88%"><INPUT TYPE="radio" VALUE="V1"
CHECKED NAME="R1">Bagus sekali<BR>
<INPUT
TYPE="radio" VALUE="V2"
NAME="R1">Bagus<BR>
<INPUT
TYPE="radio" VALUE="V3" NAME="R1">Biasa
saja<P> </TD>
</TR>
</TABLE>
<P><INPUT TYPE="submit"
VALUE="Kirim" NAME="B1"> <INPUT
TYPE="reset" VALUE="Batal"
NAME="B2"></P>
</FORM>
</BODY>
</HTML>
1. Program Gbinput.html
<html>
<head>
<title>Buku Tamu</title>
</head>
<body>
<p>ISI BUKU TAMU<br>
</p>
<form method="post"
action="gbinput.php">
<table cellpadding="3"
cellspacing="0" width="100%">
<tr>
<td width="33%">Nama</td>
<td width="2%">:</td>
<td width="65%"><input
type="text" name="name" size="25"></td>
</tr>
<tr>
<td width="33%">E-mail</td>
<td width="2%">:</td>
<td width="65%"><input
type="text" name="mail" size="25"></td>
</tr>
<tr>
<td width="33%"
valign="top">Pesan</td>
<td width="2%"
valign="top">:</td>
<td width="65%"><textarea
rows="4" name="message"
cols="25"></textarea></td>
</tr>
</table>
<p><br>
<input type="submit" value="Submit"
name="B1">
<input type="reset" value="Reset"
name="B2">
<a href="bukutamu.php">Lihat</a>
<a href="bukutamu.php">buku</a> <a
href="bukutamu.php">tamu</a></p>
</form>
</body>
</html>
2. Program Gbconfig.php
<?php
$dbhost = "localhost";
$dbuser = "root";
$dbpass = "";
$dbname = "databaseku";
mysql_connect($dbhost, $dbuser, $dbpass) or die
("Koneksi ke MySQL gagal!");
mysql_select_db($dbname);
$date = date("Y-m-d H:i:s");
?>
3. Program Gbinput.php
<?php
require("gbconfig.php");
$valid_name = "^[a-z]+[.,a-z ]+$";
$valid_mail = "^([._a-z0-9-]+[._a-z0-9-]*)@(([a-z0-9-]+\.)*([a-z0-9-]+)(\.[a-z]{2,3}))$";
if (!eregi($valid_name, $name) || !eregi($valid_mail,
$mail)) {
$error = TRUE;
}
if ($error) {
if
(!eregi($valid_name, $name)) {
echo "Your name is invalid!";
}
elseif (!eregi($valid_mail, $mail)) {
echo "Your e-mail is invalid!";
}
} else {
$query = "INSERT INTO guestbook (name , mail, date, message)
VALUES ('$name','$mail','$date','$message')";
$result = mysql_query($query);
if
($result) {
echo
"Your submission has been executed
successfully!";
}
else {
echo
"Sorry, an error has occured during executing your
submission!";
}
}
?>
4. Program bukutamu.php
<html>
<head>
<title>Buku Tamu</title>
</head>
<body>
<p align="center">LIHAT BUKU TAMU</p>
<?php include("gbshow.php"); ?>
</body>
</html>
5. Program Gbshow.php
<?php
echo "<table cellpadding=\"3\"
cellspacing=\"0\" width=\"100%\">";
require("gbconfig.php");
$query = "SELECT * FROM guestbook ORDER BY id
DESC";
$result = mysql_query($query);
while ($row = mysql_fetch_array($result)) {
echo ("
<tr>
<td width=\"100%\"
colspan=\"3\"><hr></td>
</tr>
<tr>
<td
width=\"21%\">Tanggal</td>
<td
width=\"2%\">:</td>
<td
width=\"77%\">$row[date]</td>
</tr>
<tr>
<td
width=\"21%\">Nama</td>
<td
width=\"2%\">:</td>
<td
width=\"77%\">$row[name]</td>
</tr>
<tr>
<td
width=\"21%\">E-mail</td>
<td
width=\"2%\">:</td>
<td
width=\"77%\">$row[mail]</td>
</tr>
<tr>
<td
width=\"21%\">Pesan</td>
<td
width=\"2%\">:</td>
<td
width=\"77%\">$row[message]</td>
</tr>
");
}
echo "</table>";
?>
Comments
Post a Comment
hiduplah dengan berkreativitas...dan capailah cita2mu setinggi gunung himalaya...dan jangan lupa untuk berkomentar...demi kemajuan kita bersama juga demi bangsa indonesia tercinta...