ساخت جعبه پیام با php و جی کوئری

تو این آموزش یادمیگیریم ، چطوری جعبه پیام رو با php و jquery بسازیم.

که کاربران براحتی می توانند ، پیام های کوتاه رو در سایت ارسال کنند. پیام ها باید در سرور به عنوان فایل ذخیره بشن. نیازی به دیتابیس مثل استفاده از mysql نمی باشد.

ما در اینجا از دو کتابخانه (librarie)  پی اچ پی برای ساخت این جعبه پیام استفاده خواهیم کرد.

1.  Flywheel : برای ذخیره پیام ها به بصورت json
2. RelativeTime: برای ایجاد time stamp  نسبی قابل خواندن توسط انسان

برای نصب این کتابخانه ها از Composer استفاده خواهیم کرد.

اجرا کردن جعبه پیام:

شما می تونید فایل سورس این اسکریپ کوچک را در انتهای این آموزش دانلود کنید. استفاده از این اسکریپت بسیار راحت هست چون برای هر خط توضیحات نوشته شده. برای اجرای این اسکریپت کافیه که اگه از wam یا xamp استفاده کنید اون رو در پوشه www خود کپی کنید و بعد آدرس  http://localhost  را در مرورگر اجرا کنید و سپس نام پوشه این اسکریپت را در دامه بنویسید و یا در همون صفحه پیدا کنید و روی آن کلیک.

نکته:
اگر در هاست می خاهید آن را آپلو کنید توجه داشه باشید باید اجاره دسترسی رو 777 باشد..

خوب شروع می کنیم.

دمــــــــــــــــــــــــــــــــــــــــو

دانــــــــــــــــــــــلــــــــــــود

فایل HTML

 با ایحاد یک صفحه index.html و اضافه کردن کدهای زیر به آن شروع می کنیم.

با استفاده از html جعبه پیام را ایجاد می کنیم.

<div class="shoutbox"> <h1>Shout box <img src='./assets/img/refresh.png'/></h1> <ul class="shoutbox-content"></ul> <div class="shoutbox-form"> <h2>Write a message <span>×</span></h2> <form action="./publish.php" method="post"> <label for="shoutbox-name">nickname </label> <input type="text" id="shoutbox-name" name="name"/> <label class="shoutbox-comment-label" for="shoutbox-comment">message </label> <textarea id="shoutbox-comment" name="comment" maxlength='240'></textarea> <input type="submit" value="Shout!"/> </form> </div> </div>

با استفاده از جاوااسکریپت ، درج خواهیم کرد  پیام های انتشار یافته در عنصر <ul> ، بصورت پیش فرض این فرم پنهان است. و زمانی نمایش داده می شود که روی جعبه کلیک و پیامی نوشته شود.

 کدهای جاوا اسکریپت:

فایل جاوا اسکریپت با نام script.js ذخیره شده.

assets/js/script.js

