Just another WordPress.com site

Dalam html5 terdapat elemen canvas (<canvas>) yang merupakan sebuah area untuk menggambar grafik dengan bantuan script pendukung, misal javascript dan css. Elemen canvas juga bisa digunakan untuk menyusun animasi sederhana.

Contoh penggunaan canvas

Login Form dengan PHP

Selanjutnya kita akan belajar untuk membuat aplikasi form login sederhana menggunakan PHP. Login form ini tidak menggunakan database. Password dan username langsung dimasukkan ke dalam kode program..
Spesifikasi untuk login form ini adalah:

>> Terdapat scripting JavaScript untuk validasi awal (field tidak boleh kosong, masukan id dan password harus huruf).
>> Jika field kosong dan langsung di-submit, kembalikan fokus kursor ke field pertama (id)
>> Ada validasi sisi server (dari PHP) untuk memastikan bahwa nilai
field adalah string.
>> Jika nilai id dan password sesuai dengan pre-defined value di variabel, munculkan pesan selamat datang dan cetak nilai id. Sebaliknya, jika tidak sesuai, tampilkan pesan kegagalan.

Ketikkan kode program sebagai berikut :

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”> 

<html>

<head>

<title>Login Form by : Renjana</title>

</head>

<body background=”img25.jpg” onLoad=”document.form1.user.focus();”>

<form name=”form1″ method=”post” action=”login.php”>
<div width=”400″ height=”400″>

<div>

<div align=”center”><font face=”Arial” color=”#FFFFFF” size=”5″><strong><br>User Name :</strong>

<br>

<font face=”Arial” color=”#FFFFFF” size=”5″><input type=”text” name=”user” size=”35″ value=”” style=”background-color:#FFFFFF”>

<br>

<br>

<strong color=”#FFFFF”>Password : </strong>

<br>

<input type=”password” name=”pass” size=”35″ style=”background-color:#FFFFFF”>

<br>

<br>

</div>

</div>

<br>

<div align=”center”>

<input type=”submit” name=”submit” value=” L O G I N ” onClick=”check()”>

</div>

<div id=”footer” align=”left”><br>

</div>

</div>
</div>
</form>

<script type=”text/javascript”>

function error1()
{
alert(‘Masukkan User Name dan Password Terlebih Dahulu ‘);
}

function check()
{
if(form1.pass.value == “” || form1.user.value==””)
{
error1();
}
}
</script>

</body>

</html>

dan beri nama file “login.html”

selanjutnya ketikkan kode program di bawah ini dan beri nama file “login.php”

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

<head>

<title>Form Administrator</title>

</head>

<body>

<?php

if(($_POST[‘user’]==’renjana’) AND ($_POST[‘pass’]==’renjana’)) {

echo ‘<br><br><center>Selamat Datang di Halaman ini USER ‘ . $_POST[‘user’];

}

else {

echo “<br><br><br><body text=’red’><strong><center>INVALID LOGIN<br><br><a href=’login.html’><h4>Kembali ke Login</h4></a></center></strong></body>”;

}

?>

</body>

</html>

Interface yang dibuat akan tampak seperti gambar berikut:

 

 

 

 

 

jika salah satu form saja tidak diisikan sesuai dengan yang diperintahkan maka akan ditampilkan interface seperti ini:

 

 

 

 

 

 

 

 

 

 

 

Namun jika form “user name ” dan password sudah diisikan dengan benar, maka tampilan program adalah seperti ini:

 

 

 

 

 

Selamat memcoba…semoga bermanfaat….AAAAAAAAAAAAMIIIIIIIIIIIIIINNNNN

tabel-fleksibel

Kali ini saya akan mencoba untuk sharing tentang cara membuat tabel fleksibel dengan PHP. DI sini akan disiapkan kode html dan php. Kode html untuk mengenerate tabel yang digunakan yaitu berapa jumlah kolomnya,jumlah barisnya, dan jumlah total cellnya. Dan kode php sebagai hasil dari generate tabel yang dilakukan pada kode html.

