Коммерциялық емес акционерлік қоғам

АЛМАТЫ ЭНЕРГЕТИКА ЖӘНЕ БАЙЛАНЫС УНИВЕРСИТЕТІ

Компьютерлік технологиялар кафедрасы

 

 

 

КОМПЬЮТЕРЛІК ЖҮЙЕЛЕР ИНТЕРФЕЙСТЕРІ 

 5В070400 – Есептеу техникасы және бағдарламалық қамтамасыз ету мамандығының студенттері үшін зертханалық жұмыстарға арналған әдістемелік нұсқаулар (1-бөлім)

 

 

Алматы 2011

ҚҰРАСТЫРУШЫЛАР: Мусатаева Г. Т., Конуспаева А. Т., Байжанова Д. О. Компьютерлік жүйелер  интерфейстері. 5В070400 – Есептеу техникасы және бағдарламалық қамтамасыз ету мамандығының студенттері үшін зертханалық жұмыстарға арналған әдістемелік нұсқаулар (1-бөлім).– Алматы: АЭжБУ, 2011. – 24 б. 

 

Әдістемелік нұсқаулар бағдарламалаудың тәжірибелік сұрақтарын қарастырып оқып жүрген 5В070400 – Есептеу техникасы және бағдарламалық қамтамасыз ету мамандығының студенттеріне арналған.

         Кестелер - 2, суреттер - 9, әдебиеттер тізімі - 14 атау.

 

Пікір беруші: физ.-мат.ғыл.канд., доцент М. А. Ахметова.

 

“Алматы энергетика және байланыс университеті” коммерциялық емес акционерлік қоғамының 2011 жылғы баспа жоспары бойынша басылады. 

 

© “Алматы энергетика және байланыс университеті” КЕАҚ, 2011 ж.

 

         1 Зертханалық жұмыс. Программалық жүйемен директивті – диалогтық өзара қатынас түрі

 

         Жұмыстың мақсты: программалық жүйемен директивті–диалогтық өзара қатынас түрін зерттеу.

 

         Тапсырмалар

         Бұл жұмыстың орындалуы, пайдаланушы мен программалық жүйенің өзара қатынасының директивті – диалогты іске асыратын, 4 командалық файлды құрудан тұрады. Жұмысты орындау барысында, пайдаланушы мен жүйе диалог жүргізілетін командалық файлдар (bat-файл) құрылуы керек:

1-ші нұсқа – параметрлермен символдармен;

2-ші нұсқа – файлдардың атын пайдаланатын параметрлермен;

3-ші нұсқа – “CHOICE” сыртқы командасын пайдаланумен;

4-ші нұсқа – бірнеше параметрлерді пайдаланумен.

         Командалық файлдар арқылы орындалатын, пайдаланған параметрлер мен функциялар санын, үйренушінің өзі таңдап алады.

 

         Қысқаша теориялық кіріспе

         CLI - командалық файлдар негізіндегі, программалық жүйемен диалогты – директивті өзара қатынас түрі интерфейсін жасау тәсілдерін игеру мен дағдылану. Диалогты қатынастың бұл түрі алдын ала дайындалған пайдаланушыға арналған және одан программа алгоритмдерін білуді, сондай-ақ осы программаларды басқарудың параметрлерімен бөлек командаларын білуді талап етеді. Программаларды іске қосу немесе бөлек директиваларды орындау командалық жолдан басталады.

         Пайдаланушы мен программалық жүйенің диалогтық өзара қатынасында хабарламаның екі түрі белгіленеді: пайдаланушының ақпаратты енгізуі құралы арқылы туындаған кіріс хабарламалары және ақпаратты шығару және көрсету көмегі арқылы, жүйемен негізделетін шығару хабарламалары. Диалогтың бірінші қадамы көп жағдайда жүйенің бір немесе бірнеше шығару хабарламаларын беруінен басталады. Шығару хабарламалары, процедуралық бөлімнің орындалуын немесе жүйенің жағдайы мен диалогының нәтижелерін көрсетеді. Диалогтың реттілігі, өз кезегінде инициативасы жүйе мен пайдаланушыға жататын реттіліктерге бөлінеді. Және де инициативаның үшінші түрі – басқару сигналдары арқылы, инициативаны ауыстырып отыратын, аралас инициативасы болады. Өзара қатынастың директивті түрі - жүйені білуді және операциялық жүйенің басқару командаларын жақсы білуді талап етеді.

         Бұл интерфейс қосымшалармен жиі жұмыс істейтін дайындалған пайдаланушыларға арналған. Пайдаланушы қатаң белгіленген ішкі құрылымы бар командалар арқылы қосымшалармен жұмыс істейді. Командалар коды осы командалар арқылы орындалатын қосымшалардың функциясын теңестіреді. Командалар коды функцияның аталуын көрсетеді және түсінікті тілдегі сөздер арқылы немесе қысқартылған түрде жазылады. Командалар пайдаланушыға жүйенің сауалдарына жауап беріп отырудың орнына, лезде керекті функцияны өзгешеліктерін анықтауға мүмкіндік береді.

 

         Тапсырмаларды орындауға арналған әдістемелік нұсқаулар:

         1) Диалогты өзара қатынас түрлері жайлы қысқаша мағлұмат беру.

2) Пайдаланушы мен программалық жүйенің диалогын ұйымдастыру үшін, командалық файлдар мен оларды іс - жүзінде қолдану жайлы негізгі мағлұматтар беру.

3) Құрылған bat-файлдардың текстерін беру.

         Ескерту:

         1. Есептеме жоғары оқу орнының қойылған талаптарына сәйкес орындалуы керек.

2. Әрбір студенттің программалық коды ерекше болу керек.

 

1 нұсқа

