Лабораторная работа №4 Браузер и FTP-клиент 


Мы поможем в написании ваших работ!



ЗНАЕТЕ ЛИ ВЫ?

Лабораторная работа №4 Браузер и FTP-клиент



Лабораторная работа №3 выполняется после изучения материала, посвященного описанию принципов использования стандартных компонентов Delphi, Visual C++ или Java, для управления соединениями с сервером по протоколам HTTP и FTP.

Цель работы:

написать GUI приложение для ОС Windows, представляющее собой простой Web – браузер и FTP – клиент, используя стандартные компоненты Delphi, Visual C++, Java Рекомендуемая литература:

Компьютерные сети. 4-е издание / Э. Таненбаум. – Спб.: Питер, 2003. – 992 с.: ил. Глава 7 («Прикладной уровень») раздел «HTTP – протокол передачи гипертекста».

Описание протокола HTTP в спецификации RFC-2616 (ARCHIVE\Documents\RFC\rfc2616.txt).

Описание протокола FTP в спецификации RFC-959 (ARCHIVE\Documents\RFC\rfc0959.txt).

 

На различных платформах и в языках программирования предусмотрены стандартные классы для работы с сетью.

Например, в состав библиотеки MFC (Microsoft Foundation Classes – библиотека базовых классов) включено большое количество классов, с помощью которых можно писать как клиентские, так и серверные приложения. В частности, для связи с Internet в Visual C++ существует так называемый WinInet Class. В него входят несколько подклассов.

 

Задание на лабораторную работу Следует создать сетевое приложение на любом из перечисленных языков.

1. Браузер HTML. Создать на любом из трех языков программирования (C++, Delphi, Java, С#) простой Web-браузер. С установленного ранее Web- сервера запросите и получите Web-страницу с рисунками, текстом и ссылками. Ссылки должны работать, то есть щелчок мышью по ссылке вызывает загрузку и отображение соответствующей страницы. У браузера должна быть адресная строка, в которую заносится адрес URL.

2. FTP - клиент. Создать на любом из трех языков программирования (C ++, Delphi, Java, C#) простое приложение-клиент для работы по протоколу FTP. Приложение должно обеспечивать соединение с сервером, передачу имени пользователя и пароля, отображение списка каталогов и файлов, навигацию по каталогам, копирование файла или каталога на сторону клиента. У приложения клиента должны быть текстовые поля для ввода имени сервера, пользователя, пароля, объект для отображения содержимого каталогов, кнопка для копирования, и удаления каталогов и файлов.

 

Лабораторная работа №5. HTML, Javascript технология PHP

HTML и Javascript

Лабораторная работа выполняется после изучения основ Web – программирования на языке HTML и JavaScript.

Цель работы:

Научиться использовать технологии HTML, JavaScript, PHP для создания простых Web - страниц со статическим содержанием Материалы:

1. Материалы лекций, 2. http:

//ru.wikipedia.org/wiki/ – элементы HTML.

3. http:

//ru.wikipedia.org/wiki/JavaScript - JavaScript В таблице дан список файлов и описание электронной документации прилагаемой в архиве.

Инструменты:

Текстовый редактор Web - браузер Internet Explorer Структура HTML-документа HTML — это теговый язык разметки документов, то есть любой документ на языке HTML представляет собой набор элементов, причем начало и конец каждого элемента обозначается специальными пометками, называемыми тегами. Регистр, в котором набрано имя тега, в HTML значения не имеет. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных (например, тег перевода строки <br>). В этом случае обычно не указывается закрывающий тег.

Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства (например, размер шрифта для тега <font>). Атрибуты указываются в открывающем теге. Вот пример части разметки HTML- документа:

<p>Текст между двумя тегами - открывающим и закрывающим.</p> <a href="http:

//www.example.com">Здесь элемент содержит атрибут href.</a> А вот пример пустого элемента:

<br> Каждый HTML-документ, отвечающий спецификации HTML какой- либо версии, обязан начинаться со строки декларации версии HTML <! DOCTYPE>, которая обычно выглядит примерно так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01// EN" "http:

//www.w3.org/TR/html4/strict.dtd"> Если эта строка не указана, то добиться корректного отображения документа в браузере становится труднее.

Далее обозначается начало и конец документа тегами <html> и </html> соответственно. Внутри этих тегов должны находиться теги заголовка (<head></head>) и тела (<body></body>) документа.

Основные элементы HTML – документа Теги и их параметры нечувствительны к регистру. То есть <A HREF = http:

//yahoo.com> и <a href = http:

//yahoo.com> означают одно и то же.

В последних версиях HTML практически у каждого тега огромное число необязательных параметров — обычно не меньше 15. Мы приводим только основные параметры тегов.

Гиперссылки <A HREF=url > гиперссылка </A> — гиперссылка.

Текстовые блоки <H1> … </H1>, <H2> … </H2>, …,<H6> … </H6> — заголовки 1, 2, … 6 уровня:

<P> — новый параграф. Можно в конце параграфа поставить </P>, но это не обязательно;

<BR> — новая строка. Этот тег не закрывается (то есть не существует тега </BR>;

<HR> — горизонтальная линия;

<BLOCKQUOTE> … </BLOCKQUOTE> — цитата.

Обычно текст сдвигается вправо;

<PRE … </PRE> — режим preview.

В этом режиме текст заключается в рамку и никак не форматируется (то есть теги, кроме </PRE>, игнорируются, и переводы строки ставятся там, и только там, где они есть в оригинальном документе);

<DIV> … </DIV> — блок (обычно используется для применения стилей CSS);

<SPAN> … </SPAN> — строка (обычно используется для применения стилей CSS).

Форматирование текста <EM> … </EM> — логическое ударение (обычно отображается курсивным шрифтом);

… </STRONG> — усиленное логическое ударение (обычно отображается жирным шрифтом);

<I> … </I> — выделение текста курсивом;

<B> … </B> — выделение текста жирным шрифтом;

<U> … </U> — подчёркивание текста;

<S> … </S> — зачёркивание текста;

<BIG> … </BIG> — увеличение шрифта;

<SMALL> … </SMALL> — уменьшение шрифта;

<BLINK> … </BLINK> — мигающий текст. Это один из самых ненавидимых тегов, потому что мигающий текст неприятен для глаз;

<MARQUEE> … </MARQUEEK> — сдвигающийся по экрану текст. Степень народной любви к этому тэгу примерно такая же, как и к мигающему;

<SUB> … </SUB> — подстрочный текст. Например, H<SUB>2</SUB>O создаст текст H2O;

<SUP> … </SUP> — надстрочный текст. Например, E=mc<SUP>2</SUP> создаст текст E=mc2;

<FONT параметры> … </FONT> — задание параметров шрифта.

<STRONG> Списки <UL> <LI> первый элемент </LI> <LI> второй элемент </LI> <LI> третий элемент </LI> </UL> создаёт список:

первый элемент второй элемент третий элемент

Если вместо <UL> (Unordered List, что означает ненумерованный список) поставить <OL> (Ordered List, нумерованный список), список получится нумерованным:

первый элемент второй элемент третий элемент

Объекты <IMG SRC=имя или URL> — вставка изображения. Этот тег не закрывается;

<APPLET>…</APPLET> — вставка Java-апплетов;

<SCRIPT>…</SCRIPT> — вставка скриптов;

Таблицы — создание таблицы. Параметры тега:

BORDER — толщина разделительных линий в таблице;

CELLSPACING — расстояние между клетками;

CAPTION — заголовок таблицы (этот тег необязателен);

TR — строка таблицы;

TH — заголовок столбца таблицы (этот тег необязателен);

TD — ячейка таблицы;

height - высота таблицы;

<TABLE>…</TABLE> Так, например, код:

<TABLE BORDER="1" CELLSPACING="0">

<CAPTION> Улов крокодилов </CAPTION>

<TH> Год </TH>

<TH> Улов </TH>

<TR> <TD> 1997 </TD> <TD> 214 </TD> </TR>

<TR> <TD> 1998 </TD> <TD> 216 </TD> </TR>

<TR> <TD> 1999 </TD> <TD> 207 </TD> </TR>

</TABLE>

<FORM> — создание формы

<INPUT> — элемент ввода (может иметь разные функции — от ввода текста до отправки формы)

<TEXTAREA> — текстовая область (многострочное поле для ввода текста)

<SELECT> — список (обычно в виде выпадающего меню)

<OPTION> — пункт списка JavaScript JavaScript — интерпретируемый язык программирования, являющийся одной из реализаций языка ECMAScript и основанный на концепции прототипов, пришедшей из языка Self.

В настоящее время JavaScript используется в основном для создания сценариев поведения браузера, встраиваемых в Web-страницы, но также находит применение в качестве скриптового языка доступа к объектам приложений. Некоторые приложения имеют встроенный интерпретатор JavaScript, позволяющий расширять их возможности без изменения самого приложения.

JavaScript обладает рядом свойств объектно-ориентированного языка, но благодаря прототипированию поддержка объектов в нём отличается от традиционных объектно-ориентированных языков. Так же, JavaScript имеет ряд свойств, присущих функциональным языкам — функции как объекты первого уровня, объекты как списки, карринг (currying), анонимные функции, замыкания (closures) — что придаёт языку дополнительную гибкость.

Название JavaScript является зарегистрированной торговой маркой компании Sun Microsystems, Inc.

О языке JavaScript Синтаксис JavaScript хотя и похож на язык Си, концептуально имеет коренные отличия. Основными чертами JavaScript являются:

функции как объекты первого уровня обработка исключений автоматическое приведение типов автоматическая сборка мусора анонимные функции Изначально JavaScript был разработан как скриптовый язык для расширения возможностей существующих приложений. В первую очередь он стал хорошо известным и популярным благодаря использованию в браузерах.

При использовании в рамках технологии DHTML, код JavaScript включается в HTML-код страницы и исполняется интерпретатором, встроенным в браузер. JavaScript заключается в теги <script></script>, по спецификации HTML 4.01 у тега <script> обязателен атрибут type="text/javascript", хотя в большинстве браузеров язык сценариев по умолчанию именно JavaScript.

При этом атрибут language (language="JavaScript"), несмотря на его активное использование, не входит в стандарт и поэтому считается некорректным.

Примеры программ на JavaScript Пример объявления и использования класса в JavaScript (класс является одновременно функцией, так как фунции - это объекты первого уровня):

function MyClass() { this.myValue1 = 1;

this.myValue2 = 2;

}

var mc = new MyClass();

mc.myValue1 = mc.myValue2*2;

Скрипт, выводящий модальное окно с классической надписью «Hello, World!» внутри браузера:

<script type="text/javascript"> alert('Hello, World!');

</script>

Следуя концепции интеграции JavaScript в существующие системы, браузеры поддерживают включение скрипта, например, в значение атрибута события:

<a href="delete.php" onclick="return confirm('Вы уверены?'); ">Удалить</a> Здесь при нажатии на ссылку функция alert('Вы уверены?');

вызвает модальное окно с надписью «Вы уверены?», а return false;

блокирует переход по ссылке.

Разумеется, этот код будет работать только если в браузере есть и включена поддержка JavaScript, иначе переход по ссылке произойдет без предупреждения.

Есть и третья возможность подключения JavaScript — написать скрипт в отдельном файле, а потом подключить его с помощью конструкции <script type="text/javascript" src="http://Путь_до_файла_со_скриптом"></script>

 

Задание на лабораторную работу

Требуется создать HTML - страницу с внедренным скриптом на языке JavaScript, реализующим некоторый сценарий (в соответствии со своим вариантом). Сценарии даны ниже, в разделе «Варианты».

Обязательные требования к каждому сценарию:

1. Вывести в строке статуса часы, показывающие текущее время в формате чч:мм:сс.

2. При движении мыши по странице выводить в строке статуса текущие координаты указателя мыши по вертикали и горизонтали

3. Скрипт должен осуществлять проверку корректности введенных значений, выводить при необходимости окна с сообщениями о неправильных значениях и очищать после этого поле ввода, содержащее ошибку.

4. Расположить страницу локально, например, в домашнюю директорию «test1.ru» под именем index.html, и протестировать работу с помощью браузера.

Запрещено использовать какие либо CASE-средства и программы- построители HTML, например:

MS Word, FrontPage и т.д. Все содержимое файлов должно быть сверстано вручную в простом текстовом редакторе.

При использовании автоматизированных средств контрольные работы приниматься не будут. Ограничение на размер файла HTML – 1Кб.

Суммарный объем рисунков 200Кб.

Далее приведены варианты заданий.

Варианты:

Калькулятор:

Создать форму, позволяющую осуществлять основные четыре арифметических действия. Должны быть поля для ввода аргументов и поле для вывода результата. Между полями аргументов должен быть выпадающий список, предоставляющий выбор одного из четырех арифметических действий. Также должно быть четвертое поле, в которое вводится предполагаемое значение результата. Если поле заполнено, то скрипт должен сверить полученный результат и вывести сообщение «Верно!» или «Неверно!» в зависимости от правильности результата.

Конвертер валют и физических величин:

Создать форму позволяющую переводить километры в мили, метры в футы, килограммы в фунты и наоборот (рис. 4.4). Также должен осуществляться пересчет различных валют по курсу. Например, американские доллары в японские иены, рубли в индийские рупии и т.д.

Должно быть не менее десяти различных величин или валют. Выбор величин должен сопровождаться выпадающим списком.

«Знаете ли Вы HTML»:

Создайте скрипт, задающий 5-10 вопросов о тегах и атрибутах HTML (рисунок 4.5). Вопросы должны делиться на две группы:

выбор из существующих вариантов (выпадающий список) и открытые вопросы, допускающие ответ в открытом виде (просто текст). Затем скрипт должен проверить правильность и выдать процент успешных ответов.

Создайте форму, на которой разместите несколько чек-боксов (кнопка- флажок с независимой фиксацией). Каждый элемент должен сопровождаться текстовой строкой представляющей собой ссылку на некоторую страницу Интернет. Когда пользователь отмечает чек-бокс, то строка, соответствующая чекбоксу автоматически записывается в текстовое поле на странице. После нажатия кнопки «Ок» скрипт должен открыть несколько окон в браузере в соответствии с выбранными ссылками. Это могут быть страницы, размещенные на веб- сервере Apache, в других сайтах test2.ru и т.д. Можно создать свои собственные размещения сайтов. О том, как это сделать смотрите описание пакета Denwer.

Фото-галерея:

Создать страницу со скриптом, который отображает в зависимости от действий пользователя (нажатие на кнопку) несколько (не более 5-10) различных рисунков попеременно в одной и той же области HTML- страницы (рис. 4.7). Если пользователь выбирает кнопку «Все на одной странице», то скрипт должен открыть новую страницу, на которой должны быть размещены все рисунки в компактном виде.

 

 

Технология PHP

Требуется создать клиент-серверную приложение, взаимодействующее с пользователем с применением технологий HTML и PHP. Основной сценарий, такой же, как в лабораторной работе №7, но вычислительная часть должна располагаться на сервере, генерация страниц должна происходить на серверной стороне, на основе PHP- скриптов.

Инструментарий:

Любой текстовый редактор Веб-сервер Apache в составе пакета Denwer в локальном каталоге С:\WebServers Скрипты размещаются в подкаталогах home/localhost и т.п.

Документация по php находится на диске в файле php_manual_ru.chm Введение в PHP PHP (Hypertext Preprocessor – гипертекстовый препроцессор) - это широко используемый язык программирования общего назначения с открытым исходным кодом. PHP сконструирован специально для ведения Web-разработок и может внедряться в HTML-код.

Ниже приведен простой пример программирования на PHP:

<html>

<head>

<title>Пример</title> </head>

<body> <?php echo "Привет, я - скрипт PHP!";?> </body>

</html>

Обратите внимание на отличие этого скрипта от скриптов, написанных на других языках, например, на Perl или C - вместо того, чтобы создавать программу, которая занимается формированием HTML-кода и содержит бесчисленное множество предназначенных для этого команд, вы создаете HTML-код с несколькими внедренными командами PHP (в приведенном случае, предназначенными для вывода текста). Код PHP отделяется специальными начальным и конечным тегами, которые позволяют процессору PHP определять начало и конец участка HTML-кода, содержащего PHP-скрипт.

Существует четыре набора тегов, которые могут быть использованы для обозначения PHP-кода. Из них только два (<?php...?> и <script language = "php">……… </script>) всегда доступны;

другие могут быть включены или выключены в конфигурационном файле php.ini.

Теги, поддерживаемые PHP:

1. <?php echo("если вы хотите работать с документами XHTML делайте так\n");?>

2. <? echo ("это простейшая инструкция обработки SGML\n");?>

<?= выражение?>

Это синоним для "<? echo выражение?>" или XML, language="php"> редакторы (например, FronPage) обработки”);

</script>

3. <script echo ("некоторые не любят инструкции

4. <% echo ("Вы можете по выбору использовать теги в cтиле ASP");%>

<%= $variable;# Это синоним для "<% echo..." %>

Первый способ, <?php...?>, наиболее предпочтительный, так как он позволяет использовать PHP в коде, соответствующем правилам XML, таком как XHTML.

Работа с формами

Одно из главнейших достоинств PHP - то, как он работает с формами HTML. Здесь основным является то, что каждый элемент формы автоматически становится доступен вашим программам на PHP. Для подробной информации об использовании форм в PHP читайте раздел " Переменные из внешних источников" [Руководства по PHP].

Ниже приведен пример формы HTML:

<form action="action.php" method="POST">

Ваше имя:

<input type="text" name="name" />

Ваш возраст:

<input type="text" name="age" />

Ваш пол:

<input type = “radio” name = “gender” CHEKED VALUE = “1”>Мужчина <br>

<input type = “radio” name = “gender” VALUE = “2”>Женщина <input type="submit">

</form>

 

В этой форме нет ничего особенного. Это обычная форма HTML без каких-либо специальных тегов. Когда пользователь заполнит форму и нажмет кнопку отправки, будет вызвана страница action.php. В этом файле может быть что-то вроде:

Здравствуйте,

<?php echo $_POST["name"];?>.

<br> Вам

<?php echo $_POST["age"];?> лет. <br> Вы <?php if ($_POST["gender"] = 1) {?> Мужчина. <?php }

else {?> Женщина. <?php }?>

Пример вывода данной программы:

Здравствуйте, Владимир.

Вам 30 лет.

Вы мужчина.

работа данного кода проста и понятна. Переменные $_POST["name"] и $_POST["age"] автоматически установлены для вас средствами PHP. В переменной $_POST["gender"] находится значение VALUE, в зависимости от выбранного переключателя (аналогично можно передавать значения элементов флажков, но при этом значения их атрибута «name» должны отличаться). Заметим, что метод отправки нашей формы - POST. Если бы мы использовали метод GET, то информация нашей формы была бы в суперглобальной переменной $_GET. Также можно использовать переменную $_REQUEST, если источник данных не имеет значения. Эта переменная содержит смесь данных GET, POST, COOKIE и FILE.

Варианты:

1. Клиент-серверный вычислитель:

Реализовать сценарий 1 лабораторной работы №7 с некоторыми изменениями. На странице HTML должна использоваться форма, принимающая данные от пользователя и отправляющие их на Web-сервер, где выполняются вычисления, и ответ отправляется на сторону клиента в виде автоматически сформированной HTML-страницы. Никакие вычисления на стороне клиента выполняться недолжны.

2. Клиент-серверный конвертер величин:

Реализовать сценарий 2 лабораторной работы №7 с некоторыми изменениями. На странице HTML должна использоваться форма, принимающая данные о величине сумм от пользователя и отправляющие их на Web-сервер, где выполняется конвертирование валют, а ответ отправляется на сторону клиента в виде автоматически сформированной HTML-страницы. Никакие вычисления на стороне клиента выполняться недолжны.

3. Клиент-серверное тестирование:

В задании 3 лабораторной работы №7 есть один минус с точки зрения безопасности. Так как javascript является частью пересылаемой клиенту страницы, то тестируемый субъект может узнать ответы из исходного кода страницы.

Поэтому, необходимо реализовать клиент-серверное приложение, в котором клиентская часть только отображает вопросы и фиксирует ответы, пересылая их на сервер. На сервере происходит обработка ответов, подсчет правильных и неправильных, и выставляется итоговая оценка.

4. Обновление списка ссылок:

Видоизменить сценарий 4 лабораторной работы №7 со следующим образом:

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

«Вами были выбраны следующие ссылки:». В теле страницы должны отображаться выбранные клиентом строки.

5. Фото-галерея:

Сценарий полностью соответствует варианту 5 лабораторной работы №7, только действия пользователя (щелчки мышью на кнопках или ссылках) передаются серверу, на котором формируется HTML страница с соответствующим рисунком и отправляется обратно клиенту.

 

 



Поделиться:


Последнее изменение этой страницы: 2016-08-10; просмотров: 236; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 18.225.255.134 (0.094 с.)