Разработка интернет-приложений

Министерство наукивысшего

образованияРоссийскойФедерации

Федеральноегосударствеобразовательноебюджетучреждение высшегообраз вания

«ТОМСКИЙГОСУДАРСТВЕННЫЙУНИВЕРСИТЕТ СИСТЕМУПРАВЛЕНИЯРАДИОЭЛЕКТРОНИКИ»ТУСУР()

Кафедраавтоматизации бработкиинформацииАОИ()

РАЗРАБОТКА ИНТЕРНЕТ-ПРИЛОЖЕНИЙ

Методическиеуказания	выполнениюлабораторныхработ
иорганизациисамостояработыельной		длястудентов
направления «Программнаяинженерия		»
	(уровеньбакалавриата)

2018

АхтямовЭмильКамильевич
СеменовЕвгенийВалериевич
Разработкаинтернет		-приложений:Методическиеуказания		по
выполнениюлабораторныхработ		иорганизациисамостояработыельной
длястудентовнаправления«		Программнаяинженерия		»уровень(
бакалавриата) /	Э.К.	Ахтямов,Е.В.Семенов	. – Томск, 2018.	– 37 с.

©Томгосударственныйкийуниверситет системуправлениярадиоэлектроники, 2018

© АхтямовЭ.К	., 2018
© СеменовЕ.В	., 2018
	2

		Оглавление
1	Введение	..............................................................................................			4
2	Содержлабораторныхниебот			........................................................	5
2.1.	ЛабораторнаярабП« тастроениеинтернет			- приложения . Разбор
запросаользо		вателяприиспользованииметодовPOSTGET»	...............		5
2.2.	ЛабораторнаяработаИспользование« гипертпр процесскстовогора
PHP с web-сервером» ...................................................................................					8
2.3.	ЛабораторнаярабС« вебтаздание			- прил с о мощьюжений «1 С	-
Битрикс:Упра»йтомвление		....................................................................			11
2.4.	ЛабораторработаНастройки« информационныхаяблоков»				.. 13
2.5.	ЛабораторнаяработаВерстка« под«1С			- Битрикс : Упр а » йтомвление
создшаблонание		– особенности,проблемы» ...........................................			15
2.6.	ЛабораторнаяработаРабо«		тасвключаемымирекламнымиобластями.
Применениешаблонадизайна»		..................................................................			19
2.7.	ЛабораторнаярабС« компонентаздание.Настройкамодуля
универсальногосписка» .............................................................................					22
2.8.	ЛабораторнработаПеревод« сайтна«1Сая			- Битрикс » натехнологию
композитногосайта»		..................................................................................			28
3	Методичеуказаниядляоргансамостояиезацииработыельной				32
3.1.	Общиеположения ..............................................................................				32
3.2.	Прораболекционногоматкаериала		..................................................		32
3.3.	Подготовкалабораторнымработамиофотчетоврмлениек
лабораторнымработам		...............................................................................			33
3.4.	Подготовкаэкзамену .......................................................................				36
4	Рекомендуемаялитература		................................................................		37

3

1 Введение

ЦелиизучендисцРазработкаи«яплиныинтернет				-приложений»
состоятвформзнанийпрактрованиинавыкспользованияческих
соврепротоколовтевыхменных,проект,разработкирования
тестированияпрог аммиложен,функционирующихыхвсетий
Интернет.
Вкачествеклиентскогоприложения				используется	браузер,
установленныйоперационнсистеме.Выполняялаб раторныей
работы,не	используютсякакие		-либоспецифическиеэлементы		разметки
илист илей,поэтомуограниченийкбраузеруне				предъявляется.
Вкачтекстовогоствередактора				используетсяпрограмма
«Notepad++». Скачатьпоследнверсипрочитатьеюю				ё	описание
можнонасайтеhttp://notepad				-plus-plusМожно.использоватьorg/.
аналогичнуюпрогр		амму.Есливпроцессевыполнениялабораторных

работпонадобятсядругиепрограммные,одуктытообэтомбудет сказано.

4

2 Содержание лабораторных работ

2.1. Лабораторнаяработа«	Построениеинтернет	-приложения.
Разборзапользователяросаприиспользованииметод		овPOST
иGET »
Цель работы
Создать гостевуюкнигусохрказаписиждойненивотдельныйм
файл,сименемemailпользователя,	атакже	реализуемпроверкуна
верностьвведенногоemail	.

Порядвыполненияк	лабораторнойработы
Создадгостевуюкнсохранимгу	ениемкаждойзаписивотдельный
файл,сименемemailпользоват,реализуемпроверкунаверностьля
введенногоemailобязательноезнакаличие( точки@,также
минимумодс домвол@,ежду@и2точкой,иот2	-хдосимвола6
послезнакаточки).

Создайтетекстовыйфайлипер именуйтегоindex.php.

Наберите php-код,какпокнрисункеазано1.

5

		Рисунок1	– Отрывок php-кода
Здесьмыдобавляемновуюзаписьфайлреагируем( нажатие
кнопкиДобавить« »).
Перваястрокаговорит,чтодаследуетphp					-код,затеммы
присваиваемпеременнойactionзначениеPOST				-запросаараметраaction.
Строкис 4	-йповыполняются28 толькоеслиусненяетсяовие
пустотыпеременнойactionстьамогоPOST(				-запроса).
Строки4, 5, 6		– получениеизPOST		-запросаимени	,почтыитекста
сообщенияпользователя.
8, 10, 12 – обрезаемимя,почтусообщениедо50,102450
симвсоответственнолов.
9, 11, 14 – преобразуемспецимволальнHTMLые					-сущности
(своегородазащита,чтобыликвидироваозможностьредак ирования
кодачерезсообщение),кпримерузнакзаменит< на<
				6

nl2br (15-ястрока)	– передкаждымразрывомстрокивставляет
символ<br />

16, 17 – удаляемразрывыст( окезультатесообщбудидтиние однойстрокойтега<brвместахразрываи/>строк).

19 – создаемфайлвпапкеrecoименемrвремяdsecсекундах. [,

прошедшеес01.01.1970 00:00].txt

20, 21, 22 – записываемэтотфайлимя,почтусообщение,на первую,втои строкиуюсоответственноью,затемзакрываемфайл

(23).

25, 26, 27 – обновляем страницу.

Далеееслизапросactionпу(30т				-ястрока).е.мы(простозашлина
страницу,безотправкиPOST			-запроса),выполнитсяосновнойHTMLкод
самойгостевойкниги.Заканчиваемphp				-код(31 -ястрока),ипишемhtml
38-52строки		–	скриптдляпроверкипра	вильностивводаemail,
вызываетсяприотпусканкнопкисобыт( onKeyUp)вполеввода
почты(59	-ястрока),вкачествепарамперто,ечтодаетсяужеравведено
вкачествеemail.
Строка40		– присваиваемпеременнойэлементIDдляудобства1 (
обращенияк		ему, 1	– idкнопкиДобавить« »)
Строка41		– присваиваемпеременнойreрегулярноевыражение.
42 – еслитрокаemailнашпереданныйпараметр()соответствует
регулярномувыражению,делаемкнопкуДобав«»актиивнойть
элементус ID=asdменяемсвойство				CSS рамкинастандартную,иначе
(еслинесоответствуетрегулярномувыраже)деакнтиопкувируемю
«Добавить»сделкрраснуюемвополяквводаругemail.

7

Рисунок2	– Продолжениеотрывка		php-кода
Дляобязательноговводаименисообщенияспользупарамется			р
requiredстроки56, 58,( 60).
Дадвыводалееявсехранеедобавленныхсообщенийнеобходимо
организоватьциклдля(повторенияhtml		-кодавыводаодногосообщения).