Мұнда «р» параметрін пайдаланғанда «stud» каталогының мазмұнын көруге болады.

 

@echo off

if -%1= =- goto konez

if %1== p goto work

: work

dir c:\stud

pause

goto konez

: konez

echo Сіз жұмысты бітіргіңіз келеме?

pause

goto exit

: exit

 

2 нұсқа

a.txt файлының параметрі ретінде қарастырғанда осы файлдың мазмұнын қарау.

 

@echo off

if -%1==- goto konez

if not exist %1 goto mess

echo просмотр файла

type %1

pause

goto konez

: mess

echo файл не найден

pause

goto konez

: konez

echo Вы хотите закончить работу?

pause

goto exit

: exit

 

3 нұсқа

Бұл мысалда әрекеттесудің диалогтық директивті түрі қарастырылған, мұнда командалық файл келесі функцияларды орындайды: “y” альтернативасын таңдағанда “stud” каталогы көрсетіледі, “n” альтернативасын таңдағанда – программадан шығу, егер де қолданушы ешқандай таңдау жасамаса, онда ДЭЕМ 10 секундтан кейін өзі таңдау жасайды, бұл жағдайда жұмыс аяқталуы орындалады.

 

@echo off

echo Если вы хотите просмотреть каталог “stud” нажмите “Y”

choice /c:YN /t:N,10

if errorlevel 2 goto vyhod

dir C:\stud

pause

goto exit

: vyhod

echo Конец работы

pause

:exit

 

4 нұсқа (бірнеше параметрлермен)

@ECHO OFF

if /%1==/ goto konez

if not exist %1 goto error

if %2==u goto udal

if %2==c goto copu

if /%2==/ goto konez

:copu

md AAA

echo Katalog cozdan

pause

copy %1 AAA

pause

goto exit

:udal

del %1

pause

goto konez

:error

echo file ne ukazan

:exit

 

Есеп беру мазмұны

а) Әрекеттесудің диалогтық түрлері туралы қысқаша мәліметтер келтіру.

б) Командалық файлдар және оларды қолданушымен программалық жүйемен диалог ұйымдастыру үшін тәжірибелік пайдалануы туралы негізгі мәліметтерді келтіру.

в) Құрылған bat-файлдардың текстерін келтіру.

 

         Әдебиет: 1[20-26], 2[80-98], 1[40-41], 5[100-117].

Бақылау сұрақтары:

1)  Пайдаланушы интерфейсті ұйымдастыру барысында командалық файлдар қалай пайдаланылады?

2)  bat-файлдардың қандай параметрлері болады?

3)  bat-файлдарды құру технологиясы қандай?

 

2 Зертханалық жұмыс. “Hand User Interface” пайдаланушы интерфейсі

 

         Жұмыстың мақсты: “Hand User Interface” пайдаланушы интерфейсімен танысу.

 

         Тапсырмалар

         1) Логикалық түрде ұйымдастырылған гипермәтінді құжаттар (HTML файлдар) тобын құру.

2) Пайдаланушыға гипермәтіннің ыңғайлы және түсінікті навигациясын жасау.

3) Құжаттар ішіндегі сілтемелер жүйесін жобалау және іске асыру.

 

Қысқаша теориялық кіріспе

Пайдаланушы интерфейсінің бұл түрі, дисплейі кішкене мөлшердегі қалта компьютерлеріне пайдаланылады. Мұндай жүйелерде, осы ерекшелікті ескеретін, пайдаланушы интерфейсінің объектілері қолданылады.

         Бұл жұмыс, HTML форматтағы гиперсілтемені қолданатын, пайдаланушы интерфейсін құруға дағдылануға арналады. Гиперсілтемелер, “Hand User Interface” жобасының талаптарын ескеретін, пайдаланушы интерфейсінің компоненттері болып табылады.

Қазіргі кезде компьютерлердің екі PDA (Personal Digital Assistant - жеке цифрлық ассистент – кейбір арнайы функцияларды орындауға арналған қалталық компьютер) класы белгілі – біріншісінде кәдімгі GUI-стиль, екіншісінде GUI-интерфейсінің ішкі жиыны қолданылады. Пайдаланушының мәліметтерін енгізу үшін қалам және сенсорлық экраннан тұратын жестикуляциялық стиль қолданылады.

Әдетте, мұндай құрылғылардың экрандары өте кішкентай болады. PDA дисплейінің әрбір ауданы үстелдік және ықшам жүйелер үшін қолданылатын GUI-қосымшаларының терезелерінен кіші. PDA үшін негізінен столдық немесе ықшам компьютерлерге арналған GUI-бағытталған программалар қолданылады.

Кейбір PDA-ларға пернетақтаны қосуға болады, бірақ пайдаланушы қалам мен көрсеткіштердің бірге жұмыс істеуін үйрінуі қажет. Кейбір командаларды  GUI-интерфейсінің командаларды тез таңдау пернелеріне эквивалентті «жестикуляциялық» пернелер комбинациялары арқылы орындауға болады.

       HUI-бағытталған қосымшалардың негізгі мәселелері: пайдаланушының мәлімет енгізулеріндегі талап етуді оңайлату және дисплейдің шектелген ауданын қолдану.

Есептемеде, міндетті компоненттерден басқа, гипермәтінді құжаттар (HTML – файлдар) тобы бойынша навигациялық сұлба көрсетілуі керек.

         Жобаны дұрыстау үшін “тұзақ” – (loop back) технологиясы, бір компьютерде орналасқан броузер мен сервер пайдаланылады. Барлық құрылған файлдар локалды WEB–серверде орналастырылуы керек.

 

         Тапсырмаларды орындауға арналған әдістемелік нұсқаулар:

