Membuat Form Twit sederhana

Kali ini kita akan membuat form tweet seperti yang ada pada situs http://twitter.com dimana form tersebut memiliki input berupa text dan tombol submit. Inputan text pada form tidak boleh melebihi 160 karakter jika carakter masih 0 atau lebih dari 160 maka tombol submit tidak akan bisa di tekan atau di click. Dan ada angka yang menyatakan sisa karakter yang tersisa yang bisa digunakan apabila sisa karakter tinggal 10 lagi maka tulisan angka tersebut berubah menjadi merah. Nah itu lah sekilah gambaran umum aplikasi yang akan kita buat :D.

Dalam tutorial ini diharapkan kita sudah familiar dengan HTML, CSS, Javascript dan JQuery

Mari kita buat,

Pertama tama kita buat file dengan nama form_twit.html. setelah itu mari kita isikan code seperti dibawah ini :

<html>
	<head>
		<title>Form Twit</title>
	</head>
	<body>
		Mari Twitteran, Twit disini : <br>
		<textarea id="post"></textarea>
		<div id="notif"></div>
		<button id="submit" disabled="true">Tweet</button>
	</body>
</html>

Setelah itu save file tersebut dan run di web browser anda, maka akan tampil seperti ini :

awal

Setelah itu mari kita tambah kan sedikit style CSS biar terlihat lebar dan panjang textarea untuk input text nya. Tambah kan code dibawah dalam tag <head></head>

<style>
textarea{
height:150px;
width:250px;
}
</style>

 

Maka tampilan nya akan seperti gambar berikut :

2

Oke tampilan sudah cukup untuk kali ini. Sekarang kita menambahkan code javascript untuk memenuhi kriteria dari aplikasi yang akan kita buat. Disini kita menggunakan JQuery untuk memudahkan pekerjaan kita. Jika belum punya file JQuerynya silahkan download di http://jquery.com/download/ .

Jika kita sudah mempunyai file tersebut maka simpanlah file tersebut dalam direktori yang sama dengan file form_twit.html yang tadi kita bikin.

Tambahkan code berikut didalam tag <head></head>

<script type="text/javascript" src="jquery-1.9.1.js"></script>

 

Sekarang kita sisipkan code untuk menjalankan kriteria yang sudah ditetapkan. Simpan code dibawah ini dalam tag <head></head>

<script type="text/javascript">
			$(document).ready(function(){
				var twit="";
				var max=160;
				var ini=max.toString();
				$("#notif").html('<p>'+ini+'</p>');
				$("#post").keyup(function(){
					twit = $("#post").val();
					if(max-twit.length>=0){
						ini = max-twit.length.toString();
						$("#notif").html('<p>'+ini+'</p>');
					}else{
						ini = max-twit.length.toString();
						$("#notif").html('<p>twit kelebihan bro '+ini+'</p>' );
						//alert("sda");
					}
					if(twit.length < 10 || twit.length >160){
						$("#submit").prop('disabled',true);
					}else{
						$("#submit").prop('disabled',false);
					}
					if(max-twit.length<=10){
						$("#notif").css('color','red');
					}else{

						$("#notif").css('color','black');
					}

				});
				$("#submit").click(function(){
					alert("ada");
				});

			});
		</script>

Maka file utuh yang kita buat akan seperti berikut :

<html>
	<head>
		<title>Form Twit</title>
		<script type="text/javascript" src="jquery-1.9.1.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				var twit="";
				var max=160;
				var ini=max.toString();
				$("#notif").html('<p>'+ini+'</p>');
				$("#post").keyup(function(){
					twit = $("#post").val();
					if(max-twit.length>=0){
						ini = max-twit.length.toString();
						$("#notif").html('<p>'+ini+'</p>');
					}else{
						ini = max-twit.length.toString();
						$("#notif").html('<p>twit kelebihan bro '+ini+'</p>' );
						//alert("sda");
					}
					if(twit.length < 10 || twit.length >160){
						$("#submit").prop('disabled',true);
					}else{
						$("#submit").prop('disabled',false);
					}
					if(max-twit.length<=10){
						$("#notif").css('color','red');
					}else{

						$("#notif").css('color','black');
					}

				});
				$("#submit").click(function(){
					alert("ada");
				});

			});
		</script>
		<style>
			textarea{
				height:150px;
				width:250px;
			}
		</style>
	</head>
	<body>
		Mari Twitteran, Twit disini : <br>
		<textarea id="post"></textarea>
		<div id="notif"></div>
		<button id="submit" disabled="true">Tweet</button>
	</body>
</html>

Dan hasil yang sudah kita buat akan seperti gambar di bawah ini:

Form Twit

Iklan

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s