Уроки по css | Создаем панель сообщений по типу Facebook

Главная->Уроки по css->Создаем панель сообщений по типу Facebook

Очень многим пользователям нравится Facebook. Можно сплетничать с друзьями, родственниками и коллегами, общаться с новыми людьми, делиться фотографиями ссылками и прочим. Одним из замечательных свойств панели сообщений Facebook является встроенное прикрепление контента. Оно позволяет просматривать контент с других сайтов без необходимости заходить на них. Вероятно, что Facebook использует oEmbed с большим количеством модификаций под себя. В данном уроке мы рассмотрим, как создать встроенное прикрепление контента, похожее на то, что использует Facebook с помощью jQuery oEmbed и AJAX. sourse Что такое jQuery oEmbed? OEmbed — это открытый формат, который позволяет прикреплять контент со сторонних сайтов. Вы можете прикреплять фотографии, видео, документы, флеш-ролики или любой другой мультимедийный контент ( с определенных сайтов). oEmbed поддерживают многие популярные сайты — Flickr, Youtube, Vimeo, и многие другие. jQuery oEmbed — это плагин, который использует oEmbed API для прикрепления контента. Он очень маленький (минимизированная версия занимает около 4 Kб) и , как большинство плагинов jQuery, прост в использовании. Синтаксис:: 1 <script type='text/javascript'> 2 // Присоединяем jQuery и jQuery.oembed плагин до этой точки 3 $(function(){ 4 $("a.embed").oembed(); 5 }); 6 </script> 7  8 <a href='<a href="http://www.youtube.com/watch?v=8JRICTFnViM">http://www.youtube.com/watch?v=8JRICTFnViM</a>'>Урок PHP на YouTube</a> jQuery.oEmbed создает div с классом "oembed-container" и прикрепляет контент в нем. Алгоритм приложения Наше приложение очень простое — оно размещает сообщение пользователя и конвертирует ссылки в присоединённый контент. Создаём разметку Наша разметка очень простая, как и само приложение Разметка приложения Вводим следующий код в файл index.php 01 <html xmlns="http://www.w3.org/1999/xhtml"> 02 <head> 03 <title>Обновление статуса по типу Facebook с использованием jQuery oEmbed</title> 04 </head> 05 <body> 06 <div id='wrapper'> 07 <div id='updateBox'> 08 Введите ваше сообщение здесь... 09 <textarea id='statusMsg'></textarea> 10 <button id='shareBtn'>Ввод</button> 11 (Никакого HTML, только ссылки и текст) 12 <div class='clear'></div> 13 </div> 14 <div id='msgs'> 15 </div> 16 </div> 17 </body> 18 </html> Мы создаём оболочку и размещаем в ней элементы. Каждое сообщение будет помещаться в div с классом "msg". CSS В CSS задаём цвета и шаблон, похожий на Facebook. Можно задать любой стиль, какой нравится. 01 html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, 02 pre, form, fieldset, table, th, td { margin: 0; padding: 0; } 03 04 body { 05 font-family:"lucida grande",tahoma,verdana,arial,sans-serif; 06 font-size: 14px; 07 line-height:1.3em; 08 text-align:center; 09 } 10 11 a, a:visited { 12 outline:none; 13 } 14 15 .clear { 16 clear:both; 17 } 18 19 img { 20 border:0; 21 } 22 23 #wrapper { 24 width:480px; 25 margin:0 auto; 26 text-align:left; 27 } 28 29 #updateBox { 30 background-color:#F2F2F2; 31 border:1px solid #B5B5B5; 32 padding:4px; 33 } 34 35 #statusMsg { 36 width:100%; 37 height:70px; 38 border-color:#7C7C7C #C3C3C3 #DDDDDD; 39 border-style:solid; 40 border-width:1px; 41 } 42 43 #shareBtn { 44 background:#5872A7; 45 float:right; 46 color:#ffffff; 47 font-weight:bold; 48 border:0; 49 padding:4px; 50 margin-top:2px; 51 } 52 53 #msgs { 54 } 55 56 .msg { 57 margin-top:8px; 58 border-bottom:1px solid #B5B5B5; 59 padding-bottom:4px; 60 color:#808080; 61 font-size:13px; 62 } 63 64 .msg a { 65 color:#3B5998; 66 text-decoration:none; 67 } 68 69 .msg a:hover { 70 text-decoration:underline; 71 } 72 73 .oembed-container { 74 border-left:2px solid #eaeaea; 75 margin-left:15px; 76 padding:4px 4px 4px 10px; 77 } В CSS нет ничего такого, что нуждалось бы в объяснениях. Кроме класса "oembed-container". jQuery.oEmbed по умолчанию создаёт div с классом "oembed-container". Мы задаём некоторый стиль для того, чтобы выделить прикреплённый контент. База данных и таблица Нам нужна таблица для хранения сообщений о статусе. Здесь используется очень простая таблица с двумя полями — id и content. Поле id — имеет целый тип и представляет собой идентификатор сообщения о статусе. Поле content — текст сообщения. Для создания таблицы используется запрос SQL: 1 CREATE TABLE `status_msgs` ( 2 `id` int(11) NOT NULL auto_increment, 3 `content` text, 4 PRIMARY KEY (`id`) 5 ); Обратите внимание, что формат таблицы очень прост. Большинство приложений в подобных таблицах используют дополнительные поля для идентификации автора сообщений. Но для данного урока структура таблицы упрощена. Соединение с базой Создаём новый файл и сохраняем его как config.php. Размещаем в нем следующий код. 1 <?php 2 $host = "HOST"; //Имя вашего сервера базы данных. В большинстве случаев - это "localhost" 3 $username = "USERNAME"; //Имя пользователя 4 $password = "PASSWORD"; // Пароль пользователя 5 $db = "DB"; // Имя таблицы 6 7 mysql_connect($host, $username, $password) or die("Невозможно соединиться с базой данных."); 8 mysql_select_db($db) or die("Невозможно выбрать базу данных.");?> Нужно внести изменения в соответствии с вашими параметрами для подключения к базе данных Создаём панель сообщений Когда страница загружена, пользователю нужно показать что уже размещено на панели сообщений. Таким образом, мы соединяемся с базой данных, получаем все сообщения о статусе и создаём для каждого из них div. Ниже приведённый код выполняет описанные действия. На страницу добавляется <div class='msg'></div> 01 <?php 02 include("config.php"); 03 $q = "SELECT * FROM status_msgs ORDER BY id DESC"; 04 $r = mysql_query($q); 05 if(mysql_num_rows($r) > 0) { 06 //сообщения есть 07 while($row = mysql_fetch_assoc($r)){ 08 echo "<div class='msg'>\n"; 09 echo $row['content']."\n"; 10 echo "</div>\n"; 11 } 12 } else { 13 //сообщений нет 14 echo "В базе данных ничего нет!"; 15 } 16 ?> Также добавим несколько строк в тег <head> файла index.php для подключения oEmbed к ссылкам на панели сообщений. 01 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script> 02 <script type='text/javascript' src='jquery.oembed.min.js'></script> 03 <script type='text/javascript'> 04 $(function(){ 05 $(".msg a").oembed(null, { 06 embedMethod: "append", 07 maxWidth: 480 08 }); 09 }); 10 </script> Разместите jquery.oembed.min.js в той же директории, что и файл index.php Сохраняем сообщение о статусе с помощью AJAX Пришло время добавить функциональности AJAX в наше маленькое приложение. Когда пользователь нажимает на кнопку «Ввод», производятся два действия перед тем, как оправить запрос с помощью AJAX. Первое — удаление всех тегов HTML из сообщения о статусе. Второе — производится замена адресов URL на ссылочные теги HTML. Создаём новый файл functions.js и сохраняем в нём следующий код: 01 function stripHTML(source){ 02 var strippedText = source.replace(/<\/?[^>]+(>|$)/g, ""); 03 return strippedText; 04 } 05 06 function replaceURLWithHTMLLinks(source) { 07 var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig; 08 replaced = source.replace(exp,"<a href='$1' target='_blank'>$1</a>"); 09 return replaced; 10 } Первая функция удаляет все теги HTML. А вторая функция (источник: StackOverflow) заменяет все URL ссылочными тегами HTML (в функции используется регулярное выражение.) Присоединяем functions.js к файлу index.php с помощью строки в теге <head>: 1 <script type='text/javascript' src='functions.js'></script> Затем добавляем несколько строк в тег <head> файла index.php 01 <script type='text/javascript'> 02 $(function(){ 03 $("#shareBtn").click(function(){ 04 status_text = $("#statusMsg").val(); 05 if(status_text.length == 0) { //ничего не введено 06 return; 07 } else { 08 $("#statusMsg").attr("disabled", "disabled"); //отключаем область ввода текста на время работы ajax 09 status_text = stripHTML(status_text); // удаляем теги html 10 status_text = replaceURLWithHTMLLinks(status_text); // заменяем ссылки тегами HTML. 11 $.ajax({ //делаем запрос ajax 12 url: "ajaxUpdate.php", 13 type: "POST", 14 data: "status_msg="+status_text, 15 success: function(msg) { 16 $("#statusMsg").val(""); //очищаем область ввода текстаы 17 $("#statusMsg").attr("disabled", ""); 18 if(msg == "true") { //сообщение размещено успешно 19 $("#msgs").prepend("<div class='msg'>"+status_text+"</div>"); //добавляем сообщение к панели сообщений 20 $(".msg:first a").oembed(null, {maxWidth: 480, embedMethod: "append"}); //ссылки oEmbed для сообщений 21 } else { //Ошибка 22 alert("Нельзя разместить сообщение в данный момент! Пожалуйста, попробуйте позже."); 23 } 24 } 25 }); 26 return false; 27 } 28 }); 29 }); 30 </script> Выше приведённый код начинает работать тогда, когда пользователь нажимает на кнопку «Ввод». Если никакого текста не было введено, то ничего не происходит. Если текст был введен, то используются функции JavaScript для удаления тегов HTML и преобразования URL в теги ссылок HTML. После подготовки текста производится запрос AJAX к ajaxUpdate.php (который мы создадим чуть позже). Если ответ "true", то сообщение добавлено к панели и ссылки в сообщении конвертированы в присоединённый контент. В противном случае пользователь получает сообщение о том, что сообщение не может быть размещено в данный момент. В файл ajaxUpdate.php нужно сохранить следующий код: 01 <?php 02 include("config.php"); 03 if(!$_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') 04 { 05 die("Доступ к файлу запрещен! Файл занят!"); 06 } 07 if(!empty($_POST['status_msg'])){ 08 $q = "INSERT INTO status_msgs (content) VALUES ('{$_POST['status_msg']}')"; 09 $r = mysql_query($q); 10 if(mysql_affected_rows() == 1) { 11 echo "true"; 12 } else { 13 echo "false"; 14 } 15 } 16 ?> Сначала производится проверка того, что страница доступна только через AJAX. Затем проверяется наличие текста в сообщении. Если оно не пустое, то вставляем его в таблицу и возвращаем "true". Во всех остальных случаях возвращаем "false". Заключение oEmbed также имеет библиотеку PHP. Если вам нужно получить настоящий контроль над приложением, то она может оказаться полезной для вас.