Часть жизни разработчика - это стремление к простоте в каждом аспекте работы. При поиске решений для разного рода проблем можно ограничиться АПИ других сервисов или же создать приложения самостоятельно.
В этом уроке мы создадим простое приложения для хранения и распространения ссылок на интересные материалы. Это приложение даст Вам возможность мгновенно делиться с другими ссылками на интересные страницы Интернета с помощью одного клика в панели закладок. Все эти ссылки можно разместить в виде виджета на Вашем сайте.
Идея
При нажатии на закладку Вы вставляете специальный PHP скрипт (в виде JavaScript файла) на страницу, которую Вы просматриваете. И название страницы и УРЛ передаются в виде параметров GET. PHP скрипт все записывает в БД и выдает сообщение об успешном сохранении.
Структтура БД
Обратите внимание на колонку HASH. Это уникальное поле, которое сохраняет сумму md5() поля УРЛ. Мы используем это для того, чтобы не было дубликатов ссылок в нашей БД. Вставка уже существующей ссылки не будет происходит. Далее это будет использовано в части про PHP. Будут выводиться разные сообщения после добавления.
Шаг 1 - XHTML
Вся XHTML разметка будет генерироваться на лету с помощью PHP. Нам она понадобится для отображения ссылок в виде виджета на сайте. Это простой неупорядоченный список.
<ul class="latestSharesUL">
<!-- The LI elements are populated by PHP -->
<li>
<div class="title"><a href="http://perfectionkills.com/" class="bookmrk">Perfection kills</a></div>
<div class="dt">36 seconds ago</div>
</li>
<li>
<div class="title"><a href="http://html5test.com/" class="bookmrk">The HTML5 test - How well does your browser support HTML5?</a></div>
<div class="dt">2 minutes ago</div>
</li>
</ul>
Элементы li генерируются после того, как PHP ввыполнит запрос к БД и получит последние добавленные закладки. Каждый элемент содержит название страницы и относительное время добавления.
Шаг 2 - CSS
Тут чисто оформление виджета. Можете менять как хотите.
ul.latestSharesUL{
/* Виджет ссылок */
background-color:#f5f5f5;
margin:0 auto;
padding:10px;
width:280px;
border:1px solid #e0e0e0;
text-shadow:1px 1px 0 white;
font-size:13px;
color:#666;
font-family:Arial, Helvetica, sans-serif;
}
ul.latestSharesUL li{
/* Каждая запись с закладкой */
background-color:#FAFAFA;
border:1px solid #EAEAEA;
border-bottom:none;
list-style:none;
padding:12px;
}
ul.latestSharesUL li:last-child{
border-bottom:1px solid #EAEAEA;
}
ul.latestSharesUL,
ul.latestSharesUL li{
/* добавляем тени */
-moz-box-shadow:1px 1px 0 white inset, 0 0 2px white;
-webkit-box-shadow:1px 1px 0 white inset, 0 0 2px white;
box-shadow:1px 1px 0 white inset, 0 0 2px white;
}
.dt{
/* Поле даты */
font-size:10px;
padding-top:10px;
color:#888;
}
a.bookmrk,
a.bookmrk:visited{
/* Название ссылки в виджете */
color:#666;
}
Шаг 3 - PHP
Для начала давайте взглянем на то, как сохраняются ссылки. Как упоминалось ранее, нажатие на закладку вставляет bookmark.php как скрипт в шапку текущей страницы. Браузер расценит его как обычный JS файл.
bookmark.php
// Задаем content-type шапки на javascript:
header('Content-type: application/javascript');
// Проверяем данные
if(empty($_GET['url']) || empty($_GET['title']) || !validateURL($_GET['url'])) die();
// Очищаем переменные
$_GET['url'] = sanitize($_GET['url']);
$_GET['title'] = sanitize($_GET['title']);
// Вставляем, с использованием md5
mysql_query(" INSERT INTO bookmark_app (hash,url,title)
VALUES (
'".md5($_GET['url'])."',
'".$_GET['url']."',
'".$_GET['title']."'
)");
$message = '';
if(mysql_affected_rows($link)!=1)
{
$message = 'This URL already exists in the database!';
}
else
$message = 'The URL was shared!';
Название документа и УРЛ передаются скрипту и доступны в массиве $_GET. Дата проверяется и очищается и после этого вставляется в БД. Далее после проверки на дубликаты выдается соответствующее сообщение.
Теперь давайте посмотрим как закладки отображаются в виджете.
$shares = mysql_query("SELECT * FROM bookmark_app ORDER BY id DESC LIMIT 6");
while($row=mysql_fetch_assoc($shares))
{
// Укорачиваем название, если оно больше 80 символов:
if(mb_strlen($row['title'],'utf-8')>80)
$row['title'] = mb_substr($row['title'],0,80,'utf-8').'..';
// Выводим элементы списка:
echo '
<li>
<div class="title"><a href="'.$row['url'].'" class="bookmrk">'.$row['title'].'</a></div>
<div class="dt">'.relativeTime($row['dt']).'</div>
</li>';
}
Этот код выбирает последние 6 закладок из БД, генерирует необходимые элементы li и высчитывает время добавления с помощью пользовательской функции relativeTime().
Эти функции находятся в functions.php.
functions.php
/* Функции помощники */
function validateURL($str)
{
return preg_match('/(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:\/~\+#]*[\w\-\@?^=%&\/~\+#])?/i',$str);
}
function sanitize($str)
{
if(ini_get('magic_quotes_gpc'))
$str = stripslashes($str);
$str = strip_tags($str);
$str = trim($str);
$str = htmlspecialchars($str);
$str = mysql_real_escape_string($str);
return $str;
}
function relativeTime($dt,$precision=2)
{
if(is_string($dt)) $dt = strtotime($dt);
$times=array( 365*24*60*60 => "year",
30*24*60*60 => "month",
7*24*60*60 => "week",
24*60*60 => "day",
60*60 => "hour",
60 => "minute",
1 => "second");
$passed=time()-$dt;
if($passed<5)
{
$output='less than 5 seconds ago';
}
else
{
$output=array();
$exit=0;
foreach($times as $period=>$name)
{
if($exit>=$precision || ($exit>0 && $period<60)) break;
$result = floor($passed/$period);
if($result>0)
{
$output[]=$result.' '.$name.($result==1?'':'s');
$passed-=$result*$period;
$exit++;
}
else if($exit>0) $exit++;
}
$output=implode(' and ',$output).' ago';
}
return $output;
}
Один из главных принципов при создании веб приложений - "Не доверяйте пользователям". Это означает, что все вводимые данные должны быть очищены. Что и делает наша функция sanitize() - она предотвращает возможные XSS атаки, убирает все HTML теги и убирает все HTML символы, которые могут навредить разметке.
Другая интересная функция - relativeTime(). Она берет время добавления и преобразует его немного в другой формат. Получается не время добавления, а сколько времени прошло после добавления. Кроме этого она округляет время до целых значений.
Шаг 4 - JavaScript
Давайте взглянем на код для закладки.
(function () {
var jsScript = document.createElement('script');
jsScript.setAttribute('type', 'text/javascript');
jsScript.setAttribute('src', '/bookmark.php?url=' + encodeURIComponent(location.href) + '&title=' + encodeURIComponent(document.title));
document.getElementsByTagName('head')[0].appendChild(jsScript);
})();
Эта закладка - обычная ссылка. При нажатии, сниппет создает новый элемент <script>, выставляет в нем bookmark.php в качестве УРЛ и добавляет его в шапку документа.
bookmark.php
function displayMessage(str)
{
// Используем чистый JavaScript для создания и стилизации элемента div
var d = document.createElement('div');
with(d.style)
{
// Придаем стили:
position='fixed';
width = '350px';
height = '20px';
top = '50%';
left = '50%';
margin = '-30px 0 0 -195px';
backgroundColor = '#f7f7f7';
border = '1px solid #ccc';
color = '#777';
padding = '20px';
fontSize = '18px';
fontFamily = '"Myriad Pro",Arial,Helvetica,sans-serif';
textAlign = 'center';
zIndex = 100000;
textShadow = '1px 1px 0 white';
MozBorderRadius = "12px";
webkitBorderRadius = "12px";
borderRadius = "12px";
MozBoxShadow = '0 0 6px #ccc';
webkitBoxShadow = '0 0 6px #ccc';
boxShadow = '0 0 6px #ccc';
}
d.setAttribute('onclick','document.body.removeChild(this)');
// Передаем сообщение функции в качетсве текста:
d.appendChild(document.createTextNode(str));
// Добавляем div к документу
document.body.appendChild(d);
// Сообщение автоматически ичезнет через 3 секунды:
setTimeout(function(){
try{
document.body.removeChild(d);
} catch(error){}
},3000);
}
JavaScript код выше находится сразу же под PHP, который вставляет закладку в БД в bookmark.php. Функция displayMessage() создает элемент div? стилизирует его и отображает в центре страницы.
Поскольку bookmark.php расценивается как JS файл, весь текст, который он выдает расценивается как JavaScript код. Как мы уже говорили в шаге про PHP, bookmark.php получает название документы и УРЛ, вставляет их в БД и создает переменную $message. Она далее выводится как запрос к функции displayMessage(), которая выполняет код выше и отображает сообщение:
// Добавляем строку, которая будет вызывать JavaScript функцию:
echo 'displayMessage("'.$message.'");';
Вот и все готово! Получилось очень классная штука!
П.С. Демо работает следующим образом - добавьте зеленую кнопку к себе в закладки, зайдите на интересную страницу и кликните по этой закладке. Далее перейдите на страницу с виджетом и обновите ее. Ваша страница должна быть вверху списка.