UJIAN TENGAH SEMESTER PRAKTIKUM WEB

Senin, 21 Maret 2011

Pada uts ini saya membuat form registration dimana biasanya terdapat 3 file yaitu css, html dan javascript akan tetapi css dan html saya jadikan satu jadi hanya ada 2 file .html dan .js sbb :

File .html :

<!DOCTYPE html>
<html lang="en">
    <head>
       <title>Ujian Tengah Semester</title>
       <style type="text/css">

</style>
    <script language="JavaScript"type="text/javascript" src="uts.js"></script>
    </head>
   <body>
   <body background="gbr2.jpg">
   <div id="utama">

   <div id="header">
       <center>
       <h1><font color="white">REGISTRATION</h1></font>
       <hr>
   <div id="kiri">
       <img src= gbr1.png>
       <br>
       <font color="blue">
       <h3>Silahkan anda melakukan registration secepatnya karena masih gratis.
       <br>
       Terima Kasih</h3>
   </div>
             <div id="kanan">
            <form name="calc" action="#">
               <table>
                <tr><td><font color="white">First Name</font></td><td><input type="text" size="25" name="inputan1"></td></tr>
               <tr><td><font color="white">Last Name</font></td><td><input type="text" size="25" name="inputan2"></td></tr>
                <tr><td><font color="white">User Name</font></td><td><input type="text" size="25" name="inputan3"></td></tr>
                <tr><td><font color="white">Email</font></td><td><input type="email" size="25" name="inputan4"></td></tr>
                <tr><td><font color="white">Password</font></td><td><input type="password" size="25" name="inputan4"></td></tr>
                <tr><td><font color="white">Retype Password</font></td><td><input type="password" size="25" name="inputan5"></td></tr>
                <tr><td><font color="white">Saya Seorang</font></td><td>
               <select name="kelamin">
               <option value="wanita" selected>Wanita
               <option value="pria">Pria
               </select></td></tr>
               </table>
               <br>
               <input type="button" value="OK" onClick = "tampil(this.form)">
               <input type="button" name="batal" value="Reset" onclick="reset()">
            </form>
           </div>
           </div>
           </div>

           <div id="footer">
           <hr>
           <h3><center>copyright by septian</h3>
           </div>
          </body>
</html>

Untuk file .js :
function tampil(form){
        if (form.elements[0].value == "" || form.elements[1].value == "" || form.elements[2].value == "" || form.elements[3].value == "" ||form.elements[4].value == ""||form.elements[5].value == ""||form.elements[6].value == "" )
        {
        alert("Maaf data yang anda masukkan belum lengkap. Silahkan ulangi lagi");
        } else {
        alert("Selamat Anda Berhasil Mendaftar")
        alert("Nama Anda : " +form.elements[0].value +form.elements[1].value +" , Username Anda : " +form.elements[2].value +" dan Email anda : " +form.elements[3].value);
        }
        return(true);
        }

Penjelasan :
Pada file .html digunakan untuk mendesain layout dan isi dari html atau halaman web sendiri sedangkan pada file .js digunakan untuk menampilkan pesan dengan cara memanggil fungsi pada js dari html.

Printscreen :

Jika diisi :

Ketika di klik OK maka akan keluar pesan sbb :

Dan apabila , tidak di isi apa-apa maka akan keluar pesan sbb :

Tombol reset untuk membatalkan dan mengisi ulang serta mengosongkan form.

Senin, 07 Maret 2011

Kali ini saya akan membahas tugas praktikum saya tentang membuat form pemesanan berbasis javascript.
Dan kita menggunakan 2 file

Untuk file .html<!DOCTYPE html>
<html lang="en">

<head>
<title>Form Pemesanan</title>
<script language="JavaScript" type="text/javascript" src="tuprak.js"></script>
</head>

<body>
<center>
<h3>Form Pemesanan Berbasis JavaScript</h3>
<br>

<form name="form2" action="#">
   <table border="1px">
       <tr>
           <th>No</th>
           <th>Makanan/Minuman</th>
           <th>Harga</th>
           <th>Pesan</th>
       </tr>

       <tr>
           <td width="15">1</td>
           <td width="200">Bakso Istimewa</td>
           <td width="120">Rp. <input type="text" name="bakso" value="12000" size="6" disabled="true"/></td>
           <td width="110"><input type="text" name="B" size="14" value="0" onChange="hitungPesan()"/></td>
       </tr>

       <tr>
           <td>2</td>
           <td>Soto Spesial</td>
           <td>Rp. <input type="text" name="soto" value="10000" size="6" disabled="true"/></td>
           <td><input type="text" name="S" size="14" value="0" onChange="hitungPesan()"/></td>
       </tr>

       <tr>
           <td>3</td>
           <td>Mie Ayam Super</td>
           <td>Rp. <input type="text" name="mie" value="15000" size="6" disabled="true"/></td>
           <td><input type="text" name="M" size="14" value="0" onChange="hitungPesan()"/></td>
       </tr>

       <tr>
           <td>4</td>
           <td>Es Degan</td>
           <td>Rp. <input type="text" name="degan" value="5000" size="6" disabled="true"/></td>
           <td><input type="text" name="ED" size="14" value="0" onChange="hitungPesan()"/></td>
       </tr>

       <tr>
           <td>5</td>
           <td>Es Campur</td>
           <td>Rp. <input type="text" name="campur" value="7000" size="6" disabled="true"/></td>
           <td><input type="text" name="EC" size="14" value="0" onChange="hitungPesan()"/></td>
       </tr>

       <tr>
           <td colspan="3" align="right">Jumlah Total</td>
           <td>Rp.<input type="text" name="Total" size="10" disabled="true" /></td>
       </tr>

       <tr>
           <td colspan="3" align="right">Diskon</td>
           <td>Rp.<input type="text" name="Diskon" size="10" disabled="true" /></td>
       </tr>

       <tr>
           <td colspan="3" align="right">Jumlah Dibayar</td>
           <td>Rp.<input type="text" name="Bayar" disabled="true" size="10" align="right"/></td>
       </tr>

       </table><br/>

<input type="button" value="Batal" onClick="btl()" />
</form>

<h3>design by septian</h3>
</body>
</html>

Untuk file .js
function hitungPesan(){

var nota = document.form2;
var hargaBakso = 12000 * eval(nota.B.value);
var hargaSoto = 10000 * eval(nota.S.value);
var hargaMie = 15000 * eval(nota.M.value);
var hargaDegan = 5000 * eval(nota.ED.value);
var hargaCampur = 7000 * eval(nota.EC.value);
var jumlahTotal = hargaBakso + hargaSoto + hargaMie + hargaDegan + hargaCampur;

if (jumlahTotal > 50000){
    nota.Total.value = jumlahTotal;
    nota.Diskon.value = 10000;
    nota.Bayar.value = jumlahTotal - eval(nota.Diskon.value);
    }
else {
    nota.Total.value = jumlahTotal;
    nota.Diskon.value = 0;
    nota.Bayar.value = jumlahTotal;
}

function btl(){
document.form2.reset();
}
}

Untuk printscreen :

TUGAS PRAKTIKUM MODUL 4

Senin, 28 Februari 2011

Tugas Praktikum ini pada dasarnya sama dengan studi kasus yang sebelumnya saya jelaskan tadi, dan saya menggunakan file css yang ada pada studi kasus modul 4 hanya saja saya menambahkan beberapa bagian untuk lebih melengkapi. Langsung saja anda bisa lihat pada scriptnya :
File .CSS :

body{
margin:10px auto;
width:750px;
}

header,nav,section,article,aside,footer,photo,logo,site-title{
display:block;
/*border:1px solid blue;*/
}

header{
height:80px;
border:5px solid black;
background-image:url(images/soccer_13.jpg);
}

#logo {
float:left;
margin:10px 10px 10px 50px;
height:30px;
}

#site-title h2{
float:left;
padding:0px 10px;
height:30px;
margin:20px 0px;
font:2.1em/100% 'ravie';
font-weight: bold;
}

nav{
height:50px;
border:2px solid black;
padding:10px;
background-image:url(images/soccer_13.jpg);
}

ul{
margin:0;
padding:0;
list-style:none;
}

ul li{
position: relative;
float:left;
width:100px;
}

li ul{
position:absolute;
top:25px;
display:none;
}

ul li{
display:block;
line-height:20px;
text-align:center;
padding:7px;
background: red;
margin:0 2px;
border:1px solid blue;
}

ul li a:haver{background: grey;}
li:hover ul, li.over ul{display:block;}

section{
padding:20px;
height:410px;
border:2px solid black;
background-image:url(images/soccer_13.jpg);
}

article{
float:left;
width:70%;
height:100%;
border:2px solid black;
background-color:white;
}

aside{
float:right;
width:27a%;
height:100%;
border:2px solid black;
}

footer{
clear:both;
height:40px;
border:2px solid black;
background-image:url(images/soccer_13.jpg);
}

FILE .HTML :

<!DOCTYPE HTML>

<head>

<title>Desain Layout Sederhana HTML5</title>

</head>

</div>

<h2>TEKNIK ELEKTRO</h2>

</div>

</header>

<nav>

<li><a href="#">PROFIL</a></li>

<li><a href="#">GALERY</a>

<ul>

<li><a href="#">PHOTOS</a></li>

<li><a href="#">VIDEOS</a></li>

</ul>

</li>

<li><a href="#">DOWNLOAD</a>

<ul>

<li><a href="#">TUTORIAL</a></li>

<li><a href="#">APLIKASI</a></li>

</ul>

</li>

</ul>

<button>Search</button><input type="text" size="10">

</div>

</nav>

<h4 align="center">PROGRAM STUDI S1 PENDIDIKAN TEKNIK INFORMATIKA</h4>

VISI :

<p>

Mewujudkan Prodi S1 Pendidikan Teknik Informatika sebagai prodi yang unggu dan menajdi rujukan nasional dalam pengembangan bidang pendidikan dan sains khususnya dalam bidang pendidikan teknik informatika yang relevan dengan kebutuhan pembangunan, masyarakat dan kemanusiaan.

</br></br>

MISI :

</br>

1. Menyelenggarakan pendidikan tinggi untuk menghasilkan lulusan yang unggul dan berdaya saing tinggi dalam bidang pendidikan teknik informatika.

</br>

2. Menyelenggarakan penelitian dan pengembangan ilmu untuk menghasilkan karya akademik yang unggul dan berdaya saing tinggi dalam bidang pendidikan,sains, dan teknologi khususnya bidang pendidikan teknik informatika.

</br>

3. Membangun masyarakat melalui penerapan iptek dalam bidang teknik informatika bagi kesejahteraan kualitas dan kinerja prodi.

</p>

</br>

</article>

<aside>

Email Anda <input type="text" size="10">

Password <input type="password" size="10">

<button>Login</button>

</br>

<h3>Events</h3>

<a href="#">1. Lomba Web Design</a></br>

<a href="#">2. Electrical Engineering Department Contest</a></br>

<a href="#">3. Diesnatalies Fakultas Teknik</a></br>

<a href="#">4. Kunjungan Industri Mahasiswa Angkatan 2009</a></br>

</aside>

</section>

</br>

</footer>

</body>

</html>

Untuk Hasilnya sbb :

STUDI KASUS MODUL4

Studi Kasus modul 4 menggunakan html5 dimana kita menggunakan elemen-lemen seperti header, nav, section, aside dan footer sehingga elemen-lemen baru tersebut dapat lebih mudah dan praktis dalam penyusunan style jadi kita tidak perlu lagi mendefinisikan elemen division lagi..

Pada studi kasus modul4 ini terdapat 2 file yaitu file.css dan file.html, untuk syntax lebih lengkapnya sbb :
FILE .CSS

body{
margin:10px auto;
width:750px;
}

header,nav,section,article,aside,footer{
display:block;
/*border:1px solid blue;*/
}

header{
height:80px;
border:1px solid green
}

nav{
height:50px;
border:1px solid blue;
padding:10px;
}

ul{
margin:0;
padding:0;
list-style:none;
}

ul li{
position: relative;
float:left;
width:100px;
}

li ul{
position:absolute;
top:25px;
display:none;
}

ul li{
display:block;
line-height:20px;
text-align:center;
padding:7px;
background: red;
margin:0 2px;
border:1px solid blue;
}

ul li a:haver{background: grey;}
li:hover ul, li.over ul{display:block;}

section{
padding:20px;
height:400px;
border:1px solid red;
}

article{
float:left;
width:70%;
height:100%;
border:2px dashed red;
}

aside{
float:right;
width:25%;
height:100%;
border:2px dashed black;
}

