SlideShare ist ein Scribd-Unternehmen logo
1 von 36
Backend разработка
Смаль Дмитрий
smal@corp.mail.ru
Что мы научимся делать?

Обрабатывать GET и POST запросы

Выводить HTML при помощи шаблонов

Хранить данные в СУБД
Типичные задачи

Отображение списка объектов

Изменение (редактирование) объектов

Wizards: последовательности страниц
Языки и технологии
Статические (+/-):
СС++ модули к Web серверам.
Java – Servlets, ApplicationServers
Динамически (+/-):
Perl – CGI, mod_perl, PSGI
PHP – mod_php, FastCGI (FPM)
Ruby – rack, свой сервер (mongrel)
Python – WSGI, свой сервер (Tornado)
JavaScript – свой сервер (NodeJS)
CGI скрипт
#!/usr/bin/python2.7
print "Content-type: text/html"
print "Status: 200"
print ""
print "<h1>Hello, world!</h1>"
import os
import sys
for k, v in os.environ.items():
print "%s = %s<br>" % (k, v)
print >> sys.stderr, "Nice to meet you"
NPH - CGI скрипт
#!/usr/bin/python2.7
print "HTTP/1.0 301 Found"
print "Location: http://go.mail.ru/"
print "Set-Cookie: name=value"
print ""
Передача GET параметров
<a href=”/hello.cgi?name=me&greeting=hello”/>Say
hello</a>
QUERY_STRING=name=me&greeting=hello
get_params = {}
qs = os.environ['QUERY_STRING']
for pair in qs.split('&'):
key, value = pair.split('=')
get_params[key] = value
Передача POST параметров
<form method=”post” action=”/hello.cgi”>
<input name=”name” value=”me”/>
<input name=”greeting” value=”hi”/>
<input type=”submit”/>
</form>
STDIN=name=me&greeting=hello
import sys
qs = sys.stdin.read()
Передача файлов и не-ASCII
<form method=”post” action=”/hello.cgi”
enctype=”multipart/form-data”>
<input name=”name” value=”me”/>
<input name=”pic” type=”file”/>
<input type=”submit”/>
</form>
<a href=”/hello.cgi?
name=Boris&name=Ivan”>здорово</a>
<a href=”/hello.cgi?name=%D0%B8%D0%BC
%D1%8F”>привет</a>
CGI библиотеки
import cgi
import cgitb
cgitb.enable()
form = cgi.FieldStorage()
if “greeting” not in form:
raise BaseException(“can't work”)
greeting = form[“greeting”]
names = form.getlist(“name”)
pic = forms[“pic”].file.read()
Обработка входных данных
1) Валиадция (regex, code)
if not re.match('[a-z]+', form[“name”]):
raise BaseException(“panic”)
2) Очистка
story = re.sub('<[^>]+>', ' ', form[“story”])
3) Экранирование
story = form[“story”]
re.sub('<', '&lt;', story)
re.sub('>', '&gt', story)
Шаблонизаторы
print “<html><body><h1>” 
“%s</h1></body></html>” % name
VS
context = {
'user' : get_user(form['name']),
'friends' : get_friends(form['name'])
}
print render('tpl/home.html', context)
Шаблоны
<body>
<h1>{{ user.name }}</h1>
{% if user.sex == 'male' %}
<h2>{{ user.age }}</h2>
{% endif %}
{% for f in friends %}
<a href=”mailto:{{ f.email }}”>{{ f.name }}</a>
<p>{{ f.about|linebreaks }}</p>
{% endfor %}
</body>
Структура страницы
Подшаблоны (includes)
{% include 'inc/header.html' %}
<table><tr>
<td>{% include 'inc/left.html' %}</td>
<td> CONTENT </td>
<td>{% include 'inc/right.html' %}</td>
</tr></table>
{% include 'inc/footer.html' %}
Наследование (layouts)
<!-- base.html -->
<div>HEADER</div>
<table><tr>
<td>LEFT</td>
<td>
{% block content %} CONTENT {% endblock %}</td>
<td>RIGHT</td>
</tr></table>
<div>FOOTER</div>
Наследование (layouts)
<!-- page.html –->
{% extends 'base.html' %}
{% block content %}
<h1>{{ user.name }}</h1>
<div>{{ block.super }}</div>
{% endblock %}
СУБД, SQL
INSERT
UPDATE
DELETE
SELECT
SQL запросы
INSERT INTO users (name, age) VALUES
('petr', 10), ('masha', 25);
UPDATE users SET age = 10 WHERE name =
'petr';
DELETE FROM users WHERE name = 'masha';
SELECT * FROM users WHERE age > 10;
SELECT * FROM users WHERE name =
'masha';
SELECT max(age) FROM users;
Использование SQL в python
import MySQLdb
db = MySQLdb.connect(**options)
cursor = db.cursor()
cursor.execute(“update users set age = age+1 ” 
”where name = ?”, form[“name”])
context = {}
cursor.execute(“select * from users”)
context['friends'] = cursor.fetchall()
cursor.execute(“select * from users where name = ?”,
form[“name”])
context['user'] = cursor.fetchone()
db.close()
Конфигурация приложений
1) hardcode. Настройки зашиты в код
приложения
2) script. Настройки представляют собой
скрипт на целевом ЯП
3) YAML, XML, ini, Config::Apache
4) Переменные, разделение на несколько
файлов
Задача №1. Листинг объектов
1) Параметры: фильтрация, сортировка, номер
страницы
2) /images/?order=created&page=3&limit=10
3) Результат работы скрипта: список объектов
для данной страницы и paginator
4) paginator – представляет положение в списке
страниц
import cgi
import psycopg2
import settings
db = psycopg2.connect(**settings.db)
cursor = db.cursor()
form = cgi.FieldStorage()
order = form.getfirst('order', 'created')
if order not in ('created', 'size'): raise BaseException('oops')
page = form.getfirst('page', 1)
limit = form.getfirst('limit', 10)
sql = 'select * from images order by %s limit %d offset %d' %
(order, limit, limit * (page – 1))
cursor.execute(sql)
context = {}
context['images'] = cursor.fetchall()
cursor.execute('select count(*) as cnt from images')
total = cursor.fetchone()[0]['cnt']
context['pager'] = calc_paginator(total, page, limit)
db.close()
print “Status: 200”
print “Content-Type: text/html”
print “”
print render('/images.html', context)
Paginator
Аргументы: total, page, limit
Результат:
{
'total': 100, 'page': 5, 'limit': 10,
'next_page': 6, 'prev_page': 4,
'next_page10': 10, 'prev_page10': 1,
'first_page':1, 'last_page': 10,
'pages' : [3, 4, 5, 6, 7]
}
Задача № 2. Изменение объекта
1) Два режима работы: отображение формы и
обновление объекта
2) Разделение по методу HTTP (GET | POST).
Кеширование запросов
3) Использование спец. параметра (action)
4) Отображение ошибок и результата действия
import cgi; import psycopg2; import settings; import os
db = psycopg2.connect(**settings.db)
cursor = db.cursor()
form = cgi.FieldStorage()
if os.environ['HTTP_METHOD'] == 'POST”:
try:
cursor.execute('update users set name = ? where id = ?', form['name'], form['id'])
redirect('/cgi-bin/object.cgiid=%s&res=updated' % form['id'])
catch BaseException, e:
redirect('/cgi-bin/object.cgi?id=%s&fail=fail' % form['id'])
else:
context = {}
cursor.execute('select * from users where id = ?', form['id'])
context['object'] = cursor.fetchone()
render('object.html', context)
<form method=”POST” action=”/cgi-bin/object.cgi”>
{% if res %}
<p style=”color: green”>Объект обновлен: {{ res }}</p>
{% endif %}
{% if fail %}
<p style=”color: red”>Ошибка: {{ fail }}</p>
{% endif %}
<input type=”hidden” name=”id” value=”{{ object.id }}”/>
<input type=”text” name=”name” value=”{{ object.name }}”/>
<input type=”submit”/>
</form>
Best Practice
1) Разделять методы GET – получение, POST –
обновление данных
2) Сообщать об ошибках и успехе
3) Проверять данные пользователя
а) на сервере – безопасность программы
б) на клиенте – удобство пользователя
4) Выделять неправильно введеные поля
Задача № 3. Wizard
1) Statefull vs Stateless.
2) Как передать данные между страницами?
выбор товара → информация о клиенте
→ дата и место доставки → подтверждение
3) Варианты:
- через URL
- через скрытые поля
- через Cookie
- через сессии
Скрытые поля
<!-- page2.html -->
<form method=”POST” action=”/page3.html”>
<input type=”hidden” name=”item_id” value=”1”/>
<input type=”hidden” name=”ammount” value=”4”/>
<input type=”text” name=”name” value=””/>
<input type=”text” name=”phone” value=””/>
<input type=”submit”/>
</form>
Cookie
1) Установка
Set-Cookie: name=val; path=/; domain=domain.ru; expires=Tue,
20 Mar 2012 11:52:54 GMT
2) Возврат
Cookie: name=val;name2=val2;is_visited=2011-13-15
Сессии
1) Ключ сессии – в cookie
2) Данные – на сервере (memcached, database, files)
Cookie с помощью Python CGI
1) Установка
import Cookie
cookie = Cookie.SimpleCookie()
cookie['name'] = 'val'
cookie['name']['path'] = '/path'
print cookie
2) Получение
import Cookie
cookie = Cookie.SimpleCookie()
cookie.load('a=b;c=d')
for name in cookie: print '%s => %s' % (name, cookie[name])
Достоинства и недостатки CGI
Плюсы:
1) простая концепция “скриптов”
2) стандарт – есть поддержка на любом хостинге
3) последовательное исполнение
Минусы и способы решения:
1) смешение кода и HTML → шаблонизаторы
2) повторение логики → вынесение кода в библиотеки
3) pretty urls → RewriteEngine
4) производительность (fork, exec, parse, db.connect) →
кеширование кода (FastCGI, mod_perl etc)
Pretty URLs
URL: /profile/mail/my
Скрипт: /cgi-bin/profile.cgi?email=my@ mail.ru
location ~* ^/profile/w+/w+/?$ {
rewrite ^/profile/(w+)/(w+)/?
/cgi-bin/profile.cgi?email=$2@$1.ru break;
proxy_pass http://backend;
}
Кеширование
Что такое кеширование ? Виды кешей:
1) HTTP cache - сокращает загрузку статики
2) proxy cache – кеш страницы целиком
(либо части, подключаемой через ssi)
3) buffer cache – кеширование данных в OS
4) memcached – распределенный кеш в памяти
5) генерация статических файлов
6) отложенное выполнение. crond.
Домашняя работа
1) реализовать calc_paginator
2) написать cgi скрипт для проверки. Список
объектов – числа Фибоначчи до 10000
1) реализовать функцию redirect
2) написать cgi скрипт для проверки.
Например аналог bit.ly со статическими
настройками.

