Автор статьи
Валерия
Эксперт по сдаче вступительных испытаний в ВУЗах
Рисунок 1 – Создание проекта приложения в Visual Studio
Согласно заданию, соответсвующему варианту 5, приложения должно состоять из следующих элементов:
– окно приветствия HelloASP.asp;
– страница ввода данных пользователя и пароля LoginFormEx.html;
– форма с результатами входа LoginCheckEx.asp.
Структура приложения представлена на рисунке 2.
Рисунок 2 – Содержимое веб-сайта WebSiteVar5
Листинг 1. HelloASP.asp
<%@ LANGUAGE = «JScript» %>
<meta http-equiv=»Content-Type» content=»text/html;
charset=windows-1251″>
<%
var sHelloMsg = «Hello, ASP World!»;
%>
<HTML>
<HEAD>
<script LANGUAGE=»JavaScript»>
function enter() {
window.location.href = «LoginFormEx.html»;
}
</script>
</HEAD>
<BODY>
<H1><%=sHelloMsg%></H1>
<input type=»button» onClick=»enter();»
value=»Войти» name=» enter»>
</BODY>
</HTML>
Листинг 2. LoginFormEx.html
<html><head>
<meta http-equiv=»Content-Type» content=»text/html;
charset=windows-1251″>
<title></title><script LANGUAGE=»JavaScript»>
<!—
function checkForm() {
Согласно заданию, имена пользователей и пароли хранятся в коде приложения.
var usrs = [«user1», «user2»];
var pwds = [«123456», «654321»];
if (document.RegForm.Login.value == «» || document.RegForm.Password.value == «»)
{ alert(«Укажите идентификатор и пароль»); return; }
Проверка соответствия введенных авторизационных данных.
for (var i = 0; i < usrs.length; i++) {
if (usrs[i] == document.RegForm.Login.value && pwds[i] == document.RegForm.Password.value)
{ document.RegForm.submit(); return}
}
alert(«Пользователь не найден»);
}
Функция возврата на стартовое окно.
function goBack() {
window.location.href = «HelloASP.asp»;
}
// —>
</script></head>
<body>
<h2>Регистрация пользователя</h2>
<form action=»LoginCheckEx.asp» method=»POST» name=»RegForm»>
<table border=»0″ width=»40%»>
<tr>
<td width=»29%»>Идентификатор:</td>
<td width=»71%»><input type=»text» name=»Login» size=»20″>
</td></tr><tr>
<td width=»29%»>Пароль:</td>
<td width=»71%»><input type=»password» name=»Password»
size=»20″></td>
</tr><tr>
<td width=»29%»><input type=»button» onClick=»checkForm();»
value=»Подключиться» name=»Ok»></td>
<td width=»71%»><input type=»reset» onClick=»goBack();»
value=»Отменить» name=»Cancel»></td>
</tr></table></form></body></html>
Листинг 3. LoginCheckEx.asp
<%@ LANGUAGE = «JScript» %>
<meta http-equiv=»Content-Type» content=»text/html;
charset=windows-1251″>
<HTML><HEAD>
<%
var sLogin=Request.Form(«Login»);
var sPassword=Request.Form(«Password»);
%>
<script LANGUAGE=»JavaScript»>
function goBack()
{ window.location.href=»LoginFormEx.html?»+»FRCE=»+Math.random().toString();
}
</script>
</HEAD><BODY>
<H2>Данные регистрации</H2>
<FORM><TABLE>
<TR><TD>Идентификатор:</TD><TD><b><%=sLogin%></b></TD></TR>
<TR><TD>Пароль:</TD><TD><b><%=sPassword%></b></TD></TR>
<TR><TD COLSPAN=»2″><input type=»button» onClick=»goBack();»
value=»Назад» name=»back»></TD></TR>
</TABLE></FORM></BODY></HTML>
2. Развертывание веб-приложения на сервере IIS
На рисунке 3 проиллюстрирован процесс создания нового веб-сайта.
Рисунок 3 – Добавление нового веб-сайта в IIS
На рисунке 4 создаем новый виртуальный каталог – WebSiteVar5, физический путь выбираем исходя из расположения созданного в Visual Studio веб-сайта.
Рисунок 4 – Добавление виртуального каталога
Рисунок 5 – Установка страницы по умолчанию
Рисунок 6 – Преобразование виртуального каталога в приложение
Необходимость преобразования виртуального каталога в приложения связано с ошибкой, возникающей при попытке отображения asp-форм в браузере.
3. Проверка работоспособности приложения, обзор HTML страниц
На рисунке 7 представлена стартовая форма и ее html-код, сгенерированный сервером и переданный клиенту.
Рисунок 7 – Просмотр кода страницы HelloASP.asp
Листинг 4. HTML страница, передаваемая клиенту при переходе на страницу HelloASP.asp
<html><head><meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″>
<script language=»JavaScript»>
function enter() {
window.location.href = «LoginFormEx.html»;
}
</script>
</head>
<body>
<h1>Hello, ASP World!</h1>
<input name=» enter» onclick=»enter();» type=»button» value=»Войти»>
</body></html>
На рисунке 8 – форма ввода данных о пользователе и пароле.
Рисунок 8. Ввод данных пользователя.
Листинг 5. HTML страница, передаваемая клиенту при переходе на страницу LoginFormEx.html
<html><head>
<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″>
<title></title><script language=»JavaScript»>
<!—
function checkForm() {
var usrs = [«user1», «user2»];
var pwds = [«123456», «654321»];
if (document.RegForm.Login.value == «» || document.RegForm.Password.value == «»)
{ alert(«Укажите идентификатор и пароль»); return; }
for (var i = 0; i < usrs.length; i++) {
if (usrs[i] == document.RegForm.Login.value && pwds[i] == document.RegForm.Password.value)
{ document.RegForm.submit(); return}
}
alert(«Пользователь не найден»);
}
function goBack() {
window.location.href = «HelloASP.asp»;
}
// —>
</script></head>
<body>
<h2>Регистрация пользователя</h2>
<form name=»RegForm» action=»LoginCheckEx.asp» method=»POST»>
<table width=»40%» border=»0″>
<tbody><tr>
<td width=»29%»>Идентификатор:</td>
<td width=»71%»><input name=»Login» type=»text» size=»20″>
</td></tr><tr>
<td width=»29%»>Пароль:</td>
<td width=»71%»><input name=»Password» type=»password» size=»20″></td>
</tr><tr>
<td width=»29%»><input name=»Ok» onclick=»checkForm();» type=»button» value=»Подключиться»></td>
<td width=»71%»><input name=»Cancel» onclick=»goBack();» type=»reset» value=»Отменить»></td>
</tr></tbody></table></form>
</body></html>
На рисунке 9 продемонстрировано сообщение об ошибке при вводе неверных данных пользователя.
Рисунок 9 – Ошибка ввода данных
Рисунок 10 – Результат входа
Листинг 6. HTML страница, передаваемая клиенту при переходе на страницу LoginCheckEx.asp
<html><head><meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″>
<script language=»JavaScript»>
function goBack()
{ window.location.href=»LoginFormEx.html?»+»FRCE=»+Math.random().toString();
}
</script>
</head><body>
<h2>Данные регистрации</h2>
<form><table>
<tbody><tr><td>Идентификатор:</td><td><b>user1</b></td></tr>
<tr><td>Пароль:</td><td><b>123456</b></td></tr>
<tr><td colspan=»2″><input name=»back» onclick=»goBack();» type=»button» value=»Назад»></td></tr>
</tbody></table></form>
</body></html>
О сайте
Ссылка на первоисточник:
http://pimash.spb.ru/
Поделитесь в соцсетях: