Семинары/6. Запросы и формы.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Запросы и формы\n",
    "\n",
    "## HTTP-запросы\n",
    "\n",
    "Вспомним первый семинар:\n",
    "\n",
    "> На самом деле, когда мы хотим открыть какую-то страницу в интернете, наш браузер отправляет на сервер запрос (\"Привет, сервер! я хочу код страницы по вот такому адресу!\"), а сервер затем отправляет ответ (\"Привет! Вот код страницы: ...\"). \n",
    "\n",
    "Такие запросы мы обычно отправляем по протоколу HTTP (протокол - просто набор правил отправки запроса). При отправке запроса нужно сказать серверу, как ему стоит обаботать наш запрос -- каким __методом__. Методы бывают разные, а сейчас мы разберем два основных: GET и POST.\n",
    "\n",
    "GET\n",
    "\n",
    "Этот метод является одним из самых распространенных и предназначен для получения требуемой информации и передачи данных в адресной строке. Пары «имя=значение» присоединяются в этом случае к адресу после вопросительного знака и разделяются между собой амперсандом (символ &). Удобство использования метода get заключается в том, что адрес со всеми параметрами можно использовать неоднократно, сохранив его, например, в закладки браузера, а также менять значения параметров прямо в адресной строке.\n",
    "\n",
    "POST\n",
    "\n",
    "Метод post посылает на сервер данные в запросе браузера. Это позволяет отправлять большее количество данных, чем доступно методу get, плюс эти данные можно скрывать. Большие объемы данных используются в форумах, почтовых службах, заполнении базы данных, при пересылке файлов и др.\n",
    "\n",
    "\n",
    "## HTML-формы\n",
    "\n",
    "В коде HTML-страницы можно написать веб-формы, которые генерируют запросы к какому-то ресурсу и отправляют их, используя какой-то метод.\n",
    "\n",
    "Чтобы создать форму используется тэг `<form>`. У тэга `<form>` есть атрибуты:\n",
    "\n",
    "* `action` - кому (какой программе) мы отправляем запрос\n",
    "* `method` - какой метод мы используем - GET|POST\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",
    "__Вот минимальный пример:__\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",
    "__Вот пример c радио-кнопками:__\n",
    "\n",
    "    <html>\n",
    "        <head>\n",
    "           <meta charset=\"utf-8\">\n",
    "           <title>Кого вы больше любите?</title>\n",
    "        </head>\n",
    "     <body>\n",
    "\n",
    "     <form action=\"\">\n",
    "        <p><b>Как вас зовут?</b> <input type=\"text\" name=\"username\" value=\"\"></p>\n",
    "        <p><b>Кого вы больше любите?</b></p>\n",
    "        <input type=\"radio\" name=\"answer\" value=\"cat\">Котиков<Br>\n",
    "        <input type=\"radio\" name=\"answer\" value=\"dog\">Собачек<Br>\n",
    "        <input type=\"radio\" name=\"answer\" value=\"bird\">Птичек<Br>\n",
    "        <input type=\"radio\" name=\"answer\" value=\"elephant\">Слоников<Br>\n",
    "        <p><input type=\"submit\"></p>\n",
    "     </form>\n",
    "\n",
    "     </body>\n",
    "     </html>\n",
    "   <br><br>  \n",
    " \n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "     \n",
    "__Вот пример c чекбоксами:__\n",
    "\n",
    "    <html>\n",
    "    <head>\n",
    "    <meta charset=\"utf-8\">\n",
    "    <title>Чем вы любите заниматься</title>\n",
    "    </head>\n",
    "    <body>\n",
    "\n",
    "    <form action=\"\">\n",
    "    <p><b>Как вас зовут?</b> <input type=\"text\" name=\"username\" value=\"\"></p>\n",
    "    <p><b>Сколько вам лет?</b> <input type=\"text\" name=\"age\" value=\"\"></p>\n",
    "    <p><b>Чем вы любите заниматься?</b></p>\n",
    "    <input type=\"checkbox\" name=\"hobby\" value=\"cat\">Спать<Br>\n",
    "    <input type=\"checkbox\" name=\"hobby\" value=\"book\">Читать книжки<Br>\n",
    "    <input type=\"checkbox\" name=\"hobby\" value=\"prog\">Программировать<Br>\n",
    "    <input type=\"checkbox\" name=\"hobby\" value=\"game\">Гамать<Br>\n",
    "    <input type=\"checkbox\" name=\"hobby\" value=\"write\">Писать научные статьи<Br>\n",
    "    <input type=\"checkbox\" name=\"hobby\" value=\"exper\">Придумывать лингвистические эксперименты<Br>\n",
    "    <input type=\"checkbox\" name=\"hobby\" value=\"food\">Кушать вкусняшки<Br>\n",
    "    <p><input type=\"submit\"></p>\n",
    "    </form>\n",
    "    </body>\n",
    "    </html>\n",
    "    \n",
    "Поподробнее про формы можно почитать [тут](https://www.w3schools.com/html/html_forms.asp). Ну и вообще на этом сайте есть тьюториалы по HTML, CSS и Bootstrap на все случаи жизни. :)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Percent encoding\n",
    "\n",
    "Мы уже говорили об особом способе кодирования символов в ссылках, когда обсуждали проект. Напомню, он называется percent encoding (потому что многие символы кодируются с использованием знака %), или URL encoding и подробно описан [вот тут](https://en.wikipedia.org/wiki/Percent-encoding). А [вот тут](https://www.w3schools.com/tags/ref_urlencode.asp) лежит таблица кодировки ASCII-символов. Есть специальные сайты, которые позволяют кодировать/декодировать текст с помощью percent encoding -- например, вот этот: https://www.url-encode-decode.com/ "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Задания\n",
    "\n",
    "Посмотреть, как работает поиск в гугле, яндексе, яндекс-картах и НКРЯ. Написать веб-страницу, с помощью которой можно искать слово там, там, там или там. \n",
    "\n",
    "(Если будем успевать)\n",
    "Посмотреть, какие запросы отправляет какой-нибудь поисковик, когда ищет подсказки к введённым пользователем буквам, какие ответы он получает (там будет json), и написать программу, которая сама будет выдавать такие подсказки."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    ""
   ]
  }
 ],
 "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.6.0"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}