7 Семинар - flask intro.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {
    "collapsed": true
   },
   "source": [
    "# Пишем сайты на питоне\n",
    "\n",
    "## Вспоминаем, как работает интернет\n",
    "\n",
    "__Веб-сервер__\n",
    "* устройство vs. программа\n",
    "* задача — получать запросы от других компьютеров или программ (клиентов, clients) и отправлять запрошенные данные\n",
    "* основная функция — размещение сайтов (website hosting)\n",
    "\n",
    "__Термины__\n",
    "* *Запрос (request)* — сообщение от агента, желающего получить или разместить информацию\n",
    "* *Ответ (response)* — ответное сообщение сервера с кодом состояния и информацией (HTML, изображения, загружаемые файлы и т. п.)\n",
    "* *Протокол (protocol)* — набор правил, по которым составляются запросы и ответы \n",
    "* *Сессия (session)* — установка соединения между агентом и сервером и последующая серия запросов и ответов\n",
    "* *Гипертекст* — множество текстов, организованных в виде графа при помощи гиперссылок\n",
    "* *Протокол HTTP (HyperText Transfer Protocol)* — протокол для передачи гипертекстовых данных (обычно в виде HTML)\n",
    "* *URL (Uniform Resource Locator)*, веб-адрес ресурса — строка, представляющая собой уникальное имя, по которому можно найти в сети этот ресурс\n",
    "\n",
    "__Адресация__\n",
    "\n",
    "IP\n",
    "* *IP-адрес* — (пока что) набор из 4 байт, присваиваемый каждому подключённому к сети устройству\n",
    "* Некоторые IP-адреса уникальны, некоторые — нет (внутренние адреса в локальных сетях)\n",
    "* Практически любой ресурс (например, сайт) можно получить по его IP-адресу (например, через браузер)\n",
    "* Существуют зарезервированные адреса и диапазоны адресов, например, `127.0.0.1` — адрес данного устройства\n",
    "\n",
    "Порт\n",
    "* Каждый запрос обращается не просто к какому-то IP-адресу, а к некоторому порту на этом адресе\n",
    "* Веб-сервер имеет 65 535 портов, пронумерованных начиная с 1\n",
    "* Веб-сервер может прослушивать некоторые порты (listen to ports) и по-разному обрабатывать сообщения, поступившие на разные порты\n",
    "* Если порт не прослушивается, сообщения на этот порт останутся без ответа\n",
    "\n",
    "\n",
    "__URL__\n",
    "\n",
    "http__://__www.example.com__:__1234__/__directory1/file1.html\n",
    "\n",
    "протокол__://__доменное имя или IP-адрес__:__порт__/__адрес файла на сервере\n",
    "\n",
    "* Порт указывать не обязательно: используются стандартные порты (HTTP — 80, FTP — 20 и т. п.)\n",
    "* *DNS (Domain Name Servers)* — специальные сервера в сети, на которых хранятся таблицы соответствия между доменными именами и IP-адресами их серверов\n",
    "\n",
    "\n",
    "__HTML и скрипты__\n",
    "* страницы, содержимое (HTML-код) которых не изменяется, называются *статическими (static)*\n",
    "* страницы, содержимое которых может быть разным в зависимости от введённых пользователем данных, времени, IP-адреса и т. п., называются *динамическими (dynamic)*\n",
    "* динамические страницы создаются с помощью скриптов *на стороне сервера (server side scripts)*, написанных, например, на PHP или Python\n",
    "* скрипт порождает HTML и посылает его пользователю\n",
    "* пользователь не видит кода скрипта, выполняющегося на сервере\n",
    "* *скрипт на стороне клиента (client side script)* — вставка в HTML на каком-то языке программирования (например, JavaScript), позволяющая странице вести себя интерактивно\n",
    "* код клиентских скриптов посылается клиенту сервером вместе с HTML и не выполняется на сервере\n",
    "\n",
    "__Питон и сайты__\n",
    "\n",
    "Написать сайт на питоне значит написать такую программу, которая может работать веб-сервером или использоваться веб-сервером для порождения HTML-кода веб-страниц. Для этого существует несколько модулей, например, Django и Flask\n",
    "\n",
    "## flask\n",
    "\n",
    "### Intro\n",
    "\n",
    "* Программа, написанная с помощью flask, работает как веб-сервер\n",
    "* За каждую веб-страницу сайта отвечает какая-то функция, которая возвращает HTML- код этой страницы\n",
    "* Естественно, писать длинные куски HTML-кода внутри программы на питоне было бы странно, поэтому функции могут загружать HTML из заранее заготовленных файлов\n",
    "* Эти файлы могу содержать готовые страницы или шаблоны страниц на специальном языке\n",
    "\n",
    "Пример готового сайта на flask:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from flask import Flask\n",
    "\n",
    "app = Flask(__name__)\n",
    "\n",
    "@app.route('/')\n",
    "def index():\n",
    "    return '<html><body><p>Hello, world!</p></body></html>'\n",
    "\n",
    "if __name__ == '__main__':\n",
    "    app.run(debug=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Каждая страница сайта порождается какой-то функцией. Декоратор `@app.route(...)` перед функцией показывает, какой адрес будет у страницы, за которую отвечает эта функция:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "@app.route('/')\n",
    "def index():\n",
    "    return 'Main page'\n",
    "\n",
    "@app.route('/hi')\n",
    "def hi():\n",
    "    return 'Hi!'"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Одна функция может отвечать за несколько разных страниц:\n",
    "* Во-первых, декораторов может стоять несколько подряд.\n",
    "* Во-вторых, декораторы могут содержать переменные.\n",
    "\n",
    "Пример:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "@app.route('/user/<user>')\n",
    "def user_index(user):\n",
    "    return 'This is the page of' + user"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Переменные в адресах могут быть разного типа: `int` — целое число, `float` — действительное число, `path` — строка, которая может содержать слэши. Тип переменной можно указать вот так:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "import datetime\n",
    "\n",
    "@app.route('/time/<int:shift>')\n",
    "def time_page(shift):\n",
    "    h = datetime.datetime.today().hour\n",
    "    h += shift\n",
    "    return 'Time in your country:' + str(h)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Страницы часто содержат ссылки друг на друга, но чтобы поставить ссылку, нужно знать адрес. Чтобы узнать адрес страницы, которую создаёт какая-то функция, используется функция `url_for`:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from flask import url_for\n",
    "\n",
    "@app.route('/functions/<fname>')\n",
    "def f_address(fname):\n",
    "    return 'The address is ' + url_for(fname)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Обратная связь\n",
    "(вспоминаем прошлый семинар)\n",
    "\n",
    "* Для обратной связи с сервером часто используются HTML-формы\n",
    "* Форма должна содержать кнопку `Submit`\n",
    "* Формы могут содержать текстовые поля, галочки и т. п.\n",
    "* Данные (значения элементов) из формы отправляются на сервер с помощью метода GET или POST\n",
    "* При использовании метода GET данные приписываются к URL после знака `?`\n",
    "\n",
    "__Еще раз про HTML-формы__"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "<form>\n",
    "    Имя: <input type=\"text\" name=\"name\"><br>\n",
    "    Возраст: <input type=\"text\" name=\"age\"><br>\n",
    "    Пароль: <input type=\"password\" name=\"pwd\"><br>\n",
    "    <input type=\"checkbox\" name=\"student\"> студент\n",
    "    <input type=\"submit\" value=\"Отправить\">\n",
    "</form>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "При нажатии на кнопку `submit` и использовании GET на сервер отправляется запрос, URL которого содержит все значения параметров после `?`:\n",
    "\n",
    "    www.example.com:5000/some_page.html?name=Petya&age=&student=on\n",
    "\n",
    "Почти все символы в таком URL, кроме латинских, будут закодированы с помощью percent encoding:\n",
    "\n",
    "    name=%D0%A2%D0%B8%D0%BC%D0%BE%D1%84%D0%B5%D0%B9\n",
    "\n",
    "Чтобы использовать данные из формы в приложении flask, нужен объект `request`:\n",
    "* `request.method` — метод запроса\n",
    "* `request.args` — словарь со значениями аргументов из URL"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from flask import request\n",
    "@app.route('/login')\n",
    "def login():\n",
    "    if request.args['password'] == '123':\n",
    "        return 'Name: ' + request.args['login']\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "\n",
    "### Шаблоны\n",
    "\n",
    "Динамические веб-страницы собираются из шаблонов: у шаблона есть постоянная часть и изменяющаяся часть. Flask позволяет хранить в файлах такие шаблоны страниц. __(!!!) Все шаблоны страниц должны находиться в папке `templates`.__\n",
    "\n",
    "Шаблон состоит из обычного html-кода. Но в этот обычный html могут быть вставлены специальные фрагменты кода, способного порождать разный html в зависимости от значений переменных. \n",
    "\n",
    "Эти специальные фрагменты пишутся внутри `{% ... %}` или `{{ ... }}`. При порождении HTML эти фрагменты заменяются на какой-то HTML-код по определённым правилам.\n",
    "\n",
    "Чтобы породить HTML по шаблону, используется функция `render_template()`:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from flask import render_template\n",
    "@app.route('/hello/')\n",
    "@app.route('/hello/<name>')\n",
    "def hello(name=None):\n",
    "    return render_template('hello.html', name=name)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "* Функция `render_template` заменяет все вставки в фигурных скобках на какой-то HTML.\n",
    "* Во вставках можно использовать переменные, которые передаются в шаблон через `render_template`.\n",
    "\n",
    "Есть два вида вставок: `{{ ... }}` и `{% ... %}`.\n",
    "\n",
    "Язык, на котором пишутся эти вставки, похож на питон, но многие питоновские функции в шаблонах работать не будут\n",
    "\n",
    "__Вставки `{{ ... }}`__\n",
    "\n",
    "* `{{ ... }}` означает «вычислить значение выражения в скобках и заменить им вставку»\n",
    "* в скобках может быть переменная, например, `{{ name }}`\n",
    "* к переменным в скобках __нельзя__ применять произвольные функции: `{{ f(name) }}`\n",
    "* существует набор встроенных операций, которые можно выполнять над переменными\n",
    "* эти операции отделяются от переменной знаком | и тогда выражение пишется так `{{ name|length }}`, примеры операций: \n",
    "    * `length`\n",
    "    * `lower`, `upper`\n",
    "    * `e` — автоматически экранировать спецсимволы HTML\n",
    "    * `random` — взять случайный элемент из массива\n",
    "    * `urlencode` — закодировать строку с помощью percent encoding\n",
    "\n",
    "__Вставки `{% ... %}`__\n",
    "\n",
    "В таких `{% ... %}` скобках пишутся специальные команды, аналогичные питоновским `if` и `for`.\n",
    "Примеры:\n",
    "\n",
    "`{% for i in arr %} ... {% endfor %}`\n",
    "\n",
    "`{% if ... %} ... {% endif %}`\n",
    "\n",
    "`{% elif ... %}`\n",
    "\n",
    "`{% else %}`\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "{% if username|length > 20 %}\n",
    "    <p>Слишком длинное имя!</p>\n",
    "{% else %}\n",
    "    <p>{{ username }}</p>\n",
    "{% endif %}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Можно посмотреть пример в репозитории в папке `flask_example`."
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.4.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}