Weitere ähnliche Inhalte

Was ist angesagt?

Web осень 2013 лекция 5
Web осень 2013 лекция 5Web осень 2013 лекция 5
Web осень 2013 лекция 5Technopark
 
Web осень 2013 лекция 8
Web осень 2013 лекция 8Web осень 2013 лекция 8
Web осень 2013 лекция 8Technopark
 
Noveo web intership html5, css, interface
Noveo web intership   html5, css, interfaceNoveo web intership   html5, css, interface
Noveo web intership html5, css, interfaceNoveo
 
Web осень 2013 лекция 2
Web осень 2013 лекция 2Web осень 2013 лекция 2
Web осень 2013 лекция 2Technopark
 
Артем Кувалдин: Основы HTML
Артем Кувалдин: Основы HTMLАртем Кувалдин: Основы HTML
Артем Кувалдин: Основы HTMLYandex
 
Артем Маркушев - HTML & CSS
Артем Маркушев - HTML & CSSАртем Маркушев - HTML & CSS
Артем Маркушев - HTML & CSSDataArt
 
Web осень 2013 лекция 9
Web осень 2013 лекция 9Web осень 2013 лекция 9
Web осень 2013 лекция 9Technopark
 
Работа с БД в Drupal 7
Работа с БД в Drupal 7Работа с БД в Drupal 7
Работа с БД в Drupal 7Eugene Fidelin
 
