Membuat Chat Sederhana dengan Fungsi Append di Jquery

Mungkin di antara teman-teman sudah tau ya tentang jquery dan manfaat dari kita menggunakan jquery, ya benar dengan jquery website kita akan lebih interaktive, disini saya akan membuat chat sederhana dengan fungsi append di jquery, jadi nanti disini saya akan coba membuat dimana ketika kita mengetik sesuatu di inputan, hasil inputan itu akan tampil di tempat penampung hasil inputan itu, layaknya seperti chat ya, tulisan itu tampil paling bawah, ketika kita mengetik tampil lagi paling bawah, seperti itu kira-kira. oke bagaimana cara membuatnya simak terus ya teman-teman.

Oke memang saya akan membuat chat sederhana dengan fungsi append di jquery, tetapi tidak dengan teman membalas ya, jadi hanya sekedar kita tulis isi, lalu tampil di atas, tapi fungsi append ini dengan efek seperti itu bisa menimbulkan gaya seperti kita chat maka dari itu saya membuat dengan judul membuat chat sederhana dengan fungsi append di jquery, jadi kasusnya seperti ini, saya membuat chat yang sudah ada terlebih dahulu, pura-puranya sudah ada tulisan chatnya padahal itu sudah kita tanamkan, dan nanti kita akan menambahkan chat itu di bawahnya, jadi seperti chat atau komentar bukan, oke dari pada tambah panjang lebar dan malah membuat bingung, saya akan langsung mencontohkannya ya.

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.container{
			background: #1abc9c;
			width: 1200px;
			margin: auto;
			padding-top: 20px; 
			padding-bottom: 20px;
		}
		#tempatChat{
			width: 500px;
			margin: auto;
			background-color: #9b59b6;
			padding: 5px 20px;
			border: 10px solid #ecf0f1;
		}
		.orang{
			border: 2px solid cyan;
			padding: 5px;
			margin-bottom: 10px; 
			color: red;
		}
		.user{
			color: #fff;
			text-decoration:underline;
		}
		.form{
			width: 500px;
			margin: auto;
			background-color: #9b59b6;
			padding: 5px 20px;
			border: 10px solid #ecf0f1;
			margin-top: 10px; 
		}
		#spanMesage{
			color: #1abc9c;
			font-size: 20px;
		}
		h1{
			text-align: center;
		}
	</style>
</head>
<body>
	<div class="container">
		<h1>Membuat Chat Sederhana dengan Fungsi Append di Jquery</h1>
		<div id="tempatChat">
			<div class="orang"> saya <span class="user">Pura-puranya sudah ada yang Chat yang pertama</span></div>
			<div class="orang"> saya <span class="user">Pura-puranya sudah ada yang Chat yang kedua</span></div>
			<div class="orang"> saya <span class="user">Pura-puranya sudah ada yang Chat yang ketiga</span></div>
		</div>
		<div class="form">
			<form method="post" id="formProses">
				<div id="error"><span id="spanMesage"></span></div>
				<input type="text" name="chat" id="chat">
				<input type="submit" name="submit" id="submit_chat" value="Balas">
			</form>
		</div>	
	</div>

	<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#error").hide();

			$("#submit_chat").click(function(){
				if($("#chat").val() == ""){
					$("#error").show();
					$("#spanMesage").text("Apa arti satu huruf buat anda, jangan chat kosong ya gan ");
				}else{
					$("#error").hide();
					
					$("#tempatChat").append("<div class='orang'> saya <span class='user'>"+ $("#chat").val() +"</span></div>");
					$("#chat").val("")
				}
				return false;
			})
		})
	</script>
</body>
</html>

bisa dilihat ya dan teman-teman coba, jadi ketika teman-teman, coba kode di atas, akan menghasilkan gambar seperti ini:

jadi seperti teman-teman lihat, ada beberapa sudah ada yang chat, yang sudah saya tanam di situ, oke lalu bagaimana ketika saya tidak menginput tulisannya:

Ada tulisannya tidak boleh tidak input ya, jadi ketika saya tidak menginput chatnya akan menghasilkan tampilan error, oke sekarang kita coba menginput chatnya:

sudah tambah ya, oke saya rasa cukup sampai disini dulu belajar kita tentang membuat chat sederhana dengan fungsi append di jquery, semoga bermanfaat dan sampai jumpa pada artikel saya selanjutnya terimakasih.