Selasa, 08 Maret 2011

DASAR-DASAR PHP

Fungsi Greeting yang Menerima Argumen Integer Jam


Source Kodenya:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Fungsi Greeting</title>
</head>
<body background = "2.jpg">

<center>

<h1>
<?php
function greeting()
{
$date = date ("G : i A");
if ($date>=0 and $date<10) {
echo "Selamat Pagi";
}
else if ($date>=10 and $date<15) {
echo "Selamat Siang";
}
 else if ($date>=15 and $date<19) {
echo "Selamat Sore";
}
else if ($date>=19 and $date<00) {
echo "Selamat Malam";
}
else echo "Waktu salah)";
}
?>
<?php greeting(); ?><br>

</h1>
<h2><font color = "Green"> SELAMAT DATANG DI SITUS PENDTIUM </font></h2>

<h3><font color = "Green"> JURUSAN TEKNIK ELEKTRO </font></h3>

<h4><font color = "Red"> Sekarang adalah

<?php

//Array Hari
$array_hari = array(1=>"Senin","Selasa","Rabu","Kamis","Jumat", "Sabtu","Minggu");
$hari = $array_hari[date("N")];
//Format Tanggal
$tanggal = date ("j");
//Array Bulan
$array_bulan = array(1=>"Januari","Februari","Maret", "April", "Mei", "Juni","Juli","Agustus","September","Oktober", "November","Desember");
$bulan = $array_bulan[date("n")];
//Format Tahun
$tahun = date("Y");
//Menampilkan hari dan tanggal
echo "hari $hari, tanggal $tanggal $bulan $tahun";
?>
<br>

Waktu menunjukkan pukul:
<?php
//penulisan waktu
$date = date ("G : i A");
echo "$date WIB";
?>

</font>
</h4>
</body>

</html>


Hasilnya:




Men-generate Sel Tabel Secara Fleksibel


Sebelumnya kita menuliskan source kode dengan nama tugas2.php
Source Kodenya:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Generate Tabel</title>
</head>
<body background = "bg.jpg">
<div align="center">
<?php
$rows = 1;
$columns = 1;
$cells = 1;
?>

<?php $rows = (int) $_POST["JumlahRow"]; ?>
<?php $columns = (int) $_POST["JumlahColum"]; ?>
<?php $cells = (int) $_POST["JumlahCell"]; ?>

<strong>Anda Memilih</strong> <?php echo $rows; ?> <em>rows,</em><br />
<strong>Anda Memilih</strong> <?php echo $columns; ?> <em>columns,</em><br />
<strong>Anda Anda Membutuhkan</strong> <?php echo $cells; ?> <em>cells,</em><br />
<br />
<br />
<?php
$width = $columns * 75;
echo "<table width=".$width." border=1>";
$rw = 0;
$cel = 1;
while ($rw < $rows && $cel <= $cells)
{
echo "<tr>";
$cl = 0;
while ($cl < $columns)
{
if ($cel <= $cells)
{
echo "<td><div align=center>".$cel."</div></td>";
$cel++;
}
$cl++;
}
echo "</tr>";
$rw++;
}
echo "</table>";
?>
</div>
</body>
</html>



Selanjutnya kita menuliskan source kode yang kedua
Source Kodenya:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Generate Table</title>
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
width:178px;
height:24px;
z-index:1;
left: 284px;
top: 189px;
}
.style1 {
color: red;
font-weight: bold;
}
-->
</style>
</head>
<body>
<form method="post" action="tugas2.php">
<h3 align="center" class="style1"><font color = "green" size = "14">Generate Table</font></h3>
<div align="center">
<table width="327" border="1" bgcolor = "orange">
<tr>
<td width="121" style="text-align:center"><font color = "red">Baris</font></td>
<td width="196"><strong>= </strong>
<input name="JumlahRow" type="text" id="JumlahRow" onKeyUp="getmax();" onfocus="this.select();"></td>
</tr>
<tr>
<td style="text-align:center"><label><font color = "red">Kolom</font></label></td>
<td><strong>= </strong>
<input name="JumlahColum" type="text" id="JumlahColum" onKeyUp="getmax();" onfocus="this.select();"></td>
</tr>
<tr>
<td style="text-align:center"><font color = "red">Cell Total</font></td>
<td><strong>= </strong>
<input name="JumlahCell" type="text" id="JumlahCell" onKeyUp="getmax();" onFocus="this.select();"></td>
</tr>
<tr>
<td style="text-align:center"><font color = "red">Cells Maksimum</font></td>
<td><strong>= </strong>
<input name="maxcells" type="text" id="maxcells" disabled="disabled" style="text-align:center"></td>
</tr>
</table>
</div>
<div id="apDiv1">
<br/>
<br/>
<br/>
<input type="submit" name="Generate" value="Generate..!!">
<input type="reset" name="Reset" value="Reset..!!">
</div>
</form>
</body>
<script language="JavaScript" type="text/javascript">
<!--
function getmax() {
var R = parseInt(document.getElementById('JumlahRow').value);
var C = parseInt(document.getElementById('JumlahColum').value);
var X = parseInt(document.getElementById('JumlahCell').value);
var cellmax = document.getElementById('maxcells');
var total = 'N/A';
total = R * C;
cellmax.value = new String(total);
if (X > total)
{
alert('Cell Total Yang Anda Masukkan Terlalu Besar, Nilai Maksimum Cells = ' + total);
document.getElementById('CellsTotal').value = new String();
}
}
//-->
</script>
</html>



Hasilnya:











Selasa, 01 Maret 2011

DHTML dan JAVASCRIPT

Membuat Kalkulator Sederhana

Source Kodenya :
<html>

<title>KalkulatorKu</title>
<script language="JavaScript">
window.defaultStatus=

function tambah()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=a+b
form.hasil.value=c
}

function kurang()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=a-b
form.hasil.value=c
}

function kali()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=a*b
form.hasil.value=c
}

function bagi()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=a/b
form.hasil.value = c
}

function pangkat()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=Math.pow(a, b)
form.hasil.value = c
}

function RESET()
{
form.a.focus()
form.a.value=""
form.b.value=""
form.hasil.value=""

}

</SCRIPT>
<body onload=kosong()>
<RIGHT>
<hr width = "500" align="left"; />
<h1><strong><font color="Green"> <font size="5"> Kalkulator Sederhana Dengan Java Script</strong></font></h1>
<hr width = "500" align="left"; />

<FORM name="form">
<pre>
<font color="red">Input 1 : </font>
<br/>
<input type="text" name="a">
<br/>
<font color="red">Input 2 : </font>
<br/>
<input type="text" name="b">


</pre>

<input type="button" value=" + " onClick="tambah()">
<input type="button" value=" - " onClick="kurang()">
<input type="button" value=" x " onClick="kali()">
<input type="button" value=" / " onClick="bagi()">
<input type="button" value=" ^ " onClick="pangkat()"><br>

<br/>
<br/>
<font color="red">Hasil : </font>
<br/>
<input type "text" name="hasil" disabled="true">
<br/>
<br/>
<input type="button" value=" Bersihkan! " onClick="RESET()">
<br/>
<br/>
<hr width = "500" align="left"; />
<br/>
<br/>
<font color="grey">::Tampilan Kalkulator Sederhana Menggunakan Java Script:: </font>
</FORM>
</RIGHT>

</body>
</html>

Hasinya:







Membuat Form Pemesanan Makanan Berbasis JAVASCRIPT

Source Kodenya:
<em><!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en"lang="en">

<head>
<title>Form Pemesanan</title>

<script language="JavaScript" type="text/JavaScript">

<!--
function hitung() {
var myForm = document.form1;
var hargaBakso = parseInt(myForm.bakso.value) * parseInt(myForm.pesanbakso.value);
var hargaSoto = parseInt(myForm.soto.value) * parseInt(myForm.pesansoto.value);
var hargaMie = parseInt(myForm.mie.value) * parseInt(myForm.pesanmie.value);
var hargaDegan = parseInt(myForm.degan.value) * parseInt(myForm.pesandegan.value);
var hargaCampur = parseInt(myForm.campur.value) * parseInt(myForm.pesancampur.value);

var hargaTotal= hargaBakso + hargaSoto + hargaMie + hargaDegan + hargaCampur;

if(hargaTotal>50000)
{
myForm.total.value = hargaTotal;
myForm.diskon.value = 10000;
myForm.bayar.value = hargaTotal - parseInt(myForm.diskon.value);
}
else
{
myForm.total.value = hargaTotal;
myForm.diskon.value = 0;
myForm.bayar.value = hargaTotal;
}
}

function hapus(){
document.form1.reset();
}

//-->

</script>
</head>

<body background="bg.jpg">
<h2 align="center"><--Warung Sederhana--></h2>
<form name = "form1" action="#">
<table border="1" align="center">

<tr>
<td width="30" align="center" bgcolor="white">
<strong>No</strong>
</td>

<td width="150" align="center" bgcolor="white">
<strong>Makanan/Minuman</strong>
</td>

<td width="165" align="center" bgcolor="white">
<strong>Harga</strong>
</td>

