Selasa, 19 Maret 2013

Memberikan Kondisi untuk Textfield yang Kosong

Di tutorial kali ini saya akan menjelaskan bagaimana memberikan kondisi untuk textfield (pengurangan, perkalian, dan pembagian) yang kosong. Nah, Jika textfield kosong, terdapat keterangan bahwa textfield tidak boleh kosong. Langsung saja kita mulai, software yang akan digunakan itu terserah bisa menggunakan notepad, notepad++ dan berbagai macam editor lainnya. Dan sekali lagi tidak disarankan untuk menggunakan Dreamwever karena kata Dosen saya Software ini sangat-sangat tidak membuat kita pintar dan maju...hehehe, Disini saya menggunakan editor notepad++ v6.3 , oke langsung saja yaah.

Pertama create sebuah document baru dengan nama pengurangan.php untuk textfield pengurangan, perkalian.php untuk textfield perkalian, dan pembagian.php untuk yang pembagian. setelah itu copykan code berikut di editor anda,

Textfield Pengurangan:

<!DOCTYPE html>
<html>
<head><title>Web Pengurangan</title></head>
<body>
<h1>PENGURANGAN</h1>
<form method="post">
<table>
<tr>
<td align="center">Angka 1</td>
<td>-</td>
<td align="center">Angka 2</td>
</tr>
<tr>
<td><input type="number" name="angka1" value="<?php echo $_POST['angka1'];?>" required></td>
<td>-</td>
<td><input type="number" name="angka2" value="<?php echo $_POST['angka2'];?>" required></td>
<td>=</td>
<?php
if(isset($_POST["kurangi"])){
$hasil = $_POST["angka1"] - $_POST["angka2"];
}
?>
<td><input type="text" name="hasil" disabled value="<?=$hasil;?>"></td>
<td><input type="submit" name="kurangi" value="Hitung"></td>
</tr>
</table>
</form>
</body>
</html>

Textfield Perkalian:

<!DOCTYPE html>
<html>
<head><title>Web Perkalian</title></head>
<body>
<h1>PERKALIAN</h1>
<form method="post">
<table>
<tr>
<td align="center">Angka 1</td>
<td>*</td>
<td align="center">Angka 2</td>
</tr>
<tr>
<td><input type="number" name="angka1" value="<?php echo $_POST['angka1'];?>" required></td>
<td>*</td>
<td><input type="number" name="angka2" value="<?php echo $_POST['angka2'];?>" required></td>
<td>=</td>
<?php
if(isset($_POST["kalikan"])){
$hasil = $_POST["angka1"] * $_POST["angka2"];
}
?>
<td><input type="text" name="hasil" disabled value="<?=$hasil;?>"></td>
<td><input type="submit" name="kalikan" value="Hitung"></td>
</tr>
</table>
</form>
</body>
</html>

Textfield Pembagian:

<!DOCTYPE html>
<html>
<head><title>Web Pembagian</title></head>
<body>
<h1>PEMBAGIAN</h1>
<form method="post">
<table>
<tr>
<td align="center">Angka 1</td>
<td>/</td>
<td align="center">Angka 2</td>
</tr>
<tr>
<td><input type="number" name="angka1" value="<?php echo $_POST['angka1'];?>" required></td>
<td>/</td>
<td><input type="number" name="angka2" value="<?php echo $_POST['angka2'];?>" required></td>
<td>=</td>
<?php
if(isset($_POST["bagikan"])){
$hasil = $_POST["angka1"] / $_POST["angka2"];
}
?>
<td><input type="text" name="hasil" disabled value="<?=$hasil;?>"></td>
<td><input type="submit" name="bagikan" value="Hitung"></td>
</tr>
</table>
</form>
</body>
</html>

Setalah tercopy, buka file tersebut kemudian akan tampil seperti contoh gambar dibawah ini.



Sekian dulu Tutorial dari saya, mohon maaf jika terdapat buanyaaak skali kekurangan nya. Selamat mencoba! Goodluck! ;)




Aditya Achmad Prasetya - 1110651046

Minggu, 10 Maret 2013

Cara Membuat Form Dengan HTML 5

Ass.Wr.Wb

sebelum nya Say Hello dulu buat para blogger yang sudah mau meluangkan sedikit waktu nya untuk membuka blog Saya yang sangat sederhana ini. mungkin gak perlu banyak basa-basi, to the point aja ya...hehe


