Praktikum PHP 2

Asalammuallaikum Wr. Wb. Kembali lagi bersama saya yang sedikit telat dalam mengupdate blog ini, mohon di maklumi karena kesibukan yang berlebih. :) Tanpa basa - basi lagi, kali ini saya akan mengepost tentang Praktikum PHP 2. Selamat menikmati :))

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.

<html>
	<head>
 <title>Praktikum PHP #2</title>
 	<link rel="stylesheet" href="style.css">
 </head>
	
<body> <center>
<?php
echo "Biodata";
?>
<table border=1>
<tr>
			<td><?php echo "Nama Lengkap" ?></td>
			<td><?php echo ":" ?></td>
			<td><?php echo "Agswindo Erdi Arwanda" ?></td>
 <td rowspan="9">
 <img src="AEA.JPG" width="150" height="200">
 </td>
		</tr>
<tr>
			<td><?php echo "Nama Panggilan" ?></td>
			<td><?php echo ":" ?></td>
			<td><?php echo "Aldo" ?></td>
		</tr>
<tr>
			<td><?php echo "Tempat,Tanggal lahir" ?></td>
			<td><?php echo ":" ?></td>
			<td><?php echo "Ponorogo, 26 Februari 1997" ?></td>
		</tr>
<tr>
			<td><?php echo "Asal SMP" ?></td>
			<td><?php echo ":" ?></td>
			<td><?php echo "SMPN 1 Ponorogo" ?></td>
		</tr>
<tr>
			<td><?php echo "Alamat" ?></td>
			<td><?php echo ":" ?></td>
			<td><?php echo "Jln. Danau Poso I G2D/21" ?></td>
		</tr>
<tr>
			<td><?php echo "Tinggi/berat" ?></td>
			<td><?php echo ":" ?></td>
			<td><?php echo "167/57" ?></td>
		</tr>
<tr>
			<td><?php echo "Cita-cita" ?></td>
			<td><?php echo ":" ?></td>
			<td><?php echo "Mukmin Sukses" ?></td>
		</tr>
<tr>
			<td><?php echo "Agama" ?></td>
			<td><?php echo ":" ?></td>
			<td><?php echo "Islam" ?></td>
		</tr>
<tr>
			<td><?php echo "Hobi" ?></td>
			<td><?php echo ":" ?></td>
			<td><?php echo "Membaca, Jogging, Berenang" ?></td>
		</tr>
</table>
<img src="AEA.JPG" width="150" height="200">

</body></center>
</html>

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;
   opacity:0.7;

}

table img{
	position:relative;
	opacity:0;
}
#foto {
    opacity: 1;
    position: absolute;
    right: 340px;
    top: 200px;
}
#foto img{
	border-radius:10px;
}
@keyframes muncul{
    0%{opacity:0;}
100%{opacity:100;}
}

td{
    border-radius: 10px;
    border:0;
    font-weight:bold;
    position: inherit;
	padding:10px;
    
}
select{
    
    width: 70px;
    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 2

Tidak ada komentar:

Posting Komentar