Авторизация







Регистрация / Забыли пароль?

Регистрация нового пользователя











< Назад

Восстановление пароля





< Назад

Добро пожаловать

Выход


Ежедневное обновление статей и уроков, будь в курсе, держи руку на пульсе событий!

Главная >> PHP

Создаём сайт на PHP, MySQL и jQuery Mobile (Часть 2)


Добро пожаловать на вторую часть урока, в процессе которого мы закончим создание нашего простого веб-магазина на PHP, MySQL и jQuery mobile. В предыдущем уроке мы создали модели и контроллеры, на этот раз будет заниматься видами (MVC)


  jQuery mobile
  Во-первых, давайте скажем несколько слов о библиотеке которую мы с вами будем использовать. jQuery mobile является дополнением к библиотеке jQuery, и специализируется она на интерфейсе пользователя мобильного устройства, обладая широким спектром готовых к использованию виджетов, и поддержкой распространённых телефонов, особенно удобно при работе с сенсорными. В настоящее время, она находится в бета тестировании, но переход к версии 1.0 уже не за горами.
  Вам как разработчику, нужно лишь правильно использовать HTML, всё прочее, сделает за вас библиотека. jQuery mobile работает с HTML5 и его атрибутами, создаёт DOM, изменяет атрибуты и их значения.
  В этой статье, мы будем использовать лишь некоторые возможности библиотеки, работа со списками, заголовками, кнопками определёнными специальными data-role атрибутами, колонтитулами, которые вы увидите в примерах ниже.

  Rendering Views
  Виды PHP файлов, или шаблонов, которые генерируют HTML – код, находятся в контроллерах, и с помощью вспомогательной функции render() генерируют представление. У нас есть 7 файлов которые мы будем использовать для работы функции render() это _category.php, _product.php, _header.php, _footer.php, category.php, home.php и error.php которые мы распишем ниже.

includes/helpers.php

/* Вспомогательные функции */
function render($template,$vars = array()){
    // Принимает значения шаблона
    // и список переменных, визуализирует.
    // Создаёт переменные из массива:
    extract($vars);
    // Вместо имени шаблона 
    // входным параметром может быть объект.
    if(is_array($template)){
        // Если цикл принял правильное значение, то через него
        // частями подключается вид страницы
        foreach($template as $k){
            
            // Создаём локальную переменную
            // с именем класса объекта
            
            $cl = strtolower(get_class($k));
            $$cl = $k;
            
            include "views/_$cl.php";
        }
    }
    else {
        include "views/$template.php";
    }
}
// Вспомогательная функция форматирования:
function formatTitle($title = ''){
    if($title){
        $title.= ' | ';
    }
    $title .= $GLOBALS['defaultTitle'];
    
    return $title;
}

  Входными данными для этой функции служат: название шаблона, и массив аргументов. Они извлекаются в виде переменных и используются в выбранном шаблоне.

  Дополнительным способом работы функции, является вызов её с входными параметрами не указывая название шаблона, которое можно опустить. При этом по умолчанию, будет выведен шаблон _category.php и мы увидим домашнюю страничку с категориями.

Представление нашего MVC на сайте

  Вид

  Первый вид который мы опишем, будет header.php. Вы можете увидеть, что этот шаблон, просто верхняя часть стандартной странички. Этот вид мы будем использовать в home.php и category.php.

  includes/views/_header.php

<!DOCTYPE html> 
<html> 
    <head> 
    <title><?php echo formatTitle($title)?></title> 
    
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <meta http-equiv="content-type" content="text/html; charset=utf8" />
    
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
    <link rel="stylesheet" href="assets/css/styles.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
</head> 
<body> 

