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

ВВЕДЕНИЕ

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

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

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

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

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

ОСНОВНАЯ ЧАСТЬ

1. Техническое задание и выбор средств реализации

Объем требуемых услуг и их последовательность:

1. Сбор требований;

2. Анализ

3. Проектирование;

4. Сбор контента;

5. Дизайн и верстка;

6. Программирование;

7. Тестирование;

9. Возможная доработка;

В начале определимся с основными требованиями, которые приведены в таблице 1.

Таблица 1. Техническое задание

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

Начнем со структуры. Сам сайт является презентацией именно отдельно взятого человека, а не компании в целом и активности на сайте будет не много, как и бизнес-процессов. Что связано с бизнес-процессами, то исследована конкретно деятельность заказчика и задачей является упрощение продвижения через Интернет посредством создания страницы. Рассмотрим рисунок 1, который показывает процесс через диаграмму IDEF0.

Рисунок 1. Диаграмма IDEF0

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

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

Рисунок 2. Структура сайта.

На главной странице будет вход/регистрация пользователей с помощью которых мы и будем в дальнейшем разграничивать права. Теперь нам нужно разобраться в чем отличие действии администратора от обычного пользователя. Пользователь будет иметь возможность: увидеть приветствие со своим логином, введенным при регистрации и кнопкой выхода и так же добавить отзыв. Разграничение прав будет происходить непосредственно через СУБД. Права администратора отличаются хоть и схожи в том, что мы можем увидеть, что зашел именно администратор. Но данный пользователь будет иметь право добавлять изображения. Данная активность также будет реализовываться непосредственно через СУБД. Существенным отличием в дизайне стоит сторониться и поэтому все активности будут надписями с анимацией как призыв к действию. Анимация будет реализовываться на уровне написания каскадной таблице стилей (CSS).

Выбор для разработки программного обеспечения (ПО) целевой страницы исходя из поставленных задач включает в себя следующие основные этапы:

1) Реализация программных компонентов бизнес логики;

2) Верстка шаблона;

3) Реализация основного функционала и интерактивности сайта;

Для реализации разметки выбраны языки:

HTML5 – стандартный язык разметки документов в сети Интернет. В основу web-страниц положен именно этот язык (или XHTML). Данный язык интерпретируется браузерами и отображается в виде документа, в удобной форме;

СSS (каскадная таблица стилей) – используется как средство оформления внешнего вида страниц сайта.

Для создания динамики выбраны:

PHP5 – скриптовый язык программирования для создания динамических веб-сайтов. С поддержкой многих хостинг-провайдеров.

MySQL5 – СУБД. Осуществляет разработку и поддержку приложении.

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

Что касаемо графики стоит использовать Adobe Photoshop CS6. Это многофункциональный редактор, используемый большинством дизайнеров по всему миру. Этот проект так же постоянно обновляется и модернизируется. Сама компания выпускает множество дополнительных проектов для упрощения и автоматизации множества процессов. Но нас интересует именно создание макета, и эта программа наилучшем образом способна помочь в данном процессе.

Что касаемо создания динамики и работоспособности страницы обычные средства тут работать не будут и приходят на помощь локальные сервера с поддержкой языков PHP и MySQL.

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

Говоря о выборе локальных серверов, то лучшей системой является Denwer. Так как она портативна и удобна в работе. Меню понятно и все на русском.

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

Так же для работы с СУБД нам пригодится phpMyAdmin, который встроен в Denwer.

2. Описание модулей серверной части программы и их взаимодействие

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

На основе того, построено дерево программных модулей, как представлено на рисунке 3.

Рисунок 3. Дерево программных модули системы

Описание функций модулей представлено в таблице 2.

Таблица 2. Описание функций модулей

Описание дерева вызова модулей представлено на рисунке 4.

Рисунок 4. Дерево вызовов программных модулей

Ниже рассмотрим список входной и нормативно-справочной информации.

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

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

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

Первый этап – создание файловой системы всего сайта;

Второй этап – разметка дизайна;

Третьи этап – разработка базы данных;

Четвертый этап – реализация входных данных проекта.

На первом этапе создадим папку для нашего сайта на локальном сервере. Под название “web” на рисунке 5, в ней будем хранить все файлы.

Рисунок 5. Папки в локальном сервере.

Далее внутри создаем все нужные файлы и папки, как изображено на рисунке 6. Папка для CSS, файлов, шрифтов, изображений и для подключения к базе данных. После создаем файлы в которых будем прописывать разметку. Таких файлов будет 5. Один главный файл - index. Необходимы еще 3 файла разметки: версия для администратора и пользователя, а также форма регистрации. С расширением php и 5 файл с разметкой для выдачи ошибки 404 написанный на html.