HUI-интерфейсі GUI-интерфейсінің кейбір мүмкіндіктерін қамтамасыз етеді, атап айтсақ пиктограмма, мәзір және көрсеткіштің қалпы. HUI-интерфейсі үшін жалпы стильді SIMP-стиль деп атауға болады (Screen – экран, Icon – пиктограмма, Menu – мәзір және Pointer – көрсеткіш). Осы арқылы GUI-интерфейсінің көптеген қасиеттері қамтамасыз етіледі, олардың кейбірі төменде көрсетілген:

а) Пиктограммалар көптеген PDA-ларда қолданылады. Олардың мүмкіндікте­рі көрсету құрылғысының түріне сәйкес өзгереді. Пиктограммалар GUI-интерфейсіндегі секілді объектілерді, атрибуттарды және әрекеттерді ұсыну үшін қолданылады.

     б) Мәзір қатарлары және де мәзірдің өзі талап ету арқылы көрінеді, және осындай компоненттерге сай қасиеттерге ие болады.

     в) Қалам бір шерту секілді көрсеткіш ретінде жұмыс істейді. Сұхбаттар шақырылып жатқан объекттерді жауып тұратын терезелерде көрсетіледі. Мұндай терезелер GUI-терезелердің стандартты безендірулерін қабылдай алмайды. Олардың орнын ауыстыруға немесе өлшемдерін өзгертуге болмайды.

 

Мысал 1.

Қарапайым есепті шығару үшін HTML – кодты жазыңыз. Тышқан курсоры тақырып мәтініне түскен кезде шрифт түсі өзгеретін құжат құрылады. Тақырыпқа тышқан курсорын орналастырғанда,  шрифтің алғашқы түсі қалпына келеді.

<html>

<head>Зертханалық жұмыс

<title> Мысал 1  </title>

</head>

<body>

<H1>

HelloWorld

</H1>

<P> Бұл HTML-құжатының қарапайым мысалы </P>

<P>

Бұл *.htm-файл Notepad және Internet Explorer -да бір мезетте ашыла береді,

Notepad-та өзгеріс жасаған соң, Internet Explorer-да жаңарту батырмасын шертсеңіз, HTML-құжатында өзгертудің нәтижесін көре аласыз.

</P>

</body>

         </html>

 

         Мысал нәтижесі:

 

Мысал 2. Фрейм жасау программасы

 

<html>

<frameset rows="50%,50%">

<frame src="1 файл.htm">

<frame src="2 файл.htm">

</frameset>

</html>

<html>

<frameset rows="50%,50%">

<frame src="dog.jpg">

<frame src="cat.jpg">

</frameset>

</html>

 

         Фреймді тік жасау коды

<frameset cols="33%,33%,*">

<frame src="1 фрейм-столбец.htm">

<frame src="2 фрейм-столбец.htm">

<frame src="3 фрейм-столбец.htm">

</frameset>

<frameset cols="33%,33%,* ">

<frame src="dog.jpg">

<frame src="animals/dog04.jpg">

<frame src="animals/dog05.jpg">

</frameset>

 

 

 

 

 

 

 

 

 

 

Әдебиет: 1[20-26], 2[80-88], 5[100-117].

Бақылау сұрақтары:

1) «Hand User Interface» түріндегі интерфейсте, пайдаланушы интерфейсінің қандай компоненттері қолданылады?

2) Гиперсілтемелерді құрудың технологиясы қандай?

3) Навигациялық сұлба түріндегі диалогты өзара қатынас құрылымы қалай жобаланады? 

 

3 Зертханалық жұмыс. WUI (Web User Interface) негізіндегі пайдаланушы интерфейсінің компоненттері. Достық пайдаланушы интерфейсі

 

         Жұмыстың мақсаты: WUI (web user interface) негізіндегі пайдаланушы интерфейсінің компоненттерімен танысу. Достық пайдаланушы интерфейсімен танысу.

 

         Тапсырмалар

         1) Пайдаланушының WWW–сервермен (HТТР - сервер) интерактивті өзара қатынас туғызуға мүмкіндік беретін, HTML – құжатында, компоненттерді құруға дағдылану.

         2) Программалық қосымшасы бар пайдаланушының интерактивті интерфейсін құратын, HTML – парағының FORM тегінің барлық компоненттері қосылған кодын құрастыру.

         3) Белгілі мағыналы жүктемесі бар HTML – парағының кодын құру, кіріс ақпаратын анықтайтын түрлердің компоненттерін таңдау. Пайдаланушыға көмек беретін элементтері бар WUI құруға дағдылану.

         Бұл жұмыста интерактивті интерфейсті құру қажет. Оның жұмыс қабілеттерін НТТР – сервері арқылы жергілікті компьютерде пайдалану арқылы тексеру ұсынылады. Сұраныстар серверлік CGI – сценариймен РЕRL тілінде script – программа түрінде өңделеді. РЕRL – программа, НТТР – сервердегі арнайы папкаға салынады. Жұмысты орындаудағы ең кіші нұсқасы, белгілі бір мағынасы бар сайт түрінде және скрипт тілінде орындалған “достық интерфейсті” клиент жағында пайдалану арқылы жүргізу болып табылады.

 

         Қысқаша теориялық кіріспе

