Центр профессионального образования Ида-Вирумаа



Ida-Virumaa Kutsehariduskeskus

IT-õppe valdkond

Eriala: Tarkvaraarendaja

Tatjana Luik

Olga Tsekhovaya

Veebisait «GOURMET»

Lõputöö

Juhataja: O. Popova

Jõhvi 2016

СОДЕРЖАНИЕ

ВВЕДЕНИЕ 3

1. ПОСТАНОВКА ЗАДАЧИ 5

1.1. Задачи 5

1.2. Задачи администратора 5

2. ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ 7

3. ОПИСАНИЕ ПРОЕКТА 8

3.1. Клиентская часть 9

3.2. Административная часть 22

3.3. База данных 25

ЗАКЛЮЧЕНИЕ 33

ЛИТЕРАТУРА 34

ВВЕДЕНИЕ

«Кто владеет информацией – тот владеет миром». Это известное выражение как никогда актуально. В наше время разработка сайта является одним из главных атрибутов многих предприятий, которые работают не только в Интернете. Практически все компании, которые занимаются продажами и рекламой товара стремятся к тому, чтобы присутствовать во всемирной паутине. Главной целью созданного сайта является предоставление информации.   С помощью сайта можно легко и с небольшими затратами времени увеличить объем продаж, донести до покупателя информацию о предлагаемом товаре. Благодаря Интернет-сайту существует возможность охватить огромную аудиторию клиентов.

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

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

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

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

Задача проекта

Задание – создание проекта динамичного информационного сайта. Главная задача такого WEB-сайта - предоставлять посетителям различного рода информацию по тому или иному аспекту человеческой деятельности. Информацию можно постоянно обновлять, дополнять, удалять, оставлять комментарии.

Название проекта «Gourmet». Он, как и множество других кулинарных сайтов, призван служить для того, чтобы пользователи могли найти здесь множество рецептов приготовления различных блюд, почитать советы диетологов, найти просто рекомендации по хозяйству. Здесь можно будет оставить свои комментарии к статьям.

О ПРОЕКТЕ

Учебное заведение: Ida-Virumaa Kutsehariduskeskus

Специальность: Tarkvaraarendaja

Годы обучения: 2014 - 2016

Название проекта: Сайт по кулинарии «Gourmet»

ПОСТАНОВКА ЗАДАЧИ

Задание – сайт «Gourmet».

Этот сайт - информационный ресурс. Ключевым наполнением для сайта являются рецепты блюд с фотографиями, разделенные по категориям, а также статьи в рубриках «Азбука правильного питания» и «Хозяйке на заметку».

Основной функционал сайта включает:

• административную часть, в которой производится управление информационным содержимым web-сайта;

• пользовательскую часть для гостевых пользователей — позволяет просматривать страницы сайта и производить поиск интересующих статей и рецептов;

• возможность организации обратной связи посредством страницы контактов;

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

HTML структура административной части сайта разработана с использованием фреймворка Bootstrap. Особое внимание при разработке сайта было уделено системе фильтрации статей и реализация подгрузки информации без перезагрузки основного контента (технология Ajax). В проекте технология Ajax применяется при подгрузке статей на административной части.

1 Задачи

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

2 Задачи администратора

Управление сайтом производит администратор, привилегией которого является добавление, редактирование и удаление рецептов, добавление, редактирование и удаление статей, удаление комментариев, добавление, редактирование и удаление категорий рецептов, добавление, редактирование и удаление видео. Данные – категории рецептов, статьи и комментарии необходимо хранить в базе данных.

ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ

Для создания проекта использовала программы:

Macromedia Dreamweaver

Профессиональный редактор HTML для проектирования, написания кода и поддержки сайтов, web-страниц и приложений сети.

Xampp

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

Notepad++

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

Paint

Графический редактор Paint позволяет создавать рисунки на пустом листе или поверх других изображений.

Microsoft Office

Офисный пакет приложений, созданных корпорацией Microsoft для операционных систем Microsoft Windows и Apple Mac OS X. В состав пакета входит программное обеспечение для работы с различными типами документов: текстами, электронными таблицами, базами данных и др.



Weebly — это бесплатный сервис по визуальному (WYSIWYG) созданию сайтов и последующему их размещению на серверах компании.

Adobe Photoshop

Adobe Photoshop - многофункциональный графический редактор, разработанный и распространяемый фирмой Adobe Systems

