Jumat, 31 Oktober 2008
Bikin Efek bertaburan hati (heart) di FS / Blog
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
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
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"
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 :
- INPUT. User diberikan kesempatan untuk memasukkan nilai dengan tampilan model objek form yang variatif dan juga mengirimkan ataupun mereset nilai dari form tersebut.
- SELECT atau DAFTAR. User diberikan kesempatan untuk memilih nilai dari daftar opsi atau pilihan yang diberikan.
- TEXT AREA atau Area Isian. User diberikan kesempatan untuk memasukkan nilai berupa karakter dengan kapasitas tak terbatas.
<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 |
<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
Semoga sukses.....................................................
Cara membuat "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 :
- INPUT. User diberikan kesempatan untuk memasukkan nilai dengan tampilan model objek form yang variatif dan juga mengirimkan ataupun mereset nilai dari form tersebut.
- SELECT atau DAFTAR. User diberikan kesempatan untuk memilih nilai dari daftar opsi atau pilihan yang diberikan.
- TEXT AREA atau Area Isian. User diberikan kesempatan untuk memasukkan nilai berupa karakter dengan kapasitas tak terbatas.
<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 |
<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
Semoga sukses.....................................................
Rabu, 29 Oktober 2008
Membuat afek "Getar" pada window Friendster
membuat welcome alert di 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..........
silahkan di nikmati...... (wue'e-e......... Dinikmati......???)
Lagi utak-atik Komputer yang Rewel
Mao liat foto-foto yang laen........?????
Disini Tempatnya.....
My album..........
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
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.....