Skip to content

Commit

Permalink
CRUD operations success
Browse files Browse the repository at this point in the history
  • Loading branch information
Bishal Karki committed Jul 11, 2019
1 parent 880c829 commit 454d298
Show file tree
Hide file tree
Showing 4 changed files with 159 additions and 14 deletions.
100 changes: 88 additions & 12 deletions js/update-note.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ function update_box() {
const update_box = `
<!-- new note box expanded -->
<form id="update_note">
<input type="hidden" name="id">
<div class= "card-header py-1">
<!-- The following two <div> MUST BE EMPTY to display placeholder -->
<!-- new note title input -->
Expand Down Expand Up @@ -41,18 +42,18 @@ function update_box() {
$("#update_content").focus();

// color pickers at footer
$("#update_note .dot").each(function(index) {
$("#update_note .dot").each(function (index) {
$(this).css("background-color", $(this).attr("value"));

$(this).click(function() {
$(this).click(function () {
$(this).addClass("selected_dot")
.siblings().removeClass("selected_dot");
$("#update_note_box").css("background-color",$(this).attr("value"));
.siblings().removeClass("selected_dot");

$("#update_note_box").css("background-color", $(this).attr("value"));
})


if(index === 0) {

if (index === 0) {
$(this).addClass("selected_dot");
}
});
Expand All @@ -66,8 +67,8 @@ function update_box() {
});

// move focus to note content on enter key press
$("#update_title").keydown(function(e){
if(e.keyCode == 13) {
$("#update_title").keydown(function (e) {
if (e.keyCode == 13) {
e.preventDefault();
$("#update_content").focus();
}
Expand All @@ -76,10 +77,85 @@ function update_box() {
update_box();

// show update box modal on click of note
$("#existing_notes").on('click','.note_title, .note_content', function() {
$("#update_modal").modal("show");
$("#existing_notes").on('click', '.note_title, .note_content', function () {

$modal = $("#update_modal");
$modal.modal("show");

// select the note
$note = $(this).parent();

$id = $note.attr("id");
$title = $note.children(".note_title").text();
$content = $note.children(".note_content").text();
$color = $note.attr("data-color");

// fill value to update modal
$("#update_title").text($title);
$("#update_content").text($content);
$("#update_note input[name='id']").val($id);

// change color accordingly
$modal.find(".dot").each(function () {
if ($(this).attr("value") == $color) {
$(this).addClass("selected_dot")
.siblings().removeClass("selected_dot");

$("#update_note_box").css("background-color", $(this).attr("value"));
}
});

// update on save button click
$modal.on('submit', "#update_note", function (event) {
event.preventDefault();

// bind form contents to hidden elements

// $("input[name='id']", this).val($id);
$("input[name='title']", this).val($("#update_title").html());
$("input[name='content']", this).val($("#update_content").html());
$("input[name='color']", this).val($(".selected_dot", this).attr("value"));
$("input[name='pinned']", this).val("false");

// select form
$form = $("#update_note");

// cache inputs
$inputs = $form.find("input");

// serialize the data
var serializedData = $form.serialize();

// console.log(serializedData);

// disable form elements for the duration of ajax request
// disabled elements do not be serialized so serialize first and disable
$inputs.prop("disabled", true);

// fire Ajax request to php/update.php
var request = $.ajax({
url: "php/update.php",
type: "POST",
data: serializedData
});

// callback handler on success
request.done(function (response, textStatus, jqXHR) {
response = JSON.parse(response);
$modal.modal("hide");

// update note on DOM
$note.children(".note_title").html(response['title']);
$note.children(".note_content").html(response['content']);
$note.attr("data-color",response['color']);
$note.attr("data-lastModified",response['last_modified']);
$note.attr("style","background-color:"+response['color']);
$note.hide().prependTo("#existing_notes").fadeIn(1000);
});

request.always(function() {
$inputs.prop("disabled",false);
});
});


});
2 changes: 1 addition & 1 deletion php/create.php
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
$result = $result -> fetch_assoc();

echo '<div class="saved_note card" id ="'.$id.'" style="background-color:'.$result['color'].';"
data-lastModified="'.$result['last_modified'].'" data-pinned="'.$result['pinned'].'">
data-lastModified="'.$result['last_modified'].'" data-pinned="'.$result['pinned'].'" data-color="'.$result['color'].'">
<div class="note_title card-header py-1">'.$result['title'].'</div>
<div class="note_content card-body py-1">'.$result['content'].'</div>
<div class="card-footer py-0">
Expand Down
2 changes: 1 addition & 1 deletion php/read.php
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
$pinned = $row['pinned'];

echo '<div class="saved_note card" id ="'.$id.'" style="background-color:'.$color.';"
data-lastModified="'.$lastModified.'" data-pinned="'.$pinned.'">
data-lastModified="'.$lastModified.'" data-pinned="'.$pinned.'" data-color="'.$color.'">
<div class="note_title card-header py-1">'.$title.'</div>
<div class="note_content card-body py-1">'.$content.'</div>
<div class="card-footer py-0">
Expand Down
69 changes: 69 additions & 0 deletions php/update.php
Original file line number Diff line number Diff line change
@@ -1,4 +1,73 @@
<?php
// include congig file
require_once "config.php";

// variables
$title = $content = "";
$color = "White";
$error = "";

// process new note creation
if($_SERVER["REQUEST_METHOD"] == "POST") {

// $rest_json = file_get_contents("php://input");
// $_POST = json_decode($rest_json, true);

// validate title
$id = isset($_POST['id']) ? $_POST['id'] : '';
$input_title = trim(isset($_POST['title']) ? $_POST['title'] : '');
$input_content = trim(isset($_POST['content']) ? $_POST['content'] : '');
$input_color = trim(isset($_POST['color']) ? $_POST['color'] : $color);

// stop XSS
$input_title = htmlspecialchars($input_title, ENT_QUOTES, 'UTF-8', false);
$input_content = htmlspecialchars($input_content, ENT_QUOTES, 'UTF-8', false);
$input_color = htmlspecialchars($input_color, ENT_QUOTES, 'UTF-8', false);

// discard if both empty
if(!empty($input_title) || !empty($input_content)) {
$title = $input_title;
$content = $input_content;
$color = $input_color;
}
else {
$error = "Empty Note ! Discarded !!";
}

// check input errors before inserting into database
if(empty($error)) {
// prepare insert statement
$sql = "UPDATE notes
SET title=?, content=?, color=?
WHERE id=?";

// prepare and bind variables
if($stmt = $conn -> prepare($sql)) {
$stmt -> bind_param("sssi",$param_title, $param_content, $param_color,$param_id);

// set parameters
$param_id = $id;
$param_title = $title;
$param_content = $content;
$param_color = $color;

// attempt to execute prepared statement
if($stmt -> execute()) {
// return newly created object
$sql = "SELECT * FROM notes WHERE id=".$id;
$result = $conn -> query($sql);
$result = $result -> fetch_assoc();

echo json_encode($result,JSON_NUMERIC_CHECK);
}

// close statement
$stmt -> close();
}

// close connection
$conn -> close();
}
}
exit();
?>

0 comments on commit 454d298

Please sign in to comment.