Электронная кулинарная книга блюд Северного Кавказа

КУРСОВОЙ  ПРОЕКТ

на  тему:

  «Электронная кулинарная  книга блюд Северного  Кавказа» 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

2011 г.

     Содержание 

Введение………………………………………………………………………3

Глава 1. Современные Интернет-технологии…………………………..4

    1.1. Технология HTML……………………………………………………..4

    1.2. Технология PHP………………………………………………………..5

    1.3. Технология JavaScript………………………………………………....6

    1.4. Технология Flash……………………………………………………....7

    1.5. Технология CSS………………………………………………………..8

 Глава 2.  Системы управления контентом……………………………...9

2.1.Дизайн сайта……………………………………………………………....10

2.2.Добавление материалов на сайт…………………………………………10

2.3.Интерактивные возможности…………………………………………….10

2.4.Сбор статистики…………………………………………………………...10

2.5.Иерархическая структура………………………………………………...11

Глава 3. Руководство по WORDPRESS………………………………….....12

3.1.Что такое Wordpress?......................................................................................12

3.2.Достоинства движка Wordpress………………………………………….12

3.3.Недостатки…………………………………………………………………13

3.4.Установка Wordpress на удаленный сервер…………………………….13

3.5.Установка WordPress на Denwer…………………………………………15

Глава 4. Разработка электронной книги блюд Северного Кавказа….20

     4.1.Базовые настройки………………………………………………….20

     4.2.Типы контента для заполнения книги……………………………..20

     4.3.Добавление рубрики, записей, страниц…………………………...21

     4.4.Дизайн………………………………………………………………..22

     4.5.Использование плагинов…………………………………………...24

Заключение……………………………………………………………………..28

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

Введение

     Влияние глобальной компьютерной сети Интернет на современный мир не имеет исторических аналогов. Его сегодняшний день –  это начало эпохи электронного проникновения  во все сферы человеческой жизни, это нечто большее, чем просто маркетинговая кампания, это основа новой философии и новой деловой стратегии. Создание Web- сайтов является одной из важнейших технологий разработки ресурсов Интернет. Web-сайт - это информационный ресурс, состоящий из связанных между собой гипертекстовых документов (Web-страниц), размещенный на Web-сервере и имеющий индивидуальный адрес. Wеb-cайт - это информационный продукт, представляющий собой совокупность страниц, объединенных по смыслу и расположенных на одном Web-сервере. Для показа своей деятельности научно-исследовательские, проектные организации, промышленные предприятия, образовательные учреждения могут использовать различные виды сайтов: сайт-визитку, витрину, электронный магазин (Интернет-магазин), информационный сайт, корпоративное представительство, портал.

     Цель  данной работы: проанализировать создание Web-сайтов и разработать электронную книгу блюд Кавказа для Web-сайта, с возможностью поиска информации.  
 
 
 
 

Глава 1. Современные Интернет-технологии

1.   Технология HTML

     HTML (язык гипертекстовой разметки) — это основной язык, с помощью которого создаются веб-страницы. Страница, которую пользователь видит в своем браузере, может состоять из множества разных файлов — например, изображений, анимационных роликов, сценариев JavaScript, апплетов и т. д. - но основой страницы практически всегда является документ HTML. Другие языки разметки (прежде всего многочисленные приложения XML) пока еще слабо поддерживаются браузерами и поэтому не вытесняют HTML на компьютерах обычных пользователей.

     Аббревиатура  «HTML» расшифровывается как «HyperText Markup Language» (в переводе на русский язык — «язык разметки гипертекста»). Взрывной рост Всемирной Паутины в начале 1990-х во многом обусловлен широким распространением этого языка и браузеров, отображающих написанные на нем страницы.

     Гипертекст  — это просто текст со ссылками. Текст практически каждой веб-страницы является типичным примером гипертекста: можно щелкнуть по ссылке, и вы немедленно перейдете к другой странице, к  загружаемому файлу или еще к  какому-нибудь ресурсу, на который указывает эта ссылка.

     В коде документа HTML находится не только сама информация, которую пользователь увидит на веб-странице, но и некоторые  инструкции о том, как браузер  пользователя будет обрабатывать эту  информацию.

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

     Такие конструкции, которые сами не являются содержанием страницы, но указывают  браузеру, как интерпретировать содержание, и называются разметкой. 

     Разметка  — это код, который сопровождает содержание документа и предоставляет  браузеру (или другой обрабатывающей программе) информацию о том, как  следует интерпретировать те или  иные фрагменты содержания.

     Язык HTML предназначен в первую очередь для структурной разметки, т. е. для обозначения каждого элемента в соответствии с его местом и ролью в структуре документа. Например, тэг <p>…<⁄p> обозначает, что элемент является просто абзацем обычного текста, тэг <ul>…<⁄ul> — что элемент является перечнем, тэг <blockquote>…<⁄blockquote> — что элемент является цитатой и т. д.

     В HTML есть также тэги, управляющие  внешним видом отдельных элементов: например, тэг <i>…<⁄i> выделяет текст  курсивом, тэг <font>…<⁄font> изменяет различные параметры шрифта, а тэг <br ⁄> вставляет перевод строки. Все такие тэги не относятся к структурной разметке, и применять их не рекомендуется. Все, что касается оформления веб-страницы, ее внешнего вида, можно и нужно делать с помощью CSS.

2.   Технология PHP

     Изначально  аббревиатура РПР означала Preprocessor of Home Pages — препроцессор домашних страниц. Это язык внедряемых в HTML-страницы сценариев, исполняемых на сервере. По большей части его синтаксис заимствован из таких языков, как С, Perl, Java, и при этом добавлена масса возможностей, которых этим языкам недостает. Проще говоря, синтаксис РНР — это разумная альтернатива и строгости С, и «беспредельности» Perl.

     РНР наделен практически полным набором  функциональности, о которой (до появления  РНР) мог только мечтать web-программист. Его цель — позволить максимально быстро создавать динамически генерируемые web-страницы. С полным основанием можно заявить, что изучение и использование РНР будет выгодно как начинающим, так и профессиональным программистам.

     Основные  достоинства РНР: бесплатен; постоянно совершенствуется; работает на UNIX и Windows платформах; допускает работу с большинством СУБД; имеет широкий набор функций (более 3 тыс.); допускает объектно-ориентированное программирование; способен использовать протоколы HTTP, FTP, ШАР, SNMP, NNTP, POPS, net sockets 11 другие; позволяет выполнять все операции, что и перечисленные его конкуренты, и даже работать с файлами графики. Можно также запускать PHP-скрипты как интерпретируемые файлы и компилировать исполняемые приложения (в том числе с поддержкой графического интерфейса GTK).

3.   Технология JavaScript

     JavaScript - это новый язык программирования, используемый в составе страниц  HTML для увеличения функциональности  и возможностей взаимодействия  с пользователями. Он был разработан фирмой Netscape в сотрудничестве с Sun Microsystems на базе языка Sun's Java .С помощью JavaScript на Web-странице можно сделать то, что невозможно сделать стандартными тегами HTML. Скрипты выполняются в результате наступления каких-либо событий, инициированных действиями пользователя. Создание Web- документов, включающих программы на JavaScript, требует наличие текстового редактора и подходящего браузера. Некоторые браузерыи включают в себе встроенные редакторы, поэтому необходимость во внешнем редакторе отпадает.

4.   Технология CSS

     CSS (каскадные таблицы стилей) приобрели  популярность в конце 1996 года. Не смотря на относительно  долгое существование этой технологии, ее практическое применение для  Web-дизайна ограничивалось управлением  шрифтами и цветом, по крайней мере, до недавнего времени.

     Данное  ограничение возникло из-за отсутствия совместимой поддержки таблиц стилей браузерами. Поскольку не все браузеры одинаково обрабатывали инструкции языка CSS (если вообще обрабатывали), дизайнеры  не могли в полной мере воспользоваться реальными преимуществами таблиц стилей. Вместо этого, ответственность за отображение информации возлагалась на язык HTML.

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

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

     Язык CSS позволяет управлять как одним документом, так и миллионами документов. Для внесения изменения потребуется модифицировать необходимый стиль в одном CSS-файле, и это изменение автоматически отразится на всех связанных документах. В языке HTML это сделать невозможно.

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

5. Технология  Flash

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

     ГЛАВА 2.  Системы управления контентом

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

     Движком будем называть набор серверных  программ, который извлекает данные из базы данных и управляет ими, позволяя добавлять, редактировать и удалять  информацию на сайте. Этим не ограничивается область применения движка, в его задачу входит также управление интерактивными модулями — новости, гостевая книга, форум, голосование и т.д. Более распространенный термин — «Система управления контентом» ( по-английски Content Management System, CMS). Но мы будем использовать именно «движок», потому что это менее официально, да и признаться, просто мне нравится.

     Понятно, что движок для новостного сайта  будет отличаться от движка развлекательного ресурса. У них разное направление и задачи. Тем не менее, не вдаваясь в подробности предназначения сайта, опишем область использования движков.

2.1. Дизайн сайта

Смена дизайна и его подстройка под  существующие нужды 
Как правило, дизайна веб-страниц имеет характерные области, которые остаются неизменными на всех документах. Сюда можно отнести заголовок сайта и так называемый «подвал» — нижняя часть страницы. Учитывая эти особенности, шаблон дизайна размещается в отдельном файле, что позволяет легко его редактировать и менять. Данный подход ускоряет работу над сайтом, ведь теперь дизайнер и программист могут работать независимо друг от друга, не ожидая результатов труда партнера.

2.2. Добавление материалов на сайт

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

2.3. Интерактивные возможности

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

2.4. Сбор статистики

     Можно сохранять статистику по количеству прочтений статей и затем использовать ее для генерации списка популярных материалов. Еще один способ формирования подобного списка — воспользоваться итогами оценки статей пользователями.

2.5. Иерархическая структура

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

     ГЛАВА 3. РУКОВОДСТВО ПО WORDPRESS 

3.1 Что такое Wordpress?

WordPress - это CMS (Content-Management-System — Система-Управления-Содержанием), имеющая открытый код и распространяющаяся бесплатно по лицензии GNU GPL. Движок WordPress написан на PHP с использованием базы данных MySQL. Сфера применения WordPress настолько широка, насколько позволяют многочисленные плагины и темы, от личного дневника - до новостного портала или бизнес-сайта небольшой компании.

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

3.2 Достоинства движка Wordpress:

• Простота использования с возможностью публикации с помощью сторонних программ и сервисов (например, Windows Live Writer).
• Удобство и простота установки движка, доступная даже новичку.
• Поддержка RSS, Atom, Tackback, Pingback.
• Удобная структура с подключаемыми модулями (плагинами), делающие систему расширяемой под практически любые нужды.
• Поддержка тем, позволяющих легко менять внешний вид. Тема на Wordpress, как правило, устанавливается в два клика.
• Большое количество энтузиастов, размещающих темы и плагины бесплатно на тематических сайтах и форумах, а так же официальных репозиториях.

3.2 Недостатки:

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

3.3. Установка Wordpress на удаленный сервер

WordPress хорошо известен своей легкой установкой. В большинстве ситуаций установка WordPress - очень простой процесс и занимает менее чем пять минут от начала до конца.

Необходимые вещи:

Вам нужен доступ к вашему сайту, его директориям  и программное обеспечение для  процесса установки. Это:

1. Доступ к Вашему сайту (shell или FTP)
2. Текстовый редактор
3. FTP-клиент (если Вы устанавливаете WordPress на удаленный сервер)
4. Браузер, которым Вы пользуетесь.

Начните установку  с:

Проверки Вашего сервера на соответствие минимальным  требованиям WordPress.

Получения последней  версии WordPress.

Распаковки полученного  файла в папку на вашем компьютере.

Ниже представлены краткие инструкции, для тех, кто уже знаком с процессом установки различных веб-приложений. Более подробные инструкции далее.

Скачайте и  распакуйте дистрибутив WordPress, если вы этого еще не сделали.

Создайте базу данных для WordPress на вашем веб-сервере, чтобы ваш пользователь MySQL имел все права для доступа и внесения изменений в нее.

Переименуйте  файл wp-config-sample.php файл в wp-config.php.

Откройте wp-config.php в вашем любимом текстовом редакторе и впишите в него настройки подключения к базе данных.

Разместите файлы  WordPress на вашем веб-сервере:

Если вы хотите установить WordPress в корень вашего сайта (например, http://example.com/), перенесите все содержимое предварительно распакованного дистрибутива WordPress в корневую папку веб-сервера.

        Если вы хотите установить  WordPress в отдельную папку на вашем веб-сервере (например, http://example.com/blog/), переименуйте папку wordpress придав ей название папки, в которую вы хотите установить систему и перенесите её на веб-сервер. Например, если вы хотите установить WordPress в папку "blog" на веб-сервере, тогда вам необходимо переименовать папку "wordpress" в "blog" и перенести ее в корень веб-сервера.

 Совет: Если  скорость вашего соединения с  интернетом по протоколу FTP мала, советуем вам прочитать статью о том, как правильно выгрузить файлы на сервер в данном случае: Шаг 1: Загрузка и распаковка.

Перейдите по ссылке wp-admin/install.php используя ваш любимый веб-браузер.

Если вы установили WordPress в корень веб-сервера, перейдите по ссылке: http://example.com/wp-admin/install.php

 Если вы  установили WordPress в собственно созданную вами папку на веб-сервере, например, blog, тогда перейдите по ссылке: http://example.com/blog/wp-admin/install.php

Вот и все! Если вы сделали все правильно - установка  WordPress должна была увенчаться успехом.

3.4 Установка WordPress на Denwer

Чтобы установить WordPress на Denwer, проделайте следующие шаги: 
1) Скачайте архив с русским WordPress.

2) Теперь создадим виртуальный хост. Для этого зайдите в C:\WebServers\home или в Z:\home (все зависит от того, какие папку и букву диска вы выбрали в процессе установки) и создаем в ней папку. Имя папки задайте любое по желанию, но латинскими буквами. Я задал имя cms1.

