Membuat Segitiga dengan for dan While, Dan Faktorial dengan for, while dan do-while Di PHP ~ FIRDAUS N S

Assalammualaikum WR. WB....
Bertemu lagi gan, okeh gasah pake basa - basi langsung saja.. kali ini penulis agan membagi tutorial membuat segitiga siku-siku menggunakan for dan while, dan membuat faktorial menggunakan for, while, do-while menggunakan php..

Pertama seperti biasa aktifkan xamppnya dan buka text editornya kemudian ketikkan script berikut dan simpan sebagai index.php untuk membuat tampilan awal.

<html> <title> HOME </title> <link href="style.css" rel="stylesheet" type="text/css"> <body> <nav> <ul id="menu"> <li><a href="index.php"> HOME </a></li> <li><a href="segitiga.php"> SEGITIGA </a></li> <li><a href="faktorial.php"> FAKTORIAL </a></li> </ul> </nav> <div class="header"> <div class="intro-pesan"> <center> <img class="circular" src="me2.jpg" alt="photo profile"> </center> <h1> WELCOME TO MY WEBSITE TUTORIAL</h1> <h2> FIRDAUS N.S</h2> <a href="segitiga.php" class="button2" title="start with next segitiga">Start</a> </div> </div> <div class="kaki"> <marquee> <font face = "Calibri">Copyright © <a class="brand" color ='red' href="http://www.firdausns44.blogspot.com">firdausns44.blogspot.com</a> </marquee> </div> </body> </html>

Kemudian lanjutkan lagi untuk membuat tampilan segitiga dengan mengcopy script berikut dengan nama segitiga.php

<html> <title> SEGITIGA </title> <link href="style.css" rel="stylesheet" type="text/css"> <body> <nav> <ul id="menu"> <li><a href="index.php"> HOME </a></li> <li><a href="segitiga.php"> SEGITIGA </a></li> <li><a href="faktorial.php"> FAKTORIAL </a></li> </ul> </nav> <div class="form-segitiga"> <div class="intro-segitiga"> <h1> Segitiga Menggunakan Perulangan For Dan While</h1> <br> </div> <div class="fm-segitiga1"> <div class="segitiga-script1"> Hasil : <br><br> <?php for ($i=1; $i <=5 ; $i++) { $j=1; while ($j <= $i) { $j++; echo $i; } echo "<br/>"; } ?> </div> </div> <div class="fm-segitiga2"> <div class="segitiga-script2"> Script : <br><br> <?php echo "<?php<br/>"; echo "for (\$i=1; \$i <=5 ; \$i++) {<br/>"; echo " \$j=1;<br/>"; echo " while (\$j <= \$i) {<br/>"; echo " \$j++;<br/>"; echo " echo \$i;<br/>"; echo " }<br/>"; echo " echo </br><br/>"; echo "}<br/>"; echo "?><br/>"; ?> </div> </div> <div class="kaki-sgt"> <marquee> <font face = "Calibri">Copyright © <a class="brand" color ='red' href="http://www.firdausns44.blogspot.com">firdausns44.blogspot.com</a> </marquee> </div> </div> </body> </html>

Lanjut gan selanjutnya membuat file dengan nama faktorial.php untuk membuat tampilan faktorial