langkah yang pertama adalah menuliskan sourcecode berikut pada script html:

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Studi Kasus 1</title>
</head>
<body>
<form method=”post” action=”fleksibel.php”>
<p><strong>TABEL FLEKSIBEL</strong></p>
<table width=”277″ border=”0″>
<tr>
<td width=”89″>Rows</td>
<td width=”172″><strong>: </strong><input name=”RowsTotal” type=”text” id=”RowsTotal” onKeyUp=”getmax();” onfocus=”this.select();”></td>
</tr>
<tr>
<td><label>Columns</label></td>
<td><strong>: </strong><input name=”ColumnsTotal” type=”text” id=”ColumnsTotal” onKeyUp=”getmax();” onfocus=”this.select();”></td>
</tr>
<tr>
<td>Cell Total </td>
<td><strong>: </strong><input name=”CellsTotal” type=”text” id=”CellsTotal” onKeyUp=”getmax();” onFocus=”this.select();”></td>
</tr>
<tr>
<td>Max Cells </td>
<td><strong>: </strong><input name=”maxcells” type=”text” id=”maxcells” readonly=”readonly” style=”background-color:#999999″>
</td>
</tr>
<tr>
<td>
<div align=”center”>
<br />
<input type=”reset” name=”Reset” value=”Reset”>
</div></td>
<td>
<div align=”right”>
<br />
<input type=”submit” name=”Generate” value=”Generate”>
</div></td>
</tr>
</table>
</form> 

<script language=”JavaScript” type=”text/javascript”>
<!–
function getmax() {
var R = parseInt(document.getElementById(‘RowsTotal’).value);
var C = parseInt(document.getElementById(‘ColumnsTotal’).value);
var X = parseInt(document.getElementById(‘CellsTotal’).value);
var cellmax = document.getElementById(‘maxcells’);
var total = ‘N/A’;
total = R * C;
cellmax.value = new String(total);
if (X > total)
{
alert(‘Limit Exceed, max cells is ‘ + total);
document.getElementById(‘CellsTotal’).value = new String();
}
}
//–>
</script>

selanjutnya ketikkan sourcecode berikut pada script php, dan beri nama file dengan “fleksibel.php”

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Studi Kasus 1</title>
</head>
<body>
<?php
$rows = 1;
$columns = 1;
$cells = 1;
?> 

<?php $rows = (int) $_POST[“RowsTotal”]; ?>
<?php $columns = (int) $_POST[“ColumnsTotal”]; ?>
<?php $cells = (int) $_POST[“CellsTotal”]; ?>

Kamu memilih : <?php echo $rows; ?> rows<br />
Kamu memilih : <?php echo $columns; ?> columns<br />
Dan Kamu membutuhkan :<?php echo $cells; ?> cells<br />
<br /><br />
<?php
$width = $columns * 75;
echo “<table width=”.$width.” border=1>”;
$rw = 0;
$cel = 1;
while ($rw < $rows && $cel <= $cells)
{
echo “<tr>”;
$cl = 0;
while ($cl < $columns)
{
if ($cel <= $cells)
{
echo “<td><div align=center>”.$cel.”</div></td>”;
$cel++;
}
$cl++;
}
echo “</tr>”;
$rw++;
}
echo “</table>”;
?>
</body>

berikut adalah hasil tampilan saat menjalankan program:

Isi pada form yang sudah disediakan, dan lihat hasilnya…paling tidak hasilnya akan menjadi seperti ini:

Selamat mencoba..ūüôā

Dengan bahasa pemrograman PHP kita bisa dengan mudah menyapa user sesuai dengan waktu saat user meggunakan wesite kita. Misalkan dengan membuat fungsi greeting yang menerima argumen integer jam (format 24 jam) dan mengembalikan nilai string (Selamat pagi, Selamat Siang, atau Selamat Malam). Jadi halaman web ini akan menyapa pengunjung berdasarkan waktu saat pengunjung masuk.

Di bawah ini adalah source code fungsi greeting dengan menggunakan PHP.

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>tugas Rumah</title>
</head>

<body>
<center>

<h1>

<?php
function greeting()
{
$date = date (“H : i”);
if ($date>=00 and $date<11) {
echo “Selamat Pagi… “;
} else if ($date>=11 and $date<15) {
echo “Selamat Siang… “;
} else if ($date>=15 and $date<18) {
echo “Selamat Sore… “;
} else if ($date>=18 and $date<23) {
echo “Selamat Malam… “;
}else echo “Waktu salah)”;
}
?>

<?php
greeting();
?>
<br>
</h1>

<h3> Sekarang adalah

<?php
//Array Hari
$array_hari = array(1=>”Senin”,”Selasa”,”Rabu”,”Kamis”,”Jumat”,”Sabtu”,”Minggu”);
$hari = $array_hari[date(“N”)];
//Format Tanggal
$tanggal = date (“d”);
//Array Bulan
$array_bulan = array(1=>”Januari”,”Februari”,”Maret”,”April”,”Mei”,”Juni”,”Juli”,”Agustus”,”September”,”Oktober”,”November”,”Desember”);
$bulan = $array_bulan[date(“n”)];
//Format Tahun
$tahun = date(“Y”);
//Menampilkan hari dan tanggal
echo “hari $hari, $tanggal – $bulan – $tahun”;
?>
<br>