WUI негізіндегі пайдалану интерфейсінің компоненттері, тораптық программалық қосымшадағы пайдаланушының өзара қатынасын қамтамасыз етеді (мысалы Интернетте). Пайдаланушыға ақпаратты көрсетуден басқа, WEB парағының негізгі функцияларының біріне (WUI объектілері бар кезде), WEB – торапқа белгілі деректерді жіберіп, оларды серверде өңдеу мүмкіндігі жатады. Бұл мақсаттар үшін парақтын кодына, HTML-парағында арнайы түр – объектіні көрсететін, олардың көмегімен интерактивті интерфейс құруға болатын, арнайы тэгтер қосылады.

         Негіздік WUI - стиль (Web User Interfase) иерархиялық құрылым мәзіріне ұқсас. Оны пайдаланушылар гиперсілтемелерді қолданудан басқаларын, графикалық емес интерфейс ортасында жұмыс істеу тәжірибесінен біледі. Қажетті навигация мәтіндік немесе визуалды гиперсілтемелерді пайдалану арқылы, бір немесе бірнеше қосымшалардың шеңберінде орындалады. Гиперсілтемелердің құрылымына байланысты WUI интерфейсі шеңберінде, навигация қосымшасы, Web–парақтарды қосымша иерархиясында бір терезенің ішінде бір рет көрсетеді. WUI - стилі қолданатын қосымшаның негізгі ерекшеліктері төменде келтірілген:

- хабар әдетте, бір терезеде беріледі. Ол броузер деп аталынады, бірақ мәліметтерді қосымшада көрсету үшін бірнеше броузер терезесін қолдануға болады;

- броузер Web - қосымшаны мәзірмен қамтамасыз етеді;

- әрекеттердің таңдауы шектелген, себебі функцияға қатынасты қамтамасыз ететін мәзірдің, қосымшамен өзара қатынасы күрделі;

- Web–парақ арнайы, кездейсоқ шығып қалатын мәзірді ашу үшін, клиенттік облысқа ішкі бақылау жүргізе алады;

- арнайы мәзірді жасау, қосымша программалау жұмыстарын талап етеді;

- клиенттік облыстың дәстүрлі пиктограммалары жоқ;

- көптеген қосымшалар графикті және анимацияны эстетикалық немесе навигациялық мақсаттарда қолданады;

          - броузер және оның қосымшалары WEB-парақтардағы графиктердің өшу мүмкіндіктерін қанағаттандырады, сондықтан бізге тек мәтіні көрінеді;

     - көрсеткіштің сүйеуі негізінен тышқан батырмасын шерту арқылы немесе навигациялық сілтеулерді таңдау арқылы іске асырылады. “Drag and drop” технологиясы, белгілі ортадағы арнайы программалаудан басқа жерлерде, қолданылмайды. 2 батырмасының және тышқанның істейтін функциялары шектеулі.

WUI-интерфейсінің компоненттері. WUI-интерфейсінің кең таралған компо­нент­теріне баннерлер, навигациялық панельдер және әртүрлі әдістермен реттелген визуалдық немесе мәтіндік гиперсілтеулер жатады. Және де анимацияларға, графикаларға және түстерге қолданылатын әрекеттер орындалады:

         - баннер – WEB-парақтардың жоғарғы бөлігінде көрінетін визуалдық тақы­рып;

- навигациялық панель – мәліметерге рұқсат етуді қамтамасыз ететін гиперсілтеулерді таңдаудың нұсқалары;

         - гиперсілтеулер – келесі парақтың мәліметін көрсететін немесе суреттің фо­ку­сын басқа облысқа ауыстыратын таңдау нұсқалары;

         - броузер – типтік броузер тақырыптан, экран шеңберінде көрінетін навигация­лық панель облысынан тұрады;

         - каталог – нәтиже табылғанша қосымша іздеу нұсқалары арқылы навигация үшін қолданылатын гиперсілтеулерді таңдау нұсқаларының тізімі;

         - іздеу және іздеу нәтижесі – пайдаланушы мәтінді іздеудің критерийлерін енгізетін және таңдайтын бір немесе бірнеше басқару элементтері. Іздеу нәтижелері сол немесе басқа WEB-броузер терезелерінде көрсетіледі;

         - құжат – WEB-құжат қосымша көздерге сілтеулері бар мәтіндік ақпарат немесе ақпаратты ашық түрде көрсету;

         - жазбалар кітапшасы – кейбір WEB-түйіндер мәліметтерді ұйымдастыру үшін қолданылатын метафора түріндегі визуалдық кітапша.

Common Gateway Interface (CGI) – бұл WWW жүйесін кеңейту стандарты. WWW серверларға аргументтерді пайдаланушы анықтай алатын программа құруға мүмкіндік береді. CGI интерфейсі пайдаланушының мүмкіндігін арттырады және аталмыш Web парақпен байланысты программа орындауға мүмкіндік береді. Ол дегеніміз WWW- серверінен ақпарат алу мүмкіндігі болады. Мысалы WWW серверді қолданғандар ең соңғы ауа райы болжамы туралы ақпарат  ала алады. Ол үшін дерекқордан қазіргі уақыт мезетіне ауа райына сұраныс жасайтын программаны орындау қажет. CGI интерфейсі WWW сервер мен сыртта орындалатын программалардың байланыс құралы болып табылады. Ол пайдаланушының сұранысын қабылдайды да, оны сыртқы программаға береді, одан кейін нәтижесін пайдаланушыға құрастырылған Web парақ арқылы қайтарады. Web парақтар бір – бірінен айрықша болуы мүмкін. Себебі олар пайдаланушы анықтаған параметрлерге байланысты қалыптасады.

CGI механизмі әмбебап болғандықтан ол кез келген WWW серверлер арасында деректерді алмастыра алады. CGI интерфейсі орындалатын файлдардан құралған соң, оған онда орындалатын программа түрлеріне шектеулер болмайды. Программа орындалатын модулдерді құралатын кез келген программа тілінде жазылуы мүмкін. CGI-программа Perl және Shell сияқты операциялық жүйелердің командалық тілдерін пайдалана отырып жазылуы мүмкін.

