Jumat, 31 Oktober 2008

Bikin Efek bertaburan hati (heart) di FS / Blog

oke... di halaman Blog aku ini kan banyak gambar heart yg melayang-layang...
dan kini ada sedikit tips untuk mempercantik FS / Blog kamu...
cara ini sudah banyak di posting oleh beberapa orang... tapi kebanyakan hanya memakai Link-nya saja...
Kali ini... Aku akan memberikan susunan Scriptnya... dan kamu bisa mengganti Gambar yang akan melayang2 tersebut...
Kamu bisa ganti dengan Foto kamu sendiri...
Klik disini untuk melihat contohnya yang ada di FS teman Aku....

Dan sekarang kita akan mulai prosesnya.....

1. Siapkan bahab2nya
- Notepad / sejenisnya (Ini berguna untuk utak-atik susunan scriptnya, terutama memngganti Gambarnya)
2. Copy Script berikut ini ke notepad Kalian :

//Configure below to change URL path to the snow image
var snowsrc="http://h1.ripway.com/hanifzx/heart.png"
// Configure below to change number of snow to render
var no = 10;
// Configure whether snow should disappear after x seconds (0=never):
var hidesnowtime = 0;
// Configure how much snow should drop down before fading ("windowheight" or "pageheight")
var snowdistance = "pageheight";

///////////Stop Config//////////////////////////////////

var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 600;

if (ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = iecompattest().clientWidth;
doc_height = iecompattest().clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
snowsrc=(snowsrc.indexOf("www.hanifspd.blogspot.com")!=-1)? "http://h1.ripway.com/hanifzx/heart.png" : snowsrc
for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ie4up||ns6up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px;

LEFT: 15px;\"><a href=\"http://www.hanifspd.co.cc\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px;

LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
}
}
}

function snowIE_NS6() { // IE and NS6 main animation function
doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up &&

snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")?

iecompattest().scrollHeight : iecompattest().offsetHeight;
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
}
dx[i] += stx[i];
document.getElementById("dot"+i).style.top=yp[i]+"px";
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
}
snowtimer=setTimeout("snowIE_NS6()", 10);
}

function hidesnow(){
if (window.snowtimer) clearTimeout(snowtimer)
for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
}


if (ie4up||ns6up){
snowIE_NS6();
if (hidesnowtime>0)
setTimeout("hidesnow()", hidesnowtime*1000)
}

Yang berwarna merah adalah URL gambar yang akan muncul.
Gambarnya seperti ini :

Jadi... klo kamu mau ganti dengan foto kamu sendiri... ya tinggal GANTI Tulisan warna merah itu dengan URL foto kamu....
Gampang to..???

Tyus klo udh selesai utak-atik.... Simpan dengan Nama : melayang.js . tyus kamu Upload ke Hosting kamu.... Klo aq biasanya upload di www.ripway.com

klo kamu males utak-atik Scriptnya..... langsung aja Copy script punya ku di bawah ini....

<script src="http://h1.ripway.com/hanifzx/herat.js"></script>

Tapi script itu munculnya akan persis sama gambar ini :


Oia... Script tadi jangan lupa taruh di Kotak Media FS kamu.....!!! ("Tambahkan Media") jangan lupa isi buku tamu....
ISI BUKU TAMU

Kamis, 30 Oktober 2008

Cara membuat "Background FS" dengan foto pribadi

Oke..... ada request dari salah satu member FS.... g tao cpa dia, yang penting dia minta tolong ama aq untuk memberikan tutorial cara membuat background FS pke foto sendiri.....

Sebenarnya sangat mudah untuk memnggantinya..... tapi buat yang tdk ngerti masalah "CSS"... pasti g mudeng tuh susunan2nya....

oke g usah aq jelasin secara panjang lebar tinggi luas (wekekeke emngnya Matematika..?)

Bismillahhirrohmanirrohim... acara kita mulai.....
1. seperti biasa... "LOGIN"
2. Atur (Bahasa indonesia)
3. disitu ada kotak "CSS"
yang ada tulisannya semacan ini dan tulisan itu tergantung dengan Lay Out kalian.... tapi semuanya hampir mirim.....

-------------------------------------------------------------------------------

/* {--friendster-layouts.com css code start--} */

/* Basic CSS Editor 1.1 - HANIFSPD.CO.CC */

