«Разработка Web-сайта с применением языков программирования»

Содержание

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

1. Основы разработки сайта. ………………………………………………..............................4

1. Требования к Web-приложениям ……...………………………………........................4
2. Основные правила и этапы создания сайта ………………..........................................5
3. Web-дизайн - создание графических элементов макета сайта, стилей и элементов навигации, наполнение контентом…………………………………………………….6
4. Типы языков программирования ……………………………………………………...7
5. Разработка базы данных и других элементов сайта, необходимых в проекте ……..7

1. Вставка комментариев в код ……………………………………………………8
2. Создание управляющего PHP скрипта…………………………………………8

6. Валидатор и проверка на кроссбраузерность ………………………………...............8
7. Хеширование данных ………………………………………………………………….9

2. Размещение сайта в сети Интернет ……………………………………………………….10

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

Список литературы и интернет-ресурсы……………………………………………………...12

Приложение 1…………………………………………………………………………………...13

Приложение 2…………………………………………………………………………………...19

Введение

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

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

Каждый из нас уже сейчас может сделать свой вклад в развитие Internet. Для этого достаточно создать свой веб-сайт и разместить его в Сети.

Объектом исследования данной работы является: разработка и размещение сайта в сети Интернет.

Предмет – создание структуры Web-сайта.

Целью является разработка Web-сайта для индивидуальных предпринимателей, возможности которого позволяют зарегистрированному пользователю (индивидуальному предпринимателю) вести учет своих доходов и расходов от предпринимательской деятельности. Разработка данного Web-сайта осуществлялась на основе применения языков программирования высокого уровня. Написание программы при разработке Web-сайта с использованием языков программирования высокого уровня позволяет сократить затраты времени и получить четко и правильно работающую программу.

Для достижения поставленной цели необходимо решить следующие частные задачи:

– ознакомиться с современными Интернет-технологиями и, по возможности, использовать их в своей разработке;

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

– выявить и учесть методы и способы представления на Web-страницах различных видов информации (текстов и изображений);

– ознакомиться с основными правилами и рекомендациями по разработке и созданию Web-сайтов и неукоснительно следовать им в своей практике;

– определиться со структурой Web-страниц;

– представить пошаговую стратегию разработки web-сайта.

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

1. Основы разработки сайта.

1. Требования к Web-приложениям

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

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

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

•   название компании или логотип в левом верхнем левом углу

•   прямую ссылку на главную страницу

•   индивидуальный слоган для сайта, состоящий из одного предложения

2. "О сервисе"

В разделе "О сервисе" необходимо представить основные сведения:

•   цели данного сервиса;

•   задачи;

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

3. Контент

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

Для того, что бы страницы было удобно просматривать, нужно использовать:

•   выделение ключевых слов;

•   грамотно составленные заголовки;

•   списки с маркерами;

•  один абзац на одну идею (пользователи пропустят все остальные идеи, если их не привлекут основные слова абзаца);

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

•    меньшее количество слов, чем в обычной статье;

•    минимум мало понятных терминов;

•    контекстную информацию атрибута " ALT".

электронные заголовки часто выводятся вне контекста:

•    в списке статей на сайте;

•    в заголовках сообщений электронной почты;

•    в результатах поиска;

•    в закладках браузера.

4. Ссылки

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

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

5. Реклама

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

•  четко указывать, что произойдёт по щелчку по ней;

•  четко идентифицировать себя как реклама;

•  описывать, что именно рекламируется;

•  даёт дополнительную информацию о себе без надобности покидать текущую страницу.

2.  Основные правила и этапы создания сайта

Для создания сайта потребуется:

1. Локальные серверы Apache и MYSQL;
2. Установленный интерпретатор PHP;
3. Графический редактор;
4. Основные браузеры (Opera, IE, Mozilla, Google Chrome и тд.)

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

СУБД MYSQL нужна для хранения информации, которая будет на сайте. В случае с HTML-страницами все содержимое сайта находится непосредственно в них. Каждая страница содержит определенный объем информации (контента).

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

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

Для создания HTML, PHP, CSS и JavaScript кодов нужен мощный редактор. Наиболее удобным инструментом для создания веб–страниц является Adobe Dreamweaver,

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

Базовый (основной) пакет Денвера включает в себя:

- Инсталлятор - программа, выполняющая установку выбранных программ на компьютер пользователя;

- Apache, SSL, SSI, mod_rewrite, mod_php;

- PHP5 с поддержкой GD, MySQL, sqLite;

- MySQL5 с поддержкой транзакций.

Отличительной особенностью Денвера является его полная автономность. Она заключается в следующем.

Денвер устанавливается в один-единственный каталог и вне его ничего не изменяет. Он не пишет файлы в Windows-директорию и не «гадит» в Реестре. При желании можно даже поставить сразу два Денвера, и они не будут конфликтовать. Никакие «сервисы» NT/2000 не «прописываются». Если вы запустили Денвер, то он работает. Если завершили — то перестает работать, не оставляя после себя следов. Системе не нужен деинсталлятор — достаточно просто удалить каталог. Установив Денвер однажды, можно затем просто переписывать его на другие машины (на произвольный диск в произвольную директорию). Это не приведет ни к каким побочным эффектам. Все конфигурирование и настройка под конкретную машину происходит автоматически.

3. Web-дизайн - создание графических элементов макета сайта, стилей и элементов навигации, наполнение контентом

Создание макета является первым шагом при проектировании любого интернет-сайта. При создании сайтов используются несколько типов верстки каркаса:

- табличный;

- блочный;

- фреймовый.

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

В качестве графического редактора можно использовать наиболее мощный растровый редактор Adobe Photoshop. Данная программа обладает широчайшими возможностями по созданию и обработке графики. Используя данную программу, был создан логотип моего сайта (Приложение 1, рис.2), а также некоторые значки меню выбора языка (Приложение 1, рис.3).

На сегодняшний день практически все программы, используемые для просмотра интернет страничек, одинаково воспроизводят сайты, на которых используются каскадные таблицы стилей css. Основным понятием CSS является стиль – т. е. набор правил оформления и форматирования, который может быть применен к различным элементам страницы. С помощью каскадных таблиц стилей можно создать красивые и небольшие web-страницы. На рисунке 4 (Приложение 1) показана часть CSS кода, который использован для оформления главной страницы сайта. Сама главная страница, а также другие изображены на рисунках 5, 6, 7 (Приложение 1).

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

Создание навигации для сайта является одним из наиболее важных моментов. От меню зависит удобство посетителей сайта и индексация страниц сайта поисковыми машинами. Многие создают на своих сайтах различные Jscript и Flash меню. Наиболее удачной технологией для создания навигации считается CSS. На рисунке 9 (Приложение 1) показана часть HTML кода каркаса после добавления меню навигации.

После создания меню навигации стало создание страницы регистрации (Приложение 1, рис.10). Чтобы пользователь мог в полном объеме использовать услуги сервиса он должен зарегистрироваться. После заполнения всех текстовых полей на этой странице, на указанный email приходит сообщение со ссылкой на активацию аккаунта (Приложение 1, рис.11, рис.12) (т.к. в спецификацию Denwer не входит SMTP сервер, который нужен для отправки электронных сообщений, то по умолчанию Denwer складывает все исходящие сообщения в определенную папку). Далее пользователь должен перейти на страницу активации, и активировать свой аккаунт, т.е. подтвердить свой email (Приложение 1, рис.13).

Создание страницы входа. Тут пользователь вводит указанный при регистрации логин и пароль (Приложение 1, рис.14), и в случае соответствия данных попадает на страницу панели управления таблицей учета доходов и расходов (Приложение 1, рис.15).

На данной странице создан блок-подсказка с раскрывающимися списками (Приложение 1, рис.16). В столбцы “Выручка” и “Затраты” пользователь вводит свои данные. Рядом с этими данными он может написать заметки, а в столбце “Проценты” указывает необходимую ему процентную ставку. Для автоматического подсчета прибыли, был написан скрипт, который показан на рисунке 17 (Приложение 1). Чтобы создать новую строку нужно нажать на кнопку “Создать”, также на этой кнопке можно ввести нужное количество строк, но не больше 100. Если допущена какая-либо ошибка или некоторые ранее введенные данные стали не нужны, пользователь может их удалить или очистить поля. Завершается работа кнопкой “Сохранить”.

4. Типы языков программирования

Есть два типа языков:

- «серверный»

- «клиентский».

К серверным языкам относится PHP язык.

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

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

Клиентские языки работают в браузере каждого конкретного человека. Типичным представителем клиентских языков является JavaScript.

JavaScript — прототипно-ориентированный сценарный язык программирования. JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.

jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API для работы с AJAX.

Так как JavaScript – это не HTML, нужно указать браузеру, в каком месте страницы нужно вставить код JavaScript. Делается это с помощью тэга