Қазіргі уақытта техналогияда көбінесе активтік серверлік парақтар ASP (Active Server Pages) технологиясы кеңінен қолдануда. Бұл технология CGI стандартын пайдалануын қарастырады. Бірақ, Web парақ құру мақсатында, объекті-бағытталған деңгейде ғана пайдаланады. Жобаны дұрыстау үшін “тұзақ” – (loop back) технологиясы, бір компьютерде орналасқан броузер мен сервер пайдаланылады.

 

            Тапсырмаларды орындауға арналған әдістемелік нұсқаулар:

 

         Мысал 1.

Қолданушымен кейбір әрекетті орындау құжат элементін форматтауға әкеледі. Есепті шығару үшін HTML –  кодын жазыңыз. Абзацты тышқанмен шерту осы абзацты центрге орналастырады, екі рет шерту  абзацты оң жақ бойынша тегістейді.

<html>

<head><title></title></head>

<body bgcolor= silver>

<h3  > Динамикалық теңестіру </h3>

<p onClick ="this.style.textAlign ='center' "

onDblClick = "this.style.textAlign = 'right'"> Мәтін  динамикалық теңестіріледі

</p>

</body>

</html>

 

 

         Мысал 2.

<SELECT NAME = "NAME" SIZE = "1">

<OPTION SELECTED VALUE = "Pentium3">Компьютеры</OPTION>

<OPTION VALUE = "Pentium2"> Pentium2</OPTION>

<OPTION VALUE = "Pentium3"> Pentium3</OPTION>

<OPTION VALUE = "Pentium4"> Pentium4</OPTION>

<OPTION VALUE = "Atlon"> Atlon</OPTION>

</ SELECT >

 

         Броузер түрі

 

Мысал 3 (MULTIPLE атрибутын қолдану).

<SELECT NAME = "NAME" SIZE = "5" MULTIPLE>

<OPTION SELECTED VALUE = "Pentium3">Компьютеры</OPTION>

<OPTION VALUE = "Pentium2"> Pentium2</OPTION>

<OPTION VALUE = "Pentium3"> Pentium3</OPTION>

<OPTION VALUE = "Pentium4"> Pentium4</OPTION>

<OPTION VALUE = "Atlon"> Atlon</OPTION>

</ SELECT >

 

 

         Мысал 4. Мәліметтерді енгізу

<html>

<head>

<title>ВВОД</title>

</head>

<body bgcolor=”#FFEFFF”>

<?php

$username="";

$password="";

$database=DBNAME";

$table="news";

$host=nlocalhostn;

if(isset($submit)):

mysql_connect($host,$username,$password)or die(mysql_error());

mysql_select_db($database)or die(rnysql_error());

$date = date("Y-m-d");

$sql = "INSERT INTO news

VALUES(NULL,,$heading';$body,;$date,;$auth'/$auth„email')"; mysql_query($sql);

print("<h2>мәліметтер енгізілген</h2>\n");

print("<h2> қосымша енгізуге болады</h2>\n”);

endif;

?>

<р><hЗ>деректер қорына ақпарат енгізуге болады</hЗ>

<form action="datain.php" method="posf >

Автор аты:<br><input type=,ltext" name="auth"><p>

Email:<br><jnput type="text" name="auth_email"><p>

Мақалалар аты:<br><lnput type~"text" name="headsng',><p>

мазмұны:<br>

<textarea cols=40 rows=20 name="body">

</textarea><p>

<input type="submit" name="submit" value="BBECTH?n>

</form>

</body>

</html>

 

Мысал 5. Мәліметтерді іздеу және шығару

<html>

<head>

<titе>мәліметтерді шығару</titlе>

</head>

<body bgcolor="#FFEFFF">

<h1>жаңалықтар</h1>

мәліметтерді шығару

<a href="dataoutphp?orderby=date">күнімен</а>

<a href="dataout.php?orderby=heading">атымен</а> или

<a href=="dataout.php?orderby=author"> авторлар аттарымен</а>

<p>

<form action="dataoutphp" method="POST">

Жазылған мақалаларды іздеу (<i> автор атын көрсетіңіз</i>):

<input type-“text”name=”author”>

<input type=”submit”name=”submit”value=”Жіберу!”>

</form>

<table border=”1” cellpadding=”3”>

<?php

/*бұл программа деректер қорынан есерту алуға мүмкіндік береді*/

$db=mysql_connect(“localhost”,”root”);

//mysql_select_db(“php”,$db);

Mysql_select_db(DBNAME,$db);

if($orderby==’date’):

$sql=”select*from news order by ‘date’”;

elseif($orderby==’author’):

$sql=”select*from news order by ‘author_name”’;

elseif($orderby==’heading’):

$sql=”select*from news order by ‘heading”’;

elseif(isset($submit)):

$sql=”select*from news where author_name=’$author”’;

else:

$sql=”select*from news”;

endif;

$resalt=mysql_query($sql);

while($row=mysql_fetch_array($result))

{

print(“<tr><tr bgcolor=\”#003399\”><b>”);

print(“<font color=\”while\”>%s</font></b></td></tr>\n”,

$row[“author_email”], $row[“author_name”]);

print(“<br>Послано:%s<hr>\n”,

$row[“date”]);

print(“%s</td></tr>\n”,

$row[“date”]);

print(“%s</td></tr>\n”,

$row[“body”]);

}

?>

</table>

</body>

</html>

 

Мастер мысалы:

 

Әдебиет: 1[231-267], 5[161-194], 4[162-179], 2[182-197]

Бақылау сұрақтары:

1) «WEB User Interface» түріндегі интерфейсте пайдаланушы интерфейсінің қандай компоненттері қолданылады?

2) Пайдаланушы интерфейс  компонент құрудың технологиясы қандай?

3) Деректерді серверге жіберуге мүмкіндік беретін компоненттер қалай программаланады?

