if-itb · jessicahandayani · Oct 12, 2015 · Oct 12, 2015 · Oct 13, 2015 · Oct 13, 2015
diff --git a/README.md b/README.md
@@ -88,8 +88,11 @@ Validasi **wajib** dilakukan pada *client-side*, dengan menggunakan **javascript
 Pengguna dapat mencari pertanyaan dengan melakukan search ke `judul` maupun `isi pertanyaan`.
 
 ### Penjelasan Teknis
+-	Melakukan validasi pada client-side :
+	Proses validasi isi form pada client-side dilakukan dengan menggunakan Javascript. Terdapat fungsi validateForm() pada halaman ask.php, edit.php, dan question.php yang akan dipanggil ketika tombol 'Post' ditekan. Fungsi tersebut bekerja dengan cara mengambil nilai dari input pada form, lalu mengecek apakah nilainya kosong atau tidak. Jika nilai salah satu dari input pada form kosong, maka akan ditampilkan pop-up box dan form tidak akan diproses lebih lanjut. Namun jika form telah lengkap, maka akan dilakukan validasi alamat email dengan menggunakan filter yang mengecek apakah format email telah sesuai, yaitu berupa karakter alfanumerik, '.', '_', atau '-' , simbol '@', lalu karakter alfanumerik atau '-', karakter '.', dan diakhiri dengan karakter alfanumerik. Jika format email tidak sesuai, maka akan ditampilkan pesan kesalahan dan form tidak akan diproses lebih lanjut. Namun jika format email telah sesuai, maka form akan diproses lebih lanjut.
 
-`Silakan isi bagian ini dengan penjelasan anda, sesuai Petunjuk Pengerjaan di atas.`
+-	Melakukan AJAX (mulai dari pengguna melakukan klik pada tombol vote sampai angka vote berubah) :
+	Ketika pengguna melakukan klik pada tombol vote, maka akan dipanggil fungsi updateVote(vote,qid,aid). Fungsi ini akan membuat objek XMLHttpRequest, lalu mengeksekusi fungsi jika server sudah siap. Permintaan akan dikirimkan ke server dan nilai parameter diberikan dengan metode GET pada vote.php. Pada vote.php, parameter pada URL akan disimpan sebagai variabel dan dilakukan koneksi dengan server MySQL. Selanjutnya dilakukan pengecekan apakah voting dilakukan untuk pertanyaan atau jawaban. Basis data untuk masing-masing kasus kemudian diakses dan dilakukan UPDATE pada nilai vote untuk pertanyaan/jawaban tersebut. Nilai vote yang baru kemudian dikirimkan kembali untuk diletakan pada elemen yang dituju pada halaman, yaitu disesuaikan dengan ID dari answer, atau 0 untuk pertanyaan.
 
 ### Knowledge
 

