Loading

25 Februari 2010

Script untuk mengubah ukuran ( resize ) gambar menggunakan javascript

Di sini saya akan mencoba membahas bagaimana cara mengubah ukuran gambar menggunakan javascript. Karena script yang saya gunakan adalah javascript maka proses dari mengubah ukuran gambar ini tidak memerlukan local server, seperti php.

ukuran Gambar normal

Ukuran gambar di perkecil
Ukuran gambar di perbesar




Scriptnya seperti ni:




<html>

<head>

<title>mengubah ukuran gambar menggunakan javascript</title>

<script type="text/javascript">

var panjang;

var lebar;

var x = 0;

function bacaUkuran()

{

panjang = document.getElementById("gambar").width;

lebar = document.getElementById("gambar").height;

}


function tambahSize()

{

x++;

document.getElementById("gambar").width = Math.pow(2, x) * panjang;

document.getElementById("gambar").height = Math.pow(2, x) * lebar;

}


function kurangiSize()

{

x--;

document.getElementById("gambar").width = Math.pow(2, x) * panjang;

document.getElementById("gambar").height = Math.pow(2, x) * lebar;

}


function resetSize()

{

x = 0;

document.getElementById("gambar").width = Math.pow(2, x) * panjang;

document.getElementById("gambar").height = Math.pow(2, x) * lebar;

}

</script>

</head>

<body onload="bacaUkuran()">

<div align="center">

<h1>contoh mengubah ukuran gambar dengan javascript</h1>

<input type="button" value="perkecil" onclick="kurangiSize()" />

<input type="button" value="ukuran semula" onclick="resetSize()" />

<input type="button" value="perbesar" onclick="tambahSize()" />

<br/><br/>

<img id="gambar" src="Sunset.jpg"/>

</div>

</body>

</html>







Keterangan dari javascript di atas adalah :


var panjang;


var lebar;


var x = 0;


function bacaUkuran()


{


panjang = document.getElementById("gambar").width;


lebar = document.getElementById("gambar").height;


}




Buat 3 button/tombol, yang masing-masing namanya  perbesar, perkecil dan ukuran semula. Tombol “perbesar” di gunakan untuk memperbesar ukuran gambar 2 kali dari ukuran gambar seblumnya. Tombol “perkecil” di gunakan untuk untuk memperkecil ½ kali dari ukuran gambar sebelumnya. Dan tombol “ ukuran semulah digunakan untuk mengubah gambar ke ukuran aslinya.


Perhatikan Javascript di atas, bahwa variabel panjang dan lebar sengaja dibuat sebagai variabel global karena nantinya akan digunakan dalam proses perhitungan untuk setiap proses (perbesar ukuran dan perkecil ukuran). Apabila kedua variabel tersebut dibuat lokal dalam function bacaUkuran() maka nilai-nilainya hanya bisa dikenal dalam function tersebut saja.


Misalkan mula-mula panjang imagenya adalah x. Setelah diperbesar 2 kali maka panjang imagenya adalah 2x. Bila diperbesar lagi maka panjang imagenya menjadi 4x, dst. Secara umum panjang image setelah diperbesar n kali adalah 2nx. Bila n = 0, maka akan diperoleh panjang image mula-mula. Hal yang sama juga berlaku untuk lebar imagenya. Nah… ide ini bisa kita terapkan dalam bentuk script.


Perintah Math.pow(2, x) digunakan untuk menghitung 2x pada Javascript.


Perintah document.getElementById("gambar").width = Math.pow(2, x) * panjang; digunakan untuk mengubah panjang image yang tampil dalam browser menjadi 2x * panjang aslinya.


Sedangkan untuk memperkecil ukuran image, kita cukup melakukan decrement pada variabel x nya saja (x--). Misal mula-mula panjang image adalah x (20x) pixel, lalu diperbesar menjadi 2x (20+1x = 21x), lalu diperbesar lagi menjadi 4x (21+1x = 22x). Selanjutnya diperkecil, maka panjangnya menjadi kembali ke 2x (22-1x = 21x). Bila diperkecil lagi menjadi x (21-1x = 20x), dan bila diperkecil lagi menjadi 1/2 x (20 – 1x = 2-1x) dst.