ОПИСАНИЕ ПРОЕКТА

В данном проекте:

Создана база данных на MySQL - сервере phpMyadmin. Проект выполнен на языке php с использованием html – кода. Для оформления веб-сайта за основу взят готовый html-шаблон с сайта , который был доработан, видоизменен и наполнен информацией самостоятельно.

1 Клиентская часть

В шапке страницы располагается:

➢ горизонтальное меню навигации

➢ строка поиска

➢ Кнопка для входа на сайт

[pic]

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

Через модальное окно может войти зарегистрированный пользователь, либо новый посетитель сайта может зарегистрироваться:

При желании пользователь может сменить свой пароль, пройдя по ссылке «Сменить пароль».

Если пользователь забыл свой пароль, то пройдя по ссылке «Забыли пароль», он может заполнить форму, и ему на электронный адрес придет новый сгенерированный пароль

Под шапкой располагается слайд-шоу изображений и приветствие для посетителей:

В блоке «Самые новые рецепты» выводятся на экран 3 рецепта, которые были установлены последними.

Воспользовавшись ссылкой «Читать дальше», пользователь откроет полное содержание интересующего его рецепта

Ниже расположен блок «ПОПУЛЯРНЫЕ РЕЦЕПТЫ » и видео-рецепты «Мастер-класс»

Нажимая на ссылку «Показать больше», открывается страница с коллекцией мастер-классов, которая хранится в Базе Данных.

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

Внизу этого блока находится маленький опросник для определения полезности информации левого контента:

Категории представлены в виде слайд-шоу, а название категории является ссылкой на страницу с полным списком рецептов выбранной категории:

Кнопка «Рецепты » открывает список категорий рецептов:

Выбрав нужную категорию, попадаем на страницу с блюдами выбранной категории

Далее, идя по ссылке «читать дальше», попадаем на страницу с детальным и пошаговым описанием рецепта:

Кнопка-ссылка «Азбука правильного питания» в главном меню навигации приведет к списку статей этой рубрики. Также с помощью выпадающего меню можно сразу перейти на страницу с полным текстом статьи.

Список статей рубрик «Азбука правильного питания» и «Хозяйке на заметку» так же, как и список рецептов, представлен в виде блоков с названием-ссылкой, кратким текстом и иллюстрацией.

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

2 Административная часть

Меню администратора отличается от меню пользователя.

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

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

Для добавления статей также используется текстовый редактор

3 База данных

База данных содержит семь таблиц:

• таблица «category» – список категорий рецептов

• таблица «recept» – список рецептов

• таблица «commentarii» – список комментариев к рецептам

• таблица «users» – список зарегистрированных пользователей

• таблица «uudesed» – список статей рубрики "Азбука правильного питания"

• таблица «sovet» – список статей рубрики "Хозяйке на заметку"

• таблица «video» – список видеороликов рубрики "Мастер-класс"

Таблица «category» предназначена для хранения списка категорий рецептов. Таблица содержит поля:

• id_category − уникальный номер категории рецептов (ключевое поле)

• category_name − название категории

• category_pilt − иллюстрация категории

Таблица «recept» предназначена для хранения списка рецептов. Таблица содержит следующие поля:

• id_recept − уникальный номер рецепта (ключевое поле)

• title − название рецепта

• smalltext – краткое описание рецепта

• recept_pilt – иллюстрация рецепта

• id_category – номер категории рецепта

• recept_file – название файла с полным текстом рецепта

• autor – автор рецепта

• ocenka – количество баллов, выставленных пользователями

• publish – разрешение администратора на публикацию рецепта

Таблица «sovet» предназначена для хранения списка статей рубрики «Хозяйке на заметку». Таблица содержит поля:

• id_sovet − уникальный номер статьи (ключевое поле)

• title − название статьи

• smalltext – краткое описание статьи

• img_sovet – иллюстрация статьи

• file_sovet – название файла с полным текстом статьи

• autor – автор статьи

Таблица «uudised» предназначена для хранения списка статей рубрики «Азбука правильного питания». Таблица содержит поля:

• id_uudis − уникальный номер статьи (ключевое поле)

• title − название статьи

• smalltext – краткое описание статьи

• uudis_pilt – иллюстрация статьи

• uudis_text – название файла с полным текстом статьи

