Lessons/Веб-запросы и формы/8. Запросы и формы.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>\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",
    "Посмотреть, как работает поиск в Google'e, Яндексе и Яндекс.Картах. Написать веб-страницу, с помощью которой можно искать слово там, там или там. Подсказка: сначала надо погуглить, что нужно прописать в \"action\", чтобы сделать редирект из формы на какую-то внешнюю веб-страницу.\n",
    "\n",
    "**Бонусное задание**\n",
    "\n",
    "Посмотреть, какие запросы отправляет какой-нибудь поисковик, когда ищет подсказки к введённым пользователем буквам, какие ответы он получает (там будет json), и написать программу, которая сама будет выдавать такие подсказки."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Подсказка\n",
    "\n",
    "Самая простая форма, из которой напрямую делается редирект на какой-нибудь сайт -- например, поисковик -- будет выглядеть вот так. В `action` пишем адрес сайта, а в кажестве имени тега `<input>` указываем то, как называется необходимый get-параметр. В Google'e параметр, через который передается поисковый запрос, называется `q`, а в Яндексе и Яндекс.Картах -- `text`."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "    <html>\n",
    "        <head>\n",
    "           <meta charset=\"utf-8\">\n",
    "           <title>Что ищем?</title>\n",
    "        </head>\n",
    "        <body>\n",
    "           <form action=\"https://www.google.com/search\">\n",
    "              <p><b>Введите поисковый запрос</b></p>\n",
    "              <input type=\"text\" name=\"q\">\n",
    "              <p><input type=\"submit\"></p>\n",
    "           </form>\n",
    "         </body>\n",
    "     </html>\n"
   ]
  }
 ],
 "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.6.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 1
}