4)  «Достық» интерфейс деген термин қандай мағына береді?

5)  Пайдаланушы интерфейсті жасауда «оқиғалар» қалай пайдаланылады?

6) Loop-back технологиясы бойынша жөнге келтіру тәсілі қандай?

 

4 Зертханалық жұмыс. WUI-CGI негізінде интерфейсті жасаудағы сұрақтардың кешенді түрде шешілуі. GUI (Graphic User Interface) негізіндегі пайдаланушы интефейсі

 

         Жұмыстың мақсты: WUI-CGI негізінде интерфейсті жасауды үйрену. GUI (Graphic User Interface) негізіндегі пайдаланушы интефейсі танысу.

 

Тапсырмалар

WUI-CGI интерфейстерін жасауды игеру және нығайту. Бұл жұмыста, алдынғы жұмыстарды орындаудағы игерген білім мен дағдылар пайдаланылады. Жұмыс нұсқалар бойынша орындалады.

1)  HTML – парақтары түрінде, нұсқаға сәйкес объектілердің санымен, WUI интерфейсті жасау қажет.

2)  Бір объектіде енгізілетін деректерді тексеру қажет.

3)  FORM- дағы (нұсқаларымен) барлық объектілерден сервер жауабын алу қажет.

4)  Деректердің жеке  бөлігін сервер жағындағы (нұсқалармен) бөлек файлға жазу қажет.

5) GUI негізіндегі пайдаланушы интефейсінің элементтерін қосымшада пайдалану және жасауды игеру.

6) MS EXCEL және MS WORD-та GUI элементтерімен 2 қосымша жасау. VBA MS EXCEL қосымшасы үшін DialogSheet немесе UserForm объектілерінің міндетті компоненттері болып табылады және ФОРМЫ опция элементтері, MS WORD инструменттері болып табылады.

Ұсыныстар

Алдыңғы зертханалық жұмыстарда орындалынған программалардың кодтарын пайдалану ұтымды.

 

         Қысқаша теориялық кіріспе

         WUI негізіндегі пайдалану интерфейсінің компоненттері, тораптық программалық қосымшадағы пайдаланушының өзара қатынасын қамтамасыз етеді (мысалы Интернетте). Пайдаланушыға ақпаратты көрсетуден басқа, WEB парағының негізгі функцияларының біріне (WUI объектілері бар кезде), WEB – торапқа белгілі деректерді жіберіп, оларды серверде өңдеу мүмкіндігіне жатады. Бұл мақсаттар үшін парақтын кодына, HTML-парағында арнайы түр – объектіні көрсететін, олардың көмегімен интерактивті интерфейс құруға болатын, арнайы тегтер қосылады.

Негіздік WUI - стиль (Web User Interfase) иерархиялық құрылым мәзіріне ұқсас. Оны пайдаланушылар гиперсілтемелерді қолданудан басқаларын, графикалық емес интерфейс ортасында жұмыс істеу тәжірибесінен біледі. Қажетті навигация мәтіндік немесе визуалды гиперсілтемелерді пайдалану арқылы, бір немесе бірнеше қосымшалардың шеңберінде орындалады. WUI негізіндегі пайдалану интерфейсінің компоненттері, тораптық программалық қосымшадағы пайдаланушының өзара қатынасын қамтамасыз етеді (мысалы Интернетте). Пайдаланушыға ақпаратты көрсетуден басқа, WEB парағының негізгі функцияларының біріне (WUI объектілері бар кезде), WEB – торапқа белгілі деректерді жіберіп, оларды серверде өңдеу мүмкіндігі жатады. Бұл мақсаттар үшін парақтын кодына, HTML-парағында арнайы түр – объектіні көрсететін, олардың көмегімен интерактивті интерфейс құруға болатын, арнайы тэгтер қосылады.

Графикалық пайдаланушы интерфейс (Graphical User Interfase – GUI) “пайдаланушы-компьютер” қарым-қатынасының стилі ретінде анықталады. Онда мынандай негізгі элементтер қолданылады: терезелер, пиктограммалар, мәзір және көрсеткіштер. Кейде GUI-интерфейсін WMP-интерфейсі деп атайды. GUI-интерфейсінің негізгі қасиеттері – ол манипуляция жасау мүмкіндігі, тышқан немесе көрсеткіштің қолданылуы, графиканың пайдалануы, функция мен мәліметтер қосымшасы ауданының болуы. GUI – компоненттерін тереңірек қарастырайық. Терезе – ол бейнелеу құрылғысының облысы, объектілермен, объектілер туралы ақпаратпен өзара қатынасы  үшін қолданылады немесе объектілерге қолданылатын әрекеттерді орындауға арналған. Терезеде тақырыптар жолы болады, ауыспалы операциялар теруіне ие болады, мөлшерінің өзгеруі, мәзір теруімен және объектілер туралы ақпарат көрсететін арнайы облысы болады. Әдетте терезе тікбұрышты болып келеді.Онда терезені қолданатын қосымша, GUI–бағытталған қосымша болып келеді. Терезе ақпаратты құрылғы бейнесінің тек қана бір аймағына немесе облысқа бейнелейді. Бейнелеу құрылғысын жарым-жартылай қолдану, бірмезетте бірнеше объектілермен немесе сұхбатты басқарушылармен өзара қатынаста болу үшін бірнеше терезені қарап шығуға мүмкіндік береді. GUI–интерфейсінде қолданылатын, формальді түрде пиктограмма болып саналмайтын графикалық символдардың жиыны бар. Объектілердің атрибуттерін, жағдайларын және әрекеттерін сипаттайтын графикалық символдар ақырғы пайдаланушылармен пиктограмма сияқты қабылдануы мүмкін. Бірақ GUI–интерфейсі және стандарттарды құрастырушылардың көзқарасы бойынша, оларды графикалық батырмалар ретінде қарастырған жөн. Мұндай жағдайларда графикалық символдардың қолдануына мына терминдер “пиктограмма” және “графика” арқылы өзара алмастырылады.