<html> <title> FAKTORIAL </title> <link href="style.css" rel="stylesheet" type="text/css"> <body> <nav> <ul id="menu"> <li><a href="index.php"> HOME </a></li> <li><a href="segitiga.php"> SEGITIGA </a></li> <li><a href="faktorial.php"> FAKTORIAL </a></li> </ul> </nav> <sidebar> <div id="sidebar"> <ul class="slider"> <li><a class="page-scrool" href="#for"><h3> Menggunakan For</h3> </a></li> <li><a class="page-scrool" href="#while"><h3> Menggunakan While</h3> </a></li> <li><a class="page-scrool" href="#dowhile"><h3> Menggunakan Do-While</h3> </a></li> </ul> </div> </div> </sidebar> <div class="form-for" id="for"> <div class="intro-for"> <h1> Faktorial Menggunakan For</h1> <br> </div> <div class="fm-for1"> <div class="for-script1"> <form name="frm01" method="post"> <table class="tabel-for"> <tr> <td>Masukkan Angka</td> <td><input type="text" name="txtAngka" size="20" class="input-for"/></td> </tr> <tr> <td colspan="2"><input type="submit" name="hasil" value="Hasil" class="btn-for"/></td> </tr> </table> <?php error_reporting(0); if($_POST['hasil']!=''){ $angka=$_POST['txtAngka']; function faktorial($angka){ if($angka<=1){ $hasil=1; return $hasil; }elseif($angka>1){ for($i=1; $i<=$angka; $i++){ $hasil=$angka * faktorial($angka-1); } return $hasil; } } echo "Angka : ".$angka."<br>"; echo "Faktorial dari "." ".$angka." "."adalah :"." ".faktorial($angka); } ?> </form> </div> </div> <div class="fm-for2"> <div class="for-script2"> Script : <br><br> <?php echo "<php<br/>"; echo "error_reporting(0);<br/>"; echo "if(\$_POST['hasil']!=''){<br/>"; echo " \$angka=\$_POST['txtAngka'];<br/>"; echo " function faktorial(\$angka){<br/>"; echo " if(\$angka<=1){<br/>"; echo " \$hasil=1;<br/>"; echo " return \$hasil;<br/>"; echo " }elseif(\$angka>1){<br/>"; echo " for(\$i=1; \$i<=\$angka; \$i++){<br/>"; echo " \$hasil=\$angka * faktorial(\$angka-1);<br/>"; echo " }<br/>"; echo " return \$hasil;<br/>"; echo " }<br/>"; echo " }<br/>"; echo " echo \"Angka :\".\$angka.\"</br>\";<br/>"; echo " echo \"Faktorial dari \".\" \".\$angka.\" \".\"adalah :\".\" \".faktorial(\$angka);<br/>"; echo "}<br/>"; echo "?>"; ?> </div> </div> </div> <div class="form-while" id="while"> <div class="intro-while"> <h1> Faktorial Menggunakan While</h1> <br> </div> <div class="fm-while1"> <div class="while-script1"> <form name="frm02" method="post"> <table class="tabel-while"> <tr> <td>Masukkan Angka</td> <td><input type="text" name="txtAngka-while" size="20" class="input-while"/></td> </tr> <tr> <td colspan="2"><input type="submit" name="hasil-while" value="Hasil" class="btn-while"/></td> </tr> </table> <?php error_reporting(0); if($_POST['hasil-while']!=''){ $angkawhile=$_POST['txtAngka-while']; function faktorial($angkawhile){ if($angkawhile<=1){ $hasilwhile=1; return $hasilwhile; }elseif($angkawhile>1){ $i=1; while($i<=5) { $i=$i+1; $hasilwhile=$angkawhile * faktorial($angkawhile-1); } return $hasilwhile; } } echo "Angka : ".$angkawhile."<br>"; echo "Faktorial dari "." ".$angkawhile." "."adalah :"." ".faktorial($angkawhile); } ?> </form> </div> </div> <div class="fm-while2"> <div class="while-script2"> Script : <br><br> <?php echo "<php<br/>"; echo "error_reporting(0);<br/>"; echo "if(\$_POST['hasil-while']!=''){<br/>"; echo " \$angkawhile=\$_POST['txtAngka-while'];<br/>"; echo " function faktorial(\$angkawhile){<br/>"; echo " if(\$angkawhile<=1){<br/>"; echo " \$hasilwhile=1;<br/>"; echo " return \$hasilwhile;<br/>"; echo " }elseif(\$angkawhile>1){<br/>"; echo " \$i=1;<br/>"; echo " while(\$i<=5)<br/>"; echo " {<br/>"; echo " \$i=\$i+1;<br/>"; echo " \$hasilwhile=\$angkawhile * faktorial(\$angkaw-1);<br/>"; echo " }<br/>"; echo " return \$hasilwhile;<br/>"; echo " }<br/>"; echo " }<br/>"; echo " echo \"Angka : \".\$angkawhile.\"<br>\";<br/>"; echo " echo \"Faktorial dari \".\" \".\$angkawhile.\" \".\"adalah :\".\" \".faktorial(\$angkawhile);<br/>"; echo "}<br/>"; echo "?>"; ?> </div> </div> </div> <div class="form-dowhile" id="dowhile"> <div class="intro-dowhile"> <h1> Faktorial Menggunakan Do-While</h1> <br> </div> <div class="fm-dowhile1"> <div class="dowhile-script1"> <form name="frm03" method="post"> <table class="tabel-dowhile"> <tr> <td>Masukkan Angka</td> <td><input type="text" name="txtAngka-dowhile" size="20" class="input-dowhile"/></td> </tr> <tr> <td colspan="2"><input type="submit" name="hasil-dowhile" value="Hasil" class="btn-dowhile"/></td> </tr> </table> <?php error_reporting(0); if($_POST['hasil-dowhile']!=''){ $angkadowhile=$_POST['txtAngka-dowhile']; function faktorial($angkadowhile){ if($angkadowhile<=1){ $hasildowhile=1; return $hasildowhile; }elseif($angkadowhile>1){ $i=1; do { $hasildowhile=$angkadowhile * faktorial($angkadowhile-1); $i=$i+1; }while($i<=5); return $hasildowhile; } } echo "Angka :".$angkadowhile."<br>"; echo "Faktorial dari "." ".$angkadowhile." "."adalah :"." ".faktorial($angkadowhile); } ?> </form> </div> </div> <div class="fm-dowhile2"> <div class="dowhile-script2"> Script : <br><br> <?php echo "<php<br/>"; echo "error_reporting(0);<br/>"; echo "if(\$_POST['hasil-dowhile']!=''){<br/>"; echo " \$angkadowhile=\$_POST['txtAngka-dowhile'];<br/>"; echo " function faktorial(\$angkadowhile){<br/>"; echo " if(\$angkadowhile<=1){<br/>"; echo " \$hasildowhile=1;<br/>"; echo " return \$hasildowhile;<br/>"; echo " }elseif(\$angkadowhile>1){<br/>"; echo " \$i=1;<br/>"; echo " do<br/>"; echo " {<br/>"; echo " \$hasildowhile=\$angkadowhile * faktorial(\$angkadowhile-1);<br/>"; echo " \$i=\$i+1;<br/>"; echo " }while(\$i<=5);<br/>"; echo " return \$hasildowhile;<br/>"; echo " }<br/>"; echo " }<br/>"; echo " echo \"Angka :\".\$angkadowhile.\"<br%gt\";<br/>"; echo " echo \"Faktorial dari \".\" \".\$angkadowhile.\" \".\"adalah :\".\" \".faktorial(\$angkadowhile);<br/>"; echo "}<br/>"; echo "?>"; ?> </div> </div> </div> <div class="kaki"> <marquee> <font face = "Calibri">Copyright © <a class="brand" color ='red' href="http://www.firdausns44.blogspot.com">firdausns44.blogspot.com</a> </marquee> </div> </body> </html>