footer{
clear:both;
height:20px;
border:1px solid green;
}

FILE .HTML

<!DOCTYPE HTML>

<head>

<title>Desain Layout Sederhana HTML5</title>

</head>

<body>

header

</header>

<nav>

<li><a href="#">PROFIL</a></li>

<li><a href="#">GALERY</a>

<ul>

<li><a href="#">PHOTOS</a></li>

<li><a href="#">VIDEOS</a></li>

</ul>

</li>

<li><a href="#">DOWNLOAD</a>

<ul>

<li><a href="#">TUTORIAL</a></li>

<li><a href="#">APLIKASI</a></li>

</ul>

</li>

</ul>

</nav>

article

</article>

<aside>

Email Anda <input type="text" size="10">

Password <input type="password" size="10">

<button>Login</button>

<button>Search</button>

</aside>

section

</section>

footer

</footer>

</body>

</html>

UNTUK HASILNYA SBB :

TUGAS PRAKTIKUM MODUL 3

Senin, 14 Februari 2011

Buat Tampilan Face-mu

Untuk Script :
<!DOCTYPE html>
<html lang="en">

<head>
<title>Demo face-mu</title>

<link rel="shortcut icon" href="icon.png">

<style type="text/css">

</style>
</head>

<body background="bg.jpg">
<div id="utama">
<div id="header">
<div id="logo">
<img src="face-mu.jpg">
</div>

<form>
<div class="box2">
<br><input type="button" value="masuk">
<br>
</div>
<div class="box1">
Password <br><input type="password" size="25">
<br>Lupa kata sandi anda?
</div>
<div class="box1">
Email <br><input type="text" size="25">
<br><input type="checkbox">Biarkan saya tetap masuk
</div>
</div>
</form>
<div id="tengah">
<div id="kiri">
<div id="subkiri">
<font size="5">Face-mu membantu Anda terhubung dan berbagi dengan orang-orang dalam kehidupan Anda di Indonesia
</div>
</div>
<div id="kanan">
<h2>Mendaftar</h2>
Gratis, sampai kapanpun
<hr/>

<form>
<table>
<tr><td>Nama Depan</td><td><input type="text" size="35"></td></tr>
<tr><td>Nama Belakang</td><td><input type="text" size="35"></td></tr>
<tr><td>Email Anda</td><td><input type="text" size="35"></td></tr>
<tr><td>Masukkan Ulang Email</td><td><input type="text" size="35"></td></tr>
<tr><td>Kata Sandi Baru</td><td><input type="text" size="35"></td></tr>
<tr><td>Saya Seorang</td><td>
<select name="kelamin">
<option value="wanita" selected>Wanita
<option value="pria">Pria
</select></td></tr>
</table>
</form>
<br><input type="button" value="DAFTAR">
</div>
</div>
<div id="footer">
<h4 align="right"><b>Face-mu © 2011 by Septian</b></h4>
</div>
</div>
</body>
</html>

Untuk Hasil webnya sbb :

Studi Kasus Modul3

STUDI KASUS MODUL 3 adalah membuat border berikut untuk source codenya / scriptnya :
(ket : dalam printscreen)

lanjutannya :

UNTUK HASILNYA seperti di bawah ini :

STUDI KASUS WEB MODUL2

Senin, 07 Februari 2011

Sebelumnya saya mohon maaf karena script dari studi kasus modul 2 ini tidak bisa d upload secara langsung karena ada syntax htmlnya dan jika di printcreen scriptnya terlalu panjang, jadi saya cuma menupload script utamanya saja sedangkan linknya mohon maaf saya tidak bisa mengupload :

Tapi untuk script utamanya :

Untuk hasil tampilan webnya sbb :

Apabila ada yang bisa membantu saya mohon bantuannya bagaimana untuk mengentri text html agar tidak diterjemahkan langsung menjadi halaman web.
Terima Kasih dan mohon maaf.

tian_ez

UJIAN TENGAH SEMESTER PRAKTIKUM WEB

TUGAS PRAKTIKUM MODUL 4

STUDI KASUS MODUL4

TUGAS PRAKTIKUM MODUL 3

Studi Kasus Modul3

STUDI KASUS WEB MODUL2

Vinculos patrocinados

Archivo del blog

Etiquetas

About

Total Tayangan Halaman

Entri Populer

Follower

About Me