<td width="150" align="center" bgcolor="white">
<strong>Pesan</strong>
</td>
</tr>

<tr>
<td align="center" bgcolor="white">1</td>
<td bgcolor="white">Bakso Istimewa</td>
<td bgcolor="white">@<input type="text" name="bakso" value="12000" disabled="true"/></td>
<td bgcolor="white"><input type="text" name="pesanbakso" value="0" onkeyup="hitung()" /></td>
</tr>

<tr>
<td align="center" bgcolor="white">2</td>
<td bgcolor="white">Soto Spesial</td>
<td bgcolor="white">@<input type="text" name="soto" value="10000" disabled="true"/></td>
<td bgcolor="white"><input type="text" name="pesansoto" value="0" onkeyup="hitung()"/></td>
</tr>

<tr>
<td align="center" bgcolor="white">3</td>
<td bgcolor="white">Mie Ayam Super</td>
<td bgcolor="white">@<input type="text" name="mie" value="15000" disabled="true"/></td>
<td bgcolor="white"><input type="text" name="pesanmie" value="0" onkeyup="hitung()"/></td>
</tr>

<tr>
<td align="center" bgcolor="white">4</td>
<td bgcolor="white">Es Degan</td>
<td bgcolor="white">@<input type="text" name="degan" value="5000" disabled="true"/></td>
<td bgcolor="white"><input type="text" name="pesandegan" value="0" onkeyup="hitung()"/></td>
</tr>

<tr>
<td align="center" bgcolor="white">5</td>
<td bgcolor="white">Es Campur</td>
<td bgcolor="white">@<input type="text" name="campur" value="7000" disabled="true"/></td>
<td bgcolor="white"><input type="text" name="pesancampur" value="0" onkeyup="hitung()"/></td>
</tr>

<tr>
<td colspan="3" align="right" bgcolor="white">Jumlah Total</td>
<td bgcolor="white"><input type="text" name="total" style="text-align:right" disabled="true"/></td>
</tr>

<tr>
<td colspan="3" align="right" bgcolor="white">Diskon</td>
<td bgcolor="white"><input type="text" name="diskon" style="text-align:right" disabled="true"/></td>
</tr>

<tr>
<td colspan="3" align="right" bgcolor="white">Jumlah Dibayar</td>
<td bgcolor="white"><input type="text" name="bayar" style="text-align:right" disabled="true"/></td>
</tr>

</table>
<br />

<input type="button" value="HAPUS" onclick="hapus()" style="position:absolute; width:75px; height:30px; margin-left: 410px; top: 340px;" />
<br/>
<br/>
<br/>
<img src = "stroberi.png" width = "200" height = "150" style="margin-left: 410px;" />

</form>
</body>
</html></em>

Hasilnya:

Selasa, 22 Februari 2011

Desain Web CSS

Membuat Layout Halaman Website Dengan Memanfaatkan Elemen pada HTML5

Membuat Halaman Web Yang Menarik
Source Kodenya:
Pertama kita membuat source kode dan kemudian simpan dengan nama tugas.css
body {
margin: 10px auto;
width: 750px;
}

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

nav{
float: top;
width: 750px;
height: 80;
display: block;
border: 1px solid blue;
}

article{
float: left;
margin-top: 20px;
margin-left: 20px;
width:500px;
height: 330px;
border: 1px dashed red;
}

section {
width: 500;
height: 370px;
display: block;
border: 1px solid red;
}

footer {
clear: both;
height: 20px;
display: block;
border: 1px solid blue;
}

aside{
float: right;
margin-top: 20px;
margin-right: 20px;
width: 180px;
height: 330px;
border: 1px dashed black;
}

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

Setelah kita membuat source kode dan menyimpannya dengan nama coba2.css, kemudian buat source kode dan simpan dengan nama tugas.html
<!DOCTYPE HTML>
<html lang en="en">

<head>
<title>Desain Layout Sederhana</title>
<link rel="stylesheet" href="tugas.css" type="text/css" />
</head>

<body>
<header>
Header
</header>

<nav>
nav
</nav>

<section>
<article>
article
</article>
<aside>
aside
</aside>
section
</section>

<footer>
footer
</footer>
</body>
</html>

Maka, akan diperoleh hasil sebagai berikut:





Membuat Halaman Web Yang Menarik
Source Kodenya:
Pertama kita membuat source kode dan kemudian simpan dengan nama coba2.css
body {
margin: 10px auto;
width: 750px;
}

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

nav{
background-color:aqua;
float: top;
width: 750px;
height: 45px;
display: block;
border: 1px solid blue;
}

