Tutorial: Mengedit Web dengan Dreamweaver

Tutorial: Mengedit Web dengan Dreamweaver

Ada sebagian web designer dalam membuat situs professional tidak memanfaatkan Adobe Photoshop dalam merancang web, padahal dengan software tersebut kita akan lebih mudah dan lebih praktis dibandingkan harus membuat kode html.

Ketika dokumen Adobe Photoshop (download: situs_bisnis.zip) tersimpan dalam bentuk web maka secara otomatis akan membuat tag html sendiri sehingga tidak perlu bersusah payah mengetik kode html. Anda dapat membuktikan sendiri seperti nampak pada gambar berikut.

1. Mengubah Objek menjadi Background

Tidak semua gambar (image) yang pada web yang telah kita buat diganti. Jika image tersebut berfungsi sebagai tombol, maka Anda dapat menambahkan menu pull down agar tampilan website lebih menarik. Anda juga dapat membuat tombol dalam bentuk mouse over, dan lain sebagainya.

Pada bagian ini, kita akan mencoba membahas tentang teknik penggantian objek gambar menjadi latar belakang (backgrdound) agar kita dapat memasukkan beberapa komponen di dalamnya (teks maupun grafik).

1.      Pertama kali, bukalah file index.html menggunakan Macromedia Dreamweaver.

2.      Setelah file terbuka, tentukan terlebih dahulu image mana saja yang akan di jadikan latar belakang dan bagian mana saja yang akan dijadikan sebagai tombol. Sebagai contoh, klik image di bagian bawah teks New Product.

3.      Pada bagian Properties, tertulis Src = images/index_26.gif. Hal itu berarti kita tidak dapat memasukan teks di atas gambar tersebut karena objek tersebut adalah image, bukan merupakan background. Tekan Del untuk menghapusnya.

4.      Klik pada Background URL of cell untuk memilih gambar yang akan dijadikan latar belakang (background). Oleh karena nama file yang baru saja dihapus adalah index_26.gif maka gunakan file tersebut sebagai latar belakang.

5.      Ketikkan images/index_26.gif pada kolom Bg.

6.      Lakukan hal yang sama pada bagian lain apabila ingin dijadikan sebagai latar belakang agar kita dapat memasukkan objek berupa teks, animasi, maupun gambar.

2. Memasukkan Objek

Objek yang dimaksud dapat berupa animasi, gambar, maupun teks. Dalam Macromedia Dreamweaver proses memasukkan objek sangat mudah karena sudah disediakan tool yang sangat lengkap. Anda tinggal memilih objek apa yang akan dimasukkan. Berikut ini akan membahas masalah teknik memasukkan objek berupa teks.

1.      Letakkan kursor pada tempat yang akan ditambahkan teks.

2.      Pada penel Properties, aturlah beberapa spesifikasi seperti nampak pada gambar berikut.

3.      Ketikkan beberapa kalimat yang berisi berita, kemudian aturlah format teks tersebut seperti nampak pada gambar berikut.

4.      Anda bisa memasukkan image di antara teks tersebut. Untuk melakukan hal itu, pertama kali letakkan kursor di awal paragraf kemudian pilih menu Insert > Image.

5.      Pilih file gambar yang akan dimasukkan dalam dokumen tersebut.

6.      Apabila berhasil memasukkan gambar, maka akan terlihat objek tersebut berada di depan paragraf. Namun posisinya masih kurang sempurna karena susunan teks terdorong oleh gambar tersebut.

7.      Agar tampilan lebih rapi, Anda dapat mengatur posisi gambar sehingga seluruh teks akan berada di sebelah kanan gambar. Untuk melakukan hal tersebut, pada panel Properties pilih Left untuk Align.

MEMBUAT LINK DAN NAVIGASI

Menu yang mudah digunakan (user friendly) dapat membantu pengguna ketika mencari informasi yang dibutuhkan. Sebaiknya menggunakan tombol menu yang umum, seperti: Home, Product, Service, dan Contact Us

Dalam Macromedia Dreamweaver, kita membuat Pop-up Menu, dan Jumping Menu secara mudah. Anda tidak bersusah payah menuliskan script yang panjang dalam bahasa Javascript karena telah disediakan tool yang sangat mudah dan fleksibel.

1. Membuat Pop-up Menu

Keunggulan software Macromedia Dreamweaver dibandingkan dengan aplikasi lain yang sejenis adalah adanya tool untuk membuat menu pop-up yang dibuat dengan bahasa Java. Bagi mereka yang masih awan dengan bahasa Java, tidak perlu bingung karena disediakan panel Behavior untuk mempermudah dalam pembuatan menu pop-up.

Sebelum membuat pop-up menu terlebih dulu harus menyiapkan nama file sebagai link. Sebagai contoh: ketika user memilih menu PC maka yang akan muncul adalah pilihan nama computer seperti Acer, HP, BenQ, dan lain sebagainya. Dan ketika user memilih salah satu opsi (missal: Acer) maka akan terhubung ke file tersebut.

Dengan demikian, Anda harus membuat beberapa file dengan bentuk interface yang sama seperti halaman utama, yaitu menyimpan dengan nama lain (contoh: Save As > acer.html). Diasumsikan, Anda telah memiliki beberapa file sebagai link yang dimaksud.

1.      Pertama kali, klik menu PC.

2.      Jika panel Behaviors belum muncul, aktifkan terlebih dulu dengan cara memilih menu Window > Behaviors.

3.      Pada panel Behaviors (berada di sebelah kanan), klik tombol Add (tanda plus) untuk membuka menu.

4.      Selanjutnya pilih Show Pop up Menu.

5.      Setelah mengklik pilihan tersebut, maka akan muncul kotak dialog Show Pop-up Menu yang masih kosong.

6.      Pada Tab Contents, masukkan nama menu pada kolom Text (misal: Acer).

7.      Kemudian masukkan alamat URL pada kolom Link.

8.      Selanjutnya pada kolom Target, pilih _parent.

9.      Untuk membuat menu yang baru, klik tanda plus (+) di bagian atas. Kemudian lakukan hal sama seperti pada tahap 6.

10.  Selanjutnya, klik Tab Appearance untuk mengatur warna teks dan latar belakang pop up menu. Tentukan jenis dan ukuran font yang digunakan. Lalu tentukan pula warna teks dan warna cell ketika mouse berada di atas teks.

