Untuk langkah awal kita membuat fungsi php untuk mencegah serangan dari CSRF (Cross-site Request Forgery) atau serangan hacking. Dan menghapus segala yang mengandung skrip html, javascript dan sejenisnya.
function clean_input($input) {
$search = array(
'@<script[^>]*?>.*?</script>@si',
'@<[\/\!]*?[^<>]*?>@si',
'@<style[^>]*?>.*?</style>@siU',
'@<![\s\S]*?--[ \t\n\r]*>@'
);
$output = preg_replace($search, '', $input);
return $output;
}
function crypto_rand_secure($min, $max) {
$range = $max - $min;
if($range < 0) return $min;
$log = log($range, 2);
$bytes = (int) ($log / 8) + 1;
$bits = (int) $log + 1;
$filter = (int) (1 << $bits) - 1;
do {
$rnd = hexdec(bin2hex($bytes));
$rnd = $rnd & $filter;
} while ($rnd >= $range);
return $min + $rnd;
}
function get_token($length) {
$token = '';
$codeAlphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
$codeAlphabet .= 'abcdefghijklmnopqrstuvwxyz';
$codeAlphabet .= '0123456789';
for($i=0; $i<$length; $i++) {
$token .= $codeAlphabet[crypto_rand_secure(0, strlen($codeAlphabet))];
}
return $token;
}
Selanjutnya dibawah ini adalah skrip dimana proses mengirim data menggunakan jquery kemudian di tampilkan kembali data yang telah di input dan jquery proses like.
$(document).ready(function() {
var msg = '#message';
$('.time').timeago();
$(msg).autosize();
$('#post_comment').click(function() {
$(msg).focus();
});
$(msg).keypress(function(e) {
if(e.which == 13) {
var val = $(msg).val();
$.ajax({
url: 'php/ajax.php',
type: 'GET',
data: 'token=<?php echo $token; ?>&msg='+escape(val),
success: function(data) {
$(msg).val('');
$(msg).css('height','14px');
$('#commentscontainer').append(data);
$('.time').timeago();
}
});
}
});
$('#like_post').click(function() {
var count = parseFloat($('#count').html()) + 1;
if(count > 1) {
$('#if_like').html('Anda dan');
$('#people').html('lainnya');
} else {
$('#if_like').html('Anda suka ini.');
$('#likecontent').hide();
}
$('#like_post').hide();
$('#unlike_post').show();
});
$('#unlike_post').click(function() {
var count = parseFloat($('#count').html()) - 1;
if(count < 1) {
$('#likecontent').show();
}
$('#unlike_post').hide();
$('#like_post').show();
$('#if_like').html('');
$('#people').html('people');
});
});
Selanjutnya kita membuat session untuk menampilkan data input yg akan diprose, setelah data diproses maka akan dikirimkan kembali ke index.php. contohnya seperti skrip pemroses dibawah ini.
session_start();
include('functions.php');
## Menentukan tanggal dan waktu
$date = date('Y-m-d H:i:s');
$date = date('c', strtotime($date));
if(isset($_GET['token']) && isset($_GET['msg'])) {
$token = clean_input($_GET['token']);
$msg = clean_input($_GET['msg']);
if(!empty($token) && !empty($msg)) {
if(isset($_SESSION['token']) && $token == $_SESSION['token']) {
/*
@@ Telah melakukan validasi dan mengirim hasilnya kembali ke halaman index.php.
Biasanya, dalam aplikasi kita akan menyimpan informasi dalam database.
*/
?>
<div class="comments clearfix">
<div class="pull-left lh-fix">
<img src="img/default.gif">
</div>
<div class="comment-text pull-left">
<span class="color strong"><a href="#">Facebooker Indo</a></span> <?php echo $msg; ?>
<span class="info"><abbr class="time" title="<?php echo $date; ?>"></abbr></span>
</div>
</div>
Dan sekarang membuat tampilan input komentar seperti tampilan pada facebook. dibawah ini adalah style dan input yg dibuat seperti komentar di facebook.
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }
audio, canvas, video { display: inline-block; }
audio:not([controls]) {
display: none;
height: 0;
}
[hidden] { display: none; }
html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
body { margin: 0; }
a {
text-decoration: none;
color: #E03F00;
}
a:focus { outline: thin dotted; }
a:active, a:hover {
outline: 0;
text-decoration: underline;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
dfn { font-style: italic; }
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
mark {
background: #ff0;
color: #000;
}
code, kbd, pre, samp {
font-family: monospace, serif;
font-size: 1em;
}
pre { white-space: pre-wrap; }
q { quotes: "\201C" "\201D" "\2018" "\2019"; }
small { font-size: 80%; }
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup { top: -0.5em; }
sub { bottom: -0.25em; }
img { border: 0; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend {
border: 0; /* 1 */
padding: 0; /* 2 */
}
button, input, select, textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 2 */
margin: 0; /* 3 */
}
button, input { line-height: normal; }
button, select { text-transform: none; }
button, html input[type="button"], input[type="reset"], input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
}
button[disabled], html input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner {
border: 0;
padding: 0;
}
textarea {
overflow: auto; /* 1 */
vertical-align: top; /* 2 */
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.pull-left { float: left; }
.pull-right { float: right; }
.hide { display: none; }
.show { display: block; }
.no-margin { margin: 0 !important; }
.no-padding { padding: 0 !important; }
.light-text { color: #808080; }
.small-text { font-size: 13px; }
.strong { font-weight: bold; }
.lh-fix { line-height: 0 !important; }
.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after {
display: table;
content: "";
line-height: 0;
}
.clearfix:after { clear: both; }
body {
text-align: left;
direction: ltr;
font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
font-size: 11px;
}
.header {
background: #E03F00;
width: 100%;
}
.header-inner { padding: 10px; }
.logo { vertical-align: middle; }
.container {
width: 650px;
height: 100%;
margin: 0 auto;
}
.content {
width: 450px;
margin: 0 auto;
min-height: 580px;
}
.highlight {
background: #f6f67a;
padding: 1px 3px;
}
.page-header { margin: 30px 0; }
.page-footer {
padding: 0;
bottom: 0;
margin-bottom: 30px;
border-top: 1px dotted #e3e3e8;
width: 650px;
}
.page-header h1 {
font-size: 11px;
padding: 5px 0;
border-bottom: 1px dotted #e3e3e8;
}
.page-footer p, .page-header p {
font-size: 11px;
line-height: 16px;
}
/*
@@ Comments
*/
.comments, .like {
background: #ffebe3;
padding: 4px;
margin-bottom: 1px;
}
.like img { margin-right: 5px; }
.color, .color a { color: #E03F00; }
.links {
padding: 5px;
color: #999;
}
.links a { color: #E03F00; }
.comments img {
width: 30px;
height: 30px;
}
.comment-text {
margin-left: 8px;
color: #333;
line-height: 15px;
width: 400px;
}
.info {
display: block;
margin-top: 2px;
color: #999;
}
.info abbr {
border-bottom: none;
font-size: 11px;
}
.text-holder {
resize: none;
border: 1px solid #bdc7d8;
height: 14px;
padding: 3px;
width: 394px;
}
kemudian input komentar
<div class="container"> <div class="content"> <div style="height: 50px;"></div> <div class="links"> <a href="javascript:;" id="unlike_post" class="hide">Tidak Suka</a><a href="javascript:;" id="like_post">Suka</a> · <a href="javascript:;" id="post_comment">Komentar</a> </div> <div class="like clearfix"> <img src="img/like.png" class="pull-left"> <div class="pull-left"> <span id="if_like"></span> <span id="likecontent"><span id="count" class="color">8</span> <span id="people" class="color">orang</span> menyukai ini</span> </div> </div> <div id="commentscontainer"> <div class="comments clearfix"> <div class="pull-left lh-fix"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7CU3K0kQcZqeljBztMLQpb_l0g3q7lP4FbQ7qEQttyV43ZKTTP_3zCm1qaGaJ7-wQBGolpmeoyq9LSpM0DlyLnED__1X8HQCtTDDlwsOdxfURFw1iH5ny-0NE-g9gpLmAXdbwmbbfrEpC/s1600/1377158_4900618933774_137065167_n.jpg" style="width: 30px;"> </div> <div class="comment-text pull-left"> <span class="pull-left color strong"><a href="#">Rully H Permana</a></span> Ini adalah contoh komentar facebook dengan menggunakan php, jquery dan ajak. <span class="info"><abbr class="time" title="2013-07-08T21:50:03+02:00"></abbr></span> </div> </div> <div class="comments clearfix"> <div class="pull-left lh-fix"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvBOVFUwyu07W1Vzz9ylUzCjkv6XnKOFqeg_awXwKdVzKZB_c4jwCr3PbU69NZ2SZMd2drjh_pYmsaxHlakn1-frsjzsSrWvdQkUE1LQqzpAZ0rvWgrfdK07wexUYWoHd8ubQYWf3Nw1vF/s1600/149153_3998167396138_1773656222_n.jpg" style="width: 30px;"> </div> <div class="comment-text pull-left"> <span class="color strong"><a href="#">Febry A. Amnoer</a></span> Bagaimana ini bekerja? <span class="info"><abbr class="time" title="2013-07-07T21:50:03+02:00"></abbr></span> </div> </div> </div> <div class="comments clearfix"> <div class="pull-left lh-fix"> <img src="img/default.gif"> </div> <div class="comment-text pull-left"> <textarea class="text-holder" placeholder="Tulis komentar.." id="message"></textarea> </div> </div> </div>
Nah itulah contoh skrip untuk pembuatan komentar facebook. Silahkan di download skripnya.
Semoga bermanfaat.