Көрсеткіштер. Графикалық жүйелер әдетте тышқанның немесе жұмыр манипулятор түріндегі координаттық - сілтеуіш құрылғылардан тұрады.

Координаттық - сілтеуіш құрылғы деп пайдаланушы енгізуді осы құрылғы көмегімен жүзеге асыра алатын экрандағы орынды түсінеміз. Көрсеткіш - ол графикалық символ.  Координаттық - сілтеуіш құрылғыға жүйеге кірудің орынын визуальды көрсетеді. GUI интерфейсте қолданылатындар көрсеткіштер, бағыт түріндегі жүйелік көрсеткіштен, графикалық қайта түйісу және І-бейнелі немесе бөренелік көрсеткіштен тұрады.

Тікелей манипуляциялау. GUI интерфейсінің ең маңызды қасиеті - тікелей манипуляциялау болып табылады. Ол пайдаланушыға көрсеткіштің көмегімен объектілермен өзара қатынаста болуға мүмкіндік береді. Мысалы, тышқанның  көмегімен терезенің экрандағы орнын ауыстыруға болады. Терезе тақырыбы жолына көрсеткішті орналастырып, тышқанның  батырмасын басып ұстап, тышқанды да жылжытып отырамыз. Мәзір немесе баламаларды таңдаудың көмегімен орындалатын әрекеттерді, тікелей манипуляциялауды қолдана отырып орындауға болады. Мысалы, көптеген жүйелерде құжат пиктограммаларын жұмыс үстеліндегі принтер пиктограммасына тасу нәтижесі - құжатты баспаға шығару болып табылады. Тікелей манипуляция арқылы орындалатын әрекеттерге Move (орын ауыстыру), Copy (көшіру), Delete (өшіру), Link (байланыстыру) операциялары жатады.

Басқада  қасиеттер. GUI - интерфейске тән  басқада жұмыс әдісіне - айырбастау буфері, пернелердің қиыстырулары, мәзірде және сұхбатта үдейтін пернелер, сонымен қатар тышқан - пернелердің өзара қатынасының қосымша мүмкіншіліктері жатады. Бұл механизмдер пайдалы болғанына қарамастан, GUI-интерфейстің маңызды қасиеттері ретінде қарастырылмайды. GUI-интерфейсі қолданбалықтың жоғары дәрежесіне кепілдік бермейді. Бірақ дұрыс деңгейде жобаланған GUI-бағытталған программалық қосымша, пайдаланушы жұмысының тиімділігі жағынан, оның графикалық емес аналогынан асып түсуі мүмкін.

 

Қосымша деңгейінің өзара қатынас интерфейстері

WEB - қосымшалардың өзара қатынас интерфейсін орындау. Екі  қосымшаның, WEB – броузер және WEB – сервердің (әдетте бұл екі қосымша әртүрлі машиналарда және соған сәйкес түрлі программалы-аппараттық платформаларда орналасқандықтан, программалы-аппараттық интерфейс терминін қолданамыз) өзара қатынас интерфейсін қарастырамыз.

         Қосымша деңгейінің протоколы негізінде құрастырылған программа – аппараттық интерфейсі URI (Uniform Resource Identifier, ресурс идентификаторы), URL (Uniform Resource Locator, ресурстың орны), URN (Uniform Resource Locator, ресурстың аты) - бір сервистің әртүрлі идентификациялық аспектісі. Ол ресурс орналасқан, интернет жүйесі арқылы кіруге болатын тораптың түйінінің түрін, қатынас әдісін және орнын анықтайды. Бұл сервис үш бөлімнен тұрады.

1) Сұлба. сервистің түрін идентификациялайды. Ол арқылы сервиске қатынас жасауға болады. Мысалы WWW сервер.

2) Мекен жай. Ресурстың мекен жайын (хост) идентификациялайды. Мысалы, www. ripn.net.

3) Кіру мүмкіндігінің аты және жолы. Таңдалынған хоста, ресурсқа толық жол идентификацияланады. Біз оны ресурсқа кіру мүмкіндігіне пайдаланатын боламыз. Мысалы /home/images/image l.gif. Мысалы, Microsoft  (WWW-серверде) сайтында орналасқан, readme.txt файлы келесідей идентификаторы бар ресурсқа ие: http://www.microsoft.com/readme.txt. Ол дегеніміз, ресурсқа қатынас үшін HTTP протоколын пайдалану керек, (кіру сұлбасы қос нүктемен бөлінген “:” және пайдаланған протоколдың атын көрсетеді) келесі екі слэш www.microsoft.com серверінің мекен-жайын көрсетеді және файлдың аты /readme.txt қолданылады.

Әдетте, ресурс орналасқан компьютер туралы айтылса, оны URL немесе URN мәндері пайдаланылады, ол егерде ресурс толық белгіленсе (түрі, хост, жолы көрсетілсе) онда URI қолданылады. Әрине таңбаларды орын ауыстыруға болады, бірақ мәтінде оны не білдіретінін түсіндіру керек.

