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 Comments  

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 :
 

Juni 29, 2018 | | 0 Comments  

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>

<li><a href="Home.html">Home</a></li>

<li><a href="News.html">News</a></li>

<li><a href="Contact.html">Contacs</a></li>

<li><a href="About.html">About</a></li>

</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;
}

Juni 29, 2018 | | 0 Comments  

Langganan: Postingan (Atom)

Cari Blog Ini
Diberdayakan oleh Blogger.