Разработка интерактивного Web-сайта "Медицинский центр"

Разработка дизайна web-страниц, создание навигационной панели, подключение каскадных таблиц стилей. Использование Javascript для создания интерактивной составляющей. Вывод информации из xml-файла. Алгоритм регистрации и авторизации пользователя на сайте.

Рубрика Программирование, компьютеры и кибернетика
Вид отчет по практике
Язык русский
Дата добавления 27.05.2016
Размер файла 618,2 K

Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже

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

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

Министерство образования и науки Российской Федерации

Федеральное государственное автономное образовательное учреждение

высшего образования

"Санкт-Петербургский государственный университет аэрокосмического приборостроения"

Факультет среднего профессионального образования

ОТЧЕТ ПО ПРАКТИКЕ

по Web-программированию ФСПО.УП 0302.324ПР

Разработка интерактивного Web-сайта "Медицинский центр"

Выполнил студент гр. С 324

Д.Д. Варникова

Санкт-Петербург 2016

Индивидуальное задание

на период практики по Web-программированию

Группа 324 Специальность 09.02.03

Студентке Варниковой Дарье Дмитриевне

Тема задания: Разработка интерактивного Web-сайта "Медицинский центр"

Вопросы, подлежащие изучению

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

2. Структура сайта

3. Mockup главной страницы

4. Разработка дизайна web-страниц

5. Создание навигационной панели

6. Подключение каскадных таблиц стилей

7. Вывод информации из XML-файла

8. Использование JAVAScript для создания интерактивной составляющей

Указания по выполнению задания

Отчет о выполнении индивидуального задания оформляется на листах формата А 4 в соответствии с требованиями ЕСТД и ЕСТПП университета.

Схемы выполняются карандашом или на ПК, в соответствии с ЕСПД, и даются в приложении к отчету.

Руководитель практики

От факультета Густова Т.А.

Опалева У.С.

"28" марта 2016 г.

Содержание

    • 1. Постановка задачи
    • 2. Структура сайта
    • 3. Mockup главной страницы
    • 4. Разработка дизайна web-страниц
    • 5. Создание навигационной панели
    • 6. Подключение каскадных таблиц стилей
    • 7. Вывод информации из xml-файла
    • 8. Использование Javascript для создания интерактивной составляющей
    • Список использованных источников
    • Приложение A. Листинг кода html
    • Приложение Б. Листинг кода css
    • Приложение В. Листинг кода js
    • Приложение Г. Листинг кода xml

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

Выполнить создание связных интерактивных web-страниц (главная, каталог, корзина, анкета, контакты) сайта медицинского центра с помощью языка разметки HTML, расширенной разметки XML, стилевого оформления CSS (блочная вёрстка), скриптовых языков программирования JavaScript, PHP.

Содержание сайта с описанием функциональных возможностей:

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

Каталог - перечень услуг фирмы с наименованием, ценой и кнопкой "Купить". Данные каталога загружаются из XML-файла.

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

Анкета (регистрация) - текстовые поля для ввода фамилии, имени, пароля, почты, переключатели для выбора пола, кнопка для передачи данных.

Контакты - контактная информация (адрес, телефон, часы работы), карта проезда.

2. Структура сайта

Структура сайта в виде блок-схемы (Рисунок 1)

Рисунок 1 - Структура сайта в виде блок-схемы

3. Mockup главной страницы

Макет сайта (Рисунок 2) был выполнен в графическом редакторе Adobe Photoshop CC 2015.

Рисунок 2 - Mockup главной страницы

4. Разработка дизайна web-страниц

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

Способ верстки - блочная с использованием CSS.

Дизайн страницы сайта выглядит в соответствии с Рисунок 3,Рисунок 4, Рисунок 5

Рисунок 3 - Дизайн страницы контактов

Рисунок 4 - Дизайн заполненной корзины

Рисунок 5 - Дизайн формы регистрации

5. Создание навигационной панели

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

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

Также на навигационной панели находится логотип, который является ссылкой на главную страницу.

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

Для разметки был использован элемент список.

Вид навигационной панели представлен на рисунке Рисунок 6

Рисунок 6 - Вид навигационной панели

6. Подключение каскадных таблиц стилей

Каскадные таблицы стилей находятся в отдельном файле, подключение к странице сайта осуществляется посредством размещения в <head> … </head> html-документа тэга <link href="styles.css" rel="stylesheet" type="text/css" />

7. Вывод информации из xml-файла

Вывод информации в каталог из xml-файла осуществляется посредством размещения в html-документе тэга <object id="purchase-order" data="spisok.xml" type="text/xml" style="display: none;"> </object> и последующей обработкой xml-содержимого данного тэга с помощью javascript.

Страница каталога изображена на рисунке Рисунок 7

Рисунок 7 - Информация каталога, выведенная из xml-файла

8. Использование Javascript для создания интерактивной составляющей

дизайн навигационный javascript авторизация

Javascript использован для создания счетчика посещений сайта, а также для добавления услуг в корзину через local storage. Результаты работы скрипта счетчика представляет Рисунок 2. Результаты работы скрипта корзины - Рисунок 7, Рисунок 4.

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