Dan terakhir kita buat css nya supaya tampilannya menjadi menarik gan.. buat new file lagi dengan nama style.css

body{ margin: 0px; padding: 0px; } #menu li { display:inline-block; color: #fff; float:left; height:100%; padding: 15px 20px; } #menu{ position:fixed; top:0; left:0; height: 50px; z-index: 70; width: 100%; padding:0; margin:0; background: rgba(51, 102, 255, 0.5); text-transform:uppercase; font-family: 'Open Sans', sans serif; box-shadow: 0px 3px #FF8540; } nav{ overflow: auto; display: block; color: #2196F3; } nav ul{ list-style: none; height: 500px; /*height: 30px;*/ padding: 30px; margin: 0px; } nav ul > li{ display: inline; } nav ul > li > a{ display: inline; padding: 8px 12px; border-right: #4072b4; text-decoration: none; color: #fff; text-transform: capitalize; } nav ul > li > a:hover{ background-color: #4072b4; } .header{ text-align: center; width: full; height: 100%; background: url(a.jpg) no-repeat center center fixed; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; margin: 0; padding: 10px; color: #fff; } .circular{ margin-top: 180px; width: 150px; height: 150px; border-radius: 50%; box-shadow: 0 0 18px rgba(0, 0, 0, .8); -webkit-box-shadow: 0 0 18px rgba(0, 0, 0, .8); -moz-box-shadow: 0 0 18px rgba(0, 0, 0, .8); } .intro-pesan { margin: 0px; padding: 0px; position: relative; } .intro-pesan > h1 { margin: 50px 0px 0px 0px; text-shadow: 2px 2px 3px rgba(0,0,0,0.6); font-size: 4em; } .intro-pesan > h2 { margin: 20px 0px 20px 0px; padding: 0px; text-shadow: 2px 2px 3px rgba(0,0,0,0.6); font-size: 2em; } .button2 { display: inline-block; white-space: nowrap; background-color: #ddd; background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc)); background-image: -webkit-linear-gradient(top, #eee, #ccc); background-image: -moz-linear-gradient(top, #eee, #ccc); background-image: -ms-linear-gradient(top, #eee, #ccc); background-image: -o-linear-gradient(top, #eee, #ccc); background-image: linear-gradient(top, #eee, #ccc); border: 1px solid #777; padding: 0 1.5em; margin: 0.5em; font: bold 1em/2em Arial, Helvetica; text-decoration: none; color: #333; text-shadow: 0 1px 0 rgba(255,255,255,.8); -moz-border-radius: .2em; -webkit-border-radius: .2em; border-radius: .2em; -moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3); -webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3); box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3); } .button2:hover { background-color: #eee; background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd)); background-image: -webkit-linear-gradient(top, #fafafa, #ddd); background-image: -moz-linear-gradient(top, #fafafa, #ddd); background-image: -ms-linear-gradient(top, #fafafa, #ddd); background-image: -o-linear-gradient(top, #fafafa, #ddd); background-image: linear-gradient(top, #fafafa, #ddd); } .form-segitiga{ width: full; height: 100%; background: url(bg_school3.jpg) no-repeat center center fixed; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; margin: 0px; padding: 10px; color: #fff; } .intro-segitiga{ margin: 0px; padding: 0px; position: relative; } .intro-segitiga > h1{ text-align: center; margin: 100px 0px 0px 0px; text-shadow: 2px 2px 3px rgba(0,0,0,0.6); font-size: 40px; } .fm-segitiga1{ margin: 0px 0px 0px 50px; padding: 0px; width: 45%; height: 70%; background: url(bg_papan2.png) no-repeat top center; -webkit-background-size: 100% 80%; -moz-background-size: 100% 80%; -o-background-size: 100% 80%; background-size: 100% 80%; float: left; } .segitiga-script1{ padding: 0px; margin: 50px 0px 0px 60px; font-size: 30px; text-align: left; } .fm-segitiga2{ margin: 0px 0px 0px 50px; padding: 0px; width: 45%; height: 70%; background: url(bg_papan.png) no-repeat center center; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; float: left; } .segitiga-script2{ padding: 0px; margin: 50px 0px 0px 60px; font-size: 20px; text-align: left; } .kaki-sgt{ font-size: 24px; color: #0D47A1; text-align: center; width:100%; height:auto; background:#ccccff; float:left; box-shadow: 3px -2.9px #ff8540; } #sidebar{ width:auto; height:auto; background:#ccccff; float:left; position: fixed; padding-right: 10px; margin-top: 50px; box-shadow: 3px 3px #ff8540; } ul.slider li { -webkit-transition-duration: 800ms; width: auto; height: auto; border:1px solid #F2F2F2; margin:1px; display: block; } ul.slider li:hover { margin-left: 30px; } ul.slider li a { -webkit-transition-duration: 800ms, 800ms, 800ms, 800ms; background-color: #fff; color: #afafaf; padding: 10px; } ul.slider li a:link, ul.slider li a { display:block; text-decoration:none; } ul.slider li a:hover { background-color: #3B5998; color: #D8DFEA; padding-left: 30px; z-slider: 2; } .form-for{ width: full; height: 100%; background: url(bg_school2.jpg) no-repeat center center fixed; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; margin: 0px; padding: 10px; color: #fff; } .intro-for{ margin: 0px; padding: 0px; position: relative; } .intro-for > h1{ text-align: center; padding: 0px; margin: 100px 0px 0px 0px; text-shadow: 2px 2px 3px rgba(0,0,0,0.6); font-size: 40px; } .fm-for1{ margin: 0px 0px 0px 250px; padding: 0px; width: 40%; height: 75%; background: url(bg_papan2.png) no-repeat top center; -webkit-background-size: 100% 60%; -moz-background-size: 100% 60%; -o-background-size: 100% 60%; background-size: 100% 60%; float: left; } .for-script1{ color: #fff; padding: 0px; margin: 50px 0px 0px 60px; font-size: 30px; text-align: left; } .tabel-for{ color: white; padding: 0px; margin: 0px; } .tabel-for tr{ color: white; font-size: 24px; } .input-for{ width: 230px; margin: 0px; border: none; font-size: 10pt; border-radius: 8px; border-bottom:4px solid black; padding: 10px; text-align: right; } .btn-for{ background: #FFEB3B; text-align: center; width: 400px; border: none; font-size: 16pt; border-radius: 5px; border-bottom:4px solid #F9A825; margin: 10px 5px 5px 5px; padding: 10px; } .fm-for2{ margin: 0px 0px 0px 0px; padding: 0px; width: 40%; height: 75%; background: url(bg_papan.png) no-repeat center center; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; float: left; } .for-script2{ color: #fff; padding: 0px; margin: 20px 0px 0px 20px; font-size: 14px; text-align: left; } .form-while{ width: full; height: 100%; background: url(bg3.jpg) no-repeat center center fixed; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; margin: 0px; padding: 10px; color: #fff; } .intro-while{ margin: 0px; padding: 0px; position: relative; } .intro-while > h1{ text-align: center; padding: 0px; margin: 50px 0px 0px 0px; text-shadow: 2px 2px 3px rgba(0,0,0,0.6); font-size: 40px; } .fm-while1{ margin: 0px 0px 0px 250px; padding: 0px; width: 40%; height: 75%; background: url(bg_papan2.png) no-repeat top center; -webkit-background-size: 100% 60%; -moz-background-size: 100% 60%; -o-background-size: 100% 60%; background-size: 100% 60%; float: left; } .while-script1{ color: #fff; padding: 0px; margin: 50px 0px 0px 60px; font-size: 30px; text-align: left; } .tabel-while{ color: white; padding: 0px; margin: 0px; } .tabel-while tr{ color: white; font-size: 24px; } .input-while{ width: 230px; margin: 0px; border: none; font-size: 10pt; border-radius: 8px; border-bottom:4px solid black; padding: 10px; text-align: right; } .btn-while{ background: #FFEB3B; text-align: center; width: 400px; border: none; font-size: 16pt; border-radius: 5px; border-bottom:4px solid #F9A825; margin: 10px 5px 5px 5px; padding: 10px; } .fm-while2{ margin: 0px 0px 0px 0px; padding: 0px; width: 40%; height: 85%; background: url(bg_papan.png) no-repeat center center; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; float: left; } .while-script2{ color: #fff; padding: 0px; margin: 20px 0px 0px 20px; font-size: 14px; text-align: left; } .form-dowhile{ width: full; height: 100%; background: url(bg_school.jpg) no-repeat center center fixed; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; margin: 0px; padding: 10px; color: #fff; } .intro-dowhile{ margin: 0px; padding: 0px; position: relative; } .intro-dowhile > h1{ text-align: center; padding: 0px; margin: 50px 0px 0px 0px; text-shadow: 2px 2px 3px rgba(0,0,0,0.6); font-size: 40px; } .fm-dowhile1{ margin: 0px 0px 0px 250px; padding: 0px; width: 40%; height: 75%; background: url(bg_papan2.png) no-repeat top center; -webkit-background-size: 100% 60%; -moz-background-size: 100% 60%; -o-background-size: 100% 60%; background-size: 100% 60%; float: left; } .dowhile-script1{ color: #fff; padding: 0px; margin: 50px 0px 0px 60px; font-size: 30px; text-align: left; } .tabel-dowhile{ color: white; padding: 0px; margin: 0px; } .tabel-dowhile tr{ color: white; font-size: 24px; } .input-dowhile{ width: 230px; margin: 0px; border: none; font-size: 10pt; border-radius: 8px; border-bottom:4px solid black; padding: 10px; text-align: right; } .btn-dowhile{ background: #FFEB3B; text-align: center; width: 400px; border: none; font-size: 16pt; border-radius: 5px; border-bottom:4px solid #F9A825; margin: 10px 5px 5px 5px; padding: 10px; } .fm-dowhile2{ margin: 0px 0px 0px 0px; padding: 0px; width: 40%; height: 85%; background: url(bg_papan.png) no-repeat center center; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; float: left; } .dowhile-script2{ color: #fff; padding: 0px; margin: 20px 0px 0px 20px; font-size: 14px; text-align: left; } .kaki{ font-size: 24px; color: #0D47A1; text-align: center; width:100%; height:auto; background:#ccccff; float:left; box-shadow: 3px -2.9px #ff8540; }

Dan berikut hasilnya gan panggil di web browser kalian masing-masing..

Tampilan index.php

Tampilan faktorial.php

Tampilan segitiga.php

Untuk agan - agan yang males mengetik bisa langsung aja ambil projeknya di github penulis ini link nya gan:

https://github.com/firdausshinoda/membuat-perulangan-segitiga-dan-faktorial

Ok mungkin itu saja yang bisa penulis bagikan kali ini kurang lebihnya mohon maaf, sampai bertemu di postingan selanjutnya. Jangan pernah malas untuk mencoba - coba gan.. :D

Wassalammualaikum WR.WB...

FIRDAUS N S

Blog Archive

Total Tayangan Halaman

Pengikut

Mengenai Saya

Senin, 28 Maret 2016

Membuat Segitiga dengan for dan While, Dan Faktorial dengan for, while dan do-while Di PHP

0 komentar:

Posting Komentar