Use JSON As Database Using PHP | Tutorial
FINAL OUTPUT:
Hello Friends, today we are going to create a simple email list management application using php. We will use JSON as Database using php.
To achieve this task, just follow these simple steps.
Step 1.
Create a structure :
root:
–ajaxcall(folder)
–js(folder)
–vendor(folder)
–index.php
Create root folder under the server folder name with JSON database.
Now create a file index.php and write the following code under it.
[php]
<!doctype html>
<html class="no-js" lang="en" itemscope itemtype="http://schema.org/Movie">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, max-scale=1.0"/>
<title>Json database</title>
<link href="../css/pure-min.css" rel="stylesheet" type="text/css">
<link href="../css/grids-responsive-min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="../css/styles.css" rel="stylesheet" type="text/css">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22..%2Fjs%2Fjquery-2.1.3.min.js%22%20type%3D%22text%2Fjavascript%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22%2F%2Fmaxcdn.bootstrapcdn.com%2Fbootstrap%2F3.3.2%2Fjs%2Fbootstrap.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22http%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fparsley.js%2F2.0.4%2Fparsley.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjqueryui%2F1.11.3%2Fjquery-ui.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</head>
<body>
<div class="header">
<a href="../customize.php?template=announcement"><img src="../images/email.png" width="48"/>Json database Email List</a>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<h3>Groups</h3>
<hr>
<div class="table-responsive loadgrp">
<table class="table table-hover">
<tr>
<th>Name</th>
<th>Action</th>
</tr>
<tr>
<td>Group 1</td>
<td><a href="#"><i class="fa fa-pencil-square-o"></i></a>
<a href="#"><i class="fa fa-times"></i></a></td>
</tr>
</table>
</div>
</div>
<div class="col-md-6">
<h3>Email</h3>
<hr>
<div class="table-responsive loademail">
<h4 class="text-info">Choose a group to see email list</h4>
</div>
</div>
<div class="col-md-4">
<h3>Actions</h3>
<hr>
<form id="frmgrpadd">
<h3>Add Group</h3>
<div class="grpres dismiss"></div>
<div class="form-group" id="par-group">
<small><b>Group name:</b></small>
<input class="form-control input-sm" id="input-grp" type="text" name="group" required data-parsley-error-message="" data-parsley-errors-container="#par-group" data-parsley-class-handler="#par-group">
<input type="hidden" name="grpadd" value="1">
<input class="btn- btn-block btn-sm" type="submit" id="btn-grpadd" value="submit" name="grpadd">
</div>
</form>
<form id="frmemailadd" method="POST">
<h3>Add Email</h3>
<div class="emailres dismiss"></div>
<div class="form-group" id="par-select">
<small><b>Group name:</b></small>
<select class="form-control input-sm" id="select-grp" name="group_id" required data-parsley-error-message="" data-parsley-errors-container="#par-select" data-parsley-class-handler="#par-select">
<option value="">select</option>
</select>
</div>
<div class="form-group" id="par-pname">
<small><b>Person Name:</b></small>
<input class="form-control input-sm" id="input-name" type="text" name="name" required data-parsley-error-message="" data-parsley-errors-container="#par-pname" data-parsley-class-handler="#par-pname">
</div>
<div class="form-group" id="par-emailid">
<small><b>Email ID:</b></small>
<input class="form-control input-sm" id="input-email" type="email" name="email" required data-parsley-error-message="" data-parsley-errors-container="#par-emailid" data-parsley-class-handler="#par-emailid">
</div>
<input type="hidden" name="emailadd" value="1">
<input class="btn- btn-block btn-sm" type="submit" id="btn-emailadd" value="submit" name="emailadd">
</form>
</div>
</div>
</div>
<!– Modal –>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Edit record</h4>
</div>
<div class="modal-body modal-grp-edit">
</div>
<div class="modal-footer"></div>
</div>
</div>
</div>
<!–jquery confirm box–>
<a class="confirmLink" href="#"></a>
<div id="dialog" title="Confirmation Required">
Are you sure to delete?
</div>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22js%2Fmain.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</body>
[/php]
Step 2.
Now create following file under the folder ajax call.
email_edit.php
fetch.php
group_edit.php
and write the following code in fetch.php or copy the code and paste in it.
[php]
<?php //fetch.php //error_reporting(0); define(‘LAZER_DATA_PATH’, realpath(dirname(__FILE__)).’/data/’); require_once ‘../vendor/autoload.php’; use Lazer\Classes\Database as Lazer; //if table does not exists create try{ \Lazer\Classes\Helpers\Validate::table(’email’)->exists();
} catch(\Lazer\Classes\LazerException $e){
Lazer::create(’email’, array(
‘name’ => ‘string’,
’email’ => ‘string’,
‘group_id’ => ‘integer’
));
}
//if table does not exists create
try{
\Lazer\Classes\Helpers\Validate::table(‘group’)->exists();
}catch(\Lazer\Classes\LazerException $e){
Lazer::create(‘group’, array(
‘name’ => ‘string’,
));
}
$email = Lazer::table(’email’);
$group = Lazer::table(‘group’);
//Fetch all groups
if(isset($_POST[‘fetchgrp’])): ?>
<table class="table table-hover">
<tr>
<th>Name</th>
<th>Action</th>
</tr>
<?php $group_result = Lazer::table(‘group’)->findAll(); ?>
<?php if(count($group_result)> 0){ ?>
<?php foreach ($group_result as $grp): ?>
<tr>
<td class="viewlist" tid="<?php echo $grp->id ?>"><?php echo $grp->name ?></td>
<td><a href="#" data-url="ajaxcall/group_edit.php?id=<?php echo $grp->id?>" class="btn-update" data-toggle="modal" data-target="#myModal"><i class="fa fa-pencil-square-o"></i></a>
<a href="#" class="delgrp" data-id="<?php echo $grp->id ?>"><i class="fa fa-times"></i></a>
</td>
</tr>
<?php endforeach; ?>
<?php }else{echo’No Record Found’;}?>
</table>
<?php endif; //Fetch all email relates to particular group if(isset($_POST[‘fetchemail’])):?>
<?php $id = $_POST[‘fetchemail’] ; $email_result = Lazer::table(’email’)->where(‘group_id’, ‘=’, $id)->findAll();
// $email_result = Lazer::table(’email’)->findAll();
// var_dump($email_result);
?>
<table class="table table-hover">
<tr>
<th>Name</th>
<th>Email</th>
<th>Action</th>
</tr>
<?php if(count($email_result)> 0){ ?>
<?php foreach ($email_result as $em): ?>
<tr>
<td><?php echo $em->name ?></td>
<td><?php echo $em->email ?></td>
<td><a href="#" data-url="ajaxcall/email_edit.php?id=<?php echo $em->id?>" class="btn-update" data-toggle="modal" data-target="#myModal"><i class="fa fa-pencil-square-o"></i></a>
<a href="#" class="delemail" data-id="<?php echo $em->id ?>"><i class="fa fa-times"></i></a>
</td>
</tr>
<?php endforeach; ?>
<?php }else{echo ‘No Record Found’;}?>
</table>
<?php endif; //Delete email if(isset($_POST[‘deleteemail’])): $id = $_POST[‘deleteemail’] ; Lazer::table(’email’)->find($id)->delete();
endif;
//Delete Group
if(isset($_POST[‘deletegroup’])):
$id = $_POST[‘deletegroup’] ;
Lazer::table(‘group’)->find($id)->delete();
//check whether email are exists or not to related group
if(emailExists($id)){
Lazer::table(’email’)->where(‘group_id’, ‘=’, $id)->find()->delete();
}
endif;
//Update email record
if(isset($_POST[‘recordupdate’])):
$id= $_POST[‘id’];
$grp_id = intval($_POST[‘group_id’]);
$name = $_POST[‘name’];
$email_id = $_POST[’email’];
$row = Lazer::table(’email’)->find($id);
$row->name = $name;
$row->email = $email_id;
$row->group_id = $grp_id;
$row->save();
echo’
<div class="alert alert-success">Record updated successfully</div>
‘;
endif;
//Update group record
if(isset($_POST[‘groupupdate’])):
$id= $_POST[‘id’];
$name = $_POST[‘group’];
$row = Lazer::table(‘group’)->find($id);
$row->name = $name;
$row->save();
echo’
<div class="alert alert-success">Record updated successfully</div>
‘;
endif;
//Add new group
if(isset($_POST[‘grpadd’])):
$name = (string)trim($_POST[‘group’]);
if($name){
$group->name = $name;
$group->save();
echo ‘
<div class="alert alert-success text-center" style="padding: 5px">Record Added Successfully</div>
‘;
}
else{
echo ‘
<div class="alert alert-warning text-center" style="padding: 5px">Invalid group</div>
‘;
}
endif;
//Add new email Record
if(isset($_POST[’emailadd’])):
$group = intval($_POST[‘group_id’]);
$name = $_POST[‘name’];
$email_id = $_POST[’email’];
if(!empty($group)){
if(!empty($name)){
if(!empty($email)){
$email->name = $name;
$email->email = $email_id;
$email->group_id = $group;
$email->save();
echo ‘
<div class="alert alert-success text-center" style="padding: 5px">One record added Successfully</div>
‘;
}
else{
echo ‘
<div class="alert alert-warning text-center" style="padding: 5px">Invalid Email</div>
‘;
}
}
else{
echo ‘
<div class="alert alert-warning text-center" style="padding: 5px">Invalid user name</div>
‘;
}
}
else{
echo ‘
<div class="alert alert-warning text-center" style="padding: 5px">Invalid group</div>
‘;
}
endif;
//Populate select box
if(isset($_POST[‘populateSelect’])):
$group_result = Lazer::table(‘group’)->findAll(); ?>
<option value="">Select</option>
<?php foreach ($group_result as $re):?>
<option value="<?php echo $re->id?>"><?php echo $re->name?></option>
<?php endforeach; endif; //Fetch recipients email from relared group if(isset($_GET[‘fetchRecipients’])): $id = $_GET[‘fetchRecipients’] ; $email_result = Lazer::table(’email’)->where(‘group_id’, ‘=’, $id)->findAll();
$emails = array();
foreach ($email_result as $em){
$emails[] = $em->email;
}
echo implode(‘,’, $emails);
endif;
//Function for check whether email record exists or not for particular record
function emailExists($id){
$row = Lazer::table(’email’)->where(‘group_id’, ‘=’, $id)->findAll()->count();
return $row;
}
exit;
?>
[/php]
Now copy and paste the following code in email_edit.php
[php]
<?php define(‘LAZER_DATA_PATH’, realpath(dirname(__FILE__)).’/data/’); require_once ‘../vendor/autoload.php’; use Lazer\Classes\Database as Lazer; $id= intval($_GET[‘id’]); $email = Lazer::table(’email’)->limit(1)->find($id);
$group_result = Lazer::table(‘group’)->findAll();
?>
<form id="frmemailupdate">
<div class="response">
</div>
<div class="form-group">
<small><b>Group name:</b></small>
<select class="form-control input-sm" id="select-grp1" name="group_id">
<?php foreach ($group_result as $re):?>
<option value="<?php echo $re->id?>"><?php echo $re->name?></option>
<?php endforeach; ?>
</select>
</div>
<div class="form-group" id="par-name">
<small><b>Person Name:</b></small>
<input class="form-control input-sm" id="input-name" type="text" name="name" value="<?php echo $email->name ?>" required data-parsley-error-message="" data-parsley-errors-container="#par-name" data-parsley-class-handler="#par-name">
</div>
<div class="form-group" id="par-email">
<small><b>Email ID:</b></small>
<input class="form-control input-sm" id="input-email" type="email" name="email" value="<?php echo $email->email ?>" required data-parsley-error-message="" data-parsley-errors-container="#par-email" data-parsley-class-handler="#par-email">
</div>
<input type="hidden" name="id" value="<?php echo $id ?>">
<input type="hidden" name="recordupdate" value="1">
<input class="btn- btn-block btn-sm" type="submit" id="emailupdate" value="save" name="emailupdate">
</form>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%20%20%20%24(document).ready(function%20()%7B%0A%20%20%20%20%20%20%20%20%24(%22%23select-grp1%22).val(%3C%3Fphp%20echo%20%24email-%3Egroup_id%20%3F%3E)%3B%0A%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%24(‘%23frmemailupdate’).parsley(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20successClass%3A%20’has-success’%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20errorClass%3A%20’has-error’%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20uiEnabled%3A%20true%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20errors%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20classHandler%3A%20function(el)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20el.parent()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20Set%20these%20to%20empty%20to%20make%20sure%20the%20default%20Parsley%20elements%20are%20not%20rendered%0A%20%20%20%20%20%20%20%20%20%20%20%20errorsWrapper%3A%20”%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20errorElem%3A%20”%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20errorsWrapper%3A%20”%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20errorElem%3A%20”%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%24(%22%23frmemailupdate%22).submit(function%20(e)%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20e.preventDefault()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%24.ajax(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20url%3A%20%22ajaxcall%2Ffetch.php%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20data%3A%20%24(this).serialize()%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20type%3A%22POST%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D).done(function(res)%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24(%22.response%22).html(res)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20window.location.reload()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%7D)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
[/php]
Now copy and paste the following code in group_edit.php
[php]
<?php define(‘LAZER_DATA_PATH’, realpath(dirname(__FILE__)).’/data/’); require_once ‘../vendor/autoload.php’; use Lazer\Classes\Database as Lazer; $id = intval($_GET[‘id’]); $group = Lazer::table(‘group’)->find($id);
?>
<form id="frmgrpupdate" method="POST">
<div class="response">
</div>
<div class="form-group" id="par-name">
<small><b>Group name:</b></small>
<input class="form-control input-sm" id="input-grp" type="text" name="group" value="<?php echo $group->name?>" required data-parsley-error-message="" data-parsley-errors-container="#par-name" data-parsley-class-handler="#par-name" >
<input type="hidden" name="id" value="<?php echo $id?>">
<input type="hidden" name="groupupdate" value="1">
<input class="btn- btn-block btn-sm" type="submit" id="btn-grpupdate" value="save" name="grpupdate">
</div>
</form>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%20%20%20%24(document).ready(function%20()%7B%0A%20%20%20%20%20%20%20%20%24(‘%23frmgrpupdate’).parsley(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20successClass%3A%20’has-success’%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20errorClass%3A%20’has-error’%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20uiEnabled%3A%20true%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20errors%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20classHandler%3A%20function(el)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20el.parent()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20Set%20these%20to%20empty%20to%20make%20sure%20the%20default%20Parsley%20elements%20are%20not%20rendered%0A%20%20%20%20%20%20%20%20%20%20%20%20errorsWrapper%3A%20”%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20errorElem%3A%20”%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20errorsWrapper%3A%20”%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20errorElem%3A%20”%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%24(%22%23frmgrpupdate%22).submit(function%20(e)%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20e.preventDefault()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%24.ajax(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20url%3A%20%22ajaxcall%2Ffetch.php%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20data%3A%20%24(this).serialize()%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20type%3A%22POST%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D).done(function(res)%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24(%22.response%22).html(res)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20getGroup()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20populateSelect()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%7D)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
[/php]
Don’t forget to share your doubts in the comment box and also share this post on social media and with your friends because “You share, I share, let’s make the world aware”.
You may want to take a look at the following related posts:
- Ajax Login System in PHP Codeigniter
- Create, Read, Update and Delete Records in Codeigniter using Ajax – CRUD OPERATION
- Create A Simple Website Using Codeigniter
Also for more awesome tutorials, please don’t forget to like our facebook page Meul Tech .
Bonus: We also give training on following topics:
1. Codeigniter Training in Mumbai .
2. Web Designing Training in Mumbai.
3. Bootstrap Training Course in Mumbai.
4. UI / UX Training.