1. HTTP и приятели
HTTP/1.1 200 OK
Стефан: Кънев
Николай: Бачийски
Кога: 22.10.2008

2. защо изглеждам сънен

3. днес ще разберат как
от това се получава
http://fmi.rails-bg.net/topics

4. това
(с готин transition)

5. http://
първият компонент

6. Request

7. Response

8. http://fmi.rails-bg.net/topics
fmi.rails-bg.net
Пенчо
TCP връзка към fmi.rails-bg.net на порт 80

9. nb@creep:~$ wget -S http://fmi.rails-bg/net/topics nb@creep:~$ wget -S http://fmi.rails-bg/net/topics
--2008-10-22 06:56:15-- http://fmi.rails-bg/net/topics --2008-10-22 06:56:15-- http://fmi.rails-bg/net/topics
Resolving fmi.rails-bg... ^C Resolving fmi.rails-bg... ^C
nb@creep:~$ wget -S http://fmi.rails-bg.net/topics nb@creep:~$ wget -S http://fmi.rails-bg.net/topics
--2008-10-22 06:56:27-- http://fmi.rails-bg.net/topics --2008-10-22 06:56:27-- http://fmi.rails-bg.net/topics
Resolving fmi.rails-bg.net... 78.83.99.48 Resolving fmi.rails-bg.net... 78.83.99.48
Connecting to fmi.rails-bg.net|78.83.99.48|:80... connected. Connecting to fmi.rails-bg.net|78.83.99.48|:80... connected.
HTTP request sent, awaiting response... HTTP request sent, awaiting response...
HTTP/1.1 200 OK HTTP/1.1 200 OK
Date: Wed, 22 Oct 2008 03:56:28 GMT Date: Wed, 22 Oct 2008 03:56:28 GMT
Server: Mongrel 1.1.5 Server: Mongrel 1.1.5
Status: 200 OK Status: 200 OK
ETag: quot;d442009ec5c720c14ceb0d2be6e4ccf8quot; ETag: quot;d442009ec5c720c14ceb0d2be6e4ccf8quot;
X-Runtime: 0.04557 X-Runtime: 0.04557
Content-Type: text/html; charset=utf-8 Content-Type: text/html; charset=utf-8
Content-Length: 5048 Content-Length: 5048
Cache-Control: private, max-age=0, must-revalidate Cache-Control: private, max-age=0, must-revalidate
Set-Cookie: _trane_session=ee47058b784246a19b9e0efc6762fc9d; path=/ Set-Cookie: _trane_session=ee47058b784246a19b9e0efc6762fc9d; path=/
Via: 1.0 fmi.rails-bg.net Via: 1.0 fmi.rails-bg.net
Keep-Alive: timeout=15, max=100 текстов Keep-Alive: timeout=15, max=100
Connection: Keep-Alive Connection: Keep-Alive
nb@creep:~$ wget -S http://fmi.rails-bg/net/topics nb@creep:~$ wget -S http://fmi.rails-bg/net/topics
--2008-10-22 06:56:15-- http://fmi.rails-bg/net/topics --2008-10-22 06:56:15-- http://fmi.rails-bg/net/topics
Resolving fmi.rails-bg... ^C Resolving fmi.rails-bg... ^C
nb@creep:~$ wget -S http://fmi.rails-bg.net/topics nb@creep:~$ wget -S http://fmi.rails-bg.net/topics
--2008-10-22 06:56:27-- http://fmi.rails-bg.net/topics --2008-10-22 06:56:27-- http://fmi.rails-bg.net/topics
Resolving fmi.rails-bg.net... 78.83.99.48 Resolving fmi.rails-bg.net... 78.83.99.48
Connecting to fmi.rails-bg.net|78.83.99.48|:80... connected. Connecting to fmi.rails-bg.net|78.83.99.48|:80... connected.
HTTP request sent, awaiting response... HTTP request sent, awaiting response...
HTTP/1.1 200 OK HTTP/1.1 200 OK
Date: Wed, 22 Oct 2008 03:56:28 GMT Date: Wed, 22 Oct 2008 03:56:28 GMT
Server: Mongrel 1.1.5 Server: Mongrel 1.1.5
Status: 200 OK Status: 200 OK
ETag: quot;d442009ec5c720c14ceb0d2be6e4ccf8quot; ETag: quot;d442009ec5c720c14ceb0d2be6e4ccf8quot;
X-Runtime: 0.04557 X-Runtime: 0.04557
Content-Type: text/html; charset=utf-8 Content-Type: text/html; charset=utf-8
Content-Length: 5048 Content-Length: 5048
Cache-Control: private, max-age=0, must-revalidate Cache-Control: private, max-age=0, must-revalidate
Set-Cookie: _trane_session=ee47058b784246a19b9e0efc6762fc9d; path=/ Set-Cookie: _trane_session=ee47058b784246a19b9e0efc6762fc9d; path=/
Via: 1.0 fmi.rails-bg.net Via: 1.0 fmi.rails-bg.net
Keep-Alive: timeout=15, max=100 Keep-Alive: timeout=15, max=100
Connection: Keep-Alive Connection: Keep-Alive

