Introduction
In this article I will create a comment application with Angular JS in PHP. For this application first of all I will create a table in the database for storing the posted comments and then you will make a comments application using angular JS and PHP. And I will explain JSON parsing used with Angular JS and PHP; this is called two-way data binding. In angular JS, data binding is a very useful feature but I will use these techniques for making a comment application and angular JS is very comfortable for this application. You also can easily use it in your PHP application for making simple comments.
Now, let's start the table.
![table artitecture]()
Example
This is the "Index.php" file.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
textarea{
border:solid 1px #ccc;
width:520px;
height:30px;
font-family:arial;padding:5px}
.mainn{margin:0 auto;width:530px; text-align:left:}
.updates
{
padding:15px 5px 15px 5px ;
border-bottom:1px solid #CCCCCC;
background-color:#f2f2f2;
}
.updates a{
color:#FF3366;
font-size: 14px;
text-decoration: none;
}
.updates a:hover{text-decoration:underline;
}
.button
{
padding:10px;
margin: -43px -120px 0;
float:right;
background-color: #94B58B;
border-radius: 66px 66px 66px 66px;
color:#fff;
font-weight:bold;
text-decoration:none;
}
</style>
<style type="text/css" src="messgs.css" rel="stylesheet"></style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('.link').click(function()
{
$('.main').hide();
var data=$('.main').html();
$('.link').show();
$('.change_box').html(data);
$('.change_box').focus();
});
$(".change_box").mouseup(function()
{
return false
});
$(".change_box").change(function()
{
$('.link').hide();
var boxval = $(".change_box").val();
var dataString = 'data='+ boxval;
$.ajax({
type: "POST",
url: "update.php",
data: dataString,
cache: false,
success: function(html)
{
$('.main').html(boxval);
$('.main').show();
}
});
});
$(document).mouseup(function()
{
$('.link').hide();
$('.main').show();
});
});
</script>
</head>
<?php
ini_set('display_errors',0);
include("config.php");
$user_id=$session_id;
$sql=mysql_query("select messages from messgs where user_id='$user_id'");
$row=mysql_fetch_array($sql);
$post=$row['messages'];
?>
<body>
<div class="main"><?php echo $post; ?></div>
<div class="link" style="display:none">
<textarea class="change_box" cols="23" rows="3" ></textarea>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script>
function messageController($scope, $http)
{
$http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
$http.get("main.php?action=displayComments").success(function(data)
{
$scope.messgs = data;
});
$scope.postMessage = function(messg){
// Validate the messg is not an empty
if("undefined" != messg.msg){
$http({
method : "POST",
url : "main.php",
data : "action=add&msg="+messg.msg
}).success(function(data){
$scope.messgs.unshift(data);
});
$scope.messg = "";
}
}
$scope.removeComment = function(index){
// Angular AJAX call
$http({
method : "GET",
url : "main.php?action=delete&id="+$scope.messgs[index].id,
}).success(function(data){
// Removing Data from Global DOM
$scope.messgs.splice(index,1);
});
}
}
</script>
<div ng-app id="ng-app" class="mainn">
<div ng-controller="messageController">
<!-- Update Box -->
<textarea name="submitComment" ng-model="messg.msg" placeholder="write comments here"></textarea>
<a href="javascript:void(0);" class="button" ng-click="postMessage(messg)">Post Comment</a>
<!-- Comments -->
<div ng-repeat="messg in messgs">
<div class="updates">
<a href="javascript:void(0);" ng-click="removeComment($index);">delete</a>
<a href="#" class="link" title="Edit Your Post">Edit</a>
{{messg.msg}}
</div>
</div>
</div>
</div>
</body>
</html>
And next is the "messages.php" file. In this file I will make the connection and methods for the post, display and remove application.
<?php
class hello {
const servername = "localhost";
const username = "root";
const password = "";
const database = "demo";
private static $extend = NULL;
private $connn;
private function __construct(){
$this->connection = mysql_connect(self::servername, self::username, self::password);
if($this->connection){
mysql_select_db(self::database, $this->connection);
}
}
private function __clone(){
}
protected static function helloInstance(){
if(NULL == self::$extend){
self::$extend = new self;
}
return self::$extend;
}
}
class messgs extends hello {
var $con;
public function __construct(){
parent::helloInstance();
}
public function displayComments(){
$query1="SELECT message_id, messages, timestamp FROM comments ORDER BY timestamp DESC";
$res = mysql_query($query1);
$storeData = array();
while($rows = mysql_fetch_array($res)){
$storeData[] = array("id" => $rows['message_id'],
"msg" => $rows['messages'],
"timestamp" => $rows['timestamp']);
}
return json_encode($storeData);
}
public function postMessage($post){
$messages = mysql_escape_string($post['msg']);
$time = time();
$id = 0;
$query2="INSERT INTO comments(messages,timestamp)VALUES('{$messages}','{$time}')";
$res = mysql_query($query2)or die(mysql_error());
$id = mysql_insert_id();
return json_encode(array("id" => $id,
"msg" => stripslashes($messages),
"timestamp" => $time));
}
public function removeComment($id){
(int)$id = mysql_escape_string($id);
$query3="DELETE FROM comments WHERE message_id = ".$id;
$del = mysql_query($query3);
if($del)
return true;
return false;
}
}
?>
And next is the "main.php" file.
<?php
require_once("messages.php");
$messg = new messgs();
if(isset($_GET['action']) and $_GET['action'] == "displayComments"){
echo $messg->displayComments();
exit;
}
if(isset($_GET['action']) and $_GET['action'] == "delete"){
$messg->removeComment($_GET['id']);
exit;
}
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST"){
echo $messg->postMessage($_POST);
exit;
}
?>
Output
Step 1
![comment box]()
Step 2
![write comment]()
Step 3
![show your posted comment]()
Step 4
![saved comment in your table]()