Разработка Web-приложения на основе CMS WordPress

Размещено на http://www.allbest.ru/

Введение

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

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

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



1. Описание среды разработки

1.1 Понятие инфляции. Причины, виды и последствия инфляции

1.1.1 Установка Денвера. Базовый пакет содержит большинство необходимых программ и утилит:

- инсталлятор (поддерживается также инсталляция на flash-накопитель);

- Apache, SSL, SSI, mod_rewrite, mod_php;

- PHP5 с поддержкой GD, MySQL, sqLite;

- MySQL5 с поддержкой транзакций;

- система управления виртуальными хостами, основанная на шаблонах;

- система управления запуском и завершением всех компонентов Денвера;

- phpMyAdmin - система управления MySQL через Web-интерфейс;

- эмулятор sendmail и SMTP-сервера [2].

Скачиваем Денвер (Denwer) с официального сайта разработчиков http://denwer.ru. Выбираем РНР 5.3 (см. рисунок 1).

Рисунок 1- Панель выбора версии PHP



1.1.2 Установка дистрибутива. Запускаем скачанный инсталлятор Денвера. После запуска появляется окно (см. рисунок 2)

Рисунок 2. Инсталлятор Денвера

Далее установщик попросит указать, в какой каталог вы бы хотели установить дистрибутив Денвера. Выбираем каталог(по умолчанию используется C:\WebServers).Чтобы согласиться с этим выбором нажимаем Enter.

В указанный каталог будет установлены все компоненты Денвера, за исключением ярлыков на рабочем столе, для запуска и завершения работы Денвер (см. рисунок 3).

Рисунок 3. Выбор директории установки



После выбора папки каталога нажмите Enter, в открывшемся окне подтверждаем выбор вводом буквы «Y» (или отменяем если вдруг ошиблись вводом буквы «N») и нажимаем еще раз Enter (см. рисунок 4).

Рисунок 4. Подтверждение директории установки

Далее вводим имя виртуального диска, который будет связан с только что указанной директорией. Соглашаемся со значением по умолчанию (Z:) или называем его своим именем. Диска с этим именем еще не должно содержаться в системе (см. рисунок 5).

Рисунок 5. Продолжаем нажатием Enter

Далее будет произведено копирование файлов программы и после завершения программа спросит Вас, как Вы будете запускать и пакет программного обеспечения Денвер.

Потом появляется вопрос, как именно мы собираемся запускать и останавливать комплекс. Выбираем пункт 2 (см. рисунок 6).



Рисунок 6. Выбор режима создания диска

1.1.3 Первый запуск Денвера

Щелкаем по созданному инсталлятором ярлыку Start Denwer на Рабочем столе, а затем, когда все консольные окна исчезнут, открываем браузер и набирайте в нем адрес: http://localhost/denwer/. (см. рисунок 7).

Рисунок 7. Завершение установки

1.1.4 Работа с виртуальными хостами

Добавляем новый виртуальный хост в Денвере. Пусть это будет test1.ru. Вам нужно проделать следующее:

Создать в папке /home директорию с именем, совпадающим с именем виртуального хоста (в нашем случае test1.ru). Эта директория будет хранить директории документов доменов третьего уровня для test1 (см. рисунок 8).

Рисунок 8. Папка home

Перезапустить сервер, воспользовавшись, например, ярлыком Restart Denwer на Рабочем столе.

1.2 Система управления содержимым

Система управления содержимым (контентом)(Content Management System, CMS) -- информационная система или компьютерная программа, используемая для обеспечения и организации совместного процесса создания, редактирования и управления контентом (то есть содержимым).

1.2.1 Функции CMS

Функции систем управления контентом можно разделить на несколько основных категорий:

1 Создание - предоставление авторам удобных и привычных средств создания контента.

2 Управление - хранение контента в едином репозитории. Это позволяет следить за версиями документов, контролировать, кто и когда их изменял, убеждаться, что каждый пользователь может изменить только тот раздел, за который он отвечает.

3 Публикация - автоматическое размещение контента на терминале пользователя. Соответствующие инструменты автоматически адаптируют внешний вид страницы к дизайну всего сайта.

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

Системы управления контентом делятся на четыре основных категории, которые частично перекрываются:

1 Системы управления исходными кодами традиционно поддерживают управление исходными кодами программ, и часто предоставляют некоторый web-интерфейс, который может использоваться внутри корпоративной сети, а также вне ее для параллельной работы с исходными кодами.

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