10. не е binary

11. Request

12. GET /topics ? type=stupid & subtype=rockingchair

13. GET не е хубаво да
променя състоянието

14. POST

15. PUT

16. DELETE

17. глава / header

18. Тяло

19. И да не се сърдят
дамите :-)

20. глава / header

21. header-и на заявка

22. header-и на заявка
GET /topics HTTP/1.1

23. header-и на заявка
GET /topics HTTP/1.1
Host: fmi.rails-bg.net

24. header-и на заявка
GET /topics HTTP/1.1
Host: fmi.rails-bg.net
User-agent: Mozilla/5.0...

25. header-и на заявка
GET /topics HTTP/1.1
Host: fmi.rails-bg.net
User-agent: Mozilla/5.0...
Accept: text/html, application/xhtml+xml

26. header-и на заявка
GET /topics HTTP/1.1
Host: fmi.rails-bg.net
User-agent: Mozilla/5.0...
Accept: text/html, application/xhtml+xml

27. header-и на заявка
content-type за тялото

28. header-и на заявка
content-type за тялото
POST /topics HTTP/1.1

29. header-и на заявка
content-type за тялото
POST /topics HTTP/1.1
Host: fmi.rails-bg.net

30. header-и на заявка
content-type за тялото
POST /topics HTTP/1.1
Host: fmi.rails-bg.net
User-agent: Mozilla/5.0...

31. header-и на заявка
content-type за тялото
POST /topics HTTP/1.1
Host: fmi.rails-bg.net
User-agent: Mozilla/5.0...
Accept: text/html, application/xhtml+xml

32. header-и на заявка
content-type за тялото
POST /topics HTTP/1.1
Host: fmi.rails-bg.net
User-agent: Mozilla/5.0...
Accept: text/html, application/xhtml+xml
Content-Type: application/x-www-form-encoded

33. HTTP/1.1 200 OK
Content-Type: text/html
Date: Wed, 22 Oct 2008 03:56:28 GMT
Content-Length: 5048

34. 1xx Informational 2xx Successes 3xx Redirection
4xx Client Error 5xx Server Error
200 OK
301 Moved Permanently
404 Not Found
500 Internal Server Error

35. Тяло

36. Тяло

38. POST /topics HTTP/1.1

39. POST /topics HTTP/1.1
Host: fmi.rails-bg.net

40. POST /topics HTTP/1.1
Host: fmi.rails-bg.net
Content-Type: application/x-www-form-encoded

41. POST /topics HTTP/1.1
Host: fmi.rails-bg.net
Content-Type: application/x-www-form-encoded
title=The Best Title&content=...

43. HTTP/1.1 200 OK

44. HTTP/1.1 200 OK
Content-Type: text/html

45. HTTP/1.1 200 OK
Content-Type: text/html
Date: Wed, 22 Oct 2008 03:56:28 GMT

46. HTTP/1.1 200 OK
Content-Type: text/html
Date: Wed, 22 Oct 2008 03:56:28 GMT
Content-Length: 5048

47. HTTP/1.1 200 OK
Content-Type: text/html
Date: Wed, 22 Oct 2008 03:56:28 GMT
Content-Length: 5048
<!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML...

48. HTTP/1.1 200 OK
Content-Type: text/html
Date: Wed, 22 Oct 2008 03:56:28 GMT
Content-Length: 5048
<!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML...
<html lang='bg' xml:lang='bg'...

49. HTTP/1.1 200 OK
Content-Type: text/html
Date: Wed, 22 Oct 2008 03:56:28 GMT
Content-Length: 5048
<!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML...
<html lang='bg' xml:lang='bg'...
<head>

50. HTTP/1.1 200 OK
Content-Type: text/html
Date: Wed, 22 Oct 2008 03:56:28 GMT
Content-Length: 5048
<!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML...
<html lang='bg' xml:lang='bg'...
<head>
<title>Програмирани с Ruby и Rails...

51. State
fmi.rails-bg.net

52. State
fmi.rails-bg.net
/topics
10:01

53. State
fmi.rails-bg.net
/topics /tasks
10:01 10:02

54. State
fmi.rails-bg.net
/topics /tasks
/topics/5
10:01 10:02 10:03

55. State
fmi.rails-bg.net
/topics /tasks /tasks/1
/topics/5
10:01 10:02 10:03 10:04

56. State less
fmi.rails-bg.net
/topics /tasks /tasks/1
/topics/5
10:01 10:02 10:03 10:04

