AJAX-JSON Data Manipulator

Introduction

Today we will do a little bit of experiment. We will use CSS, JavaScript, JQuery and HTML5 to create a data storage system that will update data manually. So, for this we will need a file with the extension as ‘.json’.

A PHP file to edit the Json file every time the user enter a data. Every time the user enter a data, JQuery using JavaScript engine will sent an AJAX request to the server file with the “.php” exension. The server via the php file will then receive data’s that were entered and will process it according to our instructions. Our instruction will be to receive the JSON stringified object and write it into the “.Json” file.

Every time a record is entered, a request will be sent to the server.

Let’s make a design

index.html

<html>
	<head>
		<script src = "jquery.min.js"></script>
		<link rel = "stylesheet" href = "style.css"/>
	</head>
	<body class = "d-flex">
		<div class = "left d-flex">
			<form autocomplete= "off">
				<h1>Add A Record</h1>
				<input type = "text" id = "name" placeholder="Name"/><br/>
				<input type = "number" id = "age" placeholder = "Age"/><br/>
				<button>Add New Record</button>
			</form>
			<div class = "rip">></div>
		</div>
		<div class= "tableinside right d-flex"></div>
		<script src= "main.js"></script>
	</body>
</html>

style.css

@font-face{
	src: url(Staatliches-Regular.ttf);
	font-family:Staatliches;
}
*{
	font-family:Staatliches;
	transition:all .3s ease;
}
body{
	margin:0;
	background:#aaa;
}
.d-flex{
	display:flex;
	justify-content:center;
	align-items:center;
}
.left,.right{
	min-width:50%;
	height:100vh;
}
.left{
	background:#333;
	border-top-right-radius:500px;
	border-bottom-right-radius:500px;
	position:relative;
}
.right{
	background:#aaa;
}
form input{
	height:50px;
	border:1px solid #e5e5e5;
	padding:5px;
	font-size:18px;
}
form *{
	margin:3px;
	width:300px;
}
form input:focus, form button:focus{
	outline-offset: -2px;
	outline:2px ridge rgba(0,0,225,0.5);
}
form button{
	background:#eee;
	font-size:18px;
	border:1px solid #e5e5e5;
	cursor:pointer;
	color:#333;
}
form button:hover{
	color:#000;
}
form h1{
	color:#fff;
	font-weight:100;
}
table{
	border-collapse:collapse;
	max-width:80%;
	min-width:80%;
	margin-top:50%;
	margin-bottom:10%;
}
table td, table th{
	padding:6px 4px;
	font-size:18px;
}
table th{
	font-size:23px;
	cursor:pointer;
	user-select:none;
}
table tr:nth-child(even){
	background:rgba(0,0,0,0.05);
}
.absl{
	position:absolute;
	color:#f3f3f3;
	text-decoration:none;
	left:5px;
	bottom:5px;
}
.tableinside{
	overflow-y:scroll;
}
.tableinside::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

.tableinside::-webkit-scrollbar-thumb
{
	background-color: #F90;	
	background-image: -webkit-linear-gradient(45deg,
	                                          rgba(255, 255, 255, .2) 25%,
											  transparent 25%,
											  transparent 50%,
											  rgba(255, 255, 255, .2) 50%,
											  rgba(255, 255, 255, .2) 75%,
											  transparent 75%,
											  transparent)
}

html,body{
	overflow:hidden
}
.rip{
	font-size:90px;
	opacity:0.6;
	position:absolute;
	top:10px;
	right:30px;
}
form,.rip{
	
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* Standard syntax */
}

Fonts

I will use Staatliches-Regular.ttf as a font for my website.

The Programming

Don’t forget to include the JQuery Framework.

var JsonStr = "";
$(document).ready(function(){
	function loadct(){
		$.getJSON( "products.json", function( data ) {
			var strtable = "<table border = '1' id = 'myTable2'><thead><tr><th>Name</th><th>Age</th></tr></thead><tbody>";
			JsonStr = data;
			$.each(data, function(key,value) {
				strtable += "<tr>" + "<td>" + value.name + "</td>" + "<td>" + value.age + "</td>" + "</tr>";
			});
			strtable += "</tbody></table>";
			$('.tableinside').html(strtable);
		});
	}
	loadct();
	$("form").submit(function(e){
		e.preventDefault();
		$name = $('#name').val();
		$age = $('#age').val();
		if($name != '' && $age != ''){
			JsonStr.push({"name":$name,"age":$age});
			JsonStr = JSON.stringify(JsonStr);
			$.post("ajax_data_manipulator.php",
			{
				newcontent : JsonStr
			},
			function(data, status){
				if(data == 1){
					loadct();
					$("form").trigger("reset");
				}
				else{
					alert("Can't Update");
				}
			});
		}
		else{
			alert("Please Enter Some Values");
		}
	});
var thIndex = 0,
    curThIndex = null;

$(function(){
  var deg = 90;
  $('table thead tr th').click(function(){
	deg += 180;
	$(".rip").css("transform","rotate(" + deg + "deg)");
    thIndex = $(this).index();
    if(thIndex != curThIndex){
      curThIndex = thIndex;
      sorting = [];
      tbodyHtml = null;
      $('table tbody tr').each(function(){
        sorting.push($(this).children('td').eq(curThIndex).html() + ', ' + $(this).index());
      });
      
      sorting = sorting.sort();
      sortIt();
    }
  });
})

function sortIt(){
  for(var sortingIndex = 0; sortingIndex < sorting.length; sortingIndex++){
  	rowId = parseInt(sorting[sortingIndex].split(', ')[1]);
  	tbodyHtml = tbodyHtml + $('table tbody tr').eq(rowId)[0].outerHTML;
  }
  $('table tbody').html(tbodyHtml);
}
});

ajax_data_manipulator.php

This is a very small code to update a json file.

<?php
if(isset($_POST['newcontent'])){
	$file = fopen("products.json","w+");
	fwrite($file,$_POST['newcontent']);
	fclose($file);
	echo 1;
}
else{
	echo 0;
}
?>

The JSON File

The json file should be named as “products.json”

Summary

Mission Accomplished. 🙂

2 thoughts on “AJAX-JSON Data Manipulator

Leave a Reply

Your email address will not be published. Required fields are marked *

www.000webhost.com