2.2. Лабораторнаяработа	«Использованиегипертекстового
препроцессора PHP с web-сервером»
Цель работы
Научитьнапримереконкретнойсистемыяупрсавлениятом
использоватьгипертпрепроцессоркстовый	PHP с web-сервером.

8

Порядвыполненияк	лабораторнойработы
СточкизренияС1	-Битриксшаблон	– этовнешнийвидсайта,
котоопррасполомеделяется	ожениеразличныхэлеменнасайте, ов
художественныйстильспособотображениястраниц.Включаетсявсеб
программныйhtml	-код,графичеэлементы,таблск,илейцы
дополнительфайлыдляотображенияконтента.Можетыевключать
себяшаблоныкомпонентов,	шаблготовстраницнысниппеты.х

Длятого,чтобыинтегриршаблонвCMS,перделоватьпапкеым /bitrix/templates/раздел,названиекоторогобудиспользоваться качествешаблонаID.Например, MyTemplateДалеевкачествеID .

шаблонабудетиспользова тьсяименноэтоназвание.Тепапкуерь MyTemplateнеобхперенеобщиедиморесурсы,такиетикак

изобр, фcssа. женияфайлыjs,шрифты.Есливва аблонеем используютсяспецифическиешрифты, файлыjs,тоихпереносить нужно.

Послеподготовительн	ыхоперацийможноперейтикс зданию
HTMLкаркасашабл.Шсостоитблоннаизнесколькихчастей,такихкак
header,иfooter#WORK._AREA#
Поокончанформструктурыи,рованияювасдолжнополучиться
папкефайла3. Header.php	- внемнаходитсяшапкашаблона	, footer.php –
подвалшабиIndexона.php	– оставшийсякод,.е.контентшаблона.
ДобавлэлементовС1 ие	-Битрикс
Дляначаланужнодобавитьп дключениепрологаязыковых
файл.Этонужнодлятогов,чтобыпользователь,неявляющийся
администраторомсайта,	несмподоступлучитьгкфайлам.Это
необходимосделатькаквheaderтаквfooter.php,.php:
<?if(!defined("B_PROLOG_INCLUDED") ||
B_PROLOG_INCLUDED!==true)die();
IncludeTemplateLangFile(__FILE__);?>
Далеезамт вкстнтегаимутри<title>внутритег		а<h1>навызов
функции.

<title><? $APPLICATION->ShowTitle(false); ?></title> <h1><?$APPLICATION->ShowTitle()?></h1>

9

Посленеобходимозадатьотноситпутьквсфайламельный

шаблонакартинкам(, css -файлам, js -файлам,шрифтам)Функция. <?=SITE_TEMPLATE_PATH?>задаетпутькшаблонуотносительно корнясайта.

Например,врезультатеможемполучитьследующийкод:

<link href="<?=SITE_TEMPLATE_PATH?>/css/styles.css" rel="stylesheet">

… <a href="/">

<img src="<?=SITE_TEMPLATE_PATH?>/images/logo.png" alt="Whitesquare logo">

</a>

…<img src="<?=SITE_TEMPLATE_PATH?>/images/map.png" class="img-responsive" alt="Our offices">

…<a href="/">

<img src="<?=SITE_TEMPLATE_PATH?>/images/footerlogo.png" alt="Whitesquare logo">

</a>

Добавимвызовфункции$APPLICATION		->ShowHead();,которая
служитсразунескоцелямвчастностиькдинам(	ческому
подключенCSSибиблиотекJ ,объявленныхюкомпонентахтеле
страницпомощьюотложенныхфункцийвзаголовке,так
объедисжэтибняблиотекима, слииспользуетс		я
соответствующаянастройкаС1		-Битрикс).

СпомощьюотложенныхфункцSetAdditionийAddHealCSSdScript

мыможвсегпомдключитьаCSSвJ <header>,атакжеизбежать повторногоподключенодинакбиблэтоивых(собеннояотек

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

10