Создание сайта компании-перевозчика "Fast Travel"

Размещено на http://www.allbest.ru/

Введение

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

Актуальность Интернета.

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

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

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

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

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

Актуальность грузоперевозок

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

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

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

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

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

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

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

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

1.1 Анализ предметной области

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

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

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

Размещать только нужную пользователю информацию.

1.2 Формулировка задачи

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

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

2. Используемые языки программирования и программное обеспечение

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

Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1986-1991 годах в стенах Европейского совета по ядерным исследованиям в Женеве (Швейцария)». HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. HTML успешно справлялся с проблемой сложности SGML путём определения небольшого набора структурных и семантических элементов (размечаемых «тегами»), служащих для создания относительно простых, но красиво оформленных документов.

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

Текстовые документы, содержащие код на языке HTML (такие документы традиционно имеют расширение «html» или «htm»), обрабатываются специальными приложениями, которые отображают документ в его форматированном виде. Такие приложения, называемые браузерами, обычно предоставляют пользователю удобный интерфейс для запроса веб-страниц, их просмотра (и вывода на иные внешние устройства) и, при необходимости, отправки введённых пользователем данных на сервер.

Наиболее популярными на сегодняшний день браузерами являются Internet Explorer, Mozilla Firefox, Opera, Google Chrome и Safari.

Язык HTML позволяет делать разметку текста. Так же этот язак может:

· Сделать текст жирным, курсивным или подчёркивает его;

· Вставлять символы не входящие в ASCII;

· Поменять гарнитуру, кегль, начертание, цвет символов;

· Сделать выравнивание текста;

· Сделать текст гиперссылкой к другой странице или файлу;

· Рисовать таблицы.

Позже, когда появилась необходимость интерактивности веб-страниц, в HTML появились формы для введения пользователем данных, которые позднее подвергаются обработке. Формы и другую информацию можно обрабатывать с помощью специальных серверных программ (например, на языках PHP или Perl).

2.2 Препроцессор гипертекста PHP

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

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

· обработка и извлечение параметров http запросов GET и POST;

· формирование и отправка http заголовков;

· инфраструктура для хранения данных сеанса;

· программные сервисы для работы с cookies;

· работа с файлами по FTP протоколу;

· работа с базами данных посредствам SQL запросов;

· поддержка регулярных выражений;

· поддержка HTTP авторизации;

· обмен сообщениями по электронной почте и многое другое.

Преимущество РНР перед базовым HTML состоит в том, что последний представляет собой систему с ограниченными возможностями, не обладающую гибкостью или динамичностью. Посетители сайтов видят обычные статические HTML страницы, без каких-либо персональных настроек. С помощью же РНР можно создавать привлекательные оригинальные Web-страницы на основе любых задаваемых программистом критериев (например, времени суток или операционной системы пользователя). В отличие от HTML язык РНР также может взаимодействовать с базами данных и файлами, с его помощью может обрабатываться электронная почта и выполняться многие другие операции. PHP крайне прост для освоения, но вместе с тем способен удовлетворить запросы профессиональных программистов".

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

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

Хотя РНР обычно рекомендуется использовать в сочетании с HTML, он с таким же успехом интегрируется и в JavaScript, WML, XML и другие языки.

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

Существует еще одна «характеристика», которая делает РНР особенно привлекательным: он распространяется бесплатно, причем, с открытыми исходными кодами (Open Source), что оказало несомненно благотворное влияние на PHP, поскольку поддержка пользователей со всего мира оказалась очень важным фактором в развитии проекта РНР. Вдобавок, отзывчивое сообщество пользователей РНР является своего рода «коллективной службой поддержки», и в популярных электронных конференциях можно найти ответы даже на самые сложные вопросы.

2.3 Каскадные таблицы стилей CSS

Каскадные (многоуровневые) таблицы стилей - cascading style sheets (CSS) - это мощный стандарт на основе текстового формата, определяющий представление данных в браузере. Если формат HTML предоставляет информацию о составе документа, то таблицы стилей сообщают как он должен выглядеть. Таким образом каскадные таблицы стилей дают возможность хранить содержимое отдельно от его представления. Стиль включает все типы элементов дизайна: шрифт, фон, текст, цвета ссылок, поля и расположение объектов на странице.

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

Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.

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

