HTML, ColdFusion 4.5
реклама
Cold Fusion 4.5 Спецификация HTML Настройка БД Схема работы ColdFusion CFML Примеры программ Федерация Интернет Образования г. Красноярска Автор презентации: Беляев С.Н. E-mail: [email protected] http://bsn.docentr.ru Понятие гипертекстового документа С появлением новых технологий и ростом числа вычислительной техники, растет потребность обмена информацией с использованием ЭВМ. Эта задача решается путем объединения компьютеров в единую глобальную сеть, называемую Internet. В данном направлении большую популярность обрела так называемая www-технология, как средство получения информации путем перемещения по гипертекстовым документам. Гипертекстовый документ может содержать текстовую, графическую, звуковую информацию, а самое главное, он содержит ссылки на другие аналогичные ему документы, используя которые можно перемещаться с одного документа на другой. Каждый такой документ имеет адрес. Например: http://www.docentr.ru/games/index.html. Основной особенностью таких страниц является возможность переадресации на подобные страницы путем задания ссылок. Пример файла в формате HTML <!– Содержимое файла index.htm --> <HTML> <HEAD> <TITLE>Example Page</TITLE> </HEAD> <BODY> Hello World ! </BODY> </HTML> Просмотр таких страниц осуществляется с помощью специальных программ, называемых браузерами. Наиболее распространенным браузером на сегодняшний день является Internet Explorer. Теги языка HTML Все элементы страницы формата HTML представляются в виде тегов. Перечислим наиболее часто используемые теги. Ссылка на документ: <A HREF=’’direct.html’’>Ссылка</A> В данном примере на странице отображается текст “Ссылка”, который отражается характерным цветом. При нажатии на данный текст осуществляется переход на документ “direct.html” Свойства текста: <FONT SIZE=5 COLOR=’’FF0000’’> Text </FONT> Здесь SIZE – размер шрифта(от 1 до 7), COLOR – цвет <BR> - переход на следующую строку <HR> - горизонтальная линия Теги языка HTML Вставка графического изображения: <IMG SRC=’’image.jpg’’ border=0 alt=”графическое изображение”> Таким образом можно встраивать графические файлы в форматах gif и jpg. В данном примере реализована вставка изображения из файла “image.jpg”. border и alt – необязательные параметры, означающие толщину рамки рисунка и подсказку, которая отражается при наведении курсора мышки на изображение. Форматированный вывод элементов страницы по центру: <CENTER>…</CENTER> Бегущая строка: <MARQUEE DIRECTION=LEFT> Бегущая строка </MARQUEE> Форматированный текст: <p align=justify> Text </p> Таблицы Для структурированного вывода данных часто приходиться прибегать к использованию таблиц. Язык HTML поддерживает такую возможность и реализует ее при помощи тэга <TABLE>...</TABLE> . В таблицах доступны следующие тэги и свойства: <TABLE BORDER=5> - ширина границ таблицы <TABLE WIDTH=100 HEIGHT=100> - ширина и высота таблицы, можно определять эти параметры в процентах от размера экрана, в этом случае нужно использовать знак «%» <TABLE ALIGN=CENTER> - расположение таблицы на экране, возможные значения: LEFT, RIGHT, CENTER, MIDDLE и BOTTOM. <TABLE CELLSPACING=5 CELLPADDING=10> - расстояние между ячейками и дополнение ячеек. <CAPTION>..</CAPTION> - заголовок таблицы <TR>...</TR> - строка таблицы <TD>...</TD> - ячейка <TD COLSPAN=3> - количество объединенных в строке ячеек в одну <TD ROWSPAN=2> - количество объединенных в столбце ячеек в одну <TD BGCOLOR=YELLOW> - цвет фона ячейки Примеры таблиц <html> <head> <title></title> </head> <body> <center> <table width=600><tr><td> </td></tr> </table> </center> </body> </html> <html> <head> <title>Table</title> </head> 11 12 13 21 22 23 <body> <table width=300 height=200 border=5 align=center> <tr align=center> <td>11</td> <td bgcolor=yellow>12</td> <td>13</td> </tr> <tr align=center> <td>21</td> <td>22</td> <td>23</td> </tr> </table> </body> </html> Таблица с объединенными ячейками <html> <head> <title>Table2</title> </head> <body> <table cellspacing=5 cellpadding=10 border=5 align=center> <caption> Table </caption> <tr align=center> <td colspan=2>11-12</td> <td rowspan=2>13-23</td> </tr> <tr align=center> <td>21</td> <td>22</td> </tr> </table> </body> </html> 11-12 13-23 21 22 Пример сложной таблицы <html> <head> <title>Table3</title> </head> <body> <table width=300 height=300 border=5 align=center> <tr align=center> <td width=100>1</td> <td colspan=2>2</td> </tr> <tr align=center> <td colspan=2>3</td> <td rowspan=2>4</td> </tr> <tr align=center> <td>5</td> <td>6</td> </tr> </table> </body> </html> 1 2 3 4 5 6 Пример формы-бланка <b>Пример формы-бланка</b><br><br> <form action=“file.cfm"> Логин: <input type="text" size=20 name="login"><br> Пароль: <input type="password" size=20 name="password"><br> <input type="submit" value="Enter"> </form> Использование флажков и переключателей <b>Использование флажков(CheckBox) и переключателей(Radio)</b><br><br> <form action=“file.cfm"> Выберите любимые цвета:<br> <input type="checkbox" name="choice1" value="red" checked> красный<br> <input type="checkbox" name="choice2" value="green"> зеленый<br> <input type="checkbox" name="choice3" value="blue"> синий<br> Ваш пол:<br> <input type="radio" name="sex" value="male" checked> мужской<br> <input type="radio" name="sex" value="female"> женский<br> <input type="submit" value="Enter"> </form> Списки и раскрывающиеся меню <b>Списки и раскрывающиеся меню</b><br><br> <form action=“file.cfm"> Выберите любимые цвета:<br> <select name="choice" multiple> <option value="red" selected>красный <option value="green">зеленый <option value="blue">синий </select><br> Ваш пол:<br> <select name="sex"> <option value="male" selected>мужской <option value="female">женский </select><br> <input type="submit" value="Enter"> <input type="reset" value="Reset"> </form> Область ввода текста <b>Получение расширенных данных</b><br><br> <form action="file.cfm"> <textarea name="comments" cols=60 rows=10></textarea><br><br> <input type="submit" value="Send"> </form> Основы ColdFusion ColdFusion – одна из новинок в веб-программировании, технология более высокого уровня чем CGI и PHP. ColdFusion устанавливается как под Unix(Apache), так и под Windows’98 и Windows XP(WebSite). Данная технология идеальна для работы с БД, поскольку механизм работы с ними максимально упрощен. Программы на ColdFusion хранятся в файлах с расширением *.cfm, которые представляют собой файлы с кодом html с дополнительными тегами ColdFusion, которые имеют характерное название, начинающееся на ”CF”. Схема работы ColdFusion Установка ColdFusion Для установки работы с ColdFusion необходимо установить один из www-серверов, поддерживающих данную программную разработку. Наиболее простой вариант установки предполагает внедрение ColdFusion в WebSite 2.0 . Дело не только в том, что WebSite прост в установке сам по себе, основным аспектом данной рекомендации является тот факт, что ColdFusion предполагает установку в первую очередь именно под этот сервер, поэтому при установке под WebSite достаточно подтвердить тот факт, что установка происходит именно под этот сервер, тогда в этом случае программа установки автоматически настраивает ваш www-сервер под ColdFusion. Для разработки приложений на ColdFusion рекомендуется использовать специальную среду для написания программ, именуемую ColdFusion Studio, которая специально для этого предназначена. После установки всех программ для работы сервера необходимо запустить файлы серверов. Как правило, речь идет о следующих файлах: 1) C:\WebSite\httpd32.exe - www-сервер WebSite 2.0 2) C:\CFUSION\BIN\cfserver.exe - сервер ColdFusion 4.5 После запуска данных программ на вашем компьютере работает веб-сервер с поддержкой файлов .cfm программного пакета ColdFusion Настройка БД ColdFusion Для работы с базами данных в ColdFusion предусмотрена система псевдонимов (alias). Псевдоним БД – это имя некоторой базы данных, которое прописывается в настойках таким образом, что для обращения к таблицам данной базы достаточно указать alias. Это удобство позволяет легко менять тип БД, не меняя текста программ. Рассмотрим принцип определения псевдонима некоторой БД Microsoft Access, хранящейся в некотором файле school.mdb. Предположим, мы хотим чтобы псевдоним school соответствовал данной БД. Для этого необходимо запустить веб-сервер и сервер ColdFusion. Затем выбрать в меню следующий пункт: Пуск\Программы\ColdFusion Server 4.5\ColdFusion Administrator Откроется диалоговое окно, в котором нужно будет ввести пароль администратора, который был задан при установке ColdFusion и нажать «Password». Далее в разделе «Data sources» нужно выбрать ODBC. Откроется раздел администрирования псевдонимов, в котором и следует прописать alias. Настройка БД ColdFusion Для добавления псевдонима в поле Data Source Name следует прописать имя. Например, можно указать алиас “source”. Поскольку данная БД создана Microsoft Access, то в поле ODBC Driver ничего менять не нужно (данное значение стоит по умолчанию). Для добавления нужно нажать Add. Появится форма ввода данных для псевдонима. Здесь в поле DataBase File нужно указать полный путь(на локальном компьютере) к файлу school.mdb. После чего произойдет связывание псевдонима с файловой БД. При описании псевдонима нужно следить, чтобы после добавления в поле Verify стояло значение Verify. Значение Failed указывает на ошибку. В большинстве случаев причина в неверном указании пути к файлу, либо в неверном формате БД. После описания псевдонимов, можно писать программы, использующие данные БД. Пример программы <form action=mult.cfm> x = <input name=x><br> y = <input name=y><br> <input type=submit value="Умножить"> </form> <cfif isDefined("x") and isDefined("y")> <cfoutput> <cfset z=x*y> #x#*#y#=#z# </cfoutput> </cfif> Вход по паролю Следующий пример программы демонстрирует возможность реализации входа по паролю: <cfif isDefined("login") and isDefined("password")> <cfif login is "admin" and password is "123"> Добро пожаловать! <cfelse> <font color=red><b> Неверный логин или пароль </b></font> </cfif> <cfelse> <form action=password.cfm method=post> Логин: <input type=text name=login><br> Пароль: <input type=password name=password><br> <input type=submit value="Войти"> </form> </cfif> Теги языка CFML Приведем описание наиболее часто используемых тегов языка CFML: <cfset var=value> - определение переменной, оператор присваивания <cfinclude template = ”file.cfm”> - включение файла в код программы <cflocation url = ”http://site.ru”> - переадресация по указанному адресу <cfoutput>…</cfoutput> - вывод данных, при этом для вывода значений переменных используется запись #var#, таким же образом в ColdFusion принимаются входные параметры, переданные из формы <cfloop index = ”i” from 1 to 10> … </cfloop> - цикл с параметром <cfif> … <cfelse> … </cfif> - условный оператор (можно без <cfelse>) <cfparam name = ”a” default = 0> - присвоение значения неопределенной переменной <cfquery name=q1 datasource = ”alias”> … </cfquery> - определение запроса на языке SQL к базе данных, имеющей псевдоним alias <cfoutput query = ”q1”> … </cfoutput> - вывод результатов запроса по заданному имени, при выводе значения полей записей извлекаются как #field_name# <cfinsert datasource=“source" tablename=“tname“> - вставка записи в таблицу <cfupdate datasource=“source" tablename=“tname“> - изменение полей таблицы Пример программы с БД <!--- Файл school.cfm ---> <cfquery name="q" datasource="school"> SELECT id,fio,subject FROM teacher </cfquery> <table border=1> <tr bgcolor=cyan><td>№</td><td>Ф.И.О.</td><td>Предмет</td></tr> <cfoutput query="q"> <tr bgcolor=eeeeee><td>#id#</td><td>#fio#</td><td>#subject#</td></tr> </cfoutput> </table> Использование сессий Как и во многих программных средствах создания динамических страниц в ColdFusion есть возможность использовать сессии. В сессии возможно хранение значений, которые доступны в любом .cfm – файле. Каждая сессия характеризуется именем приложения(AppName) и сохраняется в течении некоторого времени, которое можно указать, используя поле sessionTimeout в следующем теге CFML: <cfapplication name = AppName sessionTimeout = #CreateTimeSpan(days, hours, minutes, seconds)# sessionManagement = "Yes" > Далее в данном файле возможна запись и извлечение значений из сессии следующим образом: <cfset value = session.value> <cfset session.value = value> Использование сессий удобно при хранении таких значений как имя пользователя и пароль при навигации по различным программам, где требуется идентификация пользователей. Переменные окружения При написании программ иногда полезно извлекать некоторую информацию о пользователях, выполняющих программу. Например, можно узнать IP-адрес пользователя или тип и версию браузера, которым он пользуется. Все это можно сделать, используя переменные окружения. Следующий пример демонстрирует эту возможность: <cfoutput> <I><B>REQUEST_METHOD</B></I>=#CGI.REQUEST_METHOD#<BR> <I><B>QUERY_STRING</B></I>=#CGI.QUERY_STRING#<BR> <I><B>CONTENT_LENGTH</B></I>=#CGI.CONTENT_LENGTH#<BR> <I><B>CONTENT_TYPE</B></I>=#CGI.CONTENT_TYPE#<BR> <I><B>GATEWAY_INTERFACE</B></I>=#CGI.GATEWAY_INTERFACE#<BR> <I><B>REMOTE_ADDR</B></I>=#CGI.REMOTE_ADDR#<BR> <I><B>REMOTE_HOST</B></I>=#CGI.REMOTE_HOST#<BR> <I><B>SCRIPT_NAME</B></I>=#CGI.SCRIPT_NAME#<BR> <I><B>SCRIPT_FILENAME</B></I>=#CGI.SCRIPT_FILENAME#<BR> <I><B>SERVER_NAME</B></I>=#CGI.SERVER_NAME#<BR> <I><B>SERVER_PORT</B></I>=#CGI.SERVER_PORT#<BR> <I><B>SERVER_PROTOCOL</B></I>=#CGI.SERVER_PROTOCOL#<BR> <I><B>SERVER_SOFTWARE</B></I>=#CGI.SERVER_SOFTWARE#<BR> <I><B>HTTP_ACCEPT</B></I>=#CGI.HTTP_ACCEPT#<BR> <I><B>HTTP_USER_AGENT</B></I>=#CGI.HTTP_USER_AGENT#<BR> </cfoutput> Работа со строками <cfset Str=Str1&Str2> - сложение строк Replace(string, substring1, substring2 ) - функция, заменяющая в строке sring все вхождения подстроки sunstring1 строкой substring2. Функция возвращает соответствующую строку результата замены. Left(string, count) – возвращает строку состоящую из count первых символов строки string Right(string, count) – возвращает строку состоящую из count последних символов строки string Insert(substring, string, position) – вставка строки substring в строку string, начиная с позиции с номером position. Функция возвращает результат вставки. Find(substring, string ) – поиск подстроки substring в строке string. Если такая строка встречается, то функция возвращает номер позиции первого вхождения подстроки, в противном случае функция вернет 0 Следующая функция позволяет заменять спецсимволы <,>,& специальные конструкции, что позволит избежать работу тегов в тексте: ReplaceList(string, "&,<,>", "&,&lt;,&gt;") на Курс методистов интернет-образовния Федерация Интернет-образования Конец курса
