Cara Membuat Pemilihan, Perulangan & Array Pada HTML Berikut Contoh
Tugas Pemograan Web 1
(PEMILIHAN, PERULANGAN DAN ARRAY)
(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">
Cara Membuat JavaScript Pada Html Berikut Contoh
Tugas Pemograan Web 1 (JAVASCRIPT)
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 V
JAVASCRIPT
A.Post
Syntax :
<h1> Program Javascript Simpan data </h1>
| |
<script language="Javascript">
| |
var nim=prompt("Masukan NIM");
| |
var nama=prompt("Masukan Nama");
| |
var alamat=prompt("Masukan Alamat");
| |
var jawaban=window.confirm("Apakah data akan disimpan?");
| |
document.write("Status Penyimpan Data : "+jawaban);
| |
document.write('<br>');
| |
document.write("<br>NIM Anda : "+nim);
| |
document.write('<br>');
| |
document.write("<br>Nama Anda : "+nama);
| |
document.write('<br>');
| |
document.write("<br>Alamat Anda : "+alamat);
| |
</script>
Output :     |
B. Tugas
Syntax :
<html>
| |
<head>
| |
<title> Tugas Operasi Hitungan </title>
| |
</head>
| |
<script language="Javascript">
| |
function jum()
| |
{
| |
var a = parseInt(document.data.bil_1.value);
| |
var b = parseInt(document.data.bil_2.value);
| |
document.data.hasil1.value=a+b;
| |
}
| |
function kali()
| |
{
| |
var a = parseInt(document.data.bil_1.value);
| |
var b = parseInt(document.data.bil_2.value);
| |
document.data.hasil2.value=a*b;
| |
}
| |
function bagi()
| |
{
| |
var a = parseInt(document.data.bil_1.value);
| |
var b = parseInt(document.data.bil_2.value);
| |
document.data.hasil3.value=a/b;
| |
}
| |
function kurang()
| |
{
| |
var a = parseInt(document.data.bil_1.value);
| |
var b = parseInt(document.data.bil_2.value);
| |
document.data.hasil4.value=a-b;
| |
}
| |
</script>
| |
<body>
| |
<form name="data">
| |
<pre>
| |
<table width="25%"align="center"border="1">
| |
<tr><td colspan="2"align="center"> OPERASI HITUNG</td></tr>
| |
<tr><td> Angka Pertama</td><td><input type="text" name="bil_1"></td></tr>
| |
<tr><td> Angka Kedua</td><td><input type="text" name="bil_2"></td></tr>
| |
<tr><td colspan="2"align="center"><input type="button"value="Hitung"onclick="jum(),kali(),bagi(),kurang()"></td></tr>
| |
<tr><td> Hasil Penjumlahan</td><td><input type="text" name="hasil1"></td></tr>
| |
<tr><td> Hasil Perkalian</td><td><input type="text" name="hasil2"></td></tr>
| |
<tr><td> Hasil Pembagian</td><td><input type="text" name="hasil3"></td></tr>
| |
<tr><td> Hasil Pengurangan</td><td><input type="text" name="hasil4"></td></tr>
| |
</table>
| |
</pre>
| |
</form>
| |
</body>
| |
</html>
|
Output : |
Cara Membuat CSS HTML Berikut Contoh
Tugas Pemograan Web 1 (CSS)
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 IV
CSS(Casecading Style Sheet)
A. Pre Test
Membuat Tampilan Seperti Dibawah Ini :
Syntax :
<title> Image Transparency </title>
| |
<h1> Image Transparency </h1>
| |
<style>
| |
div.img{ //Penulisan Css Inline Style Sheet
| |
margin: 5px;
| |
padding: 5px;
| |
border: 1px solid #0000ff;
| |
height: auto;
| |
widht: auto;
| |
float: left;
| |
text-align: center;
| |
}
| |
div.img{
| |
display: inline;
| |
margin: 5px;
| |
border: 1px solid #0000ff;
| |
}
| |
div.img a:hover img{
| |
border: 1px solid #0000ff;
| |
opacity: 0.5;
| |
}
| |
div.desc{
| |
text-align: center;
| |
font-weight: normal;
| |
width: 120px;
| |
margin: 5px;
| |
}
| |
</style>
| |
<div class="img"> //Embedded Style Sheet (Eksternal dan Internal)
| |
<a target="_blank" href="modul4_2.html"><img src="1.jpg" alt="1" width="110" height="90">Add a description of the image here</a></div> //memanggil atau hyperlink pada file lain
| |
<a target="_blank" href="modul4_3.html"><img src="2.jpg" alt="2" width="110" height="90">Add a description of the image here</a></div>
| |
<a target="_blank" href="modul4_4.html"><img src="3.jpg" alt="3" width="110" height="90">Add a description of the image here</a></div>
| |
<br>
| |
<br>
| |
<br>
| |
<br>
| |
<br><br><br>
| |
<p> Note : Arahkan Mouse Ke gambar </p>
|
B. Tugas
Membuat Tampilan/Design Web Seperti Dibawah Ini.
Syntax :
<title> Menu CSS </title>
| |
<table border="0" align="center" width="100%">
| |
<tr>
| |
<td width="81%" align="center"><h1>UNIVERSITAS KUNINGAN</h1>
| |
<h2>FAKULTAS ILMU KOMPUTER</h2>
| |
Kampus 1: jln. Raya Tjut Nyak Dien No.36 Kuningan</td>
| |
</tr>
| |
</table>
| |
<hr size="3" color="metalic">
| |
<link rel="stylesheet" type="text/css" href="Tugas.css">
| |
<nav>
| |
<ul>
| |
</ul>
| |
</nav>
Catatan : syntax diatas hanya memanggil sebuah file yang akan membentuk desain web seperti diatas, membuat desai web seperti diatas menggunakan file css lalu kita tinggal melakukan pemanggilan file css nya saja. Syntax File CSS pada desain web diatas :
*{
margin:0;padding:0;
}
body{
background-color: #fff;
font-family:Arial, Helvetica, sans-serif;
color: #000;
}
nav{
margin:aoutp;
text-align:center;
width:100%;
}
nav ul ul{
display: none;
}
nav ul li:hover>ul{
display:block;
width:150px;
}
nav ul{
background: #53bd84;
padding:0 20px;
list-style: none;
position:relative;
display:inline-table;
width:100%;
}
nav ul:after{
content:"";
clear:both;
display:block;
}
nav ul li{
float:left;
}
nav ul li a{
display:block;
padding:25px;
color: #fff;
text-decoration: none;
}
nav ul ul{
background: #53bd84;
border-radius: 0px;
padding:0;
position:absolute;
top:100%;
}
nav ul ul li{
float:none;
border-top:1px solid #53bd84;
border-bottom: 1px solid #53bd84;
position:relative;
}
nav ul ul li a{
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover{
background-color: #666;
}
nav ul ul ul{
position:absolute;
left:100%;
top:0;
}
|
Langganan:
Postingan (Atom)
Popular Posts
-
Cara Membuat Program JAVA Menampilkan Biodata Secara Langsug Tampil dan Input data di NetBean Latihan 1/Post Test Modul 1
-
Cara Membuat Program Menghitung Kecepatan Mesin Percetakan Kertas Muali dari Hari, Jam, Menit dan Detik JAVA NetBean
-
Cara Menginstal, Kelebihan dan Kekurangan NetBean
-
Cara Membuat Simulasi Penggunaan Cisco Packet Tacer dan Pembuatan Jaringan Antar 16 Line di Perkatoran Berikut Permaslahannya Modul 2
-
Cara Membuat VLAN TRUNKING pada Cisco Packet Tracker
-
Cara Membuat HTML Dasar Berikut Contoh
-
Cara Membuat INTERVAL ROUTING (Routing on Stick) Mengguakan Cisco Packet Tracer
-
Pengealan Jaringan Cisco Packet Tracer & Cara Testing Koneksi menggunakan Toll Ping Modul 2
-
Cara dan Fungsi Pengkabelan Jaringan Komputer Straight dan Cross Yang Baik dan Benar modul 1
-
Cara Membuat Program Penggajihan Dengan Ketentuan Gajih Pokok dan Masa Kerja Menggunakan Bahasa Pemrograman JAVA NetBean
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 Pemogram...