2.4 Java script - сценарный язык программирования

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

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

Используя JavaScript на web-страницах возможно то, что нельзя сделать при использовании HTML. Программа исполняется при наступлении события, начатого манипуляциями пользователя.

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

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

2.5 Система управления базами данных MySQL

MySQL - это распространённая система управления базами данных (СУБД), очень часто применяемая в сочетании с PHP.

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

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

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

Другая немаловажная причина популярности MySQL заключается в том, что ее создатели с самого начала разработки этой СУБД поставили на первое место ее быстродействие, пожертвовав при этом некоторыми удобствами для разработчиков. Связка PHP + MySQL или Perl + MySQL обеспечивают очень высокое быстродействие, которого очень трудно достичь другими средствами.

Очень хорошая связь MySQL с PHP стала еще одной причиной популярности этой СУБД. Поддержка MySQL входит в стандартную сборку PHP, и можно быть уверенным, что проблем обращения к серверу MySQL из PHP-скриптов не будет. Таким образом, можно считать, что дешевизна, легкодоступность, производительность и тесная взаимосвязь с PHP и обеспечивают такую популярность MySQL.

3. Описание разработки программного продукта

3.1 Требования, предъявляемые к программному продукту

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

На сайте реализован удобный интерфейс, стильный дизайн, форма для отправки заказа.

Сайт состоит из трех вкладок: "О нас", "Сервис", "Связь"

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

Во вкладке "Сервисе" клиент прочитает услуги, которые предлагает компания-перевозчик. А именно:

· Перевозка по сети филиалов

· Забор груза

· Универсальная доставка

· Погрузо-разгрузочные работы

· Упаковка

· Хранение

· Страхование

· Возврат документов

В третьей вкладке "Связь" клиент может увидеть контакты компании, а также форму для отправки заявки.

3.2 Архитектура программного продукта

Для решения поставленной задачи, очевиден выбор клиент-серверной архитектуры, так как желаемый программный продукт является web-приложением. Архитектура «клиент-сервер» определяет общие принципы организации взаимодействия в сети, где имеются серверы, узлы-поставщики некоторых специфичных функций (сервисов) и клиенты, потребители этих функций. Схематично функционирование в системе такого вида представлено на рисунке 3.1.

Рис. 3.1 - Схема работы системы "клиент-сервер"

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

3.3 Основные принципы работы программного продукта

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

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

Используя CMS можно разрабатывать сайты различной сложности. Этот метод разработки сайтов является простым и распространённым. Из-за простоты и детальной системе настроек можно редактировать CMS, и её элементы. Так же можно легко добавлять и изменять контент. Благодаря этим особенностям сайты, разработаны с использованием CMS, просты в использовании.

Данный сайт был написан вручную.

В CSS есть блочная и табличная верстки. Для сайта было выбрана блочная верстка. Она опирается на блочные элементы HTML. Они расположены по вертикали, по порядку, как они написаны в HTML коде.

Достоинства блочной верстки:

· Меньший размер кода гарантирует меньший вес страницы

· Осуществление красивого дизайна с перекрывающимися блоками

Недостатки блочной верстки:

· Сложно изучаем.

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

Клиентом и сервером может обмениваться данными за счет использования языка программирования PHP. Начинает подключение к серверу браузер. Сам РНР скрипт осуществляется на сервере. Браузер отправляет серверу запрос на страничку с PHP скриптом, а сервер отправляет этот скрипт на исполнение интерпретатору PHP, программ производит HTML код, отправляет серверу, а сервер отправляет пользователю. Используется метод POST передачи данных на сервер.

3.4 Описание процесса разработки верстки блоков

Указываем кодировку файла UTF-8

<META content="text/html;charset=utf-8"http-equiv="Content-Type">

Указываем ключевые слова для продвижения в поисковых системах

<meta name="keywords" content="Fast Travel, грузоперевозки, доставка грузов" />

Подключаем таблицу стилей

<link rel="stylesheet" type="text/css" href="reset.css">

<link rel="stylesheet" type="text/css" href="style.css">

<link type="text/css" rel="stylesheet" media="screen" href="css/basic.css" />

Указываем Favicon

Favicon - это значок, который отображается на вкладке браузера. Изображен на рисунке 3.2

Рисунок 3.2 Favicon

<link rel="icon" type="image/ico" href="image/favicon.ico" />

Подключаем библиотеки jquery

jQuery-- это JavaScript-библиотека, обеспечивающая кросс-браузерную поддержку приложений

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">

google.load("jquery", "1.4.2");

</script>

<script type="text/javascript" src="scripts/jquery.scrollTo.1.4.2.min.js"></script>

<script type="text/javascript" src="scripts/jquery.serialScroll.min.js"></script>

<script type="text/javascript" src="scripts/jquery.localscroll.min.js"></script>

<script type="text/javascript" src="scripts/jquery.easing.1.3.min.js"></script>

<script type="text/javascript" src="scripts/jquery.codaslider.min.js"></script>

<script type="text/javascript" src="scripts/functions.js"></script>

<script type="text/javascript">

Блоки создаётся с помощью тега div. <div id="header"> - верхний блок. id="header" это ссылка на header расположена в своих стилях, который имеет название style.css. Пример данного стиля:

#header{

position: relative;

left: 0px;

right: 0px;

top: 0px;

bottom: 0px;

width:100%;/*Ширина*/

height:300px;/*высота*/

background-color:rgb(0, 61, 77);/*цвет фона*/

border-bottom: 5px solid rgb(209, 31, 0);/*линия внизу*/

z-index: 10;

}

В этом же блоке создаем блок с классом logo <div class="logo">.

<img src="image/logo.png"> вставляем картинку в этот блок с такими координатами:

logo img{

position:absolute;

left: 50%;/*отступ слева*/

margin: 40 0 0 -505px;

width:200px;

}

@media (max-width:1020px) {

Потом создаем блок, в котором будет находится название сайта:

<div class="deca"> Fast Trave</div>

.deca{

font: normal normal normal 55px/1.4em 'arial black', arial-w01-black, arial-w02-black, 'arial-w10 black', sans-serif;/*шрифты*/

color: rgb(0, 125, 159);/*цвет*/

position:absolute;/*позиция*/

left: 50%;

margin: 130 0 0 -280px;

}

Создаем заголовок с тегом <h1>, в котором будет находится информация о сайте:

<H1 class="deca2"> Грузоперевозки по всей России!</H1>

Создаем блок, в котором будет находится ссылка на меню навигация:

<div id="navigation">

#navigation{

z-index: 1;

top: 25px;/*отступ сверху*/

font: normal 14px 'Trebuchet MS',Trebuchet,

Arial,Sans- Serif;/*шрифт*/

text-align: center;

height: 50px;

width: 1020px;

overflow: visible;

white-space: nowrap;

display: inherit

margin: auto;/*отступы*/

position: relative;

}

В этом блоке создаем ссылки на нужный пункт меню:

<a href='#sites'>

Создаем блок внутри ссылки:

<div class="but1">

Вставляем картинку в блок и дальше делаем тоже самое для каждого блока:

<img src="menu/but1.png">

</div>

</a>

<a href="#sites">

<div class="but11">

<img src="menu/but11.png">

</div>

</a>

<a href="#files">

<div class="but2">

<img src="menu/but2.png">

</div>

</a>

<a href="#files">

<div class="but22">

<img src="menu/but22.png">

</div>

</a>

<a href="#editor">

<div class="but3">

<img src="menu/but3.png">

</div>

</a>

<a href="#editor"> <div class="but33">

<img src="menu/but33.png">

</div>

</a>

</div>

</div>

Для каждой but задаем свое местоположение. Для примера:

but1 img{

position:absolute;

width:340px;

height:50px;

top:0%;

left:0%;

z-index:200;

-webkit-filter: opacity(1);

-webkit-transition-duration:0.42s;

-moz-transition-duration:0.42s;

-o-transition-duration:0.42s;

-ms-transition-duration:0.42s;

transition-duration:0.42s;

z-index:10;

}

Создаем блок, в котором будет находится контент страницы:

<div id="slider"> id="slider"

#slider{

position:relative;

width:1020px;

margin:0 auto;

}

Создаем блок эффекта скроллинга:

<div class="scroll">

.scroll{

position:relative;

width:1020px;

margin:0 auto;

}

Создаем блок, в котором будет находится контент пункта меню "О Нас":

<div class="panel" id="sites">

Создаем блок и делаем ссылку content с таким расположением:

<div id="content">

#content{

position:relative;

width:1020px;

height:1180px;

}

Создаем блок для верхней части информации:

<div class="block1">

.block1{

position:absolute; /*позиция*/

height:280px;

width:700px;

left:0px;

}

Создаем строку-слоган:

<span class="textabout">

Наша компания доставляет грузы во все города России.<br>Мы доступны 24 часа 7 дней в неделю. <br>Связаться с нами Вы можете позвонив по телефону нашего CALL центра или заполнив форму на сайте.<br>Мы всегда будем готовы помочь вам оперативно и качественно!</div>

Создаем блок информации о компании:

<div class="block2">

<H3 style="height:40px; margin-top: 10px;"><b>О компании</b></H3>

Создаем блоки с историей и филиалами:

<div class="net11">

<p class="serviceh"><b>История компании</b></p>

<span class="serviceh2">

Наша компания была основана в 2010 году и быстро завоевала признание у наших клиентов за качественные услуги и скорость выполнения доставок.</span>

</div>

<div class="net12">

<p class="serviceh"><b>Наши филиалы</b></p>

<span class="serviceh2">

По всей России работает более 50 наших филиалов, самые крупные из них -- Москва, Санкт-Петербург, Екатеринбург, Ростов-на-Дону, Новосибирск, Саратов, Волгоград -- стали распределительными логистическими центрами, с развитой производственной и сервисной инфраструктурой.

</div>

<div class="net13">

<p class="serviceh"><b>Сертификаты</b></p>

<span class="serviceh2">Наша компания является официально признанной государственными и международными сертификационными органами.</span>

</div>

Создаем блок с отзывами:

<div class="block3">

<H4 style="margin-top:-60px; text-align: center;">Отзывы о нас</H4>

<div class="block3photo"><img src="image/ok.png"></div>

Пример первого отзыва:

<div class="line1">

<div class="textline"><p>"

За 2 дня доставили посылку из Новосибирска в Москву. Здорово!"<br><i>Ольга</i></p></div>

Создаем блок, в котором будет находится контент пункта меню "Сервис":

<div class="panel" id="files">

<div id="contentservice">

<H3 style="font: normal normal bold 32px/1.4em arial,

'ms pgothic', µёїт, dotum, helvetica, sans-serif;

margin-top:50px;" class="ser">

Наши услуги</H3>

Создаем блок для каждого отдельного пункта:

<div class="net1">

Вставляем картинку:

<img class="plus" src="image/service.png">

Создаем параграф тегом <p, в котором находится заголовок пункта

<p class="serviceh"><b>Перевозка по сети филиалов</b></p>

Создаем строку с описанием пункта:

<span class="serviceh2">

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

</span>

</div>

Остальные пункты сделаны так же:

net1{

height:280px;

width:500px;

position:absolute;

top:70px;

left:0px;

}

serviceh2{

font: normal normal normal 16px/1.4em arial, 'ms pgothic', µёїт, dotum, helvetica, sans-serif;

color: rgb(90, 89, 89);

list-style-type: none;

line-height: 1.5;

margin-left:70px;

position:absolute;

margin-top:40px;

line-height:22px;

}

Создаем блок, в котором будет находится контент пункта меню "Связь":

<div class="panel" id="editor">

Создаем блок контактов:

<div id="contentcontacts">

<H3 style="font: normal normal bold 32px/1.4em arial,

'‚Ќ‚“ ‚ђѓSѓVѓbѓN', 'ms pgothic', µёїт, dotum, helvetica, sans-serif;margin-top:50px;"

class="ser2">Наши контакты</H3>

<div class="contactblock1">Наш E-mail<br>CALL-центр</div>

<div class="contactline"></div>

<div class="contactblock2">FastTravel@mail.ru<br>555-33-77</div>

<div class="phone"><img src="image/phone.png"></div>

Создаем блок формы отправки заявки на заказ:

<H4 style="font: normal normal bold 32px/1.4em arial,

'‚Ќ‚“ ‚ђѓSѓVѓbѓN', 'ms pgothic', µёїт, dotum, helvetica, sans-serif;margin-top:100px;"

class="ser2">Оставить заявку</H4>

