Membuat segitiga siku dengan looping for dan while pada PHP

Hai sobat hyda...
kembali lagi dengan Mas Hyda, kali ini mas Hyda akan memberikan contoh sederhana cara membuat segitiga siku dengan looping for dan while pada PHP :D

oke langsung saja sediakan alat tempurnya :
1. buka notepad++, kemudian buat file baru dan pastekan kode berikut :
    a. style.css
body{
margin : 0;
padding : 0;
width: auto;
height: auto;
background: url(e.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%;
}
h1 {text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
color : white;}
.menu > li {
   color: #fff;
   height:100%;
   padding: 0px;
   margin : 80px 0px 80px 0px;
  }
 
  .menu{
   position:fixed;
   top:0;
   left:0;
   height: 100%;
   z-index: 70;
   width: 150px;
   padding:0;
   margin:0;
   background: rgba(51, 153, 255, 0.5);
   text-transform:uppercase;
   font-family: 'Open Sans', sans serif;
   box-shadow: 3px 0px #0066ff;
  }
nav{
overflow: auto;
display: block;
color: #2196F3;
}
nav ul{
list-style: none;
height: 500px;
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;
}
#box{
position : absolute;
top :100px;
left : 12%;
width: 20%;
height : auto;
padding: 15px;
background: white;
font: 18px/1.5 Georgie, Serif;
filter:alpha(opacity=100);
-moz-opacity:0.0;
opacity:0.8;
-khtml-opacity:0.0;
border-radius : 5px
}
#box2 {
position : absolute;
top :100px;
left : 37%;
width: 10%;
height : auto;
padding: 15px;
background: purple;
font: 18px/1.5 Georgie, Serif;
filter:alpha(opacity=100);
-moz-opacity:0.0;
opacity:0.8;
-khtml-opacity:0.0;
border: 2px solid #000;
border-radius : 5px
}
#box3{
position : absolute;
top :100px;
left : 53%;
width: 20%;
height : auto;
padding: 15px;
background: white;
font: 18px/1.5 Georgie, Serif;
filter:alpha(opacity=100);
-moz-opacity:0.0;
opacity:0.8;
-khtml-opacity:0.0;
border-radius : 5px
}
#box4 {
position : absolute;
top :100px;
left : 78%;
width: auto;
height : auto;
padding: 15px;
background: purple;
font: 18px/1.5 Georgie, Serif;
filter:alpha(opacity=100);
-moz-opacity:0.0;
opacity:0.8;
-khtml-opacity:0.0;
border: 2px solid #000;
border-radius : 5px
}
#box5{
position : absolute;
top :100px;
left : 12%;
width: 50%;
height : auto;
padding: 15px;
background: white;
font: 18px/1.5 Georgie, Serif;
filter:alpha(opacity=100);
-moz-opacity:0.0;
opacity:0.8;
-khtml-opacity:0.0;
border-radius : 5px
}
#box6 {
position : absolute;
top :100px;
left : 70%;
width: auto;
height : auto;
padding: 15px;
background: purple;
font: 22px/1.5 Georgie, Serif;
filter:alpha(opacity=100);
-moz-opacity:0.0;
opacity:0.8;
-khtml-opacity:0.0;
border: 2px solid #000;
border-radius : 5px
}
#boxhome{
position : absolute;
top:20%;
margin-left: 50%;
margin-top: auto;
margin-right: 10px;
width: 35%;
height : 93%;
padding: 20px;
text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
}
/*--- Path Foto ---*/
.circel{
width: 200px;
height: 200px;
background: #1e90ff;
-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
}
.bayang-O{
width: 200px;
height: 200px;
border: 5px solid #fff;
-moz-box-shadow: 0px 6px 5px #ccc;
-webkit-box-shadow: 0px 6px 5px #ccc;
box-shadow: 0px 0px 0px #ccc;
-moz-border-radius:190px;
-webkit-border-radius:190px;
border-radius:190px;
}
.container{
position: absolute;
top: 170px;
left: 500px; }


  b. index.php 
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home | Arif Hidayah</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- bagian navigasi -->
<div>
<nav>
<ul class="menu">
<br><br>
<li><a href="index.php">HOME</a></li><br><br>
<li><a href="segitigafor.php">SEGITIGA</a></li><br><br>
<li><a href="fakfor.php">FAKTORIAL</a></li><br><br>
</ul>
</nav>
</div>
<!-- bagian home -->
<div class='home'>
<div id='bureng'></div>
<div id="boxhome">
<strong><font color="white" size="100" face="Arial" >ARIF</font><br>
<font color="yellow" size='20' face="Bauhaus 93 Regular" >HIDAYAH</font></strong><br><br>
<font color="white" size='12' face="Bauhaus 93 Regular" >STUDENT & PROGRAMER</font>
</div></div>
<div class="container">
<div class="bayang-O">
<div class='circel' >
<a href = "arifhidayah22@blogspot.co.id">
<img src="ww.jpg" height="200" width ="200">
</a>
</div>
</div>

