Share

Sabtu, 22 September 2012

Piramida Perulangan dengan PHP V 2

Sabtu, September 22, 2012 Syarif Negsatt Moklet (SNM) 2 comments

Assalamu'alaikum kawan, kali ini adalah kelanjutan dari posting sebelumnya Piramida Perulangan dengan PHP ,disini adalah versi keduanya, karena di sini pada halaman awal kita dihadapkan pada form pilihan piramid dan setting yang akan ditampilkan piramid.php . Dan di versi kedua ini, terdapat lebih banyak pilihan bentuk piramid yakni enam pilihan, sedang di versi sebelumnya hanya 2 pilihan tanpa setting. Supaya lebih asyikkk.... kita lihat saja demonya di sini :

VIEW DEMO

Udah lihatkan demonya ??? Oke, sekarang kita lanjut ke tahap pengerjaan project. Langkah awal kita buat file baru dengan nama index.php , isi dengan coding berikut :
<?
error_reporting(0);
$f_type=$_GET['f_type'];
$f_text=$_GET['f_text'];
$f_height=$_GET['f_height'];
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>
f Projects | Piramida Perulangan
</title>
<link rel="stylesheet" href="copy_my_style.css" />
</head>
<body>
<div id="f_megacont">
<div id="f_cont">
<h2 class="salam">Assalamu'alaikum Wr. Wb</h2>
<h1 class="tittle">Silakan pilih piramida perulangan</h1>
<form action="piramid.php" method="post">
<table  border=1 align="center">
<tr>
<th colspan="6">
Silakan Pilih Model Piramida
</th>
</tr>
<tr>
<td>
<input type="radio" name="f_tipe" value="A" id="tipe_1"
<? ($f_type=="A") ? print "checked" : print "" ?>>
<label for="tipe_1"><a href="?f_type=A&f_text=<? echo $f_text."&f_height=$f_height"; ?>#bottom">Piramida 1</a></label>
</td>
<td>
<input type="radio" name="f_tipe" value="B" id="tipe_2"
<? ($f_type=="B") ? print "checked" : print "" ?>>
<label for="tipe_2"><a href="?f_type=B&f_text=<? echo $f_text."&f_height=$f_height"; ?>#bottom">Piramida 2</a></label>
</td>
<td>
<input type="radio" name="f_tipe" value="C" id="tipe_3"
<? ($f_type=="C") ? print "checked" : print "" ?>>
<label for="tipe_3"><a href="?f_type=C&f_text=<? echo $f_text."&f_height=$f_height"; ?>#bottom">Piramida 3</a></label>
</td>
<td>
<input type="radio" name="f_tipe" value="D" id="tipe_4"
<? ($f_type=="D") ? print "checked" : print "" ?>>
<label for="tipe_4"><a href="?f_type=D&f_text=<? echo $f_text."&f_height=$f_height"; ?>#bottom">Piramida 4</a></label>
</td>
<td>
<input type="radio" name="f_tipe" value="E" id="tipe_5"
<? ($f_type=="E") ? print "checked" : print "" ?>>
<label for="tipe_5"><a href="?f_type=E&f_text=<? echo $f_text."&f_height=$f_height"; ?>#bottom">Piramida 5</a></label>
</td>
<td>
<input type="radio" name="f_tipe" value="F" id="tipe_6"
<? ($f_type=="F") ? print "checked" : print "" ?>>
<label for="tipe_6"><a href="?f_type=F&f_text=<? echo $f_text."&f_height=$f_height"; ?>#bottom">Wajik</a></label>
</td>
</tr>
<tr>
<td>
<label for="tipe_1">
<a href="?f_type=A&f_text=<? echo $f_text."&f_height=$f_height"; ?>#bottom">
<div>
<?
for($a=1;$a<=4;$a++){
switch ($a){
case 1:$warna = "red";break;
case 2:$warna = "green";break;
case 3:$warna = "blue";break;
case 4:$warna = "cyan";break;
case 5:$warna = "magenta";break;
default :break;
}
echo "<h$a><font color=$warna>Hello syarif</font></h$a>";
}
?>
</div>
</a>
</label>
</td>
<td>
<label for="tipe_2">
<a href="?f_type=B&f_text=<? echo $f_text."&f_height=$f_height"; ?>#bottom">
<div>
<?
$bintang = "";
for($f=1;$f<=5;$f++){
switch ($f){
case 1:$warna = "red";break;
case 2:$warna = "green";break;
case 3:$warna = "blue";break;
case 4:$warna = "cyan";break;
case 5:$warna = "magenta";break;
default :$warna = "rgb(".($f*10).",".($f*$f).",".($f).")";
}
$bintang.="*";
echo "<font style=font-size:".($f*10)."px;color:$warna>$bintang</font></br>";
}
?>
</div>
</a>
</label>
</td>
<td>
<label for="tipe_3">
<a href="?f_type=C&f_text=<? echo $f_text."&f_height=$f_height"; ?>#bottom">
<div>
<?
$warna = array("","red","green","blue","pink","orange","magenta","yellow");
$tulisan ="";
for($f=1;$f<=6;$f++){
$tulisan.=$f;
echo "<font size=$f color=$warna[$f]>".$tulisan."</font><br/>";
}
?>
</div>
</a>
</label>
</td>
<td>
<label for="tipe_4">
<a href="?f_type=D&f_text=<? echo $f_text."&f_height=$f_height"; ?>#bottom">
<div>
<?
$warna = array("","red","green","blue","pink","orange","magenta","yellow");
for($f=7;$f>0;$f--){
for($ff=1;$ff<=$f;$ff++){
echo "<font style='font-size:".($ff*5)."px;color:$warna[$ff]'>".$ff."</font>";
}
echo "<br/>";
}
?>
</div>
</a>
</label>
</td>
<td>
<label for="tipe_5">
<a href="?f_type=E&f_text=<? echo $f_text."&f_height=$f_height"; ?>#bottom">
<div>
<?
$warna = array(1=> "red","green","blue","pink","orange","magenta","yellow");
for($f=6;$f>0;$f--){
$k=1;
for($f2=$f;$f2>0;$f2--){
echo "<font style='font-size:".($k*5)."'>$f2</font>";
$k++;
}
echo "<br/>";

}
?>
</div>
</a>
</label>
</td>
<td>
<label for="tipe_6">
<a href="?f_type=F&f_text=<? echo $f_text."&f_height=$f_height"; ?>#bottom">
<div>
<? 
$count = 8;
if($count%2<>0){
$count++;
}
for($f=1;$f<=$count;$f++){
$a = $f;
$b = $count/2;
if($f>$b){
$a-=2*($f-$b);
}
switch ($a){
case 1:$warna = "red";break;
case 2:$warna = "green";break;
case 3:$warna = "blue";break;
case 4:$warna = "cyan";break;
case 5:$warna = "magenta";break;
default :$warna = "rgb(".($f*10).",".($f*$f).",".($f).")";
}
echo "<font style=font-size:".($a*10)."px;color:$warna>";
for($f2=1;$f2<=$a;$f2++){
echo "*";
}
echo "</font></br>";
}
?>
</div>
</a>
</label>
</td>
</tr>
<? if(isset($f_type)){ ?>
<tr>
<th colspan="6">
SETTING
</td>
</tr>
<tr>
<? if($f_type=="A"){ ?>
<td colspan="3">
<label for="f_text">TEXT</label><br/><br/>
<input type="text" name="f_text" id="f_text" value="<? echo $f_text; ?>" placeholder="input text..."/>
</td>
<td colspan="3">
<label for="f_height">TINGGI (max 6)</label><br/><br/>
<input type="text" name="f_height" id="f_height"  value="<? echo $f_height; ?>"   placeholder="input tinggi..."/>
</td>
<? } else{ ?>
<td colspan="6">
<label for="f_height">TINGGI (max 10)</label><br/><br/>
<input type="text" name="f_height" id="f_height" value="<? echo $f_height; ?>" placeholder="input tinggi... <? ($f_type=="F") ? print "(genap)" : print "" ?>"/>
</td>
<? } ?>
</tr>
<tr>
<td colspan="6">
<input type="submit" name="submit" value="submit"/>
</td>
</tr>
<? } ?>
</table>
</form>
</div>
</div>
<div id="bottom"></div>
</body>
</html>