Saat ini waktu menunjukkan pukul
<?php
//penulisan waktu
$date = date (“H : i”);
echo “$date WIB”;
?>
</h3>
</center>

</body>
</html>

 

dan hasil tampilannya adalah sebagai berikut:

JavaScript terbentuk atas elemen-elemen fundamental. Salah satu kemampuan utama JavaScript adalah mengontrol objek-objek di halaman web. Sehubungan dengan hal ini, ada beragam pendekatan yang bisa digunakan untuk mengacu atau mengakses elemen-elemen objek.

Adapun program aplikasi pemesanan makanan/minuman yang dibuat memiliki spesifikasi antara lain:

  • Field Harga, Jumlah Total, Diskon, dan Jumlah Dibayar bersifat read-only
  • Jika¬† pesan¬† disi,¬† maka¬† field¬† jumlah¬† total¬† secara¬† otomatis¬† akan menghitung totalnya, termasuk juga field jumlah dibayar.
  • Rumus:

Jumlah Total = ‚ąĎ (harga * pesan)

Jumlah Dibayar = Jumlah Total ‚Äď Diskon

  • Jika¬† pembelian¬† lebih¬† dari¬† 50000,¬† maka¬† field¬† diskon¬† secara¬† otomatis akan¬† berisi¬† nilai¬† diskon¬† sebesar¬† 10000¬† (tidak¬† berlaku¬† kelipatannya) dan otomatis pula field jumlah dibayar akan berkurang
  • Jika tombol Batal diklik, maka semua field Pesan akan dibersihkan.

Ketikkan sript seperti di bawah ini:

<!DOCTYPE html>
<html lang=”en”><head>
<title>Form Pemesanan Berbasis JavaScript</title>
</head>
<body background=”Picture1.jpg”>
<script language=”JavaScript” type=”text/javascript”>
<!–
function hitungPesan(){
var myForm = document.form1;
var bakso = 12000 * eval(myForm.menu1.value);
var soto = 10000 * eval(myForm.menu2.value);
var mie = 15000 * eval(myForm.menu3.value);
var degan = 5000 * eval(myForm.menu4.value);
var campur = 7000 * eval(myForm.menu5.value);
var hasil = bakso + soto + mie + degan + campur;

if (hasil >= 50000){
myForm.Total.value = hasil;
myForm.Diskon.value = 10000;
myForm.Bayar.value = hasil – 10000;
}
else {
myForm.Total.value = hasil;
myForm.Diskon.value = 0;
myForm.Bayar.value = hasil – 0;
}

myForm.bayar1.value=bakso;
myForm.bayar2.value=soto;
myForm.bayar3.value=mie;
myForm.bayar4.value=degan;
myForm.bayar5.value=campur;
}

//–>
</script>
<h1>FORM PEMESANAN MAKANAN</h1>
<form name=”form1″ action=”#”>
<table border=”2″>
<tr>
<th>No</th>
<th>Makanan/Minuman</th>
<th>Harga</th>
<th>Pesan</th>
<th>Total</th>

</tr>
<tr>
<td width=”15″>1</td>
<td width=”200″>Bakso Istimewa</td>
<td width=”150″>@<input type=”text” name=”bakso” value=”12000″ size=”15″ disabled=”true”/></td>
<td width=”150″><input type=”text” name=”menu1″ value=”0″ onChange=”hitungPesan()”/></td>
<td width=”150″ align=”right”><input type=”text” name=”bayar1″ disabled=”true”/></td>
</tr>

<tr>
<td>2</td>
<td>Soto Spesial</td>
<td>@<input type=”text” name=”soto” value=”10000″ size=”15″ disabled=”true”/></td>
<td><input type=”text” name=”menu2″ value=”0″ onChange=”hitungPesan()”/></td>
<td><input type=”text” name=”bayar2″ disabled=”true”/></td>
</tr>

<tr>
<td>3</td>
<td>Mie Ayam Super</td>
<td>@<input type=”text” name=”mie” value=”15000″ size=”15″ disabled=”true”/></td>
<td><input type=”text” name=”menu3″ value=”0″ onChange=”hitungPesan()”/></td>
<td><input type=”text” name=”bayar3″ disabled=”true”/></td>
</tr>

