September 2013

Asalammuallaikum Wr. Wb. Setelah PHP 2, mari kita langsung loncat ke Praktikum PHP 4, tentang Conditional, Array & Perulangan di PHP. Tanpa basa - basi lagi, mari kita segera praktekkan.

Masuk ke IDE favorit anda, saya menggunakan Adobe Dreamweaver CS6.
Buat new file lalu save dengan ekstensi *.php. Lalu masukan source code di bawah ini.

<!DOCTYPE html>
<head>
<title>Praktikum PHP #4</title>
    	<link rel="stylesheet" href="style2.css">
      </head>
<body>
<form action="script.php" method="post" >
<table border="0">
<tr>
    <td>Nama</td>
    <td>:</td>
    <td><input name="nama" type="text" id="nama" /></td>
  </tr>
<tr>
    <td>Email</td>
    <td>:</td>
    <td><input name="email" type="text" id="email" /></td>
  </tr>
<tr>
  	<td>Tempat Lahir</td>
    <td> : </td>
    <td>
    	<input name="tempatlahir" type="text" id="tempatlahir" /></td>
  </tr>
<tr>
  	<td>Tanggal Lahir</td>
    <td> : </td>
    <td>
<?php
//membuat array bulan
$bulan=array("Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember");
//membuat combobox
echo"<select name='hari'>";
$hari=1;
while($hari<=31){
	echo"<option value=\"$hari\">$hari</option>";
	$hari++;
}
echo'</select>';

//membuat combobox bulan
echo "<select name='bulan'>";
$jumlah=count($bulan);
for($i=0; $i<$jumlah ; $i++){
	echo '<option value="'.$bulan[$i].'">'.$bulan[$i].'</option>';
}
echo "</select>";

//membuat combo box tahun
echo '<select name="tahun">';
for($tahun=1945; $tahun<2005; $tahun++){
	echo "<option value=\"$tahun\">$tahun</option>";
}
echo '</select>';
?></td>
  </tr>
<tr>
    <td>Jenis Kelamin</td>
    <td>:</td>
   <td> <span id="jk"><input type="radio" name="gender" value="L" />Laki - Laki
    <input type="radio" name="gender" value="P" />Perempuan</span>
    </td>
  </tr>
<tr>
    <td>Umur</td>
    <td>:</td>
    <td>
    <select name="umur">
    <option value="0-29">Di Bawah 30</option>
    <option value="30-60">Antara 30 sd 60</option>
    <option value="60+">Di Atas 60</option>
    </select>
    </td>
  </tr>
<tr>
    <td>Komentar</td>
    <td>:</td>
    <td><textarea name="komentar" cols="30" rows="4">
<br />
<br />

<br />

Jangan lupa buat juga file *.css untuk memperhalus tampilannya. Berikut sourcee code css yang saya gunakan.

body{
    background: url("bg.jpg") repeat;
    
}

@keyframes flow {
  0% {background-position: 0 0;}
  100% {background-position: 0 50%;}
 
}
#hw{
	font-family:Broadway;
	font-style:oblique;
	font-weight:200;
	font-size:44px;
	-moz-animation: muncul 2s ease-in-out;
	color:#039;
	
	}
table{
   margin: 20px auto;
   border-radius: 10px;
   -moz-animation: bayang 1s infinite;
   background-color:  #fff;
   border-color:#003;
   border-style: solid;
   border-width: 3px;
   padding: 0px 0px;
   -moz-animation: muncul 2s ease-in-out;
}
@keyframes muncul{
    0%{opacity:0;}
100%{opacity:100;}
}

td{
    border-radius: 10px;
    border:0;
    font-weight:bold;
    position: inherit;
	padding:10px;
    
}
select{
    width: 100px;
    border-radius: 10px;
    
    font-weight: bold;
    -moz-transition: all 1s ease-in-out;
    
}
#keptap{
    color:#fff;
    background-color: blue;
    border-radius: 10px 10px 0px 00px;
}

select:focus{
 
    width: 100px;
    border-radius: 10px;
    font-weight: bold;
    -moz-transition: all 1s ease-in-out;  
}
#submit,a{
    position: relative;
   border-style: solid;
   border-radius: 10px;
   border-width: 1px;
    padding: 10px 15px;
    font-weight: bold;
    opacity: 80%;
 background-color: blue;
    color:rgba(255,255,255,7);
    -moz-transition: all 5s ease-in-out;
   margin: 10px 78px;

}

textArea{
    
   
    width: 100px;
     -moz-transition-duration:  1s;
}
#inputtext{
   border-radius: 10px;
   padding: 5px 8px;
   background-color: #fff;
   width: 100px;
   -moz-transition-duration:  1s;
   background-color: #fff;
        
        
}

#inputtext:focus,textArea:focus{
   border-radius: 10px;
     background-color: #fff;
     opacity: 80%;
     color:#666;
     font-weight: bold;
    padding: 5px 8px;
    width: 240px;
    -moz-transition-duration:  1s;
   
}

Berikut tampilan yang dihasilkan setelah source code diatas di jalankan. Selamat berkreasi :)

Aerdia Blog | Luapan Inspirasi dan Emosi

Pages

Praktikum PHP 4

Praktikum PHP 3 : Style Penulisan PHP