home{
padding:2px;
background-color:blue;
position:absolute;
top:90px;
left:600px;
height:25px;
width:40px;}

news_media{
padding:2px;
background-color:blue;
position:absolute;
top:90px;
left:650px;
height:25px;
width:100px;
}

tutorials{
padding:2px;
background-color:blue;
position:absolute;
top:90px;
left:760px;
height:25px;
width:55px;
}

tips_tricks{
padding:2px;
background-color:blue;
position:absolute;
top:90px;
left:825px;
height:25px;
width:105px;}

download{
padding:2px;
background-color:blue;
position:absolute;
top:90px;
left:940px;
height:25px;
width:75px;}

article{
float: left;
margin-top: 20px;
margin-left: 20px;
width:280px;
height: 330px;
border: 1px solid black;
}

section {
background-color:grey;
width: 500;
height: 370px;
display: block;
border: 1px solid grey;
}

footer {
clear: both;
height: 20px;
display: block;
border: 1px solid blue;
}

aside{
background-color:white;
float: right;
margin-top: 20px;
margin-right: 20px;
width: 400px;
height: 330px;
border: 1px solid black;
}

aside2{
background-color:aqua;
float: right;
margin-top: 45px;
width: 400px;
height: 165px;
border: 1px solid black;
}

footer{
background-color:aqua;
padding:10px;
height:40px;
footer2{
position:absolute;
margin-left:500px;
width:300px;
height:20px;
}
}



Setelah kita membuat source kode dan menyimpannya dengan nama coba2.css, kemudian buat source kode dan simpan dengan nama coba2.html
<!DOCTYPE HTML>
<html lang en="en">

<head>
<title>Desain Layout Sederhana</title>
<link rel="stylesheet" href="coba2.css" type="text/css" />
</head>

<body>
<header>
<img src = "Capture2.jpg" width = "750" height = "80px">
</header>

<nav>
search : <input type="text" name="sch">
<home>
<font size="2" color="white"><b>Home</b></font>
</home>
<news_media>
<font size="2" color="white"><b>News &amp; Media</b></font>
</news_media>
<tutorials>
<font size="2" color="white"><b>Tutorials</b></font>
</tutorials>
<tips_tricks>
<font size="2" color="white"><b>Tips &amp; Tricks</b></font>
</tips_tricks>
<download>
<font size="2" color="white"><b>Download</b></font>
</download>
</nav>

<section>
<article>
<img src = "Capture.jpg" width="280px" height="330px">
</article>
<aside>
<font color="black">
Nama saya Yunita Chandra Kartika. Orang biasanya memanggil saya tika atau yunita.
Alamat rumah saya ada di Desa Sumberbening RT 03 RW 01 Kec. Balerejo Kab. Madiun.
Namun sekarang saya tinggal di Malang tepatnnya di Jalan Terusan Ambarawa No 31.
Karena sekarang ini saya sedang kuliah di Universitas Negeri Malang.
<aside2>
<Font color = "blue" size = "5">Events : </b></font>
<br/>
<br/>
<a href="desain">Lomba Makan Krupuk</a>
<br/>
<a href="desain">Lomba Ngupil</a>
<br/>
<a href="desain">Wisuda PTI07</a>
<br/>
<a href="desain">Audisi Mahasiswa Abadi</a>
<br/>
</aside2>
</aside>
</section>

<footer>
<footer2>
<a href="desain">Home</a>&nbsp;|&nbsp;
  <a href="desain">News &amp; Media</a>&nbsp;|&nbsp;
  <a href="desain">Tutorials</a>&nbsp;|&nbsp;
  <a href="desain">Tips &amp; Tricks</a>&nbsp;|&nbsp;
  <a href="desain">Download</a>&nbsp;
  </footer2>
  <p align="right">
  yunitachandrakartika.blogspot.com
</footer>
</body>
</html>

Maka, akan diperoleh hasil sebagai berikut:



Selasa, 15 Februari 2011

Cascading Style Sheet

Membuat Kreasi-Kreasi Objek

Source Kodenya:
<!DOCTYPE html>
<html lang="en">

<head>
<title>DemoBorder</title>
<style type="text/css">
<!--
.box1 {
background-color:grey;
-moz-border-radius:200px;
-webkit-border-radius:200px;
border : 5px solid green;
padding: 10px;
width: 200px;
height:200px;
}

.teks1{
width : 100px;
height :75px;
border : 0px;
margin :15px auto;
}


.box2 {
-moz-border-radius-topleft:30px;
-moz-border-radius-bottomright:30px;
padding: 10px
width : 200px;
height : 100px;
border : 5px solid red;
margin-right: 900px;
}