<tr>
<td>4</td>
<td>Es Degan</td>
<td>@<input type=”text” name=”degan” value=”7000″ size=”15″ disabled=”true”/></td>
<td><input type=”text” name=”menu4″ value=”0″ onChange=”hitungPesan()”/></td>
<td><input type=”text” name=”bayar4″ disabled=”true”/></td>
</tr>

<tr>
<td>5</td>
<td>Es Campur</td>
<td>@<input type=”text” name=”campur” value=”7000″ size=”15″ disabled=”true”/></td>
<td><input type=”text” name=”menu5″ value=”0″ onChange=”hitungPesan()”/></td>
<td><input type=”text” name=”bayar5″ disabled=”true”/></td>
</tr>

<tr>
<td colspan=”4″ align=”right”>Jumlah Total</td>
<td><input type=”text” name=”Total” disabled=”true” /></td>
</tr>

<tr>
<td colspan=”4″ align=”right”>Diskon</td>
<td><input type=”text” name=”Diskon” disabled=”true” /></td>
</tr>
<tr>
<td colspan=”4″ align=”right”>Jumlah Dibayar</td>
<td><input type=”text” name=”Bayar” disabled=”true” align=”right”/></td>
</tr>

</table>

<br/>
<input type=”reset” value=”RESET” />
</form>
</body>
</html>

Kemudian simpan dengan nama “form-makanan.html”

Setelah itu, jalankan…maka tampilannya akan tampak seperti di bawah ini:

 

 

 

 

 

 

Selamat Mencoba..ūüôā

Dalam mendesain halaman web, cara yang dapat digunakan adalah dengan menggunakan css. Cara ini mempunyai banyak keuntungan, salah satunya adalah memperkecil kapasitas desain kita.

Berikut ini adalah sorce code yang dapat digunakan untuk menampilkan halaman web dengan css agar memperoleh tampilan seperti gambar yang ditunjukkan:

Pertama,buat source code seperti di bawah ini, dan simpan dengan nama “mystyle.css”

header,nav,article,aside,section,footer{
display:block;
}

header{
height:80px;
width:800px;
border:1px solid green;
}

nav{
height:20px;
width:800px;
border:1px solid blue;
}

section{
height:400px;
width:800px;
border:1px solid red;
}

footer{
height:20px;
close:both;
width:800px;
border:1px solid green;
}

#article{
margin-left:20px;
margin-top: 10px;
float:left;
height:360px;
width:550px;
border:1px dashed red;
}

#aside{
margin-left:20px;
margin-top: 10px;
float:left;
height:360px;
width:180px;
border:1px dashed black;
}

Jika sudah dilakukan, sekarang saatnya melakukan link terhadap desain kita, caranya adalah ketikkan source kode di bawah ini dan beri nama “studi-kasus.html”

<!DOCTYPE HTML>
<html lang=”en”>

<head>
<title> Studi Kasus</title>
<link rel=”stylesheet” href=”mystyle.css” type=text/css />
</head>

<body>
<header>
header
</header>

<nav>
nav
</nav>

<section>
<div id=”article”> article
</div>
<div id=”aside”> aside
</div>
section
</section>

<footer>
footer
</footer>

</body>
</html>

 

Nah..hasil tampilannya adalah sebagai berikut:

Desain web merupakan bagian terpenting dari sebuah halaman website. Dalam desain web yang baik, unsur estetika yang harus diperhatikan adalah: warna, tata letak, dan bentuk. Ketiga unsur tesebut dapat diatur dengan menggunakan CSS.

Berikut ini adalah contoh desian web yang menggunakan CSS untuk mengatur halaman web:

Pada desain tersebut dihasilkan 4 errors dan 94 warings,hal ini disebabkan desain tersebut menggunakan HTML 5,sedangakn validator yang dipakai pada Mozilla firefox belum mengenal elemen-elemen baru pada HTML 5.

Karena memanfaatkan fungsi link, maka minimal ada 2 program yang dibuat agar halaman web tersebut dapat dijalankan. Coding yang pertama dikhususkan untuk elemen CSS. Codingnya adalah sebagai berikut:

wrapper,tilte,header,event,font1,font2,font3,logo,action,search,formsearch,content,bg1,bg2,bg3,artikel,section,footer,foot{
display:block;

wrapper{
height:780px;
width:1150px;
border:1px solid #9900CC;
}

#font1{
font-family:Century Gothic;
font-style:bold;
color:#3300FF;
font-size:16px;}

#font2{
font-family:Century Gothic;
font-style:bold;
color:#3300FF;
font-size:12px;}

#font3{
font-family:Broadway BT;
color:#FFFF00;
font-size:25px;}

header{
height:130px;
width:1150px;
background-color:#00CC99;
}

#judul{
margin-top: 15px;
float:left;
height:100px;
width:1150px;
background-color:#FF66CC;
}

#logo{
margin-left:10px;
margin-top:10px;
float:left;
height:80px;
width:100px;
background-image:url(logooke.jpg);
}

#title{
margin-left:100px;
margin-top:10px;
float:left;
height:25px;
width:400px;

}

#action{
margin-left:20px;
margin-top:5px;
float:right;
height:10px;
width:300px;
}

#search{
margin-left:35px;
margin-top:10px;
float:right;
height:10px;
width:260px;
}

#formsearch{
margin-right:50px;
margin-top:5px;
float:right;
height:20px;
width:150px;
background-color:white;
}

section{
height:600px;
width:1150px;
background-color:#FFCCFF;
}

footer{
height:50px;
close:both;
width:1150px;
background-color:#00CC99;
}

#content{
float:left;
height:600px;
width:200px;
background-color:#00CC99;
}

#home{
float:left;
height:30px;
width:200px;
background-color:#FF66CC;
border:1px solid white;
}

#bg1{
float:left;
height:125px;
width:250px;
background-image:url(by1.jpg);
}

#bg2{
float:left;
height:125px;
width:380px;
background-image:url(by2.jpg);
}

#bg3{
float:left;
height:125px;
width:320px;
background-image:url(by3.jpg);
}

#artikel{
margin-top:40px;
margin-left:40px;
float:left;
height:200px;
width:475px;
font-family:Broadway BT;
color:#00CC99;
font-size:12px;
}

#event{
margin-top:40px;
margin-right:20px;
float:right;
height:200px;
width:300px;
font-family:Broadway BT;
color:#00CC99;
font-size:12px;
border:1px solid #00CC99;
}

#foot{
float:left;
height:40px;
width:1150px;
background-color:#FF66CC;
font-family:Century Gothic;
color:#FFFF00;
font-size:14px;
}

SIMPAN CODING DIATAS DENGAN nama ‘ tugas-rumah.css”.

Selanjutnya kita akan mendesain halaman html yang di link-kan dengan desain css yang barusaja dibuat. Untuk mendesian halaman web, ketikkan program sebagai berikut dan SIMPAN DENGAN NAMA “tugas-rumah.html”. Jika semua program telah selesai dibuat, maka insyaAllah hasilnya sama dengan gambar yang sudah ditampilkan diatas. Semoga bermanfaat. Wassalam

<!DOCTYPE HTML>
<html lang=”en”> 

<head>
<title>TUGAS RUMAH</title>
<link rel=”stylesheet” href=”tugas-rumah.css” type=text/css />
</head>

<body>
<wrapper>
<header>
<div id=”judul”>
<div id=”logo”>
<div id=”title” align=”center”><span id=”font3″>MOM’S AND BABY’S CARE
</div>
</div>

<div id=”action” align=”center”><span id=”font2″> Home | Sitemap | RSS | Contact | About Us |
<div id=”search”>Search :
<div id=”formsearch”>
</div>
</div>

</div>

</div>
</header>

<section>

<div id=”content”>
<div id=”home” align=”center”><span id=”font1″> Home
</div>
<div id=”home” align=”center”><span id=”font1″> News & Media
</div>
<div id=”home” align=”center”><span id=”font1″> Tutorials
</div>
<div id=”home” align=”center”><span id=”font1″> Tips & Trik
</div>
<div id=”home” align=”center”><span id=”font1″> Downloads
</div>
</div>
<div id=”bg1″>
</div>
<div id=”bg2″>
</div>
<div id=”bg3″>
</div>
<div id=”artikel”>LOMBA DESAIN WEB
<p>23 Februari 2010 [07.00]</p>
Lorem ipsum dolor sit amet, constrectur adipicing
<br>elit, sed do euisem tempor incididunt ut labore et</br>
<br>dolore magna aliqua. Ut ernin ad minim veniam, quis</br>
<br>nostud evercition ullamco laboris nisi ut aliquip ex ea commodo cosequat.
<p>Read more…</p>

</div>
<div id=”event”>EVENT
<p> -Lomba bayi sehat</p>
<p> -Lomba ibu cerdas</p>
<p> -Lomba kekompakan bayi dan ibu </p>
</div>
</section>

<footer>
<div id=”foot” align=”center”><p>&copy;Renjana Runjung Production</p>
</div>
</footer>
</wrapper>

</body>
</html>

Tag Cloud