Разработка веб-сайта

 

ВВЕДЕНИЕ

В настоящее время, в связи с глобальным развитием сети Интернет, в программировании все более резко выделяться отдельная его отрасль - web-программирование. Изначально, оно не могло даже сравниться по своей сложности с другими областями «программистского ремесла», не дотягиваясь не только до системного, но даже и до прикладного программирования. Речь идет, конечно, о программировании сценариев для интернет сайтов, или, Web-программировании.

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

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

Языки веб - программирования, на которых выполняются и те, и другие скрипты различны. Некоторые из языков используются только для создания серверных скриптов, другие - только для клиентских, а многие языки - для тех и других.

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

1. Постановка задачи

.1 Назначение сайта

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

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

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

1.2 Требования к сайту

Информационно новостной сайт должен обладать удобным, и интуитивно понятным дизайном. Кроме этого на будущую популярность, сайта в не меньшей мере влияет его содержание.

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

За последние годы многое изменилось в WEB программировании, появилось множество новых интересных и полезных возможностей. Поэтому простым статическим HTML сайтом даже с уникальным интересным контентом, и красивым дизайном уже никого не удивить. Да с такого сайта можно получить посетителей с поисковых систем, но для набора постоянной аудитории, нужно создать дополнительные возможности.

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

возможность комментирования новостей

возможность регистрации на сайте

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

возможность осуществления поиска по сайту

возможность восстановления пароля

возможность изменения пароля

возможность изменения других регистрационных данных

возможность вести учет количества просмотров новостей

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

Разработанная для данного дипломного проекта административная часть, должна позволяет администратору:

добавлять, редактировать и удалять новости;

добавлять, редактировать и удалять категории;

добавлять, редактировать и удалять пользователей;

редактировать и удалять комментарии;

1.3 Структура пользовательской части сайта

Пользовательская часть сайта состоит из шести основных блоков:

шапка сайта

блок навигации

блок авторизации

блок поиска

блок основного содержания.

Эти блоки формируются на сайте средствами языка программирования php.

Шапка сайта одинаковая для всех страниц сайта, она содержит в себе небольшое изображение, и текст, наиболее полно отражающий идею сайта.

В блок навигации выводятся из базы данных все категории сайта в виде ссылок, на них.

Блок авторизации предназначен для авторизации пользователя путем ввода регистрационных данных: логина и пароля. Также в этом блоке есть ссылки на восстановление пароля и регистрации. После того как пользователь пройдёт авторизацию, (а пройдёт он её если введенные им данные совпадают с данными которые он указал при регистрации) в этом блоке будет отображаться имя логин и ссылки на страницу профиля и выхода с сайта. Пока пользователь будет авторизован, он будет иметь возможность оставлять комментарии без ввода защитного кода. Идентификация пользователя будет осуществляться на основе записанных в его браузер cookie файлах.

Блок поиска предназначен для отправки ключевого слова по которому будет, происходит поиск в новостях сайта. Этот запрос отправляется в GET переменной search в файл обработчик search.php.

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

Блок с основным содержанием формируется в файлах, которые непосредственно производят вывод информации в браузер, на всех страницах сайта, изменяются только файлы: index.php, login.html, profile.html, recover_password.php, registration.php, search.php, view_cat.php, view_post.php.

На главной странице index.php в блоке основного содержания выводится краткое описание 5 последних новостей, с ссылками на них, количество просмотров, дата добавление, автор и категория.

На странице авторизации login.php в блоке основного содержания отображается форма с двумя полями, для ввода логина и пароля, и кнопка активирующая эту форму. А так же две ссылки, на регистрацию и восстановление пароля.

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

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

На странице регистрации registration.php в блоке основного содержания отображается форма, состоящая из семи полей: логин, проль, имя, email, секретный вопрос, и поля для ввода кода с картинки. При правильном заполнении этих полей в браузер выводится сообщение об успешной регистрации пользователя.

На странице поиска search.php в блоке основного содержания отображаются новости которые соответствуют указанному в блоке поиска поисковому запросу.

На странице вывода новостей категории view_cat.php в блоке основного содержания отображаются новости выбранной категории.

На странице вывода полной новости view_post.php в блоке основного содержания отображается полная новость. Кроме этого отображаются и все комментарии к этой новости с формой добавления комментариев. В этом блоке для отправки комментариев, не зарегистрированным пользователям нужно ввести код с картинки, имя и email, а зарегистрированным пользователям заполнять эти поля не нужно, так как они уже идентифицированы.

1.4 Структура административной части сайта

Административная часть сайта в чем то похожа на пользовательскую. Её можно условно поделить на 3 части:

шапка сайта;

меню редактирования;

динамическая часть;

Две первые части на всех страницах остаются неизменными, а вот третья постоянно изменяется в зависимости от выбранного в меню пункта.

Шапка сайта находится в самом верху сайта и является изображением.

Меню редактирования находится с левой стороны ниже шапки сайта и состоит из ссылок, которые ведут на php файлы, позволяющие редактировать, удалять, и добавлять контент сайта и пользователей.

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

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

При нажатии на вторую ссылку «Редактировать» в категории «Новости», откроется файл edit_news.php и в динамической части, откроется список всех новостей сайта, заголовки которых будут являться ссылками на редактирование этих новостей. Кроме этого в этом окне можно удалить новости, нажав на кнопку удалить, находящуюся справа возле каждой новости.

При нажатии на аналогичные ссылки в категориях меню: «Категории», «Комментарии» и «Пользователи» будет аналогичный результат, отличие будет лишь в количестве и значениях полей которые, надо заполнить. А также в категории «Комментарии» не будет возможности добавления комментариев. Поэтому описывать их подробно не имеет смысла.

2. Обоснование инструментов разработки

.1 Эмулятор Web - сервера Denwer 3

Возникают ситуации, когда web - программисту необходимо проверить полный вид интернет-страниц. Однако, это невозможно сделать при работе дома - так как технологии SSI (Server-Side Includes - Включения на стороне сервера), CGI (Common Gateway Interface - Общий шлюзовой интерфейс) и РНР требуют использования сервера. Для решения этой проблемы специалисты устанавливают на домашний компьютер (даже и не подключенный к Интернету) специальную программу - Web-сервер Denwer 3. Denwer «Денвер» - Джентльменский набор Web-разработчика «Д.н.w.р» - проект Дмитрия Котерова, набор дистрибутивов (Apache, PHP, MySQL, Perl и т.д.) и программная оболочка, используемые Web-разработчиками для разработки сайтов на «домашней» (локальной) Windows-машине без необходимости выхода в Интернет. Главная особенность Денвера - удобство при удаленной работе сразу над несколькими независимыми проектами и возможность размещения на Flash-накопителе. По мнению специалистов web-программирования, эмулятор веб-сервера Denwer 3 подходит для создания собственного хостинга, а так же позволяет реализовывать базы данных в собственных сайтах, используя в системе управления базами данных MySQL - язык структурированных запросов.

Для запуска Денвера нажимаем по созданному на рабочем столе ярлыку «Start Denwer» и набираем в адресной строке браузера #"justify">

Рисунок 2.1 - Запуск программы Denwer

Создаем свою папку хранения интернет - страниц на web - сервере Denwer.

Для этого воспользуемся следующей инструкцией:

заходим в локальный диск С - WebServers - home.

в папке home необходимо создать свою папку, куда впоследствии будем сохранять свою выполненную курсовую работу.

например, папку «test1.ru». В папке «test1.ru» создаём папку «WWW».

сделанные работы сохраняем с расширением«.php » .

Для просмотра результата выполнения скрипта нужно запустить Denwer. Затем открыть любой браузер и в адресной строке браузера написать #"justify">2.2 Язык Web-программирования РНР

Препроцессор Гипертекста или PHP , является широко используемым языком сценариев общего назначения с открытым исходным кодом. PHP создавался специально для ведения Web-разработок и может использоваться непосредственно в HTML-коде. Синтаксис языка берет начало из C, Java и Perl и является легким для изучения. Преимущественным назначением PHP является предоставление web-разработчикам возможности быстрого создания динамически генерируемых web-страниц, однако, область применения PHP не ограничивается только этим. PHP является встраиваемым языком, а это значит, что вставлять скрипты, написанные на этом языке, можно в любом месте HTML страницы. является серверным языком и потому вся обработка скриптов на этом языке производится на стороне сервера. В момент запроса браузера пользователя на скачивание страницы, сервер (если он имеет поддержку PHP) получает команду на обработку PHP сценариев (команду он получает основываясь на расширении самой страницы (.php). После обработки сервер отдает на выходе заново построенную HTML страницу без каких-либо намеков на код PHP.

Говоря проще, пользователь никогда не узнает, какой именно PHP код был использован на странице и был ли он использован вообще.

Программа на любом языке програмирования представляет упорядоченный набор инструкций, выполняющийся по определенным алгоритмам (линейно, циклически и т.д.). И PHP с этой точки зрения не является исключением.

Для отделения одной команды от другой необходимо использовать специальные символы - разделители. В PHP эту роль выполняет символ ";". Символ разделения должен находиться в конце каждой инструкции за рядом некоторых исключений, например в конце программы перед символом ?> не обязательно ставить ";"

В любом языке программирования поддерживается возможность оставлять комментарии (HTML, CSS, JavaScript, C++ и т.д.). Как и в других языках, в PHP имеется поддержка как однострочных, так и многострочных комментариев. Для создания однострочного комментария используются символы //,а для создания многострочного комментария используется контейнер /*...*/.

Для своей работы PHP может оперировать достаточно большим количеством типов данных.

Рисунок 2.2 - Типы данных, используемые в PHP

Тип Array в PHP представляет собой упорядоченную карту данных - тип, который преобразует значения в ключи. Этот тип оптимизирован одновременно в нескольких направлениях, поэтому вы можете использовать его как обычный массив, как список (вектор), как хеш-таблицу (являющуюся реализацией карты), как стэк данных, как очередь и т.д. Для задания array в php можно использовать функцию array() или непосредственно задать значения элементам массива.

Любая программа, написанная на языке PHP, в общем виде представляет из себя набор конструкций. В роли конструкции могут выступать любые элементы, используемые в PHP, такие как операторы, функции, циклы и т.д. Очень часто конструкции группируются в группы конструкций, которые объединяются между собой и заключаются в фигурные скобки {...}.

Рисунок 2.3 - Основные конструкции, используемые в PHP

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

Оператор else можно считать логическим продолжением и дополнением к уже изученному нами оператору if. Else позволяет инициировать более сложное ветвление программы, установив определенный набор операторов на тот случай, если условие, проверяемое оператором if окажется ложью. Также внутри оператора else можно поместить if с еще одним условием и так далее, практически до бесконечности.

Структуру оператора if, расширенного при помощи else можно представить примерно следующим образом: if (условие) набор_комманд_1 else набор_комманд_2.является простым циклом PHP. В общем виде структура while выглядит следующим образом: while (выражение) { блок_инструкций }.

В самом начале работы цикла выражение приводится к логическому типу и проверяется его истинность, если возвращается ответ TRUE, то выполняется блок_инструкций. После выполнения всех инструкций условие проверяется вновь и если ИСТИНА возвращается снова, то еще раз выполняется блок_инструкций и так до тех пор, пока условие будет выполняться.позволяет обрабатывать данные, которые пользователь ввел в поля формы. После активации кнопки submit данные отправляются на страницу - обработчик, указанную в поле action элемента <form>. На странице - обработчике располагается PHP скрипт, который выполняет определенные операции над полученными данными, например, формирует и отсылает письмо по указанным пользователем реквизитам.

Данные из формы передаются на сервер как последовательность пар имя/значение. Это значит, что имя каждого элемента формы (появляющееся в атрибуте NAME тега) связывается со значением этого элемента (введенным или выбранным пользователем). Формат имя/значение, используемый для передачи, имеет вид имя=значение.

Все данные, передаваемые из формы в программу-обработчик располагаются в следующих суперглобальных массивах: $_GET, $_POST, и $_REQUEST.

$_GET[] - содержит все значения, передаваемые методом GET.

$_POST[] -содержит все значения, передаваемые методом POST.

$_REQUEST[] -содержит все значения, передаваемые методами POST и GET.

Использование суперглобального массива $_Request очень удобно, особенно когда не известно, каким методом были переданы данные. Благодаря циклу foreach можно перебрать значения массива $_Request.

Мы выводим на экран все значения массива $_Request. Сделано это может быть для проверки правильности ввода данных пользователем. То есть пользователь вводит данные в форму, нажимает отправить, но вместо обработки данных у него на экране высвечивается сообщение с введенными им данными и надписью подтвердить или отказаться. Данная идея применена на многих сайтах, да и вообще во многих программах.является мощным инструментом обработки форм, позволяя производить самые разнообразные манипуляции над пользовательскими данными, такие, как сохранение данных о пользователе в базе данных для последующей авторизации, отправке сообщения на почту пользователя и многое другое.

При работе с формами часто бывает необходимо выполнять проверку введенных пользователем данных. Для этих целей PHP имеет ряд функций:

is_string() - позволяет проверить, является ли переменная строкой.

is_int() - позволяет определить, является ли переменная целым числом.

is_numeric() - позволяет определить, является ли переменная числом.

is_numeric() - позволяет определить, является ли переменная числом с плавающей точкой.

strlen(string) - позволяет определить длину строки.

strtolower() -преобразует все символы строки в нижний регистр.

strtoupper(string) -преобразует все символы строки в верхний регистр.

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

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

isset() - позволяет определить существует ли переменная, это особенно помогает при работе с GET и POST переменными.

printf() - позволяет выводить на экран информацию, её работа похожа на работу оператора echo, и отличается лишь тем, что вместо переменных ставятся маркеры, а переменные записываются после двойных кавычек и запятой в том порядке в котором они должны отображаться в выводимой конструкции на месте маркеров.

ceil() - позволяет округлить число в большую сторону.

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

is_numeric() - функция проверяет состоит ли переменная из одних цифр.

empty() - функция проверяет переменную на пустоту.

stripslashes() - функция удаляет из текста все бек слеши.

htmlspecialchars() - функция экранирует все HTML теги делая их не действительными при выводе в браузере.

date() - функция возвращает текущий год, месяц, число.

header() - функция позволяющая перенаправлять пользователя на другую страницу.

mysql_query() - функция в теле которой пишется запрос к MySQL базе данных.

mysql_fetch_array() - эта функция заносит результат выполнения SQL запроса функции mysql_query(), в ассоциативный массив.

mysql_fetch_row() - функция позволяющая определить количество элементов в БД соответствующих условию в SQL запросе функции mysql_query().

mysql_connect() - функция осуществляющая соединение с БД.

mysql_select_db() - позволяет выбрать базу данных если одновременно их открыто больше одной.

mysql_close() - функция закрывающая соединение с БД.

rand() - функция генерирует случайное число из диапазона указанного в скобках.

strlen() - функция выводит количество символов в переменной.

.3 MySQL база данных

База данных представляет собой структурированную совокупность данных. Эти данные могут быть любыми - от простого списка предстоящих покупок до перечня экспонатов картинной галереи или огромного количества информации в корпоративной сети. Для записи, выборки и обработки данных, хранящихся в компьютерной базе данных, необходима система управления базой данных, каковой и является ПО MySQL. Поскольку компьютеры замечательно справляются с обработкой больших объемов данных, управление базами данных играет центральную роль в вычислениях. Реализовано такое управление может быть по-разному - как в виде отдельных утилит, так и в виде кода, входящего в состав других приложений.- это система управления реляционными базами данных. В реляционной базе данных данные хранятся не все скопом, а в отдельных таблицах, благодаря чему достигается выигрыш в скорости и гибкости. Таблицы связываются между собой при помощи отношений, благодаря чему обеспечивается возможность объединять при выполнении запроса данные из нескольких таблиц. SQL как часть системы MySQL можно охарактеризовать как язык структурированных запросов плюс наиболее распространенный стандартный язык, используемый для доступа к базам данных.- это ПО с открытым кодом. Применять его и модифицировать может любой желающий. Такое ПО можно получать по Internet и использовать бесплатно. При этом каждый пользователь может изучить исходный код и изменить его в соответствии со своими потребностями.

Почему веб-программисты отдают предпочтение СУБД MySQL? MySQL является очень быстрым, надежным и легким в использовании. Если вам требуются именно эти качества, попробуйте поработать с данным сервером. MySQL обладает также рядом удобных возможностей, разработанных в тесном контакте с пользователями. Первоначально сервер MySQL разрабатывался для управления большими базами данных с целью обеспечить более высокую скорость работы по сравнению с существующими на тот момент аналогами. И вот уже в течение нескольких лет данный сервер успешно используется в условиях промышленной эксплуатации с высокими требованиями. Несмотря на то что MySQL постоянно совершенствуется, он уже сегодня обеспечивает широкий спектр полезных функций. Благодаря своей доступности, скорости и безопасности MySQL очень хорошо подходит для доступа к базам данных по Internet.является системой клиент-сервер, которая содержит многопоточный SQL-сервер, обеспечивающий поддержку различных вычислительных машин баз данных, а также несколько различных клиентских программ и библиотек, средства администрирования и широкий спектр программных интерфейсов (API).

Сервер MySQL постоянно работает на компьютере. Клиентские программы (например, скрипты PHP) посылают серверу MySQL SQL-запросы через механизм сокетов (то есть при помощи сетевых средств), сервер их обрабатывает и запоминает результат. То есть скрипт (клиент) указывает, какую информацию он хочет получить от сервера баз данных. Затем сервер баз данных посылает ответ (результат) клиенту (скрипту).

Почему всегда передается не весь результат? Очень просто: дело в том, что размер результирующего набора данных может быть слишком большим, и на его передачу по сети уйдет чересчур много времени. Да и редко когда бывает нужно получать сразу весь вывод запроса (то есть все записи, удовлетворяющие выражению запроса). Например, нам может потребоваться лишь подсчитать, сколько записей удовлетворяет тому или иному условию, или же выбрать из данных только первые 10 записей. Механизм использования сокетов подразумевает технологию клиент-сервер, а это означает, что в системе должна быть запущена специальная программа - MySQL-сервер, которая принимает и обрабатывает запросы от программ. Так как вся работа происходит в действительности на одной машине, накладные расходы по работе с сетевыми средствами незначительны (установка и поддержание соединения с MySQL-сервером обходится довольно дешево).труктура MySQL трехуровневая: базы данных - таблицы - записи. Базы данных и таблицы MySQL физически представляются файлами с расширениями frm, MYD, MYI. Логически - таблица представляет собой совокупность записей. А записи - это совокупность полей разного типа. Имя базы данных MySQL уникально в пределах системы, а таблицы - в пределах базы данных, поля - в пределах таблицы. Один сервер MySQL может поддерживать сразу несколько баз данных, доступ к которым может разграничиваться логином и паролем. Зная эти логин и пароль, можно работать с конкретной базой данных. Например, можно создать или удалить в ней таблицу, добавить записи и т. д. Обычно имя-идентификатор и пароль назначаются хостинг провайдерами, которые и обеспечивают поддержку MySQL для своих пользователей.

В реляционной базе данные хранятся в отдельных таблицах, благодаря чему достигается выигрыш в скорости и гибкости. Таблицы связываются между собой при помощи отношений, благодаря чему обеспечивается возможность объединять при выполнении запроса данные из нескольких таблиц. SQL как часть системы MySQL можно охарактеризовать как язык структурированных запросов плюс наиболее распространенный стандартный язык, используемый для доступа к базам данных.

Система безопасности MySQL основана на привилегиях и паролях с возможностью верификации с удаленного компьютера, за счет чего обеспечивается гибкость и безопасность. Пароли при передаче по сети при соединении с сервером шифруются. Клиенты могут соединяться с MySQL, используя сокеты TCP/IP, сокеты Unix или именованные каналы (named pipes, под NT)

Начиная с MySQL версии 3.23, где используется новый тип таблиц, максимальный размер таблицы доведен до 8 миллионов терабайт (263 bytes). Однако следует заметить, что операционные системы имеют свои собственные ограничения по размерам файлов.

Как сказано выше размер таблицы в базе данных MySQL обычно лимитируется операционной системой. По умолчанию MySQL-таблицы имеют максимальный размер около 4 Гб. Для любой таблицы можно проверить/определить ее максимальный размер с помощью команд SHOW TABLE STATUS или myisamchk -dv table_name. Если большая таблица предназначена только для чтения, можно воспользоваться myisampack, чтобы слить несколько таблиц в одну и сжать ее. Обычно myisampack ужимает таблицу по крайней мере на 50%, поэтому в результате можно получить очень большие таблицы.

2.4 Каскадная таблица стилей CSS

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

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

Кроме того, CSS позволяет работать со шрифтовым оформлением страниц на гораздо более высоком уровне, чем стандартный HTML, избегая излишнего утяжеления страниц графикой.

2.5 Язык гипертекстовой разметки документов HTML

Создание Web - страниц осуществляется с помощью языка разметки гипертекста (Hyper Text Markup Language - HTML).

Язык HTML описывает отображение форматирования шрифтов и абзацев, табличное представление, обработку форм, гипертекстовые ссылки на другие документы, поведение веб-страницы в программе-обозревателе при перемещении над ней указателя мыши.

Основу инструментария языка HTML составляют теги - инструкции HTML, их в языке около сотни. Они присутствуют внутри гипертекстового документа и позволяют до тонкостей сформировать всю структуру и стиль его оформления. При просмотре такого документа с помощью браузера, например, эти теги невидимы. Да и при создании web-страницы с помощью специализированных программных средств, а такие средства присутствуют практически во всех офисных приложениях (в Word, Excel, Access, Power Point, Outlook и т. д.), теги пользователю не видны - они вводятся автоматически.

Внутри web-страницы теги присутствуют и от обычного текста они отличаются тем, что заключены в угловые скобки. Большинство тегов используются парами: открывающий тег (например, <TITLE>) и закрывающий тег, (</TITLE>); закрывающий тег начинается со слэша - символа «/». Существуют самые разные теги от простых (для структурного, оформления и выравнивания текста, формирования цвета, размера, начертания шрифта и т. д.) до специальных (для включения в документ графических и мультимедийных объектов. Сложные теги имеют кроме имени еще и атрибуты, детализирующие способ их использования.

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

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

3. Реализация

.1 Логическая структура Web-приложения

.1.1 Структура БД

При проектировании БД необходимо решить вопрос о наиболее эффективной структуре данных.

Для хранения информации необходимой для работы сайта была создана база данных «diplom», в состав которой входят 6 таблицы: «captcha», «cat», «comments», «post», «post_img», «user»,.

Первая таблица «captcha», структура которой представлена в таблице 3.1, состоит из двух столбцов. Первый столбец id, генерируется автоматически при добавление записи в таблицу. и одновременно является именем картинки, которая будет использоваться для защиты сайта от автоматического добавления комментариев и регистрации роботов. Второй столбец kod, соответствует значению, которое изображено на картинке.

Таблица 3.1 - Структура таблицы captcha

АтрибутКлючТип данныхidпервичный ключINTkod-VARCHAR

Вторая таблица «cat», структура которой представлена в таблице 3.2, предназначена для хранения категорий новостей, в ней хранятся их названия и описания. Эта таблица состоит из 3 столбцов.

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

Второй столбец «name_cat» хранит в себе название категории.

Третий столбец «text_cat» может хранить в себе краткое описание категории.

Таблица 3.2 - Структура таблицы cat

АтрибутКлючТип данныхidпервичный ключINTname_cat-VARCHARtext_cat-TEXT

Третья таблица «comments», структура которой представлена в таблице 3.3, предназначена для хранения комментариев, которые пользователя оставляют к новостям, и состоит из 6 столбцов.

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

Второй столбец «post», хранит в себе уникальный идентификатор новости, к которой он относится, и нужен для создания связи между таблицами.

Третий столбец «author» предназначен для хранения имени автора комментария, он может хранить в себе как уникальный идентификатор пользователя добавившего комментарий (если это зарегистрированный пользователь) и быть предназначенным для связи между таблицами, так и текстовое имя пользователя, если пользователь добавивший комментарий не зарегистрирован.

Четвертый столбец «text» хранит в себе само содержание новости, текст добавленный пользователем через форму.

Пятый столбец «data» хранит в себе год, месяц, дату и время добавления комментария.

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

Таблица 3.3 - Структура таблицы comments

АтрибутКлючТип данныхidпервичный ключINTpostвнешний ключINTauthor-VARCHARtext-TEXTdata-DATETIMEemail-VARCHAR

Четвертая таблица «post» , структура которой представлена в таблице 3.4, является основной и хранит в себе основной контент сайта, новости. Она состоит из 8 столбцов.

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

Второй столбец «cat» хранит в себе уникальный идентификатор категории к которой относится данная новость, и предназначен для связи с таблицей «cat».

Третий столбец «description» хранит в себе краткое описание новости, которой выводится при отображении списка новостей на главной и странице категорий.

Четвертый столбец «text» хранит в себе всю новость, его содержание используется при выводе полной новости на странице с новостью.

Пятый столбец «view» хранит в себе количество просмотров новости, его значение увеличивается на единицу при посещении новости.

Шестой столбец «author» хранит в себе имя автора новости.

Седьмой столбец «date» хранит в себе год, месяц и дату, добавления новости, на момент публикации этой новости.

Последний восьмой столбец «title» хранит в себе заголовок новости, и одновременно с этим подставляется между тегами <titlte> при выводе новости пользователю.

Таблица 3.4 - Структура таблицы post

АтрибутКлючТип данныхidпервичный ключINTcatвнешний ключINTdescription-VARCHARtext-TEXTview-INTauthor-VARCHARdate-DATEtitle-VARCHAR

Пятая таблица «post_img», структура которой представлена в таблице 3.5, предназначена для хранения адресов картинок используемых в новостях. Она состоит из трех столбцов.

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

Второй столбец «post» представляет собой уникальный идентификатор новости к которой относится картинка, и предназначен для связи.

В последнем третьем столбце «adres_img» хранится адрес картинки относительно корневого каталога сайта.

Таблица 3.5 - Структура таблицы post_img

АтрибутКлючТип данныхidпервичный ключINTpostвнешний ключINTadres_img-VARCHAR

Шестая таблица «user», структура которой представлена в таблице 3.6, хранит в себе учетные данные зарегистрированных пользователей и состоит из 9 столбцов.

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

Второй столбец «name» хранит в себе имя пользователя указанное при регистрации.

В третьем столбце «login» хранится логин пользователя указанный при регистрации, который нужен для авторизации на сайте.

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

В пятом столбце «email» хранится email пользователя указанный при регистрации.

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

В седьмом столбце «otvet» хранится ответ на секретный вопрос, указанный пользователей при регистрации, и нужный для восстановления пароля.

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

Девятый столбец «acces» может принимать значение 0 либо 1, от его значения зависят права пользователя на доступ в панель администратора сайта.

Таблица 3.6 - Структура таблицы user

АтрибутКлючТип данныхidпервичный ключINTname-VARCHARlogin-VARCHARpassword-VARCHARemail-VARCHARvopros-VARCHARotvet-VARCHARcookie-INTacces-INTДля экономии места в базе данных и ускорения её работы между таблицами в БД были созданы связи (Рисунок 3.1).

сайт разработка сервер затраты

Рисунок 3.1 - Связи между таблицами

3.1.2 Структура пользовательской части сайта

Для непосредственного вывода информации в браузер используются 6 файлов. Для идентификации информации, которую нужно отобразить на странице, то есть для связи между этими файлами, используются GET и POS переменные. переменные используются только для передачи переменных из форм, это обусловлено тем, что данные из этих форм передаются без их отображения в адресной строке, что особенно актуально для передачи учетных данных таких как пароль и логин, POST метод в этом плане более безопасен чем GET. Ниже приведён список форм, в которых используется этот метод передачи данных:

форма авторизации;

форма регистрации;

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

форма редактирования учетных данных;

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

идентификаторов категорий;

идентификаторов новостей;

идентификатора для выхода с сайта;

идентификатора для редактирования учетных данных;

передачи поискового запроса из формы;

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

Рисунок 3.2 - Логическая структура пользовательской части сайта

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

3.1.3 Структура административной части сайта

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

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

Рисунок 3.3 - Логическая структура административной части сайта

На рисунке 3.3 видно, что все страницы административной части сайта доступны в один клик, за исключением страницы add_img.php.

.2 Физическая структура Web-приложения

Сайт вместе с его административным разделом, не заполненный контентом, состоит из 27 php файлов, 2 css файлов, 30 изображений, 6 папок, 4 из которых первого уровня, и две папки 2 уровня. Кроме этого используется 1 база данных, включающая в себя 6 таблиц.

Все файлы и папки, относящиеся к административной части сайта находятся в папке admin. Административная часть сайта состоит из, 1 папки blocks, 1 изображения header.jpg, одного css файла style.css и 14 php файлов, это файлы:

- index.php;

edit_user.php;

edit_news.php;

edit_comments.php;

edir_cat.php;

add_user.php;

add_news.php;

add_img.php;

add_cat.php;

bd.php;

cookie.php;

footer.php;

header.php;

- lefttd.php;

Файлы и папки, относящиеся к пользовательской части сайта находятся в корневом каталоге сайта. Пользовательская часть состоит из 4 папок, это папки:

blocks;

diz;

img;

- captcha;

php файлов:

index.php;

login.php;

profile.php;

recover_password.php;

registration.php;

search.php;

view_cat.php;

view_post.php;

bd.php;

cookie.php;

footer.php;

header.php;

- lefttd.php;

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

Ну и конечно же 1 css файл main.css, для формирования дизайна сайта.

3.3 Описание структуры страниц пользовательской части сайта

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

Первый блок это так называемая шапка сайта, она расположена на самой вершине сайта, на нем находится изображение размером 256px × 90px и текст который имеет скорее большее значение, для будущего продвижения сайта, так как статический текст обрамлённый тегом <h1>, расположенных на всех страницах сайта может значительно повлиять на позиции сайта в поисковой системе. Этот блок одинаковый для всех страниц сайта и подключается на все страницы с помощью функции include, из файла header.php расположенного в папке blocks. Подключив эту часть сайта из файла, мы получаем возможность изменения шапки сайта, изменив её только в файле header.php, после чего изменения коснуться всех страниц сайта, это очень удобно.

Второй блок, это блок навигации (Рисунок 3.4) он расположен ниже шапки сайта по левой стороне. Он, как и оставшиеся 5 блоков, обрамлён рамкой, которая представляет собой повторяющееся изображение с небольшим наложением. В нем выводятся все категории сайта, и ссылка на главную страницу. Этот блок статичный, то есть он одинаковый на всех страницах сайта. Он подключается из файла lefttd.php на все страницы сайта.

Рисунок 3.4 - Навигационное меню

Третий блок находится нижи блока навигации, это блок авторизации (Рисунок 3.5) Он состоит из такой же рамки как и предыдущий блок. Содержимое этого блока может быть разное, и зависит от того авторизован ли пользователь.

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

Рисунок 3.5 - Блок авторизации для не авторизованного пользователя

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

Рисунок 3.6 - Блок авторизации для авторизованного пользователя

Четвертый блок, блок поиска (Рисунок 3.7), он обрамлён рамкой, как и два предыдущих. Он состоит из формы, для ввода поискового запроса, и кнопки активирующей передачу переменной из этой формы. Его содержание не изменяется на всех страницах сайта. Он подключается из файла lefttd.php.

Рисунок 3.7 - Блок поиска

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

При обращении на главною страницу index.php, в этом блоке мы видим строку с ссылкой для сортировки выводимых ниже новостей , по дате, автору и просмотрам.

Ниже выводятся краткие описания пяти последних новостей сайта, каждая из который обрамлена рамкой, в верхней части этой рамки, на картинке вторым слоем, отображен заголовок новости который одновременно является и ссылкой на полную версию новости. Ниже выводится дата добавления этой новости, затем её краткое описание. И последним элементом при выводе новости является нижняя полоса отделенная сверху и снизу тонкими черными линиями и закрашенная цветом #E0EEE0. В ней выводится название категории, к которой относится новость, которое одновременно является и ссылкой на эту категорию. Далее отображается автор новости, количество просмотров, количество комментариев и ссылка на полную версию новости с анкором «Читать далее». Пример одной из выводимых новостей представлен на рисунке 3.8.

Рисунок 3.8 - Краткое описание новости

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

Дизайн пятого блока, на страницах вывода результатов поиска search.php, и страницах вывода новостей категории view_cat.php, идентичный дизайну главной страницы. Их отличие лишь в том, что в выводе результатов поиска, отображаются новости соответствующий поисковому запросу, а на странице вывода новостей категории, выводятся только новости, относящиеся к этой категории.

Дизайн пятого блока на странице авторизации login.php, (Рисунок 3.9)представляет собой два текстовых поля, кнопку, и две ссылки, первая ссылка на страницу регистрации вторая на страницу восстановления пароля. И всё это обрамлено рамкой. То есть в принципе всё тоже, что в блоке авторизации для не авторизованных пользователей, отличие лиши в размещении этого блока и его ширине.

Рисунок 3.9 - Дизайн пятого блока на странице авторизации

Дизайн пятого блока на страницах профиля (profile.php), восстановления пароля (recover_password.php) и регистрации (registration.php) идентичен дизайну этого блока на странице авторизации пользователя, отличие лишь в содержании.

3.4 Описание структуры страниц административной части сайта

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

Дизайн состоит из таблицы шириной 1000px с рамкой черного цвета выровненной по центру. Таблица состоит из двух столбцов и 3 строк.

Первые два столбца первой ячейки объединены, и в образованную ячейку помещена картинка, которая является шапкой сайта (Рисунок 3.10). Содержание этой ячейки не меняется на всех страницах административного раздела, поэтому она подключается из отдельного файла header.php.

Рисунок 3.10 - Шапка административной части сайта

Первая ячейка второй строки таблицы, имеет фиксированную ширину 200px, и имеет зеленый фоновый цвет. В этой ячейке размещено административное меню. Эта часть сайта (Рисунок 3.11) не изменяется на всех страницах сайта, поэтому для удобства она подключается из файла lefttd.php.

Рисунок 3.11 - Административной меню

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

Рисунок 3.12 - Дизайн пятого блока на странице авторизации

В самой последней строке две ячейки таблицы объединены, и являются так называемым подвалом сайта. На данный момент эта часть административного раздела никак не используется, при необходимости туда можно добавить текст или что то другое, открыв файл footer.php который собственно и подключается для вывода содержимого подвала сайта.

3.5 Описание ограничения доступа к данным

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

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

Срок существования этого файла устанавливается 48 часов и при каждом входе пользователя на сайт в течении 48 часов обновляется до 48 часов, это значит что если пользователь не будет посещать сайт более 48 часов то ему нужно будет авторизоваться заново.

Идентификация пользователя происходит в файле cookie.php, который подключен ко всем страницам сайта через функцию include.

Этот файл считывает переменную из cookie файла на компьютере пользователя, и сравнивает её с переменными, размещенными в столбце cookie,таблицы user, Если есть совпадение, тогда пользователь становится авторизованным.

Для доступа в административный раздел, пользователь должен иметь на это права. Эти права может дать ему администратор сайта, путем редактирования этого пользователя в административной части сайта.

Для доступа в административный раздел, требуется не только совпадение cookie, но и значение равное единице в столбце acces таблицы user.

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

4. Тестирование

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

Окончательное тестирование производилось путем, испытания всех модулей и функций сайта, протестированы на корректность были:

добавление комментариев от зарегистрированного пользователя;

добавление комментариев от не зарегистрированного пользователя;

удаление комментариев:

редактирование комментариев;

добавление новостей;

редактирование новостей;

удаление новостей;

добавление категорий;

удаление категорий;

редактирование категорий;

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

добавление пользователя из административной части сайта;

редактирование регистрационных данных пользователя в пользовательской части сайта;

редактирование регистрационных данных в административной части сайта;

удаление пользователя в административной части сайта;

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

поиск по сайту;

Перечисленные выше модули были протестированы на самых популярных браузерах СНГ, это браузеры:

- Internet Explorer;

Mozilla Firefox;

Google Chrome;

- Opera;

Safari;

Кроме всего этого были протестированы все гиперссылки на сайте, путем перехода по ним в, случайной последовательности.

После окончательного тестирования ошибок не обнаружено.

5. Применение

.1 Назначение и область применения

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

5.2 Программно-аппаратное обеспечение сервера и клиента

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

Ниже приведены минимальные требования к хостингу при условии что на нем будет размещено примерно 150-250 новостей, содержащих в себе 1-2 картинки, и количество просмотров страниц в сутки не будет превышать 5000.

Хостинг должен соответствовать следующим минимальным требованиям:

предоставлять не менее 100Мб, дискового пространства;

поддерживать язык программирования PHP4;

предоставлять одну MySQL базу данных;

выделять не менее 32 Мб оперативной памяти;

CPU не менее 100MHz;

выделять не менее 60 Gb трафика.

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

И последнее. Хостинг должен быстро и оперативно реагировать на любые обращения, в решении проблемных вопросов используя e-meil, телефон, ISQ, Skype, WEB форму и т. д.

5.3 Руководство пользователя для пользовательской части сайта

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

Рисунок 5.1 - Главная страница сайта

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

На всех страницах сайта пользователь может:

пройти авторизации, путем ввода логина и пароля и последующим нажатием на кнопку «Вход»:

осуществить поиск по сайту путём ввода поискового запроса и нажатием на кнопку «Искать»;

перейти на страницу восстановления пароля, если пользователь не авторизован;

перейти на страницу регистрации, если пользователь не авторизован;

перейти на страницу профиля, если пользователь авторизован;

выйти с сайта путем нажатия на ссылку выход;

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

Если пользователь не авторизован то появится форма, изображенная на рисунке 5.2. В этом случае для добавления комментария нужно обязательно заполнить 3 поля: ваше имя, текст комментария, код с картинки. Заполнять поле ваш email не обязательно но желательно. После заполнения обязательных полей и нажатия на кнопку «Комментировать», комментарий будет добавлен.

Рисунок 5.2 - Форма добавления комментариев для не авторизованных пользователей

Если пользователь перейдёт на полную новость авторизованным то форма для добавления комментариев будет аналогична изображенной на рисунке 5.3.

Рисунок 5.3 - Форма добавления комментариев для авторизованных пользователей

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

5.4 Руководство пользователя для административной части сайта

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

В навигационном меню есть

6. ЭКОНОМИЧЕСКИЙ РАЗДЕЛ

.1 Расчет трудоемкости разработки программного продукта

На данном этапе производится определение и последующий расчет затрат времени необходимого для создания программного продукта. Работа по созданию программного продукта включает в себя несколько этапов:

постановка проблемы;

описание предметной области;

программирование и реализация программного продукта;

отладка приложения;

документирование;

6.2 Оценка времени продолжительности работ

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

Устанавливается оптимистическая оценка времени выполнения работы. Минимальное время (указано в колонке «Т min» табл.8.2), которое будет при самом благоприятном стечении обстоятельств.

Устанавливается также максимальное (указано в колонке «Т max» табл.6.1) время работы, которое имеет место при самом неблагоприятном стечении обстоятельств. Это время характеризуется большим, чем обычно числом неудач и т.п.

Таблица 6.1 - Расчет трудоемкости проектирования программного продукта

Наименование работыВероятностные оценки, дниTminTmaxTожПостановка проблемы132Описание предметной области354Проектирование информационно-новостного сайта152520Отладка информационно-новостного сайта375Оформление документов486Общая продолжительность работы составляет:264837

ож =

гдеТож - ожидаемое время продолжительности работ

Тmin - оценка при наиболее благоприятных условиях- оценка при наиболее неблагоприятных условиях

Ожидаемое время выполнения работ по разработке ПП «информационно-новостной сайт» = 37 дней.

6.3 Расчет себестоимости и цены разработки программного продукта

Себестоимость разработки системы - это, как правило, совокупность затрат на разработку программного продукта. Затраты на разработку программы подразделяются на следующие статьи расходов: материальные затраты, основная заработная плата, ФСЗН, накладные расходы.

6.4 Методика расчета статей калькуляции

.4.1 Расчет материальных затрат

В статье «Материальные затраты» предусмотрены затраты на материалы, применяемые при использовании данного программного продукта на предприятии. Расчет стоимости материальных затрат произведен в таблице 6.2.

Таблица 6.2 - Расчет стоимости материальных затрат

Наименование материалаКоличество комплектов, шт.Цена одного комплекта, руб.Транспортные затраты, руб.Сумма затрат, руб.Компакт-диск14 50004 500Бумага132 800032 800Ручка13 20003 200Всего---40 500

6.4.2 Расчет заработной платы программиста

Расчет ЗП программиста производится в соответствии с трудоемкостью разработки программного продукта.

Данные для расчета:

ставка 1 разряда -240 000 руб.

разряд 10

тарифный коэффициент 2.43

с 10-го до 11-го разряда 1.628

Часовая тарифная ставка (Сч) определяется:

Сч =

где Фрв - плановый фонд рабочего времени за месяц, из расчета 22 рабочих дня по 8 часов.

Сч = = 5394,6 рубля в час

Основная заработная плата программиста за разработку программы составит:

ЗПосн = Сч ? Тож (6.3)

ЗПосн = 5394,6 * (37*8) = 5394,6 *259 = 1596801,6 (руб.)

Дополнительная заработная плата:

ЗПдоп = (6.4)

ЗПдоп = = 239520,24 (руб.)

Итого затраты на оплату труда:

ЗПобщ = ЗПосн + ЗПдоп(6.5)

ЗПобщ = 1596801,6 + 239520,24 = 1836321,84 (руб.)

6.4.3 Расчет единого социального налога

При ставке 35% от общей суммы заработной платы, ФСЗН высчитывается по формуле:

ФСЗН = = 642712,644 (руб.)

6.4.4 Расчет накладных расходов

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

Таблица 6.3 - Затраты на электроэнергию

Вид оборудованияМощность, кВтСтоимость, 1 кВт/час (Без НДС)Время работы оборудования, Тож часСумма затрат, руб.Ноутбук0,05630296186480Итого---186480

В таблице 6.3 выполнены расчеты по затрате ресурсов на электроэнергию по формуле:

Сумма = (М ? С) ? Т, (6.7)

где М - Мощность, кВт

С - Стоимость , 1 кВт/час

Т - Время работы оборудования, Тож час

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

Таблица 6.4 - Амортизационные отчисления

Вид оборудованияПервоначальная стоимость, руб.Срок полезного использованияНорма амортизации %Сумма амортизационных отчислений, руб.Ноутбук4300000362,7116100Итого-1,3-150930

Сумма амортизационных отчислений за период разработки, определяются по следующим формулам:

Амес = = 116100

где Сп - первоначальная стоимость оборудования, руб.;

На - месячная норма амортизации, %;

Амортизационные отчисления за период разработки программного продукта:

(116100/22)*37 = 195259(руб.)

Прочие накладные расходы - 20% от основной заработной платы:

Сумма накладных расходов = затраты на электроэнергию + амортизационные отчисления + прочие накладные расходы.

Сумма накладных расходов = 8158,5 + 195259+ 279440,28 = 482857,78 (руб.)

6.4.5 Расчет калькуляции затрат на разработку программного продукта

Расчет калькуляции затрат наглядно представлен в таблице «Калькуляция затрат на разработку программного продукта».

Таблица 6.5 - Калькуляция затрат на разработку программного продукта

Статья затратЕдиницы измеренияСумма затрат, руб.Материальные затратыруб. 40500Отчисления на социальные нужды (ФСЗН)руб.562373,5635Накладные расходы, в т.ч. амортизация dobavit seroku zarabotnoj руб.482857,78Итого:-1085731,3435

6.5 Определение цены программного продукта

Процент рентабельности (условно) - 20% ,

Прибыль рассчитывается по формуле:

П = = 217146 (руб.)

Цена программного продукта равна сумме полной себестоимости и прибыли:

Ц = Сполн + П(9.5.10)

Ц = 1085731,3435+ 217146 = 1302877 (руб.)

Цена программного продукта с НДС:

НДС =

НДС =

Цена = 1302877+ 260575,4 = 1563452,4(руб.)

Стоимость программного продукта составляет 1563452 рублей.

7. ОХРАНА ТРУДА

.1 Описание рабочего места программиста

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

При правильной организации рабочего места производительность труда рабочего возрастает до 20 процентов.

Согласно ГОСТ 12.2.032-78 конструкция рабочего места и взаимное расположение всех его элементов должно соответствовать антропометрическим, физическим и психологическим требованиям. Большое значение имеет также характер работы. В частности, при организации рабочего места программиста должны быть соблюдены следующие основные условия:

оптимальное размещение оборудования, входящего в состав рабочего места;

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

необходимо естественное и искусственное освещение для выполнения поставленных задач;

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

Главными элементами рабочего места программиста являются письменный стол и кресло. Основным рабочим положением является положение сидя. Рабочее место для выполнения работ в положении сидя организуется в соответствии с ГОСТ 12.2.032-78.

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

Моторное поле - пространство рабочего места, в котором могут

осуществляться двигательные действия человека.

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

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

Рисунок 7.1 - Зоны досягаемости рук в горизонтальной плоскости

а-зона максимальной досягаемости (в центре размещается дисплей, справа принтер);

б-зона досягаемости пальцев при вытянутой руке (размещается системный блок);

в-зона легкой досягаемости ладони (литература и документация, необходимая при работе);

г-оптимальное пространство для грубой ручной работы (размещается клавиатура);

д-оптимальное пространство для тонкой ручной работы (размещается клавиатура).

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

Объем производственного помещения на одного человека следует предусматривать не менее 19,5 куб.м и площадью не менее 6 кв.м.

Рабочее место для выполнения работ в положении сидя должно соответствовать требованиям ГОСТ 12.2.032-78:

) рабочий стол должен регулироваться по высоте в пределах 680-760мм, при отсутствии такой возможности его высота должна составлять 720мм.;

) рабочий стул должен быть снабжен подъемно-поворотным устройством, обеспечивающим регуляцию высоты сидения и спинки. Высота поверхности сидения должна регулироваться в пределах 400-500мм. Ширина сидения должна составлять не менее 400мм, глубина не менее 380мм;

) на рабочем месте необходимо предусматривать подставку для ног

