11 Flask intro.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {
    "collapsed": true
   },
   "source": [
    "# Пишем сайты на питоне\n",
    "\n",
    "Быстрые ссылки:\n",
    "1) Теория\n",
    "    - Как работает интернет\n",
    "2) Практика\n",
    "    - [Flask](https://render.githubusercontent.com/view/ipynb?commit=55b868f33e5d66ca0b04d1802be317f1d4f83706&enc_url=68747470733a2f2f7261772e67697468756275736572636f6e74656e742e636f6d2f656c6d6972616d2f323031376c6561726e707974686f6e2f353562383638663333653564363663613062303464313830326265333137663164346638333730362f3131253230466c61736b253230696e74726f2e6970796e62&nwo=elmiram%2F2017learnpython&path=11+Flask+intro.ipynb&repository_id=86857280#flask)\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",
    "Прежде чем работать с модулем Flask, его нужно установить.\n",
    "Как установить фласк:\n",
    "- Если у вас Mac или какой-нибудь линукс\\убунту или что-то подобное, то нужно открыть терминал (Terminal) и написать там `sudo pip install flask`.\n",
    "- Если у вас Windows, то нужно открыть консоль (нажать Win+R, написать cmd и нажать \"выполнить\"), в консоли с помощью команды `cd` перейти в папку Scripts там, где установлен питон (обычно это C:\\Python35\\Scripts): `cd C:\\Python35\\Scripts`\n",
    "И потом ввести `pip install flask`\n",
    "\n",
    "Как проверить, что у вас установлен фласк:\n",
    "- Нужно открыть питоновскую консоль (например, в IDLE) и написать там `import flask`. Если не появилась никакая ошибка, то фласк у вас установлен, а если появляются красные буквы, слово `Error` и `No module 'flask'`, то очевидно, что нет =)\n",
    "\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": [
    "Код выше можно скопировать в файл, например `my_app.py`, и этот файл запустить. После этого питон вам скажет:\n",
    "```\n",
    " * Restarting with stat\n",
    " * Debugger is active!\n",
    " * Debugger PIN: 267-499-000\n",
    " * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)\n",
    " ```\n",
    " \n",
    " Это значит, \n",
    " * что наш сайт заработал, \n",
    " * что если на какой-то странице сайта возникнет ошибка, то  полное сообщение об ошибке выведется на эту страницу, \n",
    " * сайт можно посмотреть по адресу http://127.0.0.1:5000/"
   ]
  },
  {
   "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')  # это страница по ссылке /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` — строка, которая может содержать слэши. Тип переменной можно указать вот так: \n",
    "\n",
    "записываем переменную в угловых скобках, затем пишем тип переменной (int, float..), затем двоеточие и имя переменной. Это имя переменной затем передается в саму функцию."
   ]
  },
  {
   "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",
    "Для обратной связи с сервером часто используются HTML-формы\n",
    "\n",
    "#### HTML-формы\n",
    "\n",
    "В коде HTML-страницы можно написать веб-формы, которые генерируют запросы к какому-то ресурсу и отправляют их, используя какой-то метод.\n",
    "\n",
    "Чтобы создать форму используется тэг `<form>`. У тэга `<form>` есть атрибуты:\n",
    "\n",
    "* `action` - кому (какой программе) мы отправляем запрос\n",
    "* `method` - какой метод мы используем - GET|POST\n",
    "\n",
    "\n",
    "GET\n",
    "\n",
    "Этот метод является одним из самых распространенных и предназначен для получения требуемой информации и передачи данных в адресной строке. Пары «имя=значение» присоединяются в этом случае к адресу после вопросительного знака и разделяются между собой амперсандом (символ &). Удобство использования метода get заключается в том, что адрес со всеми параметрами можно использовать неоднократно, сохранив его, например, в закладки браузера, а также менять значения параметров прямо в адресной строке.\n",
    "\n",
    "POST\n",
    "\n",
    "Метод post посылает на сервер данные в запросе браузера. Это позволяет отправлять большее количество данных, чем доступно методу get, плюс эти данные можно скрывать. Большие объемы данных используются в форумах, почтовых службах, заполнении базы данных, при пересылке файлов и др.\n",
    "\n",
    "\n",
    "Для того, чтобы пользователь мог ввести в форму какие-то данные, используется тэг `<input>`. У тэга `<input>` есть атрибуты:\n",
    "\n",
    "* `name` - имя поля,\n",
    "* `value` - значение поля,\n",
    "* `type` - какой тип ввода мы используем. Тип может быть такой:\n",
    "    * `text` - короткое текстовое поле.\n",
    "    * `textarea` - большое текстовое поле.\n",
    "    * `checkbox` - выбор с чекбоксами, которые можно отмечать галочками (можно все или несколько)\n",
    "    * `radio` - выбор с радио-кнопками, из которых можно выбрать только одну.\n",
    "    * `submit` - кнопка для отправки формы на сервер.\n",
    "    \n",
    "    \n",
    "__Вот минимальный пример:__\n",
    "```\n",
    "    <form method=\"GET\">\n",
    "        Как вас зовут? <input type=\"text\" name=\"username\" value=\"\">\n",
    "        <input type=\"submit\" value=\"Отправить\">\n",
    "    </form>\n",
    "```\n",
    "\n",
    "Когда форма отправляется на сервер, управление данными передается программе, заданной атрибутом `action` тега `<form>`. Предварительно браузер подготавливает информацию в виде пары «имя=значение», где имя определяется атрибутом `name` тега `<input>`, а значение введено пользователем или установлено в поле формы по умолчанию. Если для отправки данных используется метод GET, то адресная строка будет выглядеть примерно так:\n",
    "\n",
    "https://github.com/elmiram/2016learnpython/6%20Seminar.ipynb?username=Petya\n",
    "\n",
    "\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']"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "\n",
    "### Шаблоны\n",
    "\n",
    "Динамические веб-страницы собираются из шаблонов: у шаблона есть постоянная часть и изменяющаяся часть. Flask позволяет хранить в файлах такие шаблоны страниц. \n",
    "\n",
    "__(!!!) Все шаблоны страниц должны находиться в папке `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",
    "    if name is None:\n",
    "        name = 'friend'\n",
    "    return render_template('hello.html', name=name)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "В папке `templates` может лежать файл `hello.html` с таким содержанием:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "<html>\n",
    "    <body>\n",
    "        <p>\n",
    "        Hello, {{ name }}!\n",
    "        </p>\n",
    "    </body>\n",
    "</html>"
   ]
  },
  {
   "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`.\n",
    "\n",
    "# Домашнее задание\n",
    "\n",
    "1) Посмотреть код в папке `flask_example`, осознать, что там происходит.\n",
    "\n",
    "2) Написать сайт на фласке, в котором находится две страницы:\n",
    "    * на главной странице - (`127.0.0.1:5000`) находится форма, которая спрашивает у пользователя имя (text input) и кого он любит больше, котов или собак (чекбокс или радио-кнопки),\n",
    "    * страница с результатами (`127.0.0.1:5000/result`), на которую пользователь попадает после заполнения формы.\n",
    "        - на этой странице написано, сколько людей голосовало за котов, сколько за собак.\n",
    "        - перечислены все голосовавшие (их имена) и сколько раз каждый участвовал в голосовании.\n",
    "        \n",
    "Таким образом, вам нужно написать две функции и два html-шаблона. Шаблоны должны быть в папке `templates`, а весь код сайта в папке `flask_intro`."
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3.0
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.5.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}