289 Продолжим...
Шаг 3 – PHP
Давайте посмотрим, как будут сохранятся ссылки. Как уже упоминалось ранее, управление закладками включает в себя bookmark.php, как сценарий в head разделе текущей страницы. И подается с содержанием типа JavaScript, соответственно, браузер будет оценивать его, как обычный JS файл.
bookmark.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
// Setting the content-type header to javascript: header('Content-type: application/javascript'); // Validating the input data if(empty($_GET['url']) || empty($_GET['title']) || !validateURL($_GET['url'])) die(); // Sanitizing the variables $_GET['url'] = sanitize($_GET['url']); $_GET['title'] = sanitize($_GET['title']); // Inserting, notice the use of the hash field and the md5 function: 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!'; |
Название документа и URL сайта передаются этому скрипту через букмарклет и доступны в массиве $ _GET.
Данные продезинфицированы и проверены нашей функцией sanitize() , после чего добавлены в базу данных. Затем, после проверки состояния функции mysql_affected_rows(), мы заносим в переменную $message соответствующее статусное сообщение, которое будет отображаться пользователю.
Я хотел бы предложить взглянуть на bookmark.php в архиве, чтобы увидеть, как PHP и JavaScript работают вместе.
Теперь давайте двигаться дальше, чтобы узнать, как закладки отображаются в виде простого виджета.
demo.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$shares = mysql_query("SELECT * FROM bookmark_app ORDER BY id DESC LIMIT 6"); while($row=mysql_fetch_assoc($shares)) { // Shortening the title if it is too long: if(mb_strlen($row['title'],'utf-8')>80) $row['title'] = mb_substr($row['title'],0,80,'utf-8').'..'; // Outputting the list elements: 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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
/* Helper functions */ 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(), которая принимает штамп времени, соотнесенный каждой закладке, и превращает его в читаемый для пользователя вид. Эта функция также принимает необязательный второй аргумент, который ограничивает количество единиц времени, которые были возвращены (установка с точностью до 1 вернет 1 час назад, а не 1 час и 10 минут назад).
Шаг 4 – JavaScript
Не самая лучшая идея полагаться на библиотеки сторонних производителей, таких как jQuery. Именно поэтому, для разнообразия, мы будем работать с чистым JavaScript.
Во-первых, давайте взглянем на JS код.
JS код
|
1 2 3 4 5 6 7 8 |
(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); })(); |
Букмарклет — это типичная гиперссылка, в которой есть генерируемый JavaScript код. При нажатии, сниппет создает новый элемент скрипта, устанавливает bookmark.php как ее URL (вместе с закодированным названием и URL активной страницы), и добавляет его в раздел документа head. Это выглядит не так красиво, как если бы мы использовали JQuery библиотеку, зато работает.
Теперь вернемся к bookmark.php.
bookmark.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
function displayMessage(str) { // Using pure JavaScript to create and style a div element var d = document.createElement('div'); with(d.style) { // Applying styles: 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)'); // Adding the message passed to the function as text: d.appendChild(document.createTextNode(str)); // Appending the div to document document.body.appendChild(d); // The message will auto-hide in 3 seconds: setTimeout(function(){ try{ document.body.removeChild(d); } catch(error){} },3000); } |
JavaScript код, расположенный выше, написан прямо под логику PHP, которая вставляет закладку в базу данных в bookmark.php. JavaScript функция displayMessage() создает DIV элемент, стили и отображает их в центре страницы.
Как мы уже упоминали в 3 шаге PHP, bookmark.php получает название документа и URL, добавляет их в базу данных и создает переменную $message. Затем она выдается в виде вызова функции displayMessage(), которая выполняет код и показывает сообщение:
|
1 2 |
// Adding a line that will call the JavaScript function: echo 'displayMessage("'.$message.'");'; |
Заключение
Если вы планируете использовать этот виджет в обмене ссылками с вашими посетителями (или, чтобы сохранять их для себя), не забудьте загрузить скрипт в каталог с произвольным именем, так как в этом скрипте не предусмотрена аутентификация. И это также причина, почему этот скрипт так прост в настройке и использовании.
Если вы заинтересовались статьей, то нажмите
