Файл: Разработка сайта личной страницы «Кичаевой Екатерины»».pdf

Рисунок 6. Папки и файлы на локальном сервере

Второй этап подразумевает создание дизайна с помощью языков разметки html и css. Пример скриншота с кодом представлен на рисунке 7. Для последующих быстрых поисков по разметке разделим код css на три части, как на рисунке 8. Основной, текст и изображение. В основном будет содержаться код связанный с разметкой «тела» сайта и анимации элементов. В «text» связанный с оформлением текстовой части. В последнем оформление изображений.

Рисунок 7. Пример кода Html

Рисунок 8. Файлы CSS

На третьем этапе по тому же принципу делим на пять файлов с расширением php в папке sql для соединения с базами данных. Один файл с подключением. Второй с кодом передачи на почту. Третий для загрузки файлов. Четвертый для передачи формы. Пятый для разделения по правам. Файлы с названиями представлены на рисунке 9.

Рисунок 9. Файлы php

Код формы уже написан и можно приступать к подключению баз данных. Создаем 2 базы через phpmyadmin: «file» и «users», как на рисунке 10 и рисунке 11.

Рисунок 10. База данных

Рисунок 11. Таблица в базе данных

Создаем подключение и проверяем работоспособность через вывод фразы «Соединение установлено» и «База работает» на сайте. Это хорошо демонстрирует рисунок 12.

Рисунок 12. Проверка соединения с базой

Четвертый этап занесем код в еще один файл относящийся к базам данных - «regist.php», который напрямую будет отвечать за новые данные и их проверку. В самом файле будет присутствовать форма и проверка на наличие данных в базе. Представлен скриншот написания кода на рисунке 13.

Рисунок 13. Код для regist.php

Осуществление авторизации. Начнем редактирование в отдельно созданном файле – «valid.php» - лежащем в папке sql. Тут будет код отвечающий за разделение по правам.

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

3. Описание структуры базы данных и ее функции

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

- простоту и удобство работы;

- соответствующие условия доступа с учетом разграничений;

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

Из проанализированного стоит уделить время разделению части данных. Одни будут с условием передачи на почту, а остальных таблиц нам понадобится немного исходя из функционала проекта. Для начала выделим какие данные будем передавать по почте. Ими станут все, что вводится из формы «Напиши мне». А также при входе с правами пользователями форма отправки отзыва. С которыми будем разбираться ниже. Как правило, все начинается с заполнения форм на сайте. В дальнейшем по мере работы сайта базы изменяются и дополняются оперативной информацией. Информация хранится в виде записей в базе данных.

ER модель определяет состав и взаимосвязь таблиц, отражающих содержание информационной модели в терминах СУБД, и представлена на рисунке 14.

Рисунок 14. ER-модель

Таблицы проектируемого сайта создаются в СУБД – MySQL. Редактируется в таком средстве как phpmyadmin. Этот менеджер входит в комплект к локальной системе на которой и создавался весь проект.

Структура записей таблицы «Пользователи» представлена в таблице 5.

Таблица 3.Структуры записей таблицы «Пользователи»

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

Структура записей таблицы «Файл» представлена в таблице 6.

Таблица 4. Структуры записей таблицы «Файл»

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

Любые изменения в структуре таблицы будут происходить посредством работы в phpMyAdmin. Это сократит время на процедуры так как в программу уже встроен язык SQL. Некоторые примеры приведены в приложении.

4. Описание структуры клиентской части

Не один сайт не будет иметь успеха без простого и понятного интерфейса. Данный курсовой проект создан на основе минималистичного дизайна, который позволит пользователю не отвлекаться на лишнее и даст найти нужную информацию. Шаблон представлен в приложении 1. Это один из главных способов задержать пользователей на сайте для достижения главной цели. Рассмотрим подробнее какое информационное наполнение имеет главная страница. При открытии сайта пользователь должен увидеть меню навигации по сайту – рисунок 15. Кегль и оцентрованность меню позволит быстрее найти нужную информацию. Анимация при наведении дает понимание, что при нажатии на одну из ячеек меню есть действие. Так же присутствует надпись – цитата, которая даст понять к какой сфере услуг относится заказчик и его отношение к работе. На изображении имеется значок «прокрутка вниз» давая понять, что внизу имеется информация и сам сайт имеет одностраничную структуру.

Рисунок 15. Меню

Прокрутив вниз появляется информация об заказчике. Информация краткая два абзаца. Присутствует фотография. В режиме отладки размещено изображение со стока. Фотография поможет в дальнейшем расположить к себе заказчиков - Рисунок 16.

Рисунок 16. Раздел «Обо мне»

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

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

Рисунок 17. Раздел «Работы»

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

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

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

Рисунок 18. Раздел сайта «Контакты»

4.1. Описание интерфейса «Обычный пользователь».

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

4.2. Описание интерфейса «Администратор».

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

4.3. Инструкция пользователя.

Вход пользователя осуществляется через форму «Вход / Регистрация». Данную форму можно найти в меню нажав на «Контакты» либо пролистав до конца страницу. В этой форме нужно ввести логин в поле «Логин» и пароль в поле «Пароль». Если ранее не была произведена регистрация, то нажав кнопку «Регистрация», находящаяся рядом с кнопкой «Войти», будет произведен переход на страницу где в похожей форме нужно ввести будущие логин и пароль. Если пользователь случайно нажал на кнопку регистрация и у него есть аккаунт, то он может нажать «У меня уже есть аккаунт» внизу формы либо вернуться, нажав стрелку в окне браузера. Дизайн кнопок представлен на рисунке 19.

Рисунок 19. Формы кнопки отправки

Под формой регистрации в случаи успешной проверки данных появится надпись: «Данные добавлены». Дизайн представлен на рисунке 20. Если же пароль занят или меньше 4 или пароль не был введен появится предупреждающая надпись с ошибкой. Дизайн представлен на рисунке 21 и рисунке 22.

Рисунок 20. Форма регистрации

Рисунок 21. Форма регистрации

Рисунок 22. Форма регистрации

Рядом с формой входа присутствует форма отправки сообщения, представляющая собой поля с именем, почтой, телефоном, сообщением. После отправки появится сообщение об успешной отправки данных. Пример письма представлен в приложении 2. Дизайн представлен на рисунке 23 и рисунке 24.

Рисунок 23. Форма обратной связи

Рисунок 24. Результат отправки данных

После регистрации или входа и проверки данных есть появляется страница где пользователь может воспользоваться некоторыми новыми возможностями. Для обычных при переходе в меню на кнопку «Отзывы» или пролистав вниз можно добавить отзыв написав в соответствующей форме свое сообщение. Дизайн представлен на рисунке 25 и рисунке 26.

Рисунок 25. Дизайн меню

Рисунок 26. Дизайн отзыва