Selasa, 26 September 2017

Pembayaran rekening listrik

Hai guys!
Pada pelajaran Algoritma kali ini saya akan mempelajari cara membuat algoritma deskriptif untuk menyelesaikan permasalahan pembayaran rekening listrik.
A.Analisa

  • Input :
    • Harga perWatt
    • Pemakaian AC
    • Pemakaian TV
    • Pemakaian Kulkas
    • Pemakaian Lampu
  • Output :
    • Pembayaran rekening listrik
B. Algoritma
  1. Input harga perWatt
  2. Input pemakaian AC
  3. Input pemakaian TV
  4. Input pemakaian kulkas
  5. Input pemakaian lampu
  6. Hitung total pemakaian perWatt
    = total pemakaian ( AC + TV + kulkas + lampu )
  7. Hitung total pembayaran
    = (total pemakaian * harga perWatt)
  8. Tampilkan jumlah pembayaran
Selanjutnya tampilkan script nya dengan menggunakan notepad++ :
<html>
<head>
<title>Program Rekening Listrik</title>
<script>
function RekeningListrik()
{
var totPemakaian;
var hargaperKwh;
var totPembayaran;
//1. Input total pemakaian
totPemakaian = InputData("txtTotalPemakaian");
//2. Input harga per Kwh
hargaPerKwh = InputData("txtHarga");
//3. Hitung total pembayaran
totPembayaran = TotalPembayaran(totPemakaian,hargaPerKwh);
//4. Tampilkan Total Pembayaran
OutputData(totPembayaran);
}
function TotalPembayaran(totalPemakaian,hargaPerKwh)
{
var totalPembayaran;
totalPembayaran = parseInt(totalPemakaian * hargaPerKwh);
return totalPembayaran;
}
</script>
</head>
<body>
<script>
function OutputData(keluaran)
{
document.getElementById("lblTotalTagihan").innerHTML = keluaran;
}
function InputData(namaKomponen)
{
var data;
data = document.getElementById(namaKomponen).value;
return data;
}
</script>
<div>
<div>
<label>Total Pemakaian</label>
<input type="text" id="txtTotalPemakaian"/>
</div>
<div>
<label>Harga per Kwh</label>
<input type="text" id="txtHarga"/>
</div>
<div>
<label>Total Tagihan</label>
<label id="lblTotalTagihan">0</label>
</div>
<div>
<input type="button" id="btnHitung" value="Hitung" onclick="RekeningListrik()"/>
</div>
</div>
</body>
</html>

Lalu simpan dan hasilnya :

Sabtu, 16 September 2017

Rata-Rata

Hai guys!
kita akan mempelajari cara membuat rata-rata dengan menggunakan notepad++.
buat file dengan notepad++ seperti berikut:

<html>
    <head>
        <title>Penjumlahan 2 Variabel</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <style>
                .box {
                    width: 40%;
                    border-radius: 5px;
                    border: 1px solid #9b9b9b;
                    padding: 20px 0px 20px 0px;
                    margin-left: 30%;
                }
                .h2{
                    font-family: calibri;
                    font-weight: lighter;
                    letter-spacing: 3px;
                }
                #bil1{
                    padding: 5px;
                }
           
                #bil2{
                    padding: 5px;
                }
                #hasil{
                    color: #ff0b0b;
                }
                .tbl1{
                    font-family: calibri;
                }
                .btn{
                    padding: 10px;
                    border-radius: 5px;
                    cursor: pointer;
                    border: 0px;
                    color: #fff;
                    background: #3b7fff;
                }
            </style>
      
        <script>
            function Hitung(dat1,dat2,dat3,dat4,dat5,dat6){
                var total,totalrat;
                total = dat1+dat2+dat3+dat4+dat5+dat6;
              
                totalrat = total / 6;
                return totalrat;
            }
        </script>
    </head>
    <body>
        <div class="box">
            <center>
                <h2 class="h2">Aplikasi Rata-Rata Nilai Mahasiswa</h2>
              
        <table class="tbl1">
            <tr>
                <td><label>ALPRO</label></td>
                <td>=</td>
                <td><input type="text" id="alpro" placeholder="Masukan bilangan 1"></td>
            </tr>
            <tr>
                <td><label>Basis Data</label></td>
                <td>=</td>
                <td><input type="text" id="bd" placeholder="Masukan bilangan 1"></td>
            </tr>
            <tr>
                <td><label>Program Paket Niaga</label></td>
                <td>=</td>
                <td><input type="text" id="ppn" placeholder="Masukan bilangan 1"></td>
            </tr>
            <tr>
                <td><label>PTI</label></td>
                <td>=</td>
                <td><input type="text" id="pti" placeholder="Masukan bilangan 1"></td>
            </tr>
            <tr>
                <td><label>Matematika</label></td>
                <td>=</td>
                <td><input type="text" id="mtk" placeholder="Masukan bilangan 1"></td>
            </tr>
            <tr>
                <td><label>Bahasa Inggris</label></td>
                <td>=</td>
                <td><input type="text" id="bing" placeholder="Masukan bilangan 1"></td>
            </tr>
            <tr>
                <td><label>Rata-Rata</label></td>
                <td>=</td>
                <td><label id="rata_rata"></label></td>
            </tr>
        </table>
  <br>
  <input type="button" id="btn" value="Rata-Rata" class="btn" onClick="Ratarata()">
            </center>
        </div>
      <script>
          function InputData(Bilangan){
            var data;
              data = parseFloat(document.getElementById(Bilangan).value);
            return data;
          }
        
          function Output(data){
              document.getElementById("rata_rata").innerHTML = data;
          }
        
          function Ratarata(){
            //Deklarasi Variable
            var dat1,dat2,dat3,dat4,dat5,dat6,ratarata;
            //Input
            dat1  = InputData("alpro");
            dat2  = InputData("bd");
            dat3  = InputData("ppn");
            dat4  = InputData("pti");
            dat5  = InputData("mtk");
            dat6  = InputData("bing");
            //Proses
            ratarata = Hitung(dat1,dat2,dat3,dat4,dat5,dat6);
            //OutPut
            Output(ratarata);
          }
        
      </script>
    </body>