11.  Klik Tab Advanced untuk menentukan lebar, tinggi dan warna border kotak pop up menu.

12.  Klik Tab Position untuk menentukan posisi pop up menu.

13.  Setelah selesai klik OK. Untuk melihat hasilnya, klik tombol F12.

14.  Untuk mengasah keterampilan Anda, buatlah pop-up menu pada tombol lain.

2. Membuat Rollover Image

Macromedia Dreamweaver selain menyediakan tool untuk membuat Pop up Menu juga menyediakan tool untuk membuat Rollover Image sebagai tombol. Yang harus Anda lakukan pertama kali adalah menyediakan dua buah gambar yang ukurannya sama tapi warnanya berbeda.

1.      Buatlah duplikasi gambar tombol yang telah ada.

2.      Kemudian editlah file hasil duplikasi tersebut menggunakan Adobe Photoshop. Pilih menu Image > Adjustment > Hue/Saturation.

3.      Setelah muncul kotak dialog Hue/Saturation, aktifkan pilihan Colorize. Kemudian geser Slider Hue maupun Saturation sesuai kebutuhan. Setelah selesai klik OK, simpan dokumen tersebut dengan cara menekan Ctrl+S.

4.      Sekarang kembali ke Macromedia Dreamweaver. Klik gambar About Us.

5.      Hapuslah objek tersebut dengan cara menekan tombol Del. Selanjutnya pilih menu Insert > Image Objects > Rollover Image.

6.      Setelah muncul kotak dialog Insert Rollover Image, berilah nama gambar pada kolom Image name kemudian tentukan gambar asli pada kolom Original Image. Untuk mempermudah pencarian file, klik tombol Browse. Tentukan pula file untuk gambar rollover pada kolom Rollover Image.

7.      Masukkan teks alternat pada kolom Alt, lalu tentukan nama file sebagai link ketika tombol tersebut di klik.

8.      Untuk melihat hasilnya, tekan tombol F12.

 

Metode Searching Sederhana v.1

30-11-2007 | 16:31:22 | Halaman Ini dibaca 295 kali

Yup, setelah membaca banyak komentar dari sekalian visitor yang saya cintai, 😀 banyak pertanyaan yang jawabannya harus di tumpahkan dalam berbagai artikel, dan tentunya  jika artikel tersebut dibuat satu persatu mungkin dalam 2 minggu ke depan saya bakal libur mandi dan buang air untuk sementara, diakibatkan dari banyaknya pertanyaan yang harus dijawab.
:D~~

Artikel ini merupakan kelanjutan jawaban dari pertanyaan yang mas blakutuk utarakan.

PHP memiliki select yang fungsinya dapat digunakan sebagai searching. Tentunya ditambah dengan argumen yang spesifik terhadap sekelompok data yang akan dicari.

Seperti biasa, yang akan kita lakukan adalah membuat databasenya terlebih dahulu.

create database cms_db;
use cms_db;
create table cms_artikel (id int(3) primary key auto_increment,
judul_artikel varchar(100), penulis_artikel varchar(70),
isi_artikel text);
insert into cms_artikel values(”,’Ryuzaki…’,’Al-k’,’Pada dasarnya ryuzaki itu tidak ganteng :D’);
insert into cms_artikel values(”,’Sejati…’,’Al-k’,’Kegantengan sejati pemilik ketampanan … ‘);

// config.php

<?php

$host = “localhost”;
$username = “root”;
$password = “”;

$databasename = “cms_db”;

$connect = mysql_connect($host, $username, $password) or die (“Nggak bisa konek !”);
mysql_select_db($databasename, $connect) or die(“Nggak bisa konek !”);

?>

// Halaman searchnya, index.php :

<?php
include “config.php”;

$mode = $_REQUEST[‘mode’] ;
$id = $_REQUEST[‘id’];
$search = trim($_POST[‘search’]); // menghilangkan space di kiri dan kanannya

$searchquery = “select * from cms_artikel where isi_artikel like ‘%$search%'”;
$runsearchquery = mysql_query($searchquery);

$viewquery = “select * from cms_artikel where id = ‘$id'”;
$runviewquery = mysql_query($viewquery);

if ($mode == “search” )
{

$numrows = mysql_num_rows($runsearchquery);

print “<br>Data yang anda cari, ada dalam database sebanyak : $numrows<hr>” ;

while ( $result = mysql_fetch_array($runsearchquery))
{
$id = $result[‘id’];
$judul = $result[‘judul_artikel’] ;

print “<a href=?mode=view&id=$id>$judul</a><br>”;
}

print “<hr><a href=index.php>kembali</a>”;

}

else if($mode == “view”)
{
while ( $result = mysql_fetch_array($runviewquery))
{
$id = $result[‘id’];
$judul = $result[‘judul_artikel’] ;
$penulis = $result[‘penulis_artikel’];
$isi = $result[‘isi_artikel’];

print “$judul<br>$penulis<br>$isi”;

}

print “<hr><a href=index.php>kembali</a>”;
}

else
{

?>

<html>
<head>
<title>Search Database … </title></head>
<body>
<br>
<table border=1 align=left bgcolor=lightblue>
<form method=POST action=?mode=search>
<tr><td>Search:<br><input type=text name=search> <input type=submit name=submit value=Cari></td></tr>
</form>
</body>
</html>

<?php

}

?>

Beberapa fungsi yang akan saya jelaskan disini, yaitu :

trim();

Pada umumnya seorang user yang mungkin tidak sengaja menyisipkan space di depan ataupun di belakang string ketika menginput data. Fungsi trim() dapat digunakan Untuk menghilangkan space tersebut.

Query intinya :

$searchquery = “select * from cms_artikel where isi_artikel like ‘%$search%'”;

kalimat query dalam variable tersebut, berupa seleksi data dengan spesifikasi string yang akan dicari oleh user mirip dengan yang ada pada database.

Sebagai contoh, ketika user mencari “ryu” maka database yang didalamnya terdapat string *ryu* akan ditampilkan. Hasil yang akan ditampilkan contohnya seperti ryuzaki. Kira kira seperti itu.