sesuai dengan judul nya, di Sini saya hanya akan menulis cara pembuatan Form sederhana pada HTML 5, tanpa menggunakan database, hanya form saja. kebetulan yang Saya post kali ini adalah menjadi Tugas Kuliah juga jadi selain niat nya untuk memenuhi permintaan Dosen sekalian bisa sambil berbagi juga hehehe (alibi). Untuk yang sudah pernah membuat form login dengan HTML 5, jika ada kesalahan dalam penulisan ini tolong segera dikoreksi.


Form Biodata



Nama :                        


Tempat/Tanggal lahir : 


Jenis Kelamin :            


Alamat :                       

Kecamatan:                 


No Telephone :           


Alamat Web :              


E-mail :                       





Bagaimana kita memulai nya untuk membuat seperti di Atas?


1. Siapkan lembar kerja baru pada aplikasi Notepad atau Notepad++, tidak disarankan menggunakan Dreamwever karena kata Dosen saya itu tidak menjadikan kita pintar dan berkembang :D


2.  Langkah berikut nya adalah ketik source code seperti ini untuk menampilkan teks "Form Biodata",

<!DOCTYPE html>
<html>
<head>
Form Biodata
</head>
</html>

3. Untuk membuat Form, code pertama yaitu,

<form action="" method="get"> dan di tutup dengan </form> sama seperti HTML versi sebelumnya

4. Selanjutnya untuk membuat Form Nama kita ketikkan,

Nama                   : <input type="text"   name="nama_anda" size="25" value="" />

input type=”text”, maksudnya di sini adalah input yang akan dilakukan untuk mengisi form nama yang berupa teks, kalau berupa nomor inputannya adalah "number" tapi untuk input type "number" hanya support pada browser Google Chrome saja, pada Mozilla seperti nya belum mendukung setau saya,

name=”nama_anda”, ini adalah attribut dari nama,
size=”25”, untuk menambah panjang isian pada form.


5. Form Tempat/Tanggal Lahir,

Tempat/Tanggal lahir   : <input type="date"   name="Tempat/Tanggal_Lahir" />

input type=”date”, yaitu akan menampilkan pilihan tanggal, bulan dan tahun.


6. Form Jenis Kelamin

Jenis Kelamin          : <input type="text"   name="Jenis Kelamin" size="25" />

7. Form Alamat

Alamat         : <input type="text"   name="Alamat" size="25" />

untuk Form Alamat sama seperti Form Nama di atas


8. Form Kecamatan

<select name="Kecamatan">
<option values="1">Sumberbaru</option>
<option values="2">Tanggul</option>
<option values="3">gambirono</option>
<option values="4">Bangsalsari</option> 
<option values="5">Rambipuji</option>
</select> 


select name=”” dan option value=”” adalah elemen yang berbeda, “select name=”” itu adalah attributnya sedangkan “option value=”” adalah pilihan jika kita klik combobox kecamatan maka akan tampil pilihan kecamatan seperti Sumberbaru, Tanggul dll.


9. Form Nomor Telephone

No Telephone           : <input type="tel" name="No_Telp" size="25" />  

input type=”tel”, yaitu input untuk no telp, biasanya inputan berupa angka tapi saya coba huruf juga bisa. aneh memang! :D


10. Form Alamat Web

Alamat Web             : <input type="url"   name="Alamat_Web" size="25" />

input type : url = inputan berupa link/alamat web. apabila agan memasukkannya asal-asalan maka ketika disubmit akan mendapat peringatan bahwa harus memasukkan url yang benar seperti http://www.facebook.com/  



 11. Form E-Mail

 E-mail                 : <input type="email"  name="Email" size="25" />

input type =”email”, data yang agan inputkan berupa email, jika agan menginput Selain E-Mail maka akan mendapat peringatan bahwa yang harus diinputkan adalah email yang benar seperti xxxxxyyyyy@gmail.com

12. Tombol Action: Submit & Reset
<input type="submit" />           <input type="reset" />  

13. Langkah Terakhir
Simpan source code di atas dengan nama form.html. Setelah disimpan, kemudian jalankan file tersebut menggunakan aplikasi browser, misal: Mozilla Firefox atau sejenisnya. Setelah file form.html dipanggil, kemudian akan tampil form seperti di atas! Selamat ber-eksperimen kawan!

Nama    : Aditya Achmad. P
NIM       : 1110651046
Jurusan : T. Informatika (di salah satu Universitas terkemuka di Jember)  :D