Розробка уроку — практичної роботи

Тема: поняття елемента керування, події, пов’язані з елементами керування, обробники цих подій мовою PHP.

Мета:

По завершенню вивчення: учень

Обладнання: ПК з ОС і браузером, веб-сервер з можливістю використання PHP або стійким сполученням з Інтернетом для використання online-компілятора PHP.

Структура уроку

  1. Організаційний момент.
  2. Актуалізація опорних знань.
  3. Вивчення нового матеріалу.
  4. Інструктаж з ТБ.
  5. Вироблення практичних навичок.
  6. Підбиття підсумків уроку.
  7. Домашнє завдання.

Хід уроку

1. Організаційний момент
Вітання з класом. Перевірка присутності і готовності учнів до уроку. Перевірка виконання домашнього завдання.

2. Актуалізація опорних знань
Дати відповіді на запитання.

  1. Які основні особливості мови PHP?
  2. Як тлумачать поняття форми у мові PHP?
  3. Як тлумачать поняття «об’єкт»?
  4. Як тлумачать поняття «подія»?
  5. Як Ви розумієте поняття «метод»?

Порівняти відповіді з очікуваними.

Особливістю мови PHP є те, що вона спрямована на створення динамічних HTML-сторінок завдяки використанню елементів керування та підтримує велике коло баз даних.

Форма це основний інструмент заповнення і передавання повідомлень від користувача до сервера. У формах можна вводити текст або вибирати потрібні варіанти зі списку. Залежно від введених користувачем даних ця програма може формувати різні веб-сторінки, відправляти запити до бази даних, запускати різні додатки тощо.

Об'єкт (від латинською objectum — предмет, явище) — це те, на що спрямована певна діяльність. Кожний об'єкт має свою назву та низку властивостей (параметрів).

Подіязміна властивостей об'єкта, взаємодія між об'єктами, утворення нового об'єкта або знищення наявного об'єкта.

Методдія, яку об'єкт може виконувати.

3. Вивчення нового матеріалу

Примітка. Матеріал цього уроку стосується виключно елементів керування. Передавання даних форми на сервер розглянуто раніше.

Елементи керуванняце графічні об'єкти для показу або введення даних, виконання дій або полегшення роботи: текстові поля, списки, перемикачі, кнопки, прапорці тощо. Елементи керування дають користувачеві змогу, наприклад, запускати веб-сценарії. Елементи керування можуть бути зв'язані, вільні або обчислювані.

Зв'язаний елемент керуванняелемент, джерело даних якого — поле в таблиці або запиті. Його використовують для відображення значень полів бази даних. Це може бути текст, дати, числа, значення «Так/Ні», зображення або діаграми.

Вільний елемент керуванняелемент керування, який не має джерела даних, який використовують для відображення відомостей, зображень.

Обчислюваний елемент керуванняелемент керування, джерело даних якого — вираз — комбінація операторів, назв елементів керування, назв полів, функцій, які повертають одне значення, і сталих.

Обробник подіїце частина програми, що виконує певні дії у відповідь на подію (спричинену, наприклад, дією користувача).

Основні типи елементів керування

Вибір файлів для відправлення вибраних файлів і приховані елементи реалізють за допомогою елемента INPUT.

Перелічені вище елементи керування використовують для побудови інтерфейсу користувача на веб-сторінці і для створення HTML-форм. Елемент INPUT є найуживанішим тегом, за його допомогою реалізуються основні функції форми. Якщо елементи керування вказано поза контейнером FORM, то вони створюють не форму, а інтерфейс користувача на веб-сторінці. Його особливість — відсутність кінцевого (завершальногого) тега.

Форми у документі HTML реалізують за допомогою контейнера FORM, в якому задають (описують) всі елементи керування. Назви елементів форми надають через атрибут (властивість) NAME. Зокрема NAME визначає назву форми. Її використовують лише, якщо документ містить кілька форм. Форма має такі атрибути:

Синтаксис використання простих елементів керування

В HTML5 добавлено нові значення типу елемента INPUT, описані у таблиці нижче

ТипПризначення
colorвибір кольору
dateвибір дати
datetime-localвказання місцевої дати й часу
emailдля адреси електронної пошти
monthвибір місяця
numberдля введення чисел
rangeповзунок для вибору числа:
min — найменше значення;
max — найбільше значення;
value — значення як усталено;
step — крок
searchполе для пошуку
telдля телефонних номерів
timeдля часу
urlдля веб-адрес
weekвибір тижня

4. Інструктаж з ТБ
5. Вироблення практичних навичок


Завдання 1. Використовуючи таке зображення:

написати код мовою html, що описує форму такого вигляду:

Код записати у файл з назвою Ваше прізвище_1 у теку, вказану вчителем. Порівняти з демонстраційним розв'язанням.

Завдання 2. Створити форму такого вигляду:

для відображення елементів INPUT з новими типами, запровадженими в HTML5: color, date, datetime-local, email, month, number, range, search, tel, time, url, week. Ознайомитися з технологією введення даних у таку форму. Код записати у файл з назвою Ваше прізвище_2 у теку, вказану вчителем. Порівняти з демонстраційним розв'язанням.

6. Підбиття підсумків уроку
Виставлення оцінок.

7. Домашнє завдання
Вивчити матеріал уроку. При потребі доробити завдання. Використовуючи матеріал попереднього уроку, написати коди PHP отримання й запису у текстовий файл даних з форм, створених на уроці.


Текст упорядкувала Ольга Ярославівна Осадча, вчитель НВК №293 Деснянського району міста Києва, під час виконання випускної роботи на курсах підвищення кваліфікації з 30.10.2017 по 03.11.2017.