константин лебедев
константин лебедевконстантин лебедев
константин лебедевkuchinskaya
 
Как создать сайт
Как создать сайтКак создать сайт
Как создать сайтUnited Design
 
FrontTalks: Константин Лебедев (Mail.ru), File API: обработка файлов на клиен...
FrontTalks: Константин Лебедев (Mail.ru), File API: обработка файлов на клиен...FrontTalks: Константин Лебедев (Mail.ru), File API: обработка файлов на клиен...
FrontTalks: Константин Лебедев (Mail.ru), File API: обработка файлов на клиен...Yandex
 
Cтрах и ненависть в MongoDB
Cтрах и ненависть в MongoDBCтрах и ненависть в MongoDB
Cтрах и ненависть в MongoDBDmitry Viskov
 
Варвара Степанова "БЭМ и JavaScript: Сборник рецептов"
Варвара Степанова "БЭМ и JavaScript: Сборник рецептов"Варвара Степанова "БЭМ и JavaScript: Сборник рецептов"
Варвара Степанова "БЭМ и JavaScript: Сборник рецептов"Yandex
 
Frontend весна 2014 лекция 2
Frontend весна 2014 лекция 2Frontend весна 2014 лекция 2
Frontend весна 2014 лекция 2Technopark
 
Web весна 2013 лекция 8
Web весна 2013 лекция 8Web весна 2013 лекция 8
Web весна 2013 лекция 8Technopark
 
10 - Web-технологии. MVC фреймворки (продолжение)
10 - Web-технологии. MVC фреймворки (продолжение)10 - Web-технологии. MVC фреймворки (продолжение)
10 - Web-технологии. MVC фреймворки (продолжение)Roman Brovko
 
Frontend весна 2014 лекция 3
Frontend весна 2014 лекция 3Frontend весна 2014 лекция 3
Frontend весна 2014 лекция 3Technopark
 

Was ist angesagt? (20)

Web осень 2013 лекция 5
Web осень 2013 лекция 5Web осень 2013 лекция 5
Web осень 2013 лекция 5
 
Web осень 2013 лекция 8
Web осень 2013 лекция 8Web осень 2013 лекция 8
Web осень 2013 лекция 8
 
Js fuckworks
Js fuckworksJs fuckworks
Js fuckworks
 
Noveo web intership html5, css, interface
Noveo web intership   html5, css, interfaceNoveo web intership   html5, css, interface
Noveo web intership html5, css, interface
 
Web осень 2013 лекция 2
Web осень 2013 лекция 2Web осень 2013 лекция 2
Web осень 2013 лекция 2
 
Артем Кувалдин: Основы HTML
Артем Кувалдин: Основы HTMLАртем Кувалдин: Основы HTML
Артем Кувалдин: Основы HTML
 
Артем Маркушев - HTML & CSS
Артем Маркушев - HTML & CSSАртем Маркушев - HTML & CSS
Артем Маркушев - HTML & CSS
 
Web осень 2013 лекция 9
Web осень 2013 лекция 9Web осень 2013 лекция 9
Web осень 2013 лекция 9
 
Работа с БД в Drupal 7
Работа с БД в Drupal 7Работа с БД в Drupal 7
Работа с БД в Drupal 7
 
константин лебедев
константин лебедевконстантин лебедев
константин лебедев
 
Как создать сайт
Как создать сайтКак создать сайт
Как создать сайт
 
FrontTalks: Константин Лебедев (Mail.ru), File API: обработка файлов на клиен...
FrontTalks: Константин Лебедев (Mail.ru), File API: обработка файлов на клиен...FrontTalks: Константин Лебедев (Mail.ru), File API: обработка файлов на клиен...
FrontTalks: Константин Лебедев (Mail.ru), File API: обработка файлов на клиен...
 
диплом
дипломдиплом
диплом
 
Cтрах и ненависть в MongoDB
Cтрах и ненависть в MongoDBCтрах и ненависть в MongoDB
Cтрах и ненависть в MongoDB
 
Варвара Степанова "БЭМ и JavaScript: Сборник рецептов"
Варвара Степанова "БЭМ и JavaScript: Сборник рецептов"Варвара Степанова "БЭМ и JavaScript: Сборник рецептов"
Варвара Степанова "БЭМ и JavaScript: Сборник рецептов"
 
Frontend весна 2014 лекция 2
Frontend весна 2014 лекция 2Frontend весна 2014 лекция 2
Frontend весна 2014 лекция 2
 
Jsfwdays 2013-2
Jsfwdays 2013-2Jsfwdays 2013-2
Jsfwdays 2013-2
 
Web весна 2013 лекция 8
Web весна 2013 лекция 8Web весна 2013 лекция 8
Web весна 2013 лекция 8
 
10 - Web-технологии. MVC фреймворки (продолжение)
10 - Web-технологии. MVC фреймворки (продолжение)10 - Web-технологии. MVC фреймворки (продолжение)
10 - Web-технологии. MVC фреймворки (продолжение)
 
Frontend весна 2014 лекция 3
Frontend весна 2014 лекция 3Frontend весна 2014 лекция 3
Frontend весна 2014 лекция 3
 

Andere mochten auch

Проектирование графических интерфейсов лекция 9
Проектирование графических интерфейсов лекция 9Проектирование графических интерфейсов лекция 9
Проектирование графических интерфейсов лекция 9Technopark
 
Highload осень 2012 лекция 2
Highload осень 2012 лекция 2Highload осень 2012 лекция 2
Highload осень 2012 лекция 2Technopark
 
Android осень 2013 лекция 2
Android осень 2013 лекция 2Android осень 2013 лекция 2
Android осень 2013 лекция 2Technopark
 
Безопасность интернет-приложений осень 2013 лекция 9
Безопасность интернет-приложений осень 2013 лекция 9Безопасность интернет-приложений осень 2013 лекция 9
Безопасность интернет-приложений осень 2013 лекция 9Technopark
 
СУБД осень 2012 лекция 7
СУБД осень 2012 лекция 7СУБД осень 2012 лекция 7
СУБД осень 2012 лекция 7Technopark
 
Android осень 2013 лекция 4
Android осень 2013 лекция 4Android осень 2013 лекция 4
Android осень 2013 лекция 4Technopark
 
Frontend весна 2014 лекция 1
Frontend весна 2014 лекция 1Frontend весна 2014 лекция 1
Frontend весна 2014 лекция 1Technopark
 
Проектирование графических интерфейсов лекция 6 - часть 2
Проектирование графических интерфейсов лекция 6 - часть 2Проектирование графических интерфейсов лекция 6 - часть 2
Проектирование графических интерфейсов лекция 6 - часть 2Technopark
 
Highload осень 2012 лекция 9
Highload осень 2012 лекция 9Highload осень 2012 лекция 9
Highload осень 2012 лекция 9Technopark
 

Andere mochten auch (9)

Проектирование графических интерфейсов лекция 9
Проектирование графических интерфейсов лекция 9Проектирование графических интерфейсов лекция 9
Проектирование графических интерфейсов лекция 9
 
Highload осень 2012 лекция 2
Highload осень 2012 лекция 2Highload осень 2012 лекция 2
Highload осень 2012 лекция 2
 
Android осень 2013 лекция 2
Android осень 2013 лекция 2Android осень 2013 лекция 2
Android осень 2013 лекция 2
 
Безопасность интернет-приложений осень 2013 лекция 9
Безопасность интернет-приложений осень 2013 лекция 9Безопасность интернет-приложений осень 2013 лекция 9
Безопасность интернет-приложений осень 2013 лекция 9
 
СУБД осень 2012 лекция 7
СУБД осень 2012 лекция 7СУБД осень 2012 лекция 7
СУБД осень 2012 лекция 7
 
Android осень 2013 лекция 4
Android осень 2013 лекция 4Android осень 2013 лекция 4
Android осень 2013 лекция 4
 
Frontend весна 2014 лекция 1
Frontend весна 2014 лекция 1Frontend весна 2014 лекция 1
Frontend весна 2014 лекция 1
 
Проектирование графических интерфейсов лекция 6 - часть 2
Проектирование графических интерфейсов лекция 6 - часть 2Проектирование графических интерфейсов лекция 6 - часть 2
Проектирование графических интерфейсов лекция 6 - часть 2
 
Highload осень 2012 лекция 9
Highload осень 2012 лекция 9Highload осень 2012 лекция 9
Highload осень 2012 лекция 9
 

Ähnlich wie Web весна 2012 лекция 4

Web весна 2013 лекция 4
Web весна 2013 лекция 4Web весна 2013 лекция 4
Web весна 2013 лекция 4Technopark
 
Web весна 2013 лекция 10
Web весна 2013 лекция 10Web весна 2013 лекция 10
Web весна 2013 лекция 10Technopark
 
Web осень 2012 лекция 10
Web осень 2012 лекция 10Web осень 2012 лекция 10
Web осень 2012 лекция 10Technopark
 
jQuery: быстрая разработка веб-интерфейсов на JavaScript
jQuery: быстрая разработка веб-интерфейсов на JavaScriptjQuery: быстрая разработка веб-интерфейсов на JavaScript
jQuery: быстрая разработка веб-интерфейсов на JavaScriptConstantin Kichinsky
 
Изоморфные приложения и Python - Виталий Глибин, Huntflow
Изоморфные приложения и Python - Виталий Глибин, HuntflowИзоморфные приложения и Python - Виталий Глибин, Huntflow
Изоморфные приложения и Python - Виталий Глибин, Huntflowit-people
 
Take more from Jquery
Take more from JqueryTake more from Jquery
Take more from JqueryMagento Dev
 
Symfony2. На чем можно сэкономить время при разработке?
Symfony2. На чем можно сэкономить время при разработке?Symfony2. На чем можно сэкономить время при разработке?
Symfony2. На чем можно сэкономить время при разработке?Stepan Tanasiychuk
 
Web осень 2012 лекция 8
Web осень 2012 лекция 8Web осень 2012 лекция 8
Web осень 2012 лекция 8Technopark
 
Js templating stepan_reznikov
Js templating stepan_reznikovJs templating stepan_reznikov
Js templating stepan_reznikovyaevents
 
Степан Резников "Шаблонизация на клиенте"
Степан Резников "Шаблонизация на клиенте"Степан Резников "Шаблонизация на клиенте"
Степан Резников "Шаблонизация на клиенте"Yandex
 
Knockoutjs на примере 2ГИС-Онлайн
Knockoutjs на примере 2ГИС-ОнлайнKnockoutjs на примере 2ГИС-Онлайн
Knockoutjs на примере 2ГИС-Онлайн2ГИС Технологии
 
Web весна 2012 лекция 10
Web весна 2012 лекция 10Web весна 2012 лекция 10
Web весна 2012 лекция 10Technopark
 
всплывающее окно при закрытии сайта
всплывающее окно при закрытии сайта  всплывающее окно при закрытии сайта
всплывающее окно при закрытии сайта Olga Pirozhenko
 
Scino: Front-end [part-1]
Scino: Front-end [part-1]Scino: Front-end [part-1]
Scino: Front-end [part-1]SCINO
 
XSS. Обходы фильтров и защит.
XSS. Обходы фильтров и защит.XSS. Обходы фильтров и защит.
XSS. Обходы фильтров и защит.Дмитрий Бумов
 
Взломать Web-сайт на ASP.NET? Сложно, но можно!
Взломать Web-сайт на ASP.NET? Сложно, но можно!Взломать Web-сайт на ASP.NET? Сложно, но можно!
Взломать Web-сайт на ASP.NET? Сложно, но можно!Vladimir Kochetkov
 
MODX 3: Что нового?
MODX 3: Что нового?MODX 3: Что нового?
MODX 3: Что нового?Ivan Klimchuk
 