.teks2{
width : 100px;
height :75px;
border : 0px;
margin :15px auto;
}

.box3 {
margin : 10px;
padding : 30 px;
width : 400px;
height : 100px;
border:1px solid red;
-moz-box-shadow:5px 5px 5px red;
box-shadow:5px 5px 5px red;
}

.teks3{
width : 100px;
height :75px;
border : 0px;
margin :15px auto;
}
-->
</style>
</head>

<body>

<div class ="box1">
<div class ="teks1"align="center">
Yang ini border lingkaran.Pendekatan yang digunakan masih sama lhow.Ayow kreasikan sendiri ya ??
</div>
</div>
<br/>

<div class="box2">
<div class ="teks2"align="center">
pusiiiingggg....
</div>
<br/>

<div class="box3">
<div class ="teks3"align="center">
kalau yang ini semacam efek shadow.Keren kan ?
</div>
</body>
</html>

Hasilnya:



Membuat Desain Web Memanfaatkan CSS dan background
Source Kodenya:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>Desain Web Menggunakan CSS</title>
<body background="bg.jpg">
<style type="text/css">
</head>
<!--

#bagian1 {
margin: auto;
width: 1000px;
border: 1px solid blue;
background:blue;
}
#bagian2 {
float: left;
height: 100px;
width:700px;
border: 0;
background:blue;
}
#bagian3 {
height : 100px;
width: auto;
border: 1px solid blue;
background-image:url(bgheader.GIF);
}
#bagian4 {
height:0px;
width:100px px;
margin-top:15px;
margin-left:750px ;
border: 0;
}
#bagian5 {
height:0px;
width:100px 10px;
margin-top:0px;
margin-left:950px ;
}
#bagian6 {
height:450px;
width:1200px 10px;
margin-top:100px;
}
#bagian7{
float: left;
width: 550px;
height: 400px;
margin-LEFT:100px ;
margin-right:100px ;
}
#bagian8 {
float: left;
width: 400px;
height: 330px;
border: 0;
}
#bagian9 {

height: 70px;
border: 0;
}
#bagian10 {
float: left;
width: 200px;
height: 250px;
border: 0;
}
#bagian11 {
margin-left:200px ;
width: 310px;
height: 200px;
border: 0;
}
#bagian12 {
clear: both;
height: 50px;
background-color : blue;
border: 1px solid blue;
}
-->
</style>

<body>
<div id="bagian1">
<div id = "bagian3">
<div id = "bagian2"><img src = "facemu.png" width="120" height="40">
</div>
<div id= "bagian4">
<form name= "login" method="post" action="">

<label><font face = "verdana" size = "4" color ="white">email</label></font><br>
<input type="text" name="email"><br>
<input type="checkbox" name="email"><font face = "verdana" size = "2" color ="black">keep me logged in </input>
</form>
</div>

<div id = "bagian5" >
<label><font face = "verdana" size = "4" color ="white">Password</label></font><br>
<input type="text" name="email">
<input type="button" value="login" ><br>
<a href = "facebook.com"><font face = "verdana" size = "2" color ="black"> Forgot your password ? </a></font>
</div>

<div id="bagian6">
<div id="bagian7"><img src = "Capture.jpg" width="500" height="350">
</div>

<div id="bagian8">
<div id="bagian9">
<font face = "verdana" size = "5" color ="blue">Sign Up<br>
<font face = "verdana" size = "4" color ="blue">It's free and always will be <br>
<hr>
</div>

<div id="bagian10">
<font face = "times new roman" size = "4" color ="blue">
<br>First Name <br><br>
Last Name<br><br>
Your Email<br><br>
Re-Enter Email<br><br>
New Password<br><br>
</font>
</div>
<div id="bagian11">
<br><input type="text" name="email"><br><br>
<input type="text" name="email"><br><br>
<input type="text" name="email"><br><br>
<input type="text" name="email"><br><br>
<input type="text" name="email"><br><br>
</div><br><br><font face = "times new roman" size = "2" color ="blue">Mengapa saya perlu mengisinya ?</font><br><br>
<input type="button" value="Mendaftar" align="right">
</div>
</div>
<div id="bagian12">
<font face = "times new roman" size = "5" color ="white">
yunitachandrakartika.blogspot.com</font>
</div>
</div>
</body>
</html>

Hasilnya:

Minggu, 06 Februari 2011

Manfaat Elemen Tabel dalam Web

Membuat Desain Frame
Dalam membuat desain frame kali ini mula-mula kita membuat desain frame yang pertama. Source kode desain frame yang pertama adalah:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">

