Создание веб-сервиса

Автор работы: Пользователь скрыл имя, 04 Декабря 2015 в 16:54, курсовая работа

Описание работы

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

Файлы: 1 файл

создание веб сервиса.docx

— 6.06 Мб (Скачать файл)

СОДЕРЖАНИЕ

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

ВВЕДЕНИЕ

 

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

 

 

 

 

 

 

 

 

АНАЛИЗ ПРЕДМЕТНОЙ ОБЛАСТИ

 

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

Как было сказано ранее многие сайты и издания приводят такие рейтинги. Например, сайт http://stogorodov.ru/.

 

Рисунок 1 – Главная страничка сайта stogorodov.ru

 

Сайт содержит множество фотографий, статей на различные темы, например, самые большие круизные лайнеры, или новые 7 чудес света, и новостей на тему красивых городов мира. Сайт красиво оформлен и имеет удобный интерфейс. Следующий сайт этой области http://ezdili-znaem.com/.

 

Рисунок 2 – Главная страница сайта http://ezdili-znaem.com/

 

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

Еще одним сайтом данной категории будет http://www.booking.com/.

 

Рисунок 3 – Главная страница сайта http://www.booking.com/.

 

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

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

 

ПРОЕКТИРОВАНИЕ СЕРВИСА

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

Сайт будет содержать следующие страницы:

  1. Главная страница. С нее начинается просмотр веб-страниц сайта. На этой странице в центре расположена фотография одного из красивейших городов - Исландии. Под фото есть ссылка, нажав на которую, переходим на страницу с топ-5 городов. Еще ниже есть ссылка, перейдя по которой можно просмотреть и скачать видео в котором в ускоренном режиме показаны многие восхитительные места планеты. Далее ссылка на книгу отзывов. Еще ниже – ссылка для перехода к написанию своего отзыва. Снизу слева ссылка, перейдя по которой можно связаться с администрацией сайта (то есть автоматически будет открыто выше приложении для отправки e-mail и в поле адрес будет прописан адрес администрации), а справа – ссылка, нажав на которую можно быстро перейти к началу страницы.

 

Рисунок 4 – Главная страница веб-сервиса

 

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

 

Рисунок 5 – Страница сайта «Топ городов»

 

  1. Город. Перейдя по ссылке «Подробнее…» посетитель попадает на страницу с более подробным описанием выбранного города. Сверху название и его фото. Ниже изложено более подробное описание города, его история, интересные факты. Далее город показан картах GoogleMaps. Можно просмотреть как на данной странице, так и на сайте Google. Ниже ссылка, перейдя по которой можно самостоятельно выбрать себе отель в этом городе, с помощью сайта TripAdvisor. Ниже ссылка, чтобы забронировать тур с помощью данного сервиса. Еще ниже – ссылка для перехода к написанию своего отзыва. Снизу слева – связь с администрацией сайта, справа – переход к началу страницы. На страничке установлен виджет Pluso.

 

Рисунок 6 – Верх страницы описания города

 

 

Рисунок 7 – Низ страницы описания города

 

  1. Форма заказа. На данной странице посетитель вводит свои данные, в зависимости от блока. Их 3: 1 – Персональные данные, 2 – информация о туре и 3 – дополнительная информация. После ввода данных пользователь нажимает кнопку отправить, чтобы данные поступили администрации. После того, как данные будут отправлены, они попадают в базу данных и уже там, видя появление данных, туроператор подбирает тур для определенного клиента согласно его указаниям в заявке и перезванивает ему или же списывается с ним по e-mail.

Рисунок 8 – Страница заполнения заявки на тур

 

  1. Форма написания отзыва. Делится на 2 блока. 1 – ввод данных. Содержит такие поля как: Имя, город отзыва, каким образов посещал данный город. 2 – ввод отзыва. Содержит поле ввода отзыва. Ниже две кнопки: «Оставить отзыв» и «Перейти на главную». После нажатия кнопки «Оставить отзыв» запись автоматически появляется в книге отзывов, которую можно посмотреть перейдя по ссылке ниже.

Рисунок 9 – Страница написания отзыва

  1. Книга отзывов. Содержит в себе заголовок и блоки отзывов, каждый из которых включает себя такие поля: «Имя:», «Город:», «Ездил(а) », «Отзыв». Каждой записи автоматически присваивается номер от 1. В конце страницы кнопка перехода на Главную.

 

Рисунок 10 – Страница с отзывами

 

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

 

Рисунок 11 – Структура сайта

 

Некоторые функции сервиса (такие как отправка заявки на тур и оставление отзыва) выполняются с помощью баз данных. Для управления базами данных была использована СУБД MySQL. Опишем отправку заявки на тур. После заполнения формы и нажатия кнопки «Отправить заявку» пользователь попадает на страничку, на которой пишется результат отправки – «Заявка была отправлена успешно» или «Заявка не была отправлена». Эта страница написана на языке php. Здесь происходит передача данных в базу MySQL. В ней была создана база данных form и таблица в этой базе под именем main, в которую будут поступать все данные и там же храниться. Ниже будет представлена ее структура.

 

Рисунок 12 – Структура базы данных заявок

 

Таблица имеет 10 строк, каждая из которых отвечает за определенную запись клиента (ФИО, наличие загран. Паспорта, e-mail, номер телефона, дата рождения, город (который хочет посетить), количество дней, звездность отеля, тип питания и дополнительная информация). У каждой строки свой тип данных, и своя длина в зависимости от содержимого данных. После отправки заявки администратор может посмотреть пришедшие данные. На рисунке ниже будет показана эта возможность.

 

 

 

Рисунок 13 – Просмотр данных содержащихся в базе

 

Все то же самое и для оставления отзыва. После заполнения формы отзыва и нажатия кнопки «Оставить отзыв», выполняется переход на страницу, написанную на php, с помощью которой данные отправляются в MySQL в уже созданную базу данных recall и таблицу otziv. Ниже предоставлена ее структура.

 

Рисунок 14 – Структура базы данных отзывов

 

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

 

Рисунок 15 – Просмотр содержимого базы данных отзывов

 

ТЕХНОЛОГИЧЕСКИЙ РАЗДЕЛ

 

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

 Основными тегами  языка HTML являются такие теги, как: <html></html> (тег указывает программе просмотра страниц, что это HTML документ), <head></head>   (определяет место, где помещается различная информация, не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин.), <body></body> (Определяет видимую часть документа). В этом теге будет прописываться основная часть тегов. Чтобы вывести на экран текст, нужно просто записать его внутри тега <body></body>. Для форматирования текста в языке имеются различные теги. Тег <h1></h1> создает самый большой заголовок. Теги <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>  создают заголовки промежуточных размеров. Тег <h6></h6> создает самый маленький заголовок. Тег <b></b>  создает жирный текст, а тег <i></i>  создает наклонный текст. <p></p> cоздает новый параграф, <p align="?"></p> выравнивает параграф относительно одной из сторон документа (значения: left, right, justify или center). Например, для вывода изображения используется одинарный тег <img>, который был не раз употреблен в написании сайта. Он имеет множество атрибутов, такие как - width и height, отвечающие за ширину и высоту изображения соответственно. Например, чтобы вывести изображение с главной страницы сайта, нужно было прописать следующее: <img src = "image/исландия.jpg" width = "670" height = "450" title = "исландия">. Так же часто использовался тег <a>, предназначенный для создания ссылок. Для того, чтобы задать адрес документа, на который следует перейти используется атрибут href. В качестве значения атрибута используется адрес документа, на который происходит переход. Для создания таких страниц, как форма заявки и написание отзыва, которые предназначены для передачи данных на сервер, используется тег <form> для создания HTML формы ввода данных пользователем. Форма может содержать элементы ввода, как текстовые поля, флажки, радио-кнопки, кнопки, элементы выбора, легенды. Имеет обязательный атрибут action, в котором указывается куда отправить данные при отправке формы. Например, для отправки данных с заявки на тур используется следующее <form  method="post" action="formdata.php">. Для логической группировки элементов в форме используется тег <fieldset>. Он создает рамку вокруг похожих элементов формы, а тег <legend> определяет его заголовок. Тег <label> определяет метку (ярлык) для элемента ввода. Этот элемень скрыт от глаз пользователей. Однако, он предоставляет значительное улучшение юзабилити для тех, кто пользуется мышкой, так как при нажатии юзером на текст внутри элемента label, включаются кнопки управления. Тег <input> используется для выбора информации от юзера. Поля ввода могут значительно отличаться друг от друга, в зависимости от атрибута type. Поле ввода может быть текстовым полем, чекбоксом, полем для пароля, радио кнопкой, кнопкой и т.п. Все эти тэги были использованы для создания как обычных страниц сайта, так и для форм.

Рисунок 16 – Пример кода страницы на HTML

 

Рисунок 17 – Страница в браузере, написанная кодом выше

Для того, чтобы данные с форм были отправлены в базу данных, был использован язык php. Для создания страницы на php, используем заготовку для HTML, то есть <html></html>, <head></head> и <body></body>. В последнем теге будем писать код на php. Программа начинается с тега <?php и заканчивается ?>. Все, что помещается между этими двумя тегами - это php код. Все, что пишут вне этих тегов - обычный html. Для связи между PHP и базой данных MySQL используем метод mysqli, которому будет передано имя хоста, имя пользователя, пароль и имя базы данных. Для того чтобы считать данные из формы существует метод POST, в котором данные передаются в закрытой форме. Существует глобальный массив $_POST, из которого можно считывать данные следующим образом: $_POST['имя_переменной']. Для того, чтобы добавить эти данные в базу данных использован метод INSERT INTO ‘имя_таблицы’ 'имя_переменной'  =  '$имя_переменной'. Для того, чтобы считать данные из базы пользуемся SELECT 'имя_переменной' FROM ‘имя_таблицы’. Для вывода переменной на экран есть метод echo. Так как в базе данных под одним именем переменной может быть множество значений, для вывода переменные записываются в массив методом mysqli_fetch_array и выводятся в цикле while. Закрывается соединение с помощью mysqli_close($’имя_соединения’). Ниже будут представлены блок-схемы страниц, написанных на языке php.

 

Рисунок 18 – Код страницы, написанной на языке php

 

Рисунок 19 – Блок-схема страницы отправки данных заявки на тур

 

Рисунок 20 – Блок-схема вывода данных в книгу отзывов

ЗАКЛЮЧЕНИЕ

 

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

Информация о работе Создание веб-сервиса