Cukup sederhana.
Silahkan dikembangkan.
Source codenya dapat didownload langsung dari sini :
http://h1.ripway.com/ilmuwebsite/Al-k/simple-searching.zip

Terima kasih.

// greetz : someone

 

 

 

Membuat Dynamic Title

23-11-2007 | 20:22:25 | Halaman Ini dibaca 700 kali

Salam.
SEO, lengkapnya Search Engine Optimization, yaitu sebuah cara yang mempermudah sebuah
website dikenali dan direcord dalam database search engine. Bagi anda seorang web
master banyak hal yang tentunya telah anda lakukan guna mempromosikan website anda
dengan mengikuti syarat-syarat SEO tersebut. Seperti penggunaan CSS, submit web ke penyedia
jasa search engine, membuat url yang friendly dengan mod_rewrite, membuat dynamic title, dan
segudang syarat lainnya.

Sesuai dengan judul yang telah saya berikan, kali ini saya akan menjelaskan secara sederhana
bagaimana membuat Dynamic Title.

Sederhananya untuk membuat Dynamic Title yaitu dengan memanfaatkan tag title pada html, kemudian
variable global $_REQUEST[], dan tentunya database MySQLnya.

Yup, langsung saja, yang akan kita lakukan adalah membuat databasenya terlebih dahulu.

//database.sql

create database cms_db;
use cms_db;
create table tablenyah(id int(5) auto_increment primary key,
judul_artikel varchar(100), penulis_artikel varchar(50), isi_artikel text);
insert into tablenyah values(“”,”Membuat Dynamic Title dengan PHP”,”Loka Dwiartara”,
“Pada suatu hari ada seorang penulis …”);
insert into tablenyah values(“”,”Ryuzaki nggak ganteng”,”Al-k”,
“Ryuzaki pada dasarnya emang nggak ganteng huehuehuheuhe …. “);

Berikut ini adalah source code lengkap-nya :

File konfigurasi, koneksi antara mysql dan php.

// config.php

<?php

$host = “localhost”;
$username = “root”;
$password = “”;
$databasename = “cms_db”;

$connect = mysql_connect($host, $username, $password) or die(“Gagal Koneksi !!!”);
$database = mysql_select_db($databasename, $connect);

?>

Dan script inti index.php

// index.php

<html>
<head>
<title>

<?php

// Dynamic Title
// by : Loka Dwiartara a.k.a Al-k
// http://www.ilmuwebsite.com

include “config.php”;
$id = $_REQUEST[‘id’];

$query1 = “select judul_artikel from tablenyah where id=’$id’ “;
$runquery1 = mysql_query($query1);
$judul = mysql_fetch_array($runquery1);

if($_REQUEST[‘mode’] == “tutorial_php”)
{
print “Tutorial PHP”;

if (!ISSET($_REQUEST[‘id’]))
{
print ” | ilmuwebsite.com “;
}
else
{
print ” | “. $judul[‘judul_artikel’];
}

}

else
{
print “Ilmuwebsite.com”;
}

?>

</title>

</head>

<body>

<?php

$query2 = “select id, judul_artikel, penulis_artikel, isi_artikel from tablenyah”;
$runquery2 = mysql_query($query2);

$query3 = “select judul_artikel, penulis_artikel, isi_artikel from tablenyah where id=’$id'”;
$runquery3 = mysql_query($query3);

if (ISSET($_REQUEST[‘mode’]))

{

if (!ISSET($_REQUEST[‘id’]))
{
while ($result = mysql_fetch_array($runquery2))
{
print “<a href=index.php?mode=tutorial_php&id=$result[id]>
$result[judul_artikel]</a><br>”;
}

print “<br><a href=index.php>Kembali</a>”;
}

else
{
$content = mysql_fetch_array($runquery3);
$judul = $content[‘judul_artikel’];
$penulis = $content[‘penulis_artikel’];
$isi = $content[‘isi_artikel’];

print “<b><u>$judul</u></b><br>”;
print “Penulis : $penulis<br><br>”;
print “$isi”;
print “<br><br><a href=index.php?mode=$_REQUEST[mode]>Kembali</a>”;
}

}

else
{
print “<a href=index.php?mode=tutorial_php>Tutorial PHP</a><br>”;
}

?>

</body>
</html>

Ya, saya akan sedikit membahas source tersebut.
Pada file config.php diatas …

$connect = mysql_connect($host, $username, $password) or die(“Gagal Koneksi !!!”);
$database = mysql_select_db($databasename, $connect);

variable variable $connect berfungsi mengkoneksikan Server PHP dengan database MySQL,
sedangkan variable $database melakukan seleksi database apa yang akan digunakan nantinya.

Pada index.php, saya hanya menjelaskan bagian intinya saja, yakni :

<?php

include “config.php”;
$id = $_REQUEST[‘id’];

$query1 = “select judul_artikel from tablenyah where id=’$id’ “;
$runquery1 = mysql_query($query1);
$judul = mysql_fetch_array($runquery1);

if($_REQUEST[‘mode’] == “tutorial_php”)
{
print “Tutorial PHP”;

if (!ISSET($_REQUEST[‘id’]))
{
print ” | ilmuwebsite.com “;
}
else
{
print ” | “. $judul[‘judul_artikel’];
}

}

else
{
print “Ilmuwebsite.com”;
}

?>

Logikanya kira-kira seperti ini, ketika user masuk pada halaman index.php kemudian melakukan
klik pada link, dalam hal ini misalnya Tutorial PHP yang kemudian menghasilkan
variable global $_REQUEST[‘mode’]-nya berisi “tutorial_php” maka yang terjadi adalah tag title
akan berisi Tutorial PHP, diambil dari ekspresi :

…

