Авторизация







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

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











< Назад

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





< Назад

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

Выход


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

Главная >> 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
Опубликовал: Сергей Кашурин
Просмотров: 593
Правила перепечатки

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

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

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


100 бесплатных PSD элементов для веб-дизайна и мобильных устройств.
Всем привет! Давайте сегодняшний день сделаем исключением, и вместо урока, посмотрим очень классные PSD заготовки для веб-сайтов и мобильных приложений которые вы сможете бесплатно скачать!
Colorizer: пользователь сам выберет цвет продукта на вашем сайте
Когда вы выбираете машину, или футболку в интернет магазине, хотелось бы вам самим выбрать для неё цвет? Думаю да. В этой статье, я расскажу вам про плагин Colorizer, с помощью которого, для наших дорогих пользователей, мы сможем предоставить возможность выбора цвета продукта в котором он заинтересован, что оставит о нас приятное впечатление и заявку на покупку. jQuery плагин Colorizer - изменим цвет к лучшему.
110 бесплатных PSD элементов, для ваших слайдеров, лент, выпадающих меню навигации и аудио видео проигрывателей
Используйте бесплатно распространяемую графику, вместо того, чтобы тратить ваше драгоценное время, особенно, когда дело доходит до веб дизайна. Ведь его вы можете потратить на более нужные вещи, такие как проявление творчества. Чтобы сделать из вашего проекта конфетку, ниже приведены 110 бесплатных PSD элементов для создания слайдеров, лент, выпадающих меню навигации и аудио видео проигрывателей, полученных нами с различных веб-сайтов и отдельных лиц, которые вносят вклад в графику для дизайнеров, абсолютно бесплатно.
магазин часов tag heuer в тц галерея актер
Используйте бесплатно распространяемую графику, вместо того, чтобы тратить ваше драгоценное время, особенно, когда дело доходит до веб дизайна. Ведь его вы можете потратить на более нужные вещи, такие как проявление творчества. Чтобы сделать из вашего проекта конфетку, ниже приведены 110 бесплатных PSD элементов для создания слайдеров, лент, выпадающих меню навигации и аудио видео проигрывателей, полученных нами с различных веб-сайтов и отдельных лиц, которые вносят вклад в графику для дизайнеров, абсолютно бесплатно.
Отделка квартир в строительной компании.
Используйте бесплатно распространяемую графику, вместо того, чтобы тратить ваше драгоценное время, особенно, когда дело доходит до веб дизайна. Ведь его вы можете потратить на более нужные вещи, такие как проявление творчества. Чтобы сделать из вашего проекта конфетку, ниже приведены 110 бесплатных PSD элементов для создания слайдеров, лент, выпадающих меню навигации и аудио видео проигрывателей, полученных нами с различных веб-сайтов и отдельных лиц, которые вносят вклад в графику для дизайнеров, абсолютно бесплатно.

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

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

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

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

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

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

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