SIXSTRINGS'BLOG

Embedded: properti style diletakkan di dalam satu blok di dokumenHTML.

Inline: properti style diterapkan secara langsung per baris atau per elemenHTML.

Linked: properti style diletakkan di file berekstensi css dan dikaitkan dengan dokumen HTML.

Ginama sich caranya bikin CSS??

OK, hal pertama yang harus kita persiapkan adalah wrapper, langkah selanjutnya adalah membuat desain layoutnya.dengan style terpisah. Gampangkan!!! Hehehee..

Ni, dibawah uda gue contohin gmn bikinnya di simpan dengan nama mystyle.css

NB: rahasia...ini soal ujian lho....hehehehe

mystyle.css

#wrapper {
margin: auto;
width: 1000px;
border: 1px solid black;
background: green;
}

#top {
margin:auto ;
width: 999px;
height:25px;
border: 1px solid blue;
background: blue;
}

#right {
float: right;
width: 200px;
height: 20px;
background: green;
border: 2px solid black;
margin: 3px 5px 0px 0px ;
}

#right2 {
clear: both;
float: right;
width: 200px;
height: 130px;
background: grey;
border: 2px solid black;
margin: 0px 5px 0px 0px ;
}

#right3 {
clear: both;
float: right;
width: 200px;
height: 20px;
background: green;
border: 2px solid black;
margin: 3px 5px 0px 0px ;
}

#right4 {
clear: both;
float: right;
width: 200px;
height: 160px;
background: black;
border: 2px solid black;
margin: 0px 5px 5px 0px ;
}

#content {
margin: 0px 0px 0px 40px;
width: 700px;
height: 340px;
img float left padding 2px 2px 2px 2px;
border: 2px solid grey;
}

#header {
clear: both;
background-image:url(header3.jpg);
height: 70px;
border: 0px solid blue;
}

#footer {
clear: both;
height: 50px;
border: 1px solid black ;
background-image:url(footer2.jpg);
}

SETELAH ITU

LANJUTKAN DENGAN

Buat isi bagian –bagian kerangka dari web wang akan dibuat

Simpan dengan nama 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">
    <table width="993" height="35">

          <tr>
            <td> <h2> <p align="left"><font color="white"face="Verdana">ARTHA WEB</font> </b> <h2></td>
            <td><b><h4 align="right">
                    <form name="form1" method="post" action="">
              <label>Search
               <input type="text" name="textfield">
              </label>
                </form>
                   <h4> </td>
          </tr>

        </table>
        </div>

    <div id="top">
              <tr id="main">
           <td><a href="index.html"> Home |</a></td>
           <td><a href="#">Sitemap |</a></td>
           <td><a href="#">RSS |</a></td>
           <td><a href="contact.html">Contact |</a></td>
           <td><a href="aboutus.html">About Us</a></td>
              </tr>

        </div>

    <div id="right">KATEGORI</div>

    <div id="right2">
         <ul id="main">
       <li><a href="index.html"> Program</a></li>
       <li><a href="#">News & Media</a></li>
       <li><a href="tutorial.html">Tutorial</a></li>
       <li><a href="trik&tips.html">Trik& Tips</a></li>
         </ul>

        </div>
    <div id="right3">LOGIN</div>

        <div id="right4">

          <form action="" method="post">
           <table align="left" bgcolor="#000000" border="0" cellpadding="" cellspacing="0" width="10%">
            <tr>
             <td> <font color="white"face="TIME NEW ROMAN" size"10"> user id: </font></td>
            </tr>
            <tr>
             <td><input type="text" /></td>
            </tr>
            <tr>
             <td> <p align="left"><font color="white"face="TIME NEW ROMAN" size"10">password:</font> </td>
            </tr>
            <tr>
             <td><input type="text" /></td>
             </tr>
             <tr>
              <td> <input type="submit" value="login" /> </td>
             </tr>
            </table>
           </form>

       </div>

    <div id="content"><marquee behavior="scroll">"Selamat Datang Di tutorial ARTMUSIC"</marquee> <hr/>
    <p> </p>
    <b>KARAKTERISTIK SIBANEZ PRESTIGE SEVEN STRINGS<br/></b>
    <br/><img src="on.jpg"align="left" />
           IBANEZ PRESTIGE 7 STRINGS (New Tremolo)
    - basswood with
    - flamed ash top body
    - wizard II neck
    - jumbo 24 frets
    - edge pro bridge
    - psnd1 (h) neck pu
    - psnd2 (h) bridge pu
    - cosmo black hardware.</br>
               komentar:
    SEMI tremolo sudah dipakai
    di gitar ini, keren dan stabil.
    gitar bisa dilihat di Planet Musik
    Arteri Pondok Indah.
    pickup IBANEZ PRESTIGE 7 STRINGS
    konfigurasi h-h, tanpa single
    coil atau hanya dua humbucker type demarcio
    dan kayu pada bodinya dua lapis.
    gitar ini cocok untuk semi pro
    yang akan segera mengganti
    pickupnya dengan tipe yang
    spesifik. Ya buat temen temen yang berminat
    bisa segera hubungi numb 085731610296
    di jamin barang memuaskan...mulus rek........!!!!
    tidak pernah keluar kamar.


