Друзі, якщо ви бажаєте пройти навчання за певною ІТ-спеціальністю і вірите в свою удачу, скоріш реєструйтеся на перший великий розіграш з LiveOnline навчання від ITVDN! Що таке LiveOnline Це найбільш ефективний формат навчання! Онлайн уроки тричі на тиждень у Zoom, домашні завдання з перевіркою, курсові проєкти, багато спілкування з ментором, асистентом ментора і одногрупниками. Додатково ви отримуєте записи усіх уроків і добірку відео курсів від ITVDN, сертифікати і персональну допомогу у працевлаштуванні. 24 жовтня ви можете виграти знижку 50% на навчання. Це дозволить вам зробити старт в ІТ і отримати свій перший job-офер у 2024 році з максимальною вигодою. Знижки будуть на такі курси: FrontEnd Developer Python Developer C#/.NET Developer Java Developer FullStack Node.js Developer Manual QA. Тестування ПЗ Буде 12 переможців – по два у кожному з напрямків. Ці 12 осіб зможуть пройти повне навчання за обраною спеціальністю за половину вартості. Переможці зможуть заощадити від 261 до 483 USD в залежності від обраної спеціальності! Як взяти участь у розіграші? Щоб стати учасником розіграшу, необхідно заповнити реєстраційну форму. Заявки приймаються до 12:00 24 жовтня. Розіграш відбудеться 24 жовтня о 16:00 на YouTube-каналі CodeUA. У виборі переможця нам допоможе онлайн-сервіс Random.org. Посилання на онлайн трансляцію ми надішлемо вам на email, вказаний у реєстраційній формі. Знижка на навчання дійсна у жовтні, листопаді та грудні. Обирайте курс і реєструйтеся! FrontEnd Developer Тривалість навчання — 5 місяців (124 години з тренером) Ви вивчите: мови HTML, CSS і JavaScript, систему управління версіями Git, один з фреймворків на вибір – Angular (+ мова TypeScript) або React. Додатково ви отримаєте доступ до 52 відео курсів за спеціальністю FrontEnd Developer на ITVDN на 7 місяців, а також ключі на професійний софт від JetBrains. Курсові проєкти та допомогу в працевлаштуванні. Переможці зможуть заощадити 410 USD. Python Developer Тривалість навчання – 5 місяців (110 годин із тренером). Ви вивчите: мову Python з нуля до поглибленого рівня, систему управління версіями Git, СУБД PostgreSQL та фреймворк Django. Додатково ви отримаєте доступ до 24 відео курсів за спеціальністю Python Developer на ITVDN на 6 місяців, а також ключі на професійний софт від JetBrains. Курсові проєкти та допомогу в працевлаштуванні. Переможці зможуть заощадити 357 USD. Java Developer Тривалість навчання – 5 місяців (128 годин із тренером). Ви вивчите: мову Java з нуля до поглибленого рівня, систему управління версіями Git, СУБД MySQL, технології JDBC & Hibernate, Web-services, основи фреймворку Spring. Додатково ви отримаєте доступ до 32 відео курсів за спеціальністю Java Developer на ITVDN на 7 місяців, а також ключі на професійний софт від JetBrains. Курсові проєкти та допомогу в працевлаштуванні. Переможці зможуть заощадити 390 USD. FullStack Node.js Developer Тривалість навчання – 6 місяців (146 годин із тренером). Ви вивчите: мови верстання HTML & CSS, мову програмування JavaScript, систему управління версіями Git, фреймворк React, СУБД MySQL, фреймворк Node.js. Додатково ви отримаєте доступ до 13 відео курсів від ITVDN, а також ключі на професійний софт від JetBrains. Курсові проєкти та допомогу в працевлаштуванні. Переможці зможуть заощадити 483 USD. C#/.NET Developer Тривалість навчання – 5.5 місяців (138 годин із тренером). Ви вивчите: мову C# з нуля до поглибленого рівня, систему управління версіями Git, мову запитів SQL, Entity Framework Core, ASP.NET Core. Ви отримаєте доступ до 57 відео курсів за спеціальністю C#/.NET Developer на ITVDN на 8 місяців. Курсові проєкти та допомогу в працевлаштуванні. Переможці зможуть заощадити 420 USD. QA. Тестування ПЗ Тривалість навчання – 3 місяці (78 годин із тренером). Ви вивчите основи проєкту в ІТ, мануальне тестування, бази даних та SQL, а також отримаєте знання з HTML & CSS, Git, CI/CD/CD, mobile, веб та API тестування. Ви отримаєте доступ до 33 відео курсів за спеціальністю Quality Assurance на ITVDN на 8 місяців. Допомогу HR-фахівця у працевлаштуванні Переможці зможуть заощадити 261 USD. UPD: Переможці розіграшу: Python Developer Великов Олег Арещенко Дмитро Frontend Developer Назаренко Олеся Шинкаренко Ольга Manual QA. Тестування ПЗ Нікітюк Людмила Павлюк Анна FullStack Node.js Developer Білоус Дмитро Stepaniuk Dmytro Java Developer  Хомич Катерина Periazev Dmitrii  C#/.NET Developer Бугрій Олег Денисенко Євген Запис розіграшу: https://www.youtube.com/watch?v=zIb8V8i2vyY

Якщо ви давно мріяли навчитися професійно верстати сайти, створювати ефектні та адаптивні вебсторінки, які мають чудовий вигляд на будь-якому пристрої, але вам не вистачало практичного досвіду — саме час діяти! На ITVDN опублікований «Практичний курс з верстки лендінгу», який дозволить вам опанувати найпопулярніші сучасні інструменти веброзробки всього за 10 днів. Забудьте про нудні лекції та теорію без застосування! Наш курс — це суцільна практика, де кожне заняття наближатиме вас до створення професійних проєктів. Від налаштування середовища до публікації вашого першого сайту на GitHub Pages — усе це стане вашою реальністю вже зовсім скоро. Що вас чекає? Ви відкриєте для себе світ HTML, CSS, та сучасний препроцесор SASS, який зробить ваш код чистим і професійним. Вдосконалите навички створення адаптивних макетів за допомогою Flexbox та Grid, навчитесь використовувати популярні JavaScript-бібліотеки, щоб оживити сторінку слайдерами, модальними вікнами, формами та навіть корзиною для покупок. Курс охоплює такі теми: Встановлення та налаштування IDE. Робота з Git та GitHub. Управління пакетами npm та Node.js. Огляд популярних CSS-фреймворків (Bootstrap, Tailwind CSS, Bulma, Foundation). Створення файлової структури та налаштування проєкту з використанням SASS та Gulp. Техніки верстки header. Використання Flexbox та Grid для адаптивних макетів. Робота з іконками Font Awesome. Створення адаптивних слайдерів з Glide.js. Робота з формами та модальними вікнами. Створення динамічних елементів з використанням JavaScript. Цей курс — не просто знання, це ваші нові можливості та перспективи в IT-сфері. Вже після його завершення ви зможете з легкістю братися за реальні комерційні замовлення, створюючи лендінги, які будуть приносити клієнтам результат. Автор курсу – Іноземець Анна, Frontend / Fullstack developer. Курс складається з 10 відеоуроків загальною тривалістю 5 години 13 хвилини. Структура курсу: Встановлення IDE, git, робота з npm та терміналом. Бібліотеки та фреймворки CSS. Створення базової структури проєкту; верстка header. Flexbox та його можливості, Font Awesome (icons), верстка I та ІІ секцій. Grid та його можливості, розгортання прихованих карток. Адаптивний слайдер за допомогою бібліотек. Перевикористання стилів та позиціювання. Створення модальних вікон на сторінці та робота з формами. Верстка footer. Публікування сторінки на github pages. Додаткове удосконалення сторінки. Чого ви навчитеся на даному курсі: Створювати адаптивні та інтерактивні вебсторінки. Використовувати SASS (SCSS) для написання чистого коду. Верстати складні макети за допомогою Flexbox та Grid. Інтегрувати JavaScript-бібліотеки та створювати інтерактивні елементи. Працювати з Git та публікувати сторінки на GitHub Pages. Реалізовувати форми з валідацією, модальні вікна та інтерактивні слайдери. Створювати динамічний контент за допомогою JavaScript. Попередні вимоги Цей курс буде надзвичайно корисний для тих, хто вже має початкові знання HTML, CSS та JavaScript і хоче значно підвищити свої навички для роботи в IT-індустрії. Дивіться перший урок у вільному доступі. Курс вже доступний на нашому сайті в повному обсязі – до кожного уроку є практичні завдання та опорний конспект. Якщо у вас є активна підписка, ви можете дивитися його прямо зараз.     

Здравствуйте! Сегодня у нас хорошая новость для всех, кто изучает FrontEnd разработку и при этом ориентируется на фреймворк Angular — на ITVDN вышел видео курс “Angular 11.0 Базовый”. Angular – это современный фреймворк от компании Google, написанный на TypeScript, который обеспечивает FrontEnd-разработчика удобными инструментами для создания веб-приложения, а также задает дизайн приложения и упорядоченную структуру кода. Использование Angular дает возможность строить интерактивные и динамические веб-приложения намного быстрее и с меньшим объемом написания кода, чем в случае применения стандартного JavaScript и HTML. Курс Angular 11.0 Базовый позволит вам получить базовые знания фреймворка и особенностей его использования, а также даст возможность закрепить эти знания на практике. На курсе будут рассмотрены такие ангуляр-элементы, как: компоненты, пайпы, сервисы, модули и др., которые являются неотъемлемой частью любого приложения на Angular. Вы узнаете, каким образом выстраивается структура файлов и кода приложения с различными вариантами. Рассмотрите использование базового набора инструментов для гибкой настройки работы с формами, серверными запросами/ответами, маршрутизацией сайта/приложения. Изучив материалы курса, вы сможете реализовать простой проект веб-приложения с настройкой маршрутизации, привязкой своего шаблона к каждой отдельной странице и своей логикой взаимодействия с пользователем. Также, вы сможете добавить в проект валидацию формы с разными сообщениями-подсказками и выводом полученных с сервера данных. При создании курса за основу были взяты версии Angular 10 и 11. Автор курса — Виталий Мазяр, FrontEnd разработчик. В своих видео уроках Виталий максимально доходчиво объясняет темы, которые помогут вам изучить базовые возможности мощного фреймворка Angular. Структура курса: Введение в Angular Начало работы с Angular. Синтаксис События в датабайндинг Директивы, пайпы Роль модулей Angular. Компоненты (часть 1) Компоненты (часть 2) Основы работы сервисов и роль в приложении Введение в HttpClient и RxJS Формы в Angular Маршрутизация Чему вы научитесь на данном курсе: Понимать роль и преимущества Angular в веб технологиях. Создавать простое приложение, которое будет состоять из компонентов, модулей и сервисов. Использовать компонентный подход для задания стилей. Добавлять в проект картинки и иконки. Понимать особенности Event binding-а, работу событий и ссылок. Использовать такие встроенные инструменты, как: директивы, пайпы, сервисы, формы. Понимать роль модулей и особенности модульной архитектуры приложения. Понимать и применять на практике взаимосвязь между компонентами в стилизации и передаче данных. Применять библиотеку RxJs для работы с асинхронными операциями. Применять модуль HTTPClientModule для взаимодействия с сервером. Настраивать маршрутизацию в приложении и передавать данные между страницами. Предварительные требования Курс рассчитан на тех, кто знает языки верстки HTML, CSS, а также языки программирования JavaScript и TypeScript. Смотрите первый урок в свободном доступе. Курс является завершенным, а значит, вы можете приступить к изучению тем по Angular в удобном для вас темпе! Также, предлагаем вам посмотреть бесплатный вебинар “Создание первого проекта на Angular” для знакомства с фреймворком и его базовыми возможностями. Курс входит в комплексные программы подготовки по специальностям FrontEnd Developer, Angular Developer.

Всем привет! У нас хорошая новость для FrontEnd разработчиков - в каталоге ITVDN появился практический курс "Создание сайта на Vue.js". Главная задача любого FrontEnd разработчика - оживить макет веб-сайта, вдохнув в него жизнь при помощи HTML, CSS, JavaScript и сопутствующих технологий. Однако, прогресс не стоит на месте - с каждым годом сфера разработки сайтов все больше и больше расширяется и преображается. Как следствие, количество требований к сайтам также увеличивается. Чтобы облегчить разработку девелоперам и реализовать все требования заказчика, создаются специальные фрейморки. Один из популярнейших - Vue.js. Чтобы раскрыть его потенциал и продемонстрировать основной инструментарий этого фреймворка, мы записали для вас практический курс “Создание сайта на Vue.js”. Что полезного вы можете извлечь из него? Курс “Создание сайта на Vue.js” поможет вам на практике изучить возможности платформы Vue.js, рассматривая процесс создания своего веб-проекта с нуля и постепенно добавляя в него модули и плагины. Данный фреймворк считается гибким, легким в освоении, легко интегрируемым со сторонними технологиями, с кратким и лаконичным синтаксисом, а также прекрасно подходящим для решения простых задач сайтостроения. Автор курса Максим Сластен - специалист, у которого за спиной 6-ти летний опыт FrontEnd разработки. В записанных видео уроках Максим делится эффективными техниками создания сайта на Vue.js, которые он сам успешно применяет в своей работе.   Структура курса: Введение в Vue.js. Авторизация и работа с роутером. Работа с маршрутизацией и знакомство с компонент фреймворком. Работа с интернационализацией. Работа с компонентами и страницами. Работа с поиском и функциональными элементами страницы. Работа с е2е тестированием (Cypress). Тестирование функционала. Jest. Финальная доработка и деплой.    После успешного прохождения курса вы научитесь: Выполнять установку VUE CLI и настройку стартового проекта. Создавать форму логина для входа на сайт. Организовывать настройку и защиту роутера. Организовывать авторизацию, аутентификацию, используя JWT токен. Создавать свой собственный сервер, который будет создавать токен и возвращать его пользователю. Выполнять тестирование сервера c использованием Postman. Использовать компоненты из библиотеки компонентов. Создавать свои компоненты на основе компонентов библиотеки. Выполнять стилизацию компонента и настраивать адаптивность сайта. Использовать плагин интернационализации Vue i18n. Создавать переводы на сайте. Создавать файл переводов, реализовывать переводы для всех компонентов сайта. Работать со структурой проекта, добавлять новые компоненты, такие как компонент списка статей. Тестировать проект с помощью Cypress. Модифицировать проект для покрытия компонентов тестами. Оптимизировать тесты модификациями конфига Cypress. Применять для тестирования инструмент для создания юнит тестов Jest. Создавать свой репозиторий и использовать для деплоя сервис Heroku. Выполнять деплой сайта на Netlify. Какими предварительными знаниями вы должны обладать? Необходимый бэкграунд для успешного прохождения курса: хорошее знание HTML, CSS, JavaScript. Курс входит в специальность FrontEnd Developer. Если вас заинтересовало создание сайта на Vue.js и вы хотите ознакомиться с преподавателем, а также его манерой подачи материала, переходите по ссылке и смотрите бесплатный вступительный урок от Максима. Также можем вам предложить ознакомиться со следующими статьями: “Инструменты Vue.js разработчика” и “Переход с jQuery на Vue.js”.

Спеціальна пропозиція для юридичних осіб Дорогі друзі та колеги! ITVDN підготував спеціальну пропозицію для компаній, які зацікавлені у підвищенні рівня кваліфікації IT спеціалістів — програмістів, тестувальників, системних адміністраторів, веб-дизайнерів та проджект менеджерів-початківців. На ITVDN доступні 2 форми навчання – групові онлайн тренінги в Zoom та самонавчання спеціалістів за відео курсами. Детальну інформацію про всі послуги для компаній, про формати навчання, програми, тренерів та наші переваги дивіться на сторінці Навчання співробітників. Акційна пропозиція з відео курсів До 31 грудня 2021 року ви можете придбати пакети передплати «Базовий» та «Преміум» за супер ціною зі знижкою 20-25%. Акційна вартість Пакет «Базовий» (6 міс.) зі знижкою 20% - 72 USD ( 89,99 USD ) Пакет «Преміум» (12 міс.) зі знижкою 25% - 127,5 USD ( 169,99 USD ) Мінімальне замовлення – від 3 передплат для однієї компанії. Для знайомства з нашим ресурсом, відео курсами та додатковими сервісами ви можете отримати безкоштовний тестовий доступ на 10 днів. У пакеті передплати ви отримаєте: Доступ до всіх відео курсів, представлених у Каталозі Можливість навчання за всіма спеціальностями Вихідний код навчальних проєктів Презентації, опорний конспект, ДЗ Перевірка виконаних завдань Консультації з тренером Онлайн тестування та сертифікація Доступ до нових курсів, які виходитимуть під час дії передплати. Акційна пропозиція з групових онлайн тренінгів До 31 грудня 2021 року діє знижка 25% на комплексні програми онлайн навчання за 4 спеціальностями: FrontEnd Developer В програмі курсу — HTML 5, CSS, JavaScript Стартовий, Основи Git, JavaScript Базовий, HTML 5 и CSS 3 Поглиблений, TypeScript Fundamentals, Angular або React Базовий. .NET Developer В програмі курсу — C# Стартовий, Основи Git, C# Базовий, C# для професіоналів, SQL для початківців, Entity Framework Core, ASP.NET Core. Python Developer В програмі курсу - Python для початківців, Основи Git, Python Базовий, Python Поглиблений, Django, Курсовий проєкт. Java Developer В програмі курсу - Java для початківців, Основи Git, Java Базовий, Java Поглиблений, MySQL Essential, JDBC & Hibernate, Web-services, Основи Spring. Знижка надається при одноразовій повній оплаті всього курсу навчання. Заняття проводять сертифіковані розробники та тренери навчального центру CyberBionic Systematics. Студенти отримують також доступ до всіх відео курсів ITVDN за своєю спеціальністю. Терміни акції: з 4 листопада до 31 грудня 2021 року. Для отримання рахунку та консультації з організаційних питань оформіть заявку на сайті або зв'яжіться з нашим консультантом за контактами, наведеними нижче.   Сергій Довгаль, T&D консультант ITVDN Email: s.dovhal@itvdn.com Telegram: @sergey_dovhal Skype: dovhal.sergey +38 (044) 344-16-22 +7 (499) 112-04-82 +44 (204) 577-00-53 Коротко про ITVDN   ITVDN.com – це освітній онлайн-ресурс, на якому представлені відео курси з програмування та інформаційних технологій. У каталозі ITVDN більше 220 курсів з різних напрямків. Найбільш повно представлені такі напрямки, як .NET (у тому числі ASP.NET Core), FrontEnd (JavaScript, Angular, Vue.js, React), Node.js, Java, Python, Django, C++, PHP, мобільне розроблення під iOS та Android, створення ігор на Unity, основи QA та PM. Автори курсів – сертифіковані тренери навчального центру CyberBionic Systematics та спеціалісти IT компаній, які мають значний досвід комерційної розробки, а також спікери IT конференцій. ITVDN – один із лідерів IT навчання у російськомовному сегменті, володар нагород за інновації та системний підхід у навчанні, переможець конкурсу IT Awards у номінації «Online education». Аудиторія ITVDN – понад 200 тисяч IT спеціалістів з України, Казахстану, Білорусі та інших країн.

Создания простого чата Для начала создадим простой чат с помощью HTML&CSS и PHP&MySQL Проектирование Базы Данных Переходим к phpMyAdmin. Создаем новую базу данных, называем “chatdb”. Создаем новую таблицу, называя “Posts”, включая в себя 4 столбца: “id” тип колонки INT, автоматическое увеличение на 1 (задаем A_I в ячейку с флажком) основной ключ (index); “nick” тип колонки VARCHAR и длина 100; “post_text” тип колонки TEXT; “post_dt” тип колонки DATETIME по умолчанию является CURRENT_TIMESTAMP. Создание веб-сайта. Во-первых, создадим главную страницу. Список комментариев и отправка формы, используя кнопку. Всё будет находится в файле “index.php” .  Давайте создадим этот файл и напишем что-то вроде этого:  <html> <head> head> <body> php $mysqli = new mysqli("127.0.0.1", "root", "", "chatdb"); /* "127.0.0.1" is MySQL host name. In local servers (XAMPP, Ampps, etc.) it is 127.0.0.1. If you using a dedicated hosting, see it in admin panel. */ /* "root" and "" is login and password for DB's user. In local servers usually default DB user is "root" with empty password. */ /* "chatdb" is DB's name. */ /* Warning: in XAMPP you should manually run MySQL server (from xampp-control.exe) to get it work. */ $result = $mysqli->query("SELECT * FROM posts;"); ?> <style> /* All CSS is very simplified. I provide it for example and no more.  * In Chrome it works tolerably, but in IE and Firefox it works very poorly.  */ .content {   display: table;   width: 50%;   min-width: 400px;   height: 80%;   /* Center horizontally and vertically */   position: absolute;   left: 0; right: 0;   top: 0; bottom: 0;   margin: auto;   /* Design */   border: 1px solid;   background-color: silver;   padding: 5px; } /* For mobile devices */ @media (max-width: 400px) {   .content {     width: 100%;     min-width: 0;     padding: 0px;   } } style> <div class="content"> <div id="comments" style="overflow-y: scroll; height: 100%;"> php if ($result) {   while ($post = $result->fetch_object()){     $nick = $post->nick;     $post_dt = $post->post_dt;     $post_text = $post->post_text;         echo "<b>$nickb> ($post_dt):<br>";     echo "$post_text<br>";     echo "<br>";   }   $result->close(); } ?> div> php $mysqli->close(); ?> <form action="post.php" method="post" style="height: 0; display: table-row;">   Nick:<br>   <input type="text" name="nick" style="width: 100%;">input><br>   <br>   Text:<br>   <textarea name="text" style="width: 100%;">textarea><br>   <br>   <input type="submit">input> form> div> <script type="text/javascript">     var divComments = document.getElementById('comments');     divComments.scrollTop = divComments.scrollHeight; script> body> html> 2. Дальше давайте создадим “post.php” файл и напишем такое:  php $nick = $_POST['nick']; $post_text = $_POST['text']; $mysqli = new mysqli("127.0.0.1", "root", "", "chatdb"); $nick = $mysqli->real_escape_string($nick); $nick = htmlspecialchars($nick); $post_text = $mysqli->real_escape_string($post_text); $post_text = htmlspecialchars($post_text); $mysqli->query("INSERT INTO posts (nick, post_text) VALUES ('$nick', '$post_text');"); $mysqli->close(); /* Redirect To Main Page */ header('Location: ' . $_SERVER['HTTP_REFERER']); ?> 3. Откроем ваш чат в любом продвинутом браузере. Вся работа:  4. Напишите ник и текст, а потом нажмите на кнопку отправки.  Когда отправили форму, сразу же происходит перенаправление формы главной страницы в “post.php”. “Post.php” моментально наполняет данными таблицу и перенаправляет на главную страницу. Также “post.php” содержит начальный XSS и SQL защищенный вход. Для упрощения не отправляем клиентам время с JS на “post_dt” на внесения данных, а указываем значение по умолчанию – CURRENT_TIMESTAMP, который предоставляет нынешнюю дату и время на сервер. Когда количество комментариев больше, чем экран может вместить, то комментарии   переполнены в div, используется вертикальный скроллбар. Во время загрузки страницы JS автоматически опускает скроллбар вниз к недавнему комментарию. Что тут не так? Проблема номер 1. Новый непрочитанный комментарий от пользователя не загружается в базу данных автоматически, без ручной перезагрузки страницы. Это очень, очень серьезная проблема для любого чата. Как это исправить? Очевидно, один из путей сделать это - использовать HTTP-запрос к фоновой работе автоматически (с помощью JS) и асинхронно, то есть это один из способов обеспечить выполнение AJAX в любой form. Проблема номер 2. Также неправильно то, что кнопка отправки перезагружает страницу (перенаправляет на вторую страницу и следующим шагом возвращает назад). При перезагрузке страницы сбрасывает “Nick” в  поле (также, как любые другие изменения, те, что сделали с пользователем) Как это исправить? Конечно, можно обеспечить выполнение обхода для сохранения изменений и перезагрузки на перезагружаемой странице. Но не эффективнее ли устранить причину, чем последствие? Можно только убрать перезагружаемую страницу и эта проблема будет решена автоматически. Проблема номер 2.1. Видите ли что-то необычное тут? Это слишком быстро? Дело с чатом очень простое – загружаем только два маленьких текстовых параметра. Что делать, если нужно улучшить чат с помощью добавления присоединения, а конкретно - изображений и видео? Видео может иметь объем в размере нескольких мегабайт, что тогда в этом случае? Давайте попробуем.  Давайте немного изменим “post.php”, после $mysql->query() добавив это:  for ($i = 0; $i < 1000000000; $i++) { } Старайтесь размещать какие-либо комментарии. Что мы видим? Нет, UI не остановилось (заморозилось), но браузер ждет до того, как закончится подключение:   Да, если “post.php” вызывает какую-то необработанную ошибку, то чат исчезает, и пользователь видит пустое окно с сообщением о непонятной ошибке. Чтобы вернуться к чату, пользователю стоит нажать кнопку “Back” в браузере. И это проблема номер 2.2. Давайте уберем петлю с “post.php” и исправим эти проблемы. Реализация легкого AJAX в простой чат Автоматическое обновление комментариев Эта веб-страница без AJAX? Это веб-страница, которая полностью перезагружается. Эта веб-страница c AJAX? Это веб-страница, что перезагружается частично. Где же взять части этих страниц? Стоит разделить нашу страницу на части, в этом случае сервер генерирует страницу частично. Страница будет состоять из двух частей – блок комментариев и другой контент страницы. Комментарии будут загружаться и перезагружаться отдельно от другой страницы. Давайте сделаем первую часть, то есть блок комментариев. Для начала создадим пустой файл, назовем “getcomment.php”. Дальше переходим в “index.php” для того, чтобы вырезать комментарии и далее отделить его. 1. Вырезаем инициализированный блок MySQL с “index.php"  php $mysqli = new mysqli("127.0.0.1", "root", "", "chatdb"); /* "127.0.0.1" is MySQL host name. In local servers (XAMPP, Ampps, etc.) it is 127.0.0.1. If you using a dedicated hosting, see it in admin panel. */ /* "root" and "" is login and password for DB's user. In local servers usually default DB user is "root" with empty password. */ /* "chatdb" is DB's name. */ /* Warning: in XAMPP you should manually run MySQL server (from xampp-control.exe) to get it work. */ $result = $mysqli->query("SELECT * FROM posts;"); ?> вставляем в “getcomments.php”. 2. Следующее, вырежем контент div c комментариями с “index.php”: php if ($result) {   while ($post = $result->fetch_object()){     $nick = $post->nick;     $post_dt = $post->post_dt;     $post_text = $post->post_text;         echo "<b>$nickb> ($post_dt):<br>";     echo "$post_text<br>";     echo "<br>";   }   $result->close(); } ?> И вставим (добавим) в “getcomments.php” после инициализации MySQL. 3. Дальше, вырежем недалекий блок MySQL с “index.php”: php $mysqli->close(); ?> Вставим его в конец файла “getcomments.php”. 4. Наконец-то, убираем JS-скрипт, который опускает скролл в самый низ. <script type="text/javascript"> var comments = document.getElementById('comments'); comments.scrollTop = comments.scrollHeight; script> Не переживай, это только временно. 5. Сделано. Теперь имеем что-то наподобие этого:  <html> <head> head> <body> <style> /* All CSS is very simplified. I provide it for example and no more.  * In Chrome it works tolerably, but in IE and Firefox it works very poorly.  */ .content {   display: table;   width: 50%;   min-width: 400px;   height: 80%;   /* Center horizontally and vertically */   position: absolute;   left: 0; right: 0;   top: 0; bottom: 0;   margin: auto;   /* Design */   border: 1px solid;   background-color: silver;   padding: 5px; } /* For mobile devices */ @media (max-width: 400px) {   .content {     width: 100%;     min-width: 0;     padding: 0px;   } } style> <div class="content"> <div id="comments" style="overflow-y: scroll; height: 100%;"> div> <form action="post.php" method="post" style="height: 0; display: table-row;">   Nick:<br>   <input type="text" name="nick" style="width: 100%;">input><br>   <br>   Text:<br>   <textarea name="text" style="width: 100%;">textarea><br>   <br>   <input value="Submit" type="submit">input> form> div> body> html> getcomments.php:  php $mysqli = new mysqli("127.0.0.1", "root", "", "chatdb"); /* "127.0.0.1" is MySQL host name. In local servers (XAMPP, Ampps, etc.) it is 127.0.0.1. If you using a dedicated hosting, see it in admin panel. */ /* "root" and "" is login and password for DB's user. In local servers usually default DB user is "root" with empty password. */ /* "chatdb" is DB's name. */ /* Warning: in XAMPP you should manually run MySQL server (from xampp-control.exe) to get it work. */ $result = $mysqli->query("SELECT * FROM posts;"); ?> Вероятно, теперь наша страница разделена. Давайте проверим её. Переходим http (точнее ССЫЛКА для локального сервера). Дальше, переходим на главную страницу, http:///index.php Это удивительно! Всё удачно получилось, разделив страницу на части за пару минут! Не останавливаемся на этом. Теперь “glue” эти части с помощью AJAX. Как это сделать? 1. Для начала стоит создать пустой JS-скрипт на главной странице: <script type="text/javascript"> alert('Test'); script> Добавив это после тега div, перед закрывающимся тегом . 2. Сделаем HTTP GET запрос от JS к “getcommet.php” Для этого используем XMLHtttpRequest (XHR) класс: <script type="text/javascript"> var xhr = new XMLHttpRequest(); xhr.open('GET', '/getcomments.php', false); xhr.send(null); if (xhr.status == 200) {   alert(xhr.responseText); } script> Это работает, но не читает старые версии IE те, что не поддерживают такую инициализацию. Для получения более кросс-браузерного пути переходим в и добавляем это: <script type="text/javascript"> function getXmlHttp(){   var xmlhttp;   try {     xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");   } catch (e) {     try {       xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");     } catch (E) {       xmlhttp = false;     }   }   if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {     xmlhttp = new XMLHttpRequest();   }   return xmlhttp; }; script> И главный скрипт (в конце) <script type="text/javascript"> var xhr = getXmlHttp(); xhr.open('GET', '/getcomments.php', false); xhr.send(null); if (xhr.status == 200) {   alert(xhr.responseText); } script> Как видно, теперь JS получает контент со страницы “getcomments.php” и показывает это в предупреждении.   2.1. Вопрос: «Это на самом деле AJAX (Asynchronous Javascript And Xml)?» Это AJAX, потому что запрос сервера отформатирован в HTML (который основан на XML). Но действительно ли это AJAX, это асинхронно? Проверим. Добавим эти уже знакомые строки в любое место между в “getcomments.php”: for ($i = 0; $i < 1000000000; $i++) { } Что теперь видно на загружаемой странице? Вначале страница зависает, его замораживает UI (становится не реагирующим на нажатие левой/правой кнопки мыши): Дальше Chrome показывает навязчивое всплывающие окно, сообщающее об удалении страницы: Это не AJAX! Это JAX! Как его сделать асинхронным? К счастью, ХHR также поддерживает асинхронный режим: <script type="text/javascript"> var xhr = getXmlHttp(); xhr.open('GET', '/getcomments.php', true); /* true for asynchronous */ xhr.onreadystatechange = function() {   if (xhr.readyState == 4) {     if(xhr.status == 200) {       alert(xhr.responseText);     }   } }; xhr.send(null); script> В этом случае браузер не ждет ответа с главного потока пользовательского интерфейса, он запускает в другом (асинхронно) и вызываемым событием “onreadystatechange” в главном контексте UI.  Теперь всё в порядке, страница полностью доступна, пока запрос запущен, и после ответа получит предупреждение. for ($i = 0; $i < 1000000000; $i++) { } И продолжаем работу. 3. Добавляем этот контент в div  вместо предупреждения. Заменить это: alert(xhr.responseText);  C этим: var divComments = document.getElementById('comments'); divComments.innerHTML = xhr.responseText; Возвращаем назад, клиент видит “glued” страницу с блоком комментариев. 4. Дальше следует установить интервал для автоматической проверки новых комментариев время от времени… и также восстановить удаленный сценарий автоматической прокрутки.  <html> <head> <script type="text/javascript">     function getXmlHttp() {         var xmlhttp;         try {             xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");         } catch (e) {             try {                 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");             } catch (E) {                 xmlhttp = false;             }         }         if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {             xmlhttp = new XMLHttpRequest();         }         return xmlhttp;     }; script> head> <body> <style> /* All CSS is very simplified. I provide it for example and no more.  * In Chrome it works tolerably, but in IE and Firefox it works very poorly.  */ .content {   display: table;   width: 50%;   min-width: 400px;   height: 80%;   /* Center horizontally and vertically */   position: absolute;   left: 0; right: 0;   top: 0; bottom: 0;   margin: auto;   /* Design */   border: 1px solid;   background-color: silver;   padding: 5px; } /* For mobile devices */ @media (max-width: 400px) {   .content {     width: 100%;     min-width: 0;     padding: 0px;   } } style> <div class="content"> <div id="comments" style="overflow-y: scroll; height: 100%;"> div> <form action="post.php" method="post" style="height: 0; display: table-row;">   Nick:<br>   <input type="text" name="nick" style="width: 100%;">input><br>   <br>   Text:<br>   <textarea name="text" style="width: 100%;">textarea><br>   <br>   <input value="Submit" type="submit">input> form> div> <script type="text/javascript">     var divComments = document.getElementById('comments');     function loadComments() {         var xhr = getXmlHttp();         xhr.open('GET', '/getcomments.php', true);         xhr.onreadystatechange = function () {             if (xhr.readyState == 4) {                 if (xhr.status == 200) {                     if (xhr.responseText !== divComments.innerHTML) {                         divComments.innerHTML = xhr.responseText;                         divComments.scrollTop = divComments.scrollHeight;                     }                 }             }         };         xhr.send(null);     };     loadComments();     setInterval(loadComments, 1000) script> body> html> Теперь проблема исправить это. Новые комментарии с другого пользовательского чата (другие вкладки браузеров, окон и экземпляров) получают каждые 1000 миллисекунды (1 секунду) автоматически. Но отправка комментариев уже вызывает перезагрузку нашей страницы. Отправка комментариев без перезагрузки Как написано выше, XHR помогает отправлять HTTP GET-запросы без перезагрузки страницы и GUI заморозки (асинхронно). Теперь отправляем HTTP-запрос асинхронно, но на этот раз POST запрос, а не GET. И, естественно, XHR позволяет это. Используем метод send(). Для GET указываем null. Для POST устанавливаем запрос “body”.Также нужно добавить “Content-Type:application/x-www-from-urlencoded” в header  для того, чтобы разрешить серверу знать, какой формат использовать для отправки данных. Заметка: если не знаете, что отправлять, то можно захватить регулярный запрос с помощью “Fiddler” или же любой другой HTTP-перехватчик и только просимулировать запрос. HTTP-перехватчик — это незаменимый инструмент для работы с HTTP/HTTPS. Это позволяет увидеть все headers и bodies по всем HTTP(S)-запросам, что отправляются в систему. Лучше использовать “Fiddler”, это бесплатное, современное и очень простое приложение, что может поддерживать HTTP/HTTPS и оба Win x86/x64. 1. Для начала создадим пустой JS скрипт в HTML. Разместить до самого тега, потому что этот скрипт будет использован для отправки формы комментария (форма будет вызывать этот скрипт при отправке).2. В этом скрипте, реализуем функцию, что будет отправлять ник и комментарии в “post.php”  <script type="text/javascript"> function postComment(nick, text) {   var xhr = getXmlHttp();   xhr.open('POST', '/post.php', true);   xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');   xhr.onreadystatechange = function() {     if (xhr.readyState == 4) {       if (xhr.status == 200) {         /* it isn't required to add comment to DOM manually, it will done automatically on next refresh via AJAX */       }     }   };   xhr.send('nick=' + nick + '&text=' + text); /* joining the data in format simulates form */ }; script> 3. Следующие, перезагружая страницу при отправке:  ... onsubmit="return false;"> Также добавим вызов “postComment’s”: action="post.php" method="post" style="height: 0; display: table-row;" onsubmit="postComment(this.nick.value, this.text.value); return false;"> 4. Наконец, необязательно, но можно убрать “action” и “method” с формы:  <form style="height: 0; display: table-row;" onsubmit="postComment(this.nick.value, this.text.value); return false;"> 5. Результат: <html> <head> <script type="text/javascript">     function getXmlHttp() {         var xmlhttp;         try {             xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");         } catch (e) {             try {                 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");             } catch (E) {                 xmlhttp = false;             }         }         if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {             xmlhttp = new XMLHttpRequest();         }         return xmlhttp;     }; script> head> <body> <style> /* All CSS is very simplified. I provide it for example and no more.  * In Chrome it works tolerably, but in IE and Firefox it works very poorly.  */ .content {   display: table;   width: 50%;   min-width: 400px;   height: 80%;   /* Center horizontally and vertically */   position: absolute;   left: 0; right: 0;   top: 0; bottom: 0;   margin: auto;   /* Design */   border: 1px solid;   background-color: silver;   padding: 5px; } /* For mobile devices */ @media (max-width: 400px) {   .content {     width: 100%;     min-width: 0;     padding: 0px;   } } style> <div class="content"> <div id="comments" style="overflow-y: scroll; height: 100%;"> div> <script type="text/javascript">     function postComment(nick, text) {         var xhr = getXmlHttp();         xhr.open('POST', '/post.php', true);         xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');         xhr.onreadystatechange = function () {             if (xhr.readyState == 4) {                 if (xhr.status == 200) {                     /* it isn't required to add comment to DOM manually, it will done automatically on next refresh via AJAX */                 }             }         };         xhr.send('nick=' + nick + '&text=' + text);     }; script> <form style="height: 0; display: table-row;" onsubmit="postComment(this.nick.value, this.text.value); return false;">   Nick:<br>   <input type="text" name="nick" style="width: 100%;">input><br>   <br>   Text:<br>   <textarea name="text" style="width: 100%;">textarea><br>   <br>   <input value="Submit" type="submit">input> form> div> <script type="text/javascript">     var divComments = document.getElementById('comments');     function loadComments() {         var xhr = getXmlHttp();         xhr.open('GET', '/getcomments.php', true);         xhr.onreadystatechange = function () {             if (xhr.readyState == 4) {                 if (xhr.status == 200) {                     if (xhr.responseText !== divComments.innerHTML) {                         divComments.innerHTML = xhr.responseText;                         divComments.scrollTop = divComments.scrollHeight;                     }                 }             }         };         xhr.send(null);     };     loadComments();     setInterval(loadComments, 1000) script> body> html>  Теперь простая реализация AJAX подошла к концу. Это ещё не конец, это только начало. Есть ещё достаточно всего для изучения и улучшения.

Добрий день, друзі! Сьогодні маємо гарні новини для всіх, хто хоче вдосконалити свою техніку верстання вебсторінок – на ITVDN вийшли всі уроки курсу “Верстання на Grid”. Курс українською мовою! CSS Grid — це популярний механізм зручного розташування елементів на сайті (за принципом мережі або таблиці з рядками та стовпцями) з можливістю легкої реалізації адаптивності під різні екрани. Даний курс надасть вам не тільки теоретичне розуміння найкращих практик та сучасних трендів у галузі верстання, а й практичні навички реалізації гнучких вебмакетів. Автор курсу – Кінаш Станіслав, FrontEnd Developer. Тривалість курсу – 3 години 46 хвилин. Структура курсу: Основні поняття Grid Layout. Grid-треки (Grid-смуги). Явний і неявний Grid, gap, minmax, grid-column/row. Subgrid, Grid vs. Flexbox, auto-fill/auto-fit. Позиціонування за направляючими лініями Grid, grid-area, grid span. Шаблони Grid-областей. Визначення назв ліній в Grid. Grid-auto-flow, анонімні елементи Grid. Вирівнювання блоків у CSS-розмітці Grid. Створення проєкту. Чого ви навчитеся на даному курсі: Використовувати CSS Grid для грамотного верстання ваших вебсторінок. Використовувати Figma для побудови шаблонів і подальшої роботи. Реалізовувати адаптивні макети за допомогою медіа запитів. Використовувати Grid для верстання під різні пристрої та екрани. Використовувати властивості flex та grid. Вміти перетворювати флекс блоки на грід. Створювати готовий зверстаний проєкт та деплоїти його на GitHub. І багато іншого. Попередні вимоги Курс підійде тим, хто вже має базові знання HTML та CSS. Дивіться перший урок у вільному доступі. Курс вже доступний на нашому сайті в повному обсязі – до кожного уроку є практичні завдання та опорний конспект для більш глибокого засвоєння матеріалу. Якщо у вас є активна підписка, ви можете дивитися його прямо зараз. Курс входить до комплексної програми підготовки за спеціальностями: Верстальник FrontEnd Developer React Developer Angular Developer               

Дорогие друзья, на ITVDN опубликован новый видео курс, посвященный изучению веб-разработки на PHP. Проходя курс “Создание веб приложений на PHP” вы сможете закрепить на практике знания PHP, полученные ранее из других курсов или книг. Видео курс создан для тех, кто хочет после изучения основ РНР увидеть, как строятся приложения без привязки к фреймворку. Это позволит получить практическую основу знаний для дальнейшего изучения фреймворков. На данном курсе на примере создания блога рассматривается разработка веб приложения с использованием готовых инструментов, которые предоставляет язык программирования PHP и известные открытые библиотеки. На курсе показываются популярные и общепринятые подходы для решения часто возникающих задач при построении приложения. Автор курса — Демьян Костельный, Middle PHP Developer. В записанных видео уроках он делится техниками эффективного построения веб-приложений на PHP, опираясь на собственный опыт и лучшие практики. Структура курса: Паттерн MVC и архитектура приложений. Маршрутизация в приложениях. Написание своего блога с MVC. Использование классов-репозиториев для БД. Паттерны проектирования в архитектуре приложения. Авторизация и регистрация. Создание админ панели к блогу. Файловая система. Безопасность в приложении. Гибкость админ панели. Чему вы научитесь на данном курсе: Создавать полноценное приложение с нуля, используя современные подходы, паттерны и библиотеки. Понимать, что такое архитектурный паттерн MVC и как его применять на практике при создании приложения. Понимать, зачем использовать проектирование архитектуры в приложении. Понимать принципы маршрутизации в веб приложении и реализовывать их в своем приложении. Использовать классы-репозитории для работы с базой данных. Работать с Doctrine ORM для простого доступа к базе данных. Понимать и уметь применять на практике такие порождающее паттерны, как Factory Method, Abstract Factory, Builder и Prototype. Реализовывать регистрацию и авторизацию в своем приложении. Работать с файловой системой в своем приложении. Обеспечивать базовый уровень безопасности своего приложения. Предварительные требования Для прохождения данного курса необходимы базовые знания HTML/CSS, PHP на уровне курса «PHP Базовый», понимание языка запросов SQL и знание MySQL. Смотрите первый урок в свободном доступе. Если у вас есть активная подписка, курс доступен для вас в полном объеме.

Привет! У нас отличные новости для тех, кто изучает FrontEnd разработку. На ITVDN появился новый курс, посвященный разработке на React. Что это за технология? React - это популярный JavaScript-фреймворк. Он предназначен для упрощения разработки UI - пользовательского интерфейса. Среди его достоинств выделяют: гибкость, простую миграцию между версиями, высокую скорость разработки, хорошую производительность разработанных приложений, удобство в переиспользовании уже имеющегося кода. Курс “React Essential” является вводным в технологию React. Автор курса - Муляк Дмитрий - FrontEnd разработчик со стажем, который рад поделиться своими знаниями со всеми желающими развиваться в сфере разработки сайтов. Какие темы автор раскрыл в своем курсе? Введение в React. JSX в React. Основы React. Состояние и жизненный цикл. Формы. Стилизация в React. Создание списка заметок. Введение в роутинг. Пройдя этот курс, вы научитесь: Понимать философию разработки в стиле React. Строить простые одностраничные приложения с помощью React.js. Работать с компонентами в React, а также создавать компоненты самостоятельно. Преобразовывать функциональные компоненты в классовые. Работать с событиями и списками. Работать с состояниями с помощью библиотеки Redux. Применять для стилизации вашего приложения Inline CSS и CSS модули. Работать с другими аспектами фреймворка React. Предварительные требования Необходимый бэкграунд для успешного прохождения “React Essential”: хорошее знание HTML, CSS и JavaScript. Курс входит в специальности: FrontEnd Developer и React Developer. Если вас заинтересовало обучение технологии React и вы хотите познакомиться курсом, переходите по ссылке и смотрите бесплатный вступительный урок от Дмитрия. Также можем вам предложить ознакомиться со статьей “Что должен знать FrontEnd разработчик” либо просмотреть видео, где подробно рассматриваются основные технологии создания клиентских веб-приложений.

14 января 2014 года на просторах интернета появился ITVDN.com. В первой публикации было всего 17 видео курсов по 2 специальностям - .NET и FrontEnd. Авторами первых курсов были тренеры учебного центра CyberBionic Systematics. Сегодня проекту исполнилось 6 лет и мы подводим итоги. Результаты ITVDN за 6 лет: В Каталоге ITVDN 188 курсов разного уровня сложности по 19 направлениям. Сообщество авторов ITVDN – более 100 специалистов из разных IT компаний и разных стран. Созданы 12 комплексных программ обучения по самым востребованным специальностям Проводится групповое обучение в формате LiveOnline по трем специальностям – FrontEnd, Java, .NET. Созданы интерактивные тренажеры по HTML, CSS, JavaScript, C#, Java, Python, SQL, C++ для формирования навыков программирования. Проведено 278 бесплатных вебинаров-практикумов. YouTube канал ITVDN входит в пятерку самых популярных русскоязычных каналов по программированию. На канале 172 тысячи подписчиков, 1880 видео уроков. 91 тысяча зарегистрированных пользователей, которые прошли обучение хотя бы по 1 курсу. География проекта – Россия, Украина, Беларусь, Казахстан, Грузия, Армения, Латвия, Литва, Израиль, Германия и др. Постоянно действующий Социальный проект позволяет бесплатно проходить обучение инвалидам, сиротам и другим людям, нуждающимся в помощи. Как образовательный и информационный партнер, ITVDN тесно сотрудничает с IT конференциями, организаторами IT олимпиад и хакатонов, награждая победителей и предоставляя возможности беплатного обучения для участников. Мы продолжаем расти и развиваться. Наша цель – быть лидером IT образования, удовлетворяя самые высокие запросы как новичков, так и профессионалов. Благодарим всех, кто пользуется нашим ресурсом. Оставайтесь на ITVDN. Празднуем вместе!