3 Системы управления web-контентом представляют собой новую индустрию программных продуктов. Эти системы предназначены для разработки и управления Web-сайтами различной степени сложности. Обычно такие системы поддерживают и некоторый тип управления потоками работ.

4 Системы электронной коммерции - обеспечивают хранение и управление электронными каталогами товаров. По сути, эти системы незначительно отличаются друг от друга. Самое главное отличие этих систем - это люди, которые их используют.

Использование CMS предоставляет следующие преимущества:

1 Оперативное обновление информации - информацию публикует сотрудник, владеющий информацией, без дополнительных посредников в виде технических специалистов.

2 Снижение стоимости поддержки - обновление информации производится самостоятельно, нет необходимости оплачивать труд собственного или внешнего web-мастера.

3 Предоставление дополнительных сервисов пользователю - часть сервисов - поиск, форумы, голосования и т.д., требуют интерактивного взаимодействия с пользователем. Они уже реализованы в рамках CMS.

4 Уменьшение сроков и стоимости разработки - наиболее востребованная функциональность уже реализована в CMS и может быть сразу использована.

5 Повышение качества разработки - при разработке полностью или частично используются готовые модули, которые уже прошли неоднократное тестирование.

Система управления содержимым WordPress.

Для разработки Web-приложения я выбрала CMS WordPress, так как она имеет ряд преимуществ перед другими CMS:

1 Движок и шаблоны к нему можно скачать бесплатно.

2 Выбор шаблонов WordPress достаточно большой.

3 Быстрая установка.

5 Понятная и простая панель управления.

6 Большой выбор доступных дополнений и расширений (плагины).

7 Возможность вносить изменения в код шаблона.



2. Разработка WEB-сайта

2.1 Создание базы данных

информационный приложение редактирование

2.1.1 Настройка базы данных

После установки Денвера, следующий шаг это его настройка. Первым делом настроим базу данных Денвер. В нем используется (Свободная система Управления Базами Данных) СУБД MySQL. Чтобы настроит, базу данных локального сервера используется в Denwer phpMyAdmin.

PhpMyAdmin - это утилита с открытым кодом, написанное на PHP и обеспечивающее полноценное, в том числе удаленное, администрирование базами данных MySQL через браузер.

Запускаем Денвер и набираем в браузере http://localhost/tools/ (см. рисунок 9).

Рисунок 9. Главная страница phpMyAdmin в Денвере

Это главная страница phpMyAdmin в Денвере. Для настройки MySQL в Денвере, на главной странице phpMyAdmin, нам понадобиться всего лишь два блока (см. рисунок 10).



Рисунок 10. Блок главной страницы phpMyAdmin в Денвере

На первом блоке есть выпадающий список, набор символов, который сопоставляет соединения с MySQL в Denwer, в этом списке выбираем «utf8_general_ci (см. рисунок 11).

Рисунок 11. Выбор сопоставления соединения с MySQL

«utf8_general_ci» - это основной набор символов кодировки «UTF-8». «UTF-8» - лучший вариант кодировки, на котором стоит создать сайт. Далее настраиваем язык интерфейса phpMyAdmin в Denwer. Выбираем русский (см. рисунок 12).



Рисунок 12. Выбор языка интерфейса

Далее настраиваем меню phpMyAdmin. Есть несколько пунктов в меню phpMyAdmin, из которых нам понадобиться лишь три из них - «Привилегии», «Экспорт» и «Импорт» (см. рисунок 13).

Рисунок 13. Меню phpMyAdmin

Первое это привилегии. Переходя по этому меню, мы попадаем на страницу учетных записей MySQL в Denwer. Нажимаем на ссылку «Добавить нового пользователя», переходим на страницу добавления нового пользователя MySQL в Denwer (см. рисунок 14).



Рисунок 14. Добавление нового пользователя

В первом поле вводим имя пользователя. Во втором поле «Хост» выбираем «локальный», в результате автоматически вводиться «localhost». В следующих полях вводим пароль. В блоке «База данных для пользователя» оставляем все как есть (см. рисунок 15).

Рисунок 15. Ввод информации учетной записи



Далее переходим на главную страницу phpMyAdmin Денвера. В первом блоке, который называется «MySQL localhost», в поле «Новая база данных» вводим название новой базы данных. Дальше на выпадающем меню выбираем кодировку будущей базы данных и нажимаем на кнопку «создать» (см. рисунок 16).

