Файл: Оформление ЛабРаб №5.doc

Лабораторна робота № 5

ТЕМА: Основи розмітки сторінок НТМL. Елементи вводу інформації у Web сторінках. Взаємодія РНР-сценаріїв з формами

МЕТА: познайомитися з основами розмітки сторінок НТМL, елементами вводу інформації у Web-сторінках та основами взаємодії РНР-сценаріїв з формами

Хід роботи

1. Створіть форму введення заказа фірми з продажу автозапчастин, її вигляд зображено на малюнку 5.1

Малюнок 5.1 – Форма введення заказа

2. Для цього видкрийте програму Блокнот та запишіть наступний текст:

3. Збережіть отриманий файл в домені (каталозі) Lab5.loc під ім’ям Form.html.

4. Для обробки форми за допомогою програми Блокнот в папці Lab5.loc створіть сценарій під назвою processorder.php. Для цього введіть наступний код:

5. Збережіть отриманий файл та завантажте його в свій браузер, потім заповніть форму та клацніть по кнопці “Ввести замовлення”. В загальному випадку значення атрибута ACTION є URL-адресою, яка буде завантажуватися при натисканні користувачем кнопки “Ввести замовлення” (submit). Данні, введені користувачем в форму, будуть відправлятися за цією URL-адреси з використанням методу, який вказаний в атрибуті METHOD: POST – в цьому випаду данні відправляються у вигляді окремого пакету.

6. У вікні браузера повинно відобразитися наступне (мал. 5.2):

Малюнок 5.2 -  Результат обробки РНР сценарія в вікні браузера

Завдання для самостійного виконання:

7. Додайте до вашої форми ще декілька елементів форми. Змініть код рнр-скрипта, щоб у вікні браузера також виводило назву та кількість замовлених товарів.

8. Тепер помістіть на форму замовлення елемент "прапорець". Змініть текст попереднього коду так, щоб вивести на екран той виріб замовлення, який помічений галочкою.

Лабораторна робота №5

---

Частина 2

Тема: Обробка даних користувача з форм

Мета: навчитися створювати php-скрипти для обробки елементів форми та віводити результаті у вікні браузера.

Теоретичні відомості

PHP і поля HTML -форм

Використання елементу дизайну форма при розробці Web -сайта є найбільш популярним способом організації інтерактивної взаємодії з його відвідувачами. За допомогою мови HTML можна створювати як прості, так і складні форми, що припускають множинний вибір з декількох варіантів. Форми складаються з одного або декілька полів, в які користувач може ввести різну інформацію, або вибрати якусь опцію. Після введення інформації, вона передається на сервер, де може оброблятися різними засобами, у тому числі, за допомогою мови PHP.

У нижче представлених прикладах описується обробка інформації користувача з форм. До елементів форм відносяться однорядкове текстове поле, текстова область, перемикачі, прапорці, списки, приховані поля форм, поля введення паролів і кнопки. У прикладах використовуються дві Web -страницы. Перша сторінка містить форму для введення даних користувача і має розширення .html. Друга сторінка обробляє введену інформацію засобами мови PHP і має розширення .php.

Текстові поля

HTML -код форми для введення інформації представлений нижче.

Реалізація цього коду представлена на малюнку 5.1

Малюнок 5.1 - Введення улюбленого автора

Таким чином, як видно на малюнку 5.1, в цьому прикладі, при завантаженні Web -страницы, на екрані з'являється однорядкове текстове поле, в яке користувачеві необхідно ввести інформацію і натиснути кнопку "Відправити". Після цього підключиться обробник, вказаний в атрибуті "action" тега "form". У цьому прикладі це файл text.php.

Код файлу-обробника представлений нижче.

Реалізація цього коду представлена на малюнку 5.2.

Малюнок 5.2 - Результат обробки введеного автора

Текстова область

---

Результат роботи цього коду представлений на малюнку 3.4.