Knockout.JS на примере 2ГИС-Онлайн
Knockout.JS на примере 2ГИС-ОнлайнKnockout.JS на примере 2ГИС-Онлайн
Knockout.JS на примере 2ГИС-ОнлайнDevDay
 

Ähnlich wie Web весна 2012 лекция 4 (20)

Web весна 2013 лекция 4
Web весна 2013 лекция 4Web весна 2013 лекция 4
Web весна 2013 лекция 4
 
Web весна 2013 лекция 10
Web весна 2013 лекция 10Web весна 2013 лекция 10
Web весна 2013 лекция 10
 
Web осень 2012 лекция 10
Web осень 2012 лекция 10Web осень 2012 лекция 10
Web осень 2012 лекция 10
 
jQuery: быстрая разработка веб-интерфейсов на JavaScript
jQuery: быстрая разработка веб-интерфейсов на JavaScriptjQuery: быстрая разработка веб-интерфейсов на JavaScript
jQuery: быстрая разработка веб-интерфейсов на JavaScript
 
Изоморфные приложения и Python - Виталий Глибин, Huntflow
Изоморфные приложения и Python - Виталий Глибин, HuntflowИзоморфные приложения и Python - Виталий Глибин, Huntflow
Изоморфные приложения и Python - Виталий Глибин, Huntflow
 
Take more from Jquery
Take more from JqueryTake more from Jquery
Take more from Jquery
 
course js day 4
course js day 4course js day 4
course js day 4
 
Symfony2. На чем можно сэкономить время при разработке?
Symfony2. На чем можно сэкономить время при разработке?Symfony2. На чем можно сэкономить время при разработке?
Symfony2. На чем можно сэкономить время при разработке?
 
Web осень 2012 лекция 8
Web осень 2012 лекция 8Web осень 2012 лекция 8
Web осень 2012 лекция 8
 
Js templating stepan_reznikov
Js templating stepan_reznikovJs templating stepan_reznikov
Js templating stepan_reznikov
 
Степан Резников "Шаблонизация на клиенте"
Степан Резников "Шаблонизация на клиенте"Степан Резников "Шаблонизация на клиенте"
Степан Резников "Шаблонизация на клиенте"
 
Knockoutjs на примере 2ГИС-Онлайн
Knockoutjs на примере 2ГИС-ОнлайнKnockoutjs на примере 2ГИС-Онлайн
Knockoutjs на примере 2ГИС-Онлайн
 
Web весна 2012 лекция 10
Web весна 2012 лекция 10Web весна 2012 лекция 10
Web весна 2012 лекция 10
 
всплывающее окно при закрытии сайта
всплывающее окно при закрытии сайта  всплывающее окно при закрытии сайта
всплывающее окно при закрытии сайта
 
Scino: Front-end [part-1]
Scino: Front-end [part-1]Scino: Front-end [part-1]
Scino: Front-end [part-1]
 
XSS. Обходы фильтров и защит.
XSS. Обходы фильтров и защит.XSS. Обходы фильтров и защит.
XSS. Обходы фильтров и защит.
 
Взломать Web-сайт на ASP.NET? Сложно, но можно!
Взломать Web-сайт на ASP.NET? Сложно, но можно!Взломать Web-сайт на ASP.NET? Сложно, но можно!
Взломать Web-сайт на ASP.NET? Сложно, но можно!
 
176023
176023176023
176023
 
MODX 3: Что нового?
MODX 3: Что нового?MODX 3: Что нового?
MODX 3: Что нового?
 
Knockout.JS на примере 2ГИС-Онлайн
Knockout.JS на примере 2ГИС-ОнлайнKnockout.JS на примере 2ГИС-Онлайн
Knockout.JS на примере 2ГИС-Онлайн
 

Mehr von Technopark

Лекция 11. Вычислительная модель Pregel
Лекция 11. Вычислительная модель PregelЛекция 11. Вычислительная модель Pregel
Лекция 11. Вычислительная модель PregelTechnopark
 
Лекция 14. Hadoop в Поиске Mail.Ru
Лекция 14. Hadoop в Поиске Mail.RuЛекция 14. Hadoop в Поиске Mail.Ru
Лекция 14. Hadoop в Поиске Mail.RuTechnopark
 
Лекция 13. YARN
Лекция 13. YARNЛекция 13. YARN
Лекция 13. YARNTechnopark
 
Лекция 12. Spark
Лекция 12. SparkЛекция 12. Spark
Лекция 12. SparkTechnopark
 
Лекция 10. Apache Mahout
Лекция 10. Apache MahoutЛекция 10. Apache Mahout
Лекция 10. Apache MahoutTechnopark
 
Лекция 9. ZooKeeper
Лекция 9. ZooKeeperЛекция 9. ZooKeeper
Лекция 9. ZooKeeperTechnopark
 
Лекция 7. Введение в Pig и Hive
Лекция 7. Введение в Pig и HiveЛекция 7. Введение в Pig и Hive
Лекция 7. Введение в Pig и HiveTechnopark
 
Лекция 6. MapReduce в Hadoop (графы)
Лекция 6. MapReduce в Hadoop (графы)Лекция 6. MapReduce в Hadoop (графы)
Лекция 6. MapReduce в Hadoop (графы)Technopark
 
Лекция 5. MapReduce в Hadoop (алгоритмы)
Лекция 5. MapReduce в Hadoop (алгоритмы)Лекция 5. MapReduce в Hadoop (алгоритмы)
Лекция 5. MapReduce в Hadoop (алгоритмы)Technopark
 
Лекция 4. MapReduce в Hadoop (введение)
Лекция 4. MapReduce в Hadoop (введение)Лекция 4. MapReduce в Hadoop (введение)
Лекция 4. MapReduce в Hadoop (введение)Technopark
 
Лекция 3. Распределённая файловая система HDFS
Лекция 3. Распределённая файловая система HDFSЛекция 3. Распределённая файловая система HDFS
Лекция 3. Распределённая файловая система HDFSTechnopark
 
Лекция 2. Основы Hadoop
Лекция 2. Основы HadoopЛекция 2. Основы Hadoop
Лекция 2. Основы HadoopTechnopark
 