/* PROFILE BACKGROUND */
body { background-image:url(http://i200.photobucket.com/albums/aa73/fs-layouts/friendster-layouts.com/2008/10/panda-kun/panda-kun.png); background-attachment:fixed; background-position:bottom right; background-repeat:repeat; background-color:#e5e5e5; }

/* GLOBAL LINKS */
.usercontent a, .usercontent a:link, .usercontent a:visited, .usercontent a:active { text-decoration:underline; color:#4d4d4d; }
.data a, a.more, .commonbox .viewall { font-family:Arial, Geneva, Helvetica, sans-serif; color:#4d4d4d; }
.usercontent a:hover { text-decoration:underline; color:#336600; }

/* GLOBAL HEADERS */
.commonbox h1, .commonbox h2 { font-family:Courier New, Courier, Monaco, monospace; color:#33cc00; background-color:#666666; }

/* GLOBAL BOXES */
.commonbox { border-width:3px; border-color:#4d4d4d; border-style:double; background-color:#339900; }

/* TESTIMONIALS EVEN ROW */
.commonbox .evenrow { background-color:transparent; }

/* PRIMARY PHOTO BORDER */
.controlpanel .imgblock200 { border-color:#4d4d4d; }

/* BUTTONS */
#controlPanelButtons a, #controlPanelButtons a:link, #controlPanelButtons a:visited { font-family:Arial, Sans-serif; color:#666666; border-color:#666666; background-color:#339900; }
#controlPanelButtons a:hover { color:#339900; border-color:#666666; background-color:#339933; }

/* PHOTO BLOCKS */
.commonbox .imgblock75, .ir { border-width:0px; border-color:#666666; background-color:transparent; }

/* FRIENDS NAME BG */
.commonbox .dr { background-color:#339900; }

/* {--friendster-layouts.com css code end--} */

-------------------------------------------------------------------------------

ntuh tulisan yang ada di atas pasti g bisa di baca oleh manusia... tapi semua tulisan di atas akan muncul pada FS kalian seperti ini tampilannya :





4. Tyus cara mengganti "backgroundnya"
cari tulisan yang acak-acakan tadi :

/* PROFILE BACKGROUND */
body { background-image:url(http://i200.photobucket.com/albums/aa73/fs-layouts/friendster-layouts.com/2008/10/panda-kun/panda-kun.png); background-attachment:fixed; background-position:bottom right;
tuh tulisan yg warnanya merah adalah url gambarnya
nih hasil dari URL tersebut :



tyus klo kamu mao ganti Gambar itu... ya kamu tinggal ganti URL foto kamu.......
untuk mendapatkan URL foto, kamu harus upload dlu Foto kamu... upload aja di www.imangeshack.us. tyus klo udh di Upload... pasti kamu di kasih URL-nya....
tyus ganti URL yang warnanya merah tuh dengan URL foto kamu......

NB :
Klo mengganti URL foto kamu cari tulisan di kotak CSS kamu yang :

/* PROFILE BACKGROUND */
body { background-image:url( TULISKAN URL KAMU DISINI)

jdi kamu g ush COPY CSS ini.....
hanya tinggal ganti tulisan di atas tadi.......

tyus kamu save dech.......................

pasti hasilnya akn muncul...............

and jangan lupa Coment ke FS aq.... di mandalazx@yahoo.com

Cara bikin efek getar di FS - bagian 2

gimana nih kabarnya.... FS kalian kemarin bisa bergetar g....?? setelah aq kasih tutorialnya...??
klo masih blom bisa bergetar........ ya nunggu aja datengnya "gempa bumi" hehehehe.................
tenang aj..... kali ini aq akan langsung kasih tutorial yang paling mudah..........................................
caranya g jauh beda ama yang kemarin............. cuman yag ini langsung pke Script......................
ni contohnya ad di FS aq.Klik disini
Klo yang kemarin kan g langsung scriptnya....... and hasil getarnya g sebagus yang kali ini.........
di jamin deh yang kali ini pasti akan berhasil..........

Oke... seperti biasanya.......... kita mulai dengan bacaan Al-Fatihah......

1. Seperti biasanya Login dulu..... ^_^
2. Edit profil ==> pilih "atur" (buat yang bahasa indonesia)
3. Masukan "Script" di bawah ini ke "kotak media"(Tambahkan Media) FS kamu

<script src="http://hanifitccenter.fileave.com/fsku/getar.js"></script>

tyus... tyus.... tyus.... and tyus...... sampai mana ya...???
4 klo g salah........

4. Simpan hasil EDIT-an kamu tadi......
5. tyus liat deh hasilnya......... pasti window-nya Muter....muter....muter....muter....and muter.... Ya g...........???????

klo udh selesai kita ucapin ALHAMDULILLAH.......................
Makasih........ "Komentarnya bro..........."

Cara membuat "FORM"

Tao g sih lo... yan di maksud dengan "FORM" .......??????????

Form indentik dengan Formulir, form sangat dibutuhkan pada saat kita mengijinkan atau menginginkan adanya nilai/ data yang dipilih atau dimasukkan oleh pengguna, seperti komentar tamu ke suatu situs web / blog (Guestbook) atau pilihan dari jenis suatu kelompok item tertentu.

Kapasitas dari form hanya menyediakan media entry data dan mengirimkannya ( request ) tetapi tidak untuk menerima dan mengolah. Web Scripting yang bersifat sever side akan menangani penerimaan dan pengolahan data secara lebih lanjut.

Form dalam HTML merupakan jembatan komunikasi antara client dengan server, untuk melakukan validasi pengisian elemen form dibutuhkan Javascript karena HTML tidak memiliki perintah untuk pengujian validasi dari nilai elemen form.

Tag-tag Form terletak dalam Tag BODY, yang meliputi :



<HTML>

...................dst

<BODY>

<form name=" method=
"GET|POST" action="y.asp">

...(elemen-elemen tag-tag dalam form )

</form>

</BODY>

</HMTL>


name (optional) nama untuk form yang berlaku, digunakan untuk form handing
method

GET = data dikirimkan melalui URL address

POST = data dikirimkan bersama HTTP header

action URL / File yang digunakan untuk menangkap dan mengolah nilai (data) yan dikirimkan (server side scripting)

Untuk membuat tampilan elemen objek form tersusun rapi maka dapat digunakan TABEL.

Metoda Pengiriman Data.

Dalam pengiriman data dikenal dengan dua istilah yaitu

1. Unidirectional (satu arah)

Data-data yang ada dalam form dikirimkan melalui Action ke sebuah file atau URL lain, agar dapat diterima dan diolah (verifikasi). Sedangkan untuk Form dibuat secara statis dengan HTML dengan format Form.htm . Hal ini dimaksudkan agr file atau URL action yaitu verifikasi.asp yang akan menentukan proses selanjutnya dari data-data yang diinputkan dapat melalui form tersebut.

Kelemahan dari pendekatan ini adalah semakin banyak file-file yang dibuat maka akan lebih sulit untuk melakukan pengembangan selanjutnya. Bahkan sering kita jumpai banyak terdapat file-file yang kodenya sama sehingga terjadi pemborosan Storage.

Kelebihan dari pendekatan ini adalah cocok sekali kalau membangun aplikasi menggunakan metode prototipe ataupun trial and error.

2. Bidirectional ( dua arah )

Data-data yang ada dalam form dikirimkan melalui action ke dirinya sendiri ( file yang sama ), untuk selanjutnya dapat diterima dan diolah (verifikasi). Sehingga file form tidak hanya untuk menampilkan form untuk diisikan datanya namun jua sebagai file untuk melakukan proses verifikasi terhadap data-data form tersebut saat dikirimkan dan dibuat dengan server side script ( contoh : ASP, PHP atau JSP ). Biasanya cara ini menerapkan onsep Object Oriented Programming, yaitu program dipisah menjadi beberapa bagian sesuai kepentingan prosesnya. Pemecahan dapat secara class, sub routine/ procedure atau function.

Kelemahan : adanya file yang berisi ribuan baris perintah, yang selanjutnya akan membawa kesulitan untuk proses pengembangan.

Kelebihan : Proses dan output akan jauh lebih cepat dibandingkan dengan menggunakan cara yang pertama.

A. ELEMEN OBJEK TAG-TAG FORM.

Setiap elemen objek dari tag-tag form merupakan media entry data, masing-masing elemen obejk memiliki dua hal yang penting yaitu nama elemen ( mutlak harus ada, serta pemberian nama tidak diperkenankan menggunakan spasi, tanda baca ataupun angka ) dan nilai ( value ).

Karakteristik daripada elemen objek forum adalah :

  1. INPUT. User diberikan kesempatan untuk memasukkan nilai dengan tampilan model objek form yang variatif dan juga mengirimkan ataupun mereset nilai dari form tersebut.
  2. SELECT atau DAFTAR. User diberikan kesempatan untuk memilih nilai dari daftar opsi atau pilihan yang diberikan.
  3. TEXT AREA atau Area Isian. User diberikan kesempatan untuk memasukkan nilai berupa karakter dengan kapasitas tak terbatas.
Input. Sintaks penulisan elemen objeknya adalah :

<INPUT name=
"x" type="y" value="v">

name nama untuk input yang berlaku
type typenya adalah text, password, checkbox, radio, hidden, reset, submit, button, image dan file
checked (optional) input yang secara default dipilih ( hanya untuk type checkbox dan radio )
value (optional) nilai default atau nilai awal dari input yang dipilih
size (optional) lebar/ ukuran dari input karakter yang ditampilkan ( untuk type text dan password, sedangkan untuk image digantikan dengan width dan height )
maxlenght (optional) jumlah maksimal karakter yang dapat diinputkaan ( untuk type text dan password)
acceskey merupakan shortcut ( dengan menggunakan kombinasi tombol ALT ) untuk pengisian objeknya
disabled membuat agar objek tersebut dalam keadaan tidak aktif
Type Text. Type ini digunakan untuk data isian seperti nama orang atau alamat sesorang. Bentuk objek dari type ini adalah single line yang artinya input isian akn diberikan secara horizontal ( dala satu baris ) Contoh sintaksnya :

<INPUT name=
"x" type="y" value="v">

Type SUBMIT, RESET dan IMAGE Type ini digunakan untuk membuat tombol sumbit, reset dan image. Tombol submit digunakan untuk mengirimkan data-data yang telah diberikan pada form. Sedangkan tombol reset akan mengembalikan keadaan form kembali seperti keadaan awal saat form itu dipanggila untuk pertama kalinya. Khusus untuk kedua type ini value yang digunakan sebagai caption atau nama yang tertera dari tombolnya. Adapun untuk type Image memiliki karakteristik hampir sama seperti submit, perbedaannya terletak dari bentuk objeknya yaitu berupa gambar dan value yang dikirim oleh type Image ini adalah koordinat x,y dari gambar tersebut pada saat gambar tersebut diklik. Contoh sintaksnya :

<INPUT type=
"SUBMIT" name="aksi" value="kirim"> <INPUT type="RESET" name="aksi" value="Undo"> <INPUT type="IMAGE" name="aksi">

Type PASSWORD. Penggunaan type ini akan menyebabkan setiap karakter yang diketikkan ke dalam objek ini akan disembunyikan dengan melakukan masking karakter ke * atau •. Yang sering digunakan untuk input account password atau pin code. Contoh sintaksnya :

<INPUT type=
"PASSWORD" name="Pwd" size=�10� maxlenght=�10�>

Type CHECKBOX. Type ini berguna untuk membuat kotak-kotak cek. Kotak cek adalah suatu bentuk masukkan yang memungkinkan user untuk memilih lebih dari satu pilihan. Setiap checkbox dapat memiliki nama yang berbeda atau nama yang sama (array). Karena sifat dari type ini hanya memilih sehingga user tidak dapat memasukkan nilai, maka untuk itu value dalam type ini wajib diberikan. Untuk memberikan default kotak yang dipilih maka diberikan atribut tak ternilai yaitu checked pada objeknya. Contoh sintaksnya :

<INPUT type=
"CHECKBOX" name="binatang" value="kucing">Kucing <INPUT type="CHECKBOX" name="buah" value="Jeruk">Jeruk

Type RADIO Type ini digunakan mirip dengan checkbox hanya saja Radio hanya dapat dipilih satu kali (bisa diclick tetapi tidak bisa unclick). Jika ada lebih dari satu objek dengan type ini diberikan nama yang sama, dengan vaue yang berbeda maka kumpulan objek ini akan memiliki sifat multiple choice. Contoh sintaksnya :

<INPUT type=
"RADIO" name="Sex" value="P" checked>Pria <INPUT type="RADIO" name="Sex" value="W">Wanita

Type FILE. Bila data yang diberikan berupa upload data dokumen atau file seperti gambar atau audio, maka objek input yang digunakan harus bertypekan FILE. Tampilan objek ini akan menyertakan sebuah tombol browse untuk dapat digunakan dalam pencarian data dokumen atau file yang akan dikirimkan atau diupload. Contoh sintaksnya :

<INPUT type=
"FILE" name="upload">

Type BUTTON Selain tombol yang bertypekan SUBMIT atau RESET, kita juga dapat membuat tombol sendiri yang memiliki fungsi yang dapat kita buat sendiri. Caranya adalah dengan menggunakan type BUTTON, karena tombol yang dibuat dengan type ini dapat memiliki fungsi eksklusif. Penambahan script untuk fungsi tersebut melibatkan Javascript atau VBscript dan diletakkan dalam atribut event seperti onclick, onchange, onmouseover dan sebagainya. Contoh sintaksnya :

<INPUT type=
"BUTTON" name="aksi" value="TEST" onclick="fungsiJS()">

Type HIDDEN Objek dengan type ini tidak dapat dilihat tampilannya secara langsung dalam web browser. Objek dengan type ini dapat digunakan untuk bertukar nilai sementara antar variabel dalam server side programming. Nilai dalam objek ini bersifat statis artinya kita tidak dapat menggantinya secara langsung. Contoh sintaksnya :

<INPUT type=
"HIDDEN" name="kunci" value="rahasia">

B. SELECT (Daftar).

Select digunakan untuk pemilihan terhadap sebuah daftar, disajikan secara menu (combo box, spinner dan menu list ). Tag yang dipakai untuk pendifinisian daftar pilihan adalah Tag <SELECT>. Untuk daftar pilihan atau opsi didefinisikan dengan tag <OPTION> dan berada dalam tag <SELECT>.

Sintaks selengkapnya dalah sebagai berikut :

<select name=
"X" size="Y">

<option selected value=
"value1">menu text1</option>

<option value=
"value2">menu text2</option>

</select>

name nama untuk select yang berlaku
size

tinggi/bentuk tampilan menu select

1 (default) combo box

2 spinner

>2 menu list

selected option yang secara default dipilih
value nilai yang dikirimkan dari option yang dipilih
menu text-n text/label yang ditampilkan untuk tiap option

C. TEXT AREA

Digunakan untuk pengisian teks/ karakter yang panjang seperti komentar dan email. Bila kita menggunakannya maka sebaiknya metode pengiriman yang digunakan nantinya adalah POST agar data yang dikirimkan idak terpotong.

Sintaksnya: <textarea name="x" rows="y" cols=�z�>default text</textarea>

name nama untuk textarea yang berlaku
rows banyaknya baris karakter yang ditampilkan untuk textarea
cols banyaknya kolom karakter yang ditampilkan untuk textarea
default text (optional) default text yang diberikan saat ditampilkan pertama kalinya, terletak diantara

Contoh Latihan.

<HTML><BODY>

<FORM method=
"get" action="proses.asp">

Nama:<INPUT type=
"text" name="nama"><br>

Password;<INPUT type=
"password" name="pass"><br>

Jenis kelamin:<INPUT type=
"radio" name=�jk� value="pria">Pria

<INPUT type=
"radio" name="jk" value="wanita">Wanita<br>

Tingkat Pendidikan :

<SELECT name=
"tp">

<OPTION value=
"SD">Sekolah Dasar</OPTION>

<OPTION value=
"SMP">Sekolah Menengah Pertama</OPTION>

<OPTION value=
"SMA">Sekolah Menengah Atas</OPTION>

<OPTION value=
"pt">Perguruan Tinggi</OPTION>

</SELECT> Hobby :

<INPUT type=
"checkbox" name="hobby" value="Olah raga">Olah Raga

<INPUT type=
"checkbox" name="hobby" value="Makan">Makan

<INPUT type=
"checkbox" name="hobby" value="Membaca">Membaca<br>

Komentar :<TEXTAREA name=
"komentar"></TEXTAREA><br>

<INPUT type=
"submit" name="aksi" value="kirim">

<INPUT type=
"reset" name="aksi" value="reset">

</FORM>

</BODY></HTML>


Dibawah ini hasil dari latihan di atas

Nama:
Password;
Jenis kelamin:Pria Wanita
Tingkat Pendidikan : Hobby : Olah Raga Makan Membaca
Komentar :


Cara membuat "FORM"

Tao g sih lo... yan di maksud dengan "FORM" .......??????????

Form indentik dengan Formulir, form sangat dibutuhkan pada saat kita mengijinkan atau menginginkan adanya nilai/ data yang dipilih atau dimasukkan oleh pengguna, seperti komentar tamu ke suatu situs web / blog (Guestbook) atau pilihan dari jenis suatu kelompok item tertentu.

Kapasitas dari form hanya menyediakan media entry data dan mengirimkannya ( request ) tetapi tidak untuk menerima dan mengolah. Web Scripting yang bersifat sever side akan menangani penerimaan dan pengolahan data secara lebih lanjut.

Form dalam HTML merupakan jembatan komunikasi antara client dengan server, untuk melakukan validasi pengisian elemen form dibutuhkan Javascript karena HTML tidak memiliki perintah untuk pengujian validasi dari nilai elemen form.

Tag-tag Form terletak dalam Tag BODY, yang meliputi :



<HTML>

...................dst

<BODY>

<form name=" method=
"GET|POST" action="y.asp">

...(elemen-elemen tag-tag dalam form )

</form>

</BODY>

</HMTL>


name (optional) nama untuk form yang berlaku, digunakan untuk form handing
method

GET = data dikirimkan melalui URL address

POST = data dikirimkan bersama HTTP header

action URL / File yang digunakan untuk menangkap dan mengolah nilai (data) yan dikirimkan (server side scripting)

Untuk membuat tampilan elemen objek form tersusun rapi maka dapat digunakan TABEL.

Metoda Pengiriman Data.

Dalam pengiriman data dikenal dengan dua istilah yaitu

1. Unidirectional (satu arah)

Data-data yang ada dalam form dikirimkan melalui Action ke sebuah file atau URL lain, agar dapat diterima dan diolah (verifikasi). Sedangkan untuk Form dibuat secara statis dengan HTML dengan format Form.htm . Hal ini dimaksudkan agr file atau URL action yaitu verifikasi.asp yang akan menentukan proses selanjutnya dari data-data yang diinputkan dapat melalui form tersebut.

Kelemahan dari pendekatan ini adalah semakin banyak file-file yang dibuat maka akan lebih sulit untuk melakukan pengembangan selanjutnya. Bahkan sering kita jumpai banyak terdapat file-file yang kodenya sama sehingga terjadi pemborosan Storage.

Kelebihan dari pendekatan ini adalah cocok sekali kalau membangun aplikasi menggunakan metode prototipe ataupun trial and error.

2. Bidirectional ( dua arah )

Data-data yang ada dalam form dikirimkan melalui action ke dirinya sendiri ( file yang sama ), untuk selanjutnya dapat diterima dan diolah (verifikasi). Sehingga file form tidak hanya untuk menampilkan form untuk diisikan datanya namun jua sebagai file untuk melakukan proses verifikasi terhadap data-data form tersebut saat dikirimkan dan dibuat dengan server side script ( contoh : ASP, PHP atau JSP ). Biasanya cara ini menerapkan onsep Object Oriented Programming, yaitu program dipisah menjadi beberapa bagian sesuai kepentingan prosesnya. Pemecahan dapat secara class, sub routine/ procedure atau function.

Kelemahan : adanya file yang berisi ribuan baris perintah, yang selanjutnya akan membawa kesulitan untuk proses pengembangan.

Kelebihan : Proses dan output akan jauh lebih cepat dibandingkan dengan menggunakan cara yang pertama.

A. ELEMEN OBJEK TAG-TAG FORM.

Setiap elemen objek dari tag-tag form merupakan media entry data, masing-masing elemen obejk memiliki dua hal yang penting yaitu nama elemen ( mutlak harus ada, serta pemberian nama tidak diperkenankan menggunakan spasi, tanda baca ataupun angka ) dan nilai ( value ).

Karakteristik daripada elemen objek forum adalah :

  1. INPUT. User diberikan kesempatan untuk memasukkan nilai dengan tampilan model objek form yang variatif dan juga mengirimkan ataupun mereset nilai dari form tersebut.
  2. SELECT atau DAFTAR. User diberikan kesempatan untuk memilih nilai dari daftar opsi atau pilihan yang diberikan.
  3. TEXT AREA atau Area Isian. User diberikan kesempatan untuk memasukkan nilai berupa karakter dengan kapasitas tak terbatas.
Input. Sintaks penulisan elemen objeknya adalah :

<INPUT name=
"x" type="y" value="v">

name nama untuk input yang berlaku
type typenya adalah text, password, checkbox, radio, hidden, reset, submit, button, image dan file
checked (optional) input yang secara default dipilih ( hanya untuk type checkbox dan radio )
value (optional) nilai default atau nilai awal dari input yang dipilih
size (optional) lebar/ ukuran dari input karakter yang ditampilkan ( untuk type text dan password, sedangkan untuk image digantikan dengan width dan height )
maxlenght (optional) jumlah maksimal karakter yang dapat diinputkaan ( untuk type text dan password)
acceskey merupakan shortcut ( dengan menggunakan kombinasi tombol ALT ) untuk pengisian objeknya
disabled membuat agar objek tersebut dalam keadaan tidak aktif
Type Text. Type ini digunakan untuk data isian seperti nama orang atau alamat sesorang. Bentuk objek dari type ini adalah single line yang artinya input isian akn diberikan secara horizontal ( dala satu baris ) Contoh sintaksnya :

<INPUT name=
"x" type="y" value="v">

Type SUBMIT, RESET dan IMAGE Type ini digunakan untuk membuat tombol sumbit, reset dan image. Tombol submit digunakan untuk mengirimkan data-data yang telah diberikan pada form. Sedangkan tombol reset akan mengembalikan keadaan form kembali seperti keadaan awal saat form itu dipanggila untuk pertama kalinya. Khusus untuk kedua type ini value yang digunakan sebagai caption atau nama yang tertera dari tombolnya. Adapun untuk type Image memiliki karakteristik hampir sama seperti submit, perbedaannya terletak dari bentuk objeknya yaitu berupa gambar dan value yang dikirim oleh type Image ini adalah koordinat x,y dari gambar tersebut pada saat gambar tersebut diklik. Contoh sintaksnya :

<INPUT type=
"SUBMIT" name="aksi" value="kirim"> <INPUT type="RESET" name="aksi" value="Undo"> <INPUT type="IMAGE" name="aksi">

Type PASSWORD. Penggunaan type ini akan menyebabkan setiap karakter yang diketikkan ke dalam objek ini akan disembunyikan dengan melakukan masking karakter ke * atau •. Yang sering digunakan untuk input account password atau pin code. Contoh sintaksnya :

<INPUT type=
"PASSWORD" name="Pwd" size=�10� maxlenght=�10�>

Type CHECKBOX. Type ini berguna untuk membuat kotak-kotak cek. Kotak cek adalah suatu bentuk masukkan yang memungkinkan user untuk memilih lebih dari satu pilihan. Setiap checkbox dapat memiliki nama yang berbeda atau nama yang sama (array). Karena sifat dari type ini hanya memilih sehingga user tidak dapat memasukkan nilai, maka untuk itu value dalam type ini wajib diberikan. Untuk memberikan default kotak yang dipilih maka diberikan atribut tak ternilai yaitu checked pada objeknya. Contoh sintaksnya :

<INPUT type=
"CHECKBOX" name="binatang" value="kucing">Kucing <INPUT type="CHECKBOX" name="buah" value="Jeruk">Jeruk

Type RADIO Type ini digunakan mirip dengan checkbox hanya saja Radio hanya dapat dipilih satu kali (bisa diclick tetapi tidak bisa unclick). Jika ada lebih dari satu objek dengan type ini diberikan nama yang sama, dengan vaue yang berbeda maka kumpulan objek ini akan memiliki sifat multiple choice. Contoh sintaksnya :

<INPUT type=
"RADIO" name="Sex" value="P" checked>Pria <INPUT type="RADIO" name="Sex" value="W">Wanita

Type FILE. Bila data yang diberikan berupa upload data dokumen atau file seperti gambar atau audio, maka objek input yang digunakan harus bertypekan FILE. Tampilan objek ini akan menyertakan sebuah tombol browse untuk dapat digunakan dalam pencarian data dokumen atau file yang akan dikirimkan atau diupload. Contoh sintaksnya :

<INPUT type=
"FILE" name="upload">

Type BUTTON Selain tombol yang bertypekan SUBMIT atau RESET, kita juga dapat membuat tombol sendiri yang memiliki fungsi yang dapat kita buat sendiri. Caranya adalah dengan menggunakan type BUTTON, karena tombol yang dibuat dengan type ini dapat memiliki fungsi eksklusif. Penambahan script untuk fungsi tersebut melibatkan Javascript atau VBscript dan diletakkan dalam atribut event seperti onclick, onchange, onmouseover dan sebagainya. Contoh sintaksnya :

<INPUT type=
"BUTTON" name="aksi" value="TEST" onclick="fungsiJS()">

Type HIDDEN Objek dengan type ini tidak dapat dilihat tampilannya secara langsung dalam web browser. Objek dengan type ini dapat digunakan untuk bertukar nilai sementara antar variabel dalam server side programming. Nilai dalam objek ini bersifat statis artinya kita tidak dapat menggantinya secara langsung. Contoh sintaksnya :

<INPUT type=
"HIDDEN" name="kunci" value="rahasia">

B. SELECT (Daftar).

Select digunakan untuk pemilihan terhadap sebuah daftar, disajikan secara menu (combo box, spinner dan menu list ). Tag yang dipakai untuk pendifinisian daftar pilihan adalah Tag <SELECT>. Untuk daftar pilihan atau opsi didefinisikan dengan tag <OPTION> dan berada dalam tag <SELECT>.

Sintaks selengkapnya dalah sebagai berikut :

<select name=
"X" size="Y">

<option selected value=
"value1">menu text1</option>

<option value=
"value2">menu text2</option>

</select>

name nama untuk select yang berlaku
size

tinggi/bentuk tampilan menu select

1 (default) combo box

2 spinner

>2 menu list

selected option yang secara default dipilih
value nilai yang dikirimkan dari option yang dipilih
menu text-n text/label yang ditampilkan untuk tiap option

C. TEXT AREA

Digunakan untuk pengisian teks/ karakter yang panjang seperti komentar dan email. Bila kita menggunakannya maka sebaiknya metode pengiriman yang digunakan nantinya adalah POST agar data yang dikirimkan idak terpotong.

Sintaksnya: <textarea name="x" rows="y" cols=�z�>default text</textarea>

name nama untuk textarea yang berlaku
rows banyaknya baris karakter yang ditampilkan untuk textarea
cols banyaknya kolom karakter yang ditampilkan untuk textarea
default text (optional) default text yang diberikan saat ditampilkan pertama kalinya, terletak diantara

Contoh Latihan.

<HTML><BODY>

<FORM method=
"get" action="proses.asp">

Nama:<INPUT type=
"text" name="nama"><br>

Password;<INPUT type=
"password" name="pass"><br>

Jenis kelamin:<INPUT type=
"radio" name=�jk� value="pria">Pria

<INPUT type=
"radio" name="jk" value="wanita">Wanita<br>

Tingkat Pendidikan :

<SELECT name=
"tp">

<OPTION value=
"SD">Sekolah Dasar</OPTION>

<OPTION value=
"SMP">Sekolah Menengah Pertama</OPTION>

<OPTION value=
"SMA">Sekolah Menengah Atas</OPTION>

<OPTION value=
"pt">Perguruan Tinggi</OPTION>

</SELECT> Hobby :

<INPUT type=
"checkbox" name="hobby" value="Olah raga">Olah Raga

<INPUT type=
"checkbox" name="hobby" value="Makan">Makan

<INPUT type=
"checkbox" name="hobby" value="Membaca">Membaca<br>

Komentar :<TEXTAREA name=
"komentar"></TEXTAREA><br>

<INPUT type=
"submit" name="aksi" value="kirim">

<INPUT type=
"reset" name="aksi" value="reset">

</FORM>

</BODY></HTML>


Dibawah ini hasil dari latihan di atas

Nama:
Password;
Jenis kelamin:Pria Wanita
Tingkat Pendidikan : Hobby : Olah Raga Makan Membaca
Komentar :


Rabu, 29 Oktober 2008

Membuat afek "Getar" pada window Friendster

Ma'af..... Tutorial yang ini sudah Saya tutup.......

Karena tidak bisa jalan jika akses internet tidak cepat....

Tapi kalu mau bikin efek getar yang terbaru silahkan KLIK DISINI



Mau bertanya silahkan KLIK DISINI




membuat welcome alert di FS

nia aq kasih script untuk FS.
walaupun udah "KUNO"........
tapi masih banyak yang g ngerti.....

Oke kita mulai membuatnya........

1. kamu LOGIN dlu di FS
2. Edit profil...........
3. Masukan Kode di bawah ini ke dalam kotak Tentang Saya (About Me)

<SCRIPT language='JavaScript'>alert(""+parent.pageViewerFName+" kamu udh add FS aq blom.........????");</SCRIPT>

Keterangan :
- Tulisan yang berwarna Biru( kamu udh add FS aq blom.........????) adalah kata2 yg akan muncul.
- Tyus yang warna Merah ( "+parent.pageViewerFName+" ) tuh buat munculin nama yang mesuk ke FS kamu.....
- Ingat tanda petik pada huruf Merah
( "+parent.pageViewerFName+" ) harus di ikutkan.

tyus simpan tuh hsil Editan kamu............
dan hasilnya............. wue'e-e akan bikin orng geleng2 kepala (klo kamu buat sebanyak mungkin) kayak ini contohnya Klik disini / Disini




My album..........

Yang mao ngeliat tampang guwe yang TIDAK JELEK dan TIDAK TAMPAN ini.....
silahkan di nikmati...... (wue'e-e......... Dinikmati......???)

Lagi utak-atik Komputer yang Rewel




Mao liat foto-foto yang laen........?????
Disini Tempatnya.....



My album..........

Yang mao ngeliat tampang guwe yang TIDAK JELEK dan TIDAK TAMPAN ini.....
silahkan di nikmati...... (wue'e-e......... Dinikmati......???)

Lagi utak-atik Komputer yang Rewel




Mao liat foto-foto yang laen........?????
Disini Tempatnya.....



Selasa, 28 Oktober 2008

Kode-kode warna

Di dalam dunia web/blog, warna itu sangat penting dan sangat berpengaruh terhadap penampilan web/blog. Warna-warna biasanya digunakan untuk background, text, links, table dll. Kalo kombinasi warna pada web/blog kita tidak sesuai, atau tidak enak dipandang mata mata, maka hal itu akan membuat pengungjung web/blog kita menjadi kurang nyaman, dan kemungkinan akan malas untuk mengunjungi blog kita lagi. Tapi karena untuk untuk membuat warna-warna ini harus menggunakan kode-kode warna, maka bagi yang tidak begitu mahir tentang html akan kesulitan untuk mendapatkan kode-kode warna ini.

Nha oleh karena itulah dibawah ini telah aku buat Chart HTML Kode Warna bagi yang tidak tahu atau bagi yg pingin tahu kode-kode warna. Cara penggunaannya cukup mudah, km tinggal klik warna yang kamu pilih, maka kode warnanya akan tampil di kotak "kode warna:". Ok silahkan dicoba. mau liat kodenya Klik Disini.....