HARGA.Rp 4.650.000,- NEGO

BY ART MUSIC</br>

        </div>
    <div id="footer"><h6 align="right">SIXSTRINGS'BLOG (arthaindra25@gmail.com)</h6></div>
</div>
</body>
</html>

MAKA HASILNYA ADALAH.....!!!!

Aplikasi login form sederhana (tanpa database) yang terdiri dari field ID/Username dan Password.

Di bawah ini merupakan contoh pembuatan login sederhana tanpa database atau SQL

Hasil dari skripnya:

bikin file login.php

Disini akan di destroy session sesuai dengan nama session untuk session nama loginnya.
$_SESSION['user'] ==> user disini maksudnya adalah nama session nya (untuk variabel)

login.php

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

<html>

<head>

<title>Login</title>

<!--

table {

font-family: Courier New, Arial, Helvetica, sans-serif;

font-size: 11px;

}

input {

font-family: Courier New, Arial, Helvetica, sans-serif;

font-size: 12px;

height: 20px;

}

-->

</style>

</head>

<body>

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>

<br /><font color="#2A1F00"><h2>LOGIN DI SINI</h2></font></td>

</tr>

<tr>

</tr>

<tr>

<td height="18" align="right" valign="middle">Username : </td>

</tr>

<tr>

<td height="18" align="right" valign="middle">Password : </td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tr>

</table>

</form>

</div>

</body>

</html>

Dari skrip di atas akan terdapat pesan error jika login tidak di isi (USERNAME n PASSWORD)

Buat file untuk nge cek login, nah disini kita tentukan username dan password untuk login
pertama kita tentukan username dan password yang akan di accept sebagai login yang benar, nah misalnya kita buat untuk varible ini baik username dan password nya:
$acc_user ====> username yang di accept
$acc_pas ====> password yang di accept

Jadi saya mau membuat login dengan
username: artha indra
password: emon

maka untuk pengecekan login saya buat:
$acc_user = 'artha indra';
$acc_pas = 'emon';

Karena di form tadi tujuan post nya adalah ceklogin.php

Code:

$username ====> username buat login di form login
$password ====> password buat login di form login
maka nama file nya untuk mencek login saya buat ceklogin.php

ceklogin.php

<?php

$acc_user = 'risky herdy';

$acc_pas = 'dianku';

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

}

OK, terakhir buat halaman index nya yang hanya bisa di akses jika sudah di accept session dengan nama $_SESSION['user'] yang kita buat tadi, jika tidak akan di redirect ke halaman login.php
terlebih dahulu kita set variable session bernama $_SESSION[‘usern’] dan $_SESSION[‘passw’]. Variabel ini digunakan untuk memeriksa apakah user tertentu sudah memasukkan username dan password ataukah tidak.
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></b>'.

'<br/><br/>

<h3 id="Pemrosesan Form">Pemrosesan Form</h3>

<p>

Buat aplikasi login form sederhana (tanpa database) yang terdiri dari field

ID/Username dan Password. Gunakan variabel di PHP untuk mensimulasikan

verifikasi data yang dimasukkan.

Spesifikasi:

<br> Terdapat scripting JavaScript untuk validasi awal (field tidak boleh

kosong, masukan id dan password harus huruf). </br>

<br>Jika field kosong dan langsung di-submit, kembalikan fokus kursor ke

field pertama (id)

Ada validasi sisi server (dari PHP) untuk memastikan bahwa nilai

field adalah string. </br>

<br>Jika nilai id dan password sesuai dengan pre-defined value di variabel,

munculkan pesan selamat datang dan cetak nilai id. Sebaliknya, jika

tidak sesuai, tampilkan pesan kegagalan. </br>

.<br/><br/>'.

'<a href="login.php">Logout</a>'.

'</p>';

echo $user;

} else {

header('location: login.php');

exit;

}

maka hasilnya

SIXSTRINGS'BLOG

Senin, 25 Oktober 2010

MEMBUAT WEB SEDERHANA

Login Sederhana dengan php