Разработка интернет-приложений.-2
.pdfМинистерство наукивысшего |
образованияРоссийскойФедерации |
Федеральноегосударствеобразовательноебюджетучреждение высшегообраз вания
«ТОМСКИЙГОСУДАРСТВЕННЫЙУНИВЕРСИТЕТ СИСТЕМУПРАВЛЕНИЯРАДИОЭЛЕКТРОНИКИ»ТУСУР()
Кафедраавтоматизации бработкиинформацииАОИ()
РАЗРАБОТКА ИНТЕРНЕТ-ПРИЛОЖЕНИЙ
Методическиеуказания |
выполнениюлабораторныхработ |
иорганизациисамостояработыельной |
длястудентов |
направления «Бизнес-информатика» (уровеньбакалавриата)
2018
АхтямовЭ |
Камильевич |
|
|
СеменовЕвгенийВалериевич |
|
||
Разработкаинтернет |
-приложений:Методическиеуказания |
по |
|
выполнениюлабораторныхработ |
иорганизациисамостояработыельной |
|
|
длястудентовнаправления« |
Бизнес-информатика» уровень( |
||
бакалавриата) / |
Э.К. |
Ахтямов,Е.В .Семенов . – Томск, 2018. |
– 37 с. |
©Томгосударственныйкийуниверситет системуправлениярадиоэлектроники, 2018
© АхтямовЭ.К |
., 2018 |
© СеменовЕ.В |
., 2018 |
|
2 |
|
|
|
Оглавление |
|
|
1 |
Введение .............................................................................................. |
|
|
|
4 |
2 |
Содержлабораторныхниебот |
|
........................................................ |
5 |
|
2.1. |
ЛабораторнаярабП« тастроениеинтернет |
|
- приложения . Разбор |
|
|
запросаользоватприиспользованииметодовPOSTляGET» |
............... |
|
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>,атакжеизбежать повторногоподключенодинакбиблэтоивых(собеннояотек
актуально,напримердляJQuery,есливы подключаетееёне централизвшаблсайта,в онеответствующихваннокомпонентах такихкомпонеокажетсянастраницетовесколько).
10