<div data-role="page">

    <div data-role="header" data-theme="b">
        <a href="./" data-icon="home" data-iconpos="notext" data-transition="fade">Домой</a>
        <h1><?php echo $title?></h1>
    </div>

    <div data-role="content">

  В заголовке мы подключаем сначала саму библиотеку jQuery, затем jQuery mobile, и стили которые использует jQuery mobile. Основной тег body самое интересное место, здесь мы определяем основной блок data-role=”page” в котором будет находиться всё что отобразится на странице. Всю работу библиотеки мы будем наблюдать в этих двух блоках, второй из них data-role=”content” .

  Блок data-role="header" является блоком в котором отображается заголовок страницы и кнопка возврата на домашнюю страницу, изображение домика поставляется с набором иконок для jQuery Mobile, можно выбрать один из пяти стилей оформления.
  Закрывающие теги (и нижний колонтитул) находятся в _footer.php

includes/views/_footer.php

</div>

    <div data-role="footer" id="pageFooter">
        <h4><?php echo $GLOBALS['defaultFooter']?></h4>
    </div>
</div>

</body>
</html>

  Здесь всё очень просто, у нас есть  блок с data-role="footer" в котором отображается нижний колонтитул с помощью глобальной переменной defaultFooter, определенной в includes/config.php.  

  Не один из описанных выше видов, отдельно от других не выпоняется, их сборкой занимаются файлы category.php и home.php

  includes/views/home.php

<?php render('_header',array('title'=>$title))?>

<p>Это демонстрационный пример, описание <a href="http://tutorialzine.com/2011/08/jquery-mobile-product-website/">здесь</a>, в нём вы сможете подробно узнать, как использовать PHP, MySql и jQuery для создания простого компьютерного магазина с адаптированным для телефона видом</p>
<p>Не забудьте просмотреть данный сайт в другом браузере</p>

<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
    <li data-role="list-divider">Выберите категорию продукта</li>
    <?php render($content) ?>
</ul>

<?php render('_footer')?>

  Домашняя страничка, вид. Вверху включён заголовок _header и верхний колонтитул с кнопочкой вернуться домой,  в середине располагается текст, который мы увидим сразу как загрузится наш сайт. jQuery mobile в блоке data-role="listview"  генерирует список имеющихся в нашей базе данных наименований категорий товара с помощью render(), а нижний колонтитул выводится с помощью  _footer,. 

index.php/views/_category.php

<li <?php echo ($active == $category->id ? 'data-theme="a"' : '') ?>>
<a href="?category=<?php echo $category->id?>" data-transition="fade">
    <?php echo $category->name ?>
    <span class="ui-li-count"><?php echo $category->contains?></span></a>
</li>

  Обратите внимание на то как указывается категория, $category->id это наша переменная PHP которая содержит объект выбранной нами категории. Это реализовано в строках 24/25 нашей функции render в файле helpers.php. Когда пользователь нажимает ссылку, генерируется код указанный выше, переменная GET принимает значение /?category=someid которая и показывает вид category.php, её код приведен ниже:

<?php render('_header',array('title'=>$title))?>

<div class="rightColumn">
    <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="c">
        <?php render($products) ?>
    </ul>
</div>


<div class="leftColumn">
    <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
        <li data-role="list-divider">Категории</li>
        <?php render($categories,array('active'=>$_GET['category'])) ?>
    </ul>
</div> <?php render('_footer')?>  

В этом файле также используется заголовок, верхний и нижний колонтитул. Информация выводится в виде колонок с названиями категорий, справа же _product.php формирует список продуктов данной категории.

<li class="product">
<img src="assets/img/<?php echo $product->id ?>.jpg" alt="<?php echo $product->name ?>" />
<?php echo $product->name ?> <i><?php echo $product->manufacturer?></i> <b>$<?php echo $product->price?></b>
</li>

  Списочный элемент li является дочерним, и принимает стиль родителя, а все изображения автоматически принимают значение ширины в 80px с помощью jQuery mobile.

  Одним из преимуществ использования jQuery mobile является то, что она адаптирует изображение под любой размер экрана, нам же остаётся лишь прописать стили CSS3, чтобы всё выглядело приятно и стильно.