<head>
<title> Demo Frame </title>
</head>

<frameset cols = "20%,*,20%">
<frame src ="link1.html" />
<frame src ="internallink.html" />
<frame src ="link1.html" />

<noframes>
</noframes>

</frameset>
</html>

Simpan desain frame yang pertama dengan nama studi kasus1.html.
Setelah kita membuat desain frame yang pertama tadi kemudian kita membuat desain frame yang kedua. Desain frame yang pertama ini akan kita gunakan untuk membuat desain frame yang kedua. Source kode desain frame yang kedua adalah:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">

<head>
<title> Demo Frame </title>
</head>

<frameset rows = "20%,*,20%">
<frame src="link2.html" />
<frame src="studikasus1.html" />
<frame src="link2.html" />

<noframes>
</noframes>

</frameset>
</html>

Maka dapat kita peroleh hasil sebagai berikut:




Grafik Batang Statis dengan Memanfaatkan Elemen Tabel

Source Kodenya:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en"lang="en">

<head>
<title>Grafik Batang Statis dengan Memanfaatkan Elemen Tabel</title>
</head>

<body background="melodi.jpg">

<h2>Grafik Pendapatan Perusahaan</h2>

<hr align="left" width="700"></hr>

<table width="700" border="0">
<tr>
<td width="350"><strong>Perusahaan</strong></td>
<td width="350"><strong>Pendapatan</strong></td>
</tr>
</table>

<hr align="left" width="700"/>
<table width="700" border="0">

<tr>
<td width="175">Angin Reboot Ltd</td>
<td width="175" colspan=3></td>
<td width="175" colspan=2 bgcolor="green"></td>
<td width="175">+150%</td>
</tr>

<tr>
<td width="175">Command Prompt, Inc</td>
<td width="175" colspan=3></td>
<td width="75" bgcolor="green"></td>
<td width="100">+55%</td>
<td width="175"></td>
</tr>


<tr>
<td width="175">Hibernate Ltd</td>
<td width="75"></td>
<td width="50" align="right">-23%</td>
<td width="50" bgcolor="yellow"></td>
<td width="350" colspan=3></td>
</tr>


<tr>
<td width="175">Shutdown Ltd</td>
<td width="75" align="right">-75%</td>
<td width="100" colspan=2 bgcolor="red"></td>
<td width="350" colspan=3></td>
</tr>
</table>

<hr align="left" width="700"/>


</body>
</html>

Hasilnya:


Desain Tabel Perbandingan dengan Memanfaatkan Fitur Pengelompokkan

Source Kodenya:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en"lang="en">

<head>
<title>Tabel Perbandingan Item</title>
</head>

<body background="2.jpg">

<table width="700" border="0" align="left">

<tr>
<td width="375" colspan=8 align="center">PERBANDINGAN FITUR</td>
</tr>

<tr>
<td colspan="8" style="border-bottom:#000000 solid thin;"></td>
</tr>

<tr>
<td width="25" align="center"><strong>No</strong></td>
<td width="1" rowspan="10" style="border-left:#000000 solid thin;"></td>
<td width="150" align="center"><strong>Fitur</strong></td>
<td width="1" rowspan="10" style="border-left:#000000 solid thin;"></td>
<td width="75" align="center"><strong>Enterprise</strong></td>
<td width="1" rowspan="10" style="border-left:#000000 solid thin;"></td>
<td width="25" align="center"><strong>Pro</strong></td>
<td width="50" align="center"><strong>Free</strong></td>
</tr>

<tr>
<td colspan="8" style="border-top:#000000 solid thin;"></td>
</tr>

<tr>
<td width="25" align="center">1</td>
<td width="150">Garansi seumur hidup</td>
<td width="75" align="center">X</td>
<td width="25" align="center">-</td>
<td width="50" align="center">-</td>
</tr>

<tr>
<td width="25" align="center">2</td>
<td width="150">Multiuser</td>
<td width="75" align="center">X</td>
<td width="25" align="center">-</td>
<td width="50" align="center">-</td>
</tr>

<tr>
<td width="25" align="center">3</td>
<td width="150">Update otomatis</td>
<td width="75" align="center">X</td>
<td width="25" align="center">X</td>
<td width="50" align="center">-</td>
</tr>

<tr>
<td width="25" align="center">4</td>
<td width="150">Cetak laporan</td>
<td width="75" align="center">X</td>
<td width="25" align="center">X</td>
<td width="50" align="center">-</td>
</tr>

<tr>
<td width="25" align="center">5</td>
<td width="150">Notifikasi error</td>
<td width="75" align="center">X</td>
<td width="25" align="center">X</td>
<td width="50" align="center">X</td>
</tr>