Рисунок 16. Создание новой базы данных

Далее переходим на страницу «Экспорт» и выделяем название базы данных, которую хотим экспортировать и переходим в самый конец страницы. В блоке «Сохранить как файл» выбираем «gzip» и нажимаем на кнопку «OK (см. рисунок 17).

Рисунок 17. Настройки страницы «Экспорт»

Далее переходим на страницу «Импорт» (см. рисунок 18).



Рисунок 18. Страница «Импорт»

Выбираем копию базы данных нажатием на кнопку «Обзор», ставим кодировку файла и нажимаем на кнопку «OK».

PhpMyAdmin полностью готов к работе. У нас есть пользователь базы данных MySQL и новая база данных.

2.2 Установка CMS WordPress

2.2.1 Установка WordPress на Денвер

WordPress - это движок блога написанный на английском языке. Так как, WordPress очень популярен и много используются в странах с русскоязычными пользователями Интернет, уже давно выпускается официальный русский WordPress. Скачиваем WordPress русский бесплатно по адресу http://ru.WordPress.org.

Распаковываем скачанный архив WordPress. Все файлы находяться в папке «WordPress». Затем определяем название домена блога на WordPress. Называем его «dogidog123». Сайт в Денвере создаем в директории «home».

Все файлы уже лежат на нашем локальном сервере по пути «z:\home\ dogidog123.ru\www\». Далее создаем файл конфигурации. Открываем файл «wp-config-sample.php» в Notepad++ (см. рисунок 19).

Рисунок 19 Файл «wp-config-sample.php»

Ничего не изменяя в этом файле сохраняем его под названием «wp-config.php» в ту же директорию. Теперь в файле «wp-config.php» вводим данные для подключения к базе данных (см. рисунок 20).



Рисунок 20. Ввод данных в файле «wp-config.php»

Спускаемся пониже и находим раздел «Уникальные ключи и соли для аутентификации». Здесь вписываем уникальную фразу для каждого значения. Этот раздел отвечает за безопасность блога. (см. рисунок 21).

Рисунок 21. Раздел «Уникальные ключи и соли для аутентификации»

Спускаемся в раздел «Префикс таблиц в базе данных WordPress», значение «$table_prefix» изменяем на «wp_ dogidog123_» (см. рисунок 22).



Рисунок 22. Разделе «Префикс таблиц в базе данных WordPress»

Вот теперь открылся инсталлятор. На этой странице вводим заголовок нашего сайта, имя пользователя, его пароль и электронный почтовый ящик для восстановления пароля и для других уведомлений. Нажимаем кнопку «Установить WordPress», начнется установка WordPress локально (см. рисунок 23).



Рисунок 23. Инсталлятор WordPress

Установка WordPress закончена. Нажимаем на кнопку «Войти», которое откроет форму авторизации (см. рисунок 24).

Рисунок 24. Форма авторизации

Здесь вводим логин и пароль, которые мы сами выбрали и опять нажимаем на кнопку «Войти». В результате мы окажемся в админ панели WordPress, где необходимо настроить внешний вид. В верхней правой части экрана нажимаем на вкладку «Настройки экрана», в которой и происходит правка всех разделов.

2.2.2 Настройка WordPress

Переходим в админ панель WordPress в меню настроек под названием «Параметры (см. рисунок 25).

Рисунок 25. Меню настроек под названием «Параметры»

Переходим во вкладку «Общие» и делаем необходимые здесь настройки (см. рисунок 26).



Рисунок 26. Вкладка «Общие»

1 Вписываем название нашего сайта;

2 Вписываем краткое описание ресурса;

3 Пропишисываем URL - адрес сайта. Обычно используют одинаковые адреса;

4 Указываем e-mail адрес. На него будут приходить любые уведомления;

5 Данный пункт будет актуален для форумов. Если ваш ресурс из разряда блога или сайта, лучше галочку не ставить;

6 Выбираем роль нового пользователя;

7 Указываем часовой пояс;

8 Выбираем формат отображения даты;

9 Выбираем формат времени;

10 Указываем первый день недели;

11 После установки всех необходимых настроек обязательно нажимаем кнопку «Сохранить изменения». В противном случае придется все повторить.

