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
pake looping.. hehehe
BalasHapus@Sucipto Ngawi iyya mas :D hehehe.....
BalasHapus#tahap belajar :D