</div>
<div style='clear:both'>
</body>
</html>

c. segitigafor.php 
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Perulangan | Segitiga Siku</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- bagian navigasi -->
<div>
<nav>
<ul class="menu">
<br><br>
<li><a href="index.php">HOME</a></li><br><br>
<li><a href="segitigafor.php">SEGITIGA</a></li><br><br>
<li><a href="fakfor.php">FAKTORIAL</a></li><br><br>
<hr><br><br>
<li><a href="segitigafor.php">Segitiga For</a></li><br><br>
<li><a href="segitgawhile.php">Segitiga While</a></li><br><br>
</ul>
</nav>
</div>
<br>
<center><b><h1> Perulangan For Membentuk Segitiga Siku </h1></b></center>
<!-- bagian perulangan for -->
<div id="box2">
<?php
$bil = 5;
for($i=1;$i<=$bil;$i++){
for($j=1;$j<=$i;$j++){
echo $i;
}
echo '<br/>';
}
?>
</div>
<div id="box">
<p><b>Berikut source code tampilan di samping kanan : </b><br> &lt;?php
<br>$bil = 5;
<br>for($i=1;$i<=$bil;$i++){
<br>for($j=1;$j<=$i;$j++){
<br>echo $i;
<br>}
<br>echo '< br />';
<br>}
<br>?&gt
</p>
</div>
<div id="box4">
<?php
$bil = isset($_POST['bil']) ? $_POST['bil'] : NULL;
echo '<form action="" method="post">';
echo '<input class="field" type="text" name="bil" value="'.$bil.'" placeholder="Masukkan Bilangan..."/>';
echo '<input class="tombol" type="submit" name="submit" value="OK"/>';
echo '</form>';
if((isset($bil))and($bil!=NULL)){
echo 'Hasil Perulangan : <br/>';
for($i=1;$i<=$bil;$i++){
for($j=1;$j<=$i;$j++){
echo $i;
}
echo '<br/>';
}
}
?>
</div>
<div id="box3">
<p><b>Berikut source code tampilan di samping kanan : </b><br> &lt;?php
    <br>$bil = isset($_POST['bil']) ? $_POST['bil'] : NULL;
<br>echo '< form action="" method="post">';
<br>echo '< input class="field" type="text" name="bil" value="'.$bil.'" placeholder="Masukkan Bilangan..."/>';
<br>echo '< input class="tombol" type="submit" name="submit" value="OK"/>';
<br>echo '< / form>';
<br>if((isset($bil))and($bil!=NULL)){
<br>echo 'Hasil Perulangan :';
<br>for($i=1;$i<=$bil;$i++){
<br>for($j=1;$j<=$i;$j++){
<br>echo $i;
<br>}
<br>echo '< br/>';
<br>}}?&gt
</p>
</div>