Yang terakhir, untuk tombol ketiga (=) dimana bila tombol ini ukuran image akan direset menjadi ukuran aslinya. Idenya adalah dengan memberi nilai x = 0, untuk mendapatkan panjang dan lebar image aslinya. Bila nilai x = 0, dan panjang image aslinya x, maka 20x = x (sama seperti ukuran aslinya), demikian pula untuk lebarnya


[download script]

dasar-dasar HTML

Sebenarnya, dokumen HTML hanyalah sebuah dokumen teks biasa dan sebut sebagai Markup Language yakni bahasa yang mendukung kode penanda yang si sebut HTML yang di gunakan untuk mengatur format tampilan suatu dokumen. Kode ini di selipkan ke dalam teks HTML, berfungsi untuk mengontrol format dan layout dalam dokumen, menunjuk ke suatu hyperlink, dan lain-lain. Tag HTML ini menggunakan simbol khusus dan untuk menandakan suatu kode instruksi, simbol ini adalah kurung siku < dan >.

Hal yang harus di perhatikan adalah kode tag HTML ini taidak bersifat case-senditif artinya <body> sama dengan <BODY> ataupun <bOdY>. Pada umumnya banyak dari pemakai HTML menggunakan hufur besar dalam penulisan tag HTML sehingga kode-kode ini terlihat jelas, sehingga mempermudah proses pembacaan. Semua bagian HTML terdiri dari dua bagian logikal yaitu :

  • Bagian kepala (head). Secara umum, bagian kepala terdiri dari dokumen HTML berisi informasi umum mengenai dokumen.
  • Dan bagian badan (body) yaitu berisi dokumen yang sebenarnya.

Setiap dokumen HTML harus dimulai dan di akhiri dengan tag <HTML> yang mendeklarasikan suatu dokumen sebagai dokumen HTML. Sruktur dasarnya adalah sebagai berikut:



<html>
<head>
  <title>Judul</title>
 </head>
<body>
ISI WEB
</body>
</html>



Keterangan:

<html> ... </html>

Mendefinisika bahwa text yang berada di antara kedua tag tersebut adalah file HTML.

<head> ... </head>

Sebagai informasi tag header. Di dalam tag ini kita bisa meletakan tag-tag TITLE, BASE, ISIINSEX, LINK, SCRIP, STYLE dan META

<title> ...</title>

Sebagai titel atau judul halaman/form, digunakan sebagai identifikasi dokumen. Dokumen yang terletak dalam tag ini akan muncul pada bagian atas browser anda (pada title bar).

<body> ...</body>

Mendefinisikan teks beserta formatnya yang hendak di tampilkan sebagi isi halam web. Di dalam tag ini bisa di letakan berbagai page atribut seperti bgcolor, baground, text, dan lain-lain.
[download ebook]

Dasar-dasar javascript


Javascript adalah bahasa yang berbentuk kumpulan script yang pada fungsinya berjalan pada suatu dokumen HTML, sepanjang sejarah internet bahasa ini adalah bahasa script pertama untuk web programing. Bahasa ini adalah bahasa web programing untuk memberikan kemampuan tambahan terhadap bahasa HTML dengan mengijinkan pengeksekusian perintah-perintah di sisi user.

Javascript bergantung kepada browser(navigator) yang memanggil halaman web yang berisi script-script dari javascript dan tentusaja terselip di dalam dokumen HTML. Javascript juga tidak memerlukan kompilator atau penterjemah khusus untuk menjalankannya(pada kenyataannya kompilator javascript sendiri sudah termasuk di dalam browser tersebut). Lain halnya dengan bahasa “java” (dengan nama javascript selalu di banding-bansingkan) yang memerlukan kompilator khusus untuk menterjemahkan di sisi user/client.

Javascript adalah bahasa web programing yang berbasis objek, artinya saat menuliskan javascript, anda menggunakan objek-objek bawaan atau objek-objek yang anda ciptakan sendiri. Javascript adalah bahasa yang “case-sensitive” artinya membedakan penamaan variabel dan fungsi yang menggunakan huruf besar dan hurus kecil, contoh variabel dan nama fungsi dengan nama TEST berbeda dengan variabel dengan nama test. Dan yang terakhir seperti bahasa java ataupun C, setiap intruksi di akhiri dengan karakter titi koma (;).

Sruktur dasar javasript