<div class="inputc">

<form method="post" action="form.php" onsubmit="return checkForm(this)">

<input type="text" skinpart="name" name="Name" class="iname">

Телефон:

<input type="text" skinpart="name" name="phone2" class="iname">

E-mail:

<input type="text" skinpart="name" name="E_mail2" class="iname">

Заказ:

<textarea name="Message" class="iname" ></textarea>

<input class="sub" type="submit" name="sub2"></input>

</form>

</div>

Создаем блок для подвала сайта

<div id="footer">

<div class="copy">Fast Travel © 2016 </div>

#footer{

position: absolute;

width:100%;

height:50px;

z-index: 10;

position: absolute;

background-color: rgb(255, 190, 28);

}

В странице администратора создаем таблицу заказов:

<h2 class="title-list-order">Список заказов</h2>

<div class="div-table">

<!-- создаем таблицу для заказов-->

<table class="features-table">

<thead>

<tr>

<td class="grey"> Номер заказа</td>

<td class="grey"> Номер телефона клиента</td>

<td class="grey" nowrap>Дата заказа</td>

<td class="grey" nowrap>Сообщение</td>

</tr>

</thead>

<tbody>

<!-- В цикле выводим все заказы на экран-->

<?php foreach($orders as $val):?>

<tr>

<td><?php print $val['id']?></td>

<td><?php print $val['number_phone']?></td>

<td><?php print $val['data_ord']?></td>

<td><?php print $val['mess']?></td>

</tr>

<?php endforeach?>

</tbody>

</table>

</div>

Создаем функцию внесения заказа в базу данных

<?php

include 'base.php';

if (isset($_POST['sub2'])){

if(!empty($_POST['Name']) || !empty($_POST['phone2']) || !empty($_POST['E_mail2']) || !empty($_POST['Message'])) {

$emailTo = 'decaservice@mail.ru';

$body = "Name:".$_POST['Name']." \n\nE-mail: ".$_POST['E_mail2']." \n\nNumber: ".$_POST['phone2']." \n\nMessage:".$_POST['Message']."";

$body = mb_convert_encoding ($body,"UTF-8", "Windows-1251");/*устанавливаем кодировку для корректного отображения*/

$subject = "ООО ДекаСервис";

$headers = 'From: Deca-service <'.$emailTo.'>'. "\r\n". 'Reply-To: '. $email;

if (mail($emailTo, $subject, $body, $headers)) {

print 'Email sent';

}

else {

die('Error email');

}

}

set_order($_POST['phone2'], date("m.d.y"), $_POST['Message']);

}

4. Описание программного продукта

4.1 Структура сайта

Зайдя на сайт, клиент первым делом увидит главную страницу, представлена на рисунке 4.1.

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

Главным элементом сайта является шапка с тремя навигационными вкладками, которые называются "О Нас", "Сервис", "Связь". Рисунок 4.2.



Рисунок 4.2 Навигационные вкладки

Через эти вкладки осуществляется переход по интересующим пользователя разделам.

Первой страницей является "О нас", на которую клиент попадает по-умолчанию. На этой странице клиент увидит краткую историю компании, информацию о филиалах и отзывы клиентов. Рисунок 4.3.

Рисунок 4.3 О компании

Перейдя на вкладку "Сервис" клиент увидит предлагаемые компанией услуги. Рисунок 4.4.



Рисунок 4.4 Сервис

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

При неполном заполнении формы пользователю будет показано сообщение какие поля были им пропущены и должны быть заполнены. Рисунок 4.6



Рисунок 4.5 Связь

Рисунок 4.6 Оповещение

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

Рисунок 4.7 Страница администратора

Заключение

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

Если пользователь останавливается на web-сайте на долгой период - это значит, что такой сайт сделан качественно.

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

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

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

интернет сайт программный гипертекстовый

Список использованных источников

1 Википедия - свободная общедоступная многоязычная универсальная энциклопедия. - Загл. с экрана. - яз. рус.

2 М.Русаков "Создание сайта от начала и до конца" - 2014г., 172с.

3 Вейнер П. Языки программирования JAVA и JavaScript. - М: ЛОРИ, 2000.

4 Актуальность грузоперевозок

5 Значение Интернета в современном мире

Размещено на Allbest.ru

...