Новые уроки
Получай новые уроки по RSS

Подписка на рассылку


Голосование
Чего выкладывать больше?
Программ
Уроков
Скриптов
Шаблонов
Макетов
CMS
Видеоуроков
Облако тегов

PHP → Простые закладки с PHP, JS и MySQL

Простые закладки с PHP, JS и MySQL


Демо: смотреть
Скачать: demo.zip [4,81 Kb] (cкачиваний: 135)


Часть жизни разработчика, является стремление к простоте в каждом аспекте своей работы. При поиске решений общих проблем, у вас есть выбор, чтобы запереться на все виды услуг третьих лиц и API, или воспользоваться возможностью и развивать функциональность самостоятельно.

В этом уроке, мы делаем простое приложение обмена ссылками. Это приложение даст вам возможность мгновенно обмениваться любой веб-страницой, с одним щелчком кнопки в панель закладок, и показать его в виджет на вашем сайте.

Идея

Нажатие кнопки включает сценарий PHP на страницу, вы запоминаете название и URL , передаются данные в качестве GET параметров.
Простые закладки с PHP, JS и MySQL


Схемы базы данных
Выполните sql запрос из файла table.sql или создайте ячейки вручную.
Простые закладки с PHP, JS и MySQL


Шаг 1 - XHTML
XHTML разметка генерируется на лету с помощью PHP. Это необходимо только при представлении общей ссылки на ваш сайт. Это в основном простой неупорядоченный список с именами общих ссылок.

demo.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>


Шаг 2 - CSS
Опять же, CSS код необходим только в части презентации. Вы можете изменить стиль, чтобы соответствовать остальной части вашего сайта или игнорировать этот код полностью.
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;
}


Простые закладки с PHP, JS и MySQL


Шаг 3 - PHP
Первый позволяет взглянуть на то, как ссылки будут сохранены. Как упоминалось ранее, нажав на закладку включается bookmark.php как сценарий в головной части текущей страницы. Так как подается этот php файл средствами Java Script, браузер будет оценивать его как обычный файл JS.

bookmark.php
// 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!';


Я предлагаю вам сделать быстрый взгляд на bookmark.php в скачаном ZIP архиве, чтобы увидеть, как PHP и javascript, работают вместе, чтобы успешно вставлять закладки и выводить результат.

Теперь простой виджет отображения закладок:

demo.php
$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>';
}

Пользовательские функции определены в functions.php.
functions.php
/* 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;
}


Шаг 4 - Java Script
Во-первых, давайте взглянем на bookmarklet код.

bookmarklet code
(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);
})();


bookmark.php
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);
}


Вывод данных:
// Adding a line that will call the javascript function:
echo 'displayMessage("'.$message.'");';


Наконец-то наши закладки готовы.

Демо: смотреть
Скачать: demo.zip [4,81 Kb] (cкачиваний: 135)
Опубликовал dimas_ua, 15-04-2011, 00:00 Комментариев: 1
 (голосов: 6)
Пишет Александр, 15 апреля 2011 03:02
  • Сообщений: 0
  • Новостей: 0
Не работает демо :(