Ирина Эланс

Автор который поможет с любыми образовательными и учебными заданиями

Web-программирование

Министерство образования и науки Российской Федерации
Федеральное агентство по образованию
Саратовский государственный технический университет

Курсовая работа по дисциплине
«Информатика»
на тему:
«Web-программирование»

Выполнил:
студент ФЭМ УПИ-11
Бородин Д.И.
Проверил:
доцент кафедры ПВС
Пластун И.Л.

Саратов,2011

Содержание

Главная страница 3

Главная страница 3
Меню 5
Ползущая строка 7

Каталог 8

Каталог 8
Страница товара 11
Оформление заказа 12
Обработка заказа 23

FAQ, Способы оплаты и доставки, вакансии, тест, отправка и обработка заявки 26

FAQ 26
Способы оплаты и доставки 28
Вакансии 31
Тест 33
Отправка заявки 42
Обработка заявки 45

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

Рис. 1.1

<html> //Начало HTML-документа

<head> //Начало заголовка HTML-документа

<title>Авиамодели в Саратове</title> //Название HTML-документа, отображаемое в шапке браузера

</head> // конец заголовка HTML-документа

<frameset rows="110,*,35" border=0 frameborder=no> //Задание разметки фреймовой структуры HTML-документа, строки высотой в 110, все остальные и последние 35 пикселей, без границ

<frame src="menu.html" scrolling=no noresize> //Первый фрейм, источник файл menu.html с запретом изменения размера и прокрутки

<frame src="main.html" name="main"> //Фрейм под названием main

</frameset> //Конец разметки фреймовой структуры HTML-документа

</html> //Конец HTML-документа

Меню

Рис. 1.2

<HTML>

<HEAD> <TITLE>Авимодели в Саратове </TITLE></HEAD>

<BODY BGCOLOR="3366FF"> //Начало тела HTML-документа с цветным фоном (цвет «Синий Клейна»)

<A HREF="job.html" target="main"> <IMG SRC="main/job.jpg" ALT="Вакансии и предложения работы" BORDER=0 ALIGN=RIGHT></A> //Гиперссылка(на файл job.html с загрузкой последнего во фрейм main) в виде изображения(файл job.jpg в папке main) со всплывающей подсказкой, без рамки, с выравниванием справа

<CENTER> //выравнивание по центру

<IMG SRC="main/menu.jpg" USEMAP="menu.html#menu" border=0> //изображение, соотносящееся с картой menu в документе menu.html

<MAP NAME="menu"> //карта с названием menu

<AREA SHAPE=RECT COORDS=102,24,237,77 ALT="Главная" HREF="main.html" TARGET="main" TITLE="Главная страница сайта"> //область карты в форме прямоугольника(102;24 координаты верхнего левого угла, 237;77 координаты нижнего правого угла) со всплывающей подсказкой и ссылкой, загружаемую во фрейм main и названием «Главная страница сайта»

</MAP> //закрытие тега <map>

</CENTER> //прекращение выравнивания по центру

</BODY> //конец тела html-документа

</HTML>

Ползущая строка

Рис. 1.3

<HTML>

<HEAD><TITLE>Авимодели в Саратове</TITLE></HEAD>

<MARQUEE HIGHT=10 BGCOLOR="3366FF" DIRECTION=RIGHT LOOP=INFINITE ALIGN=MIDDLE BEHAVIOR=SCROLL SCROLLAMOUNT=5>Продажа авиамоделей в Саратове!!! Доставка!!! Имеются вакантные места!!!</MARQUEE> //бегущая строка высотой 10 пикс., с фоном цветным, бегущая в правую сторону, с бесконечным числом «прокруток» строки, выравниванием текста по середине области строки, циклической прокруткой, скоростью перемещения 5 пикс./сек.

</BODY>

</HTML>

Каталог

Рис. 2.1 (верхняя часть каталога)

Рис. 2.2 (нижняя часть каталога)

<HTML>