Program javascript di tuliskan pada file HTML (.html atau .htm) dengan menggunakan tag <SCRIPT>. Derati anda tidak perlu menulisakan program javaScript pada file terpisah dengan file HTML (meskipun anda bisa melakukanya).


Berikut adalah sintak umum penulisan javascript :

<script language=”JavaScript”>

//perintah javascript

</script>



Atribut language=”javascript” memberitahukan browser bahwa script yang anda tulis adalah javascript.

[Download ebook]

23 Februari 2010

Install Windows XP lewat USB Flash Disk

Nemu 2 program bagus nih (semuanya freeware) untuk menginstall Windows XP lewat USB Flash Disk, Filenya kecil banget kok & bisa cari di Google, tapi kalo teman2 malas nge-googling, ini Ane kasih linknya :
http://www.ziddu.com/download/7200730/usb_prep8_dotexe.org.zip.html untuk copy WIndows XP ke USB Flash Disk [Link checked @ 6 Okt 2009]
PeToUSB_3.0.0.7.zip untuk menjadikan USB Flash Disk menjadi Bootable [Link checked @ 6 Okt 2009]
Langkah-langkah Pembuatan:
1. Ekstrak kedua file sesuai keinginan Anda dengan menggunakan WinZip atau WinRar (Lebih baik buat Folder baru), sebaiknya File PeToUSB_3.0.0.7.zip dijadikan satu folder bersama File usb_prep8.zip atau sebaliknya.
2. Tancapkan USB flash disk ke salah satu port USB. Ingat-ingat posisi drive-nya. Apakah F:, G:, H:, dan sebagainya.
3. Masukkan CD instalasi Windows XP ke optical drive. Jika komputer menjalankan proses instalasi secara otomatis, batalkan saja dan tutup semua aplikasi yang tengah berjalan.
4. Selanjutnya, buka folder di mana Anda mengekstrak aplikasi modul pembuat instalasi.
5. Jalankan file bernama “usb_prep8.bat” maka di layar monitor akan tampak jendela Command Prompt berisi macam-macam perintah. Jika sudah muncul tulisan “Press any key to continue,” tekan sembarang tombol untuk konfirmasi.
6. Di layar akan muncul jendela PEtoUSB yang meminta Anda memformat USB flash disk Anda. Tak perlu mengubah setting apa pun, langsung klik Start untuk mulai proses format. Jawab konfirmasi sesuai kebutuhan Anda.
7. Jika sudah selesai, tutup jendela PEtoUSB (jangan menutup jendela Command Prompt yang tadi terbuka ketika Anda menjalankan usb_prep8.bat), maka di layar akan muncul opsi-opsi dari 0 hingga 5.
8. Gunakan opsi 1 untuk memilih sumber file instalasi yang nantinya akan disalin ke flash disk. Disini, tentukan di drive mana Anda menyimpan instalasi Windows XP. Pilih saja optical drive di mana sudah ada CD Windows XP di dalamnya, atau pilih folder pilihan Anda jika Anda telah menyalin file instalasi Windows XP ke folder tertentu.
9. Pilih opsi 3 untuk menentukan di mana Anda mencolok flash disk. Kalau flash disk Anda berada di drive F:, maka ketik F dan tekan ENTER. Jika drive G: maka ketik G dan tekan ENTER, begitu seterusnya berlaku untuk drive lain.
10. Selanjutnya pilih opsi 4 untuk mulai proses pembuatan modul instalasi yang nantinya akan disalin ke flash disk secara otomatis. Jawab apa pun konfirmasi yang muncul dengan Y atau YES atau OK atau bentuk persetujuan lain.
Selesai! Kini flash disk Anda telah siap digunakan untuk instalasi Windows XP! Silahkan melakukan setting pada BIOS Anda, dan pilih Removeable Disk (atau apa pun nama lainnya) sebagai media pertama yang dijalankan saat booting.
Untuk yang menggunakan sistem RAID, coba pakai Nlite,


sumber : http://dotexe.unnes.ac.id/2009/01/19/install-windows-xp-lewat-usb-flash-disk

Javascript For Email Validation (Javascript Untuk Validasi Email)








When validating an e-mail address, you are looking for the typical format found in such addresses. There may be some domain names that are more than three characters, but it isn't typical. Also, just because the user types what looks like a valid e-mail address, that does not mean that it is; for example, the e-mail address santa@northpole.org uses a valid syntax, but that fact does not prove that santa is a real user.
E-mail addresses usually have the following format:


  • An @ sign between the username and address (lequig@aol.com)


  • At least one dot between the address and domain name ( .com, .mil, .edu, .se)


  • At least six characters (a@b.se)[3]
    [3] As of this writing, domain names have at least two characters.
Examples of valid e-mail addresses:
username@mailserver.com
username@mailserver.info
username@mailserver.org.se
username.moretext@mailserver.mil
username@mailserver.co.uk
user-name.moretext.sometext@mailserver.se
To break down the regular expression
/^(([\-\w]+)\.?)+@(([\-\w]+)\.?)+\.[a-zA-Z]{2,4}$/;
use the following steps:
Step 1:
^
Go to the beginning of the line.
Step 2:
([\-\w]+)\.?
The user name consists of one or more dashes or word characters grouped by parentheses, followed by one (or not one) literal period. Because the dot is outside the parentheses there will be either one or zero dots for the list of word characters, not two or three dots in a row.
Step 3:
(([\-\w]+)\.?)+
The user name may consist of more than one set of word characters separated by a single dots, as in Joe.Shmoe.somebody.
Step 4:
@
A literal @ symbol is required in the e-mail address.
Step 5:
([\-\w]+)\.?)+
The mail server's name is like the user's name, a group of word characters separated by a dot. Same as step 3.
Step 6:
[a-zA-Z]{2,4}
The domain name follows the mail server's name. A single dot separates the server from the domain. The domain name consists of between two and four alphabetic characters; e.g., savageman@imefdm.usmc.mil or patricia.person@sweden.sun.com.
Step 7:
$
The end of the line anchor assures that no extra characters can be added onto the end of the e-mail address.




<body>
<h2> Checking for Valid Email Address </h2>
<h2><?php echo "$user_email"; ?></h2>
<form name="formtest" action="#" method="post" onSubmit="return ok_Email(this);">
<p>
Please enter your email address: <BR>
<input type="text" size=40 name="user_email">
</p>
<p>
<input type=submit value="Send">
</p>
</form>
</body></html>


[Download Sript]

EXPLANATION


  1. A function called ok_Email is defined. It takes one parameter, a reference to the form started on line 6.


  2. The regular expression is assigned the variable regex. The regular expression reads: Start at the beginning of the string (^), look for one or more alphanumeric characters and/or a dash followed by a literal dot (or not one). The literal period is outside the parentheses, meaning that in each group of word characters, there will be only one (or not one) period; e.g., abc.xyz. The entire expression is in parentheses followed by a + sign. This means that the pattern can be repeated one or more times; e.g., abc.xyz.yaddy.yady.yady. Next comes a literal @ symbol, required in all e-mail addresses. The mail server name comes right after the @ sign. Like the user name, it is represented by one or more alphanumeric characters or a dash, followed by a literal dot (\.). Now we have Joe.Blow@aol or DanSav@stamford, etc. This pattern, like the first pattern, can be repeated one or more times. The domain name part of the address comes next; a literal dot, and at least two but not more than four alphabetic characters, [a-zA-Z]{2,4}; e.g., JoeBlow@Chico.com, danny@Stamford.edu, .se, .uk, etc. There are other varieties that could also be considered, such as john@localhost, but for most e-mail addresses, the regular expression used in this example should suffice.


  3. The regular expression test() method takes the value of the user input, user_email.value, and returns true if the pattern in the regular expression matched the user's input.


  4. The e-mail address entered is tested to be valid. A true value is returned and the form will be submitted to the server. A valid e-mail address does not mean that if mail is sent to that address it will necessarily be delivered; e.g., santa@northpole.org is syntactically valid, but there is no guarantee that santa is a real user (unless you still believe!).


  5. If an invalid e-mail address was entered, the alert box will appear with this message. The ok_Email() function will return false, and the form will not be submitted.


  6. The form named formtest starts here.


  7. This is the URL of the CGI script that will be called on the server side when the form is submitted.


  8. The onSubmit event handler is triggered when the user presses the submit button. The value assigned to the event is a function called ok_Email that will return true if the e-mail address is valid and false, if not. The form will be sent to the server only if the return value is true.