if($_REQUEST[‘mode’] == “tutorial_php”)
{
print “Tutorial PHP”;

…

Dan dan tag title pun akan berubah pada kondisi ketika user melakukan klik pada salah satu sub link
dengan memanfaatkan variable global $_REQUEST[‘id’].

Sederhananya seperti itu.
Cukup sekian untuk tutorial kali ini.

 

Membuat Halaman Login … v.1

18-11-2007 | 14:19:32 | Halaman Ini dibaca 1404 kali

Yup, seperti biasa. Kali ini saya akan memberikan contoh penggunaan database, session, dan enkripsi
MD5 untuk menjadikannya sebagai halaman login yang cukup aman, meskipun tidak aman 100%.
Dan tentunya artikel ini hanyalah sebuah contoh, sedangkan pengembangannya digantungkan kepada anda.
Seperti artikel yang sebelumnya, saya hanya menjelaskan sekelumit contoh yang berkaitan dengan
source code dan cara kerja source code tersebut.

Secara sederhana, cara kerjanya adalah seperti :

1.) Ketika user memasukkan username beserta passwordnya, maka yang pertama kali dilakukan adalah
mengeceknya dalam database apakah username telah terdaftar, jika telah terdaftar, dalam hal ini ada
dalam database maka kita memerlukan satu variable yang mengindikasikan bahwa user tersebut ada.

2.) Setelah itu maka sang user akan diberi sebuah session yang diambil dari usernamenya jika
pengecekan password sebelumnya oleh MD5 sukses dilakukan.

3.) Jika kesemuanya tidak sesuai maka sang user akan diredirect ke halaman login.html,
sehingga terlihat seperti diam di tempat.

Untuk memulainya kita buat terlebih dahulu databasenya :

create database userdb;
use userdb;
create table tbl_user(id int(3) primary key auto_increment,
username varchar(50), password varchar(50));
insert into tbl_user values(”,’admin’,’21232f297a57a5a743894a0e4a801fc3′);

21232f297a57a5a743894a0e4a801fc3 –> ini adalah md5 hash dari ‘admin’

Pertama-tama kita membuat halaman loginnya terlebih dahulu

// login.html

<html><head><title>Halaman Login … </title></head>
<body>
<br><br><br><br><br><br><br><br><br><br><br>
<table border=1 align=center>
<form method=post action=cek.php>
<tr><td>username</td><td><input type=text name=username></tr>
<tr><td>password</td><td><input type=password name=password></tr>
<tr><td></td><td><input type=submit name=submit value=Enter></tr>
</form>
</table></body>
</html>

Kemudian halaman config.php

// config.php

<?php

$host = “localhost”;
$username = “root”;
$password = “”;
$databasename = “userdb”;
$connection = mysql_connect($host, $username, $password) or die(“Kesalahan Koneksi … !!”);
mysql_select_db($databasename, $connection) or die(“Databasenya Error”);

?>

Setelah itu kita buat halaman cek.php

// cek.php

<?php

session_start();
include “config.php” ;

$username = $_POST[‘username’];
$password = $_POST[‘password’];
$passwordhash = md5($password);  // mengenkripsikannya untuk dicocokan dengan database

$perintahnya = “select username, password from tbl_user where username = ‘$username’ and password = ‘$passwordhash'”;
$jalankanperintahnya = mysql_query($perintahnya);

$ada_apa_enggak = mysql_num_rows($jalankanperintahnya);

if ($ada_apa_enggak >= 1 )
{

$_SESSION[‘username’] = $username;
header(“location: main.php”);

}

else
header(“location: login.html”);

?>

Kemudian kita buat intinya main.php

// main.php

<?php

session_start();

if (ISSET($_SESSION[‘username’]))
{
print $_SESSION[‘username’];
print “<br><a href=logout.php?maukeluar=iya>logout</a>”;
}

else
header(“location: login.html”);

?>

Dan halaman logout.php …

// logout.php

<?php

session_start();

if ($_REQUEST[‘maukeluar’] == “iya”)
{
if(ISSET($_SESSION[‘username’]))
{
UNSET($_SESSION[‘username’]);
}

}
header(“location: login.html”);
session_destroy();

?>

Yup, cukup sudah, source codenya. Sekarang saya akan menjelaskan sedikit mengenai code-code diatas.
Kita lewat bagian config.php, karena sebelumnya pernah saya bahas, kita masuk ke bagian, cek.php.

lihat bagian

session_start();

Penggunaan session harus dimulai dengan menggunakan fungsi ini.
Kemudian disana tertulis kalimat seperti ini …

$password = $_POST[‘password’];
$passwordhash = md5($password);

saya mengambil variable global $_POST[‘password’] kemudian menyisipkannya kedalam variable baru,
yakni $password. Karena didalam database sudah dalam bentuk enkripsi MD5 maka yang perlu dilakukan
untuk mencocokkan dengan yang ada dalam database adalah mengenkripsi variable global password tadi.
Cukup dimengerti.

Kemudian argumen selanjutnya adalah query SQL

$perintahnya = “select username, password from tbl_user where username = ‘$username’ and password = ‘$passwordhash'”;

Saya kira query diatas cukup familiar bagi anda. 🙂
Dan script-script dibawahnya cukup mudah untuk dimengerti :D.
Ya, saya cukupkan dahulu. Apabila ada yang masih bingung silahkan ditanyakan.
Terima Kasih.

 

Membuat Security Code | Security Image | Anti Spam

14-03-2007 | 11:22:57 | Halaman Ini dibaca 13622 kali

Hai… selamat siang semuanya,kali ini saya mau menjelaskan bagaimana
cara membuat Security Code – Security Image – atau Captcha

Apa itu Security Image/ Security Code?

security image adalah suatu bentuk perlindungan terhadap suatu form
dari serangan SPAM,

Sebagai contoh pernakah anda mengisi formulir pendaftaran untuk mendapatkan
email account di yahoo??
lihat bagian bawah diatas tombol submit, di situ ada security code
yang muncul…dan anda harus mengisi security code tersebut

cara Kerjanya?

Pertama:
formulir akan menampilkan security code yang di generate oleh script
PHP, apabila page tersebut di refresh maka security code akan di
generate lagi sehingga berubah codenya
hal ini sangat berguna sekali untuk menangkal serangan spam

Kedua:
Setelah di submit script php akan memvalidasi data anda dan mencocok kan
security code yang telah anda masuk kan
apabila security code tidak sama, maka proses akan di batalkan
apabila security code sama, maka proses akan dilanjutkan

File Script yang akan kita gunakan kali ini terdiri dari 2 file script

1. script form.htm
2. script action.php
3. script captchasecurityimages.php
4. file font

Penjelasan:

====================================================================
ingat ini hanya contoh, anda bisa mengembangkan sendiri script anda
====================================================================

1. script form.htm