Лекция 1. Введение в Big Data и MapReduce
Лекция 1. Введение в Big Data и MapReduceЛекция 1. Введение в Big Data и MapReduce
Лекция 1. Введение в Big Data и MapReduceTechnopark
 
СУБД 2013 Лекция №10 "Нереляционное решение в области баз данных — NoSQL"
СУБД 2013 Лекция №10 "Нереляционное решение в области баз данных — NoSQL"СУБД 2013 Лекция №10 "Нереляционное решение в области баз данных — NoSQL"
СУБД 2013 Лекция №10 "Нереляционное решение в области баз данных — NoSQL"Technopark
 
СУБД 2013 Лекция №10 "Нереляционное решение в области баз данных — NoSQL" Час...
СУБД 2013 Лекция №10 "Нереляционное решение в области баз данных — NoSQL" Час...СУБД 2013 Лекция №10 "Нереляционное решение в области баз данных — NoSQL" Час...
СУБД 2013 Лекция №10 "Нереляционное решение в области баз данных — NoSQL" Час...Technopark
 
СУБД 2013 Лекция №9 "Безопасность баз данных"
СУБД 2013 Лекция №9 "Безопасность баз данных"СУБД 2013 Лекция №9 "Безопасность баз данных"
СУБД 2013 Лекция №9 "Безопасность баз данных"Technopark
 
СУБД 2013 Лекция №8 "Конфигурирование базы данных"
СУБД 2013 Лекция №8 "Конфигурирование базы данных"СУБД 2013 Лекция №8 "Конфигурирование базы данных"
СУБД 2013 Лекция №8 "Конфигурирование базы данных"Technopark
 
СУБД 2013 Лекция №7 "Оптимизация запросов и индексирование"
СУБД 2013 Лекция №7 "Оптимизация запросов и индексирование"СУБД 2013 Лекция №7 "Оптимизация запросов и индексирование"
СУБД 2013 Лекция №7 "Оптимизация запросов и индексирование"Technopark
 
СУБД 2013 Лекция №5 "Определение узких мест"
СУБД 2013 Лекция №5 "Определение узких мест"СУБД 2013 Лекция №5 "Определение узких мест"
СУБД 2013 Лекция №5 "Определение узких мест"Technopark
 
СУБД 2013 Лекция №6 "Профилирование запросов. Сложноструктурированные SQL-зап...
СУБД 2013 Лекция №6 "Профилирование запросов. Сложноструктурированные SQL-зап...СУБД 2013 Лекция №6 "Профилирование запросов. Сложноструктурированные SQL-зап...
СУБД 2013 Лекция №6 "Профилирование запросов. Сложноструктурированные SQL-зап...Technopark
 

Mehr von Technopark (20)

Лекция 11. Вычислительная модель Pregel
Лекция 11. Вычислительная модель PregelЛекция 11. Вычислительная модель Pregel
Лекция 11. Вычислительная модель Pregel
 
Лекция 14. Hadoop в Поиске Mail.Ru
Лекция 14. Hadoop в Поиске Mail.RuЛекция 14. Hadoop в Поиске Mail.Ru
Лекция 14. Hadoop в Поиске Mail.Ru
 
Лекция 13. YARN
Лекция 13. YARNЛекция 13. YARN
Лекция 13. YARN
 
Лекция 12. Spark
Лекция 12. SparkЛекция 12. Spark
Лекция 12. Spark
 
Лекция 10. Apache Mahout
Лекция 10. Apache MahoutЛекция 10. Apache Mahout
Лекция 10. Apache Mahout
 
Лекция 9. ZooKeeper
Лекция 9. ZooKeeperЛекция 9. ZooKeeper
Лекция 9. ZooKeeper
 
Лекция 7. Введение в Pig и Hive
Лекция 7. Введение в Pig и HiveЛекция 7. Введение в Pig и Hive
Лекция 7. Введение в Pig и Hive
 
Лекция 6. MapReduce в Hadoop (графы)
Лекция 6. MapReduce в Hadoop (графы)Лекция 6. MapReduce в Hadoop (графы)
Лекция 6. MapReduce в Hadoop (графы)
 
Лекция 5. MapReduce в Hadoop (алгоритмы)
Лекция 5. MapReduce в Hadoop (алгоритмы)Лекция 5. MapReduce в Hadoop (алгоритмы)
Лекция 5. MapReduce в Hadoop (алгоритмы)
 
Лекция 4. MapReduce в Hadoop (введение)
Лекция 4. MapReduce в Hadoop (введение)Лекция 4. MapReduce в Hadoop (введение)
Лекция 4. MapReduce в Hadoop (введение)
 
Лекция 3. Распределённая файловая система HDFS
Лекция 3. Распределённая файловая система HDFSЛекция 3. Распределённая файловая система HDFS
Лекция 3. Распределённая файловая система HDFS
 
Лекция 2. Основы Hadoop
Лекция 2. Основы HadoopЛекция 2. Основы Hadoop
Лекция 2. Основы Hadoop
 
Лекция 1. Введение в Big Data и MapReduce
Лекция 1. Введение в Big Data и MapReduceЛекция 1. Введение в Big Data и MapReduce
Лекция 1. Введение в Big Data и MapReduce
 
СУБД 2013 Лекция №10 "Нереляционное решение в области баз данных — NoSQL"
СУБД 2013 Лекция №10 "Нереляционное решение в области баз данных — NoSQL"СУБД 2013 Лекция №10 "Нереляционное решение в области баз данных — NoSQL"
СУБД 2013 Лекция №10 "Нереляционное решение в области баз данных — NoSQL"
 
СУБД 2013 Лекция №10 "Нереляционное решение в области баз данных — NoSQL" Час...
СУБД 2013 Лекция №10 "Нереляционное решение в области баз данных — NoSQL" Час...СУБД 2013 Лекция №10 "Нереляционное решение в области баз данных — NoSQL" Час...
СУБД 2013 Лекция №10 "Нереляционное решение в области баз данных — NoSQL" Час...
 