diff --git a/stackexchange/ask.php b/stackexchange/ask.php
@@ -0,0 +1,79 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title>Simple StackExchange</title>
+<link rel="stylesheet" type="text/css" href="style.css" />
+</head>
+
+
+
+<body>
+<?php
+	$connect = mysql_connect("localhost","root","") or die ("Connection Error");
+	$selectdb = mysql_select_db("stackexchange", $connect);
+?>
+<a href="index.php"><h1> Simple StackExchange </h1></a>
+
+<div id="container">
+<div class="container-title">
+<h2> What's your question? </h2>
+</div>
+<form name ="ask" class="form-wrapper" action="" method="post" onsubmit="return validateForm()">
+	<input type="text" name="name" placeholder="Name">
+	<input type="text" name="email" placeholder="Email">
+    <input type="text" name="topic" placeholder="Question Topic">
+    <textarea name="content" placeholder="Content"></textarea>
+	<button type="submit" name="submit"> Post </button>
+</form>
+
+</div>
+
+<script type="text/javascript">
+
+function validateForm() {
+    var name = document.forms["ask"]["name"].value;
+	var email = document.forms["ask"]["email"].value;
+	var topic = document.forms["ask"]["topic"].value;
+	var content = document.forms["ask"]["content"].value;
+    var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
+
+    if (name == null || name == "" || email == null || email == "" || topic == null || topic == "" || content == null || content == "") {
+        alert("All fields are required. Please complete the form.");
+        return false;
+    }
+	else if (!filter.test(email)) {
+    	alert('Please provide a valid email address');
+    	return false;
+	}
+}
+
+</script>
+
+<?php
+if (array_key_exists('submit',$_POST)){
+$name = $_POST['name'];
+$email = $_POST['email'];
+$topic = $_POST['topic'];
+$question = $_POST['content'];
+
+if (empty($name) || empty($email) || empty($topic) || empty($question)){
+echo"<script type='text/javascript'>", "empty_alert();", "</script>";
+}
+else {
+mysql_query ("INSERT INTO `question`(`name`, `email`, `topic`, `question_content`, `votes`) VALUES ('$name','$email','$topic','$question','0')",$connect);
+
+$id = mysql_insert_id();
+
+header("Location: question.php?id=".$id);
+}
+}
+mysql_close($connect);
+
+?>
+</body>
+</html>
+
+
diff --git a/stackexchange/delete.php b/stackexchange/delete.php
@@ -0,0 +1,21 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title>Untitled Document</title>
+</head>
+
+<body>
+<?php
+$connect = mysql_connect("localhost","root","") or die ("Connection Error");
+$selectdb = mysql_select_db("stackexchange", $connect);
+$id = $_GET["id"];
+mysql_query("DELETE FROM `question` WHERE `id_question` = '$id'",$connect);
+
+mysql_query("DELETE FROM `answer` WHERE `id_question` = '$id'",$connect);
+
+header("Location: index.php");
+mysql_close($connect);
+?>
+</body>
+</html>
diff --git a/stackexchange/edit.php b/stackexchange/edit.php
@@ -0,0 +1,76 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title>Simple StackExchange</title>
+<link rel="stylesheet" type="text/css" href="style.css" />
+</head>
+
+
+
+<body>
+<?php
+	$connect = mysql_connect("localhost","root","") or die ("Connection Error");
+	$selectdb = mysql_select_db("stackexchange", $connect);
+	$qid = $_GET["id"];
+	$query = mysql_query("SELECT * FROM `question` where `id_question`='$qid'",$connect);
+	$question = mysql_fetch_array($query);
+?>
+
+<a href="index.php"><h1> Simple StackExchange </h1></a>
+
+<div id="container">
+<div class="container-title">
+<h2> What's your question? </h2>
+</div>
+<form name="ask" class="form-wrapper" action="" method="post"  onsubmit="return validateForm()">
+	<input type="text" name="name" placeholder="Name" value=<?php echo '"'.$question[2].'"' ?>>
+	<input type="text" name="email" placeholder="Email" value=<?php echo '"'.$question[3].'"' ?>>
+    <input type="text" name="topic" placeholder="Question Topic" value=<?php echo '"'.$question[4].'"' ?>>
+    <textarea name="content" placeholder="Content"><?php echo $question[5] ?></textarea>
+	<button type="submit" name="submit"> Update </button>
+</form>
+
+</div>
+<script type="text/javascript">
+function validateForm() {
+    var name = document.forms["ask"]["name"].value;
+	var email = document.forms["ask"]["email"].value;
+	var topic = document.forms["ask"]["topic"].value;
+	var content = document.forms["ask"]["content"].value;
+    var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
+
+    if (name == null || name == "" || email == null || email == "" || topic == null || topic == "" || content == null || content == "") {
+        alert("All fields are required. Please complete the form.");
+        return false;
+    }
+	else if (!filter.test(email)) {
+    	alert('Please provide a valid email address');
+    	return false;
+	}
+}
+</script>
+
+<?php
+if (array_key_exists('submit',$_POST)){
+$name = $_POST['name'];
+$email = $_POST['email'];
+$topic = $_POST['topic'];
+$question = $_POST['content'];
+
+
+mysql_query ("UPDATE `question` SET `timestamp`=`timestamp`,`name`='$name', `email`='$email', `topic`='$topic', `question_content`='$question' WHERE `id_question`='$qid'",$connect);
+
+$id = mysql_insert_id();
+
+header("Location: question.php?id=".$qid);
+}
+mysql_close($connect);
+
+?>
+</body>
+</html>
+
+
diff --git a/stackexchange/index.php b/stackexchange/index.php
@@ -0,0 +1,78 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title>Simple StackExchange</title>
+<link rel="stylesheet" type="text/css" href="style.css" />
+
+<?php
+	$connect = mysql_connect("localhost","root","") or die ("Connection Error");
+	$selectdb = mysql_select_db("stackexchange", $connect);
+?>
+</head>
+<body>
+	<a href="index.php"><h1> Simple StackExchange </h1></a>
+	<div id="search-box"> 
+		<form class="search" action="result.php" method="get">
+			<input type="text" name="q" required class="search-box">
+			<button type="submit"> Search </button>
+		</form>
+		Cannot find what you are looking for? <a href="ask.php">Ask here </a>
+    </div>
+
+	<div id="container">
+    	<div class="container-title">
+			Recently Asked Questions
+        </div>
+        <?php
+		$query = 'SELECT * FROM `question` ORDER BY `timestamp` DESC limit 10';
+		$data = mysql_query($query,$connect);
+		if ($data){
+		while($row = mysql_fetch_array($data)){
+        echo '<table class=questions-table>';
+			echo '<tr>';
+            	echo '<td rowspan="3" class="td-vote-answer">';
+                    echo ('<b>'.$row[6].'</b><br>Votes');
+                echo '</td>';
+                echo '<td rowspan="3" class="td-vote-answer">';
+					$answers = mysql_query("SELECT * FROM `answer` WHERE `id_question`='$row[0]' ORDER BY `votes` DESC",$connect);
+					$countanswer = mysql_num_rows($answers);
+                    echo ('<b>'.$countanswer.'</b><br>Answers');
+
+                echo '</td>';
+                echo '<td class="td-topic">';
+                    echo '<a href="question.php?id='.$row[0].'">';
+					echo $row[4];
+					echo '</a>';
+                echo '</td>';
+                echo '</tr>';
+
+				echo '<tr>';
+                echo '<td class="td-content">';
+					if(strlen($row[5])>130){
+    					$content=substr($row[5],0,130).'...';
+					}
+					else {
+						$content = substr($row[5],0);
+					}
+                    echo $content;
+                echo '</td>';
+                echo '</tr>';
+
+                echo '<tr>';
+                echo '<td class="td-detail">';
+                    echo ('asked by <span class="username">'.$row[2].'</span> | <a href="edit.php?id='.$row[0].'"><span class="edit"> Edit </span></a> | <a onclick="return ConfirmDelete();" href="delete.php?id='.$row[0].'"><span class="delete"> Delete </span></a>');
+                echo '</td>';
+                echo '</tr>';
+            echo '</table>';
+		}
+		}
+        ?>
+
+</div>    
+<table id="credit"><tr><td id="credit-td">Copyright 2015 by Jessica Handayani - 13513069</td></tr></table>
+
+
+
+</body>
+</html>