Лабораторна робота №1


Скачати 92.72 Kb.
НазваЛабораторна робота №1
Дата10.08.2013
Розмір92.72 Kb.
ТипДокументи
bibl.com.ua > Інформатика > Документи
НАЦІОНАЛЬНИЙ АВІАЦІЙНИЙ УНІВЕРСИТЕТ

ФАКУЛЬТЕТ КОМП’ЮТЕРНИХ СИСТЕМ

Лабораторна робота №1

з дисципліни «Мережеорієнтовані комп’ютерні технології»

Виконали:

Керечанин Олег,

Ткачук Констянтин

студенти групи ФКС 502
Перевірила: Шевцова Є.В.

Київ 2010
Умова та завдання
Створити веб-сайт, що складається з 3-х основних сторінок. Доступ до однієї з них повинен надатися після ідентифікації користувача. Також на сайті повинна бути форма зворотного зв’язку.

Виконання
Для створення сайту було використано ASP.NET, XHML та CSS.

Розробка велася в середовищі Visual Studio компанії Microsoft.
З допомогою XHML було збудовано скелет сайту. CSS використовували для оформлення зовнішнього вигляду сторінок.




CSS — cascading style sheets (каскадні таблиці стилів) — технологія опису зовнішнього вигляду документа, написаного мовою розмітки.
Таблиці стилів винесли у зовнішній файл і назвали його main.css.

Підключили стилі:

Головна сторінка:

Таблиця стилів:


body

{

background-image: url(../images/fon.png);

background-repeat: repeat;

height: 100%;

width: 100%;

margin:0;

}

html

{

height: 100%;

}

#aspnetForm

{

min-height:100%;

}

#log img

{

float:right;

height:359px;

padding:20px 0 0;

position:relative;

width:873px;

}

#main

{

height:auto !important;

min-height:100%;

padding-bottom:100px;

position:relative;

}

#footer

{

height:2em;

margin-top:-6em;

position:relative;

bottom:0;

}

#copy

{

padding-left: 20px;

bottom:0;

height:2.5em;

margin-top:50px;

}

#footer img

{

height:30px;

padding-top:2px;

position:absolute;

width:31px;

}

#footer span

{

color:#FFFFFF;

font-family:Arial;

font-size:1.6em;

padding-left:35px;

text-shadow:1px 1px 0 #8880CB;

}
#sitepas

{

background-image: url(../images/passform.png);

background-repeat: no-repeat;

background-position: center center;

height:500px;

}

#PassKeyPanels

{

display:block;

height:180px;

text-align:center;

width:100%;

padding-top:175px;

}

#ctl00_LogPlaceHolder_PassKeyLabel

{

color:#414141;

font-family:Arial;

font-size:2em;

}

#ctl00_LogPlaceHolder_PassKeyTextBox

{

height:35px;

width:300px;

color:#414141;

font-family:Arial;

font-size:1.6em;

border:1px dotted #858585;

}

#ctl00_LogPlaceHolder_TextBoxCustomValidator

{

font-family: Arial;

px;

}

#ctl00_LogPlaceHolder_SubmitButton

{

color:#414141;

font-family:arial;

font-size:22px;

font-weight:inherit;

height:35px;

width:100px;

}

.link

{

color: #8880CB;

font-family: Arial;

font-size: 2em;

background-color: #fff;

padding: 5px;

}

.link:hover

{

color: #fff;

font-family: Arial;

font-size: 2em;

background-color: #8880CB;

padding: 5px;

}

#text

{

margin:60px 0 0 40%;

position:absolute;

}

#text p

{

background-color:#8880CB;

color:#FFFFFF;

display:inline-block;

font-family:georgia;

font-size:1.6em;

font-style:italic;

margin:1px;

padding:0 5px 0 10px;

}
/*-------------------------FEEDBACK---------------------*/

#feedback

{

padding:20px 30px 0 30px;

}
#feedback input, #feedback textarea

{

border:1px solid #999999;

color:#575E64;

height:20px;

margin-top:3px;

width:80%;

}

#feedback textarea

{

height: 150px;

}

#feedback span

{

padding: 0;

color: #F03B58;

vertical-align:top;

}

#feedback .submit

{

padding-bottom:10px;

}

#feedback .submit input

{

color:#414141;

font-family:arial;

font-size:22px;

font-weight:inherit;

height:35px;

cursor: pointer;

}

#feedback .submit input:hover

{

text-decoration: underline;

}

#feedback h1

{

color:#414141;

font-family:Arial;

font-size:2em;

margin-top:0;

}

#feedback p

{

color:#414141;

font-family:Arial;

}

#FeedbackResultPanel

{

font-family:Arial;

color:#414141;

font-size:1.1em;

}

Наступне завдання це по переходу на сторінку «about me» провести ідентифікацію користувача. Для цієї задачі були використані можливості ASP.NET .
Сторінка виглядає так.

При введені правильного пароля, буде динамічно створена панель і перед користувачем відкриється уже сторінка з потрібним контентом:

Лістинг скрипта aboutme.aspx.cs

public partial class aboutme : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

bool passKeyAccepted = false;

if (Session["PassKeyAccepted"] != null)

{

passKeyAccepted = (bool)Session["PassKeyAccepted"];

}

MakePanelVisible(!passKeyAccepted);

}
private void MakePanelVisible(bool first)

{

PassKeyPanel.Visible = first;

ContentPanel.Visible = !first;

}
protected void OnSubmitButtonClicked(object sender, EventArgs e)

{

}
protected void OnValidatePassKey(object sender, ServerValidateEventArgs args)

{

NameValueCollection appSettings = WebConfigurationManager.AppSettings;

string passKey = appSettings["PassKey"];

if (args.Value == passKey)

{

Session["PassKeyAccepted"] = true;

MakePanelVisible(false);

args.IsValid = true;

}

else

{

args.IsValid = false;

}

}

}

Пароль зберігатиметься на сервері.







Останнє що потрібно було зробити – це зворотній зв’язок (як кажуть буржуї feedback).

Знову використовуюмо ASP.NET.

За допомогою XHML та CSS створюємо форму з конкретними полями.


Feedback






Name:


*


E-mail:




Title:


*

Massage:


*


















Наша форма після заповненя буде відправляти листа на деякий почтовий ящик.

Для цього скріптом динамічно створимо деяке тіло листа та знаючи налаштування почтового сервера, а також пароль та логін тестового почтового ящика ми зможемо відправити новостворений лист на конкретний почтовий адрес.
public partial class feedback : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{
}
protected void FeedbackSubmitClicked(object sender, EventArgs e)

{
var fromAddress = new MailAddress("tester.message@gmail.com", "User");

var toAddress = new MailAddress("oleg.kerechanyn@liverepair.com", "Oleg");

const string fromPassword = "tester";

const string subject = "Feedback";

string body = String.Format(

@"




Feedback message:

Name: {0}


E-mail: {1}


Title: {2}


Message:


{3}

Схожі:

Уроку. Оптична система ока. Лабораторна робота №1 «Визначення акомодації...
УРОК № З. Оптична система ока. Лабораторна робота №1 «Визначення акомодації ока»
Комплексна лабораторна робота Географія

Уроку: Урок Тема : Плауноподібні. Хвощеподібні. Лабораторна робота...
Тема: Плауноподібні. Хвощеподібні. Лабораторна робота №13. Особливості будови плауна булавовидного та хвоща польового
Лабораторна робота № Робота із сервісом Документи Google (GoogleDocs)
...
Лабораторна робота №2
Матеріальне забезпечення:  інструкція до лабораторної роботи,  ПК, дисковод, викрутка
Лабораторна робота №3
Матеріальне забезпечення:  інструкція до лабораторної роботи,  ПК, оптичний привод, викрутка
Лабораторна робота №
Мета роботи: Навчитися визначати кислотність середовища, записувати рівняння гідролізу
Жук Ю. О. Лабораторна робота з фiзики та проблема iнструкцiї до неї...
Жук Ю. О. Лабораторна робота з фiзики та проблема iнструкцiї до неї // Фізика та астрономія в школі. 1999. N –С. 17-19
Лабораторна робота №9
Мета: ознайомити із основними елементами інтерфейсу та головними функціями програми для роботи з відео
Лабораторна робота №23-26 Тема
Мета: навчитися макетувати макет буклету з використанням шаблонів, стилів, модульної сітки
Додайте кнопку на своєму сайті:
Портал навчання


При копіюванні матеріалу обов'язкове зазначення активного посилання © 2013
звернутися до адміністрації
bibl.com.ua
Головна сторінка