Angular JS Facebook Wall System with Multiple Bindings Tutorial
Wall Script
Follow Me:
Sunday, July 31, 2016

Angular JS Facebook Wall System with Multiple Bindings Tutorial

Today, I am here to introduce a new Advanced Javascript series in 9Lessons.info. Basically, I love wall system because we can cover multiple operations or features in a single web page. 9Lessons.info is most popular for its articles designed on wall system. This article is based on this wall system concept using Angular js 1.4. Future posts will be on the same concept where I will be introducing ReactJS and AngularJS 2 to 9Lessons.info. Below is the demo and hope you all enjoy this new series

Ad Blocker Detector for Blogger with JavaScript


Download Script     Live Demo

Create a HTML Page
index.php
Here you have to include Angular JavaScript library in HEAD tag.
<!DOCTYPE html>
<html>
<head>
<title>Wall System</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="js/wall.js"></script>
<link rel="stylesheet" type="text/css" href="css/wall.css" />
</head>
<body>
<div id="container">
// Wall Grid Code
</div>
</body>
</html>

wall.js
Create a JavaScript file using favorite text editor. Include a Angular model myApp and controller myWall.
var app=angular.module("myApp",[]);
app.controller('myWall',  function($scope$http$timeout)
{
// All the code comes here.
};
In this we are going to use built-in service called $http(communicate with http requests), $timeout(setTimeout) and $scope (application object).

Angular Implementation
Apply Angular code to the HTML by using ng-app and ng-controller. This Wall System divided into multiple HTML blocks.
<div id="container" ng-app="myApp" ng-controller="myWall">
<div id="wallFeed">
<h1>Wall System</h1>
1) Wall Update Form
2) Wall Feed Grid
[
2.1) Wall Feed Update
2.2) Wall Feed Comment Link
2.3) Wall Feed Comments Grid
2.4) Wall Feed Comment Form
 ]
</div>
</div>
Read Status Message Design with CSS this post for more information.

1) Wall Update Form
HTML code for updating user status message.
<form>
<textarea id="updateBox" ></textarea>
<input type="submit" value="Post" id="wallPost"  />
</form>

Status Update Box

2) Wall Feed Grid
Complete news feed grid, this part contains multiple operations.
<div class="feedBody">
2.1) Wall Feed Update
2.2) Wall Feed Comment Link
2.3) Wall Feed Comments Grid
2.4) Wall Feed Comment Form
</div>

Status Update Box

2.1) Wall Feed Update
User update status.
<img src="profile.jpg" class="feedImg" />
<div class="feedText" >
<b>Demo User Name</b>
<a href="#delete1"  class="feedDelete">X</a>
<span>Update Content</span>
</div>

Status Update Box

2.2) Wall Feed Comment Link
Comment link for accessing Comment form.
<div class="feedLinks"><a href="#1" class="commentLink">Comment</a></div>

2.3) Wall Feed Comments Grid 
Comments Grid.
<div class="feedCommentGrid">
<img src="commentUser.jpg" class="commentImg" />
<div class="commentText">
<b>Comment User Name</b>
<a href="#11" class="commetDelete">X</a>
<div> Comment Content</div>
</div>
</div>

Status Update Box

2.4) Wall Feed Comment Form 
Comment form
<div class="feedCommentForm" >
<textarea class="commentInput"  id="commenInput1"></textarea>
<input type="submit" value="Comment"  class="commentSubmit"/>
</div>

Status Update Box

Working with Angular Controllers

Display News Feed/User Updates
Using Angular $http service, we are getting the user news feed response based on the user session id.
app.controller('myWall',  function($scope, $http$timeout){

//Default http header
$http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';

// Newsfeed call
$http({
method : "POST",
url : "newsFeed.php",
data : ""
}).then(function(response)
{
$scope.updatesData=response.data.updates;
});

// Other code
........
........

}

More information about user news feed database design and Create a RESTful services using Slim PHP Framework

HTML Data Binding
Using np-repeat directive bind the JSON data to HTML template. Read more about AngularJS Tutorial Two Way Data Binding.
<div class="feedBody" ng-repeat="data in updatesData">
2.1) Wall Feed Update
2.2) Wall Feed Comment Link
2.3) Wall Feed Comments Grid
2.4) Wall Feed Comment Form
</div>