Малюнок 5.4 - Введення інформації в текстову область

Код файлу-обробника представлений нижче.

Результат роботи цього коду представлений на малюнку 5.5.

Малюнок 5.5 - Вивід на екран улюблених сайтів

Прапорці

HTML -код форми для введення інформації представлений нижче.

Реалізація цього коду представлена на малюнку 5.6

Малюнок 5.6 - Перевірку приналежності до студентів ОГУ

Код файлу-обробника представлений нижче.

Реалізація цього коду представлена на малюнку 5.7.

Малюнок 5.7 - Результат перевірки

HTML -код форми для введення інформації представлений нижче.

Результат роботи цього коду представлений на малюнку 5.8.

Малюнок 5.8 - Вибір мов програмування

Код файлу-обробника представлений нижче.

Результат роботи цього прикладу представлений на малюнку 5.9.

Малюнок 5.9 - Результат вибору мов.

Перемикачі

HTML -код форми для введення інформації представлений нижче.

Результат роботи цього коду представлений на малюнку 5.10.

Малюнок 5.10 - Вибір столиці Росії

---

Реалізація цього коду представлена на малюнку 3.11.

Малюнок 5.11 - Результат вибору столиці

Списки

HTML -код форми для вибору інформації представлений нижче.

Результат роботи цього коду представлений на малюнку 5.12.

Малюнок 5.12 - Вибір техніки і фірми

Результат роботи цього прикладу представлений на малюнку 5.13.

Малюнок 5.13 - Результат вибору техніки і фірми

Поля введення паролів

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

Синтаксис:

Введіть пароль: <INPUT name="password" type="password">

де type - тип поля,

name - ім'я поля як елементу форми.

Обробка полів введення паролів і текстових полів нічим не відрізняється. Слідує, проте, відмітити, що якщо для передачі даних з поля такого типу використовувати метод GET, то пароль в рядку запиту не шифрується і буде видимим. Це не означає, що метод POST є безпечним методом передачі даних. Йдеться тільки про те, що інформація при передачі методом POST безпосередньо не показується користувачеві. Щоб дійсно забезпечити безпеку передаваних даних, необхідно застосовувати який-небудь спеціальний протокол для реального шифрування даних.

Реалізація цього коду представлена на малюнку 5.16.

Малюнок 5.16 - Форма заявки на кредит

Код файлу-обробника представлений нижче.

Реалізація цього коду представлена на малюнку 5.17.

Малюнок 5.17 - Результат подачі заявки

Перевірка обов'язкових полів

HTML -код форми для введення інформації представлений нижче.

---

Реалізація цього коду представлена на малюнку 5.18.

Малюнок 5.18 - Форма заявки на отримання кредиту

Таким чином, як видно на малюнку 5.18, в цьому прикладі, при завантаженні Web -страницы на екрані з'являється форма для введення інформації, в яку користувачеві необхідно ввести свої дані. Потім треба натиснути кнопку "Подати заявку", щоб відправити дані, або "Очистити" для скидання даних. Після цього підключиться обробник, вказаний в атрибуті "action" тега "form". У цьому прикладі це файл loan.php.

Код файлу-обробника представлений нижче.

Малюнок 5.19 - Результат подачі заявки в банк. Повідомлення про помилку

Як видно на малюнку 5.19, на екран виводиться одне з повідомлень про помилку, оскільки користувач не заповнив деякі поля форми. В даному випадку в програмі перевіряється існування заданої змінної за допомогою вбудованої функції isset. Також в програмі перевіряється, чи не ввів користувач очевидно невірну інформацію. Якщо необхідна умова не дотримується, то сценарій відображує повідомлення про помилку і завершує роботу.

Висновок: на лабораторній роботі я познайомився з основами розмітки сторінок НТМL, елементами вводу інформації у Web-сторінках та основами взаємодії РНР-сценаріїв з формами.

---