SlideShare a Scribd company logo
1 of 68
1
Съдържание
Увод ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .... ... ... ... ... ... ... ... ... ... ... ... ... ... … … … … 2
1. Състояние на проблема по литературни данни ... ... ... ... ... ....... ... ... .. ... … … … … 4
1.1. HTTP ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .. ... ... ... ... ... ... ... ... … … .6
1.2. CSS ... ... ... ... ... ... .. ... ... ... ... .. .. ... .. ... ... ... ... ... ... .. ... ... ... ... .. …. …… …8
1.3. HTML ... ... ... ... ... ... .. ... ... ... ... ... ... .. ... ... ... ... ... ... .. ... ... ....... … … … ... 10
1.4. XML ... ... ... ... ... ... .. ... ... ... ... ... ... .. ... ... ... ... ... ... .. ... ...... ... … … … … ..13
1.5. JavaScript ... ... ... ... ... ... .. ... ... ... ... ... ... .. ... ... ... ... ... ... ..... ... … … … …. .13
1.6. JSON ... ... ... ... ... ... .. ... ... ... ... ... ... .. ... ... ... ... ... ... .. ... ...... .... .. …. … .. 15
1.7. jQuery ... ... ... ... ... ... .. ... ... ... ... ... ... .. ... ... ... ... ... ... .. .... ... ... … … … … ..17
1.8. AJAX ... ... ... ... ... ... .. ... ... ... ... ... ... .. ... ... ... ... ... ... .. ... ... ... ... . ….. …. … 19
1.9. PHP ... ... ... ... ... ... .. ... ... ... ... ... ... .. ... ... ... ... ... ... .. ... ... ..... ... .. … … … ...20
1.10. MySQL ... ... ... ... ... ... .. ... ... ... ... ... ... .. ... ... ... ... ... ... ..... ... ... … … … …22
1.11. SVN ... ... ... ... ... ... .. ... ... ... ... ... ... .. ... ... ... ... ... ... .. ...... ... ... …. … … ….22
2. Теоретично решение на поставената задача... ... ... ... ... ... ... ... ... ... ... .. … … … … ..25
3. Описване на апаратурата и софтуерната част ... ... ... ... ... ... ... ... ... ... ... … … … … .31
4. Изчислителна част / функционално тестване на софтуерната част ... ... … … … …. .33
4.1. Конфигуриране ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .... ... ... ... ... … … … .. .33
4.2. Тестване ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... … … .. … .60
5. Икономическа оценка ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .. … … .. … .. .... ... ... ..65
6. Приложимост на дипломната работа ... ... ... ... ... ... ... ... ... ... ... ... ... ... … … … .. .. ..66
7. Изводи и претенции за самостоятелно получени резултати ... ... ... .. … … .. .. .. …...67
8. Използвана литература ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... … … … … ..68
2
Увод
В днешно време Интернет е неразделна част от ежедневието на хората,
независимо дали става дума за голямо предприятие, малка фирма или частно лице.
Интернет вече не е само забавление, а средство за информация, за установяване на
контакти, за търсене и най-вече за намиране. Интернет представлява инструмент на
свободното слово и свободната комуникация. Той има все по-голямо икономическо и
социално въздействие. Освен това е свързано с новите технологии, бързото им
разпространение и все по-широкото им използване в ежедневния икономическо и
социален живот в обществото. Без развитието на Интернет–мрежата е немислима
модернизацията и просперитетът на която и да е нация по света. Интернетът се
използва като основно допълнение и алтернатива на другите носители на информация -
книгите и учебната литература. Развитието на Интернет се проектира пряко върху
всички сфери на живота: търговия, банково дело, електронни услуги, здравеопазване и
особено образование. Мрежата вече е неразделна част от средното образование и от
самообучението. Информационната система представлява организирана съвкупност от
3
данни, обработки и човешки ресурси, която осигурява ефективно функциониране на
дадена организация при работата й върху дадена задача. Целта на създаването на всяка
информационна система е автоматизация и подобряване ефективността на работа, най-
често свързана с фиксиран брой многократно повтарящи се дейности.
Тaзи дипломна работа има за цел да се проектира и разработи web-базирана
система за контрол и управление на отдалечени обекти. В процеса на работа са
използвани следните технолигии: HTTP, CSS, HTML, XML, JavaScript, JSON, jQuery,
AJAX, PHP, система за управление на База-данни - MySQL, SVN, OOP и Design
Patterns. Използваната комуни-кационна свързаност е IP.
Задачите, които студента си поставя са: Разработване на web-базирана
система за контрол и управление на териториално отдалечени обекти. Да се обоснове
избора на техническото решение и използваните комуникационни технологии. Да се
предложи и оцени метод за предаване на контролна и управляваща информация между
свързани обекти през IP мрежа. Да се представят изводи и насоки за бъдещо развитие
на системата.
4
Състояние на проблема по
литературни данни
Необходимостта от надеждно състояние да се свържеш с всеки навсякъде,
става все по-важно за нашия личен и бизнес живот. За да се поддържа незабавната
доставка на милиони съобщения, които се обменят между хора от цял свят, ние
разчитаме на мрежа от взаимосвързани мрежи. Тези информационни мрежи или мрежи
за данни се различават по размер и възможности, но всички те имат четири основни
общи елементи:
 Правила и споразумения които управляват как съобщенията се изпращат,
насочват, получават и интерпретират;
 Съобщения или дялове от информация, които пътуват от едно устройство
до друго;
 Средство за свързване на тези устройства - носител, който може да
транспортира съобщения от едно устройство на друго;
 Устройства в мрежата, които обменят съобщения помежду си.
Стандартизацията на различните елементи на мрежата позволява оборудване
и устройства, създадени от различни компании да работят заедно.
Мрежовата архитектура в областта на информатиката изразява единството и
съгласуваността на различни компоненти и цели структури, включени в мрежа. Тази
архитектура дефинира връзките и взаимодействието между тези различни компоненти
и структури като отделни елементи на тази архитектура на базата на обобщения
архитектурен модел за разпределена система. Разпределена система наричаме
структура от общи по предназначение компоненти, всеки един от тях поел една от
функциите на тази структура - функции, разпределени между отделните компоненти на
системата. В най-общ случай тази мрежова архитектура дефинира всички правила за
изграждане на една разпределена система чрез интегриране на различни компютърни и
комуникационни ресурси в една обща информационна система (ИС) за обработка и
обмен на информация. Пренасянето на данните в такава ИС се осъществява в
комуникационна среда наречена мрежа. Мрежата е изградена от физически линии за
връзка и комутационни възли за реализиране на отделните пътища - маршрути. Затова
тези комутационни възли са наречени възли за маршрутизация. Различаваме три вида
5
мрежови структури в зависимост от географското разположение на отделните работни
станции в мрежата:
 LAN (Local Area Network)-Компютърна мрежа, която обслужва една
организация и е разположена в една сграда.
 MAN (Metropolitan Area Network)-Компютърна мрежа, която обхваща
територия на едно населено място или голяма сграда с много разположени
в нея организации.
 WAN (Wide Area Network)-Компютърна мрежа, която използва
високоскоростни, далечни комуникации или спътници, за да свърже
компютри, намиращи се в различни географски точки.
Фактът, че започваме да използваме все по-сложни компютърни устройства в
домовете и офисите ни, ни кара да се замислим за тези мрежови устройства, които
свързват тези компютри, принтери и всичко друго заедно с Интернет. Мрежовите
устройства са често пренебрегвани устройства, защото хората не се замислят толкова за
тях.
Какво е Умна къща ? - въпрос задаващи си мнозина. За останалите това е вече
удобство, граничещо с лукс и сигурност. Най-общо Умна къща е тази, която е
оборудвана с "умни машинки", предоставящи ни контрол върху нея, когато сме си във
или извън дома. Умна къща може да се нарече и всеки друг дом, апартамент или офис,
който също е под наш контрол и наблюдение. Чрез смартфон или таблет, компютър или
даже стационарен телефон, можете да включвате, изключвате, регулирате температура
и управлявате завесите. Това е съвсем началото и малка част от възможностите й!
Умната къща (smarthouse) се споменава още в началото на 80- те години на
миналия век, когато в списание "Byte" се появява статия "Computerize a Home". Неин
автор е Steve Ciacia, който предлага метод за управление на електрическите уреди в
една инсталация чрез ултразвукови сензори, свързани директно към захранващите
кабели. В миналото това можеше да ни се стори фантастика, но вече е реалност. И не
чрез ултразвук, а с нови по-сигурни и леснодостъпни решения, изградени на базата на
микрокомпютрите.
Умната къща ще Ви предложи удобство, когато се върнете от работа,
автоматично ще ви разпознае със сензора за пръстов отпечатък и ще извърши вместо
вас всички рутинни действия - ще пусне осветлението, по маршрута, който най-често
ползвате, ще включи климатика в стаята, където най-често отсядате, а предварително
затоплената баня и топла вода ще ви очаква.
6
Използвани технологии.
1.1. HTTP
HTTP (Hypertext Transfer Protocol). Протокол за трансфер на
хипертекст е мрежов протокол, от OSI модела (приложния слой), за пренос на
информация в компютърни мрежи. Използва се, като средство за публикуване
на HTML страници, протоколът довежда до създаването на Световната уеб мрежа
World Wide Web (WWW).
В HTTP протокола има известни разделения, като клиент и сървър. Клиент
(обикновено това са Web-браузърите (или web-навигаторите ) – т.е. самите
приложения, а не физически хостове в мрежата ). Сървър (това са Web-сървърите – т.е.
самоте приложения, а не хостовете в мрежата).
HTTP определя 8 различни клиентски метода за заявки:
 HEAD – иска изпращане на заглавията отговарящи на посочения с URL
(Uniform Resource Locator е стандартизиран адрес на даден ресурс, например
документ или страница, в Интернет или друго пространства) ресурс. Отговорът
на сървъра е идентичен с този на GET, но е с липсващо тяло. По този начин
може да се вземе само метаинформацията, свързана с ресурса, спестявайки
трансфера на целия файл.
 GET – с него клиентът прави заявка за ресурс, зададен чрез URL. Могат да се
изпращат и ограничено количество данни, закодирани директно в самия URL
(отделени чрез въпросителен знак).
 POST – позволява клиентът да изпрати данни на сървъра. Тази заявка
обикновено се генерира при изпращането на уеб формуляр, а данните могат да
бъдат: текст, написан от потребителя във формуляра; файл на клиентския
компютър и др.
 PUT — качва файл, който в бъдеще ще отговаря на посочения URL.
 DELETE — изтрива посочения ресурс.
 TRACE — сървърът връща получената заявка със статус OK. Позволява да се
провери в какъв вид пристига заявката при сървъра и дали (и как) е била
модифицирана по трасето от междинни прокси сървъри.
7
 OPTIONS — сървърът трябва да отговори с поддържаните от него клиентски
методи, съответстващи на зададения URL ,или с поддържаните от сървъра
методи като цяло, ако е зададено * вместо URL.
 CONNECT — използва се при комуникация през прокси.