newsFeed.php
Here you have to implement database connection and get the user information in JSON format.
{"updates": [
{
"user_id": "1",
"name": "Srinivas Tamada",
"profile_pic": "user1_14572474701.png",
"update_id": "62",
"user_update": "The Wall Script http://www.thewallscript.com",
"comments": [
//Comments Data
]
},
{
"user_id": "3",
"name": "Arun Kumar",
"profile_pic": "user10_14547044391.jpg",
"update_id": "50",
"user_update": "Create Dynamic Subdomains using PHP and Htaccess http://www.9lessons.info/2016/03/how-to-create-dynamic-subdomains-using-php-and-htaccess.html",
"comments": [
//Comments Data
]
}
]}

2.1) Wall Feed Update #Angular
Implement Angular expressions based on about JSON objects.
<img ng-src="{{data.profile_pic}}" class="feedImg" />
<div class="feedText" >
<b>{{data.name}}</b>
<a href="#delete{{data.update_id}}"  class="feedDelete">X</a>
<span>{{data.user_update}}</span>
</div>

Delete Feed
JavaScript function calls deleteUpdate.php. If the server response is true, using splice function data object will remove from the updatesData(feeds data object)
$scope.deleteFeed=function(updateID, index)
{
if(updateID>0)
{
$http({
method : "POST",
url : "deleteUpdate.php",
data : 'updateID='+updateID
}).then(function(response){
if(response){
$scope.updatesData.splice(index,1);
}
});
}
}

HTML Code
Using ng-click call the controller function, here $index is referred to data set object.
<a href="#delete{{data.update_id}}"  class="feedDelete"

ng-click="deleteFeed(data.update_id$index)">X</a>

Comment HTML
Toggling comment form on comment link, here changing the commentForm value based on clicks.
<div class="feedLinks"><a href="#1" class="commentLink" ng-click="commentToggle($index)">Comment</a></div>

<div class="feedCommentGrid">
// 2.3.1 Comment Code
</div>

<div class="feedCommentForm" ng-show="commentForm[$index]">
<textarea class="commentInput" ></textarea>
<input type="submit" value="Comment"  class="commentSubmit"/>
</div>

Comment Toggle Function
Change commentForm value  , focusing the input after 200 milli seconds.
$scope.commentForm = {};
$scope.commentToggle=function(index)
{
$scope.commentForm[index] = !$scope.commentForm[index];
// Comment Input focus
$timeout(function () {
document.getElementById('commenInput'+index).focus();
}, 200);
}

Comments JSON
newsFeed.php will generate following JSON.
{"updates": [
{
"user_id": "1",
"name": "Srinivas Tamada",
"profile_pic": "user1_14572474701.png",
"update_id": "62",
"user_update": "The Wall Script http://www.thewallscript.com",
"comments": [{
          "com_id": "62",
          "uid_fk": "80",
          "comment": "ola",
          "name": "eliasfarias",
          "profile_pic": "user80_14688066161.jpg"
        },
        {
          "com_id": "72",
          "uid_fk": "221",
          "comment": "its a party",
          "name": "rpg",
          "profile_pic": "user221_14690532461.jpg"
        }]
}
]
}

Comment Binding Data
Binding data with comments HTML grid.
<div  class="feedCommentGrid" ng-repeat="commentData in data.comments">
<img ng-src="{{commentData.profile_pic}}" class="commentImg" />
<div class="commentText">
<b>{{commentData.name}}</b>
<a href="#{{data.update_id}}{{$index}}"  class="commetDelete">X</a>
<div>{{commentData.comment}} </div>
</div>
</div>


