5. HTTP и приятели

HTTP и приятели

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

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

http://fmi.rails-bg.net/topics

днес ще разберат как от това се получава

http://fmi.rails-bg.net


това

(с готин transition)

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












































































Request

Response


TCP връзка към fmi.rails-bg.net на порт 80

fmi.rails-bg.netПенчо



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




текстов

http://fmi.rails-bg/net/topics
































не е binary

Request

GET /topics?type=stupid&subtype=rockingchair

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

POST

PUT

DELETE

глава / header

Тяло

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

глава / header

header-и на заявка

GET /topics HTTP/1.1


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


GET /topics HTTP/1.1Host: fmi.rails-bg.netUser-agent: Mozilla/5.0...


GET /topics HTTP/1.1Host: fmi.rails-bg.netUser-agent: Mozilla/5.0...Accept: text/html, application/xhtml+xml


GET /topics HTTP/1.1Host: fmi.rails-bg.netUser-agent: Mozilla/5.0...Accept: text/html, application/xhtml+xml



content-type за тялото

POST /topics HTTP/1.1



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



POST /topics HTTP/1.1Host: fmi.rails-bg.netUser-agent: Mozilla/5.0...



POST /topics HTTP/1.1Host: fmi.rails-bg.netUser-agent: Mozilla/5.0...Accept: text/html, application/xhtml+xml



POST /topics HTTP/1.1Host: fmi.rails-bg.netUser-agent: Mozilla/5.0...Accept: text/html, application/xhtml+xml

Content-Type: application/x-www-form-encoded



HTTP/1.1 200 OKContent-Type: text/htmlDate: Wed, 22 Oct 2008 03:56:28 GMTContent-Length: 5048

1xx Informational 2xx Successes 3xx Redirection4xx Client Error 5xx Server Error

200 OK301 Moved Permanently 404 Not Found

500 Internal Server Error

Тяло

Тяло

POST /topics HTTP/1.1

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

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

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

title=The Best Title&content=...

HTTP/1.1 200 OK

HTTP/1.1 200 OKContent-Type: text/html

HTTP/1.1 200 OKContent-Type: text/htmlDate: Wed, 22 Oct 2008 03:56:28 GMT



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML...<html lang='bg' xml:lang='bg'...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML...<html lang='bg' xml:lang='bg'... <head>


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

Statefmi.rails-bg.net


10:01

/topics


10:01

/topics

10:02

/tasks


10:01

/topics

10:02

/tasks

10:03

/topics/5


10:01

/topics

10:02

/tasks

10:03

/topics/5

10:04

/tasks/1

Statelessfmi.rails-bg.net

10:01

/topics

10:02

/tasks

10:03

/topics/5

10:04

/tasks/1

Cookies

Cookies

HTTP/1.1 200 OKContent-Type: text/htmlSet-Cookie: secret=ndrznzvr

Cookies


Cookies


GET /baba HTTP/1.1Host: fmi.rails-bg.netCookie: secret=ndrznzvr

Cookies


GET /baba HTTP/1.1Host: fmi.rails-bg.netCookie: secret=ndrznzvr

</http>

Content-Type: text/html




HTML



HTMLX

Цел:

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

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


<чушка цвят="жълт">



</чушка>



</чушка>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html> <head> ? </head> <body> ? </body></html>

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

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

<body> <h1>Моето коте — Кънчо</h1> <p>Здрасти, това е страницата, поветена на моето любимо коте. Тук ще намерите много информация, снимки и връзки за него.</p> <ul class="menu"> <li><a href="/bio">Биография на Кънчо</a></li> <li><a href="/photos">Снимки</a></li> </ul> <img src="/kuncho_best.jpg" alt="Кънчо -- най-красив"/></body>

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

http://validator.w3c.org

http://validator.w3c.org

http://www.w3.org/TR/html401/

http://www.w3.org/TR/html401/

http://www.w3.org/TR/xhtml1/

http://www.w3.org/TR/xhtml1/

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

Сам е скучно

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

<div> каквито си искате тагове</div>

<span> почти каквито искате</span>

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

Разпознаване<div id="footer"><ul class="menu">

<div class="menu reply">

атрибути за всички тагове

Формуляри<form action="/topics" method="post">

<label for="fullname">Full name</label> <input name="fullname" id="fullname" type="text" />

<input name="tick" type="checkbox" checked="checked" />

<textarea name="freetext">Feed me!</textarea>

<select name="project"> <option value="easy">The hard one</option> <option value="hard" selected="selected">The easy one</option> </select> <input type="submit" value="Run, Lola">

</form>

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

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

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

<h1>,<h2><strong><em>

Стандартен изглед на някои HTML тагове

•<li></li><a>

<p>

<div>,<p>,<form>скутийкаиновредоколотях<a>,<span>,<strong>,<img>единследдруг

CSSCascading Style Sheets

http://www.w3.org/Style/CSS/

http://w3schools.com/css/

http://jigsaw.w3.org/css-validator/







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

HTML?

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

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

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

ID Име Порода

1 Macorana3f Сомалийска

2 Стрептокок Сиамска

3 Шрапнел Сомалийска

4 Рекса Мейн Куун







Първичен ключ/PK







Първичен ключ/PK


Запис/ред

Нормализация≈

липса на повторения на данни

Пак далеч от теорията






Породи

Котки

Породи

КоткиID Име ID на Порода

1 Macorana3f 22 Стрептокок 13 Шрапнел 24 Рекса 3

Породи

Котки

ID Порода1 Сиамска2 Сомалийска3 Мейн Куун

ID Име ID на Порода


Породи

Котки




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

Породи

Котки




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

От всяка порода може да има много котки, една котка е от една порода

Мелези?

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


От всяка порода може да има много котки, една котка може да е от много породи



КоткиID Име

1 Macorana3f

2 Стрептокок

3 Шрапнел

4 Рекса



КоткиID Име

1 Macorana3f


3 Шрапнел

4 Рекса

Породи

ID Порода

1 Сиамска

2 Сомалийска

3 Мейн Куун



КоткиID Име

1 Macorana3f


3 Шрапнел

4 Рекса

Породи

ID Порода

1 Сиамска

2 Сомалийска

3 Мейн Куун

Котки към породи

IDID на котка

ID на порода

1 1 12 1 23 2 14 3 25 4 4

SQLStructured Query Language

SELECT * FROM kittens

SELECT * FROM kittens WHERE age < 2

SELECT id, name FROM kittens WHERE name LIKE ‘Brr%’

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

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

INSERT INTO kittens (name) VALUES (‘Pinko’)

NULL

NULL

SELECT NULL + 2 →NULL

Задача: име и порода за всяка котка?

Заявка върху повече от една таблица?


1 Macorana3f 2

2 Стрептокок 1

3 Шрапнел 2

4 Рекса 3




1 Macorana3f 2

2 Стрептокок 1

3 Шрапнел 2

4 Рекса 3




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

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 Мейн Куун

When a bike is stolen,a fairy dies

Technology

5. HTTP и приятели