В созданной  папке создайте папку www. После создания у меня получился такой путь: Z:\home\cms1\www

3) Скопируйте все файлы из папки wordpress, которая находилась в архиве, и вставьте их в папку Z:\home\cms1\www

4) Перезапустите Denwer, кликнув по ярлыку Restart Denwer.

5) Откройте браузер и введите localhost.

Если вы видите страницу с надписью “Ура, заработало!”, значит, все сделали правильно, и Denwer работает.

6) Теперь нам нужно создать базу данных (БД) для WordPress. Для работы с БД используется phpMyAdmin, которая уже установлена в Denwer.

phpMyAdmin – это бесплатная утилита для управления базами данных MySQL. Под управлением понимается создание, редактирование и удаления БД через интерфейс браузера.

Чтобы войти в phpMyAdmin, спуститесь вниз страницы, которая появилась на 5 пункте (localhost) и кликните по ссылке:

http://localhost/Tools/phpMyAdmin Проверка MySQL и phpMyAdmin

(*либо в адресной  строке браузера введите http://localhost/Tools/phpMyAdmin)

Чтобы работать с базами данных нужно создать пользователя MySQL с паролем. По умолчанию в phpMyAdmin в Denwer создан пользователь root без пароля. Некоторые CMS требуют, чтобы у пользователя MySQL был пароль. Поэтому можно отредактировать уже созданного пользователя либо создать нового. Я создал нового. Пользователь создается один раз и потом его можно использовать для установки других скриптов или CMS, которые работают с MySQL.

Чтобы создать пользователя, кликните по ссылке Привилегии.

Затем по ссылке Добавить нового пользователя. 
После этого появится окно создания нового пользователя.

Введите Имя  пользователя, пароль (в 2-ух полях) и  отметьте все привилегии (ссылка «Отметить все»), нажмите кнопку «Пошел». Запомните пароль и имя, они всегда пригодятся.

Пользователь создан и теперь нужно создать базу данных MySQL для WordPress.

Чтобы создать  базу вернитесь на главную страницу phpMyAdmin (http://localhost/Tools/phpMyAdmin/) и там, где «Создать новую БД» введите латинскими буквами имя вашей базы данных и нажмите кнопку «Создать» .

Имя можно выбрать  любое. Я ввел имя wp.

БД wp была создана.

7) Виртуальный хост с файлами WordPress и база данных готовы. Теперь приступаем к установке CMS.

Введите в строке браузера имя вашего виртуального хоста, т.е. название вашей папки. У меня это cms1.

После этого  загрузится окно в котором будет  написано:

Возможно нет  файла wp-config.php и т.д

Нажмите на кнопку «Создать конфигурационный файл». После чего, загрузиться новое окно, в котором нужно нажать кнопку «Поехали».

Последний шаг установки. Здесь вам нужно ввести: имя базы данных, имя пользователя базы данных и пароль пользователя базы данных (те, которые вы создавали на пункте 6).

Затем жмите  кнопку “Запуск инсталляции”. В следующем окне вводите название блога и e-mail. Затем система выдаст вам логин admin и пароль. Запишите пароль. Он нужен для входа в admin панель WordPress.

Готово. 
 
 
 
 
 
 
 
 
 
 
 

ГЛАВА 4. РАЗРАБОТКА ЭЛЕКТРОННОЙ  КНИГИ БЛЮД СЕВЕРНОГО  КАВКАЗА.

4.1. Базовые настройки. 

После установки движка WordPress на локальный сервер, приступим к базовым настройкам. Для этого нам необходимо зайти в администраторскую зону и уже там сделать базовые настройки. Для этого нам необходимо выбрать пункт Настройки, который имеет следующие подпункты.

     В общих настройках можно настроить заголовок, краткое описание, адрес wordpress, настроить дату, формат времени. Далее зайдем на постоянные ссылки. Тут мы настроим как будет отображаться ссылка. Так по умолчанию она будет иметь вид: http://localhost/localblog/?p=123, если мы не хотим чтобы так отображалось достаточно выбрать пункт произвольная структура и написать /%category%/%postname%.html. Когда мы будем открывать какую-нибудь страницу, он будет отображать ссылку следующим образом: http://localhost/book/category/abxazskaya-kyxnya. Сохраняем изменения.

4.2 Типы контента  для заполнения  книги.

Wordpress имеет следующие типы для занесения информации. В данном случае мы будем добавлять рецепты.

1. Записи.
2. Метки.
3. Рубрики. Рубрики, в отличие от меток, могут иметь иерархию. Например вы можете иметь рубрику «Джаз», у которой есть дочерние рубрики «Bebop» и «Big Band». Все опционально.
4. Страницы.