1. Голдстайн, Алексис HTML5 и CSS3 для всех / Алексис Голдстайн, Луис Лазарис, Эстель Уэйл. - М.: Эксмо, 2012. - 368 c.

2. Джереми, Кит HTML5 для веб-дизайнеров / Кит Джереми. - М.: Манн, Иванов и Фербер, 2012. - 581 c.

3. Дунаев, В.В. HTML, скрипты и стили / В.В. Дунаев. - М.: БХВ-Петербург, 2011. - 816 c.

4. Прохоренок, Н. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера / Н. Прохоренок. - М.: БХВ-Петербург, 2010. - 912 c.

5. Ташков, Петр Веб-мастеринг HTML, CSS, JavaScript, PHP, CMS, AJAX, раскрутка / Петр Ташков. - М.: Книга по Требованию, 2010. - 512 c.

Приложение A. Листинг кода html

index.html:

<!DOCTYPE html lang="ru">

<html >

<head>

<title>Доктор плюс</title>

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

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

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

<object id="purchase-order" data="spisok.xml" type="text/xml" style="display: none;"></object>

</head>

<body onload="st()">

<header>

<a href="index.html">

<img src="images/логотип.png" alt="альтернативный текст">

</a>

<nav class="navbar1">

<ul>

<li><a href="#">О НАС</a></li>

<li><a href="#">АКЦИИ</a></li>

<li><a href="#">ОТЗЫВЫ</a></li>

<li><a href="kon.html">КОНТАКТЫ</a></li>

</ul>

</nav>

<div class="lk">

<a class="kor" href="kor.html" >

<div class="st" id="koo"> 0</div>

</a>

<div class="vxod"> <a href="reg.html"> Регистрация</a> | Вход </div>

</div>

</ul>

</header>

<nav class="navbar2">

<ul>

<li><a href="#" onclick="run1('endo')">ЭНДОКРИНОЛОГИЯ</a></li>

<li><a href="#" onclick="run1('gastro')">ГАСТРОЭНТЕРОЛОГИЯ</a></li>

<li><a href="#" onclick="run1('nevro')">НЕВРОЛОГИЯ</a></li>

<li><a href="#" onclick="run1('ofto')">ОФТАЛЬМОЛОГИЯ</a></li>

<li><a href="#" onclick="run1('kosmet')">КОСМЕТОЛОГИЯ</a></li>

<li><a href="#" onclick="run1('diag')">АНАЛИЗЫ</a></li>

</ul>

</nav>

<span class="kat" id='zag' >

<aside class="slider"> <img src="images/2.jpg" alt="альтернативный текст"> </aside >

</span>

<hr>

<section id="sec">

<section>

<article > <span>О КЛИНИКЕ</span> <br>

Группа специализированных клиник работает с 1999 года. "Альтермед" является лидером в области лечения интимных проблем. Сервис на высочайшем уровне всегда являлся нашей визитной карточкой. Гинекология, урология, дерматология, проктология, косметология - все эти отделения есть в каждой из клиник группы "Альтермед". <br> <a href="#">Подробнее</a> <hr> </article >

</section >

</section >

<footer>

<div id="counter1"> Посещений сайта:</div>

<div id="copyright"> Сайт сделан студией "Главная страница"</div>

</footer>

<!-- End Save for Web Slices -->

</body>

</html>

kon.html

<!DOCTYPE html lang="ru">

<html >

<head>

<title>Доктор плюс</title>

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

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

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

<object id="purchase-order" data="spisok.xml" type="text/xml" style="display: none;"></object>

</head>

<body onload="st()">

<header>

<a href="index.html">

<img src="images/логотип.png" alt="альтернативный текст">

</a>

<nav class="navbar1">

<ul>

<li><a href="#">О НАС</a></li>

<li><a href="#">АКЦИИ</a></li>

<li><a href="#">ОТЗЫВЫ</a></li>

<li><a href="kon.html">КОНТАКТЫ</a></li>

</ul>

</nav>

<div class="lk">

<a class="kor" href="kor.html" >

<div class="st" id="koo"> 0</div>

</a>

<div class="vxod"> <a href="reg.html"> Регистрация</a> | Вход </div>

</div>

</ul>

</header>

<nav class="navbar2">

<ul>

<li><a href="#" onclick="run1('endo')">ЭНДОКРИНОЛОГИЯ</a></li>

<li><a href="#" onclick="run1('gastro')">ГАСТРОЭНТЕРОЛОГИЯ</a></li>

<li><a href="#" onclick="run1('nevro')">НЕВРОЛОГИЯ</a></li>

<li><a href="#" onclick="run1('ofto')">ОФТАЛЬМОЛОГИЯ</a></li>

<li><a href="#" onclick="run1('kosmet')">КОСМЕТОЛОГИЯ</a></li>

<li><a href="#" onclick="run1('diag')">АНАЛИЗЫ</a></li>

</ul>

</nav>

<span class="kat" id='zag' >

<article > <span>КОНТАКТЫ</span> <br> <pre>

Клиника расположена по адресу расположена по адресу:

г. Санкт-Петербург, проспект Пятилеток, д. 6, корп. 1. у метро "Пр. Большевиков"

Часы работы Клиники:

Пн--пт: с 09:00 до 21:00

Сб, вс: с 10:00 до 20:00 или до последнего клиента.

Часы работы call-центра:

Пн--пт: с 08:00 до 22:00

Сб, вс: с 09:00 до 20:00

Телефон: 8 812 468-88-88 </pre><hr> </article >

</span>

<hr>

<section id="sec">

<aside class="slider"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1999.7492553668915!2d30.473299315726262!3d59.91970867058808!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46962e6d265782d3%3A0xf0f301e22b2859!2z0YPQuy4g0JrQvtC70LvQvtC90YLQsNC5LCAyNdC6MSwg0KHQsNC90LrRgi3Qn9C10YLQtdGA0LHRg9GA0LMsIDE5MzIzMQ!5e0!3m2!1sru!2sru!4v1460082112189" width="800" height="600" frameborder="0" style="border:0" allowfullscreen></iframe> </aside >

</section >

<footer>

<div id="counter1"> Посещений сайта:</div>

<div id="copyright"> Сайт сделан студией "Главная страница"</div>

</footer>

<!-- End Save for Web Slices -->

</body>

</html>

kor.html

<!DOCTYPE html lang="ru">

<html >

<head>

<title>Доктор плюс</title>

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

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

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

<object id="purchase-order" data="spisok.xml" type="text/xml" style="display: none;"></object>

</head>

<body onload="ob()">

<header>

<a href="index.html">

<img src="images/логотип.png" alt="альтернативный текст">

</a>

<nav class="navbar1">

<ul>

<li><a href="#">О НАС</a></li>

<li><a href="#">АКЦИИ</a></li>

<li><a href="#">ОТЗЫВЫ</a></li>

<li><a href="kon.html">КОНТАКТЫ</a></li>

</ul>

</nav>

<div class="lk">

<a class="kor" href="kor.html" onclick="iz()">

<div class="st" id="koo"> 0</div>

</a>

<div class="vxod"><a href="reg.html"> Регистрация</a> | Вход </div>

</div>

</ul>

</header>

<nav class="navbar2">

<ul>

<li><a href="#" onclick="run1('endo')">ЭНДОКРИНОЛОГИЯ</a></li>

<li><a href="#" onclick="run1('gastro')">ГАСТРОЭНТЕРОЛОГИЯ</a></li>

<li><a href="#" onclick="run1('nevro')">НЕВРОЛОГИЯ</a></li>

<li><a href="#" onclick="run1('ofto')">ОФТАЛЬМОЛОГИЯ</a></li>

<li><a href="#" onclick="run1('kosmet')">КОСМЕТОЛОГИЯ</a></li>

<li><a href="#" onclick="run1('diag')">АНАЛИЗЫ</a></li>

</ul>

</nav>

<span class="kat" id='zag' >

Ваш заказ

</span>

<hr>

<section id="sec">

</section >

<footer style="clear:both">

<div id="counter1"> Посещений сайта:</div>

<div id="copyright"> Сайт сделан студией "Главная страница"</div>

</footer>

<!-- End Save for Web Slices -->

</body>

</html>

reg.html

<!DOCTYPE html lang="ru">

<html >

<head>

<title>Доктор плюс</title>

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

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

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

<object id="purchase-order" data="spisok.xml" type="text/xml" style="display: none;"></object>

</head>

<body onload="st()">

<header>

<a href="index.html">

<img src="images/логотип.png" alt="альтернативный текст">

</a>

<nav class="navbar1">

<ul>

<li><a href="#">О НАС</a></li>

<li><a href="#">АКЦИИ</a></li>

<li><a href="#">ОТЗЫВЫ</a></li>

<li><a href="kon.html">КОНТАКТЫ</a></li>

</ul>

</nav>

<div class="lk">

<a class="kor" href="kor.html" >

<div class="st" id="koo"> 0</div>

</a>

<div class="vxod"> <a href="reg.html"> Регистрация</a> | Вход </div>

</div>

</ul>

</header>

<nav class="navbar2">

<ul>

<li><a href="#" onclick="run1('endo')">ЭНДОКРИНОЛОГИЯ</a></li>

<li><a href="#" onclick="run1('gastro')">ГАСТРОЭНТЕРОЛОГИЯ</a></li>

<li><a href="#" onclick="run1('nevro')">НЕВРОЛОГИЯ</a></li>

<li><a href="#" onclick="run1('ofto')">ОФТАЛЬМОЛОГИЯ</a></li>

<li><a href="#" onclick="run1('kosmet')">КОСМЕТОЛОГИЯ</a></li>

<li><a href="#" onclick="run1('diag')">АНАЛИЗЫ</a></li>

</ul>

</nav>

<span class="kat" id='zag' >

Регистрация

</span>

<hr>

<section id="sec">

<form action="">

<fieldset>

<p><span> Ваш пол:

<input type="radio" name="pol" value="1" >мужской

<input type="radio" name="pol" value="2" >женский <span> </p>

<p id="f"><span>Имя:</span> <input type="text" "/></p>

<p><span>Фамилия:</span> <input type="text" ;" /></p>

<p ><span>Город:</span> <input type="text" ;" /></p>

<p><span>Эл. почта:</span> <input type="text" ;" /></p>

<p><span>Пароль:</span> <input type="password" ;" /></p>

<p ><span>Повторите:</span> <input type="password" ;" /></p>

<p class="text">Введите число с картинки:</p>

<p class="kart"><input type="text" value=""/></p>

</fieldset>

<div class="subm">

<button type="button">Зарегистрироваться</button>

</div>

</form>

</section >

<footer>

<div id="counter1"> Посещений сайта:</div>

<div id="copyright"> Сайт сделан студией "Главная страница"</div>

</footer>

<!-- End Save for Web Slices -->

</body>

</html>

Приложение Б. Листинг кода css

styles.css

@font-face

{font-family: dasha;

src :url(9710.otf);

font-weight:normal;

}

body{

background:#ffffff;

width:100%;

height:auto;

overflow-x: hidden;

font-size: 12pt;

}

header, footer, nav, article {display: block;}

header {

position:relative;

height :auto;

min-width: 1024px;

max-width: 1280px;

margin:0 auto;

background: ;

top:-20px;

}

header img{

width:300px;

height :180px;

background: ;

}

.navbar1 {

position:absolute;

background: ;

text-align:center;

display: inline-block;

vertical-align: middle;

height:100px;

}

.navbar1 ul{

vertical-align: middle;

display: block;

position:RELATIVE;

background: ;

min-width:650px;

margin: 13% 0 0 -10%;

font-size: 11,5pt;

}

.navbar1 ul li {

position:relative ;

display: inline-block;

background: ;

margin:0 20px ;

}

.navbar1 ul a{

text-decoration: none;

color:black;

font-weight:bold;

}

.navbar1 ul a:hover {

color: #d2691e;

}

.lk {

position:relative;

background: ;

float: right;

margin:50px 100px 0 0;

}

.lk a{

text-decoration:none;

color:white;

font-size:10pt;

}

.kor {

display:block;

background-image: url('images/корзина.png');

width:70px;

height:70px;

float: right;

background-size: cover;

}

.st{text-align:center;

position:relative;

width:15px;

height:15px;

background-color:#d2691e;

border-radius:10px;

/* float:left: */

margin:0 0px 0 60px;

}

.vxod a{

color: black;

font-size: 12pt;

}

.navbar2 {

background-image: radial-gradient(at 40% 50%,#f3924c -10px, #d2691e 50%);

border-radius: 10px;

min-width: 1024px;

max-width: 1280px;

margin:0 auto;

font-size:12pt;

font-weight: bold;

text-align:center;

position:RELATIVE;

top:-40px;

}

.navbar2 ul{

vertical-align: middle;

display: block;

position:RELATIVE;

background: ;

}

.navbar2 ul li {

position:relative ;

display: inline-block;

background: ;

margin:20px 20px ;

}

.navbar2 a{

text-decoration: none;

color:white;

}

.navbar2 a:hover {

color:#FFDEAD;

}

section{

position:RELATIVE;

top:-10px;

min-width: 900px;

max-width: 1100px;

margin:2% auto ;

background-color:;

}

span {

display:block;

position:relative;

font-size: 18pt; /* Размер шрифта в процентах */

font-family: serif; /* Шрифт с засечками */

background-color:;

min-width: 900px;

max-width: 1100px;

margin:0 auto ;

background-color:;

}

.kat {

display:block;

position:relative;

font-size: 18pt; /* Размер шрифта в процентах */

font-family: serif; /* Шрифт с засечками */

background-color:;

min-width: 900px;

max-width: 1100px;

margin:-30px auto 20px auto;

background-color:;

top:;

}

.ts{

position:relative;

float:right;

background-color: ;

margin:5px -600px 0 00px;

}

.slider {

background: ;

min-width: 1024px;

max-width: 1280px;

margin:0 auto;

text-align:center;

}

.slider img{

width: 1024px;

}

hr {

background-color:#d2691e; /*для Firefox, Opera, Safari*/

border: none;

height: 4px; /* высота 1px IE, Firefox, Opera, Safari */

min-width: 1024px;

max-width: 1280px;

margin:5px auto;

}

article {

font-family:;

background: ;

min-width: 900px;

max-width: 1100px;

margin:0 auto ;

hyphens: auto;

font-size:13pt;

}

article p {

}

article a{

display:block;

padding-top: 5px;

text-decoration: none;

color: #d2691e;

}

article a:hover {

text-decoration: underline;

}

article hr {

background-color:#FFDEAD; /*для Firefox, Opera, Safari*/

margin:25px -25px 10px -25px;

border: none;

height: 2px;

}

.usl {

background: ;

min-width: 900px;

max-width: 1100px;

margin:0 auto ;

hyphens: auto;

}

.korz

{

clear: both;

min-width: 900px;

max-width: 1100px;

margin:0 auto ;

hyphens: auto;

}

.korz figure{

display:inline;

font-weight:;

position:relative;

float:right;

background-color: ;

margin:-20px 40px 0 0;

}

.korz figure form{

margin:0 0 0 50px;

display: block;

font-size:12pt ;

float:right;

}

.korz figure button{

display: inline-block;

color: white;

text-decoration: none;

padding: .5em 2em;

border-style: solid none;

border-radius: 6px;

background: #d2691e;

transition: 0.2s;

cursor:pointer;

}

.nazv

{

clear: both;

min-width: 900px;

max-width: 1100px;

margin:0 auto ;

hyphens: auto;

}

.nazv figure{

display:inline;

font-weight:;

position:relative;

float:right;

background-color: ;

margin:-20px 40px 0 0;

}

.nazv figure form{

margin:0 0 0 50px;

display: block;

font-size:12pt ;

float:right;

}

.nazv a{

text-decoration:none;

color:black;

cursor: default;

}

.nazv a hover{

text-decoration:none ;

color:black;

}

.usl img{

max-width:100px;

max-height:80px;

}

.prev {

position:relative;

width:100px;

height:80px;

floAT:left;

}

.usl a{

display:inline-block;

text-decoration: none;

color: #d2691e;

font-size: 13pt;

background-color: ;

margin:20px 0px 20px 40px;

}

.usl a:hover {

text-decoration: underline;

}

.naz{

display:inline-block;

text-decoration: none;

color: #d2691e;

font-size: 13pt;

background-color: ;

margin:0 0 0 0px;

}

figure{

font-weight:;

position:relative;

float:right;

background-color: ;

margin:20px 40px 0 0;

}

figure p{

display: blocks;

font-size:14pt ;

}

figure form{

margin:0 0 0 50px;

display: block;

font-size:12pt ;

float:right;

}

figure button{

display: inline-block;

color: white;

text-decoration: none;

padding: .5em 2em;

border-style: solid none;

border-radius: 6px;

background: #d2691e;

transition: 0.2s;

cursor:pointer;

}

footer {

position:relative;

height :auto;

min-width: 1024px;

max-width: 1280px;

margin:-30px auto 0 auto;

padding-bottom:30px;

background: ;

font-size:11pt;

}

.kat_footer{

min-width: 1024px;

max-width: 1280px;

margin:0 auto -20px auto;

height :20px;

bottom:10px;

}

#counter1 {

background: ;

float: left;

}

#copyright {

background: ;

float: right;

}

Приложение В. Листинг кода js

script.js

var a1, b1, z1;

// счетчик корзины

function kor(){

var st1=0

CartData=getCartData()

if(CartData !== null)

{

for(var items in CartData)

{st1+=CartData[items].length

}

document.getElementById('koo').innerHTML=st1

}

}

//счетчик посещений

function st(){

var caution = false

// name - name of the cookie

// value - value of the cookie

// [expires] - expiration date of the cookie (defaults to end of current session)

// [path] - path for which the cookie is valid (defaults to path of calling document)

// [domain] - domain for which the cookie is valid (defaults to domain of calling document)

// [secure] - Boolean value indicating if the cookie transmission requires a secure transmission

// * an argument defaults when it is assigned null as a placeholder

// * a null placeholder is not required for trailing omitted arguments

function setCookie(name, value, expires, path, domain, secure) {

var curCookie = name + "=" + escape(value) +

((expires) ? "; expires=" + expires.toGMTString() : "") +

((path) ? "; path=" + path : "") +

((domain) ? "; domain=" + domain : "") +

((secure) ? "; secure" : "")

if (!caution || (name + "=" + escape(value)).length <= 4000)

document.cookie = curCookie

else

if (confirm("Cookie exceeds 4KB and will be cut!"))

document.cookie = curCookie

}

// name - name of the desired cookie

// * return string containing value of specified cookie or null if cookie does not exist

function getCookie(name) {

var prefix = name + "="

var cookieStartIndex = document.cookie.indexOf(prefix)

if (cookieStartIndex == -1)

return null

var cookieEndIndex = document.cookie.indexOf(";", cookieStartIndex + prefix.length)

if (cookieEndIndex == -1)

cookieEndIndex = document.cookie.length

return unescape(document.cookie.substring(cookieStartIndex + prefix.length, cookieEndIndex))

}

// name - name of the cookie

// [path] - path of the cookie (must be same as path used to create cookie)

// [domain] - domain of the cookie (must be same as domain used to create cookie)

// * path and domain default if assigned null or omitted if no explicit argument proceeds

function deleteCookie(name, path, domain) {

if (getCookie(name)) {

document.cookie = name + "=" +

((path) ? "; path=" + path : "") +

((domain) ? "; domain=" + domain : "") +

"; expires=Thu, 01-Jan-70 00:00:01 GMT"

}

}

// date - any instance of the Date object

// * you should hand all instances of the Date object to this function for "repairs"

// * this function is taken from Chapter 14, "Time and Date in JavaScript", in "Learn Advanced JavaScript Programming"

function fixDate(date) {

var base = new Date(0)

var skew = base.getTime()

if (skew > 0)

date.setTime(date.getTime() - skew)

}

var now = new Date()

fixDate(now)

now.setTime(now.getTime() + 365 * 24 * 60 * 60 * 1000)

var visits = getCookie("counter")

if (!visits)

visits = 1

else

visits = parseInt(visits) + 1

setCookie("counter", visits, now)

document.getElementById('counter1').innerHTML="Посещений сайта: " + visits;

kor();

}

//вывод каталога из xml

function run1(m) {

var doc = document.getElementById("purchase-order").contentDocument;

var n = doc.getElementsByTagNameNS("http://example.mozilla.org/PurchaseOrderML", m);

var lineItems = n[0].getElementsByTagNameNS("http://example.mozilla.org/PurchaseOrderML", "lineItem");

// alert(lineItems)

// alert(lineItems.length);

document.getElementById('zag').innerHTML =''

document.getElementById('zag').innerHTML =lineItems[0].textContent

document.getElementById('sec').innerHTML=""

for(var i = 1; i < lineItems.length; i++)

{

document.getElementById('sec').innerHTML= document.getElementById('sec').innerHTML+ '<article class="usl"> <div class="prev"> <img src="images\\услуги\\'

+lineItems[i].getElementsByTagNameNS("http://example.mozilla.org/PurchaseOrderML", "num")[0].textContent

+'.jpg" alt="альт текст" ></div> <a href="#">' + lineItems[i].getElementsByTagNameNS("http://example.mozilla.org/PurchaseOrderML", "name")[0].textContent.toUpperCase()

+'</a> <figure> от' + lineItems[i].getElementsByTagNameNS("http://example.mozilla.org/PurchaseOrderML", "price")[0].textContent

+ 'руб. <form> <button id="'+lineItems[i].getElementsByTagNameNS("http://example.mozilla.org/PurchaseOrderML", "num")[0].textContent+'" onclick="r(this.id)">Запись</button> </form></figure> <hr></article> '

}

}

// Получаем данные из LocalStorage

function getCartData(){

return JSON.parse(localStorage.getItem('gn'));

}

// Записываем данные в LocalStorage

function setCartData(o){

localStorage.setItem('gn', JSON.stringify(o));

return false;

}

// Добавляем товар в корзину

function r(id){

this.disabled = true; // блокируем кнопку на время операции с корзиной

var cartData = getCartData() || {}; // получаем данные корзины или создаём новый объект, если данных еще нет

// parentBox = this.parentNode, // родительский элемент кнопки &quot;Добавить в корзину&quot;

// id=id // ID товара

// itemTitle = parentBox.querySelector('.item_title').innerHTML, // название товара

// itemPrice = parentBox.querySelector('.item_price').innerHTML; // стоимость товара

if(cartData.hasOwnProperty(id)){ // если такой товар уже в корзине, то добавляем +1 к его количеству

cartData[id][0] += 1;

} else { // если товара в корзине еще нет, то добавляем в объект

cartData[id] = [1];

}

// Обновляем данные в LocalStorage

if(!setCartData(cartData)){

this.disabled = false; // разблокируем кнопку после обновления LS

// alert(id)

// alert('Товар добавлен в корзину.');

}

// return false;

kor();

}

// Открываем корзину со списком добавленных товаров

function iz(){

var cartData = getCartData(), // вытаскиваем все данные корзины

totalItems = '';

console.log(JSON.stringify(cartData));

// если что-то в корзине уже есть, начинаем формировать данные для вывода

if(cartData !== null){

totalItems = '<table class="shopping_list"><tr><th>id</th><th>Кол-во</th><th>Название</th></tr>';

for(var items in cartData){

totalItems += '<tr><td>' + items + '</td>';

// for(var i = 0; i < cartData[items].length; i++){

totalItems += '<td>' + cartData[items][0] + '</td>'+'<td>' + vi(items) + '</td>';

// }

totalItems += '</tr>';

}

totalItems += '<table>';

document.getElementById("sec").innerHTML = totalItems;

} else {

// если в корзине пусто, то сигнализируем об этом

document.getElementById("sec").innerHTML = 'В корзине пусто!';

}

return false;

}

//поиск товара по id в xml

function vi(p) {

var doc = document.getElementById("purchase-order").contentDocument;

var lineItems = doc.getElementsByTagNameNS("http://example.mozilla.org/PurchaseOrderML", "lineItem");

// alert(lineItems.textContent)

// alert(lineItems.length);

// document.getElementById('zag').innerHTML =''

// document.getElementById('zag').innerHTML =lineItems[0].textContent

// document.getElementById('sec').innerHTML=""

for(var i = 0; i < lineItems.length; i++)

{

if (lineItems[i].getElementsByTagNameNS("http://example.mozilla.org/PurchaseOrderML", "num")[0].textContent==p) {

// a1=(lineItems[i].getElementsByTagNameNS("http://example.mozilla.org/PurchaseOrderML", "num")[0].textContent);

b1=(lineItems[i].getElementsByTagNameNS("http://example.mozilla.org/PurchaseOrderML", "name")[0].textContent);

z1=(lineItems[i].getElementsByTagNameNS("http://example.mozilla.org/PurchaseOrderML", "price")[0].textContent);

}

}

// return z

}

//функция для загрузки корзины

function ob() {

st()

zap()

}

function men(zn, it) {

}

//изменение количества

function kolv(kont,nom){

var cartData = getCartData(), // вытаскиваем все данные корзины

totalItems = '';

console.log(JSON.stringify(cartData));

// если что-то в корзине уже есть, начинаем формировать данные для вывода

if(cartData !== null){

// totalItems = '<table class="shopping_list"><tr><th>id</th><th>Кол-во</th><th>Название</th><th>цена</th></tr>';

koli=0

summa=0

for(var items in cartData){

if(cartData.hasOwnProperty(nom)){ // если такой товар уже в корзине, то добавляем +1 к его количеству

cartData[nom][0] += kont;

vi(items);

koli+=cartData[items][0];

summa+=cartData[items][0]*z1;

}}

document.getElementById("sec").innerHTML = document.getElementById("sec").innerHTML - '<article class="nazv"> <div class="prev"> Итого: </div> <a href="#" > </a> <figure id="ito"> Цена:'+summa+' <form id="ito1">Количество:'+koli+' </form></figure> <hr></article> ';

document.getElementById("sec").innerHTML += '<article class="nazv"> <div class="prev"> Итого: </div> <a href="#" > </a> <figure id="ito"> Цена:'+summa+' <form id="ito1">Количество:'+koli+' </form></figure> <hr></article> ';

} else {

// если в корзине пусто, то сигнализируем об этом

document.getElementById("sec").innerHTML = '<article class="usl"> В корзине пусто!<hr></article> ';

}

return false;

}

// Открываем корзину со списком добавленных товаров

function zap() {

var cartData = getCartData(), // вытаскиваем все данные корзины

totalItems = '';

console.log(JSON.stringify(cartData));

// если что-то в корзине уже есть, начинаем формировать данные для вывода

if(cartData !== null){

// totalItems = '<table class="shopping_list"><tr><th>id</th><th>Кол-во</th><th>Название</th><th>цена</th></tr>';

totalItems ='<article class="nazv"> <div class="prev"> Код услуги </div> <a href="#" >Название</a> <figure> Цена <form>Количество </form></figure> <hr></article> ';

koli=0

summa=0

for(var items in cartData){

vi(items);

koli+=cartData[items][0];

summa+=cartData[items][0]*z1;

totalItems += '<article class="korz"> <div class="prev">' + items + '</div> <a>'+ b1 +'</a> <figure>'+z1+'<form id="'+items+'"> <button onclick="men(this.textContent, this.id)" >-</button><input size="2" onchange="kolv(this.textContent,this.id)" id="'+items+'" value="'+cartData[items][0] +'" ></input> <button onclick="men(this.textContent)">+</button> </form></figure> <hr></article> ';

// alert(z1);

// for(var i = 0; i < cartData[items].length; i++){

// totalItems += '<td>' + cartData[items][0] + '</td>'+'<td>' + b1 + '<td>'+ z1+'</td>';

// }

// totalItems += '</tr>';

}

// totalItems+ ='<article class="nazv"> <div class="prev"> Итого </div> <a href="#" > </a> <figure id="ito"> Цена <form id="ito">Количество </form></figure> <hr></article> ';

document.getElementById("sec").innerHTML = totalItems+'<article class="nazv"> <div class="prev"> Итого: </div> <a href="#" > </a> <figure id="ito"> Цена:'+summa+' <form id="ito1">Количество:'+koli+' </form></figure> <hr></article> ';

} else {

// если в корзине пусто, то сигнализируем об этом

document.getElementById("sec").innerHTML = '<article class="usl"> В корзине пусто!<hr></article> ';

}

return false;

}

Приложение Г. Листинг кода xml

spisok.xml

<script id="purchase-order" type="application/xml">

<purchaseOrder xmlns="http://example.mozilla.org/PurchaseOrderML">

<endo>

<lineItem>

Услуги эндокринолога

<num> </num>

<name> </name>

<price> </price>

</lineItem>

<lineItem>

<num>7</num>

<name> Биоимпедансный анализ тела </name>

<price> 1200 </price>

</lineItem>

<lineItem>

<num>8</num>

<name> Профилактика осложнений сахарного диабета </name>

<price> 1250 </price>

</lineItem>

<lineItem>

<num>9</num>

<name> Школа диабета </name>

<price> 1000 </price>

</lineItem>

</endo>

<gastro>

<lineItem>

Услуги гастроэнтеролога

<num> </num>

<name> </name>

<price> </price>

</lineItem>

<lineItem>

<num>10</num>

<name> Детоксикация организма (детокс)</name>

<price> 1100 </price>

</lineItem>

<lineItem>

<num>11</num>

<name> Лечение язвенной болезни </name>

<price> 2400 </price>

</lineItem>

<lineItem>

<num>12</num>

<name> Лечение хронического панкератита </name>

<price> 3100 </price>

</lineItem>

</gastro>

<ofto>

<lineItem>

Услуги офтальмолога

<num> </num>

<name> </name>

<price> </price>

</lineItem>

<lineItem>

<num>16</num>

<name> Параорбитальные инъекции в офтальмологии </name>

<price> 750 </price>

</lineItem>

<lineItem>

<num>17</num>

<name> Установка лечебных контактных линз </name>

<price> 450 </price>

</lineItem>

<lineItem>

<num>18</num>

<name> Лазерная коагуляция сетчатки </name>

<price> 1550 </price>

</lineItem>

</ofto>

<nevro>

<lineItem>

Услуги невролога

<num> </num>

<name> </name>

<price> </price>

</lineItem>

<lineItem>

<num>13</num>

<name> Электроэнцефалография </name>

<price> 450 </price>

</lineItem>

<lineItem>

<num>14</num>

<name> Ультразвуковое сканирование сосудов головы и шеи (УЗДГ) </name>

<price> 550 </price>

</lineItem>

<lineItem>

<num>15</num>

<name> Акупунктура (иглорефлексотерапия) </name>

<price> 750 </price>

</lineItem>

</nevro>

<diag>

<lineItem>

Услуги диагноста

<num> </num>

<name> </name>

<price> </price>

</lineItem>

<lineItem>

<num>4</num>

<name> УЗИ </name>

<price> 350 </price>

</lineItem>

<lineItem>

<num>5</num>

<name> полный биохимическй анализ крови </name>

<price> 450 </price>

</lineItem>

<lineItem>

<num>6</num>

<name> полное гормональное обследование </name>

<price> 250 </price>

</lineItem>

</diag>

<kosmet>

<lineItem>

Услуги косметолога

<num> </num>

<name> </name>

<price> </price>

</lineItem>

<lineItem>

<num>1</num>

<name> ЛАЗЕРНАЯ КОСМЕТОЛОГИЯ </name>

<price> 450 </price>

</lineItem>

<lineItem>

<num>2</num>

<name> BOTOX (БОТОКС) - ИНЪЕКЦИИ ПРОТИВ МОРЩИН </name>

<price> 550 </price>

</lineItem>

<lineItem>

<num>3</num>

<name> ЛАЗЕРНАЯ ЭПИЛЯЦИЯ </name>

<price> 360 </price>

</lineItem>

</kosmet>

</purchaseOrder>

</script>

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


Подобные документы

  • Язык маркировки гипертекстов HTML, основа создания web-страниц. История спецификаций, каскадные таблицы стилей CSS. Способы определения таблиц стилей (стилевого шаблона). Язык подготовки сценариев JavaScript, его использование. Программный код web сайта.

    курсовая работа [26,9 K], добавлен 05.07.2009

  • Технологии создания web-страниц. Появление Active Server Pages. Разработка динамического web-сайта на asp.net. Создание дизайна и каркаса сайта с использованием стандартных HTML таблиц. Проектирование базы данных на основе ado.net и подключение к ней.

    контрольная работа [2,4 M], добавлен 24.05.2019

  • Понятие web-сайта. Разметка HTML, CSS, скрипт PHP, JavaScript. Понятия интервальной математики. Функциональные зоны страниц сайта. Каскадная таблица стилей. Пример использования PHP-скрипта. Алгоритм представления интервальной математики на сайте.

    курсовая работа [520,6 K], добавлен 28.09.2017

  • Создание индивидуального сайта с использованием языка гипертекстовой разметки HTML и языка скриптов JavaScript. Программные средства, используемые при выполнении работы. Основные средства для создания сайта. Разработка CSS-файла (таблица стилей).

    лабораторная работа [31,0 K], добавлен 28.10.2010

  • История возникновения и применение Каскадных таблиц стилей (CSS) в web-дизайне, их преимущества и отличие от HTML. Сравнительная характеристика табличной и блочной верстки. Практика дизайна сайта: создание бокового меню, всплывающего модального окна.

    курсовая работа [1,2 M], добавлен 21.06.2011

  • Среда редактирования HTML. Возможности CSS или создание шаблона web-дизайна. Осмысление тегов

    &. Создание таблиц стилей. Связка базы данных с сайтом. Создание формы авторизации. Возможность создания самых разнообразных локальных приложений.

    отчет по практике [1,9 M], добавлен 09.03.2016

  • Практическая значимость создания сайта. Язык программирования JavaScript. Основные области использования языка JavaScript при создании интерактивных HTML-страниц. Язык программирования PHP. Программная основа сайта. Создание оформления дизайна сайта.

    дипломная работа [1,1 M], добавлен 05.03.2013

  • Создание интерактивных веб-страниц. Что такое JavaScript. Полная интеграция с браузером. Мощные средства для создания сетевых соединений. Подключение и выполнение JavaScript. Загрузка данных без перезагрузки страницы. Объекты для работы с мультимедиа.

    лекция [16,2 K], добавлен 05.02.2012

  • Мультимедийное представление информации, аналоги платформ. Разработка структуры сайта, макетов страниц. Верстка шаблонов страниц. Написание серверной логики и кода презентаций. Публикация сайта в сети Интернет. Требования к интерфейсу пользователя.

    дипломная работа [983,2 K], добавлен 17.12.2015

  • Создание тематического Web-сайта с использованием гипертекстового языка разметки HTML, каскадных листов стилей CSS и языка программирования JavaScript. Проблема высокого уровня нагрузки на хостинг и создания уникального контента. Выбор средств CMS.

    курсовая работа [3,6 M], добавлен 25.05.2014

Работы в архивах красиво оформлены согласно требованиям ВУЗов и содержат рисунки, диаграммы, формулы и т.д.
PPT, PPTX и PDF-файлы представлены только в архивах.
Рекомендуем скачать работу.