if-itb · ghost · Oct 15, 2015 · Oct 15, 2015 · Oct 15, 2015 · Oct 15, 2015
diff --git a/README.md b/README.md
@@ -89,7 +89,8 @@ 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 form question dan answer keduanya menggunakan function javascript yang melakukan pengecekan apakah kolom form terisi dan cek alamat email apakah valid atau tidak, jika ada yang kosong atau tidak valid maka akan muncul box peringatan.
+Vote up dan vote down menggunakan AJAX. Saat icon vote di click pada script akan membuat objek XMLHttpRequest yang mengambil nilai id dari question atau answer yang sedang di vote. Function akan mengambil meng-update nilai vote pada database dan mengambil nilai vote yang baru dari database kemudian mengubah nilai vote yang ditampilkan (sesuai nilai pada database) tanpa reload page. Function vote up dan down untuk question dan answer dipisahkan dan file phpnya juga terpisah untuk mempermudah pengerjaan.
 
 ### Knowledge
 

diff --git a/ask_question.php b/ask_question.php
@@ -0,0 +1,66 @@
+ <!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <title>Ask Question | Simple StackExchange</title>
+    <link rel="stylesheet" type="text/css" href="style.css"/>
+    <script src="script.js"></script>
+</head>
+<body>
+    <header>
+    	<a href="index.php"><p>Simple StackExchange</p></a>
+    </header>
+    <div class="container" id="page_form">
+    	<p id="title">What's your question?</p>
+
+    	<div class="ask_question">
+    		<form name = "question_form" method="POST" id="form" onsubmit="return validate_question_form()">
+    			<input type="text" name="name" placeholder ="   Name "id="nama" />
+    			<input type="text" name="email" placeholder="   Email" id="email" />
+    			<input type="text" name="question_topic" placeholder="   Question Topic" id="question_topic"/>
+    			<textarea name="content" placeholder="   Content" id="content"></textarea> 
+    			<input type="submit" name="post" id="post" value="Post">
+    		</form>
+
+    		<?php
+    			if (isset($_POST['post'])) {
+    				$name = $_POST['name'];
+    				$email = $_POST['email'];
+    				$question_topic = $_POST['question_topic'];
+    				$content = $_POST['content'];
+
+    				$dbname = "stackexchange";
+                    $host = "localhost";
+                    $username = "root";
+                    $password = "810f810m";
+
+                    $conn = mysqli_connect($host, $username, $password, $dbname);
+
+    				if (! $conn) {
+    					die('Gagal koneksi: '.mysql_error());
+    				}
+
+					mysql_select_db('stackexchange');
+    				$sql = 
+
+    					   "INSERT INTO question (name, email, question_topic, content) VALUES ('$name', '$email','$question_topic','$content')";
+
+
+    				$insertdata = mysqli_query($conn, $sql);
+    				if (! $insertdata)
+    				{
+    					die('Gagal tambah data: '. mysql_error());
+    				}
+
+                    $last_id = mysqli_insert_id($conn);
+                    header("Location: show_question.php?id=".$last_id);
+                    exit;
+
+    			}
+
+    		?>
+
+    	</div>
+    </div>
+</body>
+</html>
diff --git a/delete_question.php b/delete_question.php
@@ -0,0 +1,30 @@
+<?php
+
+			$dbname = "stackexchange";
+            $host = "localhost";
+            $username = "root";
+            $password = "810f810m";
+
+            $conn = mysqli_connect($host, $username, $password, $dbname);
+            mysql_select_db('stackexchange');
+
+            $query =    "SELECT questionID, email, question_topic, content, vote, answer FROM question";
+
+            $result = mysqli_query($conn, $query);
+
+
+            if (! $result) {
+                die('Gagal ambil data: '.mysql_error());
+            }
+
+            $id = $_GET["id"];
+			$sql = "DELETE FROM answer WHERE questionID=$id";
+			$result = mysqli_query($conn, $sql);
+
+			$sql = "DELETE FROM question WHERE questionID=$id";
+			$result = mysqli_query($conn, $sql);
+
+			header("Location: index.php");
+    		exit;
+
+?>
diff --git a/edit_question.php b/edit_question.php
@@ -0,0 +1,73 @@
+ <!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <title>Edit Question | Simple StackExchange</title>
+    <link rel="stylesheet" type="text/css" href="style.css"/>
+    <script src="script.js"></script>
+</head>
+<body>
+    <header>
+    	<a href="index.php"><p>Simple StackExchange</p></a>
+    </header>
+    <div class="container" id="page_form">
+    	<p id="title">What's your question?</p>
+
+                <?php
+
+                    $dbname = "stackexchange";
+                    $host = "localhost";
+                    $username = "root";
+                    $password = "810f810m";
+
+                    $conn = mysqli_connect($host, $username, $password, $dbname);
+
+                    if (! $conn) {
+                        die('Gagal koneksi: '.mysql_error());
+                    }
+
+                    mysql_select_db('stackexchange');
+
+                    $id = isset($_GET['id']) ? $_GET['id'] : '';
+
+                    $query = "SELECT questionID, name, email, question_topic, content FROM question WHERE questionID = '$id'";
+                    $result = mysqli_query($conn, $query);
+                    $row = mysqli_fetch_row($result);
+
+                ?>
+
+    	   <div class="ask_question">
+                <form name="question_form" id="form" method="POST" onsubmit="return validateQuestionForm()">
+                <input type="hidden" name="questionID" value="<?php echo $id; ?>" />
+                <input type="text" name="name" value ="<?php echo $row[1]; ?>" id="nama" />
+    			<input type="text" name="email" value="<?php echo $row[2]; ?>" id="email" />
+    			<input type="text" name="question_topic" value="<?php echo $row[3]; ?>" id="question_topic"/>
+    			<textarea name="content" id="content" value=><?php echo $row[4]; ?></textarea>
+    			<input type="submit" name="post" id="post" value="Post">
+    		</form>;    
+
+            <?php 
+    			if (isset($_POST['post'])) {
+    				$name = $_POST['name'];
+    				$email = $_POST['email'];
+    				$question_topic = $_POST['question_topic'];
+    				$content = $_POST['content'];
+
+
+    				$sql = "UPDATE question SET name='$name', email='$email', content='$content' WHERE questionID = '$id'";
+
+    				$insertdata = mysqli_query($conn, $sql);
+    				if (! $insertdata)
+    				{
+    					die('Gagal tambah data: '. mysql_error());
+    				}
+
+    			}
+
+    		?>
+
+
+    	</div>
+    </div>
+</body>
+</html>
diff --git a/images/down.png b/images/down.png
diff --git a/images/up.png b/images/up.png
diff --git a/index.php b/index.php
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <title>Home | Simple StackExchange</title>
+    <link rel="stylesheet" type="text/css" href="style.css"/>
+    <script src="script.js"></script>
+</head>
+<body>
+    <header>
+    	<a href="index.php"><p>Simple StackExchange</p></a>
+    </header>
+    <div class="container">
+
+
+        <?php
+        	$dbname = "stackexchange";
+            $host = "localhost";
+            $username = "root";
+            $password = "810f810m";
+
+            $conn = mysqli_connect($host, $username, $password, $dbname);
+            mysql_select_db('stackexchange');
+        ?>
+
+    	<div class="find_question">
+    		<form method="post" action="home.php" id="searching" >
+    			<input type="text" name="question" id="question"/>
+    			<input type="submit" name="search" id="search" value="Search"/>
+    		</form>
+    		<p>Cannot find what you are looking for? <a href="ask_question.php" id="ask_here">Ask here</a></p>
+    	</div>
+
+    	<div class="recently">
+    		<h3 id="title">Recently Asked Questions</h3>
+
+    		<table>
+                <?php
+                    $query =    "SELECT questionID, email, question_topic, content, vote, answer FROM question";
+
+                    $result = mysqli_query($conn, $query);
+
+
+                    if (! $result) {
+                        die('Gagal ambil data: '.mysql_error());
+                    }
+
+
+                    while ($row = mysqli_fetch_row($result)) {
+
+                    	echo "<tr>";
+                    	echo "<td class='statistic'>";
+                    		echo "<p id='total_votes'>".$row[4]."</p>";
+                    		echo "<p>Votes</p>";
+                    	echo "</td>";
+
+                    	echo "<td class='statistic'>";
+                    		echo "<p id='total_answer'>".$row[5]."</p>";
+                    		echo "<p>Answers</p>";
+                    	echo "</td>";
+
+                    	echo "<td>";
+                    		echo '<a href=show_question.php?id='.$row[0].'>'.'<p id="title2">'.$row[2].'</p></a>';
+                    		echo "<p id='question_content'>".substr($row[3],0,180);
+                            echo "</p>";
+                    		echo '<p id="username">asked by <span id="name">'.$row[1].'</span> | ';
+                            echo '<a id= "edit" href=edit_question.php?id='.$row[0].'>'."edit".'</a> | '.
+                                 '<a id= "delete" href=delete_question.php?id='.$row[0].' onclick="confirm_delete_question()">delete</a>'.
+                                 "</p>";
+                    	echo "</td>";
+
+
+                    	echo "</tr>"; 
+
+                        echo "<tr>";
+                            echo "<th colspan='3'></th>";
+                        echo "</tr>";
+                    }
+
+                    mysqli_close($conn);
+
+                ?>
+            </table>
+    	</div>
+    </div>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,114 @@
+function validateEmail(email) {
+	var filter= /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i ;
+	return filter.test(email);
+}
+
+
+
+function validate_question_form() {
+    var x = document.forms["question_form"]["name"].value;
+    if (x == null || x == "") {
+        alert("Name must be filled out");
+        return false;
+    }
+    var x = document.forms["question_form"]["email"].value;
+    if (x == null || x == "") {
+        alert("Email must be filled out");
+        return false;
+    }
+    else if (! validateEmail(x)){
+    	alert("Please enter correct email address ");
+        return false;
+    }
+    var x = document.forms["question_form"]["question_topic"].value;
+    if (x == null || x == "") {
+        alert("Question Topic must be filled out");
+        return false;
+    }
+    var x = document.forms["question_form"]["content"].value;
+    if (x == null || x == "") {
+        alert("Question Content must be filled out");
+        return false;
+    }
+
+}
+
+function confirm_delete_question() {
+	var x = confirm("Are you sure want to delete this question ?");
+	return x;
+}
+
+function validate_answer_form() {
+    var x = document.forms["answer_form"]["name"].value;
+    if (x == null || x == "") {
+        alert("Name must be filled out");
+        return false;
+    }
+    var x = document.forms["answer_form"]["email"].value;
+    if (x == null || x == "") {
+        alert("Email must be filled out");
+        return false;
+    }
+    else if (! validateEmail(x)){
+    	alert("Please enter correct email address ");
+        return false;
+    }
+    var x = document.forms["answer_form"]["content"].value;
+    if (x == null || x == "") {
+        alert("Question Content must be filled out");
+        return false;
+    }
+
+}
+
+function vote_up_question(id) {
+	var xhttp = new XMLHttpRequest();
+	xhttp.onreadystatechange = function() {
+		if (xhttp.readyState == 4) {
+			if(xhttp.status == 200) {
+				document.getElementById("total_votes2").innerHTML = xhttp.responseText;
+			}
+		}
+	}
+	xhttp.open("POST", "vote_up_question.php?id=" + id, true);
+	xhttp.send();
+}
+
+function vote_down_question(id) {
+	var xhttp = new XMLHttpRequest();
+	xhttp.onreadystatechange = function() {
+		if (xhttp.readyState == 4) {
+			if (xhttp.status == 200) {
+				document.getElementById("total_votes2").innerHTML = xhttp.responseText;
+			}
+		}
+	}
+	xhttp.open("POST", "vote_down_question.php?id="+id, true);
+	xhttp.send();
+}
+
+function vote_up_answer(id) {
+	var xhttp = new XMLHttpRequest();
+	xhttp.onreadystatechange = function() {
+		if (xhttp.readyState == 4) {
+			if(xhttp.status == 200) {
+				document.getElementById("total_votes3"+id).innerHTML = xhttp.responseText;
+			}
+		}
+	}
+	xhttp.open("POST", "vote_up_answer.php?id="+id, true);
+	xhttp.send();
+}
+
+function vote_down_answer(id) {
+	var xhttp = new XMLHttpRequest();
+	xhttp.onreadystatechange = function() {
+		if (xhttp.readyState == 4) {
+			if(xhttp.status == 200) {
+				document.getElementById("total_votes3"+id).innerHTML = xhttp.responseText;
+			}
+		}
+	}
+	xhttp.open("POST", "vote_down_answer.php?id="+1, true);
+	xhttp.send();
+}