58. Cookies

59. Cookies
HTTP/1.1 200 OK
Content-Type: text/html
Set-Cookie: secret=ndrznzvr

60. Cookies
HTTP/1.1 200 OK
Content-Type: text/html
Set-Cookie: secret=ndrznzvr

61. Cookies
HTTP/1.1 200 OK
Content-Type: text/html GET /baba HTTP/1.1
Set-Cookie: secret=ndrznzvr Host: fmi.rails-bg.net
Cookie: secret=ndrznzvr

62. Cookies
HTTP/1.1 200 OK
Content-Type: text/html GET /baba HTTP/1.1
Set-Cookie: secret=ndrznzvr Host: fmi.rails-bg.net
Cookie: secret=ndrznzvr

63. </http>

64. Content-Type: text/html
<!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML...
<html lang='bg' xml:lang='bg'...
<head>
<title>Програмирани с Ruby и Rails...

65. Content-Type: text/html
HTML
<!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML...
<html lang='bg' xml:lang='bg'...
<head>
<title>Програмирани с Ruby и Rails...

66. Content-Type: text/html
XHTML
<!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML...
<html lang='bg' xml:lang='bg'...
<head>
<title>Програмирани с Ruby и Rails...

67. Цел:
съдържание
на страницата
(не изгледа, не поведението)

68. Markup = Маркиране ± език

69. Markup = Маркиране ± език
<чушка цвят=quot;жълтquot;>

70. Markup = Маркиране ± език
<чушка цвят=quot;жълтquot;>
</чушка>

71. Markup = Маркиране ± език
<чушка цвят=quot;жълтquot;>
</чушка>

72. Смисъл,
структура

73. <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;>
<html>
<head>
?
</head>
<body>
?
</body>
</html>

74. <head>
<title>Моето любимо коте</title>
<meta name=”generator” content=”моите две ръце” />
</head>

75. <body>
<h1>Моето коте &mdash; Кънчо</h1>
<p>Здрасти, това е страницата, поветена на моето любимо
коте. Тук ще намерите много информация, снимки и връзки за
него.</p>
<ul class=quot;menuquot;>
<li><a href=quot;/bioquot;>Биография на Кънчо</a></li>
<li><a href=quot;/photosquot;>Снимки</a></li>
</ul>
<img src=quot;/kuncho_best.jpgquot; alt=quot;Кънчо -- най-красивquot;/>
</body>

76. Is YOUR HTML valid?
http://www.w3.org/TR/html401/ http://validator.w3.org/ http://www.w3.org/TR/xhtml1/

77. Сам е скучно, искам в
група
Сам е скучно

78. И таговете са по-добре
с компания

79. <div>
каквито си искате тагове
</div>
<span>
почти каквито искате
</span>

80. Кой съм аз и за какво
се боря? Как да ме
намериш?

81. Разпознаване
<div id=quot;footerquot;>
<ul class=quot;menuquot;>
<div class=quot;menu replyquot;>
атрибути за всички тагове

83. Формуляри
<form action=quot;/topicsquot; method=quot;postquot;>
<label for=quot;fullnamequot;>Full name</label>
<input name=quot;fullnamequot; id=quot;fullnamequot; type=quot;textquot; />
<input name=quot;tickquot; type=quot;checkboxquot; checked=quot;checkedquot; />
<textarea name=quot;freetextquot;>Feed me!</textarea>
<select name=quot;projectquot;>
<option value=quot;easyquot;>The hard one</option>
<option value=quot;hardquot; selected=quot;selectedquot;>The easy one</option>
</select>
<input type=quot;submitquot; value=quot;Run, Lolaquot;>
</form>

84. За някои е важно
всичко да е красиво

85. Дори отвътре да е
развалено

86. Красота ⊂ HTML + CSS
В този курс ще се
интересуваме от
вътрешната красота,
но ако все пак ви
интересува

87. Стандартен изглед на някои HTML
тагове
<h1>, <h2>
<strong>
<em>
•<li></li>
<a>
<p>
<div>, <p>, <form> с кутийка и нов ред около тях
<a>, <span>, <strong>, <img> един след друг

88. CSS
Cascading Style Sheets
http://www.w3.org/Style/CSS/
http://w3schools.com/css/
http://jigsaw.w3.org/css-validator/

90. Как си пазим съдържанието,
което трябва да структурираме в
HTML?

91. Опитвали сте се сами
да мислите файлови
формати и интерфейс
за достъп до данните
си?

92. Релационен модел

93. Котки
релация ≈ таблица

94. Котки
релация ≈ таблица
ID Име Порода
1 Macorana3f Сомалийска
2 Стрептокок Сиамска
3 Шрапнел Сомалийска
4 Рекса Мейн Куун