$(function(){ // Storing some elements in variables for a cleaner code base var refreshButton = $('h1 img'), shoutboxForm = $('.shoutbox-form'), form = shoutboxForm.find('form'), closeForm = shoutboxForm.find('h2 span'), nameElement = form.find('#shoutbox-name'), commentElement = form.find('#shoutbox-comment'), ul = $('ul.shoutbox-content'); // Replace :) with emoji icons: emojione.ascii = true; // Load the comments. load(); // On form submit, if everything is filled in, publish the shout to the database var canPostComment = true; form.submit(function(e){ e.preventDefault(); if(!canPostComment) return; var name = nameElement.val().trim(); var comment = commentElement.val().trim(); if(name.length && comment.length && comment.length < 240) { publish(name, comment); // Prevent new shouts from being published canPostComment = false; // Allow a new comment to be posted after 5 seconds setTimeout(function(){ canPostComment = true; }, 5000); } }); // Toggle the visibility of the form. shoutboxForm.on('click', 'h2', function(e){ if(form.is(':visible')) { formClose(); } else { formOpen(); } }); // Clicking on the REPLY button writes the name of the person you want to reply to into the textbox. ul.on('click', '.shoutbox-comment-reply', function(e){ var replyName = $(this).data('name'); formOpen(); commentElement.val('@'+replyName+' ').focus(); }); // Clicking the refresh button will force the load function var canReload = true; refreshButton.click(function(){ if(!canReload) return false; load(); canReload = false; // Allow additional reloads after 2 seconds setTimeout(function(){ canReload = true; }, 2000); }); // Automatically refresh the shouts every 20 seconds setInterval(load,20000); function formOpen(){ if(form.is(':visible')) return; form.slideDown(); closeForm.fadeIn(); } function formClose(){ if(!form.is(':visible')) return; form.slideUp(); closeForm.fadeOut(); } // Store the shout in the database function publish(name,comment){ $.post('publish.php', {name: name, comment: comment}, function(){ nameElement.val(""); commentElement.val(""); load(); }); } // Fetch the latest shouts function load(){ $.getJSON('./load.php', function(data) { appendComments(data); }); } // Render an array of shouts as HTML function appendComments(data) { ul.empty(); data.forEach(function(d){ ul.append('<li>'+ '<span class="shoutbox-username">' + d.name + '</span>'+ '<p class="shoutbox-comment">' + emojione.toImage(d.text) + '</p>'+ '<div class="shoutbox-comment-details"><span class="shoutbox-comment-reply" data-name="' + d.name + '">REPLY</span>'+ '<span class="shoutbox-comment-ago">' + d.timeAgo + '</span></div>'+ '</li>'); }); } });

کتابخانه Emoji  یکی از کتابخانه هایی است که که فایل php وجاوا اسکریپت رو شامل می شه.

در متد  appendComments ما از تابع emojione.toImage() برای تایپ کردن شکلک های یا smile در Emoi استفاد کردیم.

شما می تونید توابع پشیبانی شده در Emoji ر اینجا ببینید و در این صفحه اون رو اجرا کنید emoji code website

خوب حالا ظاهر جعبه پیام آماده است و

بریم سراغ هسته سیسم پیام کوتاه.

کد PHP

در این قسمت ما دو فایل داربم به نام های publish.php و loadfile.php

فایل اول درخواست  POST رو برای ذخیره پیام های در مخزن داده ها قبول می کنه.

و فایل دوم برگشت می ده نمایش 20 ا از آخرین پیغام های فرستاده شده.

این جعبه بصورت مستقیم سط بازدیدکنندگان باز نمی شه بلکه با ajax این عملیات انجام می گیره.

publish.php

<?php // Include our composer libraries require 'vendor/autoload.php'; // Configure the data store $dir = __DIR__.'/data'; $config = new \JamesMoss\Flywheel\Config($dir, array( 'formatter' => new \JamesMoss\Flywheel\Formatter\JSON, )); $repo = new \JamesMoss\Flywheel\Repository('shouts', $config); // Store the posted shout data to the data store if(isset($_POST["name"]) && isset($_POST["comment"])) { $name = htmlspecialchars($_POST["name"]); $name = str_replace(array("\n", "\r"), '', $name); $comment = htmlspecialchars($_POST["comment"]); $comment = str_replace(array("\n", "\r"), '', $comment); // Storing a new shout $shout = new \JamesMoss\Flywheel\Document(array( 'text' => $comment, 'name' => $name, 'createdAt' => time() )); $repo->store($shout); }

در اینجا ما از کتابخانه Flywheel بطور مستقیم اسفاده کرده ایم.هنگامی که پیکربندی شد ، شما می ونید هر نوع داده ای را بصورت jason در پوشه  data/shouts ذخیره کنید.

load.php

<?php require 'vendor/autoload.php'; // If you want to delete old comments, make this true. We use it to clean up the demo. $deleteOldComments = false; // Setting up the data store $dir = __DIR__.'/data'; $config = new \JamesMoss\Flywheel\Config($dir, array( 'formatter' => new \JamesMoss\Flywheel\Formatter\JSON, )); $repo = new \JamesMoss\Flywheel\Repository('shouts', $config); // Delete comments which are more than 1 hour old if the variable is set to be true. if($deleteOldComments) { $oldShouts = $repo->query() ->where('createdAt', '<', strtotime('-1 hour')) ->execute(); foreach($oldShouts as $old) { $repo->delete($old->id); } } // Send the 20 latest shouts as json $shouts = $repo->query() ->orderBy('createdAt ASC') ->limit(20,0) ->execute(); $results = array(); $config = array( 'language' => '\RelativeTime\Languages\English', 'separator' => ', ', 'suffix' => true, 'truncate' => 1, ); $relativeTime = new \RelativeTime\RelativeTime($config); foreach($shouts as $shout) { $shout->timeAgo = $relativeTime->timeAgo($shout->createdAt); $results[] = $shout; } header('Content-type: application/json'); echo json_encode($results);

ما کدی گذاشتم که پیغام هایی که 1 ساع پیش فرساده شده را حذف می کند.

خوب حالا دیگه این جعبه پیام آماده است.

دمــــــــــــــــــــــــــــــــــــــــو

دانــــــــــــــــــــــلــــــــــــود

لایه جدید..