Переходим во вкладку «Написание» и меняем последний пункт «Сервисы обновления» (см. рисунок 27).

Рисунок 27. Вкладка «Сервисы обновления»

Переходим к настройкам полей вкладки «Чтение» (см. рисунок 28).



Рисунок 28. Вкладка «Чтение»

1 Оставляем стандартную настройку отображения записей, галочка в поле «Ваши последние записи»;

2 Выбираем то количество страниц, которое нам хотелось бы видеть на главной странице;

3 Выбираем, сколько страниц будет отображаться в RSS - ленте;

4 Указываем, как должны отображаться транслируемые в RSS - ленте посты - полностью;

5 Кодировка страниц и лент установлена UTF-8;

6 Сохраняем изменения.

Во вкладках «Обсуждение» и «Медиафайлы» ничего не изменяем.

Установка и настройка WordPress завершены [3].

2.3 Установка шаблона

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

Заходим в раздел «Внешний вид» - «Темы» (см. рисунок 29).

Рисунок 29. Раздел «Внешний вид»

Сверху нажимаем на кнопку «Добавить новую» (см. рисунок 30).

Рисунок 30. Раздел «Темы»

Ищем тему через WordPress. Наводим на Twenty Thirteen и нажимаем «Установить» (см. рисунок 31).



Рисунок 31. Установка темы

На этом установка шаблона на WordPress завершена [1].

2.4 Установка плагинов

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

Для их работы обязательно, чтобы в основной программе была предусмотрена возможность подключения дополнительных модулей (плагинов). Таким образом, плагин является полностью зависимым от основной программы и не может использоваться отдельно от неё.

В боковом меню выбираем вкладку -- «Плагины» и нажимаем на ссылку -- «Добавить новый» (см. рисунок 32).



Рисунок 32. Вкладка «Плагины»

На странице добавления плагина нажимаем «Загрузить» затем «Выберите файл» (см. рисунок 33).

Рисунок 33. Страница добавления плагина

После того как мы выбрали файл скачанного плагина, нажимаем на кнопку установки и ждем до тех пор, пока плагин не установится (см. рисунок 34).



Рисунок 34. Установка плагина

Затем активируем установленный плагин (см. рисунок 35).

Рисунок 35. Активизация плагина

Установка плагинов на WordPress завершена [1].

Установленные плагины:

1 bbPress - форум от разработчиков WordPress.

2 Gallery Carousel Without JetPack - галерея.

3 Social Share Buttons - кнопки «Поделиться в социальных сетей.

4 Contact Form to Email - контактная форма, которая отправляет данные по электронной почте.

5 WPFront Scroll Top - позволяет посетителю легко вернуться к верхней части страницы.

6 Another WordPress Classifieds Plugin (AWPCP) - плагин, который дает возможность запустить бесплатные или платные объявления на сайт.

7 Meta Keywords Generator - автоматический генератор ключевых слов для WordPress.

8 WP DS Blog Map - карта сайта WordPress.



Заключение

В ходе выполнения работы был получен многофункциональный web-сайт, готовый к применению. Данный сайт ориентирован на любителей собак. С его помощью пользователи смогут получать необходимую информацию, общаться на интересующую тему, оставлять свои сообщения или материалы.

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



Список используемых источников

1.WordPress [электронный ресурс]. - режим доступа: http://ru.WordPress.org.

2.denwer [электронный ресурс]. - режим доступа: http://www.denwer.ru.

3.макейчик е. г., электронный учебно-методический комплекс по дисциплине «web-технологии в инфокоммуникациях» / е. г. макейчик. - минск : бгуир, 2013.



Приложение А

Index.php

<?php

/**

* The main template file

*

* This is the most generic template file in a WordPress theme and one of the

* two required files for a theme (the other being style.css).

* It is used to display a page when nothing more specific matches a query.

* For example, it puts together the home page when no home.php file exists.

*

* @link https://codex.WordPress.org/Template_Hierarchy

*

* @package WordPress

* @subpackage Twenty_Thirteen

* @since Twenty Thirteen 1.0

*/

get_header(); ?>

<div id="primary" class="content-area">

<div id="content" class="site-content" role="main">

<?php if ( have_posts() ) : ?>

<?php /* The loop */ ?>

<?php while ( have_posts() ) : the_post(); ?>

<?php get_template_part( 'content', get_post_format() ); ?>

<?php endwhile; ?>