</html>

Simpan lalu buka dengan browser dan hasilnya:

Selasa, 05 September 2017

Pembagian 2 Bilangan


Membuat pembagian 2 bilangan dengan menggunakan Notepad++
<html>
<head>
<tittle>Pembagian 2 Variabel</tittle>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function pembagian(a,b)
{
var hasil;
hasil=parseFloat(a)/parseFloat(b)
return hasil;
}
</script>
<style>
.box {
width:40%;
border-radius:5px;
border:1px solid #9b9b9b;
padding:20px 0px 20px 0px;
margin-left:30%;
}
.h2{
font-family:calibri;
font-weight:lighter;
letter-spacing:3px;
}
#bil1{
padding:5px;
}
#bil2{
padding:5px;
}
#hasil{
color:#ff0b0b
}
</style>
</head>
<body>
<div class="box">
<center>
<h2 class="h2">Aplikasi pembagian 2 bilangan</h2>
<div class="box1">
<label>Bil 1</label>
<input tyle="text" id="bil1" placeholder="Masukan bilangan 1">
</div>
<br>
<div class="box2">
<label>Bil 2</label>
<input type="text" id="bil2" placeholder="Masukan bilangan 2">
</div>
<div class="box3">
<label>Hasil</label>
<label id="hasil"></label>

</div>
<br>
<input type="button" id="btn" value="pembagian" class="btn"
onClick="bagi()">
</center>
</div>
<script>
function bagi(){
//input
var a = document.getElementById("bil1").value;
var b = document.getElementById("bil2").value;
//proses
var hasil=pembagian(a,b);
//output
document.getElementById("hasil").innerHTML=hasil;

}
</script>
</body>
</html>

simpan lalu untuk melihat hasilnya masuk ke file yang dibuat tadi dengan menggunakan browser lalu hasilnya

Senin, 28 Agustus 2017

Aritmatika


Membuat Aritmatika dengan menggunakan Notepad++ seperti contoh dibawah ini :

<html>
        <head>
                <title> Program Aritmatika </title>
                <script>
                        function GetJumlah()
                        {
                               //deklarasi variabel
                                var hasil;
                                var input1;
                                var input2;
                               //Input
                                 input1 = parseInt(document .
                                 getElementById("txtInput1").
                                 value);

                                i nput2 = parseInt(document .
                                 getElementById("txtInput2").
                                 value);
                                //proses
                                 hasil = input1 + input2;
                                //output
                                 document.getElementById("txtHasil") .value = hasil;
                         }
                  </script>
        </head>
        <body>
               <div>
                       <div>
                        <label>Input 1</label>
                        <input type="text" id="txtInput1"/>
                       </div>
                       <div>
                                <label>Input 2</label>
                                <input type="text" id="txtInput2"/>
                        </div>
                        <div>
                                <label>Hasil</label>
                                <input type="text" id="txtHasil"/>
                        </div>
                         <div>
                                <input type="button" value="Jumlah" onclick="GetJumlah()"/>
                         </div>
                <div>
       </body>
</html>

Simpan lalu buka browser dan hasilnya :

Percobaan 3


Buat file dengan Notepad++ seperti contoh dibawah ini :


 <html>
<head>
</head>
<body>
<div>
<label>Input</label>
<Input type="text"/>
</div>
<div>
<label>Output</label>
<label>Output</label>
</div>
<div>
<Input type="button"value="proses"/>
</div>
<body>
</html>
 
 
 
Simpan dengan nama percobaan3.html lalu buka dengan browser dan hasilnya :



Percobaan 2


Buat file dengan Netbeans seperti contoh dibawah ini :

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
--><html>
<head>
            <style>
.tengah{
margin:auto;
width:50%;
border:3px solid brown;
padding:10px;
}
</style>
</head>
<body>
<div class="tengah">
<h1>FORM MABA</h1>
<div>
            <label>Nama</label>
            <input type="text"/>
</div>
<div>
           <label>Alamat</label>
           <input type="text"/>
</div>
<div>
           <label>RT</label>
           <input type="text"/>
           <label>RW</label>
           <input type="text"/>
</div>
<div>
           <label>Sekolah</label>
           <input type="text"/>
           <input type="button" value="Cari"/>
</div>
<div>
           <input type="button" value="Proses"/>
</div>
</body>
</html>

Simpan lalu buka dengan browser dan hasilnya :

Percobaan1



Hello Guys
Pada kesempatan kali ini kita akan belajar menggunakan Notepad++.
Buat file dengan notepad++ seperti contoh dibawah ini :

<html>
<head>
</head>
<body>
<div>
          <label>Bilangan 1</label>
          <input type="text"/>
</div>
<div>
         <label>Bilangan 2</label>
         <input type="text"/>
</div>
</body>
</html>

Simpan dengan nama percobaan1.html lalu buka dengan browser dan hasilnya :