7.2 Требования к микроклимату

Оптимальными параметрами температуры при почти неподвижном воздухе являются 19-21 градусов Цельсия, допустимыми 18-22 градусов Цельсия, соответственно относительная влажность воздуха 62-55% и 39-31%. Воздух, поступающий в помещение, должен быть очищен от загрязнений, в том числе от пыли и микроорганизмов. Запыленность воздуха должна быть в пределах нормы. Скорость движения воздуха должна быть не более 0,1м/сдля всех климатических зон. Для повышения влажности воздуха следует использовать увлажнители.

7.3 Вентиляция

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

7.4 Требования к освещению

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

В качестве источников искусственного света рекомендуется использовать люминесцентные мощность 40 Вт или энерго-экономичные мощностью 36 Вт типа ЛБ, ЛТБ как наиболее эффективные и приемлемые с точки зрения спектрального состава.

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

7.5 Требования к защите от электромагнитных излучений

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

7.6 Требования к защите от шума и вибраций

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

Уровень шума на рабочих местах во время работы на ПЭВМ не должен превышать 50 дБА.

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

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

Объем производственного помещения на одного человека следует предусматривать не менее 19,5 куб.м и площадью не менее 6 кв.м.

Рабочее место для выполнения работ в положении сидя должно соответствовать требованиям ГОСТ 12.2.032-78

) рабочий стол должен регулироваться по высоте в пределах 680-760мм, при отсутствии такой возможности его высота должна составлять 720мм.;

) рабочий стул должен быть снабжен подъемно-поворотным устройством, обеспечивающим регуляцию высоты сидения и спинки. Высота поверхности сидения должна регулироваться в пределах 400-500мм. Ширина сидения должна составлять не менее 400мм, глубина не менее 380мм;

) на рабочем месте необходимо предусматривать подставку для ног

.7 Пожарная безопасность

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

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

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

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

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

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

В помещении библиотеки применяются светильники различного типа. Наиболее пожароопасными являются дампы накаливания, т.к. температура на поверхности колб может достигать 500°С. В пожароопасных помещениях (книгохранилища) допускается применение светильников только в закрытом исполнении; стеклянные колпаки переносных светильников должны быть закрыты металлической сеткой. Состояние электросетей и светильников должно систематически проверяться. Светильники должны периодически очищаться от пыли и загрязнений; перегоревшие лампы - заменяться.

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

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

ВВЕДЕНИЕ В настоящее время, в связи с глобальным развитием сети Интернет, в программировании все более резко выделяться отдельная его отрасль - web-прогр

Больше работ по теме: