561 Частью жизни разработчиков, есть стремление к простоте в каждом аспекте своей работы. При поиске решений общих проблем, у вас есть выбор, использовать услуги и API третьих лиц, либо развивать функциональность самостоятельно.
На этой неделе, мы делаем простое приложение для управления закладками. Это приложение даст вам возможность мгновенно сохранять ссылки любой веб-страницы. Можно добавлять ссылку на сайт в панель закладок одним щелчком мыши, и отображать ее в виджете на вашем сайте.
Идея
Приложение состоит из PHP скрипта (вызываемого с помощью JavaScript) на просматриваемой странице, с заголовком и URL сайта передаваемым GET параметром. После получения параметра, PHP скрипт записывает данные страницы в базу данных MySQL, и в результате выдает сообщение о выполнении. Все это работает через JavaScript и выполняется в браузере.
Схема базы данных
Перед тем как начать программировать, нам нужно составить базу данных, которая бы сохраняла закладки. Создание таблиц есть в файле table.sql в архиве. Вы можете запустить его в phpMyAdmin, чтобы создать таблицу на вашем сервере. После, не забудьте изменить данные доступа к MySQL в connect.php.
Обратите внимание на HASH поле. Это уникальное поле, которое хранит md5() сумму URL. Мы используем его, чтобы исключить дубли ссылок в базе данных. Вставка ссылки, которая уже существует, вызовет ошибку в запросе, и функция mysql_affected_rows() вернет 0. Мы используем ее в PHP, чтобы вывести сообщение пользователю о дубликате.
Шаг 1 – XHTML
XHTML разметка генерируется на лету с помощью PHP. Она необходима для представления расшареной ссылки на ваш сайт. И это, в основном, простые неупорядоченные списки с данными о странице.
demo.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<ul class="latestSharesUL"> <!-- LI через 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 выполняют запрос к базе данных для последних закладок, что вы и увидите в шаге 3. Каждый li содержит заголовок страницы и времени ее жизни на сервере.
Шаг 2 – CSS
И опять же, CSS код, требуется только в части представления приложения. Вы можете изменить дизайн в соответствии остальной части вашего сайта или полностью игнорировать этот код. Кроме того здесь приведены не все стили. Остальное Вы можете увидеть в styles.css в архиве.
styles.css
|
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 |
ul.latestSharesUL{ /* The bookmark widet */ 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{ /* Each bookmark entry */ background-color:#FAFAFA; border:1px solid #EAEAEA; border-bottom:none; list-style:none; padding:12px; } ul.latestSharesUL li:last-child{ /* Targeting the last element of the set */ border-bottom:1px solid #EAEAEA; } ul.latestSharesUL, ul.latestSharesUL li{ /* Adding regular and inset shadows */ -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{ /* The date time field */ font-size:10px; padding-top:10px; color:#888; } a.bookmrk, a.bookmrk:visited{ /* The bookmark title in the widget */ color:#666; } |
Используя box-shadow и border-radius из CSS3, мы сокращаем количество DIV-ов, которые были бы необходимы для получения такого же дизайна. Также, обратите внимание на использование :last-child селектора, который ориентирован на последние li, и добавляет нижний бордюр.
Продолжение...
спасибо за статью! Сайт отличный, добавляю в закладки)
Ошибочка в скрипте такого рода — Uncaught SyntaxError: Unexpected token <