<tr>
<td colspan="8" style="border-top:#000000 solid thin;"></td>
</tr>

<tr>
<td width="25" align="center">6</td>
<td width="150">Ubah tema</td>
<td width="75" align="center">X</td>
<td width="25" align="center">X</td>
<td width="50" align="center">X</td>
</tr>

<tr>
<td width="25" align="center">7</td>
<td width="150">Try icon</td>
<td width="75" align="center">X</td>
<td width="25" align="center">X</td>
<td width="50" align="center">X</td>
</tr>

<tr>
<td colspan="8" style="border-top:#000000 solid thin;"></td>
</tr>

</table>

</body>
</html>

Hasilnya:

Minggu, 12 September 2010

ISTILAH-ISTILAH TEKNOLOGI INFORMASI (“K”)


 Kaleida
Joint venture antara Apple dan IBM yang membangun software ScriptX multimedia

Kerberos
Sistem keamanan berbasis enkripsi buatan MIT untuk menghalangi penyelewengan dalam pengawasan password dan login. Sistem ini menyediakan layanan untuk menentukan client yang diperbolehkan mengakses server tertentu, serta layanan pembuktian keaslian antara password dan login milik client dan server.

Kbit/s (Kilobits per Second)
Ukuran untuk transfer data atau kecepatan modem. Kebanyakan modem komputer men-download informasi pada kecepatan 56 Kbit/s. Digunakan untuk mengekspresikan kecepatan transfer data di dalam jaringan. Satu kilobit sama dengan 1000 bit.

KBps
Kilobytes per second.

KHz
Satuan unit frekuensi yang sama dengan 1000 siklus per detik.

Konektor Floopy dan IDE
Konektor ini menghubungkan motherboard dengan piranti simpan permanen seperti floopy disk atau harddisk. Konektor IDE dalam sebuah motherboard biasanya terdiri dari dua, satu adalah primary IDE dan yang lain adalah secondary IDE. Konektor primary IDE menghubungkan motherboard dengan primary master drive dan piranti secondary master. Sementara konektor secondary IDE biasanya disambungkan piranti-piranti untuk akses slave seperti CDROM dan harddisk slave.

Konektor Power
Pin yang menyambungkan motherboard dengan power supply di casing sebuah komputer. Pada motherboard tipe AT, casing yang dibutuhkan adalah tipe AT juga. Konektor power tipe AT terdiri dari dua bagian, dimana dua kabel dari power supply akan menancap. Pada tipe ATX, kabel power supply menyatu dalam satu header yang utuh sehingga tinggal menancapkannya di motherboard. Kabel ini terdiri dari dua kolom sesuai dengan pin di motherboard yang terdiri atas dua larik pin juga. Ada beberapa motherboard yang menyediakan dua tipe konektor power, AT dan ATX. Kebanyakan motherboard terbaru sudah bertipe ATX.

K12LTSP
adalah modifikasi dari distribusi standard Fedora Core Linux dengan menyertakan dan mengintegrasikan paket program dari proyek Linux Terminal Server Project (LTSP). Ia mudah diinstalasi dan dikonfigurasi sementara disebarluasken dengan lisensi bebas dibawah GNU General Public License. Ditargetkan dan cocok untuk komputerisasi sekolahan karena kebutuhan terminal yang banyak menjadi terjangkau berkat kemampuan memanfaatkan komputer usang tanpa harddisk sebagai kilen-klien. Nama K-12 merujuk kepada istilah sistem pendikan di Amerika mulai kindergarten sampai kelas 12 atau TK sampai dengan SMU.

KDEKDE (K Desktop Environment)
adalah free desktop environment and development platform dibangun menggunakan perkakas Qt dari perusahan Trolltech. Jalan hampir di semua sistem Unix dan Unix-like seperti Linux, BSD dan Solaris. Juga tersedia ports untuk Mac OS X menggunakan lapisan X11 layer dan Microsoft Windows menngunakan Cygwin.

KSpread
adalah aplikasi free spreadsheet yang merupakan bagian dari paket integrated office suite KOffice untuk desktop KDE. Diantara fitur KSpread termasuk multiple sheets per document, sejumlah kemampuan untuk formatting, mendukung lebih dari 100 fungsi built-in, templates, chart, spell-check, hyperlinks, dan penyortiran data.
Format native dari KSpread adalah XML, dikompres dengan ZIP. KSpread juga mampu mengimpor sejumlah format spreadsheet lainnya termasuk Microsoft Excel, Applix Spreadsheet, Quattro Pro, CSV dan Calc dari OpenOffice.org Calc.