<HEAD><TITLE>Авимодели в Саратове-Каталог</TITLE></HEAD>

<BODY LINK="FFFFFF" VLINK="ECECEC" ALINK="C0C0C0"> //тело с настройками цвета ссылок, нажатых ссылок и ранее нажатых ссылок

<A name="begin"></A> //метка с названием begin

<A HREF= #end target="main"> <IMG SRC="main/end.jpg" ALT="В начало каталога..." BORDER=0 Clear=all></A> //изображение ссылка на метку end и очисткой полей слева и справа от картинки

<br> //перенос на новую строку

<TABLE BORDER=1 BGCOLOR="1E90FF"> //таблица с рамкой толщиной 1 пикс. и цветным фоном.

<TR> //начало строки таблицы

<TD ROWSPAN=2><A HREF="0001.html" target="main"> <IMG SRC="mini_images/0001.jpg" ALT="Перейти к описанию продукта" BORDER=0></A></TD> //ячейка таблицы, объединяющая 2 ячеки по вертикали, с картинкой-ссылкой

<TD>A-RTF001 Alpha jet ducted fan</TD> // ячейка таблицы с текстом

<TD>A-RTF002 500 Class Brushless Cessna-182</TD>

</TR> //конец строки таблицы

<TR>

<TD><A HREF="0001.html" target="main">Подробнее... </A></TD> //ячейка с гипертекстовой ссылкой

<TD><A HREF="0002.html" target="main">Подробнее... </A></TD>

</TR>

… аналогичным образом заполняются остальные 20 строк…

</TABLE> //конец таблицы

<A name="end"></A> //метка end

<br>

</CENTER>

</BODY>

</HTML>

Страница товара

Рис. 2.3 (верхняя часть)

Рис. 2.4 (нижняя часть)

<HTML>

<HEAD><TITLE>Авимодели в Саратове</TITLE> </HEAD>

<BODY>

<P ALIGN=left> //новый абзац с выравниванием слева

<H1><u>SU-27 с бесколлекторными моторами, полный комплект</u></H1> //большой заголовок, подчеркнутый

<font face="Comic Sans MS"> //форматирование текста, изменение шрифта

<BR>Самая известная авиамодель пилотажной группы "Русские Витязи" с двумя бесколлекторными импеллерами.

…

<BR><h2>Модель предназначена для опытных пилотов.</h2> //заголовок меньшего размера

<BR>Характеристики:

</font> //закрытие тэга <font>

<ul> //ненумерованный список

<li>выполнение фигур высшего пилотажа. //элемент списка

…

</ul> //закрытие тэга <ul>

</P> //конец абзаца

Оформление заказа

Рис. 2.5 (верхняя часть страницы)

Рис. 2.6 (нижняя часть страницы)

<html>

<head><title>Отправка заказа</title>

var goods = new Array(); //создание массива goods

goods = [

["A-RTF001","Alpha jet ducted fan","Alpha jet ducted fan",7000],

…

["A-RTF022","Радиоуправляемый самолет WING DRAGON 3","Радиоуправляемый самолет WING DRAGON 3",5300]

]; //заполнение массива goods

var count = goods.length; //переменная count, равная числу элементов массива goods

var orders = new Array(); //новый массив orders

for( var i = 0; i < count; i++ ) orders[i] = 0; //цикл, заполняющий массив count (для i от 0 до i , до тех пор, пока i<count, элемент orders[i]=0)

var param = getCookie( "basket" ); //создание cookie «basket»

for( var i = 0; i < count; i++ ) {

pos = param.indexOf( ',' ); //переменная pos равная позиции «,»-1

if( pos == -1 ) break; //если pos=-1 то цикл прерывается

orders[i] = parseInt( param.substring ( -1, pos ) ); orders[i]= подстрока param (от -1 до pos-1) в десятичной системе счисления

param = param.substring ( pos+1 );

}

window.onload = function() {

var table = createTable(goods);

document.getElementById("shop").appendChild(table);

} // установка обработчика на событие "содержимое окна загрузилось"

function updateTable()

{

var totalGoods = 0;

var totalCosts = 0;

var basket = "";

for ( var i = 0; i < count; i++ ) {

var item = document.getElementById( "item"+i );

var cnt = parseInt( item.value );

if ( isNaN(cnt) || cnt < 0 ) {

cnt = 0;

item.value = "0";

}//функция обновляет таблицу, обнуляет переменные, если cnt-число и cnt<0, то cnt=0 и значение item=0

if ( cnt > 0 )

item.parentNode.parentNode.setAttribute("bgcolor", "lightblue");

else

item.parentNode.parentNode.removeAttribute("bgcolor")

orders[i] = cnt;

basket = basket + cnt + ",";

totalGoods = totalGoods + cnt;

totalCosts = totalCosts + cnt*goods[i][3];

} //если cnt>0, то устанавливаются элементу parentNode атрибуты lightblue и bgcolor, иначе он «лишается» атрибута bgcolor

var span = document.getElementById("totalGoods");

var newTextNode = document.createTextNode(totalGoods);

span.replaceChild(newTextNode, span.firstChild);

var span = document.getElementById("totalCosts");

var newTextNode = document.createTextNode(totalCosts);

span.replaceChild(newTextNode, span.firstChild);

setCookie("basket", basket);

}

function createTable(data) {

var table = document.createElement("table");

table.setAttribute("border", "1");

table.setAttribute("cellspacing", "0");

table.setAttribute("cellpadding", "2");

var thead = document.createElement("thead");

var tr = document.createElement("tr");

tr.setAttribute("bgcolor", "lightgrey");

var head = new Array("Код","Наименование","Описание","Стоимость","Количество");

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

var th = document.createElement("th");

var newText = document.createTextNode(head[i]);

th.appendChild(newText);

tr.appendChild(th);

} //функция создания таблицы и настройки атрибутов

thead.appendChild(tr);

table.appendChild(thead);

var totalGoods = 0;

var totalCosts = 0.0;

var tbody = document.createElement("tbody");

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

var tr = document.createElement("tr");

if ( orders[i] > 0 ) tr.setAttribute("bgcolor", "lightblue");

for (var j=0; j < data[i].length; j++) {

var td = document.createElement("td");

var newText = document.createTextNode(data[i][j]);

td.appendChild(newText);

tr.appendChild(td);

} //цикл, присваивающий значения tr td и newText, а также делая newText «ребенком» td, а td – «ребенком» tr

var td = document.createElement("td");

var newInput = document.createElement("input");

newInput.setAttribute("type", "text");

newInput.setAttribute("id", "item"+i);

newInput.setAttribute("value", orders[i]);

newInput.setAttribute("size", "3");

newInput.onblur = updateTable;

td.appendChild(newInput);

tr.appendChild(td);

tbody.appendChild(tr);

totalGoods = totalGoods + orders[i];

totalCosts = totalCosts + orders[i]*goods[i][3];

}

var tr = document.createElement("tr");

var td = document.createElement("td");

td.setAttribute("colspan", "3");

td.setAttribute("align", "right");

var textNode = document.createTextNode("Итого:");

td.appendChild(textNode);

tr.appendChild(td);

var td = document.createElement("td");

var span = document.createElement("span");

span.setAttribute("id", "totalCosts");

var textNode = document.createTextNode(totalCosts);

span.appendChild(textNode);

td.appendChild(span);

tr.appendChild(td);

var td = document.createElement("td");

var span = document.createElement("span");

span.setAttribute("id", "totalGoods");

var textNode = document.createTextNode(totalGoods);

span.appendChild(textNode);

td.appendChild(span);

tr.appendChild(td);

tbody.appendChild(tr);

table.appendChild(tbody);

return table; //возвращение результата

}

function setCookie(name,value)

{

document.cookie = name + '=' + value;

} //функция, записи в cookie

function getCookie(name)

{

var arg = name + "=";

startpos = document.cookie.indexOf(arg, 0);

if (startpos == -1)

return "";

else

startpos += arg.length;

endpos = document.cookie.indexOf(';', startpos);

if (endpos == -1) endpos = document.cookie.length;

return document.cookie.substring(startpos, endpos);

} //функция получения cookie

</script> //конец java-скрипта

</head>

<body>

<div id="shop"></div> //вставка таблицы из java-скрипта

<br>

<h2>Отправить заказ</h2>

<form action="process.php" method="POST"> //форма, отправляющая данные в process.php и сохранение значений в массив POST

<table>

<tr>

<td>Ваше Имя и Фамилия</td>

<td><input name="name" size="53"></td> //текстовая строка длиной 53 знака

</tr>

<tr>

<td>Ваш адрес e-mail</td>

</tr>

<tr>

<td>Ваш заказ</td>

<td><textarea cols="40" rows="10" name="order"></textarea></td> //текстовое поле длиной 40 высотой 10 знаков

</tr>

</table>

<br>

<input type="submit" value="Отправить заказ"> //кнопка, отправляющая результаты и открывающая другую страницу

</form> //закрытие тэга <form>

<p><a href="catalog.html" target=main >Вернутся в каталог...</a></p>

<p><a href="main.html" target=main >На главную...</a></p>

</body>

</html>

Обработка заказа

Рис. 2.7

Рис. 2.8

<? //открытие php-кода

$error = ""; //присваивание переменной $error пустого значения

$nz = chr(13) .chr(10); //$nz – перенос на новую строку

$name= $_POST ['name']; //$name присваивается значение name из массива POST

$mail= $_POST ['mail'];

$order= $_POST ['order'];

if (empty($name)) $error .= "<li> Не указана Имя и Фамилия </li>"; //если $name пустое значение то к $error добавляется элемент маркированного списка

if (empty($mail)) $error .= "<li> Не указан адрес e-mail </li>";

if (empty($order)) $error .= "<li> Не указан заказ </li>";

if (empty($error)) {

$where = "[email protected]";

$theme = "Заказ авиамодели";

$from = $mail;

$date = "Дата: ".date( "j.n.y") .$nl;

$time = "Время: " .date("H:i") .$nl;

$line = " " .$nl;

$author = "Автор: ".$name.$line.$mail .$nl;

$text = $date.$time.$author.$line.$order;

$title = "Ваш заказ отправлен";

mail($where, $theme, $text, $from);

} else $title = "Присутствуют ошибки!!!"; // если $error пустое то присваиваются значения, иначе значение присваиваются только $title

?> //конец php-кода

<html>

<head>

</head>

<body>

if (empty($error)) {

$text = strip_tags($text);

$text = htmlspecialchars($text, ENT_NOQUOTES, 'cp1251');

$text = str_replace($nl, "<br>", $text);

echo "<p>Ваш заказ отправлен!</p>";

echo "<p>$text</p>";

} else {

echo "<p>Ваш заказ не отправлен, так как:";

echo "<ul>$error</ul>";

echo "</p>";

}

?> //если $error пустое, то присваиваются значения, выводится сообщение об успешной отправке и показывается пример сообщения, иначе выводится сообщение об ошибках и неотправленном сообщении

<p><a href="catalog.html" target=main >Вернутся в каталог...</a></p>

<p><a href="main.html" target=main >На главную...</a></p>

</body>

</html>

FAQ, Способы оплаты и доставки, вакансии, тест, отправка и обработка заявки

FAQ

Рис. 3.1

<HTML>

<HEAD><TITLE>Авимодели в Саратове</TITLE></HEAD>

<BODY>

<H1>Инструкция по заказу</H1>

<ol Type="I"> //нумерованный список I,II,III,и.т.д.

<li>Просматриваем товар в каталоге.

<li>Нажимаем кнопку "Оформить заказ".

<li>При необходимости, Вы можете просчитать сумму и количество товаров в специальной таблице

Web-программирование 📙 Курсовая → 🆔 1421