Разработка интернет-приложений
..pdfМинистерство наукивысшего |
образованияРоссийскойФедерации |
Федеральноегосударствеобразовательноебюджетучреждение высшегообраз вания
«ТОМСКИЙГОСУДАРСТВЕННЫЙУНИВЕРСИТЕТ СИСТЕМУПРАВЛЕНИЯРАДИОЭЛЕКТРОНИКИ»ТУСУР()
Кафедраавтоматизации бработкиинформацииАОИ()
РАЗРАБОТКА ИНТЕРНЕТ-ПРИЛОЖЕНИЙ
Методическиеуказания |
выполнениюлабораторныхработ |
|
иорганизациисамостояработыельной |
длястудентов |
|
направления «Программнаяинженерия |
» |
|
|
(уровеньбакалавриата) |
|
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