СУБД 2013 Лекция №9 "Безопасность баз данных"
СУБД 2013 Лекция №9 "Безопасность баз данных"СУБД 2013 Лекция №9 "Безопасность баз данных"
СУБД 2013 Лекция №9 "Безопасность баз данных"
 
СУБД 2013 Лекция №8 "Конфигурирование базы данных"
СУБД 2013 Лекция №8 "Конфигурирование базы данных"СУБД 2013 Лекция №8 "Конфигурирование базы данных"
СУБД 2013 Лекция №8 "Конфигурирование базы данных"
 
СУБД 2013 Лекция №7 "Оптимизация запросов и индексирование"
СУБД 2013 Лекция №7 "Оптимизация запросов и индексирование"СУБД 2013 Лекция №7 "Оптимизация запросов и индексирование"
СУБД 2013 Лекция №7 "Оптимизация запросов и индексирование"
 
СУБД 2013 Лекция №5 "Определение узких мест"
СУБД 2013 Лекция №5 "Определение узких мест"СУБД 2013 Лекция №5 "Определение узких мест"
СУБД 2013 Лекция №5 "Определение узких мест"
 
СУБД 2013 Лекция №6 "Профилирование запросов. Сложноструктурированные SQL-зап...
СУБД 2013 Лекция №6 "Профилирование запросов. Сложноструктурированные SQL-зап...СУБД 2013 Лекция №6 "Профилирование запросов. Сложноструктурированные SQL-зап...
СУБД 2013 Лекция №6 "Профилирование запросов. Сложноструктурированные SQL-зап...
 

Web весна 2012 лекция 4

  • 2. Что мы научимся делать?  Обрабатывать GET и POST запросы  Выводить HTML при помощи шаблонов  Хранить данные в СУБД Типичные задачи  Отображение списка объектов  Изменение (редактирование) объектов  Wizards: последовательности страниц
  • 3. Языки и технологии Статические (+/-): СС++ модули к Web серверам. Java – Servlets, ApplicationServers Динамически (+/-): Perl – CGI, mod_perl, PSGI PHP – mod_php, FastCGI (FPM) Ruby – rack, свой сервер (mongrel) Python – WSGI, свой сервер (Tornado) JavaScript – свой сервер (NodeJS)
  • 4. CGI скрипт #!/usr/bin/python2.7 print "Content-type: text/html" print "Status: 200" print "" print "<h1>Hello, world!</h1>" import os import sys for k, v in os.environ.items(): print "%s = %s<br>" % (k, v) print >> sys.stderr, "Nice to meet you"
  • 5. NPH - CGI скрипт #!/usr/bin/python2.7 print "HTTP/1.0 301 Found" print "Location: http://go.mail.ru/" print "Set-Cookie: name=value" print ""
  • 6. Передача GET параметров <a href=”/hello.cgi?name=me&greeting=hello”/>Say hello</a> QUERY_STRING=name=me&greeting=hello get_params = {} qs = os.environ['QUERY_STRING'] for pair in qs.split('&'): key, value = pair.split('=') get_params[key] = value
  • 7. Передача POST параметров <form method=”post” action=”/hello.cgi”> <input name=”name” value=”me”/> <input name=”greeting” value=”hi”/> <input type=”submit”/> </form> STDIN=name=me&greeting=hello import sys qs = sys.stdin.read()
  • 8. Передача файлов и не-ASCII <form method=”post” action=”/hello.cgi” enctype=”multipart/form-data”> <input name=”name” value=”me”/> <input name=”pic” type=”file”/> <input type=”submit”/> </form> <a href=”/hello.cgi? name=Boris&name=Ivan”>здорово</a> <a href=”/hello.cgi?name=%D0%B8%D0%BC %D1%8F”>привет</a>
  • 9. CGI библиотеки import cgi import cgitb cgitb.enable() form = cgi.FieldStorage() if “greeting” not in form: raise BaseException(“can't work”) greeting = form[“greeting”] names = form.getlist(“name”) pic = forms[“pic”].file.read()
  • 10. Обработка входных данных 1) Валиадция (regex, code) if not re.match('[a-z]+', form[“name”]): raise BaseException(“panic”) 2) Очистка story = re.sub('<[^>]+>', ' ', form[“story”]) 3) Экранирование story = form[“story”] re.sub('<', '&lt;', story) re.sub('>', '&gt', story)
  • 11. Шаблонизаторы print “<html><body><h1>” “%s</h1></body></html>” % name VS context = { 'user' : get_user(form['name']), 'friends' : get_friends(form['name']) } print render('tpl/home.html', context)
  • 12. Шаблоны <body> <h1>{{ user.name }}</h1> {% if user.sex == 'male' %} <h2>{{ user.age }}</h2> {% endif %} {% for f in friends %} <a href=”mailto:{{ f.email }}”>{{ f.name }}</a> <p>{{ f.about|linebreaks }}</p> {% endfor %} </body>
  • 14. Подшаблоны (includes) {% include 'inc/header.html' %} <table><tr> <td>{% include 'inc/left.html' %}</td> <td> CONTENT </td> <td>{% include 'inc/right.html' %}</td> </tr></table> {% include 'inc/footer.html' %}
  • 15. Наследование (layouts) <!-- base.html --> <div>HEADER</div> <table><tr> <td>LEFT</td> <td> {% block content %} CONTENT {% endblock %}</td> <td>RIGHT</td> </tr></table> <div>FOOTER</div>
  • 16. Наследование (layouts) <!-- page.html –-> {% extends 'base.html' %} {% block content %} <h1>{{ user.name }}</h1> <div>{{ block.super }}</div> {% endblock %}
  • 18. SQL запросы INSERT INTO users (name, age) VALUES ('petr', 10), ('masha', 25); UPDATE users SET age = 10 WHERE name = 'petr'; DELETE FROM users WHERE name = 'masha'; SELECT * FROM users WHERE age > 10; SELECT * FROM users WHERE name = 'masha'; SELECT max(age) FROM users;
  • 19. Использование SQL в python import MySQLdb db = MySQLdb.connect(**options) cursor = db.cursor() cursor.execute(“update users set age = age+1 ” ”where name = ?”, form[“name”]) context = {} cursor.execute(“select * from users”) context['friends'] = cursor.fetchall() cursor.execute(“select * from users where name = ?”, form[“name”]) context['user'] = cursor.fetchone() db.close()
  • 20. Конфигурация приложений 1) hardcode. Настройки зашиты в код приложения 2) script. Настройки представляют собой скрипт на целевом ЯП 3) YAML, XML, ini, Config::Apache 4) Переменные, разделение на несколько файлов
  • 21. Задача №1. Листинг объектов 1) Параметры: фильтрация, сортировка, номер страницы 2) /images/?order=created&page=3&limit=10 3) Результат работы скрипта: список объектов для данной страницы и paginator 4) paginator – представляет положение в списке страниц
  • 22. import cgi import psycopg2 import settings db = psycopg2.connect(**settings.db) cursor = db.cursor() form = cgi.FieldStorage() order = form.getfirst('order', 'created') if order not in ('created', 'size'): raise BaseException('oops') page = form.getfirst('page', 1) limit = form.getfirst('limit', 10) sql = 'select * from images order by %s limit %d offset %d' % (order, limit, limit * (page – 1))
  • 23. cursor.execute(sql) context = {} context['images'] = cursor.fetchall() cursor.execute('select count(*) as cnt from images') total = cursor.fetchone()[0]['cnt'] context['pager'] = calc_paginator(total, page, limit) db.close() print “Status: 200” print “Content-Type: text/html” print “” print render('/images.html', context)
  • 24. Paginator Аргументы: total, page, limit Результат: { 'total': 100, 'page': 5, 'limit': 10, 'next_page': 6, 'prev_page': 4, 'next_page10': 10, 'prev_page10': 1, 'first_page':1, 'last_page': 10, 'pages' : [3, 4, 5, 6, 7] }
  • 25. Задача № 2. Изменение объекта 1) Два режима работы: отображение формы и обновление объекта 2) Разделение по методу HTTP (GET | POST). Кеширование запросов 3) Использование спец. параметра (action) 4) Отображение ошибок и результата действия
  • 26. import cgi; import psycopg2; import settings; import os db = psycopg2.connect(**settings.db) cursor = db.cursor() form = cgi.FieldStorage() if os.environ['HTTP_METHOD'] == 'POST”: try: cursor.execute('update users set name = ? where id = ?', form['name'], form['id']) redirect('/cgi-bin/object.cgiid=%s&res=updated' % form['id']) catch BaseException, e: redirect('/cgi-bin/object.cgi?id=%s&fail=fail' % form['id']) else: context = {} cursor.execute('select * from users where id = ?', form['id']) context['object'] = cursor.fetchone() render('object.html', context)
  • 27. <form method=”POST” action=”/cgi-bin/object.cgi”> {% if res %} <p style=”color: green”>Объект обновлен: {{ res }}</p> {% endif %} {% if fail %} <p style=”color: red”>Ошибка: {{ fail }}</p> {% endif %} <input type=”hidden” name=”id” value=”{{ object.id }}”/> <input type=”text” name=”name” value=”{{ object.name }}”/> <input type=”submit”/> </form>
  • 28. Best Practice 1) Разделять методы GET – получение, POST – обновление данных 2) Сообщать об ошибках и успехе 3) Проверять данные пользователя а) на сервере – безопасность программы б) на клиенте – удобство пользователя 4) Выделять неправильно введеные поля
  • 29. Задача № 3. Wizard 1) Statefull vs Stateless. 2) Как передать данные между страницами? выбор товара → информация о клиенте → дата и место доставки → подтверждение 3) Варианты: - через URL - через скрытые поля - через Cookie - через сессии
  • 30. Скрытые поля <!-- page2.html --> <form method=”POST” action=”/page3.html”> <input type=”hidden” name=”item_id” value=”1”/> <input type=”hidden” name=”ammount” value=”4”/> <input type=”text” name=”name” value=””/> <input type=”text” name=”phone” value=””/> <input type=”submit”/> </form>
  • 31. Cookie 1) Установка Set-Cookie: name=val; path=/; domain=domain.ru; expires=Tue, 20 Mar 2012 11:52:54 GMT 2) Возврат Cookie: name=val;name2=val2;is_visited=2011-13-15 Сессии 1) Ключ сессии – в cookie 2) Данные – на сервере (memcached, database, files)
  • 32. Cookie с помощью Python CGI 1) Установка import Cookie cookie = Cookie.SimpleCookie() cookie['name'] = 'val' cookie['name']['path'] = '/path' print cookie 2) Получение import Cookie cookie = Cookie.SimpleCookie() cookie.load('a=b;c=d') for name in cookie: print '%s => %s' % (name, cookie[name])
  • 33. Достоинства и недостатки CGI Плюсы: 1) простая концепция “скриптов” 2) стандарт – есть поддержка на любом хостинге 3) последовательное исполнение Минусы и способы решения: 1) смешение кода и HTML → шаблонизаторы 2) повторение логики → вынесение кода в библиотеки 3) pretty urls → RewriteEngine 4) производительность (fork, exec, parse, db.connect) → кеширование кода (FastCGI, mod_perl etc)
  • 34. Pretty URLs URL: /profile/mail/my Скрипт: /cgi-bin/profile.cgi?email=my@ mail.ru location ~* ^/profile/w+/w+/?$ { rewrite ^/profile/(w+)/(w+)/? /cgi-bin/profile.cgi?email=$2@$1.ru break; proxy_pass http://backend; }
  • 35. Кеширование Что такое кеширование ? Виды кешей: 1) HTTP cache - сокращает загрузку статики 2) proxy cache – кеш страницы целиком (либо части, подключаемой через ssi) 3) buffer cache – кеширование данных в OS 4) memcached – распределенный кеш в памяти 5) генерация статических файлов 6) отложенное выполнение. crond.
  • 36. Домашняя работа 1) реализовать calc_paginator 2) написать cgi скрипт для проверки. Список объектов – числа Фибоначчи до 10000 1) реализовать функцию redirect 2) написать cgi скрипт для проверки. Например аналог bit.ly со статическими настройками.