<?php twentythirteen_paging_nav(); ?>

<?php else : ?>

<?php get_template_part( 'content', 'none' ); ?>

<?php endif; ?>

</div><!-- #content -->

</div><!-- #primary -->

<?php get_sidebar(); ?>

<?php get_footer(); ?>

информационный приложение редактирование



Приложение Б

Style.css

/**

* 4.0 Header

* ----------------------------------------------------------------------------

*/

/**

* 4.1 Site Header

* ----------------------------------------------------------------------------

*/

.site-header {

position: relative;

}

.site-header .home-link {

color: #141412;

display: block;

margin: 0 auto;

max-width: 1080px;

min-height: 230px;

padding: 0 20px;

text-decoration: none;

width: 100%;

}

.site-header .site-title:hover {

text-decoration: underline;

}

.site-title {

font-size: 60px;

font-weight: bold;

line-height: 1;

margin: 0;

padding: 58px 0 10px;

}

.site-description {

font: 300 italic 24px "Source Sans Pro", Helvetica, sans-serif;

margin: 0;

}

/**

* 4.2 Navigation

* ----------------------------------------------------------------------------

*/

.main-navigation {

clear: both;

margin: 0 auto;

max-width: 1080px;

min-height: 45px;

position: relative;

}

ul.nav-menu,

div.nav-menu > ul {

margin: 0;

padding: 0 40px 0 0;

}

.nav-menu li {

display: inline-block;

position: relative;

}

.nav-menu li a {

color: #edc49a;

display: block;

font-size: 15px;

line-height: 1;

padding: 15px 20px;

text-decoration: none;

}

.nav-menu li:hover > a,

.nav-menu li a:hover,

.nav-menu li:focus > a,

.nav-menu li a:focus {

background-color: #45161c;421e25

color: #fff;

}

.nav-menu .sub-menu,

.nav-menu .children {

background-color: #320a18;ffbb8a

border: 2px solid #f7f5e7;220e10

border-top: 0;

padding: 0;

position: absolute;

left: -2px;

z-index: 99999;

height: 1px;

width: 1px;

overflow: hidden;

clip: rect(1px, 1px, 1px, 1px);

}

.nav-menu .sub-menu ul,

.nav-menu .children ul {

border-left: 0;

left: 100%;

top: 0;

}

ul.nav-menu ul a,

.nav-menu ul ul a {

color: #fff;

margin: 0;

width: 200px;

}

ul.nav-menu ul a:hover,

.nav-menu ul ul a:hover,

ul.nav-menu ul a:focus,

.nav-menu ul ul a:focus {

background-color: #45161c;

}

ul.nav-menu li:hover > ul,

.nav-menu ul li:hover > ul,

ul.nav-menu .focus > ul,

.nav-menu .focus > ul {

clip: inherit;

overflow: inherit;

height: inherit;

width: inherit;

}

.nav-menu .current_page_item > a,

.nav-menu .current_page_ancestor > a,

.nav-menu .current-menu-item > a,

.nav-menu .current-menu-ancestor > a {

color: #ffbb8a;

font-weight: bold;

font-style: italic;

}

.menu-toggle {

display: none;

}

/* Navbar */

.navbar {

background-color: #1f0e11;

margin: 0 auto;

max-width: 1600px;

width: 100%;

}

.site-header .search-form {

position: absolute;

right: -120px;

top: -5px;

}

.site-header .search-field {

background-color: #fdd5b1;

border: 1px solid #220e10;

background-image: url(images/search-icon.png);

background-position: 5px center;

background-repeat: no-repeat;

background-size: 24px 24px;

cursor: pointer;

height: 48px;

margin: 3px 0;

padding: 0 0 0 34px;

position: relative;

-webkit-transition: width 400ms ease, background 400ms ease;

transition: width 400ms ease, background 400ms ease;

width: 1px;

}

.site-header .search-field:focus {

background-color: #fff;

border: 2px solid #220e10;

cursor: text;

outline: 0;

width: 230px;

}

}

.imagetip span{

border-radius: 5px 5px 5px 5px;

visibility: hidden;

position: absolute;

left: 190px;

background: #fff;

box-shadow: -2px 2px 10px -1px #333;

border-radius: 5px;

width: 20%;

z-index: 9999;

}

.imagetip:hover span{

visibility: visible;

}

Размещено на Allbest.ru