95. Котки
релация ≈ таблица
Първичен ключ/PK
ID Име Порода
1 Macorana3f Сомалийска
2 Стрептокок Сиамска
3 Шрапнел Сомалийска
4 Рекса Мейн Куун

96. Котки
релация ≈ таблица
Първичен ключ/PK
ID Име Порода
Запис/ред 1 Macorana3f Сомалийска
2 Стрептокок Сиамска
3 Шрапнел Сомалийска
4 Рекса Мейн Куун

97. Нормализация
≈
липса на повторения на
данни
Пак далеч от теорията

99. ID Име Порода
1 Macorana3f Сомалийска
2 Стрептокок Сиамска
3 Шрапнел Сомалийска
4 Рекса Мейн Куун

100. Котки
Породи

101. Котки
ID Име ID на Порода
1 Macorana3f 2
2 Стрептокок 1
3 Шрапнел 2
4 Рекса 3
Породи

102. Котки
ID Име ID на Порода
1 Macorana3f 2
2 Стрептокок 1
3 Шрапнел 2
4 Рекса 3
ID Порода
1 Сиамска
2 Сомалийска
3 Мейн Куун
Породи

103. Котки
ID Име ID на Порода
1 Macorana3f 2
2 Стрептокок 1
3 Шрапнел 2
4 Рекса 3
Котка към Порода,
много към едно ID Порода
1 Сиамска
2 Сомалийска
3 Мейн Куун
Породи

104. Котки
ID Име ID на Порода
1 Macorana3f 2
2 Стрептокок 1
3 Шрапнел 2
4 Рекса 3
Котка към Порода,
много към едно ID Порода
1 Сиамска
От всяка порода може да 2 Сомалийска
има много котки, една 3 Мейн Куун
котка е от една порода
Породи

105. Мелези?

107. Котка към Порода,
много към много

108. Котка към Порода,
много към много
От всяка порода може да има
много котки, една котка може
да е от много породи

109. Котки
ID Име
1 Macorana3f
2 Стрептокок
3 Шрапнел
4 Рекса
Котка към Порода,
много към много
От всяка порода може да има
много котки, една котка може
да е от много породи

110. Котки
ID Име
1 Macorana3f
2 Стрептокок
3 Шрапнел
4 Рекса
Котка към Порода,
много към много ID Порода
1 Сиамска
2 Сомалийска
От всяка порода може да има 3 Мейн Куун
много котки, една котка може
да е от много породи Породи

111. Котки към породи
Котки
ID на ID на
ID Име ID
котка порода
1 Macorana3f 1 1 1
2 1 2
2 Стрептокок
3 2 1
3 Шрапнел 4 3 2
4 Рекса 5 4 4
Котка към Порода,
много към много ID Порода
1 Сиамска
2 Сомалийска
От всяка порода може да има 3 Мейн Куун
много котки, една котка може
да е от много породи Породи

113. SQL
Structured Query Language

114. SELECT * FROM kittens
SELECT * FROM kittens WHERE age < 2
SELECT id, name FROM kittens WHERE name LIKE ‘Brr%’

115. UPDATE kittens SET age = age +1 WHERE name =
‘Birthday Kitten’

116. INSERT INTO kittens (id, name, age) VALUES (7, ‘Pinko’, 1)
INSERT INTO kittens (name) VALUES (‘Pinko’)

117. NULL
NULL

118. SELECT NULL + 2
→NULL

119. Задача: име и порода за всяка
котка?
Заявка върху повече от една таблица?

120. ID Име ID на Порода
1 Macorana3f 2
2 Стрептокок 1
3 Шрапнел 2
4 Рекса 3
Задача: име и порода за всяка
котка?
Заявка върху повече от една таблица?

121. ID Име ID на Порода ID Порода
1 Macorana3f 2 1 Сиамска
2 Стрептокок 1 2 Сомалийска
3 Шрапнел 2 3 Мейн Куун
4 Рекса 3
Задача: име и порода за всяка
котка?
Заявка върху повече от една таблица?

122. JOIN
декартово произведение на две таблици

123. JOIN
декартово произведение на две таблици
ID на котка Име ID на Порода ID на порода Порода
1 Macorana3f 2 1 Сиамска
2 Стрептокок 1 2 Сомалийска
3 Шрапнел 2 3 Мейн Куун
4 Рекса 3 1 Сиамска
1 Macorana3f 2 2 Сомалийска
2 Стрептокок 1 3 Мейн Куун
3 Шрапнел 2 1 Сиамска
4 Рекса 3 2 Сомалийска
1 Macorana3f 2 3 Мейн Куун
2 Стрептокок 1 1 Сиамска
3 Шрапнел 2 2 Сомалийска
4 Рекса 3 3 Мейн Куун

124. When a bike is stolen,
a fairy dies