Таблица «commentarii» предназначена для хранения списка комментариев к рецептам. Таблица содержит поля:

• id_comments − уникальный номер комментария (ключевое поле)

• time – время написания комментария

• name_autor – имя автора комментария

• text – текст комментария

• id_recept – номер рецепта, к которому написан комментарий

• publish – разрешение администратора на публикацию комментария

Таблица «video» предназначена для хранения списка видеороликов рубрики «Мастер-класс».

Таблица содержит поля:

• id − уникальный номер видеоролика (ключевое поле)

• title − название видео

• link – ссылка на видео

Таблица «users» предназначена для хранения списка статей рубрики «Азбука правильного питания». Таблица содержит поля:

• id_user − уникальный номер пользователя (ключевое поле)

• username – имя пользователя

• login – имя (идентификатор) учётной записи пользователя

• password ̶ пароль пользователя

• emeil – электронный адрес пользователя

ЗАКЛЮЧЕНИЕ

В результате выполнения дипломного проекта был изучен материал, посвященный современному развитию сайтостроения. Сайт написан на языке программирования PHP с использованием системы управления базами данных MySQL, языке программирования JavaScript и библиотеке JavaScript — JQuery и представляет собой web-ресурс с динамически меняющейся информацией. Информация хранится в базе данных, что позволяет легко добавлять, редактировать и удалять данные. База данных и программный код проекта позволяет использовать его для других подобных проектов: медиа-газета; живой журнал (блог); сайт фирмы, предлагающей услуги; реклама учебного заведения и т.п. Программный код легко можно адаптировать под требования заказчика.

ЛИТЕРАТУРА

1. Никсон Робин. Создаем динамические веб-сайты c помощью PHP, MySQL, JavaScript, CSS и HTML5. / Санкт-Петербург, Питер, 2015, 688 с.

2. Клименко Роман. Веб-мастеринг. Изучаем HTML5, CSS3, JavaScript, PHP, CMS, AJAX, SEO. / Санкт-Петербург, Питер, 2013, 512 c.

3. Берд Дж. Веб-дизайн. Руководство разработчика. / Санкт-Петербург, Питер, 2012, 224

4. – крупный интернет-ресурс по PHP, MySQL и другим веб-технологиям.

5. сайт о программировании

6. - крупный интернет-ресурс по HTML и CSS

7. - крупный интернет-ресурс по BOOTSTRAP

8. -портал по BOOTSTRAP

[pic][pic]

-----------------------

Рис. 1. Главная страница

Рис. 2. Шапка страницы

Рис. 3. Поиск по сайту

Рис. 4. Модальное окно для входа

Рис. 5. Форма регистрации

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

Рис. 7. Форма получения нового пароля

Рис. 8. Замена пароля

Рис. 9. Слайд-шоу и приветствие

Рис. 10. Самые новые рецепты

Рис. 11. Переход по ссылке "Читать дальше"

Рис. 12. Самые популярные рецепты и мастер-класс

Рис. 13. Коллекция видео-рецептов

Рис. 14. Левый блок

Рис. 15. Список категорий рецептов

Рис. 16. Страница со списком рецептов выбранной категории

Рис. 18. Форма для оценки и комментария

Рис. 17. Описание рецепта

Рис. 19. Страница со списком статей

Рис. 20. Форма добавления рецепта

Рис. 21. Рецепт с иллюстрациями

Рис. 22. Форма входа администратора

Рис. 23. Страница администратора

Рис. 24. Страница правки статей "Азбуки правильного питания"

Рис. 25. Форма добавления статьи

Рис. 26. Страница редактирования рецептов

Рис. 27. Форма редактирования рецепта

Рис. 28. Страница редактирования комментариев

Рис. 29. Структура таблицы "category"

Рис. 30. Обзор таблицы "category"

Рис. 31. Структура таблицы "recept"

Рис. 32. Обзор таблицы "recept"

Рис. 33. Структура таблицы "sovet"

Рис. 34. Обзор таблицы "sovet"

Рис. 35. Структура таблицы "uudised"

Рис. 36. Обзор таблицы "uudised"

Рис. 37. Структура таблицы "commentarii"

Рис. 38. Обзор таблицы "commentarii"

\

Рис. 39. Структура таблицы "video"

Рис. 40. Обзор таблицы "video"

Рис. 42. Структура таблицы "users"

Рис. 41. Обзор таблицы "users"

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download