ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 16.05.2024
Просмотров: 16
Скачиваний: 0
Лабораторна робота № 5
ТЕМА: Основи розмітки сторінок НТМL. Елементи вводу інформації у Web сторінках. Взаємодія РНР-сценаріїв з формами
МЕТА: познайомитися з основами розмітки сторінок НТМL, елементами вводу інформації у Web-сторінках та основами взаємодії РНР-сценаріїв з формами
Хід роботи
-
Створіть форму введення заказа фірми з продажу автозапчастин, її вигляд зображено на малюнку 5.1
Малюнок 5.1 – Форма введення заказа
-
Для цього видкрийте програму Блокнот та запишіть наступний текст:
-
Збережіть отриманий файл в домені (каталозі) Lab5.loc під ім’ям Form.html.
-
Для обробки форми за допомогою програми Блокнот в папці Lab5.loc створіть сценарій під назвою processorder.php. Для цього введіть наступний код:
-
Збережіть отриманий файл та завантажте його в свій браузер, потім заповніть форму та клацніть по кнопці “Ввести замовлення”. В загальному випадку значення атрибута ACTION є URL-адресою, яка буде завантажуватися при натисканні користувачем кнопки “Ввести замовлення” (submit). Данні, введені користувачем в форму, будуть відправлятися за цією URL-адреси з використанням методу, який вказаний в атрибуті METHOD: POST – в цьому випаду данні відправляються у вигляді окремого пакету.
-
У вікні браузера повинно відобразитися наступне (мал. 5.2):
Малюнок 5.2 - Результат обробки РНР сценарія в вікні браузера
Завдання для самостійного виконання:
-
Додайте до вашої форми ще декілька елементів форми. Змініть код рнр-скрипта, щоб у вікні браузера також виводило назву та кількість замовлених товарів.
-
Тепер помістіть на форму замовлення елемент "прапорець". Змініть текст попереднього коду так, щоб вивести на екран той виріб замовлення, який помічений галочкою.
Лабораторна робота №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-сторінках та основами взаємодії РНР-сценаріїв з формами.