AdityaDees

Selamat datang kawan kawan di blog saya yang sederhana ini . Sebelumnya saya mau tanya bagaimana kabarnya kawan mudah mudahan sehat , amin . 



Oke kali ini kita akan bahas mengenai javascript . Kita sekarang akan membuat bagaimana cara memanipulasi posisi dengan menggunakan libary javascript yaitu jQuery . Gimana sih caranya ? jadi pada jQuery untuk memanipulasi posisi ada dua fungsi yaitu offset() dan juga position() .Oke yang pertama akan kita coba gunakan adalah yang fungsi offset() dulu saja .

Untuk menggunakan fungsi offset() ini , cara umum penulisannya adalah

offset(koordinat);
offset({top:value,left:value});

Jadi ada dua parameter yang pertama atasnya atau top dan yang kedua adalah pinggirannya atau left .Sekarang kawan kawan sudah tau dan mari kita lanjut ke contohnya .

<style>
#div1{
background-color: yellow;
width:100px;
height: 100px;
position:relative;
left:100;
}
</style>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script>
$(document).ready(function(){
$("#klik").click(function(){
$("#div1").offset({top:300,left:300});
});
});
</script>
<div id="div1">Test</div><input id="klik"value="pindah"type="button">

Begitu kita mengklik pindah maka tag yang mempunyai id div1 akan berpindah ke top 300 dan left 300 . Oke sekarang kita akan coba menggunakan fungsi position() , fungsi ini akan menghasilkan objek yang mempunyai 2 properti yaitu top dan left .

<style>
#div1{
background-color: yellow;
width:100px;
height: 100px;
position:relative;
left:100;
}
</style>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script>
$(document).ready(function(){
$("#klik").click(function(){
var ordinat=$("#div1").offset({top:300,left:300}).position();
alert(ordinat.top+"  "+ordinat.left);
});
});
</script>
<div id="div1">Test</div><input id="klik"value="pindah"type="button">

sebelumnya ini masih contoh yang tadi cuma di tambah fungsi position(); dan saya kasih varible . Begitu kita klik pindah maka akan berpindah dan akan meng alert 300  300 . Gimana mudah bukan ? kita hanya perlu menggunakan fungsinya saja . Oke sekarang kita akan buat lagi dari awal , kita akan coba membuat begitu kita menekan panah kiri , kanan , atas , atau bawah di keyboard maka akan berpindah .Berarti kita akan menggunakan fungsi onkeydown atau onkeyup , buat yang belum tau baca dulu sini , sekarang kita gunakan fungsi onkeydown saja .

<style>
#div1{
width:100px;
height: 100px;
position:absolute;
left:100;
}
</style>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script>
$(document).ready(function(){
posisi=new Object();
var kiri=100;
var atas=0;
function x(){
posisi.left=kiri;
posisi.top=atas;
$("#div1").offset(posisi);
}
var tekan=document.onkeydown=function(p){
if(p.keyCode==39){
if(kiri>=1000){
kiri=1000;
}else{
kiri=kiri+30;}
x();
}
if(p.keyCode==37){
if(kiri<=0){
kiri=0;
}else{
kiri=kiri-30;}
x();
}
if(p.keyCode==40){
if(atas>=1000){
atas=1000;
}else{
atas=atas+30;}
x();
}
if(p.keyCode==38){
if(atas<=0){
atas=0;
}else{
atas=atas-30;}
x();
}
};
});
</script>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhThWT7ihyphenhyphenBop8CXXUSFWcD4G5F3lL7AEkIV0qGZagM4B5-EODRxlLf3vjZRJjAqB1rSJ8XQmi5LLpCe7yOFozmv1dckovOLmF4hUO2_ZDMGW6WS54SNECiCxaSQcx1TpVOqUOrgoJVbD0/s1600/Goblin.png" id="div1"/>

Bro kalo yang 37,38,39,40 , apa ya ? itu namanya kode ascii lebih lengkapnya baca disini .

Scriptnya panjang tetapi sebenarnya itu sederhana jadi kawan kawan gak usah binggung , karena misal kalo kita menekan panah kiri di keyboard maka akan melakukan aritmatika kiri=kiri+30 dan jika kiri lebih besar atau sama dengan 1000 maka kiri tetap 1000 . kalo menekan panah atas di keyboard maka akan melakukan artimatika atas=atas-30 dan jika atas lebih kecil atau sama dengan 0 maka atas tetap 0 .



Oke itu dia belajar manipulasi posisi dengan menggunakan jQuery . Semoga menambah ilmu dan juga tentunya bermanfaat . Terimakasih telah berkenan membaca artikel ini . Sampai jumpa di artikel yang lainnya yang lebih menarik dan juga lebih bermanfaat .

Pesan saya , teruslah lakukan experimen experimen , misal kalo saya kasih source code ini coba kalian buat versi kalian sendiri mungkin scriptnya lebih sederhana .

Hai kawan, pada postingan kali ini, mari kita belajar menghitung berat badan ideal dengan menggunakan php. Rumus yang akan kita pakai untuk menghitung berat badan ideal adalah menggunakan rumus Broca.

Rumus Broca:

Tinggi Badan Normal= Tinggi Badan (cm)-100

Berat Badan Ideal=Berat Badan Normal-10% x Berat Badan Normal

Ok, ayo langsung saja kita buat....

Pertama kita buat dulu form inputannya, buat file dengan nama beratbadan.php..

<html>

<head>

<title>Menghitung Berat Badan Ideal</title>

</head>

<body>

   <form action="hitung.php" method="post">

    <h4>Menghitung Berat Badan Ideal</h4>

      <table>

         <tr>

              <td>Tinggi Badan</td>

              <td>:</td>

              <td><input type="text"  name="tb" size="10"> cm</td>

         </tr>

          <tr>

              <td></td>

              <td></td>

              <td><input type="submit" name="submit' value="hitung"></td>

         </tr>

      </table>

    </form>

</body>

</html>

Setelah selesai membuat file beratbadan.php dan menuliskan kodingan di atas, selanjutnya kita buat satu file lagi dengan nama hitung.php.

<?php

$tb=$_POST['tb'];

$bbn=$tb-100;

$bbi=$bbn-(0.1*$bbn);

echo "Tinggi Badan Anda : $tb cm<br>";

echo "Jadi Berat Badan Ideal Anda : $bbi kg";

?>

Setelah kedua file diatas selesai dibuat, kita jalankan dulu file beratbadan.php dan isi inputan tinggi badannya (misal 165).

Selanjutnya kita klik tombol hitung dan akan menampilkan hasilnya sebagai berikut.

Terima Kasih Telah Berkunjung, Semoga Bermanfaat.....!!

Hai kawan kali ini kita akan belajar bagaimana cara menghitung luas dan keliling lingkaran dengan PHP.

OK Langsung saja...

Pertama kita buat dulu file dengan nama keliling.php untuk membuat form inputan, dan tuliskan koding berikut:

<html>

<head>

<title>Luas dan Keliling Lingkaran</title>

</head>

<body>

   <form>

    <h4>Menghitung Luas dan Keliling Lingkaran</h4>

      <table>

         <tr>

              <td>Jari-jari Lingkaran</td>

              <td>:</td>

              <td><input type="text" id="jari" name="jari"></td>

         </tr>

          <tr>

              <td></td>

              <td></td>

              <td><input type="submit" name="submit" value="Hitung" ></td>

         </tr>

      </table>

    </form>

</body>

</html>

Setelah kita membuat form inputannya, selanjutnya kita buat lagi satu file dengan nama hitung.php, yang digunakan untuk melakukan perhitungan luas dan keliling lingkarannya.

<?php

$jari=$_POST['jari'];

$luas=22/7*$jari*$jari;

$keliling=22/7*($jari+$jari);

echo "Luas Lingkaran = $luas <br>"; 

echo "Keliling Lingkaran = $keliling <br>";

?>

Setelah kita selesai membuat kedua file diatas, pertama jalankan dulu file keliling.php dan isi nilai jari-jari lingkarannya (misal jari-jari= 14).

Setelah kita mengisi nilai jari-jarinya, maka klik hitung untuk melakukan perhitungan luas dan keliling lingkarannya, dan akan menampilkan hasilnya seperti berikut.

Mau liat dan download souce code PHP atau aplikasi lainnya bisa disini.

Hai Kawan, pada postingan sebelumnya kita telah berhasil membuat aplikasi sederhana Menghitung Berat Badan Ideal Menggunakan PHP, dipostingan kali ini, mari kita belajar cara membuat konversi suhu celcius ke reamur, fahrenhait dan kelvin menggunakan PHP. Berikut ini rumus yang akan digunakan untuk mengkonversi celcius ke reamur, fahrenhait dan kelvin

Celcius ke Reamur : Reamur = (4/5) celcius

Celcius ke Fahrenhait : Fahrenheit = (9/5) Celcius + 32 

Celcius ke Kelvin : Kelvin = Celcius + 273  

OK, setelah kita tahu rumusnya, mari kita membuatnya menggunakan php.

Pertama, buat file dengan nama suhu.php, dan tulis koding berikut.

<html>

    <head>

    <title>

        Konversi Satuan Suhu

    </title>

    </head>

    <body>

    <form action="hitung.php" method="post">

    <h4>  Konversi Satuan Suhu</h4>

   

        Suhu <input type="text"  name="suhu"><br><br>

        Konversi: <br>

        <input type="radio" name="konversi" value="reamur" >Reamur<br>

       <input type="radio" name="konversi" value="fahrenhait" >Fahrenhait<br>

       <input type="radio" name="konversi" value="kelvin" >Kelvin<br>

        <input type="submit" name="submit" value="Konversi" >

    </form>

    </body>

</html> 

Setelah kita membuat file suhu.php dan menuliskan kodingan diatas, selanjutnya kita buat file satu lagi dengan nama konversi.php, dan tulis kodingan berikut.

<?php

 $suhu=$_POST['suhu'];

 $konversi=$_POST['konversi'];

 echo "Suhu : $suhu <br>";

 if($konversi=="reamur"){

     $hasil=(4/5)*$suhu;

     echo " Hasil konversi ke Reamur: $hasil ";

 }else if($konversi=="fahrenhait"){

     $hasil=(9/5)*$suhu+32;

     echo "Hasil Konversi ke Fahrenhait : $hasil";

 }else if($konversi=="kelvin"){

     $hasil=$suhu+273;

     echo "Hasil Konversi ke Kelvin: $hasil";

 }else{

     echo "Zonk";

 }

?> 

Saat file suhu.php dijalankan, maka akan menghasilkan form seperti berikut.

Hasil dari program Konversi :

Terima Kasih kawan Telah Berkunjung, Semoga Bermanfaat.....!!

Mau liat dan download kumpulan source code bisa disini 

Halo kawan pada postingan kali ini kita akan mencoba kembali membuat kalkulator sederhana tetapi dengan menggunakan php dengan syntak if....else.

OK Langsung Saja...

Pertama kita buat dulu form inputannya, buat file dengan nama kalkulator.php, dan tulis koding berkut.

<html>

    <head>

    <title>

        Kalkulator Sederhana

    </title>

    </head>

    <body>

    <form action="hitung.php" method="post">

    <h4>Kalkulator Sederhana</h4>

   

        Inputan 1 <input type="text"  name="a"><br><br>

        Inputan 2 <input type="text"  name="b"><br><br>

        Operasi: <br>

        <input type="radio" name="operasi" value="tambah" >Penjumlahan<br>

       <input type="radio" name="operasi" value="kurang" >Pengurangan<br>

       <input type="radio" name="operasi" value="kali" >Perkalian<br>

       <input type="radio" name="operasi" value="bagi" >Pembagian<br><br>

        <input type="submit" name="submit" value="Hitung" >

    </form>

    </body>

</html>

Setelah kita membuat form inputannya, selanjutnya kita buat lagi satu file dengan nama hitung.php, yang digunakan untuk melakukan perhitungan.

<?php

$a=$_POST['a'];

$b=$_POST['b'];

$operasi=$_POST['operasi'];

echo "Inputan 1 = $a <br>";echo "Inputan 2 = $b <br>";

if($operasi=="tambah"){

    $c=$a+$b;

    echo "Hasil penjumlahan $a + $b = $c";

}else if ($operasi=="kurang"){

    $c=$a-$b;

    echo "Hasil Pengurangan $a - $b = $c";

}else if ($operasi=="kali"){

    $c=$a*$b;

    echo "Hasil Perkalian $a x $b = $c";

}else if ($operasi=="bagi"){

    $c=$a/$b;

    echo "Hasil Pembagian $a / $b = $c";

}else {

    echo "Pilih Operasi Dulu Bro";

}

?> 

Setelah kita selesai membuat kedua file diatas, pertama jalankan dulu file kalkulator.php dan isi nilai pada inputan 1 dan inputan 2 (misal kita isi 20 dan 10).

Setelah kita mengisi inputan 1 dan 2, setelah itu klik hitung untuk melakukan perhitungannya, dan akan menampilkan hasilnya seperti berikut.

Kalo ada pertanyaan atau saran bisa dikomen dikolom komentar

Hai kawan, pada kesempatan kali ini mari kita belajar bagaimana cara membuat perhitungan luas segitinga dengan menggunakan HTML dan JavaScript. Perlu diketahuai, untuk menghitung sebuah luas segitiga maka rumus yang digunakan adalah (1/2 x alas x tinggi). OK, mari kita mulai membuatnya....

Pertama buatlah sebuah file dengan nama luassegitiga.html, kemudian kita tuliskan koding HTML untuk membuat form inputan.

<html>

<head>

<title>Menghitung Luas Segitiga</title>

</head>

<body>

   <form>

    <h4>Menghitung Luas Segitiga</h4>

      <table>

         <tr>

              <td>Alas</td>

              <td>:</td>

              <td><input type="text" id="alas" name="alas"></td>

         </tr>

         <tr>

              <td>Tinggi</td>

              <td>:</td>

              <td><input type="text" id="tinggi" name="tinggi"></td>

         </tr> 

          <tr>

              <td>Luas</td>

              <td>:</td>

              <td><input type="text"  id="luas" name="luas" disabled="true" size="5"></td>

         </tr>

          <tr>

              <td></td>

              <td></td>

              <td><input type="button" value="hitung" onClick="luas()"></td>

         </tr>

      </table>

    </form>

</body>

</html>

 Hasil dari koding HTML diatas akan menghasilkan form inputan sebagai berikut:

 Terima Kasih Telah Berkunjung, Semoga Bermanfaat.....!!!

Mau liat kumpulan source code bisa disini