Ini code untuk piramid.php :
<?
error_reporting(0);
$f_type=$_POST['f_tipe'];
$f_text=$_POST['f_text'];
$f_height=$_POST['f_height'];
if(isset($_POST['submit'])){
if($f_type=="A"&&($f_text==""||$f_height=="")){
echo "<script>alert('data kurang lengkap');
document.location.href='index.php?f_type=$f_type&f_text=$f_text&f_height=$f_height#bottom';</script>";
}
if($f_type==""||$f_height==""){
echo "<script>alert('data kurang lengkap');
document.location.href='index.php?f_type=$f_type&f_text=$f_text&f_height=$f_height#bottom';</script>";
}
if(preg_match('/[^0-9]/',$f_height)){
echo "<script>alert('data tinggi bukan angka');
document.location.href='index.php?f_type=$f_type&f_text=$f_text&f_height=$f_height#bottom';</script>";
}
}
function overload($max){
$f_type=$_POST['f_tipe'];
$f_text=$_POST['f_text'];
$f_height=$_POST['f_height'];
echo "<script>alert('rentang tinggi terlalu besar (nilai anda $f_height, max = $max)');
document.location.href='index.php?f_type=$f_type&f_text=$f_text&f_height=$f_height#bottom';</script>";
}
function piramid_1($text,$height) { //fungsi untuk membuat piramid model 1
if($height>6){
overload("6");
}
for($f=1;$f<=$height;$f++){
switch ($f){
case 1:$warna = "red";break;
case 2:$warna = "green";break;
case 3:$warna = "blue";break;
case 4:$warna = "cyan";break;
case 5:$warna = "magenta";break;
default :break;
}
echo "<h$f><font color=$warna>$text</font></h$f>";
}
}
function piramid_2($height) { //fungsi untuk membuat piramid model 2
if($height>10){
overload("10");
}
$bintang = "";
for($f=1;$f<=$height;$f++){
switch ($f){
case 1:$warna = "red";break;
case 2:$warna = "green";break;
case 3:$warna = "blue";break;
case 4:$warna = "cyan";break;
case 5:$warna = "magenta";break;
default :$warna = "rgb(".($f*10).",".($f*$f).",".($f).")";
}
$bintang.="*";
echo "<font style=font-size:".($f*10)."px;color:$warna>$bintang</font></br>";
}
}
function piramid_3($height) { //fungsi untuk membuat piramid model 3
if($height>10){
overload("10");
}
$tulisan ="";
for($f=1;$f<=$height;$f++){
switch ($f){
case 1:$warna = "red";break;
case 2:$warna = "green";break;
case 3:$warna = "blue";break;
case 4:$warna = "cyan";break;
case 5:$warna = "magenta";break;
default :$warna = "rgb(".($f*10).",".($f*$f).",".($f).")";
}
$tulisan.=$f;
echo "<font style='font-size:".($f*5)."px' color=$warna>".$tulisan."</font><br/>";
}
}
function piramid_4($height) { //fungsi untuk membuat piramid model 4
if($height>10){
overload("10");
}
$tulisan ="";
for($f=$height;$f>0;$f--){
switch ($f){
case 1:$warna = "red";break;
case 2:$warna = "green";break;
case 3:$warna = "blue";break;
case 4:$warna = "cyan";break;
case 5:$warna = "magenta";break;
default :$warna = "rgb(".($f*10).",".($f*$f).",".($f).")";
}
for($ff=1;$ff<=$f;$ff++){
echo "<font style='font-size:".($ff*5)."px;color:$warna[$ff]'>".$ff."</font>";
}
echo "<br/>";
}
}
function piramid_6($height) { //fungsi untuk membuat piramid model 6 
if($height>10){
overload("10");
}
$count = $height;
if($count%2<>0){
$count++;
}
for($f=1;$f<=$count;$f++){
$a = $f;
$b = $count/2;
if($f>$b){
$a-=2*($f-$b);
}
switch ($a){
case 1:$warna = "red";break;
case 2:$warna = "green";break;
case 3:$warna = "blue";break;
case 4:$warna = "cyan";break;
case 5:$warna = "magenta";break;
default :$warna = "rgb(".($f*10).",".($f*$f).",".($f).")";
}
echo "<font style=font-size:".($a*10)."px;color:$warna>";
for($f2=1;$f2<=$a;$f2++){
echo "*";
}
echo "</font></br>";
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>
f Projects | Piramida Perulangan Result
</title>
<link rel="stylesheet" href="copy_my_style.css" />
</head>
<body>
<div id="f_megacont">
<div id="f_cont">
<h2 class="salam">SELAMAT DATANG DI HALAMAN HASIL</h2>
<h1 class="tittle">Berikut adalah hasil untuk Piramida type 
<?
switch ($f_type){
case "A" : print "1/A";break;
case "B" : print "2/B";break;
case "C" : print "3/C";break;
case "D" : print "4/D";break;
case "E" : print "5/E";break;
case "F" : print "6/F";break;
default : break;
}
?>
</h1>
<div style="border:solid 1px rgba(0,0,0,0.5);padding:15px;">
<?
switch ($f_type){
case "A" : piramid_1($f_text, $f_height);break;
case "B" : piramid_2($f_height);break;
case "C" : piramid_3($f_height);break;
case "D" : piramid_4($f_height);break;
case "F" : piramid_6($f_height);break;
default : break;
}
?>
</div>
<br/>
<a href="<? echo "index.php?f_type=$f_type&f_text=$f_text&f_height=$f_height"; ?>" type="submit">Kembali ke Opsi</a>
</div>
</div>
</body>
</html>


Selanjutnya buat file copy_my_style.css untuk style nya:
body{
margin:0;
}
a, a:link, a:hover, a:visited{
text-decoration:none;
color:#000;
}
label{
cursor:pointer;
}
#f_megacont{
background:-moz-repeating-linear-gradient(-45deg, blue , white, blue 4px);
margin: 0;
padding-top:5%;
padding-bottom:5%;
min-height:400px;
}
#f_cont{
background: rgba(255,255,255,.8);
background: -moz-linear-gradient(top center,rgba(200,200,200,.8) 70%,rgba(255,255,255,1));
position: relative;
text-align: center;
padding:40px;
margin:auto 10%;
border-radius: 20px;
border: #000 double 4px;
box-shadow: 0 0 10px #333;
}
.f_message{
color: red;
font-size: 20px;
text-shadow: 0 0 3px #fff;
text-align: left;
}
.salam {
color: blueviolet;
text-shadow: 0 0 3px #fff;
font-weight: bold;
}
.tittle{
color: #06f;
text-shadow: 0 0 1px #000;
}
table{
text-align:center;
}
th{
font-size: 120%;
text-align:center;
}
table th{
font-weight: bold;
}
table td,table th{
padding:5px;
padding-left:10px;
vertical-align:top;
text-align:center;
}
table td.submit{
text-align: center;
}
th label{
color:orangered;
}
[type="text"],select{
width: 200px;
border-top-left-radius: 8px;
font-size: 18px;
padding:1px 0 1px 8px;
}
[type="text"]:focus,select:focus{
box-shadow: 0  0 5px red;
color: blue;
}
[type="submit"]{
border-radius: 15px;
padding:5px;
cursor: pointer;
font-size: 120%;
color: #fff;
border: solid 2px #000;
background: #999;
}
[type="submit"]:focus{
box-shadow: 2px 3px 5px #000;
text-shadow: 0  0 3px #000;
}
Makasi udah berkunjung :D

Posted in:

2 komentar:

Sucipto Reply

pake looping.. hehehe

3 Desember 2012 pukul 17.25
132 Reply

@Sucipto Ngawi iyya mas :D hehehe.....
#tahap belajar :D

9 Februari 2013 pukul 18.08

Posting Komentar

Share lewat :
Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Bluehost Coupons | Modified by Syarif Moklet