Delete Comment
Delete function, this will send updateID and commentID values to deleteComment.php
// Delete comment
$scope.deleteComment=function(commentIndex, parentIndex, updateID, commentID)
{
if(updateID>0)
{
$http({
method : "POST",
url : "deleteComment.php",
data : 'updateID='+updateID+'&commentID='+commentID
}).then(function(response){
if(response){
$scope.updatesData[parentIndex].comments.splice(commentIndex,1);
}
});
}
}


Delete Comment HTML
Using ng-click button triggering to deleteComment function.
<a href="#{{data.update_id}}{{$index}}"  class="commetDelete" 
ng-click="deleteComment($index, $parent.$index, data.update_id, commentData.com_id)">X</a>


Update Comment
Comment submit using JavaScript push function, appending data in comments grid.
// Update comment
$scope.updateComment=function(commentSubmitData,index,updateID)
{
if(commentSubmitData.commentValue)
{
$http({
method : "POST",
url : "updateComment.php",
data : 'updateID='+updateID+'&user_comment='+commentSubmitData.commentValue
}).then(function(response){
$scope.updatesData[index].comments.push(response.data.comments[0]);
commentSubmitData.commentValue='';
document.getElementById('commenInput'+index).focus();
});
}
}


Update Comment HTML
<div class="feedCommentForm" ng-show="commentForm[$index]">
<textarea class="commentInput"  id="commenInput{{$index}}
ng-model="commentSubmitData.commentValue" ></textarea>
<input type="submit" value="Comment"  class="commentSubmit" 
ng-click="updateComment(commentSubmitData, $index, data.update_id)"/>
</div>



Update Wall Form
Here updateBox is ID name of the textarea tag, feedValue is the textarea ng-model value. JSON response prepend using unshift function.
//Focus update box on page load.
document.getElementById('updateBox').focus();

//Update feed.
$scope.updateFeed=function()
{
if($scope.feedValue)
{
$http({
method : "POST",
url : "updateFeed.php",
data : 'user_update='+$scope.feedValue
}).then(function(response)
{
$scope.updatesData.unshift(response.data.updates[0]);
$scope.feedValue="";
document.getElementById('updateBox').focus();
});
}
}


Wall Update Form
Using Angular ng-click directive, submit action is triggered to updateFeed()
<form>
<textarea ng-model="feedValue" id="updateBox" ></textarea>
<input type="submit" value="Post" id="wallPost" ng-click="updateFeed()" />
</form>

Text to Link Filter
Using regular expression, converting test to link. Here $sce means strict contextual escaping services to AngularJS.
var app=angular.module("myApp",[]);

// Text to link filter
app.filter('textToLink', function ($sce)
{
var urlReg = /(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&amp;:\/~+#-]*[\w@?^=%&amp;\/~+#-])?/gi;
return function (text)
{
var htmlData= text.replace(urlReg, '<a target="_blank" href="$&">$&</a>');
return $sce.trustAsHtml(htmlData);
};
});

app.controller('myWall',  function($scope, $http, $timeout)
{
// Wall control code.
};

Appling Filter to Data Objects
Just replace HTML code in following way.
<span>{{data.user_update}}</span>
to
<span ng-bind-html="data.user_update | textToLink"></span>


<div>{{commentData.comment}}</div>
to
<div ng-bind-html="commentData.comment | textToLink"></div>



Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


10 comments:

  1. Thanks for Well detailed article. I've implemented wall with vueJs.

    ReplyDelete
  2. I will be glad if you walk us through "how to send sms to mobile phone from website"

    ReplyDelete
  3. Thanks for wall script. But there is big scope of refactoring.

    ReplyDelete
  4. rEALLY Great conspirator, good knowledge.... i afford to miss another tutorial from 9lessons...

    ReplyDelete
  5. As Every Lesson again it was AWESOME :)

    ReplyDelete

Make in India