if-itb · jessicaandjani · Oct 11, 2015 · Oct 12, 2015 · Oct 12, 2015 · Oct 13, 2015
diff --git a/README.md b/README.md
@@ -89,7 +89,15 @@ Pengguna dapat mencari pertanyaan dengan melakukan search ke `judul` maupun `isi
 
 ### Penjelasan Teknis
 
-`Silakan isi bagian ini dengan penjelasan anda, sesuai Petunjuk Pengerjaan di atas.`
+### Validasi
+Validasi pada client side dilakukan dengan menggunakan javascript. 
+Validasi yang dilakukan menggunakan regex untuk melakukan pengecekkan apakah masukan sudah valid atau tidak. 
+Validasi pada form pertanyaan dikatakan valid apabila semua form terisi dan pengecekan dilihat dari input dari pengguna.
+Sedangkan untuk validasi pada email menggunakan regex /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/, apabila input tidak sesuai regex fungsi validasi akan mengembalikan sebuah peringatan bahwa input email tidak valid.
+
+### Vote
+Pada saat user menekan tombol vote, maka fungsi ajax akan berjalan dan akan menambah nilai vote yang sudah ada tanpa melakukan refresh. s
+Setelah itu, akan dilakukan update pada database dan akan menampilkan jumlah vote yang sesuai dengan database.
 
 ### Knowledge
 

diff --git a/answer.php b/answer.php
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<head>
+	<!-- Link -->
+	<link rel="stylesheet" href="style.css">
+	<!-- Script -->
+</head>
+<body>
+	<div class="stackExchange">
+		<center><h1>Simple StackExchange</h1><br><br></center>
+		<h2 class="answer-h2">The question topic goes here</h2>
+		<hr>
+		<div class="question">
+			<?php
+				$servername = "localhost";
+				$username = "root";
+				$password = "";
+				$database = "stackexchange";
+				$connection = mysql_connect($servername, $username, $password) or die(mysql_error());
+				@mysql_select_db('stackexchange') or die(mysql_error());
+				$quest_id = $_GET["id"];
+				$sql = "SELECT `vote_question` FROM `question` WHERE (question_id = $quest_id)";
+				$number_count = mysql_query($sql);
+				$result = mysql_result($number_count, 0);
+			?>
+			<div class="number">
+				<div class="vote-up-question" data-question-id="<?= $quest_id ?>"></div>
+				<div class="number-votes">
+					<h2 id="count_vote_question"><?= $result?></h2>
+				</div>
+				<div class="vote-down-question" data-question-id="<?= $quest_id ?>"></div>
+			</div>
+			<?php
+				$query = "SELECT * FROM question WHERE (question_id = $quest_id)";
+				$result = mysql_query($query);
+				$name = mysql_result($result, 0, "name");
+				$email = mysql_result($result, 0, "email");
+				$topic = mysql_result($result, 0, "topic");
+				$content = mysql_result($result, 0, "content");
+				$date_question = mysql_result($result, 0, "date_question");
+			?>
+			<div class="QA-content">
+				<h3><?php echo $topic; ?><br>
+					<?php echo $content; ?>
+				</h3>
+				<div class="ask-description">	
+					<h3>asked by <span style="color: #502fc8"><?php echo $name; ?></span> at <?= $date_question ?> | 
+					<a href="/tugasWBD/edit-question.php?id=<?= $quest_id ?>">
+						<span style= "color: #ffcb55">edit</span> 
+					</a> | 
+					<a href="/tugasWBD/delete-question.php?id=<?= $quest_id ?>" onclick= "return confirm('Do you want to delete this question ?');">
+						<span style= "color: #fd294a">delete</span></h3>
+					</a>
+				</div>
+			</div>
+		</div>
+		<?php
+			$query = "SELECT * FROM answer WHERE (question_id = $quest_id)";
+			$result = mysql_query($query);
+			$num = mysql_num_rows($result);
+		?>
+		<h2 class="answer-h2"><?= $num ?> Answer</h2>
+		<hr>
+		<?php
+			$i = 0;
+			while ($i < $num) {
+				$answer_id = mysql_result($result, $i, "answer_id");
+				$name = mysql_result($result, $i, "name");
+				$email = mysql_result($result, $i, "email");
+				$content = mysql_result($result, $i, "content");
+				$vote_answer = mysql_result($result, $i, "vote_answer");
+				$date_answer = mysql_result($result, $i, "date_answer");
+		?>
+		<div class="answer">
+			<div class="number">
+				<div class="vote-up-answer" data-question-id="<?= $quest_id ?>" data-answer-id="<?= $answer_id ?>"></div>
+				<?php 
+					$sql = "SELECT `vote_answer` FROM `answer` WHERE (`question_id` = '$quest_id') AND (`answer_id` = '$answer_id')";
+					$number_count_ans = mysql_query($sql);
+					$result_answer = mysql_result($number_count_ans, 0);
+				?>
+				<div class="number-votes">
+					<h2 id="count_vote_answer<?= $answer_id ?>"><?= $result_answer?></h2>
+				</div>
+				<div class="vote-down-answer" data-question-id="<?= $quest_id ?>" data-answer-id="<?= $answer_id ?>"></div>
+			</div>
+			<div class="QA-content">
+				<h3><?= $content ?></h3>
+				<div class="ask-description">	
+					<h3>asked by <span style="color: #502fc8"><?= $email ?></span> at <?= $date_answer ?></h3>
+				</div>
+			</div>
+		</div>
+		<?php $i++; } ?>
+		<?php mysql_close(); ?>	
+		<h2 class="answer-h2"> <span style="color: #888888">&nbsp;&nbsp;Your Answer</span></h2>
+		<form name="question_form"  onsubmit="return validasi_inputAnswer()" class="QA-form" action="data-answer.php?id=<?= $quest_id ?>" method="POST">
+			<div class="question-container">
+				<label class="name">
+					<input type="text" name="name" placeholder="Name">
+				</label>
+				<label class="email">
+					<input type="text" name="email" placeholder="Email">
+				</label>
+				<label class="content">
+					<textarea type="text" name="content" placeholder="Content"></textarea>
+				</label>
+			</div>
+			<button class="post-button" type="submit"><b>Post</b></button>
+		</form>
+	</div>
+	<script type="text/javascript" src="function.js"></script>
+</body>
+</html>
diff --git a/data-answer.php b/data-answer.php
@@ -0,0 +1,17 @@
+<?php
+	$servername = "localhost";
+	$username = "root";
+	$password = "";
+	$database = "stackexchange";
+	$name = $_POST["name"];
+	$email = $_POST["email"];
+	$content_answer = $_POST["content"];
+	$content = mysql_real_escape_string($content_answer);
+	$question_id = $_GET["id"];
+	$connection = mysql_connect($servername, $username, $password) or die(mysql_error());
+	@mysql_select_db('stackexchange') or die(mysql_error());
+	$sql = "INSERT INTO answer (`question_id`, `name`, `email`, `content`) VALUES('$question_id', '$name', '$email','$content')";
+	mysql_query($sql);
+	mysql_close();
+	header("Location: /tugasWBD/answer.php?id=$question_id");
+?>
diff --git a/data-question.php b/data-question.php
@@ -0,0 +1,17 @@
+<?php
+	$servername = "localhost";
+	$username = "root";
+	$password = "";
+	$database = "stackexchange";
+	$name = $_POST["name"];
+	$email = $_POST["email"];
+	$topic = $_POST["topic"];
+	$content_question = $_POST["content"];
+	$content = mysql_real_escape_string($content_question);
+	$connection = mysql_connect($servername, $username, $password) or die(mysql_error());
+	@mysql_select_db('stackexchange') or die(mysql_error());
+	$sql = "INSERT INTO question (`name`, `email`, `topic`, `content`) VALUES('$name', '$email', '$topic', '$content')";
+	mysql_query($sql);
+	mysql_close();
+	header("Location: /tugasWBD/index.php");
+?>
diff --git a/delete-question.php b/delete-question.php
@@ -0,0 +1,15 @@
+<?php
+	$servername = "localhost";
+	$username = "root";
+	$password = "";
+	$database = "stackexchange";
+	$quest_id = $_GET["id"];
+	$connection = mysql_connect($servername, $username, $password) or die(mysql_error());
+	@mysql_select_db('stackexchange') or die(mysql_error());
+	$sql1 = "DELETE FROM `question` WHERE (question_id = $quest_id)";
+	mysql_query($sql1);
+	$sql2 = "DELETE FROM `answer` WHERE (question_id = $quest_id)";
+	mysql_query($sql2);
+	mysql_close();
+	header("Location: /tugasWBD/index.php");
+?>
diff --git a/edit-question.php b/edit-question.php
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<hmtl>
+<head>
+	<link rel="stylesheet" href="style.css">
+</head>
+<body>
+	<div class="stackExchange">
+		<center><h1>Simple StackExchange</h1><br><br></center>
+		<h1>What's your question?</h1>
+		<hr>
+		<?php
+			$servername = "localhost";
+			$username = "root";
+			$password = "";
+			$database = "stackexchange";
+			$connection = mysql_connect($servername, $username, $password) or die(mysql_error());
+			@mysql_select_db('stackexchange') or die(mysql_error());
+			$quest_id = $_GET["id"];
+			$query = "SELECT * FROM question WHERE (question_id = $quest_id)";
+			$result = mysql_query($query);
+			$name = mysql_result($result, 0, "name");
+			$email = mysql_result($result, 0, "email");
+			$topic = mysql_result($result, 0, "topic");
+			$content = mysql_result($result, 0, "content");
+			$vote_question = mysql_result($result, 0, "vote_question");
+			$date_question = mysql_result($result, 0, "date_question");
+			mysql_close();
+		?>	
+		<form name="question_form"  onsubmit="return validasi_input()" class="question-form" action="update-question.php?id=<?= $quest_id ?>" method="POST">
+			<div class="question-container">
+				<label class="name">
+					<input type="text" name="name" value="<?= $name ?>">
+				</label>
+				<label class="email">
+					<input type="text" name="email" value="<?= $email ?>">
+				</label>
+				<label class="topic">
+					<input type="text" name="topic" value="<?= $topic ?>">
+				</label>
+				<label class="content">
+					<textarea type="text" name="content"><?= $content ?></textarea>
+				</label>
+			</div>
+			<button class="post-button" type="submit" value="Submit"><b>Post</b></button>
+		</form>
+	</div>
+	<script type="text/javascript" src="function.js"></script>
+</body>
+</html>
diff --git a/function.js b/function.js
@@ -0,0 +1,126 @@
+/*********************** Vote Question **********************/
+/* Vote Up Question */
+var votesUpQuestion = document.getElementsByClassName("vote-up-question");
+for (var i = 0; i < votesUpQuestion.length; i++){
+	votesUpQuestion[i].onclick = function() {
+		voteUp_Question(this.getAttribute("data-question-id"));
+	}
+}
+/* Vote Down Question */
+var votesDownQuestion = document.getElementsByClassName("vote-down-question");
+for (var i = 0; i < votesDownQuestion.length; i++) {
+	votesDownQuestion[i].onclick = function() {
+		voteDown_Question(this.getAttribute("data-question-id"));
+	}
+}
+
+/*********************** Vote Answer **********************/
+/* Vote Up Answer */
+var votesUpAnswer = document.getElementsByClassName("vote-up-answer");
+for (var i = 0; i < votesUpAnswer.length; i++) {
+	votesUpAnswer[i].onclick = function() {
+		voteUp_Answer(this.getAttribute("data-question-id"), this.getAttribute("data-answer-id"));
+	}
+}
+/* Vote Down Answer */
+var votesDownAnswer = document.getElementsByClassName("vote-down-answer");
+for (var i = 0; i < votesDownAnswer.length; i++) {
+	votesDownAnswer[i].onclick = function() {
+		voteDown_Answer(this.getAttribute("data-question-id"), this.getAttribute("data-answer-id"));
+	}
+}
+
+/*********************** Ajax Vote Question **********************/
+/* Vote Up Question */
+function voteUp_Question(id_question) {
+	var xmlhttp = new XMLHttpRequest();
+	var count = parseInt(document.getElementById('count_vote_question').innerHTML);
+	xmlhttp.onreadystatechange = function() {
+		if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
+			document.getElementById('count_vote_question').innerHTML = count+1;
+		}
+	}
+	xmlhttp.open("GET", "/tugasWBD/vote-up-question.php?id=" + id_question, true);
+	xmlhttp.send();
+}
+/* Vote Down Question */
+function voteDown_Question(id_question) {
+	var xmlhttp = new XMLHttpRequest();
+	var count = parseInt(document.getElementById('count_vote_question').innerHTML);
+	xmlhttp.onreadystatechange = function() {
+		if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
+			document.getElementById('count_vote_question').innerHTML = count-1;
+		}
+	}
+	xmlhttp.open("GET", "/tugasWBD/vote-down-question.php?id=" + id_question, true);
+	xmlhttp.send();
+}
+
+/*********************** Ajax Vote Answer **********************/
+/* Vote Up Answer */
+function voteUp_Answer(id_question, id_answer) {
+	var xmlhttp = new XMLHttpRequest();
+	var count = parseInt(document.getElementById('count_vote_answer' + id_answer).innerHTML);
+	console.log(count);
+	xmlhttp.onreadystatechange = function() {
+		if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
+			document.getElementById('count_vote_answer' + id_answer).innerHTML = count+1;
+		}
+	}
+	xmlhttp.open("GET", "/tugasWBD/vote-up-answer.php?id=" + id_question + "&id-ans=" + id_answer, true);
+	xmlhttp.send();
+}
+/* Vote Down Answer */
+function voteDown_Answer(id_question, id_answer) {
+	var xmlhttp = new XMLHttpRequest();
+	var count = parseInt(document.getElementById('count_vote_answer' + id_answer).innerHTML);
+	xmlhttp.onreadystatechange = function() {
+		if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
+			document.getElementById('count_vote_answer' + id_answer).innerHTML = count-1;
+		}
+	}
+	xmlhttp.open("GET", "/tugasWBD/vote-down-answer.php?id=" + id_question + "&id-ans=" + id_answer, true);
+	xmlhttp.send();
+}
+
+
+/*********************** Validasi **********************/
+/* Validasi Question Form */
+function validasi_input() {
+	var input_name = document.forms["question_form"]["name"].value;
+	var input_topic = document.forms["question_form"]["topic"].value;
+	var input_content = document.forms["question_form"]["content"].value;
+	var input_email = document.forms["question_form"]["email"].value;
+	/*** Regex name, content, topic ***/
+	var inputRegex = /\s/;
+	/*** Regex Email ***/
+	var emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
+    if ((input_name == null  || input_name == "") || (input_topic == null  || input_topic == "") || (input_content == null  || input_content== "")) {
+        alert("Every field must be filled out");
+        return false;
+    }
+    // check email
+    if (input_email.match(emailRegex) == null) {
+    	alert("Invalid Email");
+    	return false;
+    }
+}
+/* Validasi Answer Form */
+function validasi_inputAnswer() {
+	var input_name = document.forms["question_form"]["name"].value;
+	var input_content = document.forms["question_form"]["content"].value;
+	var input_email = document.forms["question_form"]["email"].value;
+	/*** Regex name, content, topic ***/
+	var inputRegex = /\s/;
+	/*** Regex Email ***/
+	var emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
+    if ((input_name == null  || input_name == "") || (input_content == null  || input_content== "")) {
+        alert("Every field must be filled out");
+        return false;
+    }
+    // check email
+    if (input_email.match(emailRegex) == null) {
+    	alert("Invalid Email");
+    	return false;
+    }
+}