URI идентификаторы ресурс атын көрсетеді және оның параметрін де анықтайды. Параметрлер жолынан ресурс аты мына таңбамен “?” бөлінеді. Параметрлер жолы тұрақты құырылымдық символ тобынан тұрады, мынадай символмен“&” белгіленеді, мұндай лексама оның параметрінің атынан және оның  “=” символымен бөлінген  мәнінен тұрады. Бос орын символы “ “,  “+” таңбасына ауыстырылады. ASCII символдар жиынтығына кірмейтін лексем символы “%” таңбасына және осы символдың он алтылық мәніне ауыстырылады. Берілген ресурсқа барлық жол параметрлері, бір жол параметрі болып табылады, сондықтан да жолдың жеке параметрлерінің атауының немесе оның реті, түрінің соншалықты маңызды емес. Мысалы: http://www.exe.com/bm/scrshell.run?in=10&go=ok+and+ok&event=l&event=2. Бұл URI идентификатор төрт параметрден тұрады, үшеуі оны сандық, ал екеуі бір атауға ие. URI идентификаторға кейбір параметрдің мәндеріне талдау жатады. Аталмыш мысалда scrshell.run ресурсы.

 

         Тапсырмаларды орындауға арналған әдістемелік нұсқаулар:

а) Диалогты өзара қатынас түрлері жайлы қысқаша мағлұмат беру.

б) Пайдаланушы мен программалық жүйенің диалогын ұйымдастыру үшін, командалық файлдар мен оларды іс - жүзінде қолдану жайлы негізгі мағлұматтар беру.

в) Құрылған bat-файлдардың текстерін беру.

Жалпы ұсыныстар

Макростар кодтарын сараптаңдар.

Ескерту

Әр студенттің жұмысы жеке болуы қажет.

 

 

 

Мысал 1.

 <SCRIPT> элементін қолданып сценарий жазыңыз. Сценарий мәтін фрагментін бейнелеуге не жасыруға мүмкіндік береді. Бейнені басқару  екі батырмамен жүзеге асады.

<html>

<head><title></title>

<script>

function shows(n)

{var el=document.all["T1"].style

if (n==1)

el.visibility='visible'

else

el.visibility='hidden'

}

</script>

</head>

<body bgcolor= silver>

<h3 > Мәтінді бейнелеу және жасыру

</h3>

<form name = "form1">

<input type = "button" value = көрсету  onClick= "shows(1)">

<input type ="button"  value =жасыру onClick ="shows(2)">

</form>

<span  id ="T1">

<hr>

 Мәтін, не көрсетеді не жасырады

<hr>

</span>

</body>

</html>

 

Мысал нәтижесі:

 

 

 

1-форма:
<FORM>
<INPUT TYPE="radio" NAME="choice" 
 VALUE="choice1"> yes.
<INPUT TYPE="radio" NAME="choice" 
 VALUE="choice2"> no. 
</FORM>
</TD>
<TD>
2-форма:
<FORM>
<INPUT TYPE="radio" NAME="choice" 
 VALUE="choice1" CHECKED> yes. 
<INPUT TYPE="radio" NAME="choice" 
 VALUE="choice2"> no. 
Подпись:  </FORM>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

 

 

 

 

 

Мысал:

Келесі түрде RESET мәні қолданылады.

<HTML>
<BODY>
<FORM>
<INPUT TYPE="reset">
<BR>
<INPUT TYPE="reset"    VALUE="Форманы тазарту!">
</FORM>
</BODY>
</HTML>

 

Подпись:  Мысал:

SUBMIT мәнін қолдану.

<HTML>
<BODY>
<FORM>
<TEXTAREA>Қандай да бір мәтін
</TEXTAREA>
<BR>
<INPUT TYPE="submit" 
VALUE="Мәліметтерді жіберу!">
</FORM>
</BODY>
</HTML>

 

 

 

Әдебиет: 1[231-267], 5[161-194], 6[182-197], 4[211-324].

Бақылау сұрақтары:

1) Пайдаланушы жағында орындалатын программаның мағынасы мен ерекшелігі ?

2) Пайдаланушы интерфейсін орындауда FORM объектісінің компоненттері қалай анықталады?

3) Сыртқы программада деректерді жіберу әдістері қалай ескеріледі?

4) WUI және GUI интерфейстерінің айырмашылықтары қандай?

5) GUI пайдаланушы интерфейсін жасауда VBA-ның қандай компоненттері пайдаланылады?

6) GUI пайдаланушы интерфейсін іске асырушы макростардың жасалу технологиясы қандай?

 

Әдебиеттер тізімі 

1. Гультяев А.К.,Машин В.А.Уроки WEB-мастера. Технология и инструменты: Практическое пособие. - СПб.: Корона принт, 2001.

2. Торрес Роберт Дж. Практическое руководство по проектированию и разработке пользовательского интерфейса. Пер с англ. – М.: Издательский дом “Вильямс”, 2002.

3. Соловейчик: И.Е. Дисплеи в системах ЭВМ. - М.: СовРадио, 1979.

4. Делиза Д.О. Дисплеи. Под ред. Панкова Г.М., - М.: Мир, 1982.

5. Шeрр Сол. Электронные дисплеи. - М.: MMD, 1982.

6. Каган Б. К., Каневский М. М. Цифровые вычислительные машины и системы. - М.: Энергия, 1973.

 

Мазмұны

 

1 Зертханалық жұмыс. Программалық жүйемен директивті – диалогтық өзара қатынас түрі

3

2 Зертханалық жұмыс. “Hand User Interface” пайдаланушы интерфейсі

6

3 Зертханалық жұмыс. WUI (web user interface) негізіндегі пайдаланушы интерфейсінің компоненттері. Достық пайдаланушы интерфейсі

10

4 Зертханалық жұмыс. WUI-CGI негізінде интерфейсті жасаудағы сұрақтардың кешенді түрде шешілуі. GUI (Graphic User Interface) негізіндегі пайдаланушы интефейсі

16

Әдебиеттер тізімі

23

 

2011 ж. баспа жоспары, реті 251