</body>
</html>

 d. segitigawhile.php
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Perulangan | Segitiga Siku</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- bagian navigasi -->
<div>
<nav>
<ul class="menu">
<br><br>
<li><a href="index.php">HOME</a></li><br><br>
<li><a href="segitigafor.php">SEGITIGA</a></li><br><br>
<li><a href="fakfor.php">FAKTORIAL</a></li><br><br>
<hr><br><br>
<li><a href="segitigafor.php">Segitiga For</a></li><br><br>
<li><a href="segitgawhile.php">Segitiga While</a></li><br><br>
</ul>
</nav>
</div>
<br>
<center><b><h1> Perulangan While Membentuk Segitiga Siku </h1></b></center>
<!-- bagian perulangan for -->
<div id="box2">
<?php
$bil=5;
$i=0;
while($i<$bil){
$i++;
$j=0;
while($j<$i){
$j++;
echo $i;
}
echo '<br/>';
}
?>
</div>
<div id="box">
<p><b>Berikut source code tampilan di samping kanan :</b> <br> &lt;?php
<br>$bil=5;
<br>$i=0;
<br>while($i<$bil){
<br>$i++;
<br>$j=0;
<br>while($j<$i){
<br>$j++;
<br>echo $i;
<br>}
<br>echo '< br/>';
<br>}
<br>?&gt
</p>
</div>
<div id="box4">
<?php
$bil = isset($_POST['bil']) ? $_POST['bil'] : NULL;
echo '<form action="" method="post">';
echo '<input class="field" type="text" name="bil" value="'.$bil.'" placeholder="Masukkan Bilangan..."/>';
echo '<input class="tombol" type="submit" name="submit" value="OK"/>';
echo '</form>';
if((isset($bil))and($bil!=NULL)){
echo '<h4>Hasil Perulangan :</h4><br/>';
$i=0;
while($i<$bil){
$i++;
$j=0;
while($j<$i){
$j++;
echo $i;
}
echo '<br/>';
}
}
?>
</div>
<div id="box3">
<p><b>Berikut source code tampilan di samping kanan :</b> <br> &lt;?php
    <br>$bil = isset($_POST['bil']) ? $_POST['bil'] : NULL;
<br>echo '< form action="" method="post">';
<br>echo '< input class="field" type="text" name="bil" value="'.$bil.'" placeholder="Masukkan Bilangan..."/>';
<br>echo '< input class="tombol" type="submit" name="submit" value="OK"/>';
<br>echo '</ form>';
<br>if((isset($bil))and($bil!=NULL)){
<br>echo '< h4>Hasil Perulangan :</ h4>';
<br>$i=0;
<br>while($i<$bil){
<br>$i++;
<br>$j=0;
<br>while($j<$i){
<br>$j++;
<br>echo $i;
<br>}
<br>echo '< br/>';
<br>}}?&gt
</p>
</div>

</body>
</html>

2. simpan source code diatas pada C:\xampp\htdocs\perulangan
3. jalankan xampp
4.buka web browser dan ketikan http://localhost/perulangan/index.php

dan tarrrrrraaaaaaaaaaaaaaaaaaaaaaaa.... silahkan di coba :D dan tunggu contoh perulangan selanjutnya :D



Komentar

Posting Komentar

Postingan populer dari blog ini

Cara install dan menggunakan crack Ulead video studio 11 plus dengan Mudah

Gambar
   Cara install dan menggunakan crack Ulead video studio 11 plus dengan Mudah - Salam kenal teman-teman semua, Untuk perjumpaan kita kali ini, saya telah membuat sebuah artikel menarik untuk anda simak yakni tentang Cara install dan menggunakan crack Ulead video studio 11 plus dengan Mudah  yang dapat anda baca Cara instal : 1.     instal ulead video studio 11 plus yang sudah di download tadi (kalau sudah jangan dibuka dahulu) 2.     extract crack nya  3.     copy data pada folder crack dan paste di folder ulead video studio, lalu klik replace 4.     setelah itu buka ulead video studionya 5.     have fun
Baca selengkapnya

Driver Lengkap ACER Aspire 4732z

ketemu lagi dengan Mas Hyda.. kemaren tuhya Mas Hyda habis main di rumah Pakdhe, singkat cerita Mas Hyda kan anak IT(ciieee sok banget dah!) suka cari masalah.. eh akhirnya nemu deh laptop ACER Aspire 4732z milik anak nya pakdhe...eeittsss bukan di bawa pulang lho !! masalah nya gini sobat, tu laptop gak bisa buat wifi-an.. sambil gaya Mas Hyda coba nge-So depan nya anak Pakdhe sebut saja "Bumi"... 'bawa sini bum..coba mas Hyda benerin' :D tebakan Mas Hyda paling cuma drivernya doang blum ke instal.. ternyata tebakan mas Hyda benar !! (yeyeye-lalala-yyeye :D) Cara memastikan driver terinstal/belum : Klik kanan My Computer > Manage > Device manager Kalo ada yg bertanda seru kuning, brati drivernya belum terinstal dengan baik. Nah kalo belum terinstal, sobat Hyda sekalian harus unduh dulu driver nya kemudian di instal lah tuh driver. berikut Driver untuk  ACER Aspire 4732z   A. Acer Aspire 4732Z drivers win 7 32 bit ConexantAudio Driver size 9.9
Baca selengkapnya