Halaman login merupakan bagian yang sangat penting dari sebuah web site dinamis dan menjadi bagian dari pemroses form (form prossesing) pada pemrograman PHP. Pemroses form itu sendiri adalah operasi mendasar pada aplikasi web. Dalam konteks pengembangan aplikasi web dinamis, langkah ini pasti akan dilakukan. Sebagai contoh, untuk menerima masukan dari user, tentu diperlukan sekali form isian dan cara pemrosesannya. Begitu pula halnya ketika administrator ingin masuk ke sistem, tentu memerlukan suatu antarmuka penghubung. Intinya, keberadaan form dan pemrosesannya mutlak diperlukan dalam membangun aplikasi web yang interaktif. Udah dulu y :)
Dalam Toturial kali kita akan membuat suatu form login dengan session yang sederhana sekali tanpa menggunakan database, yang terdiri dari 3 elemen saja yaitu : username, password dan tombol login seperti gambar disamping ini...
bikin file login.php
disini bentuk form dan validasi awal (field tidak boleh kosong, masukan id dan password harus huruf)menggunkan scripting javascript.
login.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="" />
<title>Login</title>
<style type="text/css">
<!--
table {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
input {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
height: 20px;
}
-->
</style>
</head>
<body>
<script language="JavaScript" type="text/javascript">
function setFocus() {
document.login.username.focus();
}
function getValue() {
var vText;
var vPwd;
vText = document.login.username.value;
vPwd = document.login.password.value;
if ((vText == "") || (vPwd == "")) {
alert("Warning !\nUsername dan Password tidak boleh kosong");
setFocus();
} else {
if ((!isNaN(vText)) || (!isNaN(vPwd))) {
alert("Warning !\nUsername dan Password tidak boleh angka");
setFocus();
}
}
}
</script>
<div align="center">
<form action="ceklogin.php" method="post" name="login">
<table width="286" border="0" cellpadding="0" cellspacing="0">
<tr bgcolor="#66FFFF">
<td height="9" colspan="2" align="center" valign="middle">
<br /><font color="#2A1F00"><h2>LOGIN DI SINI</h2></font></td>
</tr>
<tr>
<td width="106" height="27"> </td>
<td width="180"> </td>
</tr>
<tr>
<td height="18" align="right" valign="middle">Username : </td>
<td valign="middle">
<input name="username" type="text" id="username" size="20" /></td>
</tr>
<tr>
<td height="18" align="right" valign="middle">Password : </td>
<td valign="middle">
<input name="password" type="password" id="password" size="20" /></td>
</tr>
<tr>
<td height="19"> </td>
<td></td>
</tr>
<tr>
<td height="18" valign="top"> </td>
<td valign="middle">
<input name="login" type="submit" id="login" value=" Login " onclick="getValue()" /></td>
</tr>
<tr>
<td height="28"> </td>
<td></td>
</tr>
<tr bgcolor="#66FFFF">
<td height="18" colspan="2" valign="top"> </td>
</tr>
</table>
</form>
</div>
</body>
</html>
tampilan javascript :
selanjutnya....Buat file untuk nge cek login, nah disini kita tentukan username dan password untuk login pertama kita tentukan username dan password yang akan di masukkan sebagai login yang benar, Jadi saya mau membuat login dengan
username: rochmanovic
password: fatkhur
sedangkan untuk pengecekan login saya yaitu:
$acc_user = 'rochmanovic';
$acc_pas = 'fatkhur';
ceklogin.php
<?php
$acc_user = 'rochmanovic';
$acc_pas = 'fatkhur';
if (isset($_POST['login']))
{
$username = $_POST['username']; // diambil dari nama input di form login
$password = $_POST['password']; // diambil dari nama input di form login
if (($username==$acc_user) && ($password==$acc_pas))
{
session_start();
$_SESSION['user'] = $username;
echo 'Login berhasil, silahkan lanjutkan......'.
'<br/>'.
'<a href="index.script.php">Lanjutkan</a>'.
'<br/>';
} else {
echo 'Username dan password salah'.
'<br/>'.
'<a href="login.php">Coba lagi</a>'.
'<br/>';
}
}
?>
hasilnya :
Nah....yang terakhir Qt buat halaman index nya yang hanya bisa di akses jika sudah di accept session dengan nama $_SESSION['user']. Variabel ini digunakan untuk memeriksa apakah user tertentu sudah memasukkan username dan password ataukah tidak.
jika tidak maka akan di redirect ke halaman login.php
index.script.php
<?php
session_start();
if (isset($_SESSION['user'])) // karena nama session buat login kita buat namanya adalah 'user' maka if isset($_SESSION['user']) ===> varibel penentu
{
$user = $_SESSION['user'];
echo '<p align="center">'.
'<b>Tulisan ini nampak kalo udah login</b>'.
'<br/><br/>
<h3 id="Pemrosesan Form">Pemrosesan Form</h3>
<p>
Pemrosesan form (form processing) merupakan operasi mendasar pada
aplikasi web. Dalam konteks pengembangan aplikasi web dinamis, langkah
ini pasti akan dilakukan. Sebagai contoh, untuk menerima masukan dari user,
tentu diperlukan sekali form isian dan cara pemrosesannya. Begitu pula
halnya ketika administrator ingin masuk ke sistem, tentu memerlukan suatu
antarmuka penghubung. Intinya, keberadaan form dan pemrosesannya mutlak
diperlukan dalam membangun aplikasi web yang interaktif.<br/><br/>'.
'<a href="login.php">Logout</a>'.
'</p>';
echo $user;
} else {
header('location: login.php');
exit;
}
?>
Senin, 29 Maret 2010
Minggu, 14 Maret 2010
FUNGSI PASS BY VALUE DAN PASS BY REFERENCE
- Fungsi adalah subprogram/subrutin program yang terdiri dari sekumpulan
perintah yang akan melaksanakan suatu tugas tertentu
- Fungsi memungkinkan program menjadi lebih terstruktur dan juga memudahkan
pelacakan kesalahan.
- Menggunakan fungsi akan mempersingkat waktu pemrogram untuk menuliskan
sekumpulan perintah yang sama berkali-kali
sintaks:
function nama_fungsi($arg1, $arg2, .., arg_n)
{
blok pernyataan fungsi
}
Keterangan:
Nama_fungsi adalah nama yang akan digunakan untuk memanggil fungsi
$arg1, $arg2, …, $arg_n adalah argumen-argumen (parameter) yang akan disertakan
pada saat pemanggilan fungsi untuk diproses dalam fungsi.
Blok pernyataan fungsi adalah pernyataan-pernyataan yang terdapat dalam apitan tanda
({ }) dimana dikerjakan fungsi untuk tugas tertentu.
Pemanggilan fungsi tanpa parameter
contoh1.php
<?
$x=2+3;
$y=$x+5;
echo "$y<br>";
$x=2+3;
$y=$x+5;
echo "$y<br>";
$x=2+3;
$y=$x+5;
echo "$y<br>";
$x=2+3;
$y=$x+5;
echo "$y<br>";
?>
Jika kita perhatikan kode di atas, maka penjumlahan yang sama berulang-ulang dituliskan beberapa kali dan merupakan pemborosan. Dengan adanya fungsi maka program diatas bisa dibuatkan ke dalam fungsi dan bisa dipanggil beberapa kali.
1. Pass by Value
Argumen fungsi yang dilewatkan secara pass by value (default dalam php) berarti
membuat kopi dari argumen yang asli sehingga argumen asli tersebut tidak ikut berubah
dengan adanya proses pada fungsi terhadap argumen tersebut.
contoh2.php
<HTML>
<HEAD>
<TITLE>Fungsi dengan pass by value</TITLE>
</HEAD>
<BODY>
<?
function kuadrat($x)
{
$z=$x * $x;
return($z);
}
$a=5;
printf ("$a kuadrat = %.2f <BR> ",kuadrat($a));
$a=-2.5;
printf ("$a kuadrat = %.2f <BR> ",kuadrat($a));
?>
</BODY>
</HTML>
2. Pass by Reference
Argumen fungsi yang dilewatkan secara pass by reference berarti membawa argumen asli
ke dalam fungsi sehingga argumen asli tersebut akan ikut berubah dengan adanya proses
pada fungsi terhadap argumen tersebut.
Contoh: fungsi3.php
<HTML>
<HEAD>
<TITLE>Fungsi tambah string [Pass by reference]</TITLE>
</HEAD>
<BODY>
<?
function tambah_string(&$str)
{
$str=$str. ",Bandung";
return $str;
}
//Pemanggilan fungsi
$str="STTIS";
echo "\$str=$str<BR>";
echo tambah_string($str)."<BR>";
echo "\$str=$str<BR>";
?>
</BODY>
</HTML>
demikian artikel yang kami buat semoga bermanfaat bagi semua...
perintah yang akan melaksanakan suatu tugas tertentu
- Fungsi memungkinkan program menjadi lebih terstruktur dan juga memudahkan
pelacakan kesalahan.
- Menggunakan fungsi akan mempersingkat waktu pemrogram untuk menuliskan
sekumpulan perintah yang sama berkali-kali
sintaks:
function nama_fungsi($arg1, $arg2, .., arg_n)
{
blok pernyataan fungsi
}
Keterangan:
Nama_fungsi adalah nama yang akan digunakan untuk memanggil fungsi
$arg1, $arg2, …, $arg_n adalah argumen-argumen (parameter) yang akan disertakan
pada saat pemanggilan fungsi untuk diproses dalam fungsi.
Blok pernyataan fungsi adalah pernyataan-pernyataan yang terdapat dalam apitan tanda
({ }) dimana dikerjakan fungsi untuk tugas tertentu.
Pemanggilan fungsi tanpa parameter
contoh1.php
<?
$x=2+3;
$y=$x+5;
echo "$y<br>";
$x=2+3;
$y=$x+5;
echo "$y<br>";
$x=2+3;
$y=$x+5;
echo "$y<br>";
$x=2+3;
$y=$x+5;
echo "$y<br>";
?>
Jika kita perhatikan kode di atas, maka penjumlahan yang sama berulang-ulang dituliskan beberapa kali dan merupakan pemborosan. Dengan adanya fungsi maka program diatas bisa dibuatkan ke dalam fungsi dan bisa dipanggil beberapa kali.
1. Pass by Value
Argumen fungsi yang dilewatkan secara pass by value (default dalam php) berarti
membuat kopi dari argumen yang asli sehingga argumen asli tersebut tidak ikut berubah
dengan adanya proses pada fungsi terhadap argumen tersebut.
contoh2.php
<HTML>
<HEAD>
<TITLE>Fungsi dengan pass by value</TITLE>
</HEAD>
<BODY>
<?
function kuadrat($x)
{
$z=$x * $x;
return($z);
}
$a=5;
printf ("$a kuadrat = %.2f <BR> ",kuadrat($a));
$a=-2.5;
printf ("$a kuadrat = %.2f <BR> ",kuadrat($a));
?>
</BODY>
</HTML>
2. Pass by Reference
Argumen fungsi yang dilewatkan secara pass by reference berarti membawa argumen asli
ke dalam fungsi sehingga argumen asli tersebut akan ikut berubah dengan adanya proses
pada fungsi terhadap argumen tersebut.
Contoh: fungsi3.php
<HTML>
<HEAD>
<TITLE>Fungsi tambah string [Pass by reference]</TITLE>
</HEAD>
<BODY>
<?
function tambah_string(&$str)
{
$str=$str. ",Bandung";
return $str;
}
//Pemanggilan fungsi
$str="STTIS";
echo "\$str=$str<BR>";
echo tambah_string($str)."<BR>";
echo "\$str=$str<BR>";
?>
</BODY>
</HTML>
demikian artikel yang kami buat semoga bermanfaat bagi semua...
Minggu, 07 Maret 2010
Aplikasi Kalkulator dengan DHTML dan Javascript
Teman2 pasti udah tau cara penggunaan kalkulator, baik itu kalkulator bwt jualan sampek yg scientific (bwt para ilmuwan,hehehehe…), gambar di bawah merupakan aplikasi kalkultor dengan DHTML dan javascript.
pertanyaannya,, bagaimana sekarang membuat aplikasi kalkulator dengan memanfaatkan javascript biar tampilan lebih menarik seperti gambar dibawah????????
Tutorial kali ini masih menggunakan bahasa HTML (bahasa markup yang mengombinasikan teks dan informasi tambahan mengenai teks tersebut). Sebelum qt membuat programnya da baiknya klo mengerti sedikit pada itu javascript,,biar tambah pinter…!
DHTML dan JavaScript
Scripting merupakan jenis lain dari pemrograman, yang umumnya lebih mudah dipahami. Script dapat disisipkan ke dalam dokumen HTML dengan menggunakan tag script. Tidak seperti style sheet, script bisa terlihat di dalam head ataupun body
Elemen Dasar JavaScript
JavaScript terbentuk atas elemen-elemen fundamental. Di sini kita tidak akan mengulas elemen-elemen tersebut, melainkan langsung membahas beberapa komponen dasar yang kerap digunakan saat bekerja dengan JavaScript.
Kotak Dialog
JavaScript memungkinkan kita untuk menampilkan kotak dialog melalui fungsi alert(). Kotak dialog ini dapat dimanfaatkan untuk menyampaikan informasi atau konfirmasi.
Merujuk Elemen
Salah satu kemampuan utama JavaScript adalah mengontrol objek-objek di halaman web. Sehubungan dengan hal ini, pendekatan yang bisa digunakan untuk mengacu atau mengakses elemen-elemen objek yaitu;
Event
Setiap objek HTML mendefinisikan properti-properti, method-method, dan event-event. Salah satu event yang sangat populer dan frekuensi penggunaannya cukup tinggi adalah onclick. Event ini akan dipicu manakala objek—misalnya button atau teks—diklik.
Me-retrieve Nilai
Text Field
Elemen text field menyediakan properti value yang bisa digunakan untuk menetapkan atau mendapatkan nilai elemen.
Select (Combo Box)
Secara umum, properti value tersedia di semua elemen HTML. Dengan demikian, kita juga bisa memanfaatkannya untuk mendapatkan nilai select atau combo box.
Untuk operasi cepat—tanpa perlu klik button—pada select, kita bisa menambahkan event onchange.
Check Box
Khusus untuk pengambilan nilai check box, terlebih dahulu kita perlu mengidentifikasi item yang dipilih.
untuk lebih jelasnya,, kode program pembuatan kalkulator dengan javascript dapat dilihat dibawah ini..
<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>Kalkulator</title>
</head>
<body>
<script language="JavaScript">
var message="Klik kanan telah dinonaktifkan \n\n by administrator";
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}
function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}
document.oncontextmenu=new Function("alert(message);return false");
</script>
<h2 align="center">Aplikasi Kalkulator</h2>
<hr>
<center>
<form name="Calc">
<table border=4 bordercolorlight="#FF9900" bordercolordark="#FF6633">
<tr>
<td>
<div align="center"> <font size="+1">
<input type="text" name="Input" size="22">
</font></div>
</td>
</tr>
<tr>
<td height="111">
<div align="center">
<input type="button" name="satu" value=" 1 " onClick="Calc.Input.value += '1'">
<input type="button" name="dua" value=" 2 " onClick="Calc.Input.value += '2'">
<input type="button" name="tiga" value=" 3 " onClick="Calc.Input.value += '3'">
<input type="button" name="plus" value=" + " onClick="Calc.Input.value += ' + '">
<br>
<input type="button" name="empat" value=" 4 " onClick="Calc.Input.value += '4'">
<input type="button" name="lima" value=" 5 " onClick="Calc.Input.value += '5'">
<input type="button" name="enam" value=" 6 " onClick="Calc.Input.value += '6'">
<input type="button" name="minus" value=" - " onClick="Calc.Input.value += ' - '">
<br>
<input type="button" name="tujuh" value=" 7 " onClick="Calc.Input.value += '7'">
<input type="button" name="delapan" value=" 8 " onClick="Calc.Input.value += '8'">
<input type="button" name="sembilan" value=" 9 " onClick="Calc.Input.value += '9'">
<input type="button" name="kali" value=" x " onClick="Calc.Input.value += ' * '">
<br>
<input type="button" name="clear" value=" Clear " onClick="Calc.Input.value = ''">
<input type="button" name="nol" value=" 0 " onClick="Calc.Input.value += '0'">
<input type="button" name="bagi" value=" / " onClick="Calc.Input.value += ' / '">
</div>
</td>
</tr>
<tr>
<td>
<div align="center">
<input type="button" name="DoIt" value=" = " onClick="Calc.Input.value = eval(Calc.Input.value)">
</div>
</td>
</tr>
</table>
<p align="center"><font face="arial" size="-2">created by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://far7_qva@yahoo.com">far7_qva@yahoo.com</a></font></p>
<div align="right"><br>
</div>
<p> </p>
</form>
</center>
<p align="center">
</body>
</html>
dalam program kali ini penulis cuma mencoba memberikan contoh beberapa operasi aritmatika antara lain penjumlahan, pengurangan, perkalian dan pembagian.
Semoga bermanfaat bagi semua… (maklum klo disuruh bwt hardwarenya pasti kelabakan A.K.A gak iso,,hehehe…)
pertanyaannya,, bagaimana sekarang membuat aplikasi kalkulator dengan memanfaatkan javascript biar tampilan lebih menarik seperti gambar dibawah????????
Tutorial kali ini masih menggunakan bahasa HTML (bahasa markup yang mengombinasikan teks dan informasi tambahan mengenai teks tersebut). Sebelum qt membuat programnya da baiknya klo mengerti sedikit pada itu javascript,,biar tambah pinter…!
DHTML dan JavaScript
Scripting merupakan jenis lain dari pemrograman, yang umumnya lebih mudah dipahami. Script dapat disisipkan ke dalam dokumen HTML dengan menggunakan tag script. Tidak seperti style sheet, script bisa terlihat di dalam head ataupun body
Elemen Dasar JavaScript
JavaScript terbentuk atas elemen-elemen fundamental. Di sini kita tidak akan mengulas elemen-elemen tersebut, melainkan langsung membahas beberapa komponen dasar yang kerap digunakan saat bekerja dengan JavaScript.
Kotak Dialog
JavaScript memungkinkan kita untuk menampilkan kotak dialog melalui fungsi alert(). Kotak dialog ini dapat dimanfaatkan untuk menyampaikan informasi atau konfirmasi.
Merujuk Elemen
Salah satu kemampuan utama JavaScript adalah mengontrol objek-objek di halaman web. Sehubungan dengan hal ini, pendekatan yang bisa digunakan untuk mengacu atau mengakses elemen-elemen objek yaitu;
Event
Setiap objek HTML mendefinisikan properti-properti, method-method, dan event-event. Salah satu event yang sangat populer dan frekuensi penggunaannya cukup tinggi adalah onclick. Event ini akan dipicu manakala objek—misalnya button atau teks—diklik.
Me-retrieve Nilai
Text Field
Elemen text field menyediakan properti value yang bisa digunakan untuk menetapkan atau mendapatkan nilai elemen.
Select (Combo Box)
Secara umum, properti value tersedia di semua elemen HTML. Dengan demikian, kita juga bisa memanfaatkannya untuk mendapatkan nilai select atau combo box.
Untuk operasi cepat—tanpa perlu klik button—pada select, kita bisa menambahkan event onchange.
Check Box
Khusus untuk pengambilan nilai check box, terlebih dahulu kita perlu mengidentifikasi item yang dipilih.
untuk lebih jelasnya,, kode program pembuatan kalkulator dengan javascript dapat dilihat dibawah ini..
<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>Kalkulator</title>
</head>
<body>
<script language="JavaScript">
var message="Klik kanan telah dinonaktifkan \n\n by administrator";
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}
function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}
document.oncontextmenu=new Function("alert(message);return false");
</script>
<h2 align="center">Aplikasi Kalkulator</h2>
<hr>
<center>
<form name="Calc">
<table border=4 bordercolorlight="#FF9900" bordercolordark="#FF6633">
<tr>
<td>
<div align="center"> <font size="+1">
<input type="text" name="Input" size="22">
</font></div>
</td>
</tr>
<tr>
<td height="111">
<div align="center">
<input type="button" name="satu" value=" 1 " onClick="Calc.Input.value += '1'">
<input type="button" name="dua" value=" 2 " onClick="Calc.Input.value += '2'">
<input type="button" name="tiga" value=" 3 " onClick="Calc.Input.value += '3'">
<input type="button" name="plus" value=" + " onClick="Calc.Input.value += ' + '">
<br>
<input type="button" name="empat" value=" 4 " onClick="Calc.Input.value += '4'">
<input type="button" name="lima" value=" 5 " onClick="Calc.Input.value += '5'">
<input type="button" name="enam" value=" 6 " onClick="Calc.Input.value += '6'">
<input type="button" name="minus" value=" - " onClick="Calc.Input.value += ' - '">
<br>
<input type="button" name="tujuh" value=" 7 " onClick="Calc.Input.value += '7'">
<input type="button" name="delapan" value=" 8 " onClick="Calc.Input.value += '8'">
<input type="button" name="sembilan" value=" 9 " onClick="Calc.Input.value += '9'">
<input type="button" name="kali" value=" x " onClick="Calc.Input.value += ' * '">
<br>
<input type="button" name="clear" value=" Clear " onClick="Calc.Input.value = ''">
<input type="button" name="nol" value=" 0 " onClick="Calc.Input.value += '0'">
<input type="button" name="bagi" value=" / " onClick="Calc.Input.value += ' / '">
</div>
</td>
</tr>
<tr>
<td>
<div align="center">
<input type="button" name="DoIt" value=" = " onClick="Calc.Input.value = eval(Calc.Input.value)">
</div>
</td>
</tr>
</table>
<p align="center"><font face="arial" size="-2">created by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://far7_qva@yahoo.com">far7_qva@yahoo.com</a></font></p>
<div align="right"><br>
</div>
<p> </p>
</form>
</center>
<p align="center">
</body>
</html>
dalam program kali ini penulis cuma mencoba memberikan contoh beberapa operasi aritmatika antara lain penjumlahan, pengurangan, perkalian dan pembagian.
Semoga bermanfaat bagi semua… (maklum klo disuruh bwt hardwarenya pasti kelabakan A.K.A gak iso,,hehehe…)
Senin, 01 Maret 2010
Desain Layout dengan CSS 2
Na...Setelah desain layout 1 selesai, langkah selanjutnya bagaimana membuat tampilan seperti gambar diatas???????
membuat suatu desain layout dengan css yang lebih atraktif dibutuhkan Penambahan image dan background color pada masing-masing jenis css sangatlah dianjurkan sehingga membuat tampilan web Qt lebih menarik… seperti pada desain yang prtama,,desain layout2 masih memanfaatkan CSS untuk keperluan modifikasi tulisan dan gambar..
Dengan css, kita dapat mengatur style maupun perilaku dari suatu link. CSS juga memungkinkan halaman yang sama untuk ditampilkan dengan cara yang berbeda untuk metode presentasi yang berbeda, seperti melalui layar, cetak, suara (sewaktu dibacakan oleh browser basis-suara atau pembaca layar), dan juga alat pembaca braille. Halaman HTML atau XML yang sama juga dapat ditampilkan secara berbeda, baik dari segi gaya tampilan atau skema warna dengan menggunakan CSS.
weeeees...Tidak usah panjang lebar y..capek --!!l ;D
Langsung saja qt bwt style2.css (gak harus ini lo) berikut ini:
Mystyle2.css
#wrapper {
margin: auto;
width: 750px;
background-image:url(backgound3.jpg);
border: 1px;
}
#header {
height: 80px;
border: 1px;
background-repeat:no-repeat;
}
#logo {
float:left;
width: 78px;
height: 78px;
margin-top: 0px;
margin-left: 0px;
background: url(UM4.png) no-repeat;
border: 1px;
}
#Teknik {
float: left;
margin-right: 5px;
margin-top: 0px;
width: 300px;
height: 78px;
border: 1px;
}
#menu {
width: 250px;
padding: 0;
height: 77px;
float:right;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
margin-right: 2px;
text-transform: uppercase;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color:#FFFFFF;
}
#menu a:hover, #menu .current_page_item a {
color:#0000CC;
}
#menu a:hover {
text-decoration: underline;
}
#inner {
float: left;
margin: 5px 0px 0px 0px;
background-color:#999999;
border: 1px;
}
#sidebar {
float: left;
width: 180px;
height: 345px;
margin: 0px 0px 0px 0px;
background-color:#999999;
border: 1px;
}
h4{
margin: 0;
text-transform: uppercase;
letter-spacing: .15em;
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
color:#FFFFFF;
background: #183134 no-repeat left center;
}
#leftmenu ul {
width: 180px;
list-style-type:none;
padding:0; margin:0;
font-size:13px
}
#leftmenu a:link, #leftmenu a:visited, #leftmenu a:active {
padding-left: 15px;
text-decoration: none;
}
#leftmenu a {
padding: 5px 0px 5px 15px; display: block;
background:#000066 no-repeat left center;
margin: 0px 0px 1px; color: #ffffff;
}
#leftmenu a:hover {
background:#000066 no-repeat left center; color: #ffffff
}
#top{
float:left;
width:567px;
height:100px;
margin: 0px 0px 0px 0px;
background-image:url(top.jpg);
background-repeat:no-repeat;
border:1px solid green;
}
#content {
float: left;
width: 330px;
height: 230px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding: 10px 5px 5px 10px;
background-color:#FFFFFF;
border: 1px;
}
#right {
float:right;
width:200px;
height:150px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin: 5px 0px 5px 0px;
padding: 10px 5px 5px 15px;
background-color:#CCCCCC;
border:1px;
}
#search{
padding:30px 0 0 10px;
font:Arial, Helvetica, sans-serif;
font-size:14px;
color:#FFFFFF;
}
#footer {
clear: both;
height: 50px;
margin: 0px 0px 0px 0px;
background-image:url(backgound2.jpg);
font:Arial, Helvetica, sans-serif;
border: 1px;
}
Kemudian Buat desain layout seperti berikut:
Desain Layout2.Html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Desain Layout2</title>
<LINK REL="STYLESHEET" TYPE="text/css" HREF="mystyle2.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="menu">
<ul id="main">
<li><a href="index.html"> Home |</a></li>
<li><a href="#">Sitemap |</a></li>
<li><a href="#">RSS |</a></li>
<li><a href="contact.html">Contact |</a></li>
<li><a href="aboutus.html">About Us</a></li>
</ul>
<div id="search"><form name="form1" method="post" action="">
<label>Search
<input type="text" name="textfield">
</label>
</form>
</div>
</div>
<div id="logo">
</div>
<div id = "Teknik">
<h1 align="left">TEKNIK ELEKTRO</h1>
</div>
<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li>
<h4 align="center"><img src="Menu1.jpg"></h4>
</li>
<li><a href="Home.html">Home </a></li>
<li><a href="News & Media.html">News & Media</a></li>
<li><a href="Tutorials.html">Tutorials</a></li>
<li><a href="Tips & Triks.html">Tips & Triks</a></li>
<li><a href="Download.html">Download</a></li>
</ul>
</div>
</div>
<div id="top">
</div>
<div id="content"><marquee behavior="scroll">Welcome to " TEKNIK ELEKTRO"
</marquee>
<p> </p>
<b>HTML<br/></b>
<br/>
HTML (Hypertext Markup Language) merupakan sebuah bahasa markup,</br>
bukan bahasa pemrograman. Bahasa markup (Indonesia: markah) adalah</br>
bahasa yang mengombinasikan teks dan informasi tambahan mengenai teks</br>
tersebut. HTML merupakan dokumen standar yang digunakan untuk</br>
mendesain halaman web.
</div>
<div id="right">
<p>Events:</p>
<ul>
<li><a href="Panjat Tiang.html">Lomba Panjat Tiang Listrik</a></li>
<li><a href="Tarik Kabel.html">Lomba Tarik Kabel</a></li>
<li><a href="Nyetrum.html">Lomba Nyetrum</a></li>
<li><a href="Nyolder.html">Lomba Nyolder</a></li>
</ul>
</div>
</div>
<div id="footer">
<div align="center"><h2 align="center">farqva@gmail.com</h2>
</div>
</div>
</div>
</body>
</html>
Akhirnya desain layout sederhana yang qt bwat selesai…selanjutnya qt tinggal memodifikasi pa yang ingin qt ubah sehingga menjadi lebih menarik lagi..
Terima ksih telah membaca artikel ini semoga bermanfaat bagi semua…..
weeeees...Tidak usah panjang lebar y..capek --!!l ;D
Langsung saja qt bwt style2.css (gak harus ini lo) berikut ini:
Mystyle2.css
#wrapper {
margin: auto;
width: 750px;
background-image:url(backgound3.jpg);
border: 1px;
}
#header {
height: 80px;
border: 1px;
background-repeat:no-repeat;
}
#logo {
float:left;
width: 78px;
height: 78px;
margin-top: 0px;
margin-left: 0px;
background: url(UM4.png) no-repeat;
border: 1px;
}
#Teknik {
float: left;
margin-right: 5px;
margin-top: 0px;
width: 300px;
height: 78px;
border: 1px;
}
#menu {
width: 250px;
padding: 0;
height: 77px;
float:right;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
margin-right: 2px;
text-transform: uppercase;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color:#FFFFFF;
}
#menu a:hover, #menu .current_page_item a {
color:#0000CC;
}
#menu a:hover {
text-decoration: underline;
}
#inner {
float: left;
margin: 5px 0px 0px 0px;
background-color:#999999;
border: 1px;
}
#sidebar {
float: left;
width: 180px;
height: 345px;
margin: 0px 0px 0px 0px;
background-color:#999999;
border: 1px;
}
h4{
margin: 0;
text-transform: uppercase;
letter-spacing: .15em;
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
color:#FFFFFF;
background: #183134 no-repeat left center;
}
#leftmenu ul {
width: 180px;
list-style-type:none;
padding:0; margin:0;
font-size:13px
}
#leftmenu a:link, #leftmenu a:visited, #leftmenu a:active {
padding-left: 15px;
text-decoration: none;
}
#leftmenu a {
padding: 5px 0px 5px 15px; display: block;
background:#000066 no-repeat left center;
margin: 0px 0px 1px; color: #ffffff;
}
#leftmenu a:hover {
background:#000066 no-repeat left center; color: #ffffff
}
#top{
float:left;
width:567px;
height:100px;
margin: 0px 0px 0px 0px;
background-image:url(top.jpg);
background-repeat:no-repeat;
border:1px solid green;
}
#content {
float: left;
width: 330px;
height: 230px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding: 10px 5px 5px 10px;
background-color:#FFFFFF;
border: 1px;
}
#right {
float:right;
width:200px;
height:150px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin: 5px 0px 5px 0px;
padding: 10px 5px 5px 15px;
background-color:#CCCCCC;
border:1px;
}
#search{
padding:30px 0 0 10px;
font:Arial, Helvetica, sans-serif;
font-size:14px;
color:#FFFFFF;
}
#footer {
clear: both;
height: 50px;
margin: 0px 0px 0px 0px;
background-image:url(backgound2.jpg);
font:Arial, Helvetica, sans-serif;
border: 1px;
}
Kemudian Buat desain layout seperti berikut:
Desain Layout2.Html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Desain Layout2</title>
<LINK REL="STYLESHEET" TYPE="text/css" HREF="mystyle2.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="menu">
<ul id="main">
<li><a href="index.html"> Home |</a></li>
<li><a href="#">Sitemap |</a></li>
<li><a href="#">RSS |</a></li>
<li><a href="contact.html">Contact |</a></li>
<li><a href="aboutus.html">About Us</a></li>
</ul>
<div id="search"><form name="form1" method="post" action="">
<label>Search
<input type="text" name="textfield">
</label>
</form>
</div>
</div>
<div id="logo">
</div>
<div id = "Teknik">
<h1 align="left">TEKNIK ELEKTRO</h1>
</div>
<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li>
<h4 align="center"><img src="Menu1.jpg"></h4>
</li>
<li><a href="Home.html">Home </a></li>
<li><a href="News & Media.html">News & Media</a></li>
<li><a href="Tutorials.html">Tutorials</a></li>
<li><a href="Tips & Triks.html">Tips & Triks</a></li>
<li><a href="Download.html">Download</a></li>
</ul>
</div>
</div>
<div id="top">
</div>
<div id="content"><marquee behavior="scroll">Welcome to " TEKNIK ELEKTRO"
</marquee>
<p> </p>
<b>HTML<br/></b>
<br/>
HTML (Hypertext Markup Language) merupakan sebuah bahasa markup,</br>
bukan bahasa pemrograman. Bahasa markup (Indonesia: markah) adalah</br>
bahasa yang mengombinasikan teks dan informasi tambahan mengenai teks</br>
tersebut. HTML merupakan dokumen standar yang digunakan untuk</br>
mendesain halaman web.
</div>
<div id="right">
<p>Events:</p>
<ul>
<li><a href="Panjat Tiang.html">Lomba Panjat Tiang Listrik</a></li>
<li><a href="Tarik Kabel.html">Lomba Tarik Kabel</a></li>
<li><a href="Nyetrum.html">Lomba Nyetrum</a></li>
<li><a href="Nyolder.html">Lomba Nyolder</a></li>
</ul>
</div>
</div>
<div id="footer">
<div align="center"><h2 align="center">farqva@gmail.com</h2>
</div>
</div>
</div>
</body>
</html>
Akhirnya desain layout sederhana yang qt bwat selesai…selanjutnya qt tinggal memodifikasi pa yang ingin qt ubah sehingga menjadi lebih menarik lagi..
Terima ksih telah membaca artikel ini semoga bermanfaat bagi semua…..
Desain Layout dengan CSS 1
Kali ini kita akan membuat sebuah layout seperti gambar di samping dengan menggunkan css. Apa itu css?????
ehm gampang…:D
Cascading style sheet (CSS) merupakan sekumpulan aturan yang menyatakan
bagaimana style diaplikasikan ke tag-tag HTML di dalam dokumen.
Rekomendasi CSS menguraikan tiga jenis style:
Embedded: properti style diletakkan di dalam satu blok di dokumen
HTML.
Inline: properti style diterapkan secara langsung per baris atau per elemen
HTML.
Linked: properti style diletakkan di file berekstensi css dan dikaitkan
dengan dokumen HTML.
Untuk membuat desain layout web dengan css langkah pertama yaitu mempersiapkan wrapper, langkah selanjutnya adalah membuat desain layout. Sebagai contoh, kita akan membuat layout standar (header, menu, content, dan footer) dengan style terpisah.
berikut dan simpan dengan nama mystyle.css
Definisikan style seperti berikut dan simpan dengan nama mystyle.css.
Mystyle1.css
#wrapper {
margin: auto;
width: 750px;
border: 1px solid red;
}
#header {
height: 80px;
border: 1px solid blue;
}
#inner {
float: left;
margin: 5px 0;
border: 1px solid black;
}
#sidebar {
float: left;
margin-right: 20px;
width: 180px;
height: 330px;
border: 1px solid red;
}
#content {
float: left;
width: 544px;
height: 330px;
border: 1px solid green;
}
#Top {
float:right;
width: 544px;
height:90px;
border: 1px solid red;
}
#Bottom {
float:right;
width: 544px;
height:238px;
border: 1px solid green;
}
#Left {
float:Left;
width: 330px;
height: 230px;
border: 1px solid red;
}
#Right {
float:right;
margin-left: 20px;
width: 190px;
height: 150px;
border: 1px solid red;
}
#footer {
clear: both;
height: 50px;
border: 1px solid blue;
}
Buat desain layout seperti berikut:
Desain Layout1.Html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Desain Layout</title>
<link rel="stylesheet" href="mystyle.css" type="text/css" />
</head>
<div id = "wrapper">
<div id="header">
header
</div>
<div id="inner">
<div id="sidebar">
Sidebar
</div>
<div id="content">
<div id="Top">
Top
</div>
<div id="Bottom">
<div id="Left">
Content
</div>
<div id="Right">
Right
</div>
</div>
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
Sekian dulu y semoga bermanfaat…Qt sambung Lg pada Desain layout 2 yang pastinya lebih kompleks…;D
ehm gampang…:D
Cascading style sheet (CSS) merupakan sekumpulan aturan yang menyatakan
bagaimana style diaplikasikan ke tag-tag HTML di dalam dokumen.
Rekomendasi CSS menguraikan tiga jenis style:
Embedded: properti style diletakkan di dalam satu blok di dokumen
HTML.
Inline: properti style diterapkan secara langsung per baris atau per elemen
HTML.
Linked: properti style diletakkan di file berekstensi css dan dikaitkan
dengan dokumen HTML.
Untuk membuat desain layout web dengan css langkah pertama yaitu mempersiapkan wrapper, langkah selanjutnya adalah membuat desain layout. Sebagai contoh, kita akan membuat layout standar (header, menu, content, dan footer) dengan style terpisah.
berikut dan simpan dengan nama mystyle.css
Definisikan style seperti berikut dan simpan dengan nama mystyle.css.
Mystyle1.css
#wrapper {
margin: auto;
width: 750px;
border: 1px solid red;
}
#header {
height: 80px;
border: 1px solid blue;
}
#inner {
float: left;
margin: 5px 0;
border: 1px solid black;
}
#sidebar {
float: left;
margin-right: 20px;
width: 180px;
height: 330px;
border: 1px solid red;
}
#content {
float: left;
width: 544px;
height: 330px;
border: 1px solid green;
}
#Top {
float:right;
width: 544px;
height:90px;
border: 1px solid red;
}
#Bottom {
float:right;
width: 544px;
height:238px;
border: 1px solid green;
}
#Left {
float:Left;
width: 330px;
height: 230px;
border: 1px solid red;
}
#Right {
float:right;
margin-left: 20px;
width: 190px;
height: 150px;
border: 1px solid red;
}
#footer {
clear: both;
height: 50px;
border: 1px solid blue;
}
Buat desain layout seperti berikut:
Desain Layout1.Html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Desain Layout</title>
<link rel="stylesheet" href="mystyle.css" type="text/css" />
</head>
<div id = "wrapper">
<div id="header">
header
</div>
<div id="inner">
<div id="sidebar">
Sidebar
</div>
<div id="content">
<div id="Top">
Top
</div>
<div id="Bottom">
<div id="Left">
Content
</div>
<div id="Right">
Right
</div>
</div>
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
Sekian dulu y semoga bermanfaat…Qt sambung Lg pada Desain layout 2 yang pastinya lebih kompleks…;D
Minggu, 21 Februari 2010
Frame
Frame memungkinkan kita untuk menampilkan lebih dari satu halaman
dokumen dalam satu waktu. Tidak seperti di tabel, tiap-tiap frame
mencerminkan halaman yang independen.
Untuk menciptakan frame, kita terlebih dahulu menciptakan tipe baru yang
disebut frameset.
Penjelasan lebih detail mengenai penggunaan frame dapat
dilihat pada kode berikut:
dokumen dalam satu waktu. Tidak seperti di tabel, tiap-tiap frame
mencerminkan halaman yang independen.
Untuk menciptakan frame, kita terlebih dahulu menciptakan tipe baru yang
disebut frameset.
Penjelasan lebih detail mengenai penggunaan frame dapat
dilihat pada kode berikut:
Sabtu, 20 Februari 2010
Desain table
Pada umumnya, tabel digunakan untuk menampilkan data tabular dalam
bentuk baris dan kolom. Perpotongan baris dan kolom di dalam tabel disebut
sebagai sel.
Bagaimanapun, fleksibilitas HTML memungkinkan kita untuk menampilkan
data di dalam tabel secara atraktif. Artinya, tak hanya sebatas pada data
tabular saja, namun juga mengizinkan kita melakukan pemformatan.
Terdapat 3 tag dasar dalam pembuatan table, yaitu:
Tag
Tag
Tag
Sebuah tabel tidak selalu memiliki ukuran dan jumlah sel yang sama dalam
setiap baris ataupun kolomnya. Sebagai contoh, mungkin kita perlu
melakukan penggabungan (merge) sel.
Dalam konteks elemen tabel, penggabungan sel dapat dilakukan berdasar
baris (rowspan) atau kolom (colspan).
Contoh pembuatan desain web dengan memanfaatkan tabel dapat dilihat kodenya dibawah ini
Senin, 08 Februari 2010
metode penelitian
Penelitian ini adalah penelitian kuantitatif dalam bentuk penelitian survai. Pengumpulan data dengan tes, angket dan dokumen, analisis data yang digunakan adalah analisis statistik. Penelitian ini menggunakan pendekatan deskriptif korelasional. Setiap variable bebas (X) dikorelasikan dengan variabel terikat (Y), kemudian secara bersama-sama variabel bebas dikorelasikan dengan variabel terikat. Variabel penelitian ini dapat dilihat pada Tabel 3.1.
Penelitian ini menguji hubungan antara bakat mekanik, motivasi belajar, persepsi siswa tentang keterampilan mengajar guru dengan prestasi belajar service engine siswa SMK Negeri 1 Sedan Rembang Program Keahlian Mekanik Otomotif. Penelitian korelasi bertujuan untuk menemukan ada tidaknya hubungan dan apabila ada berapa eratnya hubungan tersebut serta berarti atau tidak hubungan itu (Arikunto, 2007:270).
Penelitian ini menguji hubungan antara bakat mekanik, motivasi belajar, persepsi siswa tentang keterampilan mengajar guru dengan prestasi belajar service engine siswa SMK Negeri 1 Sedan Rembang Program Keahlian Mekanik Otomotif. Penelitian korelasi bertujuan untuk menemukan ada tidaknya hubungan dan apabila ada berapa eratnya hubungan tersebut serta berarti atau tidak hubungan itu (Arikunto, 2007:270).
Langganan:
Postingan (Atom)