Разработка клиент-серверного веб-приложения "Интернет-аукцион"
Концепция Web 2.0. Язык разметки HTML5. Инструментальные средства для создания веб-приложений. Язык объектного анализа и проектирования UML. Осуществление наполнения и тестирования разработанного интернет-магазина. Форматирование содержимого Web-страниц.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | дипломная работа |
| Язык | русский |
| Дата добавления | 05.06.2016 |
| Размер файла | 3,9 M |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
<html>
<body>
<?php
$db = mysql_connect("localhost", "root");
mysql_select_db("mydb",$db);
if ($id) {
if ($submit) {
$sql = "UPDATE employees SET first='$first',last='$last',address='$address',position='$position' WHERE id=$id";
$result = mysql_query($sql);
echo "Thank you! Information updated.\n";
} else {
// query the DB
$sql = "SELECT * FROM employees WHERE id=$id";
$result = mysql_query($sql);
$myrow = mysql_fetch_array($result);
?>
<form method="post" action="<?php echo $PHP_SELF?>">
<input type=hidden name="id" value="<?php echo $myrow["id"] ?>">
First name:<input type="Text" name="first" value="<?php echo $myrow["first"] ?>"><br>
Last name:<input type="Text" name="last" value="<?php echo $myrow["last"] ?>"><br>
Address:<input type="Text" name="address" value="<?php echo $myrow["address"] ?>"><br>
Position:<input type="Text" name="position" value="<?php echo $myrow["position"] ?>"><br>
<input type="Submit" name="submit" value="Enter information">
</form>
<?php
}
} else {
// display list of employees
$result = mysql_query("SELECT * FROM employees",$db);
while ($myrow = mysql_fetch_array($result)) {
printf("<a href=\"%s?id=%s\">%s %s</a><br>\n", $PHP_SELF, $myrow["id"], $myrow["first"], $myrow["last"]);
}
}
?>
</body>
</html>
Вот так. Нам удалось вместить все, что мы знаем и умеем в один код. Здесь вы можете увидеть, как мы используем выражение if() внутри другого выражения if() для последовательно проверки нескольких условий.
Теперь пришло время свести все вместе и создать одну PHP-страницу.
<html>
<body>
<?php
$db = mysql_connect("localhost", "root");
mysql_select_db("mydb",$db);
if ($submit) {
// here if no ID then adding else we're editing
if ($id) {
$sql = "UPDATE employees SET first='$first',last='$last',address='$address',position='$position' WHERE id=$id";
} else {
$sql = "INSERT INTO employees (first,last,address,position) VALUES ('$first','$last','$address','$position')";
}
// run SQL against the DB
$result = mysql_query($sql);
echo "Record updated/edited!<p>";
} elseif ($delete) {
// delete a record
$sql = "DELETE FROM employees WHERE id=$id";
$result = mysql_query($sql);
echo "$sql Record deleted!<p>";
} else {
// this part happens if we don't press submit
if (!$id) {
// print the list if there is not editing
$result = mysql_query("SELECT * FROM employees",$db);
while ($myrow = mysql_fetch_array($result)) {
printf("<a href=\"%s?id=%s\">%s %s</a> \n", $PHP_SELF, $myrow["id"], $myrow["first"], $myrow["last"]);
printf("<a href=\"%s?id=%s&delete=yes\">(DELETE)</a><br>", $PHP_SELF, $myrow["id"]);
}
}
?>
<P>
<a href="<?php echo $PHP_SELF?>">ADD A RECORD</a>
<P>
<form method="post" action="<?php echo $PHP_SELF?>">
<?php
if ($id){
// editing so select a record
$sql = "SELECT * FROM employees WHERE id=$id";
$result = mysql_query($sql);
$myrow = mysql_fetch_array($result);
$id = $myrow["id"];
$first = $myrow["first"];
$last = $myrow["last"];
$address = $myrow["address"];
$position = $myrow["position"];
// print the id for editing
?>
<input type=hidden name="id" value="<?php echo $id ?>">
<?php
}
?>
First name:<input type="Text" name="first" value="<?php echo $first ?>"><br>
Last name:<input type="Text" name="last" value="<?php echo $last ?>"><br>
Address:<input type="Text" name="address" value="<?php echo $address ?>"><br>
Position:<input type="Text" name="position" value="<?php echo $position ?>"><br>
<input type="Submit" name="submit" value="Enter information">
</form>
<?php
}
?>
</body>
</html>
На первый взгляд код выглядит сложным, однако, это не так. Программа делится на три части. Первое if() выражение проверяет, была ли нажата кнопка Submit, и если была, проводится проверка, есть ли в поданных данных переменная $id. Если ее нет, значит, происходит добавление новой записи. В противном случае мы редактируем уже существующую запись.
Далее мы проверяем, определена ли переменная $delete. Если да, мы удаляем запись. Обратите внимание, что в первом выражении if() мы проверяем переменную, которая была подана с помощью метода POST, а в данном if() выражении мы проверяем переменную, которая является частью данных отправленных с помощью метода GET.
Наконец, мы переходим к действию, которое будет выполняться по умолчанию: то есть выводим просто список служащих и форму. Здесь мы опять проверяем существование переменной $id. Если она существует, мы просим базу данных выдать сведения о выбранном служащем. В противном случае выводим пустую форму.
Все, чему мы научились, мы поместили в один большой код. Мы использовали циклы while() и выражения if(), а также целую гамму основных команд языка SQL - SELECT, INSERT, UPDATE, и DELETE
Наконец, мы рассмотрели, как можно передавать информацию от одной страницы к другой через URL с помощью ссылок и через формы.
1.5 Язык объектного анализа и проектирования UML
Унифицированный Язык Моделирования UML (Unified Modeling Language) представляет собой общецелевой язык визуального моделирования, который разработан для спецификации, визуализации, проектирования и документирования компонентов программного обеспечения, бизнес-процессов и других систем [18, 19, 20, 21]. Язык UML одновременно является простым и мощным средством моделирования, который может быть эффективно использован для построения концептуальных, логических и графических моделей сложных систем самого различного целевого назначения. Этот язык вобрал в себя наилучшие качества методов программной инженерии, которые с успехом использовались на протяжении последних лет при моделировании больших и сложных систем.
Язык UML основан на некотором числе базовых понятий, которые могут быть изучены и применены большинством программистов и разработчиков, знакомых с методами объектно-ориентированного анализа и проектирования. При этом базовые понятия могут комбинироваться и расширяться таким образом, что специалисты объектного моделирования получают возможность самостоятельно разрабатывать модели больших и сложных систем в самых различных областях приложений.
Язык UML предназначен для решения следующих задач:
Предоставить в распоряжение пользователей легко воспринимаемый и выразительный язык визуального моделирования, специально предназначенный для разработки и документирования моделей сложных систем самого различного целевого назначения.
Снабдить исходные понятия языка UML возможностью расширения и специализации для более точного представления моделей систем в конкретной предметной области.
Описание языка UML должно поддерживать такую спецификацию моделей, которая не зависит от конкретных языков программирования и инструментальных средств проектирования программных систем.
Описание языка UML должно включать в себя семантический базис для понимания общих особенностей ООАП.
Поощрять развитие рынка объектных инструментальных средств.
Способствовать распространению объектных технологий и соответствующих понятий ООАП.
Интегрировать в себя новейшие и наилучшие достижения практики ООАП.
С точки зрения визуального моделирования, UML можно охарактеризовать следующим образом. UML предоставляет выразительные средства для создания визуальных моделей, которые единообразно понимаются всеми разработчиками, вовлеченными в проект, и являются средством коммуникации в рамках проекта.
Унифицированный Язык Моделирования (UML):
не зависит от объектно-ориентированных (ОО) языков программирования;
не зависит от используемой методологии разработки проекта;
может поддерживать любой объектно-ориентированный язык программирования.
UML является открытым и обладает средствами расширения базового ядра. На UML можно содержательно описывать классы, объекты и компоненты в различных предметных областях, часто сильно отличающихся друг от друга.
Общая структура языка UML. С самой общей точки зрения описание языка UML состоит из двух взаимодействующих частей, таких как:
Семантика языка UML. Представляет собой некоторую метамодель, которая определяет абстрактный синтаксис и семантику понятий объектного моделирования на языке UML.
Нотация языка UML. Представляет собой графическую нотацию для визуального представления семантики языка UML.
Абстрактный синтаксис и семантика языка UML описываются с использованием некоторого подмножества нотации UML. В дополнение к этому, нотация UML описывает соответствие или отображение графической нотации в базовые понятия семантики. Таким образом, с функциональной точки зрения эти две части дополняют друг друга. При этом семантика языка UML описывается на основе некоторой метамодели, имеющей три отдельных представления: абстрактный синтаксис, правила корректного построения выражений и семантику.
Семантика определяется для двух видов объектных моделей: структурных моделей и моделей поведения. Структурные модели, известные также как статические модели, описывают структуру сущностей или компонентов некоторой системы, включая их классы, интерфейсы, атрибуты и отношения. Модели поведения, называемые иногда динамическими моделями, описывают поведение или функционирование объектов системы, включая их методы, взаимодействие и сотрудничество между ними, а также процесс изменения состояний отдельных компонентов и системы в целом.
Для решения столь широкого диапазона задач моделирования разработана достаточно полная семантика для всех компонентов графической нотации. Требования семантики языка UML конкретизируются при построении отдельных видов диаграмм. Нотация языка UML включает в себя описание отдельных семантических элементов, которые могут применяться при построении диаграмм.
Формальное описание самого языка UML основывается на некоторой общей иерархической структуре модельных представлений, состоящей из четырех уровней:
Мета-метамодель.
Метамодель.
Модель.
Объекты пользователя.
Уровень метаметамодели образует исходную основу для всех метамодельных представлений. Главное предназначение этого уровня состоит в том, чтобы определить язык для спецификации метамодели. Мета-метамодель определяет модель языка UML на самом высоком уровне абстракции и является наиболее компактным ее описанием. С другой стороны, мета-метамодель может специфицировать несколько метамоделей, чем достигается потенциальная гибкость включения дополнительных понятий.
Метамодель является экземпляром или конкретизацией мета-метамодели. Главная задача этого уровня - определить язык для спецификации моделей. Данный уровень является более конструктивным, чем предыдущий, поскольку обладает более развитой семантикой базовых понятий. Все основные понятия языка UML - это понятия уровня метамодели. Примеры таких понятий - класс, атрибут, операция, компонент, ассоциация и многие другие.
Модель в контексте языка UML является экземпляром метамодели в том смысле, что любая конкретная модель системы должна использовать только понятия метамодели, конкретизировав их применительно к данной ситуации. Это уровень для описания информации о конкретной предметной области. Однако если для построения модели используются понятия языка UML, то необходима полная согласованность понятий уровня модели с базовыми понятиями языка UML уровня метамодели.
Конкретизация понятий модели происходит на уровне объектов. В настоящем контексте объект является экземпляром модели, поскольку содержит конкретную информацию относительно того, чему в действительности соответствуют те или иные понятия модели.
Выводы. В данной главе были рассмотрены основы создания современных веб-приложений HTML, PHP, JavaScript и CSS. Все это в совокупности используется для построения интерфейса и бизнес-логики веб-приложения. Для работы с данными используется сервер баз данныз MySQL. Популярным инструмент анализа и проектирования является язык UML.
2. Проектирование веб-приложения «Интернет-аукцион»
2.1 Анализ предметной области
В данном подразделе рассмотрим особенности некоторых аукционов и перейдем к проектирования веб-приложения.
Аукцион. eBay. Аукцион Основной идеей eBay является предоставление продавцам интернет-платформы для продажи любых товаров. Сама фирма eBay выступает лишь в роли посредника при заключении договора купли-продажи между продавцом и покупателем. Оплата товара и его пересылка происходит без участия eBay. За использование платформы продавцы платят взнос, обычно складывающийся из сбора за выставление лота и процента от цены продажи. Для покупателей использование eBay бесплатно.
Так как прибыль eBay напрямую зависит от объёмов продаж, совершённых с помощью этой платформы, на ней действуют достаточно либеральные условия. К продаже разрешены любые товары и услуги, не нарушающие законодательства той страны, в которой зарегистрирован соответствующий филиал eBay и не внесённые в чёрный список eBay.
На рисунке 2.1 показан внешний вид сайта ebay.com.
Рис. 2.1 - Внешний вид сайта ebay.com
Причины эффективности бизнес-модели. Отсутствие географических барьеров -- продавцы и покупатели могут участвовать в торгах на eBay из любой точки мира, достаточно иметь доступ к сети Интернет. Это увеличивает число продавцов/выставляемых лотов и количество покупателей/сделанных ставок.
Отсутствие языковых барьеров -- участие в аукционной торговле возможно на различных языках. Многие страны имеют собственные, локальные филиалы аукциона, например Великобритания, Германия, Нидерланды, Испания, Австралия и этот список может быть продолжен.
Отсутствие временных рамок -- ставки на товары на eBay можно делать 24 часа в сутки, 7 дней в неделю. Лоты, в свою очередь, могут быть выставлены на период до 30 дней -- достаточный период для поиска, ознакомления и покупки.
Большое количество покупателей -- посетители аукционов привлечены огромным ассортиментом разнообразных товаров, выставляемых по относительно низким ценам. Так же здесь можно найти редкие, коллекционные вещи, которые практически невозможно купить оффлайн.
Большое количество продавцов -- низкие затраты на размещение товаров, огромная покупательская аудитория, простота использования сервисов аукциона eBay также привлекательны для продавцов. Более того, продавцом может стать каждый участник.
Мультипликационный эффект модели -- рост количества покупателей приводит к росту числа продавцов, рост числа продавцов стимулирует рост количества покупателей. Что и гарантирует развитие eBay.com во всём мире.
Аукцион ООО «БелАукцион-Групп». Компания, предоставляющая комплексные услуги по организации и проведению аукционных интернет-торгов в сфере реализации транспортных средств и их запчастей на территории Республики Беларусь.
На рисунке 1.2 показан внешний вид сайта ООО «БелАукцион-Групп»
Рис. 2.2 - Главная страница сайта ООО «БелАукцион-Групп»
Развитие бизнеса в направлении:
создающем здоровую и честную потребительскую конкуренцию на рынке транспортных средств Республики Беларусь;
обеспечивающем максимально комфортные и выгодные условия реализации сделок для наших партнёров и клиентов.
Преимущества данного аукциона:
Широкое ассортиментное предложение. Еженедельно выставляются новые Лоты - автомобили, мотоциклы и прочие транспортные средства, аварийные, конфискованные и другие.
Собственная автомобильная площадка «showroom». Все транспортные средства, выставленные на торги, представляются на выставочной базе компании для ознакомления и осмотра.
Развитая служба эвакуации транспортных средств. Компания предоставляет услуги по оперативной эвакуации транспортных средств любого вида.
Бесплатная доставка транспортных средств. Доставка любого транспортного средства от клиента до площадки компании осуществляется бесплатно.
Полный цикл «обслуживания сделки». Клиенты получают полную информационную и консультационную поддержку компании на этапе первого обращения в компанию, а также в процессе осуществления сделки - от момента ее заключения до момента ее окончания.
Профессиональная команда сотрудников. В штате имеются сотрудники с опытом работы в сфере автомобильной аукционной торговли в американских компаниях. Все сотрудники компании получают системное тренинговое обучение и проходят регулярную аттестацию.
Прозрачные сделки. Все совершаемые компанией сделки лежат в правовом поле белорусского законодательства и имеют официальное документальное оформление.
Услуги по приобретению транспортных средств с аукционов США и Европы. Компания предоставляет дополнительные услуги по приобретению и доставке любого транспортного средства, а также запчастей к нему с любого аукциона США и Европы на территорию Республики Беларусь.
Аукцион ООО «БелАвтоЛот». Специализированная организация по проведению торгов (аукционов) по продаже аварийных и целых транспортных средств, а также запчастей и годных остатков транспортных средств.
Преимущества рассматриваемого аукциона:
продажу автомобиля по оптимальным рыночным ценам;
бесплатную эвакуацию транспортного средства по г. Минску к нам на площадку с прохождением процедуры сверки в ГАИ.
исключение случаев обмана и махинаций при продаже авто;
объективность в ходе продажи транспортного средства;
пакет официально заверенных документов о продаже автомобиля, в случаях возникновения спорных ситуаций (для страховых компаний, судебных инстанций или прочих официальных органов).
На рисунке 2.3 показан внешний вид сайта ООО «БелАвтоЛот»
Рис. 2.3 - Внешний вид сайта ООО «БелАвтоЛот»
Аукцион CarOutlet. CarOutlet является одной из ведущих онлайн-платформ в Европе для всех участников рынка подержанных легковых автомобилей и фургонов. Наша цель - сделать процесс продажи простым, безопасным и надежным для покупателей и продавцов. Максимально снизив риски для обеих сторон, мы гарантируем качество и надежность каждого продаваемого на аукционе автомобиля.
Преимущества рассматриваемого аукциона:
более 5000 авто еженедельно;
низкая комиссия;
прозрачное формирование цены;
все сервисные документы, история техобслуживания -- вы сами можете оценить качество авто на основе объективных данных;
качественные фотографии интерьера и экстерьера автомобиля;
доставка до вашего города.
На рисунке 2.4 показан внешний вид сайта caroutlet.eu
Рис. 2.4 - Внешний вид аукциона caroutlet.eu
Аукцион WOLMAR. «Волмар» - лучший аукцион монет в России.
Преимущества аукциона «Волмар»:
Безопасность. За сохранность лота, который выставил нумизмат, аукцион монет несет полную материальную ответственность.
Выгодность. Крупнейшие аукционы монет онлайн предоставляют доступ к сотням тысяч заинтересованных покупателей и продавцов. Участник получает выход на самых материально обеспеченных коллекционеров со всего мира. Посетив такой аукцион нумизматов, продать монеты можно по максимально возможной рыночной стоимости. Аналогичная ситуация с приобретением лотов. Из-за огромного количества выставляемых на онлайн аукционы монет, скупка осуществляется по цене, регулируемой рыночными механизмами, а не пожеланиями конкретного человека.
Удобство. Выставив на нумизматический аукцион монеты, вам больше не нужно никуда ездить или звонить. Ходом торгов вы управляете, сидя в домашнем кресле. Для покупателей также созданы все условия. К каждому лоту прилагается не только основная характеристика конкретной монеты - стоимость, аукционы предоставляют исчерпывающую информацию о ее редкости и сохранности, удобную масштабируемую фотографию, а также подробные сведения о ходе торгов. Словом, здесь есть все необходимое для принятия верного решения.
На рисунке 2.5 показан внешний вид сайта wolmar.ru
Рис. 2.5 - Внешний вид сайта wolmar.ru
2.1 Функциональное моделирование веб-приложения
Для проектирования функциональности веб-приложения задействуем диаграмму Use Case языка UML. Диаграмма Use Case определяет поведение системы с точки зрения пользователя. Диаграмма Use Case рассматривается как главное средство для первичного моделирования динамики системы, используется для выяснения требований к разрабатываемой системе, фиксации этих требований в форме, которая позволит проводить дальнейшую разработку. В русской литературе диаграммы Use Case часто называют диаграммами прецедентов, или диаграммами вариантов использования.
В состав диаграмм Use Case входят элементы Use Case, актеры, а также отношения зависимости, обобщения и ассоциации. Как и другие диаграммы, диаграммы Use Case могут включать примечания и ограничения. Кроме того, диаграммы Use Case могут содержать пакеты, используемые для группировки элементов модели в крупные фрагменты.
Актеры и элементы Use Case. Вершинами в диаграмме Use Case являются актеры и элементы Use Case. Их обозначения показаны на рис. 2.6.
Актеры представляют внешний мир, нуждающийся в работе системы. Элементы Use Case представляют действия, выполняемые системой в интересах актеров.
Рис. 2.6 - Обозначения актера и элемента Use Case
Актер -- это роль объекта вне системы, который прямо взаимодействует с ее частью -- конкретным элементом (элементом Use Case). Различают актеров и пользователей. Пользователь -- это физический объект, который использует систему. Он может играть несколько ролей и поэтому может моделироваться несколькими актерами. Справедливо и обратное -- актером могут быть разные пользователи.
Например, для коммерческого летательного аппарата можно выделить двух актеров: пилота и кассира. Сидоров -- пользователь, который иногда действует как пилот, а иногда -- как кассир. Как изображено на рис. 2.7, в зависимости от роли Сидоров взаимодействует с разными элементами Use Case.
Рис. 2.7 - Модель Use Case
Элемент Use Case -- это описание последовательности действий (или нескольких последовательностей), которые выполняются системой и производят для отдельного актера видимый результат.
Один актер может использовать несколько элементов Use Case, и наоборот, один элемент Use Case может иметь несколько актеров, использующих его. Каждый элемент Use Case задает определенный путь использования системы. Набор всех элементов Use Case определяет полные функциональные возможности системы.
Отношения в диаграммах Use Case. Между актером и элементом Use Case возможен только один вид отношения -- ассоциация, отображающая их взаимодействие (рис. 2.8). Как и любая другая ассоциация, она может быть помечена именем, ролями, мощностью.
Рис. 2.8 - Отношение ассоциации
Между актерами допустимо отношение обобщения (рис. 2.9), означающее, что экземпляр потомка может взаимодействовать с такими же разновидностями экземпляров элементов Use Case, что и экземпляр родителя.
Рис. 2.9 - Отношение обобщения между актерами
Между элементами Use Case определены отношение обобщения и две разновидности отношения зависимости -- включения и расширения.
Отношение обобщения (рис. 2.10) фиксирует, что потомок наследует поведение родителя. Кроме того, потомок может дополнить или переопределить поведение родителя. Элемент Use Case, являющийся потомком, может замещать элемент Use Case, являющийся родителем, в любом месте диаграммы.
Рис. 2.10 - Отношение обобщения между элементами Use Case
Отношение включения (рис. 2.11) между элементами Use Case означает, что базовый элемент Use Case явно включает поведение другого элемента Use Case в точке, которая определена в базе. Включаемый элемент Use Case никогда не используется самостоятельно -- его конкретизация может быть только частью другого, большего элемента Use Case. Отношение включения является примером отношения делегации. При этом в отдельное место (включаемый элемент Use Case) помещается определенный набор обязанностей системы. Далее остальные части системы могут агрегировать в себя эти обязанности (при необходимости).
Рис. 2.11 - Отношение включения между элементами Use Case
Перейдем к построению модели Use Case для веб-приложения аукциона. Выделим следущих актеров - Администратор, Модератор, Редактор, Пользователь. Система имеет проверку роли пользователя при входе, эти права определяют. У Администратора будут максимальные права в системе, включая регистрацию пользователей и работу с категориями и лотами. Модератор имеет возможность работать с категориями и лотами аукциона, в том числе удаление данных сущностей. Редактор может только редактировать и создавать категории и лоты. Пользователь имеет права только создавать лоты и проводить аукцион собственно.
Для всех элементов Use Case и актеров используем связь использования, никакие стереотипы использовать не будем. Будем считать, что все связи имеют направление от актера к элементу Use Case и на модели это приводить не будем. Для построения всех моделей, в том числе и модели Use Case, будем использовать CASE-средство Enterprise Architect. Построенная модель функциональности приведена на рисунке 2.12.
Рис. 2.12 - Модель функциональности веб-приложения
2.3 Поведенческое моделирование веб-приложения
В данном подразделе рассмотрим вопросы моделирования поведения системы интернет-аукциона. Для моделирования системы возьмем язык UML, в котором для моделирования поведения системы используют:
автоматы;
взаимодействия.
Автомат (State machine) описывает поведение в терминах последовательности состояний, через которые проходит объект в течение своей жизни. Взаимодействие (Interaction) описывает поведение в терминах обмена сообщениями между объектами.
Таким образом, автомат задает поведение системы как цельной, единой сущности; моделирует жизненный цикл единого объекта. В силу этого автоматный подход удобно применять для формализации динамики отдельного трудного для понимания блока системы.
Взаимодействия определяют поведение системы в виде коммуникаций между его частями (объектами), представляя систему как сообщество совместно работающих объектов. Именно поэтому взаимодействия считают основным аппаратом для фиксации полной динамики системы.
Автоматы отображают с помощью:
диаграмм схем состояний;
диаграмм деятельности.
Взаимодействия отображают с помощью:
диаграмм сотрудничества (кооперации);
диаграмм последовательности.
В нашем случае для моделирования поведения веб-приложения возьмем диаграмму активности. Практически диаграмма активности представляет собой сценарий выполнения пользователем того или иного действия в системе.
Рис. 2.13 - Сценарий работа в системе Администратора
Возьмем многовариантный сценарий работы в системе Администратора. Центральными атомарными состояниями действия выделим Вход, Создание нового пользователя, Сохранение нового пользователя, Редактирование и Блокировка пользователя. Результат построения модели поведения в Enterprise Architect приведен на рисунке 2.13.
Рассмотрим другие сценарии поведения пльзователей системы. Рассмотрим поведение пользователя с ролью Редактор с случае работы с подсистемой Категории. На рисунке 2.14 приведена построенная диаграмма деятельности в Enterprise Architect. Выделим состояния действия Просмотр категорий, Создание новой категории, Сохранение новой категории и Выход. Все состояния действия соединим между собой потоком управления. В диаграмме использованы элементы UML слияние (merge) и решение (decision).
Рис. 2.14 - Сценарий работы с подсистемой Категории роли Редактора
Перейдем к рассмотрению поведения системы в случае работы пользователя с ролью Пользователь. Он имеет наименьшие права безопасности в данном веб-приложении. Приведем сценарий работы пользователя работы с подсистемой Лоты, построенная в Enterprise Architect диаграмма приведена на рисунке 2.15. В данном случае выделим такие состояния действия (aсtivity), как: Создание лота, Редактирование лота, Просмотр лота, Создание аукциона, Выставление цены на лот аукциона. В данной поведеческой модели для отражения поведения используются элементы слияние (merge) и решение (decision), все элементы UML-модели соединены потоком управления.
В качестве начала диаграммы используется стандартный элемент Начало (Initial) и Окончание (Final). Данные элементы являются стандартными для данного типа диаграмм.
Активность вход в систему является стндартным элементом всех модлей деятельности данного веб-приложения, так как все пользователи проходят процедуру авторизации. Исходя из логина уже в свою очередь определяется роль данного пользователя.
Рис. 2.15 - Сценарий работы с подсистемой Лоты пользователя с ролью Пользователь
2.4 Моделирование базы данных веб-приложения «Интернет-аукцион»
Рассотрим вопрос моделирования базы данных веб-приложения. По распространенной концепции моделирования баз данных выделят логическое и физическое моделирование базы данных. Эти два уровня полностью охватывает подход SADT и реализуется это ER-диаграммами. Ранее стандартом в мире разработки баз данных являлось CASE-средство Erwin. Однако с появлением языка UML моделирования баз данных было встроено во все CASE-средства, использующиеся для разработки промышленных баз данных.
Для данной разработки мы воспользуемся встроенным визуальным дизайнером phpMyAdmin для структурирования базы данных веб-приложения. Фактически это моделирование физической структуры базы данных, впоследствии сгенерируем скрипт базы данных. После определения набора наобходимых таблиц и визуализации структуры посредством визуального дизайнера получен седущий результат, приведенный на рисунке 2.16.
Рис. 2.16 - Структура базы данных
Центральными таблицами базы данных являются таблицы Пользователи, Лоты и Категории. В данном контексте это будут таблицы Users, Lots и Categories. Остальные таблицы являются вспомогательными. Ввиду простоты базы данных не используется механизмы внешних ключей в таблицах, реализация только на уровне программного кода приложения. Во всех таблицах присутствуют уникальные индексы. Типизация полей приведена на рисунке 2.16. На основе данной визуальной структуры мы получаем следующий скрипт базы данных уже на языке SQL.
--SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;
--
-- Database: `auction`
--
-- --------------------------------------------------------
--
-- Table structure for table `categories`
--
CREATE TABLE IF NOT EXISTS `categories` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`name` varchar(255) NOT NULL,
`parent` int(10) unsigned NOT NULL,
`level` int(10) unsigned NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=10 ;
-- --------------------------------------------------------
--
-- Table structure for table `catextra`
--
CREATE TABLE IF NOT EXISTS `catextra` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`cat` int(10) unsigned NOT NULL,
`name` varchar(64) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;
-- --------------------------------------------------------
--
-- Table structure for table `lotextra`
--
CREATE TABLE IF NOT EXISTS `lotextra` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`lot` int(10) unsigned NOT NULL,
`catextra` int(10) unsigned NOT NULL,
`value` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;
-- --------------------------------------------------------
--
-- Table structure for table `lots`
--
CREATE TABLE IF NOT EXISTS `lots` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`organizer` int(10) unsigned NOT NULL,
`name` varchar(255) NOT NULL,
`category` int(10) unsigned NOT NULL,
`images` varchar(255) NOT NULL,
`description` text NOT NULL,
`lottype` varchar(40) NOT NULL,
`auctiontype` varchar(40) NOT NULL,
`cost` float NOT NULL,
`step` float NOT NULL,
`startdate` int(16) unsigned NOT NULL,
`enddate` int(16) unsigned NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=9 ;
--
-- Table structure for table `messages`
--
CREATE TABLE IF NOT EXISTS `messages` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`user1` int(10) unsigned NOT NULL,
`user2` int(10) unsigned NOT NULL,
`date` int(16) unsigned NOT NULL,
`lot` int(10) unsigned NOT NULL,
`text` text NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;
-- --------------------------------------------------------
--
-- Table structure for table `order`
--
CREATE TABLE IF NOT EXISTS `order` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`lot` int(10) unsigned NOT NULL,
`cost` float NOT NULL,
`stages` int(10) unsigned NOT NULL,
`winner` int(10) unsigned NOT NULL,
`completed` tinyint(3) unsigned NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=3 ;
--
-- Table structure for table `orderstages`
--
CREATE TABLE IF NOT EXISTS `orderstages` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`order` int(10) unsigned NOT NULL,
`cost` float NOT NULL,
`completed` tinyint(3) unsigned NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;
-- --------------------------------------------------------
--
-- Table structure for table `panel`
--
CREATE TABLE IF NOT EXISTS `panel` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`lot` int(10) unsigned NOT NULL,
`user` int(10) unsigned NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;
-- --------------------------------------------------------
--
-- Table structure for table `regions`
--
CREATE TABLE IF NOT EXISTS `regions` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`name` varchar(255) NOT NULL,
`parent` int(10) unsigned NOT NULL,
`level` int(10) unsigned NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;
-- --------------------------------------------------------
--
-- Table structure for table `users`
--
CREATE TABLE IF NOT EXISTS `users` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`login` varchar(40) NOT NULL,
`password` varchar(40) NOT NULL,
`email` varchar(64) NOT NULL,
`firstname` varchar(64) NOT NULL,
`lastname` varchar(64) NOT NULL,
`patronymic` varchar(64) NOT NULL,
`rights` varchar(40) NOT NULL,
`activated` tinyint(3) unsigned NOT NULL,
`regdate` int(16) unsigned NOT NULL,
`token` varchar(40) NOT NULL,
`blocked` tinyint(3) unsigned NOT NULL,
`blockend` int(16) unsigned NOT NULL,
`reserved` int(10) unsigned NOT NULL,
PRIMARY KEY (`id`),
UNIQUE KEY `email` (`email`),
UNIQUE KEY `login` (`login`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=8 ;
--
-- Table structure for table `ventures`
--
CREATE TABLE IF NOT EXISTS `ventures` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`lot` int(10) unsigned NOT NULL,
`user` int(10) unsigned NOT NULL,
`cost` float NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=6 ;
--
-- Dumping data for table `ventures`
--
INSERT INTO `ventures` (`id`, `lot`, `user`, `cost`) VALUES
(2, 6, 1, 1100000),
(3, 8, 2, 1200000),
(4, 5, 2, 570000),
(5, 3, 2, 540000);
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
Выводы. В разделе 2 дано понятие интернет-аукциона, рассмотрены преимущества интернет-аукциона, универсальный интернет-аукцион eBay, интернет-аукцион целых и аварийных автомобилей, и их запчастей, интернет-аукцион автомобилей, целых частей автомобилей и их запчастей ООО «БелАвтоЛот», интернет-аукцион по продаже подержанных автомобилей и фургонов CarOutlet, интернет-аукцион по продаже монет «Волмар». Также с помощью языка UML построена модель требований к веб-приложению интернет-аукциона, выделен функционал и пользователи системы, построены поведеческие модели системы на языке UML. Также было проведено моделирование базы данных веб-приложения.
3. Разработка клиент-серверного веб-приложения «Интернет-аукцион»
3.1 Диаграмма компонентов
В данном разделе рассмотрим вопросы реализации программной системы «Интернет-аукцион». Для описания реализации системы задействуем диаграммы реализации - компонентную и размещения языка UML. В конце данного раздела приведем интерфейс веб-приложения. Все листинги модулей приведены в приложениях.
Компонентная диаграмма -- первая из двух разновидностей диаграмм реализации, моделирующих физические аспекты объектно-ориентированных систем. Компонентная диаграмма показывает организацию набора компонентов и зависимости между компонентами.
Элементами компонентных диаграмм являются компоненты и интерфейсы, а также отношения зависимости и реализации. Как и другие диаграммы, компонентные диаграммы могут включать примечания и ограничения. Кроме того, компонентные диаграммы могут содержать пакеты или подсистемы, используемые для группировки элементов модели в крупные фрагменты.
Компоненты. По своей сути компонент является физическим фрагментом реализации системы, который заключает в себе программный код (исходный, двоичный, исполняемый), сценарные описания или наборы команд операционной системы (имеются в виду командные файлы). Язык UML дает следующее определение.
Компонент -- физическая и заменяемая часть системы, которая соответствует набору интерфейсов и обеспечивает реализацию этого набора интерфейсов.
Интерфейс -- очень важная часть понятия «компонент», его мы обсудим в следующем подразделе. Графически компонент изображается как прямоугольник с вкладками, обычно включающий имя (рис. 5.1).
Рис. 3.1 - Обозначение компонента
Компонент -- базисный строительный блок физического представления ПО, поэтому интересно сравнить его с базисным строительным блоком логического представления ПО -- классом.
Сходные характеристики компонента и класса:
наличие имени;
реализация набора интерфейсов;
участие в отношениях зависимости;
возможность быть вложенным;
наличие экземпляров (экземпляры компонентов можно использовать только в диаграммах размещения).
Интерфейсы. Интерфейс -- список операций, которые определяют услуги класса или компонента. Образно говоря, интерфейс -- это разъем, который торчит из ящичка компонента. С помощью интерфейсных разъемов компоненты стыкуются друг с другом, объединяясь в систему.
Еще одна аналогия. Интерфейс подобен абстрактному классу, у которого отсутствуют свойства и работающие операции, а есть только абстрактные операции (не имеющие тел). Если хотите, интерфейс похож на улыбку чеширского кота из правдивой истории об Алисе, где кот отдельно и улыбка отдельно. Все операции интерфейса открыты и видимы клиенту (в противном случае они потеряли бы всякий смысл). Итак, операции интерфейса только именуют предлагаемые услуги, не более того.
Очень важна взаимосвязь между компонентом и интерфейсом. Возможны два способа отображения взаимосвязи между компонентом и его интерфейсами. В первом, свернутом способе, как показано на рис. 5.3, интерфейс изображается в форме пиктограммы. Компонент Образ.java, который реализует интерфейс, соединяется со значком интерфейса (кружком) НаблюдательОбраза простой линией. Компонент РыцарьПечальногоОбраза.jауа, который использует интерфейс, связан с ним отношением зависимости.
Рис. 3.2 - Представление интерфейса в форме пиктограммы
Второй способ представления интерфейса иллюстрирует рис. 3.3. Здесь используется развернутая форма изображения интерфейса, в которой могут показываться его операции. Компонент, который реализует интерфейс, подключается к нему отношением реализации. Компонент, который получает доступ к услугам другого компонента через интерфейс, по-прежнему подключается к интерфейсу отношением зависимости.
Рис. 3.3 - Развернутая форма представления интерфейса
По способу связи компонента с интерфейсом различают:
экспортируемый интерфейс -- тот, который компонент реализует и предлагает как услугу клиентам;
импортируемый интерфейс -- тот, который компонент использует как услугу другого компонента.
У одного компонента может быть несколько экспортируемых и несколько импортируемых интерфейсов.
Тот факт, что между двумя компонентами всегда находится интерфейс, устраняет их прямую зависимость. Компонент, использующий интерфейс, будет функционировать правильно вне зависимости от того, какой компонент реализует этот интерфейс. Это очень важно и обеспечивает гибкую замену компонентов в интересах развития системы.
Построим компонентную диаграмму для клиент-серверного приложения «Интернет-аукцион». Из компонентов выделим две основные категории - скрипты, написанные на языках PHP и JavaScript, и файлы стилей CSS. Их будем помечать стереотипами script и CSS. Из категорий модулей исходного кода выделим три основные категории - модули работы с пользователями, с лотами и категориями лотов. Из связей в данной UML-модели используем заависимости между скриптами и файлами стилей, между главной страницей веб-приложения и страниц подсистем используем ассоциацию, так как эти файлы «знают о существовании друг друга». На рисунке3.4 приведена построенная компонентная диаграмма для веб-приложения «Интернет-аукцион».
Рис. 3.4 - Компонентная диаграмма для веб-приложения Интернет-аукцион
3.2 Диаграмма развертывания
Данный вид диаграмм в нотации UML моделирует размещение компонентов и артефактов системы на узлах и в контексте вычислительного окружения.
Выделим три узла вычислительных - веб- сервер, сервер базы данных и клиент, на котором размещен браузер. Диаграмму размещения построим в таких терминах, как устройства и компоненты. Компоненты и связи между ними сохраняются, очевидно, такие как и в диаграмме компонентов. На рисунке 3.5 приведена диаграмма развертывания веб-приложения «Интернет-аукцион».
Рис. 3.5 - Диаграмма развертывания веб-приложения
3.3 Интерфейс веб-приложения
В данном подразделе приведем интерфейс разработанного веб-приложения «Интернет-аукцион». Будем исходить из предположения, что систему использует Администратор и ставится задача задействовать весь функционал системы. На иллюстрациях будем приводит скриншоты интерфейса веб-приложения. Для написания инетерфейса использован востребованный фреймворк Bootstrap.
Главная страница приложения приведена на рисунке 3.6.
Рис. 3.6 - Главная страница веб-приложения
Далее, после успешного входа в систему Администратор попадает на страницу Личного кабинета, которая приведена на рисунке 3.7.
Рис. 3.7 - Внешний вид Личного кабинета веб-приложения
В Личном кабинете сосредоточен весь функционал веб-приложения. Из Личного кабинета Администратор может зайти в подсистему работы с пользователями, внешний вид которой приведен на рисунке 3.8.
Рисунок 3.8 - Подсистема работы с пользователями
В рамках данной подсистемы Администратор может создать нового пользователя. Внешний вид страницы создания нового пользователя приведен на рисунке 3.9.
Рис. 3.9 - Создание нового пользователя
Из списка пользователей Администратор может зайти также в редактирование существующего пользователя. Внешний вид страницы приведен на рисунке 3.10.
Рис. 3.10 - Редактирование существующего пользователя
Из Личного кабинета Администратор может воспользоваться функционалом работы с категориями. Страницы списка категорий и просмотра категории с лотами приведены на рисунках 3.11, 3.12.
Рис. 3.11 - Внешний вид страницы Просмотр категорий
Рисунок 3.11 - Внешний вид страницы Просмотр категории с лотами
Администратору из Личного кабинета доступна подсистема работы с лотами. В рамках данной подсистемы доступно создание и выставление лотов на аукцион. На рисунках 3.12, 3.13 приведены страницы списка лотов и просмотра лота.
Рис. 3.12 - Внешний вид страницы списка лотов
Рис. 3.13 - Страница просмотра отдельного лота
В данном подразделе мы рассмотрели интерфейс системы, типичный для веб-приложения. Сервер PHP не выдает ошибок ни на одной странице, следовательно, можно заключить, что приложение протестировано и функционирует согласно техническому заданию. Все исходные коды файлов стилей, скриптов и других файлов приведены в приложениях А, Б, В, Г.
Выводы. В данной главе были построены модели реализации веб-приложения аукциона. Был рассмотрен интерфейс пользователя, приведены веб-страницы фронтенда веб-аукциона.
ЗАКЛЮЧЕНИЕ
В данном дипломном проекте были рассмотрены инструментальные средства по созданию клиент-серверных веб-приложений.
Авторская часть диплома включает в себя разделы, посвященные проектированию и разработке веб-приложения «Интернет-аукцион». В разделах, посвященном проектированию и разработке веб-приложения, освещены вопросы логического проектирования будущего приложения, также вопросы разработки веб-приложения.
Дальнейшее развитие веб-приложения заключается в развитии дизайна, его адаптации под мобильные устройства, что является стандартом де-факто в настоящее время, различные дополнения существующего функционала для удобства пользования интернет-аукционом.
СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ
Сухов, К. HTML5 - путеводитель по технологии / К. Сухов. - М.: ДМК Пресс, 2013. - 352 с.: ил.
Дронов, В. А. HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов / В. А.Дронов. - СПб.: БХВ-Петербург, 2011. -- 416 с.: ил.
Чиртик, А.А. HTML. Популярный самоучитель / А.А. Чиртик. - СПб.: Питер, 2006. - 224с.: ил.
Мак-Дональд, М. HTML5. Недостающее руководство: Пер. с англ. / М. Мак-Дональд. - СПб.: БХВ-Петербург, 2012. - 480 с.: ил.
Петюшкин А. В. HTML. Экспресс-курс. -- СПб.: БХВ-Петербург, 2003. -- 256 с.: ил.
Дунаев, В. Сценарии для Web-сайта: PHP и JavaScript / В. Дунаев. - СПб.: БХВ-Петербург, 2008
Колисниченко, Д. Профессиональное программирование на PHP / Д. Колисниченко. - СПб.: BHV-Петербург, 2007
Кузнецов, М Объектно-ориентированное программирование на PHP / М. Кузнецов. - СПб.: BHV-Петербург, 2007
Колисниченко, Д. Профессиональное программирование на PHP / Д. Колисниченко. - СПб.: BHV-Петербург, 2007.
Кузнецов, М Объектно-ориентированное программирование на PHP / М. Кузнецов. - СПб.: BHV-Петербург, 2007
Дунаев, В. Самоучитель PHP / В. Дунаев. - СПб.: Питер, 2007
Дунаев, В. Сценарии для Web-сайта: PHP и JavaScript / В. Дунаев. - СПб.: БХВ-Петербург, 2008
Компания MySQL AB. MySQL. Руководство администратора.: Пер. с англ. - М.: Издательский дом "Вильяме", 2005. - 624 с.
Веллинг, Л. MySQL. Учебное пособие.: Пер. с англ. / Люк Веллинг, Лора Томсон. - М.: Изд. дом «Вильямс», 2005. - 304с.: ил.
Херман, Д. Сила JavaScript. 68 способов эффективного использования JS / Д. Херман. - СПб.: Питер, 2013. - 288 с.: ил.
Флэнаган, Д. JavaScript. Подробное руководство, 6-е изд. Пер. с англ. / Д. Флэнаган - СПб: Символ Плюс, 2012. - 1080 с.: ил.
Моррисон, М. Изучаем JavaScript / М. Моррисон. - СПб.: Питер, 2012. - 608 с.: ил.
Терри, К. Визуальное моделирование с помощью IBM® Rational® Software Architect и UML™ / К. Терри, Д. Палистрант. - М., 2007. - 192 c.
Орлов, С. А. Технологии разработки программного обеспечения : учебник / С. А. Орлов. - СПб., 2004. - 527 c.
Буч, Г. Язык UML. Руководство пользователя / Г. Буч, Д. Рамбо Д., А. Джекобсон. - М., 2000. - 432 c.
Соммервилл, И. Инженерия программного обеспечения / И. Соммервил. - М., 2002. - 624 c.
ПРИЛОЖЕНИЕ А
Файлы стилей приложения
iv.cpanel{
display: block;
float: left;
height: 20%;
width: 98%;
margin: 2% 1% 4% 4%;
}
div.icon{
text-align: center;
float: left;
width: 30%;
}
input.error{
border: red solid 1px;
}
div.block{
display: block;
width: 100%;
}
body{background-color: #D9E3FF;}
a{
font-size: 12pt;
font-weight: bolder;
color: black;
}
tr:hover{
color: black;
background-color: #FFEFD5;
}
a:hover{
color: red;
}
input[type="text"], input[type="password"], select{
margin: 2px 6px 4px 10px;
border: solid blue 1px;
border-radius: 4px;
/***** BASE CSS *****/
/* Site Name */
#divSiteTitle {text-decoration:none;}
#divTagLine {text-decoration:none;}
/* Headline Text */
#divHeaderLine1 {display:inline-block !important}
#divHeaderLine2 {display:inline-block !important}
#divHeaderLine3 {display:inline-block !important}
/* Headings */
h3, h4, h5, h6 {line-height:1.5 !important}
.lead {
text-align:center;
}
.lead h2 {
font-size:33px;line-height:45px;
}
.lead h3 {
font-size:17px;
}
.lead h3 a {
font-size:inherit !important;
}
/* Contact */
ul#contact-info .icon {font-size:20px;float:left;line-height:25px;margin-right:10px;}
ul#contact-info .field {font-weight:bold;}
ul#contact-info {list-style:none;}
/* Grid */
#tiles li {
width:240px !important;
background-color: #ffffff;
border: 1px solid #dedede;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
padding: 10px !important;
margin-right:7px;margin-bottom:7px;float:left;
}
#tiles li img {margin-bottom:10px;}
#tiles li div.meta {color:#999;text-transform:uppercase;font-size:10px;margin:0;}
#tiles li h4 {line-height:1.5;margin:0 0 5px 0;}
#tiles li h4 a {line-height:inherit;margin:0;text-decoration:inherit;color:inherit;font-size:inherit;font-family:inherit;font-weight:inherit;font-style:inherit;}
#tiles li p {font-size:12px;line-height:1.5;margin:0;}
#tiles li a {font-size:12px;}
#tiles li .more_link {font-size:smaller;line-height:2;text-transform:uppercase;letter-spacing:2px;white-space:nowrap;display:block;margin: 5px 0 0 0;}
#tiles li blockquote {line-height:1.5;margin:0;padding:0;color:#999;border:none;font-size:150%;font-style:italic;font-family:Georgia, Times, serif;}
#tiles li blockquote small {font-size:11px;font-style:normal;}
/* Icons */
[class*="social foundicon-"]:before {font-family: "SocialFoundicons";}
[class*="general foundicon-"]:before {font-family: "GeneralFoundicons";}
/* Menu Side */
.menu_menu_simple ul {margin-top:0px;margin-bottom:0px;}
.menu_menu_simple ul li {margin-top:0px;margin-bottom:0px;}
/* Header Area */
#decorative1 {
margin-top:-2px;padding-top:2px;
}
/* Menu Centered */
.centered_menu {text-align:center}
.centered_menu > div {display:inline-block;}
.centered_menu div {text-align:left}
/* Footer elements */
.social_bookmarks a {font-size:smaller !important;text-transform:uppercase;letter-spacing:1px;text-decoration:none;margin-right:20px;}
.copyright {font-size:smaller;letter-spacing:1px;}
/* Responsive Image */
img {max-width:100%;height:auto;width:auto;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
/* Responsive Video from Zurb Foundation. Copyright (c) 2011 ZURB, http://www.zurb.com/ License: MIT */
.flex-video {position:relative;padding-top:25px;padding-bottom:67.5%;height:0;margin-bottom:16px;overflow: hidden;}
.flex-video.widescreen {padding-bottom:57.25%;}
.flex-video.vimeo {padding-top:0;}
.flex-video iframe, .flex-video object, .flex-video embed {position:absolute;top:0;left:0;width:100%;height:100%;border:none;}
@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) {
.flex-video { padding-top: 0; }
}
/* Additional */
#divBoxed {position:relative}
.nav-links > a {margin-right:20px;}
.btn-secondary, .btn-secondary:hover {text-shadow:none;}
#divHeaderLine1 a, #divHeaderLine2 a, #divHeaderLine3 a {
font-size: inherit;
line-height: inherit;
letter-spacing: inherit;
Подобные документы
Факторы, влияющие на пропускную способность в беспроводных сетях. Использование скриптового языка программирования PHP для разработки базы данных интернет-магазина, его основные преимущества. Современные методы и средства тестирования web-приложений.
дипломная работа [3,5 M], добавлен 10.07.2015Разработка интернет-магазина для реального заказчика. Проведение анализа и выбор интернет-технологий для разработки интернет-магазина. Проектирование предметной области. Разработка динамических web-страниц интернет-магазина, управляемых базой данных.
дипломная работа [1,7 M], добавлен 08.06.2013Основы Web-программирования. Сервер баз данных MySQL. Язык сценариев PHP. Язык гипертекстовой разметки HTML. Назначение и цели разработки сайта. Форма входа и регистрации, обратная связь интернет–магазина. Требования к структуре сайта, описание контента.
курсовая работа [754,5 K], добавлен 02.06.2014Обоснование выбора языка программирования для создания интернет магазина. Построение виртуальных страниц. Определение затрат на создание Web-сайта. Расчет трудоемкости создания программного продукта. Использование HTML как языка разметки гипертекста.
дипломная работа [1,2 M], добавлен 28.05.2016Определение назначения системы и обозначение целей создания Web-приложения интернет-магазина по продаже компьютерной техники. Описание страниц сайта и логической структуры приложения. Тестирование, применение приложения и затраты на его разработку.
дипломная работа [2,6 M], добавлен 10.06.2014HTML5 — язык для структурирования и представления содержимого для всемирной паутины, а также основная технология, используемая в Интернете. Создание web-приложения и использованием технологии Asp.net MVC 3 и языка web-разметки HTML5. Состав платформы MVC.
курсовая работа [1,2 M], добавлен 25.05.2012Сущность языков разметки и этапы проектирования. Общая характеристика бесплатных приложений для работы с кодом в текстовом формате. Особенности визуальных редакторов и суть платных приложений. Стандартные средства разработки для Unix систем и их замена.
курсовая работа [49,6 K], добавлен 04.06.2013Стандартный язык разметки HTML позволяет легко и быстро создавать Web-страницы, передаваемые по сети Интернет. Языки сценариев. Создание и размещение собственных WEB-страниц. Процесс пересылки информации из одной части мира в другую. Принцип работы Сети.
реферат [316,6 K], добавлен 15.04.2009Задачи, которые решают интернет-ресурсы. Классификация интернет-рекламы. Обзор существующих Web-технологий. Язык разработки сценариев PHP. Технология построения интерактивных документов DHTML. Средства и технологии для разработки интернет-ресурса.
дипломная работа [1,5 M], добавлен 22.11.2015Предпосылки создания сети Интернет. Характеристика наиболее распространенных протоколов: TCP/IP, HTTP, POP3. История создания системы извлечения информации Gopher. Разработка языков разметки HTML, XML, PHP/FI и XHTML, их версии и сферы применения.
курсовая работа [596,5 K], добавлен 02.04.2013
