{"draftJsState":{"blocks":[{"data":{"image":{"id":"63206d2da32fa40d99e23707"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"1uhl6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сегодня будем отправлять форму заявки на вступление в клуб с сайта на сервер и там обрабатывать. Разберемся, каким образом браузер может обмениваться данными с сервером.","type":"unstyled","key":"f8g5j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что было на прошлом занятии?","type":"header-two","key":"9k1a1"},{"data":{"embedData":{"type":"yandex-zen-publication","publicationId":"6313d5b44d24572a582d70b2","originalUrl":"https://zen.yandex.ru/media/id/62d57767cc38491671976547/6313d5b44d24572a582d70b2","publisherId":"62d57767cc38491671976547","publisherName":"Обучение веб-программированию с нуля бесплатно","title":"Урок 14. Знакомимся с PHP, Docker, NginX. Обучение веб-программированию с нуля.","publishTime":1663003282194,"isPublisherVerified":false,"image":{"id":"631f3be89db1bb3cff99c23b","groupId":5233237,"imageName":"pub_6313d5b44d24572a582d70b2_631f3be89db1bb3cff99c23b","namespace":"zen_doc","meta":{"mainColor":"#F8F8F8","origFormat":"PNG"},"sizes":{"orig":{"width":2032,"height":1167},"scale_360":{"width":360,"height":207},"scale_540":{"width":540,"height":310},"scale_600":{"width":600,"height":345},"scale_720":{"width":720,"height":414},"scale_1200":{"width":1200,"height":689},"scale_2400":{"width":2032,"height":1167}}},"badSeoLink":"true"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:embed","key":"216lb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Разобрались, что такое виртуализация и контейнеры","type":"unordered-list-item","key":"9akud"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Разобрались в общих чертах, как обрабатываются запросы браузера на сервере","type":"unordered-list-item","key":"mc6l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Разобрались и настроили веб-сервер NginX","type":"unordered-list-item","key":"8edil"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создали контейнеры NginX и php в Docker","type":"unordered-list-item","key":"9rhjo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подняли у себя на компьютере локально Docker-сервис","type":"unordered-list-item","key":"9skau"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Познакомились с языком программирования php","type":"unordered-list-item","key":"eenks"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что будет на этом уроке?","type":"header-two","key":"4lbvn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На этом уроке мы:","type":"unstyled","key":"d35iv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Соберем результаты прошлых уроков в один проект","type":"unordered-list-item","key":"cbf9a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Разберемся, каким образом можно отправлять формы с сайта на сервер","type":"unordered-list-item","key":"fdqqd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Разберемся, как обрабатывать на сервере данные, отправленные с браузера","type":"unordered-list-item","key":"532f3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если в процессе изучения что-то не понятно - не стесняйтесь спрашивать нас и других учеников в нашей открытой группе в телеграм:","type":"unstyled","key":"2c462"},{"data":{"embedData":{"type":"external","host":"t.me","image":{"id":"631f8ece4a31010269386733","namespace":"zen_brief_embed","url_template":"https://avatars.dzeninfra.ru/get-zen_brief_embed/5279460/pub_631f8246c0fd3557a7bea7b6_631f8ece4a31010269386733/{size}","meta":{"main_color":"#28A0E0"},"size":{"width":128,"height":128},"width":128,"height":128,"link":"https://avatars.dzeninfra.ru/get-zen_brief_embed/5279460/pub_631f8246c0fd3557a7bea7b6_631f8ece4a31010269386733/smart_crop_156x156","src":"https://avatars.dzeninfra.ru/get-zen_brief_embed/5279460/pub_631f8246c0fd3557a7bea7b6_631f8ece4a31010269386733/smart_crop_156x156","main_color":"#28A0E0","mainColor":"#28A0E0"},"src":"https://t.me/srmt22_webclub","title":"SRMT22 Открытый клуб веб-разработки"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:embed","key":"15aeg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для тех, кто только к нам присоединился, ссылка на все уроки:","type":"unstyled","key":"adk9k"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":39,"offset":0}],"inlineStyleRanges":[],"text":"https://zen.yandex.ru/srmt22_webclasses","type":"unstyled","key":"17o4s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И ссылка на самый первый урок:","type":"unstyled","key":"6ft9b"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":74,"offset":0}],"inlineStyleRanges":[],"text":"https://dzen.ru/media/id/62d57767cc38491671976547/62d577ce6a8de461fac89852","type":"unstyled","key":"94fd3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Собираем проекты в один.","type":"header-two","key":"51uqe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создайте папку нового проекта. У меня это будет srmt22-lsn15.","type":"unstyled","key":"5gppr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"За основу возьмем проект с Урока 14.","type":"unstyled","key":"7e54r"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":65,"offset":0}],"inlineStyleRanges":[],"text":"https://github.com/madmaker/srmt22-lsn14/archive/refs/tags/v1.zip","type":"unstyled","key":"18d2g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Качайте, распаковывайте и копируйте все файлы в папку нового проекта.","type":"unstyled","key":"flpuo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь скачайте проект с урока 13, распакуйте и все содержимое сложить в папку www в новом проекте.","type":"unstyled","key":"5nhis"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":65,"offset":0}],"inlineStyleRanges":[],"text":"https://github.com/madmaker/srmt22-lsn13/archive/refs/tags/v1.zip","type":"unstyled","key":"928j3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь откройте папку нового проекта в IDE (phpstorm, vscode или другая).","type":"unstyled","key":"d6u63"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"У нас получилась вот такая структура папок:","type":"unstyled","key":"a2tgc"},{"data":{"image":{"id":"631f920664f39e46317e5a2b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"df2ob"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте удалим лишние файлы:","type":"unstyled","key":"fthv4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/www/README.md - это файл от проекта lsn13. Такой же уже есть в корне от lsn14","type":"unstyled","key":"csou"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/www/.gitignore - это файл от проекта lsn13. Такой же уже есть в корне от lsn14","type":"unstyled","key":"folhs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/www/jsconfig.json - этот файл сделал vscode автоматически. Он не нужен.","type":"unstyled","key":"b710a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Папку scss из /www/scss переместите на уровень выше - в корень. Будет /scss","type":"unstyled","key":"cgts8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Файл /www/index.php удалите.","type":"unstyled","key":"7vrk6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Файл /www/index.html переименуйте в /www/index.php","type":"unstyled","key":"3e3d1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"О да, в php-сценариях может быть обычный html. Php-интерпретатор его не будет обрабатывать и выведет как есть.","type":"blockquote","key":"ba477"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Получилось вот так:","type":"unstyled","key":"65ps7"},{"data":{"image":{"id":"631f9a9c5bf88a6f0eadaaa3"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"j7j1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь время поднять контейнеры.","type":"unstyled","key":"2gs9o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Я, когда писал эту статью, наткнулся на такой момент: у меня были запущены контейнеры с прошлого урока и новые при запуске выдавали ошибку. Собственно, нужно старые погасить, потому что они используют те же порты. Сейчас покажу, как это делать.","type":"blockquote","key":"9hf2n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как погасить контейнеры Docker","type":"header-three","key":"d8r9o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Открываем Терминал","type":"unordered-list-item","key":"98nt5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":15,"style":"BOLD"}],"text":"Вводим команду docker container ls - эта команда выведет список запущенных контейнеров.","type":"unordered-list-item","key":"1ljjs"},{"data":{"image":{"id":"631f9cc2188a4a1dadf3092d"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"bjopt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Докер выведет список запущенных контейнеров. Если список пуст, то просто пропустите этот шаг. ","type":"unstyled","key":"79d41"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Container ID - это идентификатор контейнера. Нам нужно их погасить.","type":"unstyled","key":"64al4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Копируем ID первого контейнера и выполняем следующую команду:","type":"unstyled","key":"1gfpn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"docker container stop XXXXXX","type":"blockquote","key":"etcp0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"XXXXXX - ID вашего контейнера.","type":"unstyled","key":"2nspo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"У меня было так: docker container stop 9cc9e3fe2f45","type":"unstyled","key":"90o49"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В ответ выведет номер остановленного контейнера:","type":"unstyled","key":"eubsr"},{"data":{"image":{"id":"631f9d6480057c3062a03c0a"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"egvm9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Повторяем все, пока список контейнеров не станет пустым.","type":"unstyled","key":"35bto"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Кстати, последние команды в терминале можно найти, нажав на клавишу \"вверх\" на клавиатуре.","type":"unstyled","key":"aguqe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Дальше по алгоритму:","type":"unstyled","key":"eq2n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"docker container ls","type":"unordered-list-item","key":"b0b52"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Копируем ID очередного контейнера","type":"unordered-list-item","key":"24esm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"docker container stop XXXXX","type":"unordered-list-item","key":"aa1g9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Повторяем, пока список запущенных контейнеров не будет пустым.","type":"unordered-list-item","key":"a4h1u"},{"data":{"image":{"id":"631f9de680057c3062a07fdc"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"260g4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Еще один нюанс: у нас в прошлом уроке был создан контейнер с именем nginx. В этом проекте мы будем создавать такой контейнер и, разумеется получим ошибку. Поэтому контейнер с именем nginx нужно удалить.","type":"unstyled","key":"bu88f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выполните команду:","type":"unstyled","key":"7j9s0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"docker container rm nginx","type":"blockquote","key":"8gerv"},{"data":{"image":{"id":"631f9e6b1baabb19f6c733ff"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"eq45q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Контейнер будет удален.","type":"unstyled","key":"6s1o5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь поднимаем контейнеры нашего проекта.","type":"unstyled","key":"1il4l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В терминале в IDE выполните следующую команду:","type":"unstyled","key":"2s42n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"docker-compose up","type":"blockquote","key":"8qpfm"},{"data":{"image":{"id":"631f9b201baabb19f6c54995"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"3aru4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Результат запуска будет вроде такого:","type":"unstyled","key":"cmmhq"},{"data":{"image":{"id":"631f9eaad391cf4363491e10"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"6vvjl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Проверьте результат в Chrome: откройте адрес или 127.0.0.1, или localhost","type":"unstyled","key":"2im17"},{"data":{"image":{"id":"631f9f5a73611450873808c2"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"60l7b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Отправляем веб-форму на сервер","type":"header-two","key":"3l5hu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итак, когда мы нажимаем на кнопку \"Вступить в клуб бесплатно\", у нас открывается диалог с веб-формой, которую мы делали.","type":"unstyled","key":"2t3it"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда пользователь нажмет в форме кнопку \"Поехали\", нужно эту форму отправить на сервер. Давайте разбираться, как это делать.","type":"unstyled","key":"2ib5v"},{"data":{"image":{"id":"631f9fde5bf88a6f0eb0c6cb"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"cll92"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Отправка формы без JS штатным путем.","type":"header-three","key":"citj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"У нас в 232-й строке файла index.php находится html-код формы.","type":"unstyled","key":"2l86b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"dp0lg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":9,"style":"BOLD"},{"length":6,"offset":33,"style":"BOLD"}],"text":"Для тега form существует атрибут action, который задает адрес, на который будет отправлена форма.","type":"unstyled","key":"3gst3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Изменим код таким образом:","type":"unstyled","key":"bhcjc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"4hjs0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Этот код говорит о том, что форма будет отправляться к скрипту enterToClubFormHandler.php.","type":"unstyled","key":"em1p0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обновите страницу в Chrome и попробуйте заполнить форму и нажать \"Поехали\" - таким образом вы отправите форму.","type":"unstyled","key":"cp7ks"},{"data":{"image":{"id":"631fa1295bf88a6f0eb16de2"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"f3k05"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поздравляю, форма успешно отправилась на сервер. Ошибка 404 говорит о том, что скрипт enterToClubFormHandler.php на сервере не найден.","type":"unstyled","key":"mg9p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И, кстати, все отработало в точности, как мы описывали в nginx.conf на прошлом уроке - если файл не найден, то выводится ошибка 404.","type":"blockquote","key":"5picq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":29,"style":"BOLD"},{"length":3,"offset":64,"style":"BOLD"}],"text":"Теперь давайте создадим файл enterToClubFormHandler.php в папке www.","type":"unstyled","key":"4r6f7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Нажмите в браузере \"Назад\", обновите страницу и попробуйте отправить форму заново.","type":"unstyled","key":"afelb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь результат будет другим - пустая страница. Опять же, все верно: php-скрипт enterToClubFormHandler.php теперь есть, но он ничего не делает и ничего не выводит.","type":"unstyled","key":"7rc6f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте в скрипт, обрабатывающий форму, напишем следующий код:","type":"unstyled","key":"d9d4a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"ejv0d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":94,"style":"BOLD"}],"text":"Когда на сервер приходят данные с помощью POST, они сохраняются в php в массивом в переменной $_POST.","type":"unstyled","key":"4nj9v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":16,"style":"BOLD"},{"length":5,"offset":66,"style":"BOLD"},{"length":6,"offset":75,"style":"BOLD"}],"text":"Поэтому в файле enterToClubFormHandler.php нам нужно изменить код $_GET на $_POST","type":"unstyled","key":"68omv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"print_r($_POST);","type":"blockquote","key":"9dl33"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь открываем заново главную страницу нашего сайта и заново отправляем форму.","type":"unstyled","key":"2r33c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"По поводу возврата на предыдущую страницу стоит сказать пару слов:","type":"blockquote","key":"dnuvm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если вы жмете в браузере кнопку \"Назад\", то страница открывается в старой версии - она не загружается с веб-сервера заново. Поэтому, чтобы увидеть изменения в коде, ее нужно принудительно обновить.","type":"blockquote","key":"34k36"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если вы открываете страницу не кнопками \"назад-вперед\" в браузере, то она должна прогрузиться с сервера заново. Но, если этого не произойдет, то попробуйте обновить страницу.","type":"blockquote","key":"e64r2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Бывает такая история, что страницу обновляешь, а код будто бы старый: старые стили, не отрабатывает новый код JS. Для этого нужно обновить страницу со сбросом кэша: на маке это CMD+Shift+R, на Windows это CTRL+F5.","type":"blockquote","key":"7o9od"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Смотрим результат в браузере:","type":"unstyled","key":"40g9n"},{"data":{"image":{"id":"6320476f02bd3d0375a953b1"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"cmcip"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":80,"style":"BOLD"},{"length":7,"offset":98,"style":"BOLD"}],"text":"Обратите внимание, что в адресной строке все чисто - поля формы были переданы в POST. А в массиве $_POST на сервере все появилось и отобразилось на экран.","type":"unstyled","key":"46ef"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Передача данных на сервер с помощью Ajax","type":"header-three","key":"fg00j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Два способа сверху всем хороши кроме того, что браузер открывает страницу, обрабатывающую запрос, а не остается на той же странице, говорит что-то вроде \"спасибо за ваш интерес\".","type":"unstyled","key":"3mcro"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы отправлять данные на сервер без перезагрузки страницы, придумали Ajax.","type":"unstyled","key":"fei4k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":48,"style":"BOLD"},{"length":7,"offset":59,"style":"BOLD"}],"text":"Вот здесь уже мы увидим более четкое разделение Frontend и Backend.","type":"unstyled","key":"226i4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы отправить данные со страницы без перезагрузки, придется снова окунуться в Javascript - ведь код на стороне браузера пишется на нем.","type":"unstyled","key":"1fkdg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"А серверная часть на php уже примет наш запрос, обработает и выдаст браузеру ответ.","type":"unstyled","key":"5lrmi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ответ сервера обработает Javascript и сделает определенные действия, как мы напишем.","type":"unstyled","key":"917el"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поехали.","type":"unstyled","key":"691jc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":57,"style":"BOLD"}],"text":"В index.php к тегу формы нужно присвоить ID. Назовем его joinToClubForm","type":"unstyled","key":"bld1c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"b711l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":67,"style":"BOLD"},{"length":26,"offset":98,"style":"BOLD"},{"length":26,"offset":155,"style":"BOLD"},{"length":1,"offset":97,"style":"ITALIC"}],"text":"И, чтобы быть точнее в английском языке, давайте в action поменяем enterToClubFormHandler.php на joinToClubFormHandler.php и сам php-скрипт переименуем в joinToClubFormHandler.php .","type":"unstyled","key":"2i0b7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На стороне html все - больше ничего не нужно делать.","type":"unstyled","key":"4d67f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В JS нас ждут серьезные изменения. В самый конец файла modals.js пишем:","type":"unstyled","key":"710je"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"document.getElementById(\"joinToClubForm\").addEventListener(\"submit\",sendJoinToClubFormHandler);//Обработчик события отправки формы\n\nfunction sendJoinToClubFormHandler (e) {//Функция обработки отправки формы\n e.preventDefault();//Останавливаем действие по умолчанию, то есть отправку формы на сервер.\n\n let request = new XMLHttpRequest();//Создаем объект для Ajax-запроса\n request.open(this.method, this.action, true);//Инициализируем запрос\n\n request.onreadystatechange = function() {//Пишем обработчик ответа сервера\n if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {//Если статус ответа сервера успешный, то выполнится код внутри фигурных скобок\n console.log(this);\n }\n }\n\n let data = new FormData(this);//Записываем в переменную data данные формы.\n\n request.send(data);//Отправляем запрос на сервер\n}","type":"blockquote","key":"1g4p4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":95,"offset":0,"style":"BOLD"}],"text":"document.getElementById(\"joinToClubForm\").addEventListener(\"submit\",sendJoinToClubFormHandler);","type":"unstyled","key":"24ueg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":93,"style":"BOLD"}],"text":"Мы уже ранее перехватывали события на странице. Здесь все точно также: перехватываем событие submit для нашей формы. Это событие отправки формы. При событии submit дальнейшая работа будет отправлена функции sendJoinToClubFormHandler()","type":"unstyled","key":"bghfm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"По событиям есть документация. Рекомендую ознакомиться детально:","type":"unstyled","key":"ds0qb"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":54,"offset":0}],"inlineStyleRanges":[],"text":"https://www.w3schools.com/tags/ref_eventattributes.asp","type":"unstyled","key":"cd7ur"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":0,"style":"BOLD"}],"text":"function sendJoinToClubFormHandler (e) {","type":"unstyled","key":"ffu9j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Функция, которую мы сделали для обработки события отправки формы. В нее передается аргумент e - это событие отправки формы.","type":"unstyled","key":"9psgv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"e.preventDefault();","type":"unstyled","key":"e6eq3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Первое действие, которое выполняется в нашей функции - отмена действий отправки формы по умолчанию. То есть не будет открываться страница joinToClubFormHandler.php - браузер на нее переключаться не будет.","type":"unstyled","key":"3gv4b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":18,"style":"BOLD"},{"length":16,"offset":116,"style":"BOLD"}],"text":"Как это работает: e - это объект события, который мы приняли в функцию аргументом. Отправлен он был автоматически с addEventListener.","type":"unstyled","key":"hed6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"},{"length":6,"offset":46,"style":"BOLD"}],"text":"preventDefault() - метод, доступный в объекте event.","type":"unstyled","key":"8f1b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":0,"style":"BOLD"}],"text":"let request = new XMLHttpRequest();","type":"unstyled","key":"4fudq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":33,"style":"BOLD"},{"length":14,"offset":80,"style":"BOLD"}],"text":"Этим кодом мы создаем переменную request и в нее записываем новый объект класса XMLHttpRequest. Этот класс предоставляет нам функциональность обмена данными с сервером.","type":"unstyled","key":"2sti0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"О работе с переменными, о классах мы поговорим на следующих уроках. На данный момент нужно знать, что переменная объявляется ключевым словом var или let, экземпляр класса создается ключевым словом new.","type":"blockquote","key":"1q420"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":45,"offset":0,"style":"BOLD"}],"text":"request.open(this.method, this.action, true);","type":"unstyled","key":"2v3ao"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Так мы инициализируем наш запрос. Или открываем его. При инициализации нужно указать:","type":"unstyled","key":"4jiq1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"метод передачи данных (POST), ","type":"unordered-list-item","key":"a21fg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"url скрипта, на который будет отправлен запрос ","type":"unordered-list-item","key":"a4sn6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"и выбрать будет ли запрос выполняться синхронно или асинхронно.","type":"unordered-list-item","key":"4vi7f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте теперь по порядку разбираться.","type":"unstyled","key":"bia4r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"}],"text":"this","type":"unstyled","key":"14t9v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это ключевое слово при работе с объектами. В нашем случае объект, с которым мы работаем - наша форма. ","type":"unstyled","key":"fopnk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"this.method ","type":"unstyled","key":"6s8t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":32,"style":"BOLD"},{"length":4,"offset":55,"style":"BOLD"}],"text":"Хранит в себе значение атрибута method формы, а именно POST.","type":"unstyled","key":"d0q41"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"this.action","type":"unstyled","key":"rkpe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":55,"style":"BOLD"}],"text":"Хранит в себе значение атрибута action формы, а именно joinToClubFormHandler.php","type":"unstyled","key":"7rh7n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"Синхронно/асинхронно","type":"unstyled","key":"2tg1l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":37,"style":"BOLD"}],"text":"Мы можем отправлять запрос на сервер синхронно: то есть отправили запрос, дождались, пока сервер обработал его, дал ответ и дальше мы уже продолжаем работу нашего JS-скрипта.","type":"unstyled","key":"40hd1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":17,"style":"BOLD"}],"text":"Можем отправлять асинхронно: то есть отправили запрос и работаем дальше, а когда сервер пришлет назад ответ, мы уже этот ответ обработаем.","type":"unstyled","key":"d4q5t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"true/false","type":"unstyled","key":"dc8p0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":46,"style":"BOLD"},{"length":5,"offset":69,"style":"BOLD"},{"length":1,"offset":75,"style":"BOLD"}],"text":"Соответственно, если хотим асинхронно - пишем true, если синхронно - false. Мы хотим асинхронно.","type":"unstyled","key":"466lf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"dg26h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"request.onreadystatechange = function() {\n if (this.readyState === XMLHttpRequest.DONE && this.status === 200) { console.log(this);\n }\n}","type":"blockquote","key":"dkd5v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Здесь мы описываем как раз обработчик ответа от сервера.","type":"unstyled","key":"9n73o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"request - объект нашего запроса.","type":"unstyled","key":"64v55"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"onreadystatechange - обработчик события, когда на сервере запрос обработается.","type":"unstyled","key":"ccqtj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На это событие мы вешаем функцию, тело которой будет выполняться.","type":"unstyled","key":"94l92"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":69,"offset":0,"style":"BOLD"}],"text":"if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {","type":"unstyled","key":"5r6ra"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":48,"style":"BOLD"},{"length":20,"offset":89,"style":"BOLD"},{"length":11,"offset":133,"style":"BOLD"}],"text":"Условие, если текущее состояние ответа сервера (this.readyState) соответствует состоянию XMLHttpRequest.DONE и сервер вернул статус (this.status) 200 (200 - это успешная обработка, 500 - это ошибка сервера, 404 - это если страница не найдена. Кодов ответов много. Нас сейчас интересует либо успех 200, либо все остальное).","type":"unstyled","key":"9g97r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если это условие соответствует действительности, то будет выполнен код внутри фигурных скобок.","type":"unstyled","key":"e9q7k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"console.log(this);","type":"unstyled","key":"19fl4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В консоль браузера будет возвращен объект, в котором вся информация о запросе. Мы узнаем, что ответил сервер.","type":"unstyled","key":"3l3c5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":0,"style":"BOLD"}],"text":"let data = new FormData(this);","type":"unstyled","key":"5kbdg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":25,"style":"BOLD"},{"length":8,"offset":143,"style":"BOLD"},{"length":4,"offset":194,"style":"BOLD"}],"text":"Создаем новую переменную data и записываем в нее данные, которые пользователь ввел в форму. Делаем это путем создания нового экземпляра класса FormData, в конструктор которого передаем аргумент this - это объект нашей формы.","type":"unstyled","key":"diqe5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мы, когда будем подробнее разбираться с переменными, классами, областями видимости и контекстом, разберемся, что такое this и как оно работает. Важно понимать, что внутри функции sendJoinToClubFormHandler, которая была вызвана событием отправки формы, this - это объект формы, а события запроса request при ответе сервера, this - это объект запроса.","type":"blockquote","key":"eccbe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"request.send(data);","type":"unstyled","key":"b79ia"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":15,"style":"BOLD"},{"length":7,"offset":30,"style":"BOLD"}],"text":"Вызываем метод send() объекта request (наш запрос) и передаем ему в качестве аргумента переменную data - в ней хранятся данные с заполненной формы.","type":"unstyled","key":"31u65"},{"data":{"image":{"id":"632068838c4085232cfdbe67"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"dm3d7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот такой код получился.","type":"unstyled","key":"6sp5f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте теперь нашу страницу обновим в браузере со сбросом кэша (CTRL+F5 в Windows, CMD+Shift+R в Mac).","type":"unstyled","key":"7bpp9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь откроем инструменты разработчика (правая панель) и там откроем вкладку \"Консоль\".","type":"unstyled","key":"d7ara"},{"data":{"image":{"id":"632068cec6da1c4bb02fbed8"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"71i8k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Настало время попробовать отправить форму и посмотреть на результат.","type":"unstyled","key":"55nij"},{"data":{"image":{"id":"6320692edc68687c9a840775"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"cr0k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":86,"style":"BOLD"}],"text":"Браузер отправил запрос, сервер его обработал и ответил нам. После чего отработал код console.log(this);, который вывел в консоль информацию об объекте запроса.","type":"unstyled","key":"65bi5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Слева от текста XMLHttpRequest есть треугольник - нажмите на него, чтобы развернуть информацию о запросе.","type":"unstyled","key":"dg2p4"},{"data":{"image":{"id":"632069884a5cea67ec2756eb"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"32nh4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":81,"style":"BOLD"},{"length":13,"offset":213,"style":"BOLD"}],"text":"Мы видим все свойства, которые есть у этого объекта. Например, там есть свойство response - это тело ответа сервера. То есть, чтобы вывести в консоль не весь объект запроса, а только ответ сервера, можно написать this.response. Давайте это и сделаем.","type":"unstyled","key":"g24r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"},{"length":27,"offset":29,"style":"BOLD"}],"text":"console.log(this); меняем на console.log(this.response);","type":"unstyled","key":"3gha9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Заново обновляем страницу со сбросом кэша (CTRL+F5 в Windows, CMD+Shift+R в Mac) и отправляем форму.","type":"unstyled","key":"82der"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Смотрим результат в консоли.","type":"unstyled","key":"6gctd"},{"data":{"image":{"id":"63206a311b85b14aa9d0e938"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"bj8pc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это в точности то, что нам отвечал сервер, когда при отправке формы открывался php-скрипт обработки формы. А теперь мы не меняем страницу, а отправляем форму с помощью Ajax.","type":"unstyled","key":"c1qbh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Отлично. С Ajax познакомились. Как отправлять данные с браузера на сервер посмотрели.","type":"unstyled","key":"49hte"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Скорее всего будут вопросы. Не стесняйтесь спрашивать в телеграм-группе:","type":"unstyled","key":"36ob8"},{"data":{"embedData":{"type":"external","host":"t.me","image":{"id":"63206a908c4085232cff915e","namespace":"zen_brief_embed","url_template":"https://avatars.dzeninfra.ru/get-zen_brief_embed/5282245/pub_631f8246c0fd3557a7bea7b6_63206a908c4085232cff915e/{size}","meta":{"main_color":"#28A0E0"},"size":{"width":128,"height":128},"width":128,"height":128,"link":"https://avatars.dzeninfra.ru/get-zen_brief_embed/5282245/pub_631f8246c0fd3557a7bea7b6_63206a908c4085232cff915e/smart_crop_156x156","src":"https://avatars.dzeninfra.ru/get-zen_brief_embed/5282245/pub_631f8246c0fd3557a7bea7b6_63206a908c4085232cff915e/smart_crop_156x156","main_color":"#28A0E0","mainColor":"#28A0E0"},"src":"https://t.me/srmt22_webclub","title":"SRMT22 Открытый клуб веб-разработки"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:embed","key":"a3bvv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Доработаем код на php","type":"header-three","key":"a67t4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":31,"style":"BOLD"}],"text":"Давайте немного изменим код на PHP.","type":"unstyled","key":"c1g07"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"У нас есть массив $_POST - в нем хранятся данные, переданные скрипту с помощью POST.","type":"unstyled","key":"eptlg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В них есть \"phone\" - телефон из нашей формы.","type":"unstyled","key":"8iugc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"print_r() просто выводит на экран все содержимое массива вместе с ключами и значениями.","type":"unstyled","key":"411m4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"То есть phone - это ключ, а номер телефона внутри - это значение.","type":"unstyled","key":"ev77n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы достать только phone, нужно написать $_POST[\"phone\"].","type":"unstyled","key":"877sd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте заменим наш код joinToClubFormHandler.php на:","type":"unstyled","key":"a1qva"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"