Cara Membuat Pemilihan, Perulangan & Array Pada HTML Berikut Contoh

Tugas Pemograan Web 1 
(PEMILIHAN, PERULANGAN DAN ARRAY)

Diajukan untuk Memenuhi salah satu mata kuliah Praktikum Pemograman Web 1

Dosen Pengampu: Rio Andriyat, M.Kom

Disusun Oleh :
   
Cecep Pauji Ramadhan
 20160910077
Sistem Informasi 2016 C



FAKULTAS ILMU KOMPUTER
PROGRAM STUDI SISTEM INFORMASI
UNIVERSITAS KUNINGAN
2018






MODUL VI

                            PEMILIHAN, PERULANGAN DAN ARRAY

PostTest
Program javascript menghitung data penjualan :
<html>
<head>
            <title>Post Test</title>
</head>
<script language = "javascript">
function hitung(){
var nmp;
var hrg;
var kodeproduk = document.data.kode.value;
var jumlahbeli = parseInt(document.data.jml.value);

            if(kodeproduk == "B01"){
                        nmp = "Monitor";
                        hrg = "500000";
            }
            else if(kodeproduk == "B02"){
                        nmp = "Keyboard";
                        hrg = "25000";
            }
var harga = parseInt(hrg);
document.data.nproduk.value = nmp;
document.data.nharga.value = hrg;
document.data.nbayar.value = jumlahbeli*harga;
}
</script>

<body>
<center>
<h1>MENGHITUNG DATA PENJUALAN</h1>
<form name="data">
<table border="1" bgcolor="black">

<tr>
            <td bgcolor="black" width="200" colspan="2" align="center">
            <font color="white">DATA PENJUALAN</font>
            </td>
</tr>
<tr>
            <td bgcolor="black" width="200"><font color="white">Kode Produk</font></td>
            <td bgcolor="black" width="200">
                        <select name = "kode">
                        <option>Pilih Salah Satu</option>
                        <option>B01</option>
                        <option>B02</option>
                        </select></td>
</tr>
<tr>
            <td bgcolor="black" width="200"><font color="white">Jumlah Beli</font></td>
            <td bgcolor="black" width="200"><input type="text" name = "jml"></td>
</tr>
<tr>
            <td bgcolor="black" width="200" colspan = "2">
                        <input type = "button" value = "Hitung" onclick="hitung()">
                        <input type = "reset" value = "Batal">
            </td>
</tr>
<tr>
            <td bgcolor="black" width="200"><font color="white">Nama Produk</font></td>
            <td bgcolor="black" width="200"><input type="text" name = "nproduk"></td>
</tr>
<tr>
            <td bgcolor="black" width="200"><font color="white">Harga</font></td>
            <td bgcolor="black" width="200"><input type="text" name = "nharga"></td>
</tr>
<tr>
            <td bgcolor="black" width="200"><font color="white">Total Bayar</font></td>
            <td bgcolor="black" width="200"><input type="text" name = "nbayar"></td>
</tr>

</table>
</form>
</center>
</body>
</html>

Simpan scrip tersebut dengan nama Postest.html
Hasilnya :

Analisis :
var kodeproduk = document.data.kode.value; untuk memberikan isi dari variabel kodeproduk.
var jumlahbeli = parseInt(document.data.jml.value); untuk memberikan isi dari variabel jumlahbeli dan isi nilai tersebut akan dikonversikan ke dalam bentuk integer
            if(kodeproduk == "B01"){
                        nmp = "Monitor";
                        hrg = "500000";
            }
            else if(kodeproduk == "B02"){
                        nmp = "Keyboard";
                        hrg = "25000";
            }
Terdapat proses pemilihan yaitu fungsi if dimana jika pengguna memilih kodeproduk B02 maka akan tampil nama produk yaitu Keyboard dan harganya 250000
var harga = parseInt(hrg); untuk mengkonversikan nilai harga yang terdapat dalam if ke dalam bentuk integer.
document.data.nproduk.value = nmp; untuk menampilkan data nama produk yang telah dipilih oleh pengguna dan data akan ditampilkan pada <input type="text" name = "nproduk">
document.data.nharga.value = hrg; nmp; untuk menampilkan data harga yang telah dipilih oleh pengguna dan data akan ditampilkan pada <input type="text" name = "nharga">
document.data.nbayar.value = jumlahbeli*harga; untuk menampilkan data dari proses jumlahbeli*harga dan data akan ditampilkan pada <input type="text" name = "nbayar">

Juni 29, 2018 | |

 

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)

Cari Blog Ini
Diberdayakan oleh Blogger.