Create A Comment Application In PHP

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