Kartu Jaringan
Salah satu hardware yang berfungsi untuk menterjemahkan sinyal jaringan ke bentuk paket-paket data yang di mengerti computer.

Kick
 istilah khusus yang digunakan dalam ber-chatting yang dapat dilakukan oleh seorang admin untuk 'mengusir' atau 'menendang' seorang user program chat yang melakukan sesuatu tidak sesuai dengan etika dalam ber-chatting, atau melanggar nettiquette.

Kompresi
Suatu teknik pemampatan data sehingga diperoleh file dengan ukuran yang lebih kecil daripada ukuran aslinya. Kompresi bekerja dengan mencari pola-pola perulangan pada data dan menggantinya dengan sebuah penanda tertentu. Ada dua jenis metode kompresi, yaitu non-lossy dan lossy. Kompresi yang bersifat non-lossy tidak menghilangkan informasi-informasi dalam file asli sehingga cocok diterapkan untuk file dokumen. Sebaliknya, metode lossy menghilangkan informasi yang dianggap tidak signifikan. Biasanya teknik ini diterapkan pada file multimedia berukuran besar, misalnya pada format file JPEG (image), MPEG (video) dan MP3 (audio).

Keyboard
Peralatan masukan (input) komputer melalui kode/ tanda baca, huruf, angka, dan lain-lain yang ada pada papan keyboard.

Keep Lines Together
Suatu perintah dalam menu format paragraf yang berfungsi untuk menyimpan garis.

Keep With Next
Suatu perintah dalam menu format paragraf yang berfungsi untuk menyimpan halaman berikutnya.

Kabel Dua Kawat
Media transmisi yang paling hemat dan paling banyak digunakan. Kabel ini terdiri dari beberapa pasang kawat yang dibungkus dalam satu bundel dengan pelindung yang cukup kuat. Kabel dua kawat ini dibagi mennjadi dua, yaitu STP (Shielded Twisted Pair) dan UTP (Unshielded Twisted Pair).

Kabel Koaksial
Kabel yang terdiri atas dua buah konduktor yang terpisah oleh insulator. Konduktor pada bagian dalam berupa sebuah kabel tunggal, sedangkan konduktor pada bagian luar berupa serabut kabel. Kabel koaksial memiliki diameter 1-2.5 cm, dan memiliki jangkauan maksimum antara 185 m-500 m.

Kabel Serat Optik
Kabel yang berfungsi untuk mengirimkan pesan dengan cara menghantarkan data dalam gelombang cahaya. Serat optik ini memiliki inti yang terbuat dari serat kaca silikon murni.

Komputer
Alat bantu pemrosesan data secara elektronik dimana pemrosesan data dilakukan berdasarkan urutan instruksi atau program yang tersimpan dalam memori masing-masing komputer.

Komputer Analog
Komputer yang digunakan untuk data yang sifatnya berkesinambungan dan bukan data yan berbentuk angka melainkan yang berbentuk fisik. Misalnya untuk mengatur arus listrik, temperatur, kecepatan, tekanan, detak jantung, dan lain-lain.

Komputer Digital
Komputer yang digunakan untuk mengolah angka berupa huruf dan angka. Komputer imi biasanya untuk aplikasi bisnis dan aplikasi teknik.

Komputer Hybrid
Komputer ini merupakan kombinasi dari komputer analog dan komputer digital. Komputer ini hanya digunakan untuk aplikasi khusus.



Komponen Atomic
Salah satu komponen Swing yang berfungsi untuk menampilkan dan/ atau menerima data. Contoh komponen atomic adalah text field, button, dan label.

Komponen Array
Komponen Array adalah deretan variable yang bertipe sama dan dianggap sebagai satu kelompok.

Kode Status
Reason pertama kali yang muncul pada saat mengakses suatu web dan digunakan sebagai kode informasi status yang digunakan pada client.

Konkuren (concurency)
Aplikasi program web server menggunakan teknik pemrograman konkuren. Bahkan dikombinasikan dengan finite state machine dan non-blocking I/O, untuk melayani permintaan HTTP.

Konten Statik
Konten yang diambil secara langsung dari suatu file pada filesistem. Contoh dari konten statik antara lain :
- Hypertext Markup Language (HTML)
- Extensible Markup Language (XML)


REFERENSI
1.      indonesiaindonesia.com Copyright ©2000 - 2010, Jelsoft Enterprises Ltd.  SEO by vBSEO 3.5.1 PL1
2.      Mascipul[dot]Com Diposkan oleh mascipul on 1/20/2010  Label: Info Komputer, Tips Komputer