——-
<form action=”action.php” method=”post”>
Pesan: <input type=”text” name=”message” /><br />
<img src=”captchasecurityimages.php?width=100&height=40&character=5″ /><br />
Security Code: <input id=”security_code” name=”security_code” type=”text” /><br />
<input type=”submit” name=”submit” value=”Submit” />
</form>
——-

2. script action.php

——-
<?php
session_start();

if( isset($_POST[‘submit’])) {
if(($_SESSION[‘security_code’] == $_POST[‘security_code’]) && (!empty($_SESSION[‘security_code’])) ) {
// masukkan script anda jika validasi benar
echo ‘Terimakasih Pasan anda:  “‘.$_POST[‘message’].'”‘;
} else {
// masukkan script anda jika validasi salah
echo ‘Sorry, anda memasukkan security code yang salah<br />’;
include “form.htm”;

}
} else {

include “form.htm”;

}
?>
——-

3. script captchasecurityimages.php

——-
<?php

session_start();
class CaptchaSecurityImages {
var $font = ‘monofont.ttf’;
function generateCode($characters) {
/* list all possible characters, similar looking characters and vowels have been removed */
$possible = ‘23456789bcdfghjkmnpqrstvwxyz’;
$code = ”;
$i = 0;
while ($i < $characters) {
$code .= substr($possible, mt_rand(0, strlen($possible)-1), 1);
$i++;
}
return $code;
}
function CaptchaSecurityImages($width=’120′,$height=’40’,$characters=’6′) {
$code = $this->generateCode($characters);
/* font size will be 75% of the image height */
$font_size = $height * 0.75;
$image = @imagecreate($width, $height) or die(‘Cannot Initialize new GD image stream’);
/* set the colours */
$background_color = imagecolorallocate($image, 255, 255, 255);
$text_color = imagecolorallocate($image, 20, 40, 100);
$noise_color = imagecolorallocate($image, 100, 120, 180);
/* generate random dots in background */
for( $i=0; $i<($width*$height)/3; $i++ ) {
imagefilledellipse($image, mt_rand(0,$width), mt_rand(0,$height), 1, 1, $noise_color);
}
/* generate random lines in background */
for( $i=0; $i<($width*$height)/150; $i++ ) {
imageline($image, mt_rand(0,$width), mt_rand(0,$height), mt_rand(0,$width), mt_rand(0,$height), $noise_color);
}
/* create textbox and add text */
$textbox = imagettfbbox($font_size, 0, $this->font, $code);
$x = ($width – $textbox[4])/2;
$y = ($height – $textbox[5])/2;
imagettftext($image, $font_size, 0, $x, $y, $text_color, $this->font , $code);
/* output captcha image to browser */
imagejpeg($image);
imagedestroy($image);
$_SESSION[‘security_code’] = $code;
}
}
$width = isset($_GET[‘width’]) ? $_GET[‘width’] : ‘120’;
$height = isset($_GET[‘height’]) ? $_GET[‘height’] : ’40’;
$characters = isset($_GET[‘characters’]) ? $_GET[‘characters’] : ‘6’;
header(‘Content-Type: image/jpeg’);
$captcha = new captchasecurityimages($width,$height,$characters);

?>
——-

4. file font

monofont.ttf

*keterangan:
anda harus mengupload juga file font nya, sebagai contoh saya
menggunakan font “monofont.ttf” file font yang ukurannya paling kecil
cocok buat website

Semua file di atas harus di tempatkan pada directory/ folder yang sama

Membuat PAGE 1 2 3

21-04-2007 | 09:45:29 | Halaman Ini dibaca 11325 kali

Hai selamat pagi semuanya, kali ini saya akan menunjukkan  bagai mana cara membuat
halaman bertingkat dalam sebuah website yang content nya di generate dari database,

Jika anda memiliki “Dinamic Website” yang besar dan memiliki ribuan item /product
anda pasti kesulitan untuk menampilkan item tersebut satu persatu secara beraturan,
otomatis dan terkendali.

Solusinya adalah anda bisa memakai halaman,

<-Previous 1 2 3 Next->

dan halaman tersebut contentnya di ambil dari database MySql, selain itu kita juga
bisa menentukan berapa item yang akan kita tampilkan per-halaman.
Menarik bukan???

ini deskripsi nya:

koneksi db.php:
——
<?php
$dbhost = ‘localhost’;
$dbusername = ‘user_kamu’;
$dbpasswd = ‘pass_kamu’;
$database_name = ‘database_kamu’;
#under here, don’t touch!

@$connection = mysql_pconnect(“$dbhost”,”$dbusername”,”$dbpasswd”) or die
(“MySql Putus tidak bisa connect ke server”);
@$db = mysql_select_db(“$database_name”, $connection) or die(“Database tidak ditemukan”);
?>
tabel database yang saya gunakan (ini haya contoh):
—–
CREATE TABLE `content` (
`id` int(225) NOT NULL auto_increment,
`judul` varchar(50) collate latin1_general_ci NOT NULL default ”,
`isi` longtext collate latin1_general_ci NOT NULL,
PRIMARY KEY  (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=5 ;

—–

Deskripsi Script:

————————–
<?php
/* ini kita include koneksi database */
include ‘db.php’;

/* tentukan table nya */
$table = content;

$hal = $_GET[hal];

/* jika page default nya 1 */
if(!isset($_GET[‘hal’])){
    $page = 1;
} else {
    $page = $_GET[‘hal’];
}

/* tentukan jumlah item per halaman */
$max_results = 5;

/* halaman di kali MAX jumlah item per halaman dikurangi MAX jumlah item per halaman */
/* logika: 1 x 5 = 5  ,  5 – 5 = 0   , jadi id database dimulai dari 0*/
$from = (($page * $max_results) – $max_results);

/* tampilkan dari databse, LIMIT dari contuh diatas id dari 0 sampai 5 */
$sql = mysql_query(“SELECT * FROM $table ORDER BY id DESC LIMIT $from, $max_results “);
while($row = mysql_fetch_array($sql)){

/* display result, ini tergantung table database mu */
?>
<?php echo $row[2] ?><br>
<?php echo $row[3] ?></a><br />
<?php echo $row[1] ?> | Halaman Ini dibaca <?php echo $row[6] ?> kali<br />
<?php echo $row[4]; ?>

<hr>
<?php
}
$total_results = mysql_result(mysql_query(“SELECT COUNT(*) as Num FROM $table”),0);

$total_pages = ceil($total_results / $max_results);

/* bangun jumlah hiperlink halaman*/
echo “<center>Select a Page<br />”;

/* bangun Previous link */
if($hal > 1){
    $prev = ($page – 1);
    echo “<a href=$_SERVER[PHP_SELF]?hal=$prev> <-Previous </a> “;
}

for($i = 1; $i <= $total_pages; $i++){
    if(($hal) == $i){
        echo “$i “;
        } else {
            echo “<a href=$_SERVER[PHP_SELF]?hal=$i>$i</a> “;
    }
}

/* bangun Next link */
if($hal < $total_pages){
    $next = ($page + 1);
    echo “<a href=$_SERVER[PHP_SELF]?hal=$next>Next-></a>”;
}
echo “</center>”;
?>
—————-

Code lebih lengkap nya:
———————–
<?php
include ‘db.php’;
$table = content;

$hal = $_GET[hal];

if(!isset($_GET[‘hal’])){
$page = 1;
} else {
$page = $_GET[‘hal’];
}

$max_results = 5;

$from = (($page * $max_results) – $max_results);

$sql = mysql_query(“SELECT * FROM $table ORDER BY id DESC LIMIT $from, $max_results “);
while($row = mysql_fetch_array($sql)){

?>
<?php echo $row[2] ?><br>
<?php echo $row[3] ?></a><br />
<?php echo $row[1] ?> | Halaman Ini dibaca <?php echo $row[6] ?> kali<br />
<?php
echo $row[4];
?>
<hr>
<?php
}

$total_results = mysql_result(mysql_query(“SELECT COUNT(*) as Num FROM $table”),0);

$total_pages = ceil($total_results / $max_results);

echo “<center>Select a Page<br />”;

if($hal > 1){
$prev = ($page – 1);
echo “<a href=$_SERVER[PHP_SELF]?hal=$prev> <-Previous </a> “;
}
for($i = 1; $i <= $total_pages; $i++){
if(($hal) == $i){
echo “$i “;
} else {
echo “<a href=$_SERVER[PHP_SELF]?hal=$i>$i</a> “;
}
}
// Build Next Link
if($hal < $total_pages){
$next = ($page + 1);
echo “<a href=$_SERVER[PHP_SELF]?hal=$next>Next-></a>”;
}
echo “</center>”;
?>
———————–

sekian terimakasih…

Referensi luar negri
Saya modifikasi supaya mudah di gunakan dan di implementasikan oleh teman-teman semua

Script ini telah di test dan jalan 100% di:
– mesin pentium III 650Mhz
– ram 256mb
– server konsol server XAMPP versi 1.5.3 Beta 5

Jika ada pertanyaan kirim email ke: black.scorpio.night@gmail.com
atau sms ke 085648173225
atau tulis comment di bawah ini

Download
Download Script + PDF >> Click Here
*Laporkan jika link di atas putus >> REPORT

 

Tutorial Membuat Komentar pada artikel

10-06-2007 | 15:53:40 | Halaman Ini dibaca 4803 kali

Sering kita temui halaman-halaman tutorial pada web yang selalu memiliki fasilitas untuk memberikan komentar kepada penulisnya, maupun tulisannya. Sering pula ditemui komentar-komentar yang tidak diinginkan selalu hadir meramaikan isi komentar.
Ya langsung saja saya berikan sedikit penjelasan bagaimana cara membuatnya, yang perlu kita butuhkan untuk memasukkan komentar adalah halaman tutorial itu sendiri disamping fasilitas untuk memasukkan komentar.

Sehingga diperlukan sebuah tabel yang berfungsi untuk menyimpan isi artikel/tutorial dan sebuah tabel lagi yang digunakan untuk menyimpan komentar.

Berikut ini adalah struktur tabelnya :

create table artikelnya (id int(5) primary key auto_increment, penulis varchar(50), judul varchar(50) not null, isi_artikel text );

kemudian tabel untuk menyimpan komentarnya :

create table komentarnya (id int(5) primary key auto_increment, nama_komentar varchar(40), email_komentar varchar(30), isi_komentar varchar(200), id_artikel int(50));

langkah selanjutnya adalah membuat php script untuk membuat koneksi antara mysql dengan php, berikut ini adalah scriptnya :

— config.php

<?php

$host     = “localhost”;
$username = “root”;
$password = “”;
$databasename = “cms_artikel”;

$connection = mysql_connect($host, $username, $password);
mysql_select_db($databasename, $connection) ;

?>

kemudian script untuk menampilkan judul artikelnya …

— main.php

<?php

require_once “config.php”;

$query    = “select * from artikelnya”;
$runquery = mysql_query($query);

while($result = mysql_fetch_array($runquery))

{

$id = $result[‘id’];
$judul = $result[‘judul’];
$isi_artikelnya = $result[‘isi_artikel’];
$isi = substr($isi_artikelnya,0,400);
$isi = substr($isi_artikelnya,0,strrpos($isi,” “));

print “<b>$judul<br></b>$isi…”;
print “<a href=view.php?page_detil=$id>Selengkapnya</a><br><br>”;

}

?>

script untuk menampilkan artikel secara keseluruhan …

— view.php

<?php

require_once “config.php”;

$id = $_GET[‘page_detil’];

if (ISSET($_GET[‘page_detil’]))
{

$query      = “select * from artikelnya where id=$id”;
$runquery   = mysql_query($query);
$result     = mysql_fetch_array($runquery);
$isi_artikel = $result[‘isi_artikel’];

print $isi_artikel ;
print “<br><a href=main.php>Kembali … </a><br><br>”;

print “<b>Komentarnya : </b><hr>”;
require_once “comment.php”;

}

else
print “”;

if ($_REQUEST[‘entry’] == “comment”)
{

$id_artikel = $_POST[‘id_artikel’] ;
$nama = $_POST[‘nama’];
$komentar = $_POST[‘komentar’];

$query2    =  “insert into komentarnya values(”,’$nama’,’$komentar’,’$id_artikel’)”;
$runquery2 =  mysql_query($query2);

print “Berhasil di masukkan<br>”;
print “<a href=view.php?page_detil=$id_artikel>Kembali…</a>”;

}

?>

ini adalah script untuk menampilkan komentar, sekaligus form untuk memasukkan komentar

— comment.php
<?php

require_once “config.php”;
$query    = “select nama_komentar, isi_komentar from komentarnya where id_artikel=$id order by id desc”;
$runquery = mysql_query($query);

while ($result = mysql_fetch_array($runquery))
{

$nama_komentar = $result[‘nama_komentar’];
$isikomentar = $result[‘isi_komentar’];

print “Nama : $nama_komentar <br> $isikomentar <hr>” ;

}

?>

<html>
<body><br>
<b>Isi Komentar :</b>
<form action=”?entry=comment” method=”post”>
nama : <input type=text name=nama><br>
komentar : <br><textarea name=komentar rows=6 width=200></textarea><br>
<input type=submit name=submit value=submit>
<input type=hidden name=id_artikel value=”<?php print $id ;?>”> </form></body></html>

Sedikit penjelasan mengenai script-script diatas.
Pada file config.php terdapat koneksi yang menghubungkan php dengan database mysql disitu tertulis

mysql_connect($host, $username, $password);

yang merupakan inti yang menangani koneksi tersebut.

Dalam file main.php tertulis

$isi = substr($isi_artikelnya,0,400);
$isi = substr($isi_artikelnya,0,strrpos($isi,” “));

fungsi substr( ) disini berfungsi untuk memotong  value dalam suatu record, dalam kasus ini record isi_artikelnya. Sehingga dalam halaman main.php yang ditampilkan hanyalah 400 karakter pertama, dengan range 0 – 400. Yang tampil pada browser hanya sebagian saja, tidak keseluruhan artikel. Selebihnya di sediakan link “selengkapnya …” untuk melihat artikel secara keseluruhan.

Sedangkan strrpos( ) berfungsi mencari spasi dalam suatu variable dalam hal ini string.

Sehingga bila variable $isi berisi :
“loka keren sekali”    :D~
dan variable tersebut mendapatkan fungsi substr( ) :
$isinya = substr($isi,0,5)

maka yang akan ditampilkan nanti adalah :
“loka k”

sehingga perlu adanya fungsi strrpos( ) untuk menghilangkan karakter yang tidak perlu.
Sehingga variable $isi mendapatkan fungsi lagi yaitu :

$isinya = substr($isi,0,strrpos($isinya,” “);

Ya, cukup sekian penjelasan saya mengenai tutorial membuat komentar pada artikel. Script ini masih terdapat banyak kekurangan, sehingga saya harapkan anda bisa mengembangkannya sendiri. Selamat mencoba. :D~

 

Validasi Form dengan PHP

25-03-2007 | 16:48:41 | Halaman Ini dibaca 12969 kali

Anda mau membuat peraturan untuk form-form di website anda??
Seperti:

– Nomor Telephone Harus memakai awalan “0” dan minimum 5 angka
– Email Harus ada “@” dan .com / .net atau apa saja
– Password harus sama dengan ReTypePassword
– Atau jika Form ada yang kosong salah satu maka batalkan proses

Untuk memvalidasi lebih baik gunakan PHP dari pada javascript

Oke ini Penjelasan script nya:
—————
include ‘db.php’;

$first_name = $_POST[‘first_name’];
$last_name = $_POST[‘last_name’];
$tlp = $_POST[‘tlp’];
$email_address = $_POST[’email_address’];
$username = $_POST[‘username’];
$password = $_POST[‘password’];
$retypepassword = $_POST[‘retypepassword’];
$iphidden = $_POST[‘iphidden’];
$nim = $_POST[‘nim’];
—————–
Script “include ‘db.php’;” di atas untuk connect dg database,
sedangkan script “$first_name = $_POST[‘first_name’];” dan lain-lain
itu gunanya untuk Mengambil data dari form sebelumnya
Saya kira teman2 sudah paham masalah ini…
—————–
$polaemail = “^.+@.+\..+$“;
$pola_tlp = “^[0-9]+$”;
$polapassword = “^.{5,}$”;
—————–
Script di atas berfungsi untuk menentukan pola dari string yang kita tentukan
Lihat Tabel di bawah ini:

Pola	Kode
Harus di awal kata	^
Huruf	A-Za-z
Angka	0-9
Huruf atau angka	[A-Za-z0-9]
Semua jenis karakter	.
Berjumlah satu atau lebih	+ atau {1,}
Berjumlah nol atau lebih	* atau {0,}
Berjumlah tiga sampai sepuluh	{3,10}
Diikuti dengan @	@
Tanda titik	\.
Harus berada di akhir kalimat	$

 

Jadi jika:  $polaemail = “^.+@.+\..+$“;
Deskripsi dari pola email:
^ (harus ada karakter di depan)
. (semua jedis karakter)
+ (Lebih dari satu)
@(tanda @)
. (semua jedis karakter)
+ (Lebih dari satu)
\. (di ikuti tanda titik)
. (semua jedis karakter)
+ (Lebih dari satu)
$ (Harus ada di akhir kalimat)

Jika anda mau email harus .com / .net / .org
Polanya seperti ini: ^.+@.+\.((com)|(net)|(org))$

——————-
if((!$first_name) || (!$last_name) || (!eregi($pola_tlp, $tlp)) || (!eregi($polaemail, $email_address)) || (!$username) || (!eregi($polapassword, $password)) || (!$retypepassword) || ($password != $retypepassword))
——————-
Pernyataan “if”, Jika
Tanda “!” berarti tidak, script “!$first_name” berarti string “$first_name” tidak berisi atau kosong
Tanda “||” itu berarti “atau”.
Script “!eregi($pola_tlp, $tlp)”    “eregi” adalah fungsi untuk membandingkan, berarti jika $pola_tlp tidak sama dengan $tlp
Tanda “!=”  berarti tidak sama

Script di atas berfungsi untuk memeriksa semua string apakah kosong atau polanya tidak sama.
Jika ada salah satu string yang bermasalah kita langsung tampilkan pernyataan:
“Tolong Isi Formulir Ini Dengan Benar! ”

Setelah itu kita tunjukkan bagian mana yang salah, dengan script:
——————-
<?php
if(!$first_name){
?>
Tolong isi nama depan <br />
<?php    }
if(!$last_name){ ?>
Tolong isi nama belakang <br />
<?php    }
if(!eregi($pola_tlp, $tlp)){
echo “Tolong isi Telpon, Harus Angka Ex. 085648173225<br />”;
}
if(!eregi($polaemail, $email_address)){
echo “Tolong isi Email, Ex. scorpio@linux.org<br />”;
}
if(!$username){ ?>
Tolong isi username<br />
<?php     }
if(!eregi($polapassword, $password)){
echo “Tolong isi Password, Harus Lebih dari 5 Karakter<br />”;
}
if(!$retypepassword){ ?>
Tolong isi retype password
<?php     }
if( “$password” != “$retypepassword” ){ ?>
Passwordnya tidak sama, ulangi lagi  ya !
<?php
}
——————-

Setelah kita tunjukkan salah nya dimana, kita sertakan file “form.htm” dengan script:
include “form.htm”;

lalu kita akhiri proses:
exit();

Jam di Status Bar

16-05-2007 | 09:26:17 | Halaman Ini dibaca 1944 kali

<html>

<head>
<SCRIPT language=JavaScript>
<!–

function Clock() {

window.setTimeout( “Clock()”, 1000 );

now = new Date();
localtime = now.toString();
hours = now.getHours();
mins = now.getMinutes();
secs = now.getSeconds();
if (hours > 12)
hours = now.getHours()-12;
self.status = “Jam ” + hours + ” Lewat ” + mins + ” Menit, ” + secs + ” Detik Waktu Indonesia Bagian Ilmuwebsite.com “.toString();

}
Clock()
// –>
</SCRIPT>
</head>

<body>
<body bgcolor=”#000000”>

</body>
</html>

<html>
<head>
</head>

<body bgcolor=”#000000″>
<SCRIPT LANGUAGE=”JavaScript”>

document.write(screen.width + ” x ” + screen.height)
<!– ONE STEP TO INSTALL BOUNCING IMAGE:

1.  Copy the coding into the BODY of your HTML document  –>

<!– STEP ONE: Paste this code into the BODY of your HTML document  –>
</script>
<BODY>

<div id=”img” style=”position:absolute;”>
<img src=”TN_psd0810.JPG” onMouseDown=”pauseResume();” width=”171″ height=”158″>
</div>

<SCRIPT LANGUAGE=”JavaScript”>
<!– Original:  Justin Arruda (JArruda@mindspring.com) –>

<!– This script and many more are available free online at –>
<!– The JavaScript Source!! http://javascript.internet.com –>

<!– Begin
var step = 1;
var delay = 30;
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
var interval;
var name = navigator.appName;
if(name == “Microsoft Internet Explorer”) name = true;
else name = false;
var xPos = 20;
if(name) var yPos = document.body.clientHeight;
else var yPos = window.innerHeight;
function changePos() {
if(name) {
width = document.body.clientWidth;
height = document.body.clientHeight;
Hoffset = img.offsetHeight;
Woffset = img.offsetWidth;
img.style.left = xPos + document.body.scrollLeft;
img.style.top = yPos + document.body.scrollTop;
}
else {
height = window.innerHeight;
width = window.innerWidth;
Hoffset = document.img.clip.height;
Woffset = document.img.clip.width;
document.img.pageY = yPos + window.pageYOffset;
document.img.pageX = xPos + window.pageXOffset;
}
if (yon) {
yPos = yPos + step;
}
else {
yPos = yPos – step;
}
if (yPos < 0) {
yon = 1;
yPos = 0;
}
if (yPos >= (height – Hoffset)) {
yon = 0;
yPos = (height – Hoffset);
}
if (xon) {
xPos = xPos + step;
}
else {
xPos = xPos – step;
}
if (xPos < 0) {
xon = 1;
xPos = 0;
}
if (xPos >= (width – Woffset)) {
xon = 0;
xPos = (width – Woffset);
}
}
function start() {
if(name) img.visibility = “visible”;
else document.img.visibility = “visible”;
interval = setInterval(‘changePos()’,delay);
}
function pauseResume() {
if(pause) {
clearInterval(interval);
pause = false;
}
else {
interval = setInterval(‘changePos()’,delay);
pause = true;
}
}
start();
//  End –>
</script></body>

</html>

 

 

Membuat Halaman Web Menjadi Search Engine Friendly

14-08-2007 | 10:47:12 | Halaman Ini dibaca 3036 kali

Disini saya akan coba terangkan bagai mana membuat halaman suatu website search engine friendly
sebenarnya yang saya jelaskan disini adalah On Page Optimization

–// Website search engine friendly : adalah suatu website yang mempunyai system/ layout yang mempermudah proses crawling search engine bot.

–// OnPage Optimization : adalah proses peng – optimalisasian halaman / page suatu website, dalam membantu mempermudah proses crawling search engine bot.

oke saya akan langsung saja to the point:

beberapa sisi yang harus kamu perhatikan

1. <title>Tekhnik Exploit Password WinXP | ilmuwebsite.com</title>

perhatikan hasil pencarian keyword “exploit winxp” di google di bawah ini:
dari pencarian 2,090,000 halaman, www.ilmuwebsite.com menempati ranking 4 untuk keyword “exploit winxp”

google sangat memperhatikan penggunaan “Title”

2. <h1>tutorial php</h1>
<h1> keyword-mu-disini </h1> ini bisa dipakai untuk mengukuhkan keyword tapi tidak terlalu effect

3. <h2>flash tutorial</h2>
<h2> keyword-mu-disini </h2> ini bisa dipakai untuk mengukuhkan keyword tapi tidak terlalu effect

4. <b> keyword-mu  </b>
sangat – sangatlah penting, kita menunjukkan ke google bahwa kata yang di cetak tebal dengan <b></b> adalah kata penting
dan di anggap keyword, percayalah.. saya sudah membuktikan

5. <i> keyword-mu  </i> ini bisa dipakai untuk mengukuhkan keyword tapi tidak terlalu effect

6. <u> keyword-mu  </u> ini bisa dipakai untuk mengukuhkan keyword tapi tidak terlalu effect

7. <alt> letaknya –>> <img src=”picture1.jpg” alt=”keyword-mu”>
ini bisa dipakai untuk mengukuhkan keyword tapi tidak terlalu effect

 

 

2 Komentar