@media all and (min-width: 650px){
    .rightColumn{
        width:56%;
        float:right;
        margin-left:4%;
    }
    
    .leftColumn{
        width:40%;
        float:left;
    }
}
.product i{
    display:block;
    font-size:0.8em;
    font-weight:normal;
    font-style:normal;
}
.product img{
    margin:10px;
}
.product b{
    position: absolute;
    right: 15px;
    top: 15px;
    font-size: 0.9em;
}
.product{
    height: 80px;
}

  Давайте посмотрим на первую строку, @media all and (min-width: 650px), этим мы сообщаем браузеру, в случае если ширина дисплея шире чем 650px, то отображаем колонки с изображениями продуктов рядом, если меньше, то они будут располагаться одна за другой, как обычные блоки.

  Мы сделали это!
  Вторая и последняя часть этого руководства подошла к концу и мы научились использовать библиотеку jQuery mobile для создания сайта оптимизированного под мобильные телефоны. При минимальных затратах со своей стороны, мы создали лёгкий и полноценный мобильный сайт. 

  Если вы ещё не ознакомились с первой частью урока, сделать это можно здесь!

  Есть у вас остались вопросы, задавайте их в комментариях ниже)

  Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


Дата публикации: 24.01.2013
Опубликовал: Сергей Кашурин
Просмотров: 594
Правила перепечатки

Правила перепечатки

Уважаемый посетитель сайта!
Ниже преведены условия использования и перепечатки материалов сайта /
Все материалы данного сайта подготовлены для Вас лично мной.

Большая часть материалов сайта - это авторские уроки, остальные, это переводы уроков с английского языка на русский.
Если Вы решили использовать материалы данного сайта где-то на своих ресурсах или в рассылке, то соблюдайте следующие требования:
1. Урок или статья должны перепечатываться «как есть» с сохранением всех ссылок на источник урока, а если это перевод, то и на сайт, авторы которого подготовили его.
2. Ссылки на сайт источника и переводчика обязательно должны быть работоспособными (при нажатии по ссылке человек должен перейти на сайт автора/переводчика). Если Вы перепечатали какой-либо документ, обязательно проверьте ссылку на работоспособность.
3. Искажение информации об авторе, источнике, переводчике при перепечатке материалов запрещено!
4. Содержание урока или статьи при перепечатке не должно подвергаться модификациям и переделке. Все уроки и статьи, размещенные на сайте, должны перепечатываться как есть. Вы не имеете права урезать, исправлять или иным образом коверкать републикуемый документ.
С уважением, Сергей Кашурин– владелец сайта /


100 бесплатных PSD элементов для веб-дизайна и мобильных устройств.
Всем привет! Давайте сегодняшний день сделаем исключением, и вместо урока, посмотрим очень классные PSD заготовки для веб-сайтов и мобильных приложений которые вы сможете бесплатно скачать!
arcticModal - простые модальные окна jQuery
В поисках простого плагина для создания модальных окон, я перепробовал кучу вариантов, наткнувшись на arcticModal я остановился. Простота работы, вес самого плагина меня очень порадовали, поэтому поделюсь с вами я именно им, так как сам его проверял.
24 классных PHP библиотеки, о которых вы должны знать
Для PHP-разработчика, и времени лучшего не придумаешь чем сейчас. Ведь каждый день, появляются всё новые и новые вспомогательные элементы, такие, как например полезные библиотеки.

Уроки и статьи

«Найден Самый Дешевый и Эффективный Способ Рекламы в Интернете!»

Доказанo: ведение своей почтовой рассылки - это самый действенный и дешевый метод рекламы в Интернете.

Используете ли Вы его?

Если нет, то Вы давно теряете свои деньги! Если да, то пришло время вести Вашу почтовую рассылку на самом эффективном инструменте в Рунете - сервисе рассылок SmartResponder.ru

Узнать об этом подробнее >>

Быть в курсе всех событий: