diff --git a/README.md b/README.md index 4c08b9d..e1eb47d 100644 --- 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 new file mode 100644 index 0000000..56b9353 --- /dev/null +++ b/answer.php @@ -0,0 +1,113 @@ + + + + + + + +
+

Simple StackExchange



+

The question topic goes here

+
+
+ +
+
+
+

+
+
+
+ +
+


+ +

+
+

asked by at | + + edit + | + + delete

+ +
+
+
+ +

Answer

+
+ +
+
+
+ +
+

+
+
+
+
+

+
+

asked by at

+
+
+
+ + +

  Your Answer

+
+
+ + + +
+ +
+
+ + + \ No newline at end of file diff --git a/data-answer.php b/data-answer.php new file mode 100644 index 0000000..f18edd3 --- /dev/null +++ b/data-answer.php @@ -0,0 +1,17 @@ + \ No newline at end of file diff --git a/data-question.php b/data-question.php new file mode 100644 index 0000000..a106435 --- /dev/null +++ b/data-question.php @@ -0,0 +1,17 @@ + \ No newline at end of file diff --git a/delete-question.php b/delete-question.php new file mode 100644 index 0000000..bada4a0 --- /dev/null +++ b/delete-question.php @@ -0,0 +1,15 @@ + \ No newline at end of file diff --git a/edit-question.php b/edit-question.php new file mode 100644 index 0000000..6008617 --- /dev/null +++ b/edit-question.php @@ -0,0 +1,49 @@ + + + + + + +
+

Simple StackExchange



+

What's your question?

+
+ +
+
+ + + + +
+ +
+
+ + + \ No newline at end of file diff --git a/function.js b/function.js new file mode 100644 index 0000000..b7287f6 --- /dev/null +++ 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; + } +} \ No newline at end of file diff --git a/index.php b/index.php new file mode 100644 index 0000000..2a5b33d --- /dev/null +++ b/index.php @@ -0,0 +1,89 @@ + + + + + + +
+

Simple StackExchange


+
+   + +
+
+

Cannot find what you are looking for?Ask here

+
+

Recently Asked Questions

+
+
+ + +
+ +
+
+

+
+

Votes

+
+ +
+
+

+
+

Answers

+
+ +
+ +


+ 50) { + echo substr($content, 0, 50); + echo "..."; + } else { + echo $content; + } + ?> +

+
+

asked by | + + edit + | + + delete

+ +
+
+
+
+ + +
+
+ + \ No newline at end of file diff --git a/question.html b/question.html new file mode 100644 index 0000000..8bb31db --- /dev/null +++ b/question.html @@ -0,0 +1,31 @@ + + + + + + +
+

Simple StackExchange



+

What's your question?

+
+
+
+ + + + +
+ +
+
+ + + \ No newline at end of file diff --git a/search.php b/search.php new file mode 100644 index 0000000..9188189 --- /dev/null +++ b/search.php @@ -0,0 +1,88 @@ + + + + + + +
+

Simple StackExchange


+
+   + +
+
+

Cannot find what you are looking for?Ask here

+
+

Recently Asked Questions

+
+
+ + +
+
+
+

+
+

Votes

+
+ +
+
+

+
+

Answers

+
+
+ +


+ 50) { + echo substr($content, 0, 50); + echo "..."; + } else { + echo $content; + } + ?> +

+
+

asked by | + + edit + | + + delete

+ +
+
+
+
+ + +
+
+ + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..f066406 --- /dev/null +++ b/style.css @@ -0,0 +1,162 @@ +/* Index CSS */ +h1 { + font-size: 45px; +} +hr { + border: 2px solid; + margin-top: -13px; +} +h2{ + margin-left: 16px; +} +.number-votes h2 { + color: #888888; + margin: 2px 5px 5px 23px; +} +.answer-h2 { + font-size: 33px; + margin-left: 0px; +} +.search-form { + margin: 0px 0px -7px 40px; +} +.stackExchange { + margin-left: 195px; + margin-right: 199px; +} +.search-bar { + width: 790px; + height: 28px; + border: 3px solid black; +} +.search-button { + width: 83px; + height: 34px; + border: 3px solid black; + background-color: white; +} +.question-list { + display: inline-block; + margin-bottom: 50px; +} +.question-description { + display: inline-block; + padding: 2px 5px 2px 0px; + border-bottom: 4px solid black; + float: left; +} +.votes-answers { + float: left; + margin-right: 54px; +} +.votes { + display: inline-block; + text-align: center; + margin-right: 5px; + padding: 5px 20px 5px 20px; + float: left; +} +.answers { + display: inline-block; + text-align: center; + margin-right: 50px; + padding: 5px 20px 5px 20px; + float: left; +} +.question-topic { + display: inline-block; + float: left; + width: 648px; + padding: 8px 12px 8px 25px; +} +.question-topic h3 { + margin: 17px 0px 11px 0px; +} +.question-content { + display: inline-block; + text-align: center; + margin-right: 5px; + padding: 5px 30px 5px 40px; +} +.ask-description { + line-height: 0px; + float: right; +} + +/* Question CSS */ +.question-form { + margin: 40px 4px 20px 5px; +} +.question-container label { + display: block; + margin-bottom: 7px; +} +.question-container input { + width: 100%; + height: 37px; + border: 1px solid black; +} +.question-container textarea { + width: 99.5%; + height: 150px; + border: 1px solid black; +} +.post-button { + float: right; + width: 75px; + height: 40px; + margin-bottom: 50px; + border: 1px solid black; +} +/* Answer CSS */ +.vote-up-question { + width: 0px; + height: 0px; + border-left: 10px solid transparent; + border-right: 10px solid transparent; + border-bottom: 16px solid #dbdbdb; + margin: 20px 5px 5px 20px; +} +.vote-down-question { + width: 0px; + height: 0px; + border-left: 10px solid transparent; + border-right: 10px solid transparent; + border-top: 16px solid #dbdbdb; + margin: 7px 5px 5px 20px; +} +.vote-up-answer { + width: 0px; + height: 0px; + border-left: 10px solid transparent; + border-right: 10px solid transparent; + border-bottom: 16px solid #dbdbdb; + margin: 20px 5px 5px 20px; +} +.vote-down-answer { + width: 0px; + height: 0px; + border-left: 10px solid transparent; + border-right: 10px solid transparent; + border-top: 16px solid #dbdbdb; + margin: 7px 5px 5px 20px; +} +.number { + float: left; + margin-right: 30px; +} +.QA-content { + display: inline-block; + float: left; + width: 849px; + padding: 8px 5px 8px 5px; +} +.question { + display: inline-block; + margin-bottom: -5px; +} +.answer { + display: inline-block; + padding: 0px 0px 2px 0px; + border-bottom: 4px solid black; +} diff --git a/update-question.php b/update-question.php new file mode 100644 index 0000000..b4cfe62 --- /dev/null +++ b/update-question.php @@ -0,0 +1,17 @@ + \ No newline at end of file diff --git a/vote-down-answer.php b/vote-down-answer.php new file mode 100644 index 0000000..48ef285 --- /dev/null +++ b/vote-down-answer.php @@ -0,0 +1,13 @@ + \ No newline at end of file diff --git a/vote-down-question.php b/vote-down-question.php new file mode 100644 index 0000000..0278717 --- /dev/null +++ b/vote-down-question.php @@ -0,0 +1,12 @@ + \ No newline at end of file diff --git a/vote-up-answer.php b/vote-up-answer.php new file mode 100644 index 0000000..e13de1e --- /dev/null +++ b/vote-up-answer.php @@ -0,0 +1,13 @@ + \ No newline at end of file diff --git a/vote-up-question.php b/vote-up-question.php new file mode 100644 index 0000000..83968c5 --- /dev/null +++ b/vote-up-question.php @@ -0,0 +1,12 @@ + \ No newline at end of file