Механизъм на действие:
GET заявна на клиента – Браузърът изпраща GET заявка към сървъра, който съдържа
необходимите данни за сървъра да я изпълни.
1. GET http://.... --- достави мрежовият ресурс (файл, скрипт и т.н.), които е
асоциран с този URL.
2. Host fi.something.org – определя Интернет хоса и номера на порта на ресурса,
който е заявен.
3. User – Agent: съдържа информация за приложението на клиент – хоста,
извършващо заявката.
4. Реферер: от коя страница е пристигнато на заявения ресурс (от търсачка, друг
сайт, ако не е изрично забранено в настройките на броузъра).
Отговор на сървъра – Уеб сървърът изпраща ресурса, който е поискан, със следните
заглавки:
1. Статус код – обозначава успешното или неуспешно извършване на заявката.
2. Date – датата и часа на сървъра.
3. Expire – „времето на годност“ – времето, до което страницата е валидна, т.е.
може да бъде „кеширана (запазена локално на клиента или друг прокси или кеш
сървър“.
4. Server – името на сървърното приложение и версията му.
5. Countent-type – тип на документа.
6. Set-Cookie – запазва бисквитка (cookie), която бива върната към сървъра при
последваща заявка.
Изходният код на един сайт предвавлява чуст текст, който се разпознава от
уеб=браусъра и се интерпретира от него, за да излязат на екрана видимите обекти за
потребителите – таблици, полета и т.н
HTTP е безсесиен протокол – това означава, че резултата на всяка следваща
заявка не зависи от резултата на предишната и така всички клиенти получават
равноправно еднакти ресурси.
8
1.2. CSS
CSS (Cascading Style Sheets) е език за описание на стилове (езит за стилови
листове, style sheet language) – използва се основно за описване на представянето на
документ, написан на език за маркиране. Най-често се използва заедно с HTML, но
може да се проложи върху произволен XML документ. Официално спецификацията на
CSS се поддържа от W3C. CSS отговаря за дизайна, как ще изглежда дадена страница.
CCS е създаден с цел да бъдат разделени съдържанието и структурата на уеб
страниците отделно от тяхното визуално представяне. Преди стандартите за CSS,
установени от W3C през 1995 г., съдържанието на сайтовете и стила на техния дизайн
са писани в една и съща HTML страницата. В резултат на това HTML кода се превръща
в сложен и нечетлив, а всяка промяна в проекта на даден сайт изисквала корекцията да
бъде нанасяна в целия сайт страница по страница. Използвайки CSS, настройките за
форматиране могат да бъдат поставени в един единствен файл, и тогава промяната ще
бъде отразена едновременно на всички страници, които използват този CSS файл.
CSS позволява да се определя как да изглеждат елементите на една HTML
страница – шрифтове, размери, цветове, фонове и др. CSS кодът се състои от
последователност от стилови правила, всяко от които представлява селектор, последван
от свойства и стойности. Например в следния CSS код:
p{
font-size: 9px;
}
Има едно правило. То се състои от селектора p и свойството font-size, на което е
зададена стойност 9px. Това правило ще направи размера на шрифта във всички
параграфи 9 пикселa.
Селектори. Селекторите се изполват за да покажат към кои елемент на HTML
документа трябва да бъде прилаган съответният стил. Съществуват много видове
селектори. Някои селектори позволяват постигане на динамичност на страницата до
определена степен. Например само с помощта на CSS могат да бъдат направени
изкачащи менюта, хипервръзки, които при посочване променят цвета си и др.
Видове Селектори. В CSS съществуват няколко видя селектори:
1. Класови селектори – с помоща на CSS можете да създавате собствени класове за
всеки един селектор. След дефиниране на класа, то всички селектори, на които е
9
присвоен този клас, ще показват един и същ ефект. Използва се
следния синтаксис:
Селектор.клас {атрибут: стойност}
Пример: Нека имаме клас заглавия h1 със син цвят и клас параграфи p,
позиционирани вляво.
Името на класа е произволно, но за удобство ще използваме blue. Следователно
целия код ще изглежда така:
h1.blue {
color: #0000ff;
}
p.left{
text-align: left;
}
Вече дефинираните класове, могат да се използват и в тялото (body-то) на
страницата (body) чрез следния код:
<h1 class="blue"> Синьо Заглавие </h1>
2. ID селектори - с помощта на този вид селектори могат да се декларират
допълнителни параметри, които не са указани в декларираните класове. Имената
отново са произволни. Използва се следния синтаксис:
#id {атрибут: стойност} /или също селектор#id {атрибут: стойност}
3. Контекстуални селектори - комбинация от няколко селектора, като зададения
ефект се проявява в зависимост от подредбата им. Използва се следния
синтаксис:
1-ви селектор 2-ри селектор... {атрибут: стойност}
4. Групиране на селектори
Няколко селектора могат да бъдат подредени, като се отделят със запетаи, и им се
зададе еднакъв ефект, т.е. атрибути с еднакви стойности. Синтаксисът при
групирането е:
селектор1,селектор2,селектор3,... {атрибут: стойност}
Коментари в CSS - в HTML се използва: <!--Коментари и обяснения-->
В CSS коментарът трябва да е затворен между наклонена черта със "звезда" и "звезда" с
наклонена черта: /*Закоментиран текст*/.
10
Свойства:
Color, background-color, text-align, font-style, font-weight, font-size, font-family,
width, border, margin, margin-left, margin-right, margin-top, margin-bottom.
Вграден стил на елемента
Зададеният по този начин стил се нарича inline. Представлява записване на
стилова информация в атрибута style на даден таг. Полученият стил е валиден директно
само за елемента, на който е зададен (въпреки това негови поделементи могат да го
наследят при определени условия). Този метод има редица ограничения, тъй като не
позволява използването на CSS селектори.
Блок със стилове в документа
Зададеният по този начин стил се нарича internal. Представлява блок със
стилове, затворен в таг <style>. Този таг трябва да е поставен в заглавната част на
HTML документа (тага <head>).
<h2 style="font-size: 10pt; color: blue;">Hello</h2>
Файл със стилове
Зададеният по този начин стил се нарича external. Представлява
самостоятелен файл, който се състои от стилове и към него е направено обръщение в
HTML документа. Това е единственият способ, който отговаря на идеята за отделяне на
съдържание от оформление.
Указването на такъв файл се случва между <head> таговете и има следният
синтаксис:
<link rel="stylesheet" href="http://example.com/css/style.css" type="text/css" />
1.3. HTML
HTML (Hyper Text Markup Language) – език за маркиране на хипертекст е
основният маркиращ език за описание и дизайн на уеб страници. HTML е стандарт
в Интернет, а правилата се определят от международния консорциум W3C.
Описанието на документа става чрез специални елементи, наречени HTML
елементи или маркери, които се състоят от етикети или тагове (HTML tags) и ъглови
скоби(като например елемента <html>). HTML елементите са основната градивна
единица на уеб страниците. Чрез тях се оформят отделните части от текста на една уеб
страница, като заглавия, цитати, раздели, хипертекстови препратки и т.н. Най-често
HTML елементите са групирани по двойки <h1> и </h1>.
11
В повечето случаи HTML кодът е написан в текстови файлове и се хоства
на сървъри, свързани към Интернет. Тези файлове съдържат текстово съдържание с
маркери – инструкции за браузъра за това как да се показва текстът. Предназначението
на уеб браузърите е да могат да прочетат HTML документите и да ги превърнат в уеб
страници. Браузърите не показват HTML таговете, а ги използват, за да интерпретират
съдържанието на страницата.
Основното предимство на HTML е, че документите, оформени по този начин,
могат да се разглеждат на различни устройства, а не само на екрана. Документът може
да бъде правилно оформен и върху монитора на персонален компютър, и върху
миниатюрния дисплей на пейджър или мобилен телефон.
<!DOCTYPE html>
<html>
<head>
<title>Заглавие на документа</title>
</head>
<body>
<p>Здравей, свят!!</p>
<p>Validate <a href="http://something">You see this</a></p>
</body>
</html>
HTML таговете са най-малката съставна част на един HTML документ. Те,
заедно със своите атрибути (като цвят, размер и т.н), съставят т.нар. HTML елементи.
Таговете са ключови думи, заградени в ъглови скоби. Обикновено са по двойки:
 таг за начало – маркира началото на един HTML елемент;
 таг за край – маркира края на HTML елемента. За разлика от началния таг,
крайният има наклонена надясно черта пред името си:
<b> ... </b>
<html> елемент
Указва на браузъра, че това е HTML документ. Отбелязва началото и края на
документа и съдържа всичи други негови елементи
<html>
12
...
</html>
<head> елемент
Съдържа заглавието на документа, и може да съдържа стилове, скриптове,
енкодинг и т.н.
<html>
<head>
<title>Заглавие на документа</title>
</head>
…
</html>
<body> елемент
Съдържа форматиране видимо за потребителя – текст, хиперлинк, картинки,
таблици, бутони, параграфи и т.н.
<html>
<head>
<title>Заглавие на документа</title>
</head>
<body>
Съдържание на документа...
</body>
</html>
HTML 5 е най-новият проект на HTML стандарта, като той все още е в процес
на разработка. Той въвежда много нови свойства. Някои от тях са <video>, <audio>,
<canvas>. Основната цел на тези подобрения е да се улесни употребата на
мултимедийни и графични елементи, без да е необходимо да се ползват външни
апликации. Други нововъведения, като <section>, <article>, <header>, <nav>, целят да
обогатят съдържанията на документите. Някои от досегашните елементи, като <a> и
<menu>, са променени и стандартизирани. HTML 5 е поддържан от по-стари браузъри,
тъй като е направен така, че новите му функции просто да се игнорират от тях.
13
1.4. XML
XML (eXtensible Markup Language) – разширяем маркиращ език е стандарт
(метаезик), дефиниращ правила за създаване на специализирани маркиращи езици,
както и синтаксисът, на който тези езици трябва да се подчиняват. Сам по себе си той е
безполезен, защото указва само как да бъде структуриран един документ (чрез
маркиране с етикети), но не и какво означават отделните маркери (етикети). Ето защо е
по-правилно да се нарече метаезик отколкото език — обикновените езици
имат семантика, т.е. предават някаква информация, докато XML указва
само граматиката (по-точно синтаксиса) на езиците, базирани на него.
Ползата от XML се състои в това, че синтаксисът (структурирането) на
документите се измисля само веднъж, а специализираните маркиращи езици само
дефинират семантиката т.е. набора от маркиращи етикети и тяхното значение. Другата
изгода е, че XML прави възможно разработването на семантично агностични
програмни средства които могат да обработват всички XML базирани езици, дори и
такива които не са съществували по време на съставянето на софтуера. Тези програмни
средства могат след това да се използват и в изработването на софтуер който е написан
за конкретен XML език. Или накратко — разделянето на синтаксиса от семантиката е
поредното въплъщение на принципа „Разделяй и владей“.
Синтаксис
XML информацията се маркира като се загражда с етикети:
<name>Кирил Михайлов Цветанов</name>
Освен това етикетите могат да се влагат един в друг, така че да са получи
йерархична организация на информацията:
<person>
<name> Кирил Михайлов Цветанов </name>
<country>България</country>
<language>български</language>
<language>руски</language>
</person>
1.5. JavaScript
JavaScript е интерпретиран език за програмиране, разпространяван с
повечето Уеб браузъри. Поддържа обектно-ориентиран и функционален стил на
14
програмиране. Най-често се прилага към HTML-а на Интернет страница с цел добавяне
на функционалност и зареждане на данни.
JavaScript е програмен език, който позволява динамична промяна на
поведението на браузъра в рамките на дадена HTML страницата. JavaScript се зарежда,
интерпретира и изпълнява от уеб браузъра, който му осигурява достъп до Обектния
модел на браузъра. JavaScript функции могат да се свържат със събития на страницата
(например: движение/натискане на мишката, клавиатурата или елемент от страницата,
и други потребителски действия). Javascript е най-широко разпространеният език за
програмиране в Интернет. Прието е JavaScript програмите да се наричат скриптове.
JavaScript може да влияе на почти всяка част от браузъра. Браузъра изпълнява
JavaScript кода в цикъла на събития т.е. като резултат от действия на потребителя или
събития в браузъра (например document.onLoad).
Основни задачи в повечето JavaScript приложения са:
 Зареждане на данни чрез AJAX
 Ефекти с изображения и HTML елементи: скриване/показване, пренареждане,
влачене, слайд шоу, анимация и много други.
 Управление на прозорци и рамки.
 Разпознаване на възможностите на браузъра.
 Използване на камерата и микрофона.
 По-добър и гъвкав потребителски интерфейс
Какво не може да се прави с помощта на JavaScript :
 Не може да се записва информация на потребителския компютър или отдалечения
сървър.
 Не може да се запазва информация директно в отдалечена база данни.
 Не може да се стартират локални приложения.
Зареждане. JavaScript кодът може да се вмъква в HTML документа между
двойката елементи <SCRIPT> и</SCRIPT>. Когато срещне тага <SCRIPT>, браузърът
разбира, че трябва да спре интерпретирането на HTML кода и да започне да обработва
скрипта, намиращ се между <SCRIPT> и </SCRIPT>. В следния пример е създадена уеб
страница в която се вмъкна JavaScript код, който изписва на екрана "Здравей!"
15
<HTML>
<HEAD>
<TITLE>javascript</TITLE>
</HEAD>
<BODY>
<SCRIPT>
document.write("Здравей!");
</SCRIPT>
</BODY>
</HTML>
Другият начин да заредите JavaScript е да го поставите в отделен файл.
<SCRIPT src="hi.js"></SCRIPT>
Това разделение на javascript логиката от HTML структурата е един от
основните принципи на Софтуерното инженерство.
Обхват на променливире.
В JavaScript има два вида обхват за променливите:функционален и глобален.
 Функционален обхват важи всяка променлива обявена чрез var в рамките на дадена
функция. Тази променлива е видима единственно в рамките на тази функция.
 Глобален обхват важи за всяка променлива обявена извън функция или без var,
дори и във функция. Тази променлива е видима от всеки друг код на страницата.
Функциите са много гъвкави структури и са едно от най-добрите неща в
JavaScript. Позволяват за логическо затваряне и обособен обхват на променливите.
1.6. JSON
JSON (JavaScript Object Notation) , е текстово базиран отворен стан-
дарт създаден за човешки четим обмен на данни. Произлиза от скриптовия
език JavaScript, за да представя прости структури от данни и асоциативни масиви,
наречени обекти. Въпреки своята връзка с JavaScript, това е езиково независима
спецификация, с анализатори, които могат да преобразуват много други езици в JSON.
Форматът на JSON често е използван за сериализация и предаване на
структурирани данни през Интернет връзка. Използва се главно, за да предаде данни
16
между сървър и Интернет приложение, изпълнявайки функциите на алтернатива
на XML.
Следващият пример показва представянето на обект, който описва човек в
JSON. Обектът има string полета за първо и последно име, Number поле за
години,Object, който представя адресът на човека и Array от телефонни номера
представени като Object.
{
"firstName": "Kiril",
"lastName": "Tsvetanov",
"age": 24,
"address": {
"streetAddress": "21 2nd Street",
"city": "New York",
"state": "NY",
"postalCode": 10021
},
"phoneNumbers": [
{
"type": "home",
"number": "212 555-1234"
},
{
"type": "fax",
"number": "646 555-4567"
}
]
}
JSON често се използва в програмирането на Ajax. Ajax е термин за
способността на уебстраницата да изисква нови данни след като е заредила в уеб
браузъра, обикновено в отговор на действията на потребителя на изобразената интернет
страница. Като част от модела на Ajax, новата информация обикновено се включва в
интерфейса на потребителя и се показва динамично още щом се получи от сървъра.
Като пример за това на практика е, че ако някой потребител пише в search box,
17
скриптове от браузъра на клиента изпращат какво е написал потребителят досега в
сървъра, който отговаря с лист от възможни завършени търсения от неговата база
данни. Те могат да бъдат изобразени като падащо меню под търсачката , за да може
потребителят отгоре да спре да пише и да избере цялостен и често
търсен стринг директно. Когато е бил описан през средата на 2000-дната година, Ajax
най-често използвал XML като формат за обмен на данни, но много разработчици също
използвали JSON, за да предават обновления между сървъра и клиента.
Следващият JavaScript код е пример за client, който използ-
ва XMLHttpRequest, за да изискат информацията в JSON формат от сървъра.
(Програмирането от страна на сървъра е пропуснато; то трябва да е настроено да
отговаря на заявките на url с JSON-форматиран string.)
var my_JSON_object;
var http_request = new XMLHttpRequest();
http_request.open("GET", url, true);
http_request.onreadystatechange = function () {
var done = 4, ok = 200;
if (http_request.readyState == done && http_request.status == ok) {
my_JSON_object = JSON.parse(http_request.responseText);
}
};
http_request.send(null);
1.7. jQuery
jQuery е JavaScript библиотека. В основата си jQuery опростява достъпа до
всеки елемент на дадена уеб-страница, като по този начин позволява лесно изграждане
на динамична функционалност в страниците.
jQuery архитектурата позволява на разработчиците да създават плъгин
кодове, като по този начин разширяват нейната функционалност. В момента има на
разположение в интернет над 16 хиляди jQuery плъгина, които обхващат широк
спектър от функционалности, като помощни приложения тип Ajax, уеб услуги,
мрежови масиви от данни, динамични списъци, XML и XSLT инструменти, drag and
drop приложения, събития, управление на бисквитки, модални прозорци и дори jQuery
базиран Commodore 64 емулатор. Важен източник на jQuery плъгини е поддомейнът с
плъгини, който е разположен на сайта на jQuery. Въпреки това, при опита през
18
декември 2011 година да се разчисти сайта от спама, плъгини в този поддомейн са били
случайно изтрити.
jQuery предлага мощен инструментариум за селектиране на елементи в
документ. Ето и част от селекторите, които могат да се ползват:
$("*") - Селектира всички елементи.
$(":animated") - Селектира всички елементи, които в момента са в процес на анимация.
$("p") - Селектира всички посочени елементи.
$("#lastname") - Селектира елемента с посочено ID.
$(":input") - Селектира всички елементи за въвеждане, текстови полета и button
елементи.
$(".intro") - Селектира всички елементи от посочения клас.
.text() - Взема смесеното съдържание на даден елемент — текст и код.
За елемента
div class="demo-box">Demonstration Box</div>
<ul>
<li>list item 1</li>
<li>list <strong>item</strong> 2</li>
</ul>
</div>
Изпълняваме:
$('div.demo-container').text()
Резултат:
Demonstration Box list item 1 list item 2
Методи:
.attr() - Взема стойността на атрибута на първия елемент от избраните елементи или
установява атрибут за един или повече от избраните елементи.
За кода <input type="checkbox" checked="checked" />
Изпълнението на: $( elem ).attr( "checked")
Ще даде: "checked"
19
val() - Взема текущата стойност на първия от избраните елементи или установява
стойност на избраните елементи.
//За кода:
<input type = "button" name="check" id="check" value="Test button">
//Изпълнението на :
alert($('#check').val());
//Ще създаде изведе съобщение : "Test button"
//А изпълнението на
$('#check').val("Submit")
//ще е има за резултат:
<input type = "button" name="check" id="check" value="Submit">
Събития:
.bind() - Закача ивент хендлър (event handler) за елементите.
$( "#foo" ).bind( "click", function() {
alert( "User clicked on 'foo.'" );
});
.click() - Закача event handler за "click" JavaScript събитие или предизвиква това събитие
върху даден елемент.
$( "#target" ).click(function() {
alert( "Handler for .click() called." );
});
.dblclick() - Закача event handler за "dblclick" JavaScript събитие или предизвиква това
събитие върху даден елемент.
$( "#target" ).dblclick(function() {
alert( "Handler for .dblclick() called." );
});
1.8. AJAX
AJAX (Asynchronous JavaScript and XML) е похват в уеб разработките за
създаване на интерактивни уеб приложения. Предимството на Ajax е, че посредством
използването му уеб страниците се зареждат по-бързо. Посредством асинхронен обмен
20
на малки порции данни „зад кадър“ могат да се променят само частично информации
на уеб страницата. По този начин се намалява количеството информация, която се
трансферира между сървъра и клиента. Асинхронността позволява да не бъде
необходимо да се презарежда цялата страница отново. По този начин се
повишава интерактивността, скоростта и функционалността на страниците.
Предимства:
 Няма нужда от презареждане на страницата
 Времената за отговор се скъсяват
 Броят заявки към сървъра намалява, защото скриптовете и CSS-файловете се
зареждат само веднъж
 Посредством променливи в JavaScript може да се запази състоянието на програмата
Недостатъци:
 Не се поддържа от стари браузъри, както и от някои мобилни телефони
 При натискане на бутона за връщане назад на браузъра приложението не се връща в
предишното състояние, а в състоянието при зареждането му
 При запазване на отметка в браузъра се запазва отметка към приложението в
началното му състояние
 Повечето търсачки не изпълняват код на JavaScript , поради което не цялото
съдържание на сайтове с Ajax се индексира
1.9. PHP
PHP е скриптов език върху сървърната (обслужваща) страна език с отворен
код, който е проектиран за уеб програмиране и е широко използван за създаване на
сървърни приложения и динамично уеб-съдържание. PHP е рекурсивен акроним от
PHP: Hypertext Preprocessor (като в самото начало има значение, дадено от създателите
му, на Personal Home Page).
При поискване, кодът, който е написан на PHP се интерпретира от уеб
сървъра на който е качен, и резултатът се връща на уеб браузърът. Потребителят не
може да види чистият PHP код без да има достъп до самият файл в който той е записан.
По този начин е помислено за сигурността. PHP файловете могат да съдържат текст,
HTML, CSS, JavaScript и PHP код. PHP файловете имат разширение .php.
21
PHP може да работи с повечето модерни бази данни –
MySQL, PostgreSQL, Microsoft SQL Server, Oracle, SQLite и д.р.
PHP действа главно като филтър, който взема съдържанието на файл и
изпълнява специални PHP инструкции, описани във файла. PHP скриптът има начален
и краен таг, между които е разположено съдържанието. Отварящият таг е <?php, а
затварящия е ?>. Цялата инструкция трябва да завършва с “;”.
Пример за код, който визуализира "Здравей, свят":
<?php
echo 'Здравей, свят!'; /* Hello world */
?>
Обектно-ориентиран PHP
<?php
class Beginning {
function start()
{
echo 'Hello, world';
}
}
$var = new Beginning();
$var->start();
?>
Дата и час:
<?php
$date = date("d.m.Y H:i:s");
echo $date; // Пример 18.05.2012 20:04:25
?>
Предимства:
 PHP работи на множество операционни системи (Unix, Linux, Windows, BSD, Mac
OS X) и множество уеб сървъри - Apache, lighttpd, IIS
 PHP е лесен за разработване
 PHP е безплатен и се разпространява под лиценза на BSD
22
 PHP може да бъде лесно модифициран и адаптиран към нуждите на прилагащата го
организация
 PHP е създаден и пригоден за разработката на уеб приложения
 PHP не изисква особени умения от разработчици работили на структурни езици —
езикът е с прост и интуитивен синтаксис за такива разработчици
 PHP е широко разпространен поради простотата си. Има много програмисти, което
води до по-евтино платен персонал във фирмите, по ниска цена на приложенията за
клиентите и още по-голяма използваемост. Поддръжката за PHP разработчици е
гарантирана от множеството форуми и приложения на общността.
 По аналогия с Perl към стандартните класове на PHP могат да бъдат писани и много
допълнителни модули
 PHP поддрържа следните системи за управление на бази от данни:
IBM DB2 - formix — Ingres, Microsoft SQL Server (MS SQL),
mSQL, MySQL, Oracle, PostgreSQL, Sybase
1.10. MySQL
MySQL е SQL система за управление на бази данни (СУБД).
MySQL е популярна за интернет приложения като MediaWiki или Drupal и е
база данни в LAMP, MAMP и WAMP платформи (Linux/Mac/Windows-Apache-MySQL-
PHP/Perl/Python), и за софтуера с отворен код Bugzilla - приложение за проследяване на
грешки. Нейната популярност като Интернет приложение е тясно свързана с
популярността на PHP, като често, комбинирани с MySQL, са наречени Динамичното
дуо. Лесно е да се намерят много източници, които ги комбинират в интернет статии
или книги (PHP and MySQL for Dummies, PHP and MySQL Bible, Beginning PHP and
MySQL, и други) В тези книги се твърди, че MySQL е по-лесен за изучаване от други
бази данни. В пример от книгата за глупаци се посочва, че от MySQL може да се излезе
с командите exit или quit, но това е вярно и за много други бази данни.
1.11. SVN
SVN (Subversion) е софтуерна система за контрол на версиите. Проектът е
разработен на база на концепцията oтворен код (open-source). Системата използва
централизирано хранилище за съхранените на файлови структури. Тя следи всички
промени в директориите и файловете, поставени под неин контрол, като запазва всички
стари копия със съответната дата и час, при постъпване на нови версии в хранилището.
Това позволява на потребителя при нужда да се върне към по-стара версия на проекта
23
или да разгледа в детайли историята на промените. Такава организация на съхранение
на файловете улеснява съвместната едновременна работа на много хора над даден
проект, работещи от различни места и в различни времеви зони. Тази система може да
бъде използвана за всякакви колекции от файлове – от изходен код до домакински
списъци за пазаруване.
Команди:
 svn checkout - получаване на работнo копие за някое от поддърветата на
хранилището.
 svn commit – изпращане на промените към хранилището. След тази команда,
всички нови работни копия съдържат направените промени. Може да бъде
добавено и съобщение за направените промени при изпращането им с текущата
команда. Например: svn commit plants.c -m "Fixed names in plants.c."
 svn help <subcommand> - описва употребата на командата, написана на мястото
на <subcommand>, като включва нейните синтаксис, опции и поведение.
Пример: $ svn help update .
Има два начина за добавяне на нови файлове в хранилището на Subversion и
това е чрез командите svn import и svn add:
 svn import < path/to/the/tree > - служи за добавяне в хранилището на цяло дърво
от файлове, като автоматично се създават необходимия брой директории за
файловете от дървото.
 svn add - добавя нови файлове към хранилището.
 svn delete - изтриване на файлове от хранилището.
 svn copy <file1> <file2> - създава се нов файл (“file2”) като дубликат на първия
файл. Вторият файл се насрочва да бъде добавен към хранилището. След
следващия commit историята на промените на първия файл също се добавя към
копието - “file2”.
След направени промени върху работното копие, винаги е добре те да бъдат
прегледани преди commit-ването им. Команди:
 svn status – преглед на промените.
 svn diff – подробно описание на промените – вникване в детайлите им.
Друга команда:
24
 svn resolve – отстраняване на конфликтите при merge-ване на файлове.
Нека се върнеме на примера. PC 1 говори с PC 2 и PC 3 говори с PC 4. PC 1 и
PC 3 ще „слушат”. Ако PC 1 и PC 3 се опитат да говорят по едно и също време, ще
пратят пакетите заедно и някъде по пътя ще възникне нещо наречено колизия. Когато
това стане PC 1 и PC 3 ще „чуят” колизията и ще спрат да предават за произволно
число време. Проблемът е ако мрежата се уголеми. С двадесет компютъра за 1 Hub
може да се стигне до така нареченият broadcast storm. Всички компютри се опитват да
говорят по едно и също време. Всички получават колизии на пакетите. С Hub само едно
PC може да праща информация по всяко време. Хъбовете са стари и никоя уважяваща
себе си фирма не би имала Hub.
Защо да се използва HTTP за трансфер на данни ?
Използването на HTTP или FTP за трансфер на данни зависи от целта, която трябва да
се постигне, заедно с изискванията на клиента.
FTP се използва за трансфер между клиент и FTP сървър. Повечето FTP
сървъри изискват user-a да има account и да се логне до FTP сървъра за да предаде
файловете. С FTP файловете могат да се предават в двете посоки (нагоре и надолу по
веригата).
HTTP се използва за предаване на файлове от Web server към browser window
за да зареди Web страница, която е качена в Интернет. С HTTP, файлове се предават от
само от сървър към работния browser. Файловете се предават, но не и свалят. Т.е. не се
копират в паметта на крайното устройство.
Браузърите могат да се използват за прехвърляне на файлове, чрез FTP, обаче
Internet Explorer и други браузъри не поддържат сигурен трансфер на файлове, чрез
FTP режим. Когато се въведе FTP :// и се влезне към FTP сървър през браузъра, се
предава паролата и данните в явен текст, което не е защитено. За повече възможности,
които ги няма в Interner Explorer, се използва Secure Server или EFT Server.
EFT Server’s Web Transfer Client е трансфер на данни през браузър, който
позволява клиента да предата файлове до и от EFT Server през HTTP или HTTPS.
25
Теоретично решение на поставената
задача
Използвана е програма XAMP , която симулира сървър.
Фиг. 2.1. XAMP Control Panel v3.2.1
Стартиран е Apache с PID(s) 1080 и Port(s) 80, 443.
Port - Мрежовият порт е софтуерна абстракция служеща за определяне на
различните крайни точки на комуникационните канали в рамките на един хост.
Мрежовият адрес, заедно с порта, идентифицира крайната точка на
един комуникационен канал в рамките на една мрежа и се нарича транспортен адрес
(по OSI модела). Сборът от мрежовите адреси и портове (по един за хост) на два
комуникиращи помежду си хоста, идентифицира еднозначно комуникационния канал
помежду им и се наричамрежов цокъл (или сокет).
80 – HTTP
443 – HTTPS
26
Фиг. 2.2. XAMP localhost
27
Фиг. 2.3. XAMP localhost phpMyAdmin
Използва се MySQL за базата данни. За по-лесно разбиране и с възможности
за по-нататъшно развитие, се ползват две таблици. Една таблица съдържа информация
за клиента (user-а). Името на таблицата е user. Втората таблица отговаря за предаваната
информация до отдалечените устройства. Поради факта, че в дипломата работа ще бъде
представен принципът на предаване на информация, табличата ще бъде наименувана
lights.
Готовият проект ще позволява възможност за логване, следова-телно ще се
използва таблица user. Регистрицията на клиент изисква сигурност, затова в таблица
user ще има колони за име (user_name) и парола (user_pass). Паролата ще бъде
криптирана с хеш-функция md5. За primary key единия избор е да се състой от две
колони (user_name и user_pass), но понеже търсенето в MySQL е по-бързо при числа в
сравнение с текст, ще бъде добавена тета колона (user_id).
Таб. 2.1 Таблица user
28
Втората таблица lights се състой от дванадесет колони за индикация на
включено/ изключено състояние на отдалечените устройства (light1, light2, …, light12),
уникална колона (lights_id), изпълнявайки функцията на primary key.
Използвайки метода на свързване на две и/или повече таблици в база данни
(„един клиент има една система за управление в дома си“) установяваме, че връзката
между двете табличи е едно-към-едно. Добавя се колона (user_id), изпълняваща
функцията на foreign key.
Възможни връзки на таблиците:
 Едно-към-едно:
 Едно-към-много:
 Много-към-много:
Което всъщност е:
29
Таб. 2.2 Таблица lights
Фиг. 2.4. Връзка между lights и user табличи
30
При проектирането ще се използва „Eclipse for PHP Developers“ Version :
Luna Release (4.4.0). Build id: 20140612-0600. Необходим е PHP Project „diploma“. За по-
голямо улеснение добра практика е да се използват различни папки. Всеки един проект
започва с index.php. През него ще достигаме до другите файлове. Използвани
технологии:
 SplClassLoader за свързаността в проекта.
 HTML за view частта.
 CSS за дизайна на сайта през браузер.
 Error.log за регистриране на грешки.
 JavaScript за функционалност.
 jQuery за функционалност.
 AJAX за комуникация със сървата (базата данни) без налагането на
презареждане на страницата.
 Session при логването за създаване на сесии.
Фиг. 2.5. Визуално представяне на трансфер, чрез HTTP протокол.
31
Описание на апаратурата и
софтуерната част
PC Asus N76VB
CPU
Processor
Name: Intel Core i7 3630QM
Code Name: Ivy Bridge
Max TDP 45 W
Package Socket988B ePGA
Technology 22 nm
Core VID 1.101 V
Specification Intel(R) Core(TM) i7-3630QM CPU @ 2.40 GHZ
Family 6
Model A
Stepping 9
Ext. Family 6
Ext. Model 3A
Revision E1/La
Instructions MMX, SSE, SSE2, SSE3, SSSE3, SSE4.1, SSE4.2, EM64T, VT-x, AES, AVX
Clocks (Core #0)
Core Speed 4200 Mhz
Multiplier x 32.0 (12 – 34)
Bus Speed 99.78 MHz
Cache
L1 Data 4 x 32 Kbytes 8-way
32
L1 Inst. 4 x 32 Kbytes 8-way
Level 2 4 x 256 Kbytes 8-way
Level 3 6 Mbytes 12-way
Mainboard
Motherboard
Manufacturer ASUSTeK COMPUTER INC.
Model N76VB 1.0
BIOS
Brand American Megatrends Inc.
Version N76VB.202
Date 02/01/2013
Memory
Type DDR3
Size 12 GBytes
Channel # Dual
Graphics
Intel(R) HD Graphics 4000
operating system
Windows 7
33
Изчислителна част / функционално
тестване на софтуерната част
Функционално тестване на софтуера
Проектираната във втора глава мрежа е моделирана с програмен продукт Eclipse for
PHP Developers Version: Luna Release (4.4.0) Build id: 20140612-0600. Използван е
настолен компютър с операционна система Windows XP версия 2002 2 GB RAM.
4.1. Конфигуриране
index.php
<?php
// error_reporting(0); // Stop all warnings
set_error_handler("error_handler");
/////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////// LOADER ////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////
use loaderSplClassLoader; // auto input. NAMESPACE
needed!
use DBHello;
use DBUser;
try {
require 'loader/SplClassLoader.php'; // This loader
$loader = new SplClassLoader(); // This loader
$loader->register(); // This loader
session_start();
if(!isset($_SESSION['user']))
{
if(!isset($_GET['action']))
{
34
Hello::homePage();
}
else
{
if($_GET['action'] == 'users')
{
User::getAllUsers();
}
else if($_GET['action'] == 'register')
{
User::insertUser($_POST['name'],
$_POST['password'],
$_POST['passwordAgain']);
}
else if($_GET['action'] == 'login')
{
User::login($_POST['name'],
$_POST['password']);
}
}
}
else
{
// echo 'YOU HAVE A SESSION!';
if($_GET['action'] == 'logged')
{
// echo 'You are logged in as: ' . $_SESSION['user']['user_name'];
Hello::LoggedIn();
}
else
{
35
session_destroy();
header('Location: index.php');
}
}
} catch (Exception $e) {
echo $e->getMessage();
}
function error_handler($errno, $errmsg, $filename, $linenum, $vars)
{
$file = fopen("error/error.log", "a");
// echo '</br>';
// echo "<p style = 'color: red'>Calling Project Error Handler...</p>";
// echo "Error message: $errmsg</br>";
// echo "File name: $filename</br>";
// echo "Line: $linenum</br>";
$errorMsg = "Error number: $errno Error message: $errmsg File name: $filename
Line: $linenum n";
fwrite($file, $errorMsg);
fclose($file);
}
CSS/test1.css
@CHARSET "UTF-8";
div{
margin: 50px;
border: solid 30px #679CF7 ;
font-size: 200%;
}
#hello{
float: right;
margin: 50px;
border: solid 10px #679CF7;
font-size: 200%;
}
#body{
background-color: #cccccc;
}
#login{
border: solid 30px #679CF7;
min-width: 600px;
margin-left: auto;
margin-right: auto;
width: 50%;
height: 400px;
36
background-color: #cccccc;
}
#menu{
/* position: absolute; */
width: 90%;
margin-top: -30px;
margin-left: auto;
margin-right: auto;
min-width: 600px;
border: solid 30px #679CF7;
/* font-size: 200%; */
}
#login #img1{
width: 100%;
height: 100%;
}
#login #lamp1{
flaot: left;
position:inherit;
padding: 5px;
width: 20%;
height: 30%;
}
#login #lamp2{
flaot: left;
position:inherit;
padding: 5px;
width: 20%;
height: 30%;
}
#login #lamp3{
flaot: left;
position:inherit;
padding: 5px;
width: 20%;
height: 30%;
}
#login #lamp4{
flaot: left;
position:inherit;
padding: 5px;
width: 20%;
height: 30%;
}
#login #lamp5{
flaot: left;
position:inherit;
padding: 5px;
width: 20%;
height: 30%;
}
#login #lamp6{
flaot: left;
position:inherit;
padding: 5px;
width: 20%;
height: 30%;
}
#login #lamp7{
flaot: left;
position:inherit;
padding: 5px;
width: 20%;
height: 30%;
}
#login #lamp8{
37
flaot: left;
position:inherit;
padding: 5px;
width: 20%;
height: 30%;
}
#login #lamp9{
flaot: left;
position:inherit;
padding: 5px;
width: 20%;
height: 30%;
}
#login #lamp10{
flaot: left;
position:inherit;
padding: 5px;
width: 20%;
height: 30%;
}
#login #lamp11{
flaot: left;
position:inherit;
padding: 5px;
width: 20%;
height: 30%;
}
#login #lamp12{
flaot: left;
position:inherit;
padding: 5px;
width: 20%;
height: 30%;
}
form{
margin: 20px;
}
h2{
/* padding: 15px; */
}
.text{
margin: 1px;
font-size: 100%;
float: left;
width: 50%;
height: 50px;
border: solid 0px #679CF7;
}
.text2{
margin: 1px;
font-size: 100%;
float: right;
width: 49%;
height: 50px;
border: solid 0px #679CF7;
}
DB/Hello.php
<?php
namespace DB;
38
class Hello
{
public function homePage()
{
require 'whatDoYouWant.php';
}
public function LoggedIn()
{
require 'whatDoYouWant2.php';
}
}
DB/User.php
<?php
namespace DB;
use DBConnectionDBConnection;
class User
{
public function insertUser($name, $pass1, $pass2)
{
if(strlen($name) == 0)
{
throw new Exception("No Name Inputed!");
}
if(strlen($pass1) == 0)
{
throw new Exception("No Password Inputed!");
}
if(strlen($pass2) == 0)
{
throw new Exception("No Password2 Inputed!");
}
if($pass1 != $pass2)
39
{
throw new Exception("Password mismatch!");
}
$connection = DBConnection::getDBConnection();
$sql = "SELECT * FROM `user` WHERE `user_name` = :NAME";
$stmt = $connection->prepare($sql);
$stmt->bindValue(":NAME", $name, PDO::PARAM_STR);
$stmt->execute();
$row = $stmt->fetch();
if (isset($row['user_name']))
{
throw new Exception("Name already in use!");
}
else
{
$pass1 = md5($pass1);
$sql = "INSERT INTO `user`( `user_name`, `user_pass`)
VALUES (:NAME , :PASS)";
$stmt = $connection->prepare($sql);
$stmt->bindValue(":NAME", $name, PDO::PARAM_STR);
$stmt->bindValue(":PASS", $pass1, PDO::PARAM_STR);
$stmt->execute();
$sql = "SELECT * FROM `user` WHERE `user_name` = :NAME";
$stmt = $connection->prepare($sql);
$stmt->bindValue(":NAME", $name, PDO::PARAM_STR);
$stmt->execute();
$row = $stmt->fetch();
$sql = "INSERT INTO `lights`(`user_id`) VALUES (:USER_ID)";
$stmt = $connection->prepare($sql);
40
$stmt->bindValue(":USER_ID", $row['user_id'], PDO::PARAM_STR);
$stmt->execute();
}
}
public function login($name, $pass1)
{
if(strlen($name) == 0)
{
throw new Exception("No Name Inputed!");
}
if(strlen($pass1) == 0)
{
throw new Exception("No Password Inputed!");
}
$pass1 = md5($pass1);
$connection = DBConnection::getDBConnection();
$sql = "SELECT * FROM `user` WHERE `user_name` = :NAME and
`user_pass` = :PASS";
$stmt = $connection->prepare($sql);
$stmt->bindValue(":NAME", $name, PDO::PARAM_STR);
$stmt->bindValue(":PASS", $pass1, PDO::PARAM_STR);
$stmt->execute();
$row = $stmt->fetch();
if (isset($row['user_name']))
{
session_start();
$_SESSION['user'] = $row;
// echo 'You are logged in as: ' . $_SESSION['user']['user_name'];
header('Location: index.php?action=logged');
}
else
41
{
throw new Exception("User/Password mismatch!");
}
}
}
?>
DB/whatDoYouWant.php
<?php
echo '<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<meta charset="UTF-8">
<title>Login</title>
<link rel="stylesheet" type="text/css" href="CSS/test1.css"/>
<script type="text/javascript" src="JS/javascript.js"></script>
</head>
<body id="body">
<div id="login">
<img id="img1" src="HomePage/divBackground.jpg" >
<form id="form1" action="index.php?action=register" method="post"
hidden="hidden">
<div class="text" >
<h2>Name: </h2>
<h2>Password: </h2>
<h2>Password again: </h2>
<button type="submit">Register</button>
</div>
<div class="text2">
<h2><input name="name"></h2>
<h2><input name="password" type="password"></h2>
<h2><input name="passwordAgain" type="password"></h2>
42
</div>
</form>
<form id="form2" action="index.php?action=login&user=" . name
method="post" hidden="hidden">
<div class="text" >
<h2>Name: </h2>
<h2>Password: </h2>
<button type="submit">Login</button>
</div>
<div class="text2" >
<h2><input name="name"></h2>
<h2><input name="password" type="password"></h2>
</div>
</form>
</div>
<div id="menu">
<img src="HomePage/home.gif" onclick = "home()" style="width:
110px;height: 110px; position: absolute">
<img src="HomePage/register.png" onclick = "register()" style="width:
100px;height: 100px; position: absolute; left: 450px;">
<img src="HomePage/login.jpg" onclick = "login()" style="width:
100px;height: 100px; position: absolute; left: 850px;">
</div>
</body>
</html>';
DB/whatDoYouWant2.php
<?php
use DBConnectionDBConnection;
echo '<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
43
<meta charset="UTF-8">
<title>Login</title>
<link rel="stylesheet" type="text/css" href="CSS/test1.css"/>
<script type="text/javascript" src="JS/javascript.js"></script>
</head>
<body id="body">
<div id="login">';
$connection = DBConnection::getDBConnection();
$sql = "SELECT * FROM `lights` WHERE `user_id` = :USER_ID";
$stmt = $connection->prepare($sql);
$stmt->bindValue(":USER_ID", $_SESSION['user']['user_id'],
PDO::PARAM_STR);
$stmt->execute();
$row = $stmt->fetch();
if($row['light1'] == 0)
{
echo '<img id="lamp1" src="HomePage/Logged/OffLamp.png" name="1"
onclick = "onOff(this); DBUpdate(this)" >';
}
else
{
echo '<img id="lamp1" src="HomePage/Logged/OnnLamp.png" name="1"
onclick = "onOff(this); DBUpdate(this)" >';
}
if($row['light2'] == 0)
{
echo '<img id="lamp2" src="HomePage/Logged/OffLamp.png" name="2"
onclick = "onOff(this); DBUpdate(this)" >';
}
else
{
44
echo '<img id="lamp2" src="HomePage/Logged/OnnLamp.png" name="2"
onclick = "onOff(this); DBUpdate(this)" >';
}
if($row['light3'] == 0)
{
echo '<img id="lamp3" src="HomePage/Logged/OffLamp.png" name="3"
onclick = "onOff(this); DBUpdate(this)" >';
}
else
{
echo '<img id="lamp3" src="HomePage/Logged/OnnLamp.png" name="3"
onclick = "onOff(this); DBUpdate(this)" >';
}
if($row['light4'] == 0)
{
echo '<img id="lamp4" src="HomePage/Logged/OffLamp.png" name="4"
onclick = "onOff(this); DBUpdate(this)" >';
}
else
{
echo '<img id="lamp4" src="HomePage/Logged/OnnLamp.png" name="4"
onclick = "onOff(this); DBUpdate(this)" >';
}
if($row['light5'] == 0)
{
echo '<img id="lamp5" src="HomePage/Logged/OffLamp.png" name="5"
onclick = "onOff(this); DBUpdate(this)" >';
}
else
{
45
echo '<img id="lamp5" src="HomePage/Logged/OnnLamp.png" name="5"
onclick = "onOff(this); DBUpdate(this)" >';
}
if($row['light6'] == 0)
{
echo '<img id="lamp6" src="HomePage/Logged/OffLamp.png" name="6"
onclick = "onOff(this); DBUpdate(this)" >';
}
else
{
echo '<img id="lamp6" src="HomePage/Logged/OnnLamp.png" name="6"
onclick = "onOff(this); DBUpdate(this)" >';
}
if($row['light7'] == 0)
{
echo '<img id="lamp7" src="HomePage/Logged/OffLamp.png"name="7"
onclick = "onOff(this); DBUpdate(this)" >';
}
else
{
echo '<img id="lamp7" src="HomePage/Logged/OnnLamp.png" name="7"
onclick = "onOff(this); DBUpdate(this)" >';
}
if($row['light8'] == 0)
{
echo '<img id="lamp8" src="HomePage/Logged/OffLamp.png" name="8"
onclick = "onOff(this); DBUpdate(this)" >';
}
else
{
46
echo '<img id="lamp8" src="HomePage/Logged/OnnLamp.png" name="8"
onclick = "onOff(this); DBUpdate(this)" >';
}
if($row['light9'] == 0)
{
echo '<img id="lamp9" src="HomePage/Logged/OffLamp.png" name="9"
onclick = "onOff(this); DBUpdate(this)" >';
}
else
{
echo '<img id="lamp9" src="HomePage/Logged/OnnLamp.png" name="9"
onclick = "onOff(this); DBUpdate(this)" >';
}
if($row['light10'] == 0)
{
echo '<img id="lamp10" src="HomePage/Logged/OffLamp.png" name="10"
onclick = "onOff(this); DBUpdate(this)" >';
}
else
{
echo '<img id="lamp10" src="HomePage/Logged/OnnLamp.png" name="10"
onclick = "onOff(this); DBUpdate(this)" >';
}
if($row['light11'] == 0)
{
echo '<img id="lamp11" src="HomePage/Logged/OffLamp.png" name="11"
onclick = "onOff(this); DBUpdate(this)" >';
}
else
{
47
echo '<img id="lamp11" src="HomePage/Logged/OnnLamp.png" name="11"
onclick = "onOff(this); DBUpdate(this)" >';
}
if($row['light12'] == 0)
{
echo '<img id="lamp12" src="HomePage/Logged/OffLamp.png" name="12"
onclick = "onOff(this); DBUpdate(this)" >';
}
else
{
echo '<img id="lamp12" src="HomePage/Logged/OnnLamp.png" name="12"
onclick = "onOff(this); DBUpdate(this)" >';
}
echo '<form id="form1" action="index.php?action=register" method="post"
hidden="hidden">
<p>Name: <input name="name"></p>
<p>Password: <input name="password"></p>
<p>Password again: <input name="passwordAgain"></p>
<button type="submit">Register</button>
</form>
<form id="form2" action="index.php?action=login&user=" . name
method="post" hidden="hidden">
<p>Name: <input name="name"></p>
<p>Password: <input name="password"></p>
<button type="submit">Login</button>
</form>
</div>
<div style="float:left" id="hello">
<p>Hello: ' . $_SESSION['user']['user_name']. '</p>
</div>
<div>
48
<img src="HomePage/home.gif" onclick = "home()" style="width:
110px;height: 110px; position: absolute">
<img src="HomePage/register.png" onclick = "register()" style="width:
100px;height: 100px; position: absolute; left: 560px;">
<img src="HomePage/login.jpg" onclick = "login()" style="width:
100px;height: 100px; position: absolute; left: 850px;">
</div>
';
echo '</body>
</html>';
DBConnection/DBConnection.php
<?php
namespace DBConnection;
class DBConnection
{
private static $singleton;
private $connection;
private function __construct()
{
$dsn = 'mysql:host=localhost;dbname=diploma';
$username = 'root';
$passwd = 'root';
//$options
$this->connection = new PDO($dsn, $username, $passwd);
// $this->connection->setAttribute(PDO::ATTR_ERRMODE,
PDO::ERRMODE_EXCEPTION);
// echo "<p>DB Connection established ... </p>";
49
}
private function __clone(){}
public static function getSingleton()
{
if(empty(self::$singleton))
{
self::$singleton = new DBConnection();
}
return self::$singleton;
}
public function getConnection()
{
return $this->connection;
}
public static function getDBConnection()
{
return self::getSingleton()->getConnection();
}
}
error/error.log
Error number: 8 Error message: Use of undefined constant a1 - assumed 'a1' File name:
E:EclipseHTMLDiplomaindex.php Line: 11
50
HomePage/Logged Off/On
a
Фиг. 4.1. Връзка между lights и user табличи
JS/javascriot.js
function home()
{
window.location.replace("Session/unset.php");
}
function register()
{
document.getElementById("img1").style.display="none";
document.getElementById("form2").style.display="none";
document.getElementById("form1").style.display="block";
}
function login()
{
document.getElementById("img1").style.display="none";
document.getElementById("form1").style.display="none";
document.getElementById("form2").style.display="block";
}
function onOff(elem)
{
if(elem.src.match("HomePage/Logged/OffLamp.png"))
elem.src = "HomePage/Logged/OnnLamp.png";
else
{
elem.src = "HomePage/Logged/OffLamp.png";
51
}
}
function DBUpdate(elem)
{
var onOff = 0
if(elem.src.match("HomePage/Logged/OffLamp.png"))
onOff = 0;
else
{
onOff = 1;
}
$.ajax({
type: "POST",
url: "JS/test.php",
data: "element="+elem.name+"&onOff="+onOff,
dataType: "json"
});
}
JS/test.php
<?php
namespace JS;
$con = mysqli_connect('localhost','root','root','diploma');
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}
session_start();
$sql = "UPDATE `lights` SET light". $_POST['element'] ."= ".$_POST['onOff']. " WHERE
`user_id` = ".$_SESSION['user']['user_id'];
$result = mysqli_query($con,$sql);
Loader/SplClassLoader.php
<?php
52
namespace loader;
/*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND
CONTRIBUTORS
* "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
* LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND
FITNESS FOR
* A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
COPYRIGHT
* OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT,
INCIDENTAL,
* SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT
NOT
* LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF
USE,
* DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
ON ANY
* THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR
TORT
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF
THE USE
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH
DAMAGE.
*
* This software consists of voluntary contributions made by many individuals
* and is licensed under the MIT license. For more information, see
* <http://www.doctrine-project.org>.
*/
/**
* SplClassLoader implementation that implements the technical interoperability
* standards for PHP 5.3 namespaces and class names.
*
* http://groups.google.com/group/php-standards/web/psr-0-final-proposal?pli=1
53
*
* // Example which loads classes for the Doctrine Common package in the
* // DoctrineCommon namespace.
* $classLoader = new SplClassLoader('DoctrineCommon', '/path/to/doctrine');
* $classLoader->register();
*
* @license http://www.opensource.org/licenses/mit-license.html MIT License
* @author Jonathan H. Wage <jonwage@gmail.com>
* @author Roman S. Borschel <roman@code-factory.org>
* @author Matthew Weier O'Phinney <matthew@zend.com>
* @author Kris Wallsmith <kris.wallsmith@gmail.com>
* @author Fabien Potencier <fabien.potencier@symfony-project.org>
*/
class SplClassLoader
{
private $_fileExtension = '.php';
private $_namespace;
private $_includePath;
private $_namespaceSeparator = '';
/**
* Creates a new <tt>SplClassLoader</tt> that loads classes of the
* specified namespace.
*
* @param string $ns The namespace to use.
*/
public function __construct($ns = null, $includePath = null)
{
$this->_namespace = $ns;
$this->_includePath = $includePath;
}
/**
* Sets the namespace separator used by classes in the namespace of this class loader.
54
*
* @param string $sep The separator to use.
*/
public function setNamespaceSeparator($sep)
{
$this->_namespaceSeparator = $sep;
}
/**
* Gets the namespace seperator used by classes in the namespace of this class loader.
*
* @return void
*/
public function getNamespaceSeparator()
{
return $this->_namespaceSeparator;
}
/**
* Sets the base include path for all class files in the namespace of this class loader.
*
* @param string $includePath
*/
public function setIncludePath($includePath)
{
$this->_includePath = $includePath;
}
/**
* Gets the base include path for all class files in the namespace of this class loader.
*
* @return string $includePath
*/
public function getIncludePath()
55
{
return $this->_includePath;
}
/**
* Sets the file extension of class files in the namespace of this class loader.
*
* @param string $fileExtension
*/
public function setFileExtension($fileExtension)
{
$this->_fileExtension = $fileExtension;
}
/**
* Gets the file extension of class files in the namespace of this class loader.
*
* @return string $fileExtension
*/
public function getFileExtension()
{
return $this->_fileExtension;
}
/**
* Installs this class loader on the SPL autoload stack.
*/
public function register()
{
spl_autoload_register(array($this, 'loadClass'));
}
/**
* Uninstalls this class loader from the SPL autoloader stack.
56
*/
public function unregister()
{
spl_autoload_unregister(array($this, 'loadClass'));
}
/**
* Loads the given class or interface.
*
* @param string $className The name of the class to load.
* @return void
*/
public function loadClass($className)
{
if (null === $this->_namespace || $this->_namespace.$this->_namespaceSeparator ===
substr($className, 0, strlen($this->_namespace.$this->_namespaceSeparator))) {
$fileName = '';
$namespace = '';
if (false !== ($lastNsPos = strripos($className, $this->_namespaceSeparator))) {
$namespace = substr($className, 0, $lastNsPos);
$className = substr($className, $lastNsPos + 1);
$fileName = str_replace($this->_namespaceSeparator,
DIRECTORY_SEPARATOR, $namespace) . DIRECTORY_SEPARATOR;
}
$fileName .= str_replace('_', DIRECTORY_SEPARATOR, $className) . $this-
>_fileExtension;
// echo $fileName. '</br>';
require ($this->_includePath !== null ? $this->_includePath .
DIRECTORY_SEPARATOR : '') . $fileName;
}
}
}
57
Session/unset.php
<?php
session_start();
// unset($_SESSION['username']);
session_destroy(); // destroy all the session between you and the server
header("Location: ../index.php");
.SQL
-- phpMyAdmin SQL Dump
-- version 4.2.7.1
-- http://www.phpmyadmin.net
--
-- Host: 127.0.0.1
-- Generation Time:
-- Версия на сървъра: 5.6.20
-- PHP Version: 5.5.15
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT
*/;
/*!40101 SET
@OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION
*/;
/*!40101 SET NAMES utf8 */;
--
-- Database: `diploma`
58
--
-- --------------------------------------------------------
--
-- Структура на таблица `lights`
--
CREATE TABLE IF NOT EXISTS `lights` (
`lights_id` int(11) NOT NULL,
`light1` int(11) DEFAULT '0',
`light2` int(11) DEFAULT '0',
`light3` int(11) DEFAULT '0',
`light4` int(11) DEFAULT '0',
`light5` int(11) DEFAULT '0',
`light6` int(11) DEFAULT '0',
`light7` int(11) DEFAULT '0',
`light8` int(11) DEFAULT '0',
`light9` int(11) DEFAULT '0',
`light10` int(11) DEFAULT '0',
`light11` int(11) DEFAULT '0',
`light12` int(11) DEFAULT '0',
`user_id` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
-- --------------------------------------------------------
--
-- Структура на таблица `user`
--
CREATE TABLE IF NOT EXISTS `user` (
`user_id` int(11) NOT NULL,
`user_name` char(10) NOT NULL,
59
`user_pass` char(40) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
--
-- Indexes for dumped tables
--
--
-- Indexes for table `lights`
--
ALTER TABLE `lights`
ADD PRIMARY KEY (`lights_id`), ADD KEY `user_id` (`user_id`);
--
-- Indexes for table `user`
--
ALTER TABLE `user`
ADD PRIMARY KEY (`user_id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `lights`
--
ALTER TABLE `lights`
MODIFY `lights_id` int(11) NOT NULL AUTO_INCREMENT;
--
-- AUTO_INCREMENT for table `user`
--
ALTER TABLE `user`
MODIFY `user_id` int(11) NOTNULL AUTO_INCREMENT;
--
60
-- Ограничения за дъмпнати таблици
--
--
-- Ограничения за таблица `lights`
--
ALTER TABLE `lights`
ADD CONSTRAINT `lights_ibfk_1` FOREIGN KEY (`user_id`) REFERENCES `user`
(`user_id`);
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
4.2 Тестване
Използвайки web-браузър Google Chrome Version 40.0.2214.93 m (64-bit)
Зареждаме адрес http://localhost/Diploma/index.php . Това стартира index.php
файла. Разполагаме с будони за регистриране ( ), логване ( ) и разлогване ( ).
Фиг. 4.2. Index.php
Създава се нова регистрация с натискане на лев бутон на мишката върху
бутона за регистриране. Зарежда се форма за регистрация:
DIPLOMA_MAGISTUR
DIPLOMA_MAGISTUR
DIPLOMA_MAGISTUR
DIPLOMA_MAGISTUR
DIPLOMA_MAGISTUR
DIPLOMA_MAGISTUR
DIPLOMA_MAGISTUR
DIPLOMA_MAGISTUR

More Related Content

Similar to DIPLOMA_MAGISTUR

безопасности защита на Web application
безопасности защита на Web applicationбезопасности защита на Web application
безопасности защита на Web applicationkarizka3
 
Linux Net Admin Guide
Linux Net Admin GuideLinux Net Admin Guide
Linux Net Admin GuideEmil Hadzhiev
 
Php security
Php securityPhp security
Php securityphristov
 
Безопасност и защита на VPN мрежи
Безопасност и защита на VPN мрежиБезопасност и защита на VPN мрежи
Безопасност и защита на VPN мрежиVqra Velinova
 
Защита при създаване на PHP приложения в Интернет
Защита при създаване на PHP приложения в ИнтернетЗащита при създаване на PHP приложения в Интернет
Защита при създаване на PHP приложения в ИнтернетAnton Shumanski
 
Суперкомпютри, грид и облачни технологии.pptx
Суперкомпютри, грид и облачни технологии.pptxСуперкомпютри, грид и облачни технологии.pptx
Суперкомпютри, грид и облачни технологии.pptxssuser9bcba7
 
VET4SBO Level 1 module 3 - unit 1 - v0.9 bg
VET4SBO Level 1   module 3 - unit 1 - v0.9 bgVET4SBO Level 1   module 3 - unit 1 - v0.9 bg
VET4SBO Level 1 module 3 - unit 1 - v0.9 bgKarel Van Isacker
 
ЖИВОТ В МРЕЖОВО ОРИЕНТИРАН СВЯТ
ЖИВОТ В МРЕЖОВО ОРИЕНТИРАН СВЯТЖИВОТ В МРЕЖОВО ОРИЕНТИРАН СВЯТ
ЖИВОТ В МРЕЖОВО ОРИЕНТИРАН СВЯТaboraliev
 
VET4SBO Level 3 module 3 - unit 3 - v1.0 bg
VET4SBO Level 3   module 3 - unit 3 - v1.0 bgVET4SBO Level 3   module 3 - unit 3 - v1.0 bg
VET4SBO Level 3 module 3 - unit 3 - v1.0 bgKarel Van Isacker
 
Модул No. 1 – Обработка на информация
Модул No. 1 – Обработка на информацияМодул No. 1 – Обработка на информация
Модул No. 1 – Обработка на информацияKarel Van Isacker
 
VET4SBO Level 3 module 1 - unit 1 - 0.009 bg
VET4SBO Level 3   module 1 - unit 1 - 0.009 bgVET4SBO Level 3   module 1 - unit 1 - 0.009 bg
VET4SBO Level 3 module 1 - unit 1 - 0.009 bgKarel Van Isacker
 
VET4SBO Level 3 module 3 - unit 2 - v0.9 bg
VET4SBO Level 3   module 3 - unit 2 - v0.9 bgVET4SBO Level 3   module 3 - unit 2 - v0.9 bg
VET4SBO Level 3 module 3 - unit 2 - v0.9 bgKarel Van Isacker
 
Безопасност и защита на VPN
Безопасност и защита на VPNБезопасност и защита на VPN
Безопасност и защита на VPNEma Angelova
 
Sdn nfv мрежова виртуализация
Sdn nfv мрежова виртуализацияSdn nfv мрежова виртуализация
Sdn nfv мрежова виртуализацияmartin.ivanov
 
Криптографски протоколи за сигурна комуникация в интернет - същност, практиче...
Криптографски протоколи за сигурна комуникация в интернет - същност, практиче...Криптографски протоколи за сигурна комуникация в интернет - същност, практиче...
Криптографски протоколи за сигурна комуникация в интернет - същност, практиче...radopetrov
 

Similar to DIPLOMA_MAGISTUR (20)

Security in cloud computing
Security in cloud computingSecurity in cloud computing
Security in cloud computing
 
безопасности защита на Web application
безопасности защита на Web applicationбезопасности защита на Web application
безопасности защита на Web application
 
Linux Net Admin Guide
Linux Net Admin GuideLinux Net Admin Guide
Linux Net Admin Guide
 
Security Log Management
Security Log  ManagementSecurity Log  Management
Security Log Management
 
Php security
Php securityPhp security
Php security
 
Virtual Private Networks Security Presents
Virtual Private Networks Security PresentsVirtual Private Networks Security Presents
Virtual Private Networks Security Presents
 
Безопасност и защита на VPN мрежи
Безопасност и защита на VPN мрежиБезопасност и защита на VPN мрежи
Безопасност и защита на VPN мрежи
 
Защита при създаване на PHP приложения в Интернет
Защита при създаване на PHP приложения в ИнтернетЗащита при създаване на PHP приложения в Интернет
Защита при създаване на PHP приложения в Интернет
 
Суперкомпютри, грид и облачни технологии.pptx
Суперкомпютри, грид и облачни технологии.pptxСуперкомпютри, грид и облачни технологии.pptx
Суперкомпютри, грид и облачни технологии.pptx
 
Computer tehnology
Computer tehnologyComputer tehnology
Computer tehnology
 
VET4SBO Level 1 module 3 - unit 1 - v0.9 bg
VET4SBO Level 1   module 3 - unit 1 - v0.9 bgVET4SBO Level 1   module 3 - unit 1 - v0.9 bg
VET4SBO Level 1 module 3 - unit 1 - v0.9 bg
 
ЖИВОТ В МРЕЖОВО ОРИЕНТИРАН СВЯТ
ЖИВОТ В МРЕЖОВО ОРИЕНТИРАН СВЯТЖИВОТ В МРЕЖОВО ОРИЕНТИРАН СВЯТ
ЖИВОТ В МРЕЖОВО ОРИЕНТИРАН СВЯТ
 
VET4SBO Level 3 module 3 - unit 3 - v1.0 bg
VET4SBO Level 3   module 3 - unit 3 - v1.0 bgVET4SBO Level 3   module 3 - unit 3 - v1.0 bg
VET4SBO Level 3 module 3 - unit 3 - v1.0 bg
 
Модул No. 1 – Обработка на информация
Модул No. 1 – Обработка на информацияМодул No. 1 – Обработка на информация
Модул No. 1 – Обработка на информация
 
ИЗПИТНА ТЕМА_2.docx
ИЗПИТНА ТЕМА_2.docxИЗПИТНА ТЕМА_2.docx
ИЗПИТНА ТЕМА_2.docx
 
VET4SBO Level 3 module 1 - unit 1 - 0.009 bg
VET4SBO Level 3   module 1 - unit 1 - 0.009 bgVET4SBO Level 3   module 1 - unit 1 - 0.009 bg
VET4SBO Level 3 module 1 - unit 1 - 0.009 bg
 
VET4SBO Level 3 module 3 - unit 2 - v0.9 bg
VET4SBO Level 3   module 3 - unit 2 - v0.9 bgVET4SBO Level 3   module 3 - unit 2 - v0.9 bg
VET4SBO Level 3 module 3 - unit 2 - v0.9 bg
 
Безопасност и защита на VPN
Безопасност и защита на VPNБезопасност и защита на VPN
Безопасност и защита на VPN
 
Sdn nfv мрежова виртуализация
Sdn nfv мрежова виртуализацияSdn nfv мрежова виртуализация
Sdn nfv мрежова виртуализация
 
Криптографски протоколи за сигурна комуникация в интернет - същност, практиче...
Криптографски протоколи за сигурна комуникация в интернет - същност, практиче...Криптографски протоколи за сигурна комуникация в интернет - същност, практиче...
Криптографски протоколи за сигурна комуникация в интернет - същност, практиче...
 

DIPLOMA_MAGISTUR

  • 1. 1 Съдържание Увод ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .... ... ... ... ... ... ... ... ... ... ... ... ... ... … … … … 2 1. Състояние на проблема по литературни данни ... ... ... ... ... ....... ... ... .. ... … … … … 4 1.1. HTTP ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .. ... ... ... ... ... ... ... ... … … .6 1.2. CSS ... ... ... ... ... ... .. ... ... ... ... .. .. ... .. ... ... ... ... ... ... .. ... ... ... ... .. …. …… …8 1.3. HTML ... ... ... ... ... ... .. ... ... ... ... ... ... .. ... ... ... ... ... ... .. ... ... ....... … … … ... 10 1.4. XML ... ... ... ... ... ... .. ... ... ... ... ... ... .. ... ... ... ... ... ... .. ... ...... ... … … … … ..13 1.5. JavaScript ... ... ... ... ... ... .. ... ... ... ... ... ... .. ... ... ... ... ... ... ..... ... … … … …. .13 1.6. JSON ... ... ... ... ... ... .. ... ... ... ... ... ... .. ... ... ... ... ... ... .. ... ...... .... .. …. … .. 15 1.7. jQuery ... ... ... ... ... ... .. ... ... ... ... ... ... .. ... ... ... ... ... ... .. .... ... ... … … … … ..17 1.8. AJAX ... ... ... ... ... ... .. ... ... ... ... ... ... .. ... ... ... ... ... ... .. ... ... ... ... . ….. …. … 19 1.9. PHP ... ... ... ... ... ... .. ... ... ... ... ... ... .. ... ... ... ... ... ... .. ... ... ..... ... .. … … … ...20 1.10. MySQL ... ... ... ... ... ... .. ... ... ... ... ... ... .. ... ... ... ... ... ... ..... ... ... … … … …22 1.11. SVN ... ... ... ... ... ... .. ... ... ... ... ... ... .. ... ... ... ... ... ... .. ...... ... ... …. … … ….22 2. Теоретично решение на поставената задача... ... ... ... ... ... ... ... ... ... ... .. … … … … ..25 3. Описване на апаратурата и софтуерната част ... ... ... ... ... ... ... ... ... ... ... … … … … .31 4. Изчислителна част / функционално тестване на софтуерната част ... ... … … … …. .33 4.1. Конфигуриране ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .... ... ... ... ... … … … .. .33 4.2. Тестване ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... … … .. … .60 5. Икономическа оценка ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .. … … .. … .. .... ... ... ..65 6. Приложимост на дипломната работа ... ... ... ... ... ... ... ... ... ... ... ... ... ... … … … .. .. ..66 7. Изводи и претенции за самостоятелно получени резултати ... ... ... .. … … .. .. .. …...67 8. Използвана литература ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... … … … … ..68
  • 2. 2 Увод В днешно време Интернет е неразделна част от ежедневието на хората, независимо дали става дума за голямо предприятие, малка фирма или частно лице. Интернет вече не е само забавление, а средство за информация, за установяване на контакти, за търсене и най-вече за намиране. Интернет представлява инструмент на свободното слово и свободната комуникация. Той има все по-голямо икономическо и социално въздействие. Освен това е свързано с новите технологии, бързото им разпространение и все по-широкото им използване в ежедневния икономическо и социален живот в обществото. Без развитието на Интернет–мрежата е немислима модернизацията и просперитетът на която и да е нация по света. Интернетът се използва като основно допълнение и алтернатива на другите носители на информация - книгите и учебната литература. Развитието на Интернет се проектира пряко върху всички сфери на живота: търговия, банково дело, електронни услуги, здравеопазване и особено образование. Мрежата вече е неразделна част от средното образование и от самообучението. Информационната система представлява организирана съвкупност от
  • 3. 3 данни, обработки и човешки ресурси, която осигурява ефективно функциониране на дадена организация при работата й върху дадена задача. Целта на създаването на всяка информационна система е автоматизация и подобряване ефективността на работа, най- често свързана с фиксиран брой многократно повтарящи се дейности. Тaзи дипломна работа има за цел да се проектира и разработи web-базирана система за контрол и управление на отдалечени обекти. В процеса на работа са използвани следните технолигии: HTTP, CSS, HTML, XML, JavaScript, JSON, jQuery, AJAX, PHP, система за управление на База-данни - MySQL, SVN, OOP и Design Patterns. Използваната комуни-кационна свързаност е IP. Задачите, които студента си поставя са: Разработване на web-базирана система за контрол и управление на териториално отдалечени обекти. Да се обоснове избора на техническото решение и използваните комуникационни технологии. Да се предложи и оцени метод за предаване на контролна и управляваща информация между свързани обекти през IP мрежа. Да се представят изводи и насоки за бъдещо развитие на системата.
  • 4. 4 Състояние на проблема по литературни данни Необходимостта от надеждно състояние да се свържеш с всеки навсякъде, става все по-важно за нашия личен и бизнес живот. За да се поддържа незабавната доставка на милиони съобщения, които се обменят между хора от цял свят, ние разчитаме на мрежа от взаимосвързани мрежи. Тези информационни мрежи или мрежи за данни се различават по размер и възможности, но всички те имат четири основни общи елементи:  Правила и споразумения които управляват как съобщенията се изпращат, насочват, получават и интерпретират;  Съобщения или дялове от информация, които пътуват от едно устройство до друго;  Средство за свързване на тези устройства - носител, който може да транспортира съобщения от едно устройство на друго;  Устройства в мрежата, които обменят съобщения помежду си. Стандартизацията на различните елементи на мрежата позволява оборудване и устройства, създадени от различни компании да работят заедно. Мрежовата архитектура в областта на информатиката изразява единството и съгласуваността на различни компоненти и цели структури, включени в мрежа. Тази архитектура дефинира връзките и взаимодействието между тези различни компоненти и структури като отделни елементи на тази архитектура на базата на обобщения архитектурен модел за разпределена система. Разпределена система наричаме структура от общи по предназначение компоненти, всеки един от тях поел една от функциите на тази структура - функции, разпределени между отделните компоненти на системата. В най-общ случай тази мрежова архитектура дефинира всички правила за изграждане на една разпределена система чрез интегриране на различни компютърни и комуникационни ресурси в една обща информационна система (ИС) за обработка и обмен на информация. Пренасянето на данните в такава ИС се осъществява в комуникационна среда наречена мрежа. Мрежата е изградена от физически линии за връзка и комутационни възли за реализиране на отделните пътища - маршрути. Затова тези комутационни възли са наречени възли за маршрутизация. Различаваме три вида
  • 5. 5 мрежови структури в зависимост от географското разположение на отделните работни станции в мрежата:  LAN (Local Area Network)-Компютърна мрежа, която обслужва една организация и е разположена в една сграда.  MAN (Metropolitan Area Network)-Компютърна мрежа, която обхваща територия на едно населено място или голяма сграда с много разположени в нея организации.  WAN (Wide Area Network)-Компютърна мрежа, която използва високоскоростни, далечни комуникации или спътници, за да свърже компютри, намиращи се в различни географски точки. Фактът, че започваме да използваме все по-сложни компютърни устройства в домовете и офисите ни, ни кара да се замислим за тези мрежови устройства, които свързват тези компютри, принтери и всичко друго заедно с Интернет. Мрежовите устройства са често пренебрегвани устройства, защото хората не се замислят толкова за тях. Какво е Умна къща ? - въпрос задаващи си мнозина. За останалите това е вече удобство, граничещо с лукс и сигурност. Най-общо Умна къща е тази, която е оборудвана с "умни машинки", предоставящи ни контрол върху нея, когато сме си във или извън дома. Умна къща може да се нарече и всеки друг дом, апартамент или офис, който също е под наш контрол и наблюдение. Чрез смартфон или таблет, компютър или даже стационарен телефон, можете да включвате, изключвате, регулирате температура и управлявате завесите. Това е съвсем началото и малка част от възможностите й! Умната къща (smarthouse) се споменава още в началото на 80- те години на миналия век, когато в списание "Byte" се появява статия "Computerize a Home". Неин автор е Steve Ciacia, който предлага метод за управление на електрическите уреди в една инсталация чрез ултразвукови сензори, свързани директно към захранващите кабели. В миналото това можеше да ни се стори фантастика, но вече е реалност. И не чрез ултразвук, а с нови по-сигурни и леснодостъпни решения, изградени на базата на микрокомпютрите. Умната къща ще Ви предложи удобство, когато се върнете от работа, автоматично ще ви разпознае със сензора за пръстов отпечатък и ще извърши вместо вас всички рутинни действия - ще пусне осветлението, по маршрута, който най-често ползвате, ще включи климатика в стаята, където най-често отсядате, а предварително затоплената баня и топла вода ще ви очаква.
  • 6. 6 Използвани технологии. 1.1. HTTP HTTP (Hypertext Transfer Protocol). Протокол за трансфер на хипертекст е мрежов протокол, от OSI модела (приложния слой), за пренос на информация в компютърни мрежи. Използва се, като средство за публикуване на HTML страници, протоколът довежда до създаването на Световната уеб мрежа World Wide Web (WWW). В HTTP протокола има известни разделения, като клиент и сървър. Клиент (обикновено това са Web-браузърите (или web-навигаторите ) – т.е. самите приложения, а не физически хостове в мрежата ). Сървър (това са Web-сървърите – т.е. самоте приложения, а не хостовете в мрежата). HTTP определя 8 различни клиентски метода за заявки:  HEAD – иска изпращане на заглавията отговарящи на посочения с URL (Uniform Resource Locator е стандартизиран адрес на даден ресурс, например документ или страница, в Интернет или друго пространства) ресурс. Отговорът на сървъра е идентичен с този на GET, но е с липсващо тяло. По този начин може да се вземе само метаинформацията, свързана с ресурса, спестявайки трансфера на целия файл.  GET – с него клиентът прави заявка за ресурс, зададен чрез URL. Могат да се изпращат и ограничено количество данни, закодирани директно в самия URL (отделени чрез въпросителен знак).  POST – позволява клиентът да изпрати данни на сървъра. Тази заявка обикновено се генерира при изпращането на уеб формуляр, а данните могат да бъдат: текст, написан от потребителя във формуляра; файл на клиентския компютър и др.  PUT — качва файл, който в бъдеще ще отговаря на посочения URL.  DELETE — изтрива посочения ресурс.  TRACE — сървърът връща получената заявка със статус OK. Позволява да се провери в какъв вид пристига заявката при сървъра и дали (и как) е била модифицирана по трасето от междинни прокси сървъри.
  • 7. 7  OPTIONS — сървърът трябва да отговори с поддържаните от него клиентски методи, съответстващи на зададения URL ,или с поддържаните от сървъра методи като цяло, ако е зададено * вместо URL.  CONNECT — използва се при комуникация през прокси. Механизъм на действие: GET заявна на клиента – Браузърът изпраща GET заявка към сървъра, който съдържа необходимите данни за сървъра да я изпълни. 1. GET http://.... --- достави мрежовият ресурс (файл, скрипт и т.н.), които е асоциран с този URL. 2. Host fi.something.org – определя Интернет хоса и номера на порта на ресурса, който е заявен. 3. User – Agent: съдържа информация за приложението на клиент – хоста, извършващо заявката. 4. Реферер: от коя страница е пристигнато на заявения ресурс (от търсачка, друг сайт, ако не е изрично забранено в настройките на броузъра). Отговор на сървъра – Уеб сървърът изпраща ресурса, който е поискан, със следните заглавки: 1. Статус код – обозначава успешното или неуспешно извършване на заявката. 2. Date – датата и часа на сървъра. 3. Expire – „времето на годност“ – времето, до което страницата е валидна, т.е. може да бъде „кеширана (запазена локално на клиента или друг прокси или кеш сървър“. 4. Server – името на сървърното приложение и версията му. 5. Countent-type – тип на документа. 6. Set-Cookie – запазва бисквитка (cookie), която бива върната към сървъра при последваща заявка. Изходният код на един сайт предвавлява чуст текст, който се разпознава от уеб=браусъра и се интерпретира от него, за да излязат на екрана видимите обекти за потребителите – таблици, полета и т.н HTTP е безсесиен протокол – това означава, че резултата на всяка следваща заявка не зависи от резултата на предишната и така всички клиенти получават равноправно еднакти ресурси.
  • 8. 8 1.2. CSS CSS (Cascading Style Sheets) е език за описание на стилове (езит за стилови листове, style sheet language) – използва се основно за описване на представянето на документ, написан на език за маркиране. Най-често се използва заедно с HTML, но може да се проложи върху произволен XML документ. Официално спецификацията на CSS се поддържа от W3C. CSS отговаря за дизайна, как ще изглежда дадена страница. CCS е създаден с цел да бъдат разделени съдържанието и структурата на уеб страниците отделно от тяхното визуално представяне. Преди стандартите за CSS, установени от W3C през 1995 г., съдържанието на сайтовете и стила на техния дизайн са писани в една и съща HTML страницата. В резултат на това HTML кода се превръща в сложен и нечетлив, а всяка промяна в проекта на даден сайт изисквала корекцията да бъде нанасяна в целия сайт страница по страница. Използвайки CSS, настройките за форматиране могат да бъдат поставени в един единствен файл, и тогава промяната ще бъде отразена едновременно на всички страници, които използват този CSS файл. CSS позволява да се определя как да изглеждат елементите на една HTML страница – шрифтове, размери, цветове, фонове и др. CSS кодът се състои от последователност от стилови правила, всяко от които представлява селектор, последван от свойства и стойности. Например в следния CSS код: p{ font-size: 9px; } Има едно правило. То се състои от селектора p и свойството font-size, на което е зададена стойност 9px. Това правило ще направи размера на шрифта във всички параграфи 9 пикселa. Селектори. Селекторите се изполват за да покажат към кои елемент на HTML документа трябва да бъде прилаган съответният стил. Съществуват много видове селектори. Някои селектори позволяват постигане на динамичност на страницата до определена степен. Например само с помощта на CSS могат да бъдат направени изкачащи менюта, хипервръзки, които при посочване променят цвета си и др. Видове Селектори. В CSS съществуват няколко видя селектори: 1. Класови селектори – с помоща на CSS можете да създавате собствени класове за всеки един селектор. След дефиниране на класа, то всички селектори, на които е
  • 9. 9 присвоен този клас, ще показват един и същ ефект. Използва се следния синтаксис: Селектор.клас {атрибут: стойност} Пример: Нека имаме клас заглавия h1 със син цвят и клас параграфи p, позиционирани вляво. Името на класа е произволно, но за удобство ще използваме blue. Следователно целия код ще изглежда така: h1.blue { color: #0000ff; } p.left{ text-align: left; } Вече дефинираните класове, могат да се използват и в тялото (body-то) на страницата (body) чрез следния код: <h1 class="blue"> Синьо Заглавие </h1> 2. ID селектори - с помощта на този вид селектори могат да се декларират допълнителни параметри, които не са указани в декларираните класове. Имената отново са произволни. Използва се следния синтаксис: #id {атрибут: стойност} /или също селектор#id {атрибут: стойност} 3. Контекстуални селектори - комбинация от няколко селектора, като зададения ефект се проявява в зависимост от подредбата им. Използва се следния синтаксис: 1-ви селектор 2-ри селектор... {атрибут: стойност} 4. Групиране на селектори Няколко селектора могат да бъдат подредени, като се отделят със запетаи, и им се зададе еднакъв ефект, т.е. атрибути с еднакви стойности. Синтаксисът при групирането е: селектор1,селектор2,селектор3,... {атрибут: стойност} Коментари в CSS - в HTML се използва: <!--Коментари и обяснения--> В CSS коментарът трябва да е затворен между наклонена черта със "звезда" и "звезда" с наклонена черта: /*Закоментиран текст*/.
  • 10. 10 Свойства: Color, background-color, text-align, font-style, font-weight, font-size, font-family, width, border, margin, margin-left, margin-right, margin-top, margin-bottom. Вграден стил на елемента Зададеният по този начин стил се нарича inline. Представлява записване на стилова информация в атрибута style на даден таг. Полученият стил е валиден директно само за елемента, на който е зададен (въпреки това негови поделементи могат да го наследят при определени условия). Този метод има редица ограничения, тъй като не позволява използването на CSS селектори. Блок със стилове в документа Зададеният по този начин стил се нарича internal. Представлява блок със стилове, затворен в таг <style>. Този таг трябва да е поставен в заглавната част на HTML документа (тага <head>). <h2 style="font-size: 10pt; color: blue;">Hello</h2> Файл със стилове Зададеният по този начин стил се нарича external. Представлява самостоятелен файл, който се състои от стилове и към него е направено обръщение в HTML документа. Това е единственият способ, който отговаря на идеята за отделяне на съдържание от оформление. Указването на такъв файл се случва между <head> таговете и има следният синтаксис: <link rel="stylesheet" href="http://example.com/css/style.css" type="text/css" /> 1.3. HTML HTML (Hyper Text Markup Language) – език за маркиране на хипертекст е основният маркиращ език за описание и дизайн на уеб страници. HTML е стандарт в Интернет, а правилата се определят от международния консорциум W3C. Описанието на документа става чрез специални елементи, наречени HTML елементи или маркери, които се състоят от етикети или тагове (HTML tags) и ъглови скоби(като например елемента <html>). HTML елементите са основната градивна единица на уеб страниците. Чрез тях се оформят отделните части от текста на една уеб страница, като заглавия, цитати, раздели, хипертекстови препратки и т.н. Най-често HTML елементите са групирани по двойки <h1> и </h1>.
  • 11. 11 В повечето случаи HTML кодът е написан в текстови файлове и се хоства на сървъри, свързани към Интернет. Тези файлове съдържат текстово съдържание с маркери – инструкции за браузъра за това как да се показва текстът. Предназначението на уеб браузърите е да могат да прочетат HTML документите и да ги превърнат в уеб страници. Браузърите не показват HTML таговете, а ги използват, за да интерпретират съдържанието на страницата. Основното предимство на HTML е, че документите, оформени по този начин, могат да се разглеждат на различни устройства, а не само на екрана. Документът може да бъде правилно оформен и върху монитора на персонален компютър, и върху миниатюрния дисплей на пейджър или мобилен телефон. <!DOCTYPE html> <html> <head> <title>Заглавие на документа</title> </head> <body> <p>Здравей, свят!!</p> <p>Validate <a href="http://something">You see this</a></p> </body> </html> HTML таговете са най-малката съставна част на един HTML документ. Те, заедно със своите атрибути (като цвят, размер и т.н), съставят т.нар. HTML елементи. Таговете са ключови думи, заградени в ъглови скоби. Обикновено са по двойки:  таг за начало – маркира началото на един HTML елемент;  таг за край – маркира края на HTML елемента. За разлика от началния таг, крайният има наклонена надясно черта пред името си: <b> ... </b> <html> елемент Указва на браузъра, че това е HTML документ. Отбелязва началото и края на документа и съдържа всичи други негови елементи <html>
  • 12. 12 ... </html> <head> елемент Съдържа заглавието на документа, и може да съдържа стилове, скриптове, енкодинг и т.н. <html> <head> <title>Заглавие на документа</title> </head> … </html> <body> елемент Съдържа форматиране видимо за потребителя – текст, хиперлинк, картинки, таблици, бутони, параграфи и т.н. <html> <head> <title>Заглавие на документа</title> </head> <body> Съдържание на документа... </body> </html> HTML 5 е най-новият проект на HTML стандарта, като той все още е в процес на разработка. Той въвежда много нови свойства. Някои от тях са <video>, <audio>, <canvas>. Основната цел на тези подобрения е да се улесни употребата на мултимедийни и графични елементи, без да е необходимо да се ползват външни апликации. Други нововъведения, като <section>, <article>, <header>, <nav>, целят да обогатят съдържанията на документите. Някои от досегашните елементи, като <a> и <menu>, са променени и стандартизирани. HTML 5 е поддържан от по-стари браузъри, тъй като е направен така, че новите му функции просто да се игнорират от тях.
  • 13. 13 1.4. XML XML (eXtensible Markup Language) – разширяем маркиращ език е стандарт (метаезик), дефиниращ правила за създаване на специализирани маркиращи езици, както и синтаксисът, на който тези езици трябва да се подчиняват. Сам по себе си той е безполезен, защото указва само как да бъде структуриран един документ (чрез маркиране с етикети), но не и какво означават отделните маркери (етикети). Ето защо е по-правилно да се нарече метаезик отколкото език — обикновените езици имат семантика, т.е. предават някаква информация, докато XML указва само граматиката (по-точно синтаксиса) на езиците, базирани на него. Ползата от XML се състои в това, че синтаксисът (структурирането) на документите се измисля само веднъж, а специализираните маркиращи езици само дефинират семантиката т.е. набора от маркиращи етикети и тяхното значение. Другата изгода е, че XML прави възможно разработването на семантично агностични програмни средства които могат да обработват всички XML базирани езици, дори и такива които не са съществували по време на съставянето на софтуера. Тези програмни средства могат след това да се използват и в изработването на софтуер който е написан за конкретен XML език. Или накратко — разделянето на синтаксиса от семантиката е поредното въплъщение на принципа „Разделяй и владей“. Синтаксис XML информацията се маркира като се загражда с етикети: <name>Кирил Михайлов Цветанов</name> Освен това етикетите могат да се влагат един в друг, така че да са получи йерархична организация на информацията: <person> <name> Кирил Михайлов Цветанов </name> <country>България</country> <language>български</language> <language>руски</language> </person> 1.5. JavaScript JavaScript е интерпретиран език за програмиране, разпространяван с повечето Уеб браузъри. Поддържа обектно-ориентиран и функционален стил на
  • 14. 14 програмиране. Най-често се прилага към HTML-а на Интернет страница с цел добавяне на функционалност и зареждане на данни. JavaScript е програмен език, който позволява динамична промяна на поведението на браузъра в рамките на дадена HTML страницата. JavaScript се зарежда, интерпретира и изпълнява от уеб браузъра, който му осигурява достъп до Обектния модел на браузъра. JavaScript функции могат да се свържат със събития на страницата (например: движение/натискане на мишката, клавиатурата или елемент от страницата, и други потребителски действия). Javascript е най-широко разпространеният език за програмиране в Интернет. Прието е JavaScript програмите да се наричат скриптове. JavaScript може да влияе на почти всяка част от браузъра. Браузъра изпълнява JavaScript кода в цикъла на събития т.е. като резултат от действия на потребителя или събития в браузъра (например document.onLoad). Основни задачи в повечето JavaScript приложения са:  Зареждане на данни чрез AJAX  Ефекти с изображения и HTML елементи: скриване/показване, пренареждане, влачене, слайд шоу, анимация и много други.  Управление на прозорци и рамки.  Разпознаване на възможностите на браузъра.  Използване на камерата и микрофона.  По-добър и гъвкав потребителски интерфейс Какво не може да се прави с помощта на JavaScript :  Не може да се записва информация на потребителския компютър или отдалечения сървър.  Не може да се запазва информация директно в отдалечена база данни.  Не може да се стартират локални приложения. Зареждане. JavaScript кодът може да се вмъква в HTML документа между двойката елементи <SCRIPT> и</SCRIPT>. Когато срещне тага <SCRIPT>, браузърът разбира, че трябва да спре интерпретирането на HTML кода и да започне да обработва скрипта, намиращ се между <SCRIPT> и </SCRIPT>. В следния пример е създадена уеб страница в която се вмъкна JavaScript код, който изписва на екрана "Здравей!"
  • 15. 15 <HTML> <HEAD> <TITLE>javascript</TITLE> </HEAD> <BODY> <SCRIPT> document.write("Здравей!"); </SCRIPT> </BODY> </HTML> Другият начин да заредите JavaScript е да го поставите в отделен файл. <SCRIPT src="hi.js"></SCRIPT> Това разделение на javascript логиката от HTML структурата е един от основните принципи на Софтуерното инженерство. Обхват на променливире. В JavaScript има два вида обхват за променливите:функционален и глобален.  Функционален обхват важи всяка променлива обявена чрез var в рамките на дадена функция. Тази променлива е видима единственно в рамките на тази функция.  Глобален обхват важи за всяка променлива обявена извън функция или без var, дори и във функция. Тази променлива е видима от всеки друг код на страницата. Функциите са много гъвкави структури и са едно от най-добрите неща в JavaScript. Позволяват за логическо затваряне и обособен обхват на променливите. 1.6. JSON JSON (JavaScript Object Notation) , е текстово базиран отворен стан- дарт създаден за човешки четим обмен на данни. Произлиза от скриптовия език JavaScript, за да представя прости структури от данни и асоциативни масиви, наречени обекти. Въпреки своята връзка с JavaScript, това е езиково независима спецификация, с анализатори, които могат да преобразуват много други езици в JSON. Форматът на JSON често е използван за сериализация и предаване на структурирани данни през Интернет връзка. Използва се главно, за да предаде данни
  • 16. 16 между сървър и Интернет приложение, изпълнявайки функциите на алтернатива на XML. Следващият пример показва представянето на обект, който описва човек в JSON. Обектът има string полета за първо и последно име, Number поле за години,Object, който представя адресът на човека и Array от телефонни номера представени като Object. { "firstName": "Kiril", "lastName": "Tsvetanov", "age": 24, "address": { "streetAddress": "21 2nd Street", "city": "New York", "state": "NY", "postalCode": 10021 }, "phoneNumbers": [ { "type": "home", "number": "212 555-1234" }, { "type": "fax", "number": "646 555-4567" } ] } JSON често се използва в програмирането на Ajax. Ajax е термин за способността на уебстраницата да изисква нови данни след като е заредила в уеб браузъра, обикновено в отговор на действията на потребителя на изобразената интернет страница. Като част от модела на Ajax, новата информация обикновено се включва в интерфейса на потребителя и се показва динамично още щом се получи от сървъра. Като пример за това на практика е, че ако някой потребител пише в search box,
  • 17. 17 скриптове от браузъра на клиента изпращат какво е написал потребителят досега в сървъра, който отговаря с лист от възможни завършени търсения от неговата база данни. Те могат да бъдат изобразени като падащо меню под търсачката , за да може потребителят отгоре да спре да пише и да избере цялостен и често търсен стринг директно. Когато е бил описан през средата на 2000-дната година, Ajax най-често използвал XML като формат за обмен на данни, но много разработчици също използвали JSON, за да предават обновления между сървъра и клиента. Следващият JavaScript код е пример за client, който използ- ва XMLHttpRequest, за да изискат информацията в JSON формат от сървъра. (Програмирането от страна на сървъра е пропуснато; то трябва да е настроено да отговаря на заявките на url с JSON-форматиран string.) var my_JSON_object; var http_request = new XMLHttpRequest(); http_request.open("GET", url, true); http_request.onreadystatechange = function () { var done = 4, ok = 200; if (http_request.readyState == done && http_request.status == ok) { my_JSON_object = JSON.parse(http_request.responseText); } }; http_request.send(null); 1.7. jQuery jQuery е JavaScript библиотека. В основата си jQuery опростява достъпа до всеки елемент на дадена уеб-страница, като по този начин позволява лесно изграждане на динамична функционалност в страниците. jQuery архитектурата позволява на разработчиците да създават плъгин кодове, като по този начин разширяват нейната функционалност. В момента има на разположение в интернет над 16 хиляди jQuery плъгина, които обхващат широк спектър от функционалности, като помощни приложения тип Ajax, уеб услуги, мрежови масиви от данни, динамични списъци, XML и XSLT инструменти, drag and drop приложения, събития, управление на бисквитки, модални прозорци и дори jQuery базиран Commodore 64 емулатор. Важен източник на jQuery плъгини е поддомейнът с плъгини, който е разположен на сайта на jQuery. Въпреки това, при опита през
  • 18. 18 декември 2011 година да се разчисти сайта от спама, плъгини в този поддомейн са били случайно изтрити. jQuery предлага мощен инструментариум за селектиране на елементи в документ. Ето и част от селекторите, които могат да се ползват: $("*") - Селектира всички елементи. $(":animated") - Селектира всички елементи, които в момента са в процес на анимация. $("p") - Селектира всички посочени елементи. $("#lastname") - Селектира елемента с посочено ID. $(":input") - Селектира всички елементи за въвеждане, текстови полета и button елементи. $(".intro") - Селектира всички елементи от посочения клас. .text() - Взема смесеното съдържание на даден елемент — текст и код. За елемента div class="demo-box">Demonstration Box</div> <ul> <li>list item 1</li> <li>list <strong>item</strong> 2</li> </ul> </div> Изпълняваме: $('div.demo-container').text() Резултат: Demonstration Box list item 1 list item 2 Методи: .attr() - Взема стойността на атрибута на първия елемент от избраните елементи или установява атрибут за един или повече от избраните елементи. За кода <input type="checkbox" checked="checked" /> Изпълнението на: $( elem ).attr( "checked") Ще даде: "checked"
  • 19. 19 val() - Взема текущата стойност на първия от избраните елементи или установява стойност на избраните елементи. //За кода: <input type = "button" name="check" id="check" value="Test button"> //Изпълнението на : alert($('#check').val()); //Ще създаде изведе съобщение : "Test button" //А изпълнението на $('#check').val("Submit") //ще е има за резултат: <input type = "button" name="check" id="check" value="Submit"> Събития: .bind() - Закача ивент хендлър (event handler) за елементите. $( "#foo" ).bind( "click", function() { alert( "User clicked on 'foo.'" ); }); .click() - Закача event handler за "click" JavaScript събитие или предизвиква това събитие върху даден елемент. $( "#target" ).click(function() { alert( "Handler for .click() called." ); }); .dblclick() - Закача event handler за "dblclick" JavaScript събитие или предизвиква това събитие върху даден елемент. $( "#target" ).dblclick(function() { alert( "Handler for .dblclick() called." ); }); 1.8. AJAX AJAX (Asynchronous JavaScript and XML) е похват в уеб разработките за създаване на интерактивни уеб приложения. Предимството на Ajax е, че посредством използването му уеб страниците се зареждат по-бързо. Посредством асинхронен обмен
  • 20. 20 на малки порции данни „зад кадър“ могат да се променят само частично информации на уеб страницата. По този начин се намалява количеството информация, която се трансферира между сървъра и клиента. Асинхронността позволява да не бъде необходимо да се презарежда цялата страница отново. По този начин се повишава интерактивността, скоростта и функционалността на страниците. Предимства:  Няма нужда от презареждане на страницата  Времената за отговор се скъсяват  Броят заявки към сървъра намалява, защото скриптовете и CSS-файловете се зареждат само веднъж  Посредством променливи в JavaScript може да се запази състоянието на програмата Недостатъци:  Не се поддържа от стари браузъри, както и от някои мобилни телефони  При натискане на бутона за връщане назад на браузъра приложението не се връща в предишното състояние, а в състоянието при зареждането му  При запазване на отметка в браузъра се запазва отметка към приложението в началното му състояние  Повечето търсачки не изпълняват код на JavaScript , поради което не цялото съдържание на сайтове с Ajax се индексира 1.9. PHP PHP е скриптов език върху сървърната (обслужваща) страна език с отворен код, който е проектиран за уеб програмиране и е широко използван за създаване на сървърни приложения и динамично уеб-съдържание. PHP е рекурсивен акроним от PHP: Hypertext Preprocessor (като в самото начало има значение, дадено от създателите му, на Personal Home Page). При поискване, кодът, който е написан на PHP се интерпретира от уеб сървъра на който е качен, и резултатът се връща на уеб браузърът. Потребителят не може да види чистият PHP код без да има достъп до самият файл в който той е записан. По този начин е помислено за сигурността. PHP файловете могат да съдържат текст, HTML, CSS, JavaScript и PHP код. PHP файловете имат разширение .php.
  • 21. 21 PHP може да работи с повечето модерни бази данни – MySQL, PostgreSQL, Microsoft SQL Server, Oracle, SQLite и д.р. PHP действа главно като филтър, който взема съдържанието на файл и изпълнява специални PHP инструкции, описани във файла. PHP скриптът има начален и краен таг, между които е разположено съдържанието. Отварящият таг е <?php, а затварящия е ?>. Цялата инструкция трябва да завършва с “;”. Пример за код, който визуализира "Здравей, свят": <?php echo 'Здравей, свят!'; /* Hello world */ ?> Обектно-ориентиран PHP <?php class Beginning { function start() { echo 'Hello, world'; } } $var = new Beginning(); $var->start(); ?> Дата и час: <?php $date = date("d.m.Y H:i:s"); echo $date; // Пример 18.05.2012 20:04:25 ?> Предимства:  PHP работи на множество операционни системи (Unix, Linux, Windows, BSD, Mac OS X) и множество уеб сървъри - Apache, lighttpd, IIS  PHP е лесен за разработване  PHP е безплатен и се разпространява под лиценза на BSD
  • 22. 22  PHP може да бъде лесно модифициран и адаптиран към нуждите на прилагащата го организация  PHP е създаден и пригоден за разработката на уеб приложения  PHP не изисква особени умения от разработчици работили на структурни езици — езикът е с прост и интуитивен синтаксис за такива разработчици  PHP е широко разпространен поради простотата си. Има много програмисти, което води до по-евтино платен персонал във фирмите, по ниска цена на приложенията за клиентите и още по-голяма използваемост. Поддръжката за PHP разработчици е гарантирана от множеството форуми и приложения на общността.  По аналогия с Perl към стандартните класове на PHP могат да бъдат писани и много допълнителни модули  PHP поддрържа следните системи за управление на бази от данни: IBM DB2 - formix — Ingres, Microsoft SQL Server (MS SQL), mSQL, MySQL, Oracle, PostgreSQL, Sybase 1.10. MySQL MySQL е SQL система за управление на бази данни (СУБД). MySQL е популярна за интернет приложения като MediaWiki или Drupal и е база данни в LAMP, MAMP и WAMP платформи (Linux/Mac/Windows-Apache-MySQL- PHP/Perl/Python), и за софтуера с отворен код Bugzilla - приложение за проследяване на грешки. Нейната популярност като Интернет приложение е тясно свързана с популярността на PHP, като често, комбинирани с MySQL, са наречени Динамичното дуо. Лесно е да се намерят много източници, които ги комбинират в интернет статии или книги (PHP and MySQL for Dummies, PHP and MySQL Bible, Beginning PHP and MySQL, и други) В тези книги се твърди, че MySQL е по-лесен за изучаване от други бази данни. В пример от книгата за глупаци се посочва, че от MySQL може да се излезе с командите exit или quit, но това е вярно и за много други бази данни. 1.11. SVN SVN (Subversion) е софтуерна система за контрол на версиите. Проектът е разработен на база на концепцията oтворен код (open-source). Системата използва централизирано хранилище за съхранените на файлови структури. Тя следи всички промени в директориите и файловете, поставени под неин контрол, като запазва всички стари копия със съответната дата и час, при постъпване на нови версии в хранилището. Това позволява на потребителя при нужда да се върне към по-стара версия на проекта
  • 23. 23 или да разгледа в детайли историята на промените. Такава организация на съхранение на файловете улеснява съвместната едновременна работа на много хора над даден проект, работещи от различни места и в различни времеви зони. Тази система може да бъде използвана за всякакви колекции от файлове – от изходен код до домакински списъци за пазаруване. Команди:  svn checkout - получаване на работнo копие за някое от поддърветата на хранилището.  svn commit – изпращане на промените към хранилището. След тази команда, всички нови работни копия съдържат направените промени. Може да бъде добавено и съобщение за направените промени при изпращането им с текущата команда. Например: svn commit plants.c -m "Fixed names in plants.c."  svn help <subcommand> - описва употребата на командата, написана на мястото на <subcommand>, като включва нейните синтаксис, опции и поведение. Пример: $ svn help update . Има два начина за добавяне на нови файлове в хранилището на Subversion и това е чрез командите svn import и svn add:  svn import < path/to/the/tree > - служи за добавяне в хранилището на цяло дърво от файлове, като автоматично се създават необходимия брой директории за файловете от дървото.  svn add - добавя нови файлове към хранилището.  svn delete - изтриване на файлове от хранилището.  svn copy <file1> <file2> - създава се нов файл (“file2”) като дубликат на първия файл. Вторият файл се насрочва да бъде добавен към хранилището. След следващия commit историята на промените на първия файл също се добавя към копието - “file2”. След направени промени върху работното копие, винаги е добре те да бъдат прегледани преди commit-ването им. Команди:  svn status – преглед на промените.  svn diff – подробно описание на промените – вникване в детайлите им. Друга команда:
  • 24. 24  svn resolve – отстраняване на конфликтите при merge-ване на файлове. Нека се върнеме на примера. PC 1 говори с PC 2 и PC 3 говори с PC 4. PC 1 и PC 3 ще „слушат”. Ако PC 1 и PC 3 се опитат да говорят по едно и също време, ще пратят пакетите заедно и някъде по пътя ще възникне нещо наречено колизия. Когато това стане PC 1 и PC 3 ще „чуят” колизията и ще спрат да предават за произволно число време. Проблемът е ако мрежата се уголеми. С двадесет компютъра за 1 Hub може да се стигне до така нареченият broadcast storm. Всички компютри се опитват да говорят по едно и също време. Всички получават колизии на пакетите. С Hub само едно PC може да праща информация по всяко време. Хъбовете са стари и никоя уважяваща себе си фирма не би имала Hub. Защо да се използва HTTP за трансфер на данни ? Използването на HTTP или FTP за трансфер на данни зависи от целта, която трябва да се постигне, заедно с изискванията на клиента. FTP се използва за трансфер между клиент и FTP сървър. Повечето FTP сървъри изискват user-a да има account и да се логне до FTP сървъра за да предаде файловете. С FTP файловете могат да се предават в двете посоки (нагоре и надолу по веригата). HTTP се използва за предаване на файлове от Web server към browser window за да зареди Web страница, която е качена в Интернет. С HTTP, файлове се предават от само от сървър към работния browser. Файловете се предават, но не и свалят. Т.е. не се копират в паметта на крайното устройство. Браузърите могат да се използват за прехвърляне на файлове, чрез FTP, обаче Internet Explorer и други браузъри не поддържат сигурен трансфер на файлове, чрез FTP режим. Когато се въведе FTP :// и се влезне към FTP сървър през браузъра, се предава паролата и данните в явен текст, което не е защитено. За повече възможности, които ги няма в Interner Explorer, се използва Secure Server или EFT Server. EFT Server’s Web Transfer Client е трансфер на данни през браузър, който позволява клиента да предата файлове до и от EFT Server през HTTP или HTTPS.
  • 25. 25 Теоретично решение на поставената задача Използвана е програма XAMP , която симулира сървър. Фиг. 2.1. XAMP Control Panel v3.2.1 Стартиран е Apache с PID(s) 1080 и Port(s) 80, 443. Port - Мрежовият порт е софтуерна абстракция служеща за определяне на различните крайни точки на комуникационните канали в рамките на един хост. Мрежовият адрес, заедно с порта, идентифицира крайната точка на един комуникационен канал в рамките на една мрежа и се нарича транспортен адрес (по OSI модела). Сборът от мрежовите адреси и портове (по един за хост) на два комуникиращи помежду си хоста, идентифицира еднозначно комуникационния канал помежду им и се наричамрежов цокъл (или сокет). 80 – HTTP 443 – HTTPS
  • 26. 26 Фиг. 2.2. XAMP localhost
  • 27. 27 Фиг. 2.3. XAMP localhost phpMyAdmin Използва се MySQL за базата данни. За по-лесно разбиране и с възможности за по-нататъшно развитие, се ползват две таблици. Една таблица съдържа информация за клиента (user-а). Името на таблицата е user. Втората таблица отговаря за предаваната информация до отдалечените устройства. Поради факта, че в дипломата работа ще бъде представен принципът на предаване на информация, табличата ще бъде наименувана lights. Готовият проект ще позволява възможност за логване, следова-телно ще се използва таблица user. Регистрицията на клиент изисква сигурност, затова в таблица user ще има колони за име (user_name) и парола (user_pass). Паролата ще бъде криптирана с хеш-функция md5. За primary key единия избор е да се състой от две колони (user_name и user_pass), но понеже търсенето в MySQL е по-бързо при числа в сравнение с текст, ще бъде добавена тета колона (user_id). Таб. 2.1 Таблица user
  • 28. 28 Втората таблица lights се състой от дванадесет колони за индикация на включено/ изключено състояние на отдалечените устройства (light1, light2, …, light12), уникална колона (lights_id), изпълнявайки функцията на primary key. Използвайки метода на свързване на две и/или повече таблици в база данни („един клиент има една система за управление в дома си“) установяваме, че връзката между двете табличи е едно-към-едно. Добавя се колона (user_id), изпълняваща функцията на foreign key. Възможни връзки на таблиците:  Едно-към-едно:  Едно-към-много:  Много-към-много: Което всъщност е:
  • 29. 29 Таб. 2.2 Таблица lights Фиг. 2.4. Връзка между lights и user табличи
  • 30. 30 При проектирането ще се използва „Eclipse for PHP Developers“ Version : Luna Release (4.4.0). Build id: 20140612-0600. Необходим е PHP Project „diploma“. За по- голямо улеснение добра практика е да се използват различни папки. Всеки един проект започва с index.php. През него ще достигаме до другите файлове. Използвани технологии:  SplClassLoader за свързаността в проекта.  HTML за view частта.  CSS за дизайна на сайта през браузер.  Error.log за регистриране на грешки.  JavaScript за функционалност.  jQuery за функционалност.  AJAX за комуникация със сървата (базата данни) без налагането на презареждане на страницата.  Session при логването за създаване на сесии. Фиг. 2.5. Визуално представяне на трансфер, чрез HTTP протокол.
  • 31. 31 Описание на апаратурата и софтуерната част PC Asus N76VB CPU Processor Name: Intel Core i7 3630QM Code Name: Ivy Bridge Max TDP 45 W Package Socket988B ePGA Technology 22 nm Core VID 1.101 V Specification Intel(R) Core(TM) i7-3630QM CPU @ 2.40 GHZ Family 6 Model A Stepping 9 Ext. Family 6 Ext. Model 3A Revision E1/La Instructions MMX, SSE, SSE2, SSE3, SSSE3, SSE4.1, SSE4.2, EM64T, VT-x, AES, AVX Clocks (Core #0) Core Speed 4200 Mhz Multiplier x 32.0 (12 – 34) Bus Speed 99.78 MHz Cache L1 Data 4 x 32 Kbytes 8-way
  • 32. 32 L1 Inst. 4 x 32 Kbytes 8-way Level 2 4 x 256 Kbytes 8-way Level 3 6 Mbytes 12-way Mainboard Motherboard Manufacturer ASUSTeK COMPUTER INC. Model N76VB 1.0 BIOS Brand American Megatrends Inc. Version N76VB.202 Date 02/01/2013 Memory Type DDR3 Size 12 GBytes Channel # Dual Graphics Intel(R) HD Graphics 4000 operating system Windows 7
  • 33. 33 Изчислителна част / функционално тестване на софтуерната част Функционално тестване на софтуера Проектираната във втора глава мрежа е моделирана с програмен продукт Eclipse for PHP Developers Version: Luna Release (4.4.0) Build id: 20140612-0600. Използван е настолен компютър с операционна система Windows XP версия 2002 2 GB RAM. 4.1. Конфигуриране index.php <?php // error_reporting(0); // Stop all warnings set_error_handler("error_handler"); ///////////////////////////////////////////////////////////////////////////////// //////////////////////////////////// LOADER //////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////// use loaderSplClassLoader; // auto input. NAMESPACE needed! use DBHello; use DBUser; try { require 'loader/SplClassLoader.php'; // This loader $loader = new SplClassLoader(); // This loader $loader->register(); // This loader session_start(); if(!isset($_SESSION['user'])) { if(!isset($_GET['action'])) {
  • 34. 34 Hello::homePage(); } else { if($_GET['action'] == 'users') { User::getAllUsers(); } else if($_GET['action'] == 'register') { User::insertUser($_POST['name'], $_POST['password'], $_POST['passwordAgain']); } else if($_GET['action'] == 'login') { User::login($_POST['name'], $_POST['password']); } } } else { // echo 'YOU HAVE A SESSION!'; if($_GET['action'] == 'logged') { // echo 'You are logged in as: ' . $_SESSION['user']['user_name']; Hello::LoggedIn(); } else {
  • 35. 35 session_destroy(); header('Location: index.php'); } } } catch (Exception $e) { echo $e->getMessage(); } function error_handler($errno, $errmsg, $filename, $linenum, $vars) { $file = fopen("error/error.log", "a"); // echo '</br>'; // echo "<p style = 'color: red'>Calling Project Error Handler...</p>"; // echo "Error message: $errmsg</br>"; // echo "File name: $filename</br>"; // echo "Line: $linenum</br>"; $errorMsg = "Error number: $errno Error message: $errmsg File name: $filename Line: $linenum n"; fwrite($file, $errorMsg); fclose($file); } CSS/test1.css @CHARSET "UTF-8"; div{ margin: 50px; border: solid 30px #679CF7 ; font-size: 200%; } #hello{ float: right; margin: 50px; border: solid 10px #679CF7; font-size: 200%; } #body{ background-color: #cccccc; } #login{ border: solid 30px #679CF7; min-width: 600px; margin-left: auto; margin-right: auto; width: 50%; height: 400px;
  • 36. 36 background-color: #cccccc; } #menu{ /* position: absolute; */ width: 90%; margin-top: -30px; margin-left: auto; margin-right: auto; min-width: 600px; border: solid 30px #679CF7; /* font-size: 200%; */ } #login #img1{ width: 100%; height: 100%; } #login #lamp1{ flaot: left; position:inherit; padding: 5px; width: 20%; height: 30%; } #login #lamp2{ flaot: left; position:inherit; padding: 5px; width: 20%; height: 30%; } #login #lamp3{ flaot: left; position:inherit; padding: 5px; width: 20%; height: 30%; } #login #lamp4{ flaot: left; position:inherit; padding: 5px; width: 20%; height: 30%; } #login #lamp5{ flaot: left; position:inherit; padding: 5px; width: 20%; height: 30%; } #login #lamp6{ flaot: left; position:inherit; padding: 5px; width: 20%; height: 30%; } #login #lamp7{ flaot: left; position:inherit; padding: 5px; width: 20%; height: 30%; } #login #lamp8{
  • 37. 37 flaot: left; position:inherit; padding: 5px; width: 20%; height: 30%; } #login #lamp9{ flaot: left; position:inherit; padding: 5px; width: 20%; height: 30%; } #login #lamp10{ flaot: left; position:inherit; padding: 5px; width: 20%; height: 30%; } #login #lamp11{ flaot: left; position:inherit; padding: 5px; width: 20%; height: 30%; } #login #lamp12{ flaot: left; position:inherit; padding: 5px; width: 20%; height: 30%; } form{ margin: 20px; } h2{ /* padding: 15px; */ } .text{ margin: 1px; font-size: 100%; float: left; width: 50%; height: 50px; border: solid 0px #679CF7; } .text2{ margin: 1px; font-size: 100%; float: right; width: 49%; height: 50px; border: solid 0px #679CF7; } DB/Hello.php <?php namespace DB;
  • 38. 38 class Hello { public function homePage() { require 'whatDoYouWant.php'; } public function LoggedIn() { require 'whatDoYouWant2.php'; } } DB/User.php <?php namespace DB; use DBConnectionDBConnection; class User { public function insertUser($name, $pass1, $pass2) { if(strlen($name) == 0) { throw new Exception("No Name Inputed!"); } if(strlen($pass1) == 0) { throw new Exception("No Password Inputed!"); } if(strlen($pass2) == 0) { throw new Exception("No Password2 Inputed!"); } if($pass1 != $pass2)
  • 39. 39 { throw new Exception("Password mismatch!"); } $connection = DBConnection::getDBConnection(); $sql = "SELECT * FROM `user` WHERE `user_name` = :NAME"; $stmt = $connection->prepare($sql); $stmt->bindValue(":NAME", $name, PDO::PARAM_STR); $stmt->execute(); $row = $stmt->fetch(); if (isset($row['user_name'])) { throw new Exception("Name already in use!"); } else { $pass1 = md5($pass1); $sql = "INSERT INTO `user`( `user_name`, `user_pass`) VALUES (:NAME , :PASS)"; $stmt = $connection->prepare($sql); $stmt->bindValue(":NAME", $name, PDO::PARAM_STR); $stmt->bindValue(":PASS", $pass1, PDO::PARAM_STR); $stmt->execute(); $sql = "SELECT * FROM `user` WHERE `user_name` = :NAME"; $stmt = $connection->prepare($sql); $stmt->bindValue(":NAME", $name, PDO::PARAM_STR); $stmt->execute(); $row = $stmt->fetch(); $sql = "INSERT INTO `lights`(`user_id`) VALUES (:USER_ID)"; $stmt = $connection->prepare($sql);
  • 40. 40 $stmt->bindValue(":USER_ID", $row['user_id'], PDO::PARAM_STR); $stmt->execute(); } } public function login($name, $pass1) { if(strlen($name) == 0) { throw new Exception("No Name Inputed!"); } if(strlen($pass1) == 0) { throw new Exception("No Password Inputed!"); } $pass1 = md5($pass1); $connection = DBConnection::getDBConnection(); $sql = "SELECT * FROM `user` WHERE `user_name` = :NAME and `user_pass` = :PASS"; $stmt = $connection->prepare($sql); $stmt->bindValue(":NAME", $name, PDO::PARAM_STR); $stmt->bindValue(":PASS", $pass1, PDO::PARAM_STR); $stmt->execute(); $row = $stmt->fetch(); if (isset($row['user_name'])) { session_start(); $_SESSION['user'] = $row; // echo 'You are logged in as: ' . $_SESSION['user']['user_name']; header('Location: index.php?action=logged'); } else
  • 41. 41 { throw new Exception("User/Password mismatch!"); } } } ?> DB/whatDoYouWant.php <?php echo '<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <meta charset="UTF-8"> <title>Login</title> <link rel="stylesheet" type="text/css" href="CSS/test1.css"/> <script type="text/javascript" src="JS/javascript.js"></script> </head> <body id="body"> <div id="login"> <img id="img1" src="HomePage/divBackground.jpg" > <form id="form1" action="index.php?action=register" method="post" hidden="hidden"> <div class="text" > <h2>Name: </h2> <h2>Password: </h2> <h2>Password again: </h2> <button type="submit">Register</button> </div> <div class="text2"> <h2><input name="name"></h2> <h2><input name="password" type="password"></h2> <h2><input name="passwordAgain" type="password"></h2>
  • 42. 42 </div> </form> <form id="form2" action="index.php?action=login&user=" . name method="post" hidden="hidden"> <div class="text" > <h2>Name: </h2> <h2>Password: </h2> <button type="submit">Login</button> </div> <div class="text2" > <h2><input name="name"></h2> <h2><input name="password" type="password"></h2> </div> </form> </div> <div id="menu"> <img src="HomePage/home.gif" onclick = "home()" style="width: 110px;height: 110px; position: absolute"> <img src="HomePage/register.png" onclick = "register()" style="width: 100px;height: 100px; position: absolute; left: 450px;"> <img src="HomePage/login.jpg" onclick = "login()" style="width: 100px;height: 100px; position: absolute; left: 850px;"> </div> </body> </html>'; DB/whatDoYouWant2.php <?php use DBConnectionDBConnection; echo '<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  • 43. 43 <meta charset="UTF-8"> <title>Login</title> <link rel="stylesheet" type="text/css" href="CSS/test1.css"/> <script type="text/javascript" src="JS/javascript.js"></script> </head> <body id="body"> <div id="login">'; $connection = DBConnection::getDBConnection(); $sql = "SELECT * FROM `lights` WHERE `user_id` = :USER_ID"; $stmt = $connection->prepare($sql); $stmt->bindValue(":USER_ID", $_SESSION['user']['user_id'], PDO::PARAM_STR); $stmt->execute(); $row = $stmt->fetch(); if($row['light1'] == 0) { echo '<img id="lamp1" src="HomePage/Logged/OffLamp.png" name="1" onclick = "onOff(this); DBUpdate(this)" >'; } else { echo '<img id="lamp1" src="HomePage/Logged/OnnLamp.png" name="1" onclick = "onOff(this); DBUpdate(this)" >'; } if($row['light2'] == 0) { echo '<img id="lamp2" src="HomePage/Logged/OffLamp.png" name="2" onclick = "onOff(this); DBUpdate(this)" >'; } else {
  • 44. 44 echo '<img id="lamp2" src="HomePage/Logged/OnnLamp.png" name="2" onclick = "onOff(this); DBUpdate(this)" >'; } if($row['light3'] == 0) { echo '<img id="lamp3" src="HomePage/Logged/OffLamp.png" name="3" onclick = "onOff(this); DBUpdate(this)" >'; } else { echo '<img id="lamp3" src="HomePage/Logged/OnnLamp.png" name="3" onclick = "onOff(this); DBUpdate(this)" >'; } if($row['light4'] == 0) { echo '<img id="lamp4" src="HomePage/Logged/OffLamp.png" name="4" onclick = "onOff(this); DBUpdate(this)" >'; } else { echo '<img id="lamp4" src="HomePage/Logged/OnnLamp.png" name="4" onclick = "onOff(this); DBUpdate(this)" >'; } if($row['light5'] == 0) { echo '<img id="lamp5" src="HomePage/Logged/OffLamp.png" name="5" onclick = "onOff(this); DBUpdate(this)" >'; } else {
  • 45. 45 echo '<img id="lamp5" src="HomePage/Logged/OnnLamp.png" name="5" onclick = "onOff(this); DBUpdate(this)" >'; } if($row['light6'] == 0) { echo '<img id="lamp6" src="HomePage/Logged/OffLamp.png" name="6" onclick = "onOff(this); DBUpdate(this)" >'; } else { echo '<img id="lamp6" src="HomePage/Logged/OnnLamp.png" name="6" onclick = "onOff(this); DBUpdate(this)" >'; } if($row['light7'] == 0) { echo '<img id="lamp7" src="HomePage/Logged/OffLamp.png"name="7" onclick = "onOff(this); DBUpdate(this)" >'; } else { echo '<img id="lamp7" src="HomePage/Logged/OnnLamp.png" name="7" onclick = "onOff(this); DBUpdate(this)" >'; } if($row['light8'] == 0) { echo '<img id="lamp8" src="HomePage/Logged/OffLamp.png" name="8" onclick = "onOff(this); DBUpdate(this)" >'; } else {
  • 46. 46 echo '<img id="lamp8" src="HomePage/Logged/OnnLamp.png" name="8" onclick = "onOff(this); DBUpdate(this)" >'; } if($row['light9'] == 0) { echo '<img id="lamp9" src="HomePage/Logged/OffLamp.png" name="9" onclick = "onOff(this); DBUpdate(this)" >'; } else { echo '<img id="lamp9" src="HomePage/Logged/OnnLamp.png" name="9" onclick = "onOff(this); DBUpdate(this)" >'; } if($row['light10'] == 0) { echo '<img id="lamp10" src="HomePage/Logged/OffLamp.png" name="10" onclick = "onOff(this); DBUpdate(this)" >'; } else { echo '<img id="lamp10" src="HomePage/Logged/OnnLamp.png" name="10" onclick = "onOff(this); DBUpdate(this)" >'; } if($row['light11'] == 0) { echo '<img id="lamp11" src="HomePage/Logged/OffLamp.png" name="11" onclick = "onOff(this); DBUpdate(this)" >'; } else {
  • 47. 47 echo '<img id="lamp11" src="HomePage/Logged/OnnLamp.png" name="11" onclick = "onOff(this); DBUpdate(this)" >'; } if($row['light12'] == 0) { echo '<img id="lamp12" src="HomePage/Logged/OffLamp.png" name="12" onclick = "onOff(this); DBUpdate(this)" >'; } else { echo '<img id="lamp12" src="HomePage/Logged/OnnLamp.png" name="12" onclick = "onOff(this); DBUpdate(this)" >'; } echo '<form id="form1" action="index.php?action=register" method="post" hidden="hidden"> <p>Name: <input name="name"></p> <p>Password: <input name="password"></p> <p>Password again: <input name="passwordAgain"></p> <button type="submit">Register</button> </form> <form id="form2" action="index.php?action=login&user=" . name method="post" hidden="hidden"> <p>Name: <input name="name"></p> <p>Password: <input name="password"></p> <button type="submit">Login</button> </form> </div> <div style="float:left" id="hello"> <p>Hello: ' . $_SESSION['user']['user_name']. '</p> </div> <div>
  • 48. 48 <img src="HomePage/home.gif" onclick = "home()" style="width: 110px;height: 110px; position: absolute"> <img src="HomePage/register.png" onclick = "register()" style="width: 100px;height: 100px; position: absolute; left: 560px;"> <img src="HomePage/login.jpg" onclick = "login()" style="width: 100px;height: 100px; position: absolute; left: 850px;"> </div> '; echo '</body> </html>'; DBConnection/DBConnection.php <?php namespace DBConnection; class DBConnection { private static $singleton; private $connection; private function __construct() { $dsn = 'mysql:host=localhost;dbname=diploma'; $username = 'root'; $passwd = 'root'; //$options $this->connection = new PDO($dsn, $username, $passwd); // $this->connection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); // echo "<p>DB Connection established ... </p>";
  • 49. 49 } private function __clone(){} public static function getSingleton() { if(empty(self::$singleton)) { self::$singleton = new DBConnection(); } return self::$singleton; } public function getConnection() { return $this->connection; } public static function getDBConnection() { return self::getSingleton()->getConnection(); } } error/error.log Error number: 8 Error message: Use of undefined constant a1 - assumed 'a1' File name: E:EclipseHTMLDiplomaindex.php Line: 11
  • 50. 50 HomePage/Logged Off/On a Фиг. 4.1. Връзка между lights и user табличи JS/javascriot.js function home() { window.location.replace("Session/unset.php"); } function register() { document.getElementById("img1").style.display="none"; document.getElementById("form2").style.display="none"; document.getElementById("form1").style.display="block"; } function login() { document.getElementById("img1").style.display="none"; document.getElementById("form1").style.display="none"; document.getElementById("form2").style.display="block"; } function onOff(elem) { if(elem.src.match("HomePage/Logged/OffLamp.png")) elem.src = "HomePage/Logged/OnnLamp.png"; else { elem.src = "HomePage/Logged/OffLamp.png";
  • 51. 51 } } function DBUpdate(elem) { var onOff = 0 if(elem.src.match("HomePage/Logged/OffLamp.png")) onOff = 0; else { onOff = 1; } $.ajax({ type: "POST", url: "JS/test.php", data: "element="+elem.name+"&onOff="+onOff, dataType: "json" }); } JS/test.php <?php namespace JS; $con = mysqli_connect('localhost','root','root','diploma'); if (!$con) { die('Could not connect: ' . mysqli_error($con)); } session_start(); $sql = "UPDATE `lights` SET light". $_POST['element'] ."= ".$_POST['onOff']. " WHERE `user_id` = ".$_SESSION['user']['user_id']; $result = mysqli_query($con,$sql); Loader/SplClassLoader.php <?php
  • 52. 52 namespace loader; /* * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. * * This software consists of voluntary contributions made by many individuals * and is licensed under the MIT license. For more information, see * <http://www.doctrine-project.org>. */ /** * SplClassLoader implementation that implements the technical interoperability * standards for PHP 5.3 namespaces and class names. * * http://groups.google.com/group/php-standards/web/psr-0-final-proposal?pli=1
  • 53. 53 * * // Example which loads classes for the Doctrine Common package in the * // DoctrineCommon namespace. * $classLoader = new SplClassLoader('DoctrineCommon', '/path/to/doctrine'); * $classLoader->register(); * * @license http://www.opensource.org/licenses/mit-license.html MIT License * @author Jonathan H. Wage <jonwage@gmail.com> * @author Roman S. Borschel <roman@code-factory.org> * @author Matthew Weier O'Phinney <matthew@zend.com> * @author Kris Wallsmith <kris.wallsmith@gmail.com> * @author Fabien Potencier <fabien.potencier@symfony-project.org> */ class SplClassLoader { private $_fileExtension = '.php'; private $_namespace; private $_includePath; private $_namespaceSeparator = ''; /** * Creates a new <tt>SplClassLoader</tt> that loads classes of the * specified namespace. * * @param string $ns The namespace to use. */ public function __construct($ns = null, $includePath = null) { $this->_namespace = $ns; $this->_includePath = $includePath; } /** * Sets the namespace separator used by classes in the namespace of this class loader.
  • 54. 54 * * @param string $sep The separator to use. */ public function setNamespaceSeparator($sep) { $this->_namespaceSeparator = $sep; } /** * Gets the namespace seperator used by classes in the namespace of this class loader. * * @return void */ public function getNamespaceSeparator() { return $this->_namespaceSeparator; } /** * Sets the base include path for all class files in the namespace of this class loader. * * @param string $includePath */ public function setIncludePath($includePath) { $this->_includePath = $includePath; } /** * Gets the base include path for all class files in the namespace of this class loader. * * @return string $includePath */ public function getIncludePath()
  • 55. 55 { return $this->_includePath; } /** * Sets the file extension of class files in the namespace of this class loader. * * @param string $fileExtension */ public function setFileExtension($fileExtension) { $this->_fileExtension = $fileExtension; } /** * Gets the file extension of class files in the namespace of this class loader. * * @return string $fileExtension */ public function getFileExtension() { return $this->_fileExtension; } /** * Installs this class loader on the SPL autoload stack. */ public function register() { spl_autoload_register(array($this, 'loadClass')); } /** * Uninstalls this class loader from the SPL autoloader stack.
  • 56. 56 */ public function unregister() { spl_autoload_unregister(array($this, 'loadClass')); } /** * Loads the given class or interface. * * @param string $className The name of the class to load. * @return void */ public function loadClass($className) { if (null === $this->_namespace || $this->_namespace.$this->_namespaceSeparator === substr($className, 0, strlen($this->_namespace.$this->_namespaceSeparator))) { $fileName = ''; $namespace = ''; if (false !== ($lastNsPos = strripos($className, $this->_namespaceSeparator))) { $namespace = substr($className, 0, $lastNsPos); $className = substr($className, $lastNsPos + 1); $fileName = str_replace($this->_namespaceSeparator, DIRECTORY_SEPARATOR, $namespace) . DIRECTORY_SEPARATOR; } $fileName .= str_replace('_', DIRECTORY_SEPARATOR, $className) . $this- >_fileExtension; // echo $fileName. '</br>'; require ($this->_includePath !== null ? $this->_includePath . DIRECTORY_SEPARATOR : '') . $fileName; } } }
  • 57. 57 Session/unset.php <?php session_start(); // unset($_SESSION['username']); session_destroy(); // destroy all the session between you and the server header("Location: ../index.php"); .SQL -- phpMyAdmin SQL Dump -- version 4.2.7.1 -- http://www.phpmyadmin.net -- -- Host: 127.0.0.1 -- Generation Time: -- Версия на сървъра: 5.6.20 -- PHP Version: 5.5.15 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET time_zone = "+00:00"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8 */; -- -- Database: `diploma`
  • 58. 58 -- -- -------------------------------------------------------- -- -- Структура на таблица `lights` -- CREATE TABLE IF NOT EXISTS `lights` ( `lights_id` int(11) NOT NULL, `light1` int(11) DEFAULT '0', `light2` int(11) DEFAULT '0', `light3` int(11) DEFAULT '0', `light4` int(11) DEFAULT '0', `light5` int(11) DEFAULT '0', `light6` int(11) DEFAULT '0', `light7` int(11) DEFAULT '0', `light8` int(11) DEFAULT '0', `light9` int(11) DEFAULT '0', `light10` int(11) DEFAULT '0', `light11` int(11) DEFAULT '0', `light12` int(11) DEFAULT '0', `user_id` int(11) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ; -- -------------------------------------------------------- -- -- Структура на таблица `user` -- CREATE TABLE IF NOT EXISTS `user` ( `user_id` int(11) NOT NULL, `user_name` char(10) NOT NULL,
  • 59. 59 `user_pass` char(40) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ; -- -- Indexes for dumped tables -- -- -- Indexes for table `lights` -- ALTER TABLE `lights` ADD PRIMARY KEY (`lights_id`), ADD KEY `user_id` (`user_id`); -- -- Indexes for table `user` -- ALTER TABLE `user` ADD PRIMARY KEY (`user_id`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `lights` -- ALTER TABLE `lights` MODIFY `lights_id` int(11) NOT NULL AUTO_INCREMENT; -- -- AUTO_INCREMENT for table `user` -- ALTER TABLE `user` MODIFY `user_id` int(11) NOTNULL AUTO_INCREMENT; --
  • 60. 60 -- Ограничения за дъмпнати таблици -- -- -- Ограничения за таблица `lights` -- ALTER TABLE `lights` ADD CONSTRAINT `lights_ibfk_1` FOREIGN KEY (`user_id`) REFERENCES `user` (`user_id`); /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */; 4.2 Тестване Използвайки web-браузър Google Chrome Version 40.0.2214.93 m (64-bit) Зареждаме адрес http://localhost/Diploma/index.php . Това стартира index.php файла. Разполагаме с будони за регистриране ( ), логване ( ) и разлогване ( ). Фиг. 4.2. Index.php Създава се нова регистрация с натискане на лев бутон на мишката върху бутона за регистриране. Зарежда се форма за регистрация: