Методические указания по выполнению лабораторных работ по междисциплинарному курсу: «Web-программирование»

Скачать материал

Государственное бюджетное профессиональное образовательное учреждение

«Байконурский электрорадиотехнический техникум имени М.И. Неделина»

(ГБ ПОУ «БЭРТТ»)

СОГЛАСОВАНО

Председатель ПЦК

специальности 09.02.03

____________ М.А. Агадилова

«____» ___________ 20__ г.

УТВЕРЖДАЮ

Заместитель директора

по учебной работе

________ М.М. Иванова

«____» ___________ 20__ г.

МЕТОДИЧЕСКИЕ УКАЗАНИЯ
ПО ВЫПОЛНЕНИЮ ЛАБОРАТОРНЫХ РАБОТ

по междисциплинарному курсу: «Web-программирование»

для специальности 09.02.03

«Программирование в компьютерных системах»

4 курс

Разработал преподаватель

____________ Ж.К. Серикбаева

«____»___________ 20__ г.

г. Байконур

СОДЕРЖАНИЕ

Пояснительная записка.......................................................................................... 3

Перечень лабораторных работ............................................................................... 4

Лабораторная работа № 1...................................................................................... 5

Лабораторная работа № 2.................................................................................... 10

Лабораторная работа № 3.................................................................................... 15

Лабораторная работа № 4.................................................................................... 24

Лабораторная работа № 5.................................................................................... 32

Лабораторная работа № 6, 7................................................................................. 37

Лабораторная работа № 8,9.................................................................................. 45

Лабораторная работа № 10................................................................................... 49

Лабораторная работа № 11................................................................................... 58

Лабораторная работа № 12,13.............................................................................. 63

Критерии оценивания лабораторной работы....................................................... 70

Список использованных источников................................................................... 71

Пояснительная записка

Данные методические указания к выполнению лабораторных работ составлены в соответствии с ФГОС по специальности СПО 09.02.03 «Программирование в компьютерных системах» по междисциплинарному курсу «Web-программирование».

С целью овладения указанным видом профессиональной деятельности и соответствующими профессиональными компетенциями обучающийся в ходе освоения междисциплинарного курса должен:

уметь:

- использовать графические программы для создания чертежей структуры web-сайта;

- использовать графические редакторы для обработки изображений, размещаемых на web-сайте;

- использовать язык гипертекстовой разметки HTML и каскадные таблицы стилей CSS для создания web-страниц;

- создавать динамические web-страницы;

- использовать технологию создания web-приложений ASP.NET.

знать:

- технологии создания web-сайта как статичной информационной системы;

- технологии создания web-сайта как динамичной информационной системы;

- теорию использования графики на web-страницах;

- методы обработки и редактирования цифровых изображений;

- программные средства для создания баз данных;

- программные средства, используемые для размещения и сопровождения web-страниц.

Перечень лабораторных работ

№	Тема лабораторной работы
1	Установка и настройка ПО. Операторы в языке PHP
2	Основы клиент-серверных технологий. HTML-формы и отправка данных с ее помощью
3	Обработка массивов данных
4	Обработка циклов и условий
5	Проектирование базы данных. Установка соединения с базой данных
6	Создание базы данных MySQL
7	Создание страницы для добавления, удаления, редактирования записей базы данных
8	Установка темы. Добавление и удаление содержимого. Создание основной и дополнительных страниц
9	Работа с плагинами. Создание меню
10	Работа с плагинами. Создание фото- и видеогалереи. Виджеты социальных сетей. Счетчик посещений
11	Работа с плагинами. Создание формы обратной связи. Подключение онлайн-чата. Функция обратного звонка
12	Работа с плагинами. Создание интернет-магазина
13	Работа с плагинами. Создание интернет-магазина

ЛАБОРАТОРНАЯ РАБОТА № 1
тема: «Установка и настройка ПО. Операторы в языке PHP»

Цель лабораторной работы:

- освоение основных приемов работы с платформой OpenServer;

- изучение основ языка серверного скриптования PHP;

- развитие познавательного интереса;

- формирование универсальных учебных действий, связанных с поиском информации, необходимой для решения поставленной задачи.

Оборудование и программное обеспечение: ПК, ОС MS Windows 7 (10), офисный пакет MS Office, браузер, блокнот.

Количество часов: 2 часа.

Задание на лабораторную работу:

1) Установить программную платформу OpenServer.

2) Создать файл index.php.

3) Создать файл work1.php, который будет содержать информацию об интерпретаторе PHP.

4) Создать файл work2.php, который будет выполнять арифметические операции над числами.

5) Оформить отчет по лабораторной работе.

Установка OpenServer

Open Server – это программная платформа для web-специалистов, обеспечивающая создание и функционирование в среде Windows полноценного сервера. Это сборка всех необходимых компонентов, с помощью которой можно создавать сайты любой сложности, посредством любой выбранной CMS. Созданные таким образом сайты в дальнейшем (по мере готовности) переносятся на платные хостинги.

Ключевые преимущества OpenServer:

- бесплатность;

- портативность, полная независимость от среды Windows текущего компьютера и возможность работы с сервером на внешних накопителях с любого другого устройства;

- функциональность, в частности, поддержка двух HTTP-модулей - Apache и Nginx;

- ряд утилит для удобной работы с компонентами сборки (MySQL, PHP);

- актуальные версии входящих в состав компонентов;

- удобное управление сервером.

Скачать OpenServer можно с сайта разработчиков: https://ospanel.io/download/

Рисунок 1

Скачанный архив необходимо распаковать в любое место на несистемном разделе диска.

Рисунок 2

После распаковки необходимо пройти по указанному пути и запустить OpenServer с помощью EXE-файла для соответствующей разрядности Windows. В небольшом окне появится выбор языка платформы.

Рисунок 3

Далее будет предложено установить среду Microsoft Visual C++. После установки Microsoft Visual C++ компьютер будет перезагружен. Доступ к функционалу платформы станет доступен в меню, появляющемся на её значке в системном трее. Запуск сервера осуществляется опцией с зелёным флажком «Запустить».

Рисунок 4

Методика выполнения лабораторной работы

Шаг 1. Создать в каталоге «domains» установленного «OpenServer» папку «StudyPHPSerikbaeva». Вместо Serikbaeva указать свою фамилию, написанную английскими буквами.

В этом каталоге будут размещены все файлы и подкаталоги, созданные во время выполнения лабораторных работ. После создания каталога необходимо перезапустить OpenServer.

После перезапуска в разделе «Мои сайты» появится ссылка на созданный ресурс.

Шаг 2. Создать для более удобного доступа к выполняемым лабораторным работам стартовую страницу проекта.

Через проводник Windows в каталоге проекта необходимо создать обычный текстовый документ и переименовать его в «index.php». На этой стартовой странице проекта будут размещены ссылки на работы и их краткое описание.

Код страницы index.php:

<html>

<head>

<title>"Web-программирование" (Серикбаева Ж.К.)</title>

</head>

<body>

<p>Здесь представлены лабораторные работы, выполненные на занятиях по междисциплинарному курсу "Web-программирование" Серикбаевой Жанат Куанышбековной.

<dl>

<dt><a rel="nofollow ugc" target="_blank" href="work1.php">Работа 1 - Версия PHP</a></dt>>

<dd>Вызывается функция phpinfo, которая возвращает информацию об интерпретаторе PHP, установленном в данном HTTP-сервере.</dd>

</dl>

</body>

</html>

При выполнении работы необходимо указать свою группу и ФИО. Список ссылок оформить в виде списка определений. Ссылки на другие работы оформить аналогичным образом.

Шаг 3. Создать файл «work1.php», который должен содержать следующий код:

<html>

<head>

<title>"Web-программирование" (Серикбаева Ж.К.) - Работа 1 </title>

</head>

<body>

<?php

echo "<p><a href='index.php'>К содержанию</a>";

phpinfo();

</body>

</html>

Выполнить все необходимые действия, для того чтобы текст отображался нормально. Сохранить изменения.

В данном коде «<?php» и «?>» используются для обрамления скрипта на языке PHP.

С помощью данной команды «echo "<p><a href='index.php'>К содержанию</a>";» в документ добавляется ссылка на главную страницу, оформленная с помощью элементов гипертекстовой разметки.

Функция «phpinfo();» возвращает информацию об интерпретаторе PHP. Запустить проект (рисунок 7).

Рисунок 7 – Главная страница проекта

Далее необходимо открыть ссылку на первую работу, на экране отобразится следующее окно (рисунок 8):

Рисунок 8 – Работа № 1

Шаг 4. Создать файл «work2.php», который должен содержать следующий код:

<html>

<head>

<title>"Web-программирование" (Серикбаева Ж.К.) - Работа 2 </title>

</head>

<body>

<?php

echo "<p><a href='index.php'>К содержанию</a>";

$a=10;

$b=20;

$c=$a+$b;

echo "<p>a=".$a;

echo "<p>b=".$b;

echo "<p>a+b=".$c;

echo "<p>$a+$b=$c";

echo '<p>$a+$b=$c';

echo "<p>$a+$b=".($a+$b);

echo "<p>$a-$b=".($a-$b);

echo "<p>$a*$b=".($a*$b);

echo "<p>$a/$b=".($a/$b);

</body>

</html>

В данном коде следует обратить внимание на следующее: все переменные в PHP начинаются с символа «$»; операция сложения строк (операция конкатенации) обозначается с помощью «.»; выводить текст можно как в двойных, так и в одинарных кавычках.

Шаг 5. Создать ссылку на эту работу в стартовой странице, в списке определений по аналогии с первой работой - «Работа 2 – Математические функции», в описании указать «Использование переменных, использование простых математических операторов, вывод результатов».

Шаг 6. Сохранить изменения во всех файлах и запустить проект.

Шаг 7. Добавить в данный файл несколько новых математических выражений на выбор. Отобразить результат.

Структура отчета:

1) название, цель лабораторной работы;

2) перечень заданий на лабораторную работу;

3) коды страниц work1.php и work2.php;

4) ответы на контрольные вопросы.

Контрольные вопросы:

1) Что такое РНР?

2) Каким образом в РНР увеличивают и уменьшают числа на 1?

3) Для чего предназначена программная платформа OpenServer?

4) Что используют для обрамления скрипта на языке PHP?

ЛАБОРАТОРНАЯ РАБОТА № 2
тема: «Основы клиент-серверных технологий.

HTML-формы и отправка данных с ее помощью»

Цель лабораторной работы:

- получение практических навыков в создании php-скриптов для обработки данных, вводимых в HTML-форму;

- развитие познавательного интереса;

Оборудование и программное обеспечение: ПК, ОС MS Windows 7 (10), офисный пакет MS Office, браузер, блокнот.

Количество часов: 2 часа.

Задание на лабораторную работу:

1) Согласно методическим указаниям выполнить разработку необходимых форм и скриптов для их обработки.

2) Оформить отчет по лабораторной работе.

Краткая теория

Для передачи данных на сервер в языке HTML есть специальная конструкция – формы. Формы предназначены для того, чтобы получать от пользователя информацию. Данные, записанные в форму, отправляются для обработки специальной программе (например, скрипту на PHP) на сервере. В зависимости от введенных пользователем данных эта программа может формировать различные web-страницы, отправлять запросы к базе данных, запускать различные приложения и т.п.

Для создания формы в языке HTML используется тег FORM. Внутри него находится одна или несколько команд INPUT. С помощью атрибутов ACTION и METHOD тега FORM задаются имя программы, которая будет обрабатывать данные формы, и метод запроса, соответственно. Команда INPUT определяет тип и различные характеристики запрашиваемой информации. Отправка данных формы происходит после нажатия кнопки INPUT типа SUBMIT.

………

</form>

Данные формы будет обрабатывать файл 1.php, при отправке запроса будет использован метод POST.

При отправке данных формы с помощью метода GET содержимое формы добавляется к URL после знака вопроса в виде пар имя=значения, объединенных с помощью &:

action?name1=value1&name2=value2&name3=value3

Здесь action – это URL-адрес программы, которая должна обрабатывать форму (это либо программа, заданная в атрибуте action тега form, либо сама текущая программа, если этот атрибут опущен). Имена name1, name2, name3 соответствуют именам элементов формы, а value1, value2, value3 – значениям этих элементов. Все специальные символы, включая = и &, в именах или значениях этих параметров будут опущены. Поэтому не стоит использовать в названиях или значениях элементов формы эти символы и символы кириллицы в идентификаторах.

Для кнопок типа checkbox и radiobutton значение value определяется атрибутом VALUE в том случае, когда кнопка отмечена. Не отмеченные кнопки при составлении строки запроса игнорируются. Несколько кнопок типа checkbox могут иметь один атрибут NAME (и различные VALUE), если это необходимо. Кнопки типа radiobutton предназначены для одного из всех предложенных вариантов и поэтому должны иметь одинаковый атрибут NAME и различные атрибуты VALUE.

Для метода POST содержимое формы кодируется точно так же, как для метода GET, но вместо добавления строки к URL содержимое запроса посылается блоком данных как часть операции POST. Если присутствует атрибут ACTION, то значение URL, которое там находится, определяет, куда посылать этот блок данных. Этот метод рекомендуется для передачи больших по объему блоков данных.

Передать данные методом POST можно только с помощью HTML формы, поскольку данные передаются в теле запроса, а не в заголовке, как в GET.

Основное преимущество POST запросов – это их большая безопасность и функциональность по сравнению с GET-запросами. Поэтому метод POST чаще используют для передачи важной информации, а также информации большого объема.

Методика выполнения лабораторной работы

Задание 1. Рассмотреть пример создания формы (index.html), в которую пользователем вводятся данные: Имя; Фамилия; Адреса электронной почты; Текст комментария.

Рисунок 1 - index.html

<html>

<head>

<table>

<tr><td>Фамилия</td><td><input type=text name="LastName" size=20></td></tr>

<tr><td> Комментарий</td><td><textarea name="Comments" rows=5 cols=40></textarea></td></tr>

</table>

</form></body></html>

Затем PHP-сценарий (handleform.php) получает данные из формы и отображает извлеченные данные в окне браузера.

Рисунок 2 - handleform.php

<html>

<head>

<title> Form result</title>

</head>

<?PHP

print("Ваше имя: $_POST[FirstName] <br>");

print("Ваша фамилия: $_POST[LastName] <br>");

print("Ваш e-mail: $_POST[Email] <br>");

print("Ваш комментарий: $_POST[Comments] <br>");

print("Щелкните <A href=myhello.php?FirstName=$_POST[FirstName]&Lastname=$_POST[LastName]> ссылку </a>, чтобы увидеть персональное приветствие!");

</body> </html>

Далее сценарий при щелчке на ссылке, генерирует отправку еще одного PHP-файла (myhello.php), который отображает персональное приветствие пользователю.

Рисунок 3 - myhello.php

<html>

<head>

<title>Greetings!!!!</title>

</head>

<body>

<?PHP

print("<center> Здравствуйте $_GET[FirstName] $_GET[Lastname] !!!</center>"); ?>

</body> </html>

Задание 2. Создать HTML-документ, который будет содержать форму с двумя полями для ввода чисел и переключатель, который будет определять, какое действие надо выполнить с числами (сложить или перемножить).

а: <INPUT type="text" name="a" size="3">

+ <INPUT type="radio" name="d" value="plus">

или * <INPUT type="radio" name="d" value="umnozh">

b: <INPUT type="text" name="b" size="3">

</FORM>

Сохранить файл под именем f2.html и проверить его работоспособность. Создать php-файл f2_p.php, обрабатывающий данные из формы:

if ($_POST["d"]=="plus") {

$c=$_POST["a"]+$_POST["b"];

echo ("Сумма чисел = $c");

} else {

$c=$_POST["a"]*$_POST["b"];

echo ("Произведение чисел = $c");

}

echo ("<BR> <A href='f2.html'> Вернуться назад </A>");

Проверить работоспособность формы.

Задание 3. Создать новый HTML-документ, содержащий форму с двумя текстовыми полями для ввода фамилии и имени, список для выбора формы обращения («господин», «госпожа», «товарищ»), а также кнопку отправки данных обработчику.

<P> Фамилия: <INPUT type="text" name="f" size="15">

<P> Форма обращения: <BR>

<OPTION VALUE="1" SELECTED> господин

<OPTION VALUE="2"> госпожа

<OPTION VALUE="3"> товарищ

</SELECT>

</FORM>

Сохранить файл под именем f3.html и проверить его работоспособность. Создать php-файл f3_p.php для обработки данной страницы:

$s3=($_POST["f"]." ".$_POST["n"]);

$s4=". Мы рады приветствовать вас на нашем сайте.";

switch ($_POST["z"]) {

case 1:

$s1="Уважаемый ";

$s2="господин ";

break;

case 2:

$s1="Уважаемая ";

$s2="госпожа ";

break;

case 3:

$s1="Уважаемый ";

$s2="товарищ ";

break;

}

echo ($s1 . $s2 . $s3 . $s4);

Проверить работоспособность формы.

Задание 4. Добавить в HTML-документ f3.html многострочную область для ввода дополнительной информации о пользователе. Сохранить документ под именем f4.html и проверить его работоспособность. В php-файл f3_p.php добавить код для вывода содержимого текстовой области. Сохранить результат под именем f4_p.php и проверить работу обработчика.

Рисунок 4

Структура отчета:

1) название, цель лабораторной работы;

2) перечень заданий на лабораторную работу;

3) коды страниц index.html, handleform.php, myhello.php;

4) ответы на контрольные вопросы.

Контрольные вопросы:

1) Для чего предназначены HTML-формы?

2) Что задают атрибуты ACTION и METHOD тега FORM?

3) Отличие метода POST от метода GET.

ЛАБОРАТОРНАЯ РАБОТА № 3
тема: «Обработка массивов данных»

Цель лабораторной работы:

- отработка навыков создания сценариев РНР по базовым операциям обработки массивов;

- развитие познавательного интереса;

Оборудование и программное обеспечение: ПК, ОС MS Windows 7 (10), офисный пакет MS Office, браузер, блокнот.

Количество часов: 2 часа.

Задание на лабораторную работу:

1) В каталоге domains создать папку massivphp2.

2) Создать файл index.html, который будет содержать номер и название лабораторной работы, ФИО студентов, номер группы. Файл должен содержать ссылки на файлы с решением каждой задачи. Предусмотреть ссылку перехода на главный файл.

Задачи:

Даны два массива: первый с элементами 1, 2, 3, второй с элементами 'a', 'b', 'c'. Сделать из них массив с элементами 1, 2, 3, 'a', 'b', 'c'.

Дан массив с элементами 1, 2, 3, 4, 5. С помощью функции array_slice создать из него массив $result с элементами 2, 3, 4.

Дан массив '3'=>'a', '1'=>'c', '2'=>'e', '4'=>'b'. Попробовать на нем различные типы сортировок.

Дан массив [1, 2, 3, 4, 5]. С помощью функции array_splice преобразовать массив в [1, 4, 5].

Дан массив [1, 2, 3, 4, 5]. С помощью функции array_splice записать в новый массив элементы [2, 3, 4].

Дан массив 'a'=>1, 'b'=>2, 'c'=>3'. Записать в массив $keys ключи из этого массива, а в $values – значения.

Даны два массива: ['a', 'b', 'c'] и [1, 2, 3]. Создать с их помощью массив 'a'=>1, 'b'=>2, 'c'=>3'.

Дан массив с элементами 'a'=>1, 'b'=>2, 'c'=>3. Отобразить на экране случайный ключ из данного массива.

Дан массив с элементами 'a'=>1, 'b'=>2, 'c'=>3. Отобразить на экране случайный элемент данного массива.

Дан массив $arr. Перемешать его элементы в случайном порядке.

Заполнить массив числами от 1 до 25 с помощью range, а затем перемешать его элементы в случайном порядке.

Дан массив с элементами 'a', 'b', 'c', 'b', 'a'. Удалить из него повторяющиеся элементы.

3) Оформить отчет по лабораторной работе.

Методика выполнения лабораторной работы

Функция range создает массив с диапазоном элементов. К примеру, можно создать массив, заполненный числами от 1 до 100 или буквами от 'a' до 'z'.

Синтаксис: range(откуда, докуда, [шаг]);

Создание массива, заполненного числами от 1 до 5:

<?php

var_dump(range(1, 5));

Результат выполнения кода:

[1, 2, 3, 4, 5]

Создание массива, заполненного числами от 5 до 1:

<?php

var_dump(range(5, 1));

Результат выполнения кода:

[5, 4, 3, 2, 1]

Создание массива, заполненного числами от 0 до 10 c шагом 2:

<?php

var_dump(range(0, 10, 2));

Результат выполнения кода:

[0, 2, 4, 6, 8, 10]

Создание массива, заполненного буквами от 'a' до 'e':

<?php

var_dump(range('a', 'e'));

Результат выполнения кода:

['a', 'b', 'c', 'd', 'e']

Функция array_merge сливает два и более массивов вместе. Если в сливаемых массивах встречаются одинаковые ключи - останется только один из таких элементов.

Синтаксис: array_merge(первый массив, второй массив...);

Соединение двух массивов:

<?php

$arr1 = ['a', 'b', 'c', 'd', 'e'];

$arr2 = [1, 2, 3, 4, 5];

$result = array_merge($arr1, $arr2);

var_dump($result);

Результат выполнения кода:

['a', 'b', 'c', 'd', 'e', 1, 2, 3, 4, 5]

Функция array_slice отрезает и возвращает часть массива. При этом сам массив не меняется. Первым параметром указывается массив для разрезания. Вторым параметром указывается, с какого элемента начинать отрезание, а третьим - сколько элементов отрезать. Третий параметр может быть отрицательным - в этом случае отсчет начнется с конца (-1 - последний элемент, -2 - предпоследний и так далее). Третий параметр можно вообще не указывать - в этом случае массив отрежется до самого конца.

Последний необязательный параметр регулирует сохранять ли ключи при отрезании, true - сохранять, false (по умолчанию) - не сохранять. Строковые ключи сохраняются, независимо от значения этого параметра.

Синтаксис: array_slice(массив, откуда отрезать, [сколько], [сохранять ключи = true]);

Вырезание элементов с первого (имеет номер 0), 3 элемента:

<?php

$arr = ['a', 'b', 'c', 'd', 'e'];

$result = array_slice($arr, 0, 3);

var_dump($result);

Результат выполнения кода:

['a', 'b', 'c']

Вырезание элементов со второго (имеет номер 1), 3 элемента:

<?php

$arr = ['a', 'b', 'c', 'd', 'e'];

$result = array_slice($arr, 1, 3);

var_dump($result);

Результат выполнения кода:

['b', 'c', 'd']

Вырезание элементов со второго (имеет номер 1) до конца массива. Для этого третий параметр не указывается:

<?php

$arr = ['a', 'b', 'c', 'd', 'e'];

$result = array_slice($arr, 1);

var_dump($result);

Результат выполнения кода:

['b', 'c', 'd', 'e']

Вырезание элементов с предпоследнего, 2 элемента. Для этого второй параметр устанавливается в -2 (позиция предпоследнего элемента):

<?php

$arr = ['a', 'b', 'c', 'd', 'e'];

$result = array_slice($arr, -2, 2);

var_dump($result);

Результат выполнения кода:

['d', 'e']

По умолчанию массив не сохраняет ключи при вырезании:

<?php

$arr = [1 => 'a', 2 => 'b', 3 => 'c', 4 => 'd', 5 => 'c'];

$result = array_slice($arr, 0, 3);

var_dump($result);

Результат выполнения кода:

['a', 'b', 'c']

Для того, чтобы сохранить ключи, необходимо последний параметр установить как true:

<?php

$arr = [1 => 'a', 2 => 'b', 3 => 'c'];

$result = array_slice($arr, 0, 3, true);

var_dump($result);

Результат выполнения кода:

[1 => 'a', 2 => 'b', 3 => 'c']

Строковые ключи сохраняются при вырезании:

<?php

$arr = ['a' => 1, 'b' => 2, 'c' => 3, 'd' => 4, 'e' => 5];

$result = array_slice($arr, 0, 3);

var_dump($result);

Результат выполнения кода:

['a' => 1, 'b' => 2, 'c' => 3]

Функция array_splice отрезает и возвращает часть массива. При этом отрезанная часть исчезает из массива. Вместо отрезанной части можно вставлять новые элементы.

Первым параметром указывается массив для разрезания. Вторым параметром указывается, с какого элемента начинать отрезание, а третьим - сколько элементов отрезать. Третий параметр может быть отрицательным - в этом случае отсчет начнется с конца (-1 - последний элемент, -2 - предпоследний и так далее). Третий параметр можно вообще не указывать - в этом случае массив отрежется до самого конца.

В последнем необязательным параметром можно задавать массив элементов, которые будут вставлены взамен удаленных.

Синтаксис: array_splice(массив, откуда отрезать, [сколько], [вставить взамен]);

Вырезание элементов с первого (имеет номер 0), 3 элемента:

<?php

$arr = ['a', 'b', 'c', 'd', 'e'];

$result = array_splice($arr, 0, 3);

var_dump($result);

Результат выполнения кода:

['a', 'b', 'c']

При этом массив $arr станет выглядеть так:

['d', 'e']

Вырезание элементов со второго (имеет номер 1), 3 элемента:

<?php

$arr = ['a', 'b', 'c', 'd', 'e'];

$result = array_splice($arr, 1, 3);

var_dump($result);

Результат выполнения кода:

['b', 'c', 'd']

При этом массив $arr станет выглядеть так:

['a', 'e']

Вырезание элементов со второго (имеет номер 1) до конца массива. Для этого третий параметр не указывается:

<?php

$arr = ['a', 'b', 'c', 'd', 'e'];

$result = array_splice($arr, 1);

var_dump($result);

Результат выполнения кода:

['b', 'c', 'd', 'e']

При этом массив $arr станет выглядеть так:

['a']

<?php

$arr = ['a', 'b', 'c', 'd', 'e'];

$result = array_splice($arr, -2, 2);

var_dump($result);

Результат выполнения кода:

['d', 'e']

При этом массив $arr станет выглядеть так:

['a', 'b', 'c']

Вырезание элементов со второго (имеет номер 1), 2 элемента, а взамен должны быть вставлены элементы 1, 2, 3:

<?php

$arr = ['a', 'b', 'c', 'd', 'e'];

$result = array_splice($arr, 1, 2, [1, 2, 3]);

var_dump($result);

Результат выполнения кода:

['b', 'c']

При этом массив $arr станет выглядеть так:

['a', 1, 2, 3, 'd', 'e']

Для того, чтобы просто вставить элементы 1, 2, 3 начиная с позиции 1, необходимо третий параметр поставить в ноль:

<?php

$arr = ['a', 'b', 'c', 'd', 'e'];

$result = array_splice($arr, 1, 0, [1, 2, 3]);

var_dump($result);

Результат выполнения кода:

[]

При этом массив $arr станет выглядеть так:

['a', 1, 2, 3, 'b', 'c', 'd', 'e']

Функция array_keys получает ключи массива и записывает их в новый массив.

Синтаксис: array_keys(массив);

Получение ключей из массива:

<?php

$arr = ['a'=>1, 'b'=>2, 'c'=>3, 'd'=>4, 'e'=>5];

$result = array_keys($arr);

var_dump($result);

Результат выполнения кода:

['a', 'b', 'c', 'd', 'e']

Функция array_values выбирает все значения из массива.

Синтаксис: array_values(массив);

Получение всех значений массива:

<?php

$arr = ['a'=>1, 'b'=>2, 'c'=>3, 'd'=>4, 'e'=>5];

var_dump(array_values($arr));

Результат выполнения кода:

[1, 2, 3, 4, 5]

Функция array_combine осуществляет слияние двух массивов в один ассоциативный. Первым параметром функция принимает массив будущих ключей, а вторым - массив будущих значений.

Синтаксис: array_combine(массив ключей, массив значений);

Пример соединения двух массивов в один ассоциативный. При этом соответствующие элементы из первого массива станут ключами элементов из второго массива:

<?php

$keys = ['a' , 'b', 'c', 'd', 'e'];

$elems = [1, 2, 3, 4, 5];

$result = array_combine($keys, $elems);

var_dump($result);

Результат выполнения кода:

['a'=>1, 'b'=>2, 'c'=>3, 'd'=>4, 'e'=>5]

Для сортировки массивов в PHP существует несколько функций: sort - по возрастанию элементов, rsort - по убыванию элементов, asort - по возрастанию элементов с сохранением ключей, arsort - по убыванию элементов с сохранением ключей, ksort - по возрастанию ключей, krsort - по убыванию ключей, usort - по функции по элементам, uasort - по функции по элементам с сохранением ключей, uksort - по функции по ключам, natsort - натуральная сортировка.

Все эти функции изменяют сам массив - это значит, что результат не нужно никуда присваивать: поменяется сам массив.

Синтаксис: sort(массив);

Сортировка массива по возрастанию элементов:

<?php

$arr = [1, 3, 2, 5, 4];

sort($arr);

var_dump($arr);

Результат выполнения кода:

[1, 2, 3, 4, 5]

Функция array_rand возвращает случайный ключ из массива. Первым параметром задается массив, а второй необязательный параметр указывает, сколько случайных ключей следует вернуть. Если он не указан - возвращается один ключ, а если указан - заданное количество ключей в виде массива.

Синтаксис: array_rand(массив, [сколько ключей выбрать]);

В данном примере функция вернет случайный ключ из массива:

<?php

$arr = ['a'=>1, 'b'=>2, 'c'=>3, 'd'=>4, 'e'=>5];

echo array_rand($arr);

Результат выполнения кода:

'c'

Возврат случайного элемента из массива, зная случайный ключ:

<?php

$arr = ['a'=>1, 'b'=>2, 'c'=>3, 'd'=>4, 'e'=>5];

$key = array_rand($arr);

echo $arr[$key];

Результат выполнения кода:

Функция shuffle осуществляет перемешивание массива так, чтобы его элементы шли в случайном порядке. При этом функция изменяет сам массив: это значит, что результат работы функции не нужно никуда присваивать - изменения произойдут над самим массивом.

Синтаксис: shuffle(массив);

Перемешивание элементов массива в случайном порядке:

<?php

$arr = [1, 2, 3, 4, 5];

shuffle($arr);

var_dump($arr);

Заполнение массива числами от 1 до 10 так, чтобы они шли в случайном порядке и не повторялись. Для этого генерируется массив с числами от 1 до 10 с помощью range и с помощью shuffle происходит его перемешивание:

<?php

$arr = range(1, 10);

shuffle($arr);

var_dump($arr);?>

Создание списка, заполненного случайными числами от 1 до 10:

<?php

$arr = range(1, 10);

shuffle($arr);

echo '<ul>';

foreach ($arr as $elem) {

echo '<li>'.$elem.'</li>';

}

echo '</ul>';

Функция array_unique осуществляет удаление повторяющихся элементов (дублей) из массива.

Синтаксис: array_unique(массив);

Удалим дубли из массива:

<?php

$arr = [1, 1, 1, 2, 2, 3];

var_dump(array_unique($arr));

Результат выполнения кода:

[1, 2, 3]

Функция array_count_values производит подсчет количества всех значений массива. Возвращает ассоциативный массив, в котором ключами будут элементы массива, а значениями - их количество в массиве.

Синтаксис: array_count_values(массив);

Пример подсчета количества всех значений массива:

<?php

$arr = ['a', 'a', 'a', 'b', 'b', 'c'];

var_dump(array_count_values($arr));

Результат выполнения кода:

['a'=>3, 'b'=>2, 'c'=>1]

Функция array_intersect вычисляет пересечение массивов - возвращает массив из элементов, которые есть во всех массивах, переданных в функцию.

Синтаксис: array_intersect(массив, массив, массив...);

Поиск элементов, которые есть и в одном, и в другом массиве (это 3, 4, 5):

<?php

$arr1 = [1, 2, 3, 4, 5];

$arr2 = [3, 4, 5, 6, 7];

$result = array_intersect($arr1, $arr2);

var_dump($result);

Результат выполнения кода:

[3, 4, 5]

Структура отчета:

1) название, цель лабораторной работы;

2) перечень заданий на лабораторную работу;

3) коды php сценариев с решением задач;

4) ответы на контрольные вопросы.

Контрольные вопросы:

1) Назначение следующих функций в PHP:

range

array_merge

array_slice

array_splice

array_keys

array_values

array_combine

array_rand

shuffle

array_unique

array_count_values

array_intersect

2) Какие существуют способы объявления массива в PHP?

3) Как отсортировать массив?

ЛАБОРАТОРНАЯ РАБОТА № 4
тема: «Обработка циклов и условий»

Цель лабораторной работы:

- отработка навыков создания сценариев РНР по базовым операциям обработки циклов и условий;

- развитие познавательного интереса;

Оборудование и программное обеспечение: ПК, ОС MS Windows 7 (10), офисный пакет MS Office, браузер, блокнот.

Количество часов: 2 часа.

Задание на лабораторную работу:

Согласно методическим указаниям выполнить разработку сценариев PHP для обработки циклов и условий.

1) В каталоге domains/localhost создать папку massivphp2.

Задача 1: Вхождение числа в диапазон

Диапазон значений, определяется константами MIN = 10, MAX = 50. Написать программу, которая проверяет вхождение переменной x в диапазон (больше MIN, меньше MAX). Если х входит в диапазон, вывести сообщение "+", иначе вывести сообщение "-". Если х находится на границе диапазона (х = 10 или х = 50), вывести сообщение "+-".

Подставить произвольные значения переменной х для проверки работы программы. Для создания константы использовать функцию define ( string name, mixed value).

Задача 2: Квадратное уравнение

Решить квадратное уравнение. Определить значения переменных $a, $b, $c произвольными числовыми значениями. По формуле вычислить дискриминант (D).

Используя условный оператор (if, elseif, else) сравнить значение D c 0:

Если D > 0, вычислить и напечатать 2 корня уравнения (x1, x2)

Если D = 0, вычислить 1 корень (х)

Если D < 0, отобразить сообщение: "Нет корней"

Задача 3: Равенство чисел

Среди трех произвольно выбранных чисел вычислить среднее. Если среди чисел есть равные, вывести сообщение "Ошибка".

Например: Дано: а = 2, b = 4, c = 3; Результат: "Среднее число: с = 3".

Задание 4: Дни недели

Создать переменную $day и присвоить ей произвольное числовое значение.

С помощью конструкции switch отобразить фразу «Это рабочий день», если значение переменной $day попадает в диапазон чисел от 1 до 5 (включительно).

Отобразить фразу «Это выходной день», если значение переменной $day равно числам 6 или 7.

Отобразить фразу «Неизвестный день», если значение переменной $day не попадает в диапазон чисел от 1 до 7 (включительно).

Дополнить код:

...

switch(...){

case 1:

case 2:

...

echo "Это рабочий день";

break;

case 6:

...

default:

...

}

Задание 5: Таблица умножения

Этап 1

Создать две числовые переменные cols и rows. Присвоить созданным переменным произвольные значения в диапазоне от 1 до 10.

Этап 2

Используя циклы, отрисовать таблицу умножения в виде HTML-таблицы на следующих условиях:

- число столбцов должно быть равно значению переменной cols;

- число строк должно быть равно значению переменной rows;

- ячейки на пересечении столбцов и строк должны содержать значения, являющиеся произведением порядковых номеров столбца и строки;

- рекомендуется использовать циклы for.

Этап 3

Значения в ячейках первой строки и первого столбца должны быть отрисованы полужирным шрифтом. Фоновый цвет ячеек первой строки и первого столбца должен быть отличным от фонового цвета таблицы. Сохранить файл.

Дополнить код:

<?php

$rows=9;

$cols=9;

for($tr=1; ...; ...){

echo "<tr>";

for($td=1; ...; ...){

if(...){

echo "<th style='background-color:yellow;font-weight:900'>",

$tr * $td, "</th>";

}else{

echo "<td>", $tr * $td, "</td>";

}

echo "</tr>";

}

</table>

Задание 6: Навигационное меню

Нарисовать (добавить) навигационное меню на странице, типа:

a href="contact.php">Contact</a> используя массив в качестве структуры меню.

Алгоритм:

Создать ассоциативный массив $menu. Заполнить массив, соблюдая следующие условия:

- индексом элемента массива является пункт меню, например: Home, About, Contact…

- значением элемента массива является имя файла, на который будет указывать ссылка, например: index.php, about.php, contact.html…

- используя цикл foreach отрисовать вертикальное меню, структура которого описана в массиве $menu.

3) Оформить отчет по лабораторной работе.

Методика выполнения лабораторной работы

Условные операторы используются для выполнения различных действий, основанных на различных условиях.

В PHP есть следующие условные операторы:

if инструкция - выполняет некоторый код, если одно условие истинно;

if...else инструкция - выполняет некоторый код, если условие истинно и другой код, если это условие ложно;

if...elseif....else инструкция - выполняет различные коды для более двух условий;

switch инструкция - выбор одного из множества блоков кода, которые будут выполняться.

If инструкция выполняет некоторый код, если одно условие имеет значение true.

if (condition) {

code to be executed if condition is true;

}

В приведенном ниже примере будет выведено "Хорошего дня!", если текущее время (час) меньше 20:

<?php
$t = date("H");
if ($t < "20") {
echo "Have a good day!";
}
?>

if....else инструкция выполняет некоторый код, если условие истинно и другой код, если это условие ложно.

if (condition) {
code to be executed if condition is true;
} else {
code to be executed if condition is false;
}

В приведенном ниже примере будет выведено "Хорошего дня!", если текущее время меньше 20, и "Спокойной ночи!" в противном случае:

<?php
$t = date("H");
if ($t < "20") {
echo "Have a good day!";
} else {
echo "Have a good night!";
}
?>

if....elseif...else инструкция выполняет различные коды для более двух условий.

if (condition) {
  code to be executed if this condition is true;
} elseif (condition) {
    code to be executed if this condition is true;
} else {
  code to be executed if all conditions are false;
}

Пример:

<?php
$t = date("H");
if ($t < "10") {
    echo "Have a good morning!";
} elseif ($t < "20") {
    echo "Have a good day!";
} else {
    echo "Have a good night!";
}
?>

Пример использования switch инструкции для выбора одного из множества блоков кода, которые должны быть выполнены.

switch (n) {
    case label1:
        code to be executed if n=label1;
      break;
case label2:
      code to be executed if n=label2;
      break;
case label3:
      code to be executed if n=label3;
      break;
...
    default:
        code to be executed if n is different from all labels;
}

<?php
$favcolor = "red";
switch ($favcolor) {
    case "red":
        echo "Your favorite color is red!";
        break;
    case "blue":
        echo "Your favorite color is blue!";
        break;
    case "green":
        echo "Your favorite color is green!";
        break;
    default:
        echo "Your favorite color is neither red, blue, nor green!";
}
?>

Часто при написании кода требуется, чтобы один и тот же блок кода перезапускались снова и снова в строке. Вместо добавления нескольких почти равных строк кода в скрипт, можно использовать циклы для выполнения таких задач.

В PHP есть следующие циклические операторы:

while - циклы через блок кода до тех пор, пока указанное условие истинно

do...while - циклы через блок кода один раз, а затем повторяет цикл до тех пор, пока указанное условие истинно

for - циклы через блок кода указанное количество раз

foreach - циклы по блоку кода для каждого элемента массива

While цикл выполняет блок кода до тех пор, пока указанное условие имеет значение true.

while (condition is true) {
code to be executed;
}

В приведенном ниже примере сначала устанавливается переменная $x 1 ($x = 1). Затем цикл while продолжит выполняться до тех пор, пока $x меньше или равен 5 ($x < = 5). $x будет увеличиваться на 1 при каждом запуске цикла ($x + +):

<?php
$x = 1;
while($x <= 5) {
echo "The number is: $x <br>";
$x++;
}
?>

Do...while цикл всегда будет выполнять блок кода один раз, он будет проверять условие и повторять цикл, пока указанное условие имеет значение true.

do {
code to be executed;
} while (condition is true);

В приведенном ниже примере сначала устанавливается переменная $x 1 ($x = 1). Затем цикл do while будет записывать некоторые выходные данные, а затем увеличивать переменную $x с 1. Затем проверяется условие ($x меньше или равно 5?), и цикл продолжит выполняться до тех пор, пока $x меньше или равен 5:

<?php
$x = 1;
do {
echo "The number is: $x <br>";
$x++;
} while ($x <= 5);
?>

В приведенном ниже примере устанавливается переменная $x 6, затем выполняется цикл, а затем проверяется состояние:

<?php
$x = 6;
do {
echo "The number is: $x <br>";
$x++;
} while ($x <= 5);
?>

For цикл используется, когда заранее известно, сколько раз должен выполняться сценарий.

for (init counter; test counter; increment counter) {
code to be executed;
}

Параметры:

init counter: Инициализировать значение счетчика цикла

test counter: Вычисляется для каждой итерации цикла. Если он вычисляется как true, цикл продолжается. Если он вычисляется как false, цикл заканчивается.

increment counter: Увеличивает значение счетчика цикла

В приведенном ниже примере отображаются числа от 0 до 10:

<?php
for ($x = 0; $x <= 10; $x++) {
echo "The number is: $x <br>";
}
?>

Foreach цикл работает только с массивами и используется для цикла по каждой паре "ключ-значение" в массиве.

foreach ($array as $value) {
code to be executed;
}

Для каждой итерации цикла значение текущего элемента массива присваивается $Value и указатель массива перемещается на один, пока не достигнет последнего элемента массива.

В следующем примере демонстрируется цикл, который будет выводить значения заданного массива ($Colors):

<?php
$colors = array("red", "green", "blue", "yellow");
foreach ($colors as $value) {
echo "$value <br>";
}
?>

В данном примере выводятся значения массива user, в котором записаны данные об Иване

Решение:

$user = array("Ivan",

"root",

"password",

"312-34-85");

foreach($user as $value){

echo "$value</br>";

}

Результат:

Ivan
root
password
312-34-85

Длинный вариант:

foreach($massiv as $index => $value){

оператор;

}

$massiv — массив
$index — индекс элемента массива
$value — доступ к значению элемента массива

Рисунок 1 - Пример использования цикла Foreach, полный вариант

В данном примере выводятся индексы и значения массива user, в котором записаны данные об Иване

Решение:

$user["name"]="Ivan";

$user["login"]="root";

$user["password"]="p@ssword";

$user[]="312-34-85";

foreach($user as $index =>$value){

echo "Индекс $index равен $value</br>";

}

Результат:

В следующем примере выводится приветствие для имен из списка. Кроме приветствия выводятся номера в списке.

Решение:

$names = array("Иван","Петр","Семен");

// 1 задание

foreach ($names as $val) {

echo "Привет, $val <br>";

}

// 2 задание

foreach ($names as $k => $val) {

echo "Привет, $val !

Ты в списке под номером $k <br>";

}

Результат:

Структура отчета:

1) название, цель лабораторной работы;

2) перечень заданий на лабораторную работу;

3) коды php сценариев с решением задач;

4) ответы на контрольные вопросы.

Контрольные вопросы:

1) Виды и назначение условных операторов PHP.

2) Какие существуют типы циклических операторов в PHP?

ЛАБОРАТОРНАЯ РАБОТА № 5
тема: «Проектирование базы данных. Установка соединения с базой данных»

Цель лабораторной работы:

- отработка навыков проектирования базы данных;

- освоение практических навыков создания соединения с базой данных;

- развитие познавательного интереса;

Оборудование и программное обеспечение: ПК, ОС MS Windows 7 (10), офисный пакет MS Office, браузер, блокнот.

Количество часов: 2 часа.

Задание на лабораторную работу:

Согласно методическим указаниям выполнить разработку сценариев PHP для обработки таблицы БД

1) С помощью программы PhpMyAdmin создать новую базу данных, далее создать одну таблицу, которая должна содержать 9 столбцов (атрибутов). Предусмотреть столбец ID как первичный ключ с ограничением auto increment. Предметная область выдается каждой подгруппе индивидуально.

2) В каталоге domains/localhost создать папку laba5.

3) В папке laba5 создать файл connection.php для подключения к MySQL.

4) В папке laba5 создать файл zapros1.php, который должен содержать запрос для добавления данных в созданную таблицу. Через запрос добавить 10 записей в созданную таблицу.

5) В отдельных файлах разработать 5 запросов на выборку данных из созданной таблицы. Отобразить эти данные на экране.

6) Оформить отчет по лабораторной работе.

Методика выполнения лабораторной работы

Шаг 1. Запустить локальный web-сервер.

Шаг 2. Выбрать пункт PhpMyAdmin во вкладке «Дополнительно». Откроется окно браузера, где необходимо ввести логин и пароль. По умолчанию в оба окна ввести значение root.

Далее откроется главное окно программы PhpMyAdmin.

phpMyAdmin – web-приложение с открытым кодом, написанное на языке PHP и представляющее собой web-интерфейс для администрирования СУБД MySQL. phpMyAdmin позволяет через браузер осуществлять администрирование сервера MySQL, запускать команды SQL и просматривать содержимое таблиц и баз данных.

Шаг 3. Для создания базы данных в phpMyAdmin необходимо открыть вкладку «Базы данных», ввести имя базы данных, выбрать кодировку utf8_general_ci и нажать кнопку «Создать». Созданная база данных отобразится в списке слева.

Рисунок 1

Необходимо сделать созданную базу данных активной, выбрав ее имя в списке баз данных.

Шаг 4. Открыть вкладку «Структура». Ввести имя новой таблицы и количество столбцов. Нажать кнопку «Вперед».

Рисунок 2

Шаг 5. После нажатия кнопки «Вперед» в окно браузера загрузится страница, позволяющая ввести наименования столбцов таблицы, определить тип данных и назначить дополнительные ограничения для первичного ключа.

Рисунок 3

После определения структуры таблицы, необходимо нажать кнопку «Сохранить». Таблица создана.

Шаг 6. Открыть вкладку «Привилегии». Нажать на кнопку «Добавить учетную запись пользователя», при этом созданная база данных должна быть активной. Необходимо ввести: имя пользователя и пароль, выбрать пункт «Локальный хост» и выбрать галочку «Отметить все» в разделе «Глобальные привилегии».

Шаг 7. Создать папку laba5 в папке domains/localhost.

Шаг 8. Для подключения к MySQL из PHP указать настройки подключения: адрес сервера, логин, пароль, название базы данных и т.д.

Создать файл connection.php со следующим кодом:

<?php

$host = 'localhost'; // адрес сервера

$user = 'new_user'; // имя пользователя

$password = '123'; // пароль

$database = 'Peace'; // имя базы данных

Так как подключение к серверу происходит на локальной машине, то адресом сервера будет localhost. В качестве базы данных выбирается уже созданная БД.

Шаг 9. Создать файл zapros1.php для работы с базой данных:

<?php

require_once 'connection.php'; // подключение скрипта

// подключение к серверу

$link = mysqli_connect($host, $user, $password, $database)

or die("Ошибка " . mysqli_error($link));

// выполнение операций с базой данных

// закрытие подключения

mysqli_close($link);

Первым делом подключается скрипт с настройками с помощью инструкции require_once.

Для открытия подключения применяется функция mysqli_connect(). Она принимает все конфигурационные настройки и подключается к серверу. В случае ошибки подключения срабатывает оператор die(), который выводит сообщение об ошибке и завершает работу скрипта. А в случае успешного подключения функция mysqli_connect() возвращает объект подключения в виде переменной $link.

После окончания работы подключение нужно закрыть. Для этого применяется функция mysqli_close(), которая в качестве параметра принимает объект подключения.

Чтобы осуществить запрос к базе данных, надо использовать функцию mysqli_query(), которая принимает два параметра: объект подключения и строку запроса на языке SQL. Например:

<?php

require_once 'connection.php';

$link = mysqli_connect($host, $user, $password, $database)

or die("Ошибка " . mysqli_error($link));

$query = "INSERT INTO sotrudniki SET fam='Иванов', name='Петр', vozrast=25, gorod='Москва'";

$result = mysqli_query($link, $query) or die("Ошибка " . mysqli_error($link));

if($result)

{

echo "Выполнение запроса прошло успешно. Новая запись добавлена";

}

mysqli_close($link);

Функция mysqli_query() возвращает объект $result, который содержит результат запроса. В случае неудачи данный объект содержит значение false.

Пример: Добавление одновременно трех новых работников: Гену, в возрасте 30 лет, с зарплатой 1000$, Васю, в возрасте 25 лет, с зарплатой 500$, Ивана, в возрасте 27 лет, с зарплатой 1500$:

query = "INSERT INTO workers (name, age, salary) VALUES ('Гена', 30, 1000), ('Вася', 25, 500), ('Иван', 27, 1500)";

Примеры запросов на выборку данных

Выборка из тестовой таблицы workers работника с id равным 2:

$query = "SELECT * FROM workers WHERE id=2";

Выборка из таблицы workers работников с id больше 2 включительно:

$query = "SELECT * FROM workers WHERE id>=2";

Выборка из таблицы workers работников с id, не равным 2:

$query = "SELECT * FROM workers WHERE id != 2";

Выборка из таблицы workers работников возрастом 23 года:

$query = "SELECT * FROM workers WHERE age=23";

Выборка из таблицы workers работников с зарплатой 500$:

$query = "SELECT * FROM workers WHERE salary=500";

Выборка из таблицы workers работников с зарплатой 500$ и возрастом 23 года:

$query = "SELECT * FROM workers WHERE salary=500 AND age=23";

Выборка из таблицы workers работников с зарплатой от 450$ до 900$:

$query = "SELECT * FROM workers WHERE salary>450 AND salary<900";

Выборка из таблицы workers всех работников и сортировка их по возрасту:

$query = "SELECT * FROM workers WHERE id>0 ORDER BY age";

Если нужен обратный порядок сортировки, то следует написать:

$query = "SELECT * FROM workers WHERE id>0 ORDER BY age DESC";

С помощью команды LIMIT можно ограничить количество строк в результате.

$query = "SELECT * FROM workers WHERE id>0 LIMIT 2";

С помощью команды COUNT можно подсчитать количество строк в выборке.

$query = "SELECT COUNT(*) as count FROM workers WHERE id>0";

$result = mysqli_query($link, $query) or die( mysqli_error($link) );

$count = mysqli_fetch_assoc[$result];

var_dump($count);

С помощью команды LIKE можно реализовать поиск. Например:

$query = "SELECT * FROM workers WHERE name LIKE '%я'";

Структура отчета:

1) название, цель лабораторной работы;

2) перечень заданий на лабораторную работу;

3) код страницы zapros1.php;

4) ответы на контрольные вопросы.

Контрольные вопросы:

1) Для чего необходимы функции mysqli_connect(), mysqli_close(), mysqli_query()?

2) Каково назначение программы phpMyAdmin?

3) Какие настройки подключения надо указать, чтобы подключиться к MySQL из PHP?

ЛАБОРАТОРНАЯ РАБОТА № 6, 7
тема: «Создание базы данных MySQL. Создание страницы для добавления, удаления, редактирования записей базы данных»

Цель лабораторной работы:

- отработка практических навыков создания сценариев РНР для добавления, удаления, редактирования записей базы данных;

- развитие познавательного интереса;

Оборудование и программное обеспечение: ПК, ОС MS Windows 7 (10), офисный пакет MS Office, браузер, блокнот.

Количество часов: 4 часа.

Задание на лабораторную работу:

1) Согласно методическим указаниям выполнить разработку сценариев PHP для обработки записей таблицы БД.

Папка с выполненной лабораторной работой должна содержать следующие файлы:

Предметная область выдается каждой подгруппе индивидуально. Создаваемая таблица должна содержать 5 различных столбцов. При добавлении данных в таблицу необходимо внести 10 записей.

2) Оформить отчет по лабораторной работе.

Методика выполнения лабораторной работы

Шаг 1. Запустить локальный web-сервер.

Шаг 2. Создать папку labrabota6-7 в папке domains/localhost.

Шаг 3. Для подключения к MySQL из PHP указать настройки подключения: адрес сервера, логин, пароль, название базы данных и т.д.

Создать файл connection.php со следующим кодом:

<?php

$host = 'localhost'; // адрес сервера

$user = 'new_user'; // имя пользователя

$password = '123'; // пароль

$database = 'Peace'; // имя базы данных

Так как подключение к серверу происходит на локальной машине, то адресом сервера будет localhost. В качестве базы данных выбирается уже созданная БД в лабораторной работе №5. Также для подключения необходимо использовать уже созданного пользователя в предыдущей лабораторной работе.

Шаг 4. Создать файл create.php, который предназначен для создания новой таблицы.

Чтобы создать таблицу, необходимо использовать выражение SQL "CREATE TABLE":

<?php

require_once 'connection.php';

$link = mysqli_connect($host, $user, $password, $database)

or die("Ошибка" . mysqli_error($link));

$query ="CREATE Table bilety

(

id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,

nomer_bileta VARCHAR(100) NOT NULL,

nazvanie_filma VARCHAR(200) NOT NULL

)";

$result = mysqli_query($link, $query) or die("ќшибка " . mysqli_error($link));

if($result)

{

echo "Создание таблицы прошло успешно";

}

mysqli_close($link);

После выполнения скрипта в базе данных будет создана таблица bilety, которая по своему определению будет аналогична тем, что ранее создавались через phpMyAdmin.

Рисунок 1 – Создание таблицы

Шаг 5. Создать файл insert.php, который будет добавлять данные в созданную таблицу.

Для добавления данных используется выражение "INSERT". Выражение "INSERT" вставляет в таблицу одну строку. После ключевого слова INTO указывается название таблицы, а после VALUES в скобках указывается набор значений для всех столбцов.

Так как в прошлой теме при создании таблицы была указана следующая очередность столбцов: id, nomer_bileta, nazvanie_filma, то в данном случае для столбца id передается значение NULL, для nomer_bileta - 'S12374', а для nazvanie_filma - 'Король Лев'.

Поскольку столбец id определен как AUTO_INCREMENT, то необязательно указывать для него определенное числовое значение, и можно передать значение NULL, а MySQL присвоит столбцу следующее доступное значение.

<html>

<head>

</head>

<body>

<?php

require_once 'connection.php'; // подключаем скрипт

if(isset($_POST['nomer_bileta']) && isset($_POST['nazvanie_filma'])){

// подключение к серверу

$link = mysqli_connect($host, $user, $password, $database)

or die("Ошибка " . mysqli_error($link));

// экранирование символов для mysql

$nomer_bileta = htmlentities(mysqli_real_escape_string($link, $_POST['nomer_bileta']));

$nazvanie_filma = htmlentities(mysqli_real_escape_string($link, $_POST['nazvanie_filma']));

// создание строки запроса

$query ="INSERT INTO bilety VALUES(NULL, '$nomer_bileta','$nazvanie_filma')";

// выполнение запроса

$result = mysqli_query($link, $query) or die("Ошибка " . mysqli_error($link));

if($result)

{

echo "<span style='color:blue;'>Данные добавлены</span>";

}

// закрытие подключения

mysqli_close($link);

}

<h2>Добавить новый билет</h2>

<p>Введите номер билета:<br>

<p>Введите название фильма: <br>

</form>

</body>

</html>

Здесь код взаимодействия с базой данных объединен с функциональностью форм: c помощью формы данные вводятся для добавления в БД.

Использована функция mysqli_real_escape_string(). Она служит для экранизации символов в строке, которая потом используется в запросе SQL. В качестве параметров она принимает объект подключения и строку, которую надо экранировать.

Таким образом, экранизация символов применяется фактически два раза: сначала для sql-выражения с помощью функции mysqli_real_escape_string(), а затем для html с помощью функции htmlentities(). Это позволит защититься от различных атак.

Шаг 6. Для получения данных используется выражение sql "SELECT". Например, для получения всех данных из таблицы bilety, необходимо создать страницу select.php, которая будет выводить значения из таблицы bilety:

Рисунок 2 – Добавление новых данных

Рисунок 3 – Добавление данных

Шаг 7. Создать страницу select.php, которая будет выводить значения из таблицы bilety:

<html>

<head>

</head>

<body>

<?php

require_once 'connection.php';

$link = mysqli_connect($host, $user, $password, $database)

or die("Ошибка " . mysqli_error($link));

$query ="SELECT * FROM bilety";

$result = mysqli_query($link, $query) or die("Ошибка " . mysqli_error($link));

if($result)

{

$rows = mysqli_num_rows($result); // количество полученных строк

echo "<table><tr><th>Id</th><th>Номер билета</th><th>Название фильма</th></tr>";

for ($i = 0 ; $i < $rows ; ++$i)

{

$row = mysqli_fetch_row($result);

echo "<tr>";

for ($j = 0 ; $j < 3 ; ++$j) echo "<td>$row[$j]</td>";

echo "</tr>";

}

echo "</table>";

// очистк результата

mysqli_free_result($result);

}

mysqli_close($link);

</body>

</html>

Рисунок 4 – Вывод данных из таблицы на экран

Чтобы извлечь отдельную строку, используется функция mysqli_fetch_row(). После вызова этой функции указатель в наборе $result переходит к новой строке, поэтому с каждым новым вызовом извлекается новая строка.

Внутренний цикл осуществляет перебор по ячейкам текущей строки:

for ($j = 0 ; $j < 3 ; ++$j) echo "<td>$row[$j]</td>";

Так как при выборке выводятся данные для всех трех столбцов таблицы, то счетчик $j проходит от 0 до 3. Каждая строка представляет собой массив ячеек, поэтому с помощью выражения $row[$j] можно получить доступ к конкретной ячейке строки. И поскольку переменная $result после выполнения запроса будет хранить данные, то в конце надо очистить память от ненужных данных с помощью функции mysqli_free_result().

Шаг 8. Для обновления применяется выражение SQL "UPDATE":

$query ="UPDATE bilety SET nomer_bileta='A85255', nazvanie_filma='Назад в будущее' WHERE id='1'";

После слова SET идет перечисление названий столбцов и новых значений для них. В конце строки запроса указывается селектор с помощью выражения WHERE. В данном случае все у всех строк, у которых id='1', устанавливаются значения nomer_bileta='A85255', nazvanie_filma='Назад в будущее'

Создать новый файл edit.php, который будет содержать код редактирования:

<html>

<head>

</head>

<body>

<?php

require_once 'connection.php'; // подключение скрипта

// подключение к серверу

$link = mysqli_connect($host, $user, $password, $database)

or die("Ошибка " . mysqli_error($link));

// если запрос POST

if(isset($_POST['nomer_bileta']) && isset($_POST['nazvanie_filma']) && isset($_POST['id'])){

$id = htmlentities(mysqli_real_escape_string($link, $_POST['id']));

$nomer_bileta = htmlentities(mysqli_real_escape_string($link, $_POST['nomer_bileta']));

$nazvanie_filma = htmlentities(mysqli_real_escape_string($link, $_POST['nazvanie_filma']));

$query = "UPDATE bilety SET nomer_bileta='$nomer_bileta', nazvanie_filma='$nazvanie_filma' WHERE id='$id'";

$result = mysqli_query($link, $query) or die("Ошибка " . mysqli_error($link));

if($result)

echo "<span style='color:blue;'>Данные обновлены</span>";

}

// если запрос GET

if(isset($_GET['id']))

{

$id = htmlentities(mysqli_real_escape_string($link, $_GET['id']));

// создание строки запроса

$query ="SELECT * FROM bilety WHERE id = '$id'";

// выполнение запроса

$result = mysqli_query($link, $query) or die("Ошибка " . mysqli_error($link));

//если в запросе более нуля строк

if($result && mysqli_num_rows($result)>0)

{

$row = mysqli_fetch_row($result); // получение первой строки

$nomer_bileta = $row[1];

$nazvanie_filma = $row[2];

echo "<h2>Изменить билет</h2>

<p>Введите новый номер билета:<br>

<p>Введите название нового фильма: <br>

</form>";

mysqli_free_result($result);

}

// закрытие подключения

mysqli_close($link);

</body>

</html>

Структурно весь код делится на две части: обработку запроса POST и обработку запроса GET. Обработка POST-запроса подобна добавлению данных, только в данном случае используется выражение UPDATE.

Теперь, чтобы отредактировать первую запись, надо обратиться в браузере к скрипту по адресу http://localhost:8080/edit.php?id=1.

Получив id из запроса, PHP пропустит ту часть, которая относится к обработке POST-запроса, и перейдет к извлечению по id записи из БД и созданию формы. Затем в форму можно ввести некоторые значения и отправить на сервер. Теперь уже будет задействована та часть, скрипта, которая обрабатывает POST-запрос.

Рисунок 5 – Изменение данных

Рисунок 6 – Ввод новых данных

Рисунок 7 – Данные изменены

Структура отчета:

1) название, цель лабораторной работы;

2) перечень заданий на лабораторную работу;

3) коды страницы create.php, insert.php;

4) ответы на контрольные вопросы.

Контрольные вопросы:

1) Для чего необходимы функции mysqli_connect(), mysqli_close(), mysqli_query()?

2) Назначение функции mysqli_real_escape_string().

3) Назначение функции mysqli_fetch_row().

ЛАБОРАТОРНАЯ РАБОТА № 8, 9
тема: «Установка темы. Добавление и удаление содержимого.

Создание основной и дополнительных страниц. Работа с плагинами. Создание меню»

Цель лабораторной работы:

- получение практических навыков работы с CMS WordPress: установка и настройка темы, создание страниц и меню сайта;

- развитие познавательного интереса;

Оборудование и программное обеспечение: ПК, ОС MS Windows 7 (10), офисный пакет MS Office, браузер, блокнот.

Количество часов: 4 часа.

Задание на лабораторную работу:

1) Выбрать индивидуальную тему разрабатываемого сайта.

2) Установить CMS WordPress на локальный сервер.

3) Выбрать и установить шаблон будущего сайта.

4) Настроить выбранную тему: цвет фона и заголовка, название сайта, логотип.

5) Разработать серию страниц будущего сайта: «Главная», «О нас», «Наши услуги», «Статьи», «Фотогалерея», «Видеогалерея», «Контакты», «Карта сайта».

6) Предусмотреть дополнительные вложенные страницы в соответствии с тематикой будущего сайта.

7) Добавить содержимое страниц: «Главная», «О нас», «Наши услуги», «Статьи».

8) Оформить отчет по лабораторной работе.

Методика выполнения лабораторной работы

1. Установка темы

Все действия по установке темы необходимо производить в панели администратора.

Шаг 1. Выбор пункта консоли администратора «Внешний вид».

Шаг 2. Выбор подпункта «Темы».

Рисунок 1 – Установка темы

Шаг 3. В открывшемся окне нажать кнопку «Добавить новую». Из появившегося списка можно просмотреть и выбрать подходящие шаблоны. После нажать кнопку «Установить». Также новую тему можно установить через команду «Загрузить».

Шаг 4. Процесс установки выбранной темы.

Шаг 5. Активация выбранной темы.

2. Создание страниц сайта

Все действия по созданию страниц сайта необходимо производить в панели администратора.

Чтобы создать новую страницу выбрать вкладку «Страницы» в колонке слева. По умолчанию создается пример страницы. Модификация страницы происходит с помощью кнопки «Изменить». Изначально ссылки для управления страницей не видны.

Создание статической страницы в WordPress

Рисунок 2 – Создание страницы

В новом окне редактирования страницы вносится в поля заголовка и содержания необходимая информация. Чтобы сохранить изменения, необходимо нажать кнопка «Обновить» в колонке справа.

Рисунок 3 – Редактирование страницы

Чтобы загрузить с компьютера или встроить со стороннего сайта картинку, музыку или видео, нажать кнопку «Добавить медиафайл».

Как добавить картинку на страницу в WordPress

Рисунок 4 – Добавление медиафайла

Чтобы загрузить файл с компьютера, выбрать вкладку «Загрузить файлы». Файл сохранится в библиотеке. Если размер файла больше лимита, используется прямая ссылка с онлайн-сайта.

Для того, чтобы сделать страницу по умолчанию, необходимо на панели слева выбрать вкладку «Настройки», раздел «Чтение». В разделе «На главной странице отображать» отмечается «Статистическую страницу» и в списке выбирается нужная страница. Теперь выбранная страница будет отображаться как главная при переходе на сайт.

Рисунок 5 – Настройки страницы

3. Создание меню сайта

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

Шаг 1. Выбор пункта «Внешний вид», подпункт «Меню».

Рисунок 6 – Выбор пункта

Шаг 2. Переход по ссылке «Создайте новое меню».

Рисунок 4 – Ввод названия

Шаг 3. Ввод названия для меню WordPress. Нажать кнопку «Создать меню».

Рисунок 8 – Ввод названия

Шаг 4. Далее необходимо добавить нужные страницы, записи, метки, рубрики в меню WordPress. Для этого нужно выбрать необходимый пункт, например, «Страницы» и отметить галочками те, которые нужно добавить. После этого нажать кнопку «Добавить в меню».

После того, как добавлены нужные страницы, рубрики или записи в меню нажать кнопку «Сохранить меню».

Структура отчета:

1) название, цель лабораторной работы;

2) перечень заданий на лабораторную работу;

3) ответы на контрольные вопросы.

Контрольные вопросы:

1) Что такое CMS?

2) Как установить новую тему?

3) Как создать страницы сайта и объединить их в меню?

ЛАБОРАТОРНАЯ РАБОТА № 10
тема: «Работа с плагинами. Создание фото- и видеогалереи.

Виджеты социальных сетей. Счетчик посещений»

Цель лабораторной работы:

- получение практических навыков работы с CMS WordPress: установка и настройка плагинов, работа с виджетами;

- развитие познавательного интереса;

Оборудование и программное обеспечение: ПК, ОС MS Windows 7 (10), офисный пакет MS Office, браузер, блокнот.

Количество часов: 2 часа.

Задание на лабораторную работу:

1) Скачать, установить и активировать плагин фотогалереи Envira gallery.

2) Создать фотоальбом, содержащий 10 изображений соответствующих предметной области разрабатываемого сайта.

3) Опубликовать фотогалерею на соответствующей странице сайта.

4) Создать страницу «Видеогалерея». Используя встроенные инструменты WordPress, опубликовать три видеофайла с хостинга YouTube. Выбранные видео должны соответствовать предметной области сайта.

5) Создать и опубликовать виджет социальной сети Вконтакте. Выбранная группа должна соответствовать предметной области сайта.

6) Скачать, установить и активировать плагин счетчика посещений Visitors Online by BestWebSoft. Вывести виджет счетчика посещений в позиции сайта.

7) Самостоятельно рассмотреть работу и настройку плагина MailPoet — письма и рассылки в WordPress.

8) Оформить отчет по лабораторной работе.

Методика выполнения лабораторной работы

Установка плагинов в WordPress выполняется двумя разными путями:

1) автоматически через интерфейс поиска плагинов в официальном каталоге WordPress;

2) вручную, путём загрузки ZIP-архива с компьютера на сайт и дальнейшей активацией его.

Первый способ - установка плагина автоматически.

Автоматическая установка плагина понадобится практически во всех случаях, когда необходимый плагин есть на официальном сайте WordPress.

Шаг 1. Поиск нужного плагина по ключевым словам.

Шаг 2. Установка выбранного плагина.

Шаг 3. Активация и дальнейшая настройка.

Поиск плагинов осуществляется в интерфейсе «Плагины» — «Добавить новый». При заходе в интерфейс добавления плагинов будут отображены самые популярные и рекомендуемые плагины.

Рисунок 1

В правой области экрана воспользоваться поиском по названию плагина. Например, можно попробовать найти и установить плагин Limit Login Attempts, который блокирует попытки подбора паролей в административную панель WordPress.

Рисунок 2

На выбор будут предложены несколько однотипных плагинов, необходимо определиться с тем, который подходит под конкретные задачи разработчика сайта.

Рисунок 3

После нажать на кнопку «Установить» в карточке плагина, начнётся автоматическое скачивание архива с плагином на хостинг или сервер. WordPress самостоятельно извлечёт из архива содержимое плагина и установит его.

Рисунок 4

Теперь необходимо активировать плагин, чтобы он начал работать на сайте. Если этого не сделать, то в меню WordPress не появится пункта для настроек плагина.

Второй способ - установка плагина вручную путём загрузки ZIP-архива.

Открыть раздел «Плагины» — «Добавить новый» и нажать кнопку «Загрузить плагин»:

Рисунок 5

Выбрать архив на компьютере и нажать на кнопку «Установить»:

Рисунок 6

Архив будет загружен на хостинг и после этого останется только активировать его. После этого приступить к настройке плагина.

1. Создание фотогалереи с помощью плагина Envira gallery

После установки и активации плагина Envira Gallery, в левом меню административной панели появится соответствующий пункт.

Выполнить команду Envira Gallery – Add New.

Рисунок 7

Далее откроется окно создания новой фотогалереи. Необходимо ввести имя создаваемой галереи.

Рисунок 8

Следующим шагом является загрузка фотографий с компьютера. Загрузить 10 фотографий с компьютера, используя команду Select Files from Your Computer.

Рисунок 9

После выбора необходимых изображений начнётся загрузка файлов. Загрузка может занять некоторое время. Процесс загрузки файлов отображается на экране.

Загруженные изображения отобразятся в нижней части экрана.

Рисунок 10

Далее необходимо опубликовать созданную фотогалерею.

Рисунок 11

После публикации система сформирует шорткод, который необходимо скопировать и вставить в советующую страницу сайта.

Рисунок 12

Рисунок 13

Созданную страницу необходимо опубликовать.

2. Создание видеогалереи

Создать новую страницу, на которой будут размещены видеофайлы с хостинга YouTube.

Рисунок 14

Ввести название страницы – «Видеогалерея». Через знак «+» добавьте новый блок «Столбцы», как показано на рисунке 15.

Рисунок 15

Рисунок 16

Нажать на знак «+» в первом столбце и выбрать блок «YouTube». Появится окно добавления ссылки на видео с хостинга, как показано на рисунке 17.

Рисунок 17

Добавить три разных видео с хостинга YouTube, указав соответствующие ссылки. Нажать кнопку «Вставить» для добавления видео.

Рисунок 18

3. Создание виджета социальной сети ВКонтакте

Чтобы получить код виджета группы, нужно скопировать из адресной строки url-адрес группы. Например: https://vk.com/dfilm

Открыть аккаунт ВКонтакте, а потом перейти по ссылке: vk.com/dev/Community.

Рисунок 19

Чтобы установить код виджета группы на WordPress сайт, необходимо открыть в админ-панели вкладку «Виджеты» («Внешний вид» - «Виджеты»):

Рисунок 20

Найти виджет «HTML код».

Рисунок 21

Перетащить выбранный виджет в нужную позицию темы. Ввести заголовок виджета и вставить скопированный код. Сохранить настройки виджета и просмотреть результат.

Рисунок 22

Рисунок 23

4. Установка счетчика посещений Visitors Online by BestWebSoft

Плагин Visitors Online — это полезное решение, которое выводит количество посетителей на сайте в панели администратора WordPress, страницах, постах и виджетах сайта.

После установки и активации плагина, перейти по ссылке «Внешний вид» - «Виджеты». Найти виджет Visitors Online и разместить его в нужную позицию сайта.

Рисунок 24

Рисунок 25

Ввести имя виджета и сохранить изменения. Далее просмотреть страницу.

Рисунок 26

Структура отчета:

1) название, цель лабораторной работы;

2) перечень заданий на лабораторную работу;

3) ответы на контрольные вопросы.

Контрольные вопросы:

1) Что такое CMS?

2) Что такое плагин?

3) Способы установки плагинов в WordPress.

ЛАБОРАТОРНАЯ РАБОТА № 11
тема: «Работа с плагинами. Создание формы обратной связи. Подключение онлайн-чата. Функция обратного звонка»

Цель лабораторной работы:

- получение практических навыков работы с CMS WordPress: установка и настройка плагинов, работа с виджетами;

- развитие познавательного интереса;

Оборудование и программное обеспечение: ПК, ОС MS Windows 7 (10), офисный пакет MS Office, браузер, блокнот.

Количество часов: 2 часа.

Задание на лабораторную работу:

1) Скачать, установить и активировать плагин фотогалереи Contact Form 7.

2) Создать страницу «Задать вопрос».

3) Используя плагин Contact Form 7, создать специальную форму для обратной связи с пользователем (Имя, Фамилия, Электронный адрес, Тема письма, Текст письма).

4) Создать страницу «Вакансии».

5) Используя плагин Contact Form 7, создать специальную форму для заполнения анкеты посетителей сайта, претендующих на определенную вакансию (Имя, Фамилия, Отчество, Дата рождения, Пол, Образование, Специальность, Желаемая должность, Стаж работы, Последнее место работы, Гражданство, Семейное положение, Немного о себе, Владение компьютером, Владение языками, Прикрепить фото). Использовать специальные инструменты для создания выпадающих списков, чекбоксов и радиокнопок.

6) Скачать, установить и активировать плагин обратного звонка.

7) Оформить отчет по лабораторной работе.

Методика выполнения лабораторной работы

1. Работа с плагином создания контактных форм

После активации плагина в административной панели открыть раздел Contact Form 7.

Описание: формы contact form 7

Рисунок 1 - Список форм

Для каждой формы автоматически создается уникальный шорткод. Чтобы показать форму на сайте, его нужно вставить в редакторе контента или в шаблоне темы.

1. Выполнить команду «Страницы» - «Добавить новую».

2. Указать название (например Контакты).

3. Скопировать шорткод.

Описание: шорткод contact form 7

Рисунок 2 - Шорткод формы

4. Вставить в блок «Шорткод» из раздела «Виджеты» и нажать «Опубликовать».

Описание: cf7 добавление шорткод

Рисунок 3 - Блок Шорткод

Результат должен выглядеть следующим образом:

Описание: форма contact form 7

Рисунок 4 - Страница с формой CF7

Открыть вкладку Contact Form 7 - Добавить новую.

Описание: https://contactform7.ru/images/contactform7/contact-form-8.png

Рисунок 5 - Создание контактной формы

CF предлагает стартовый шаблон, который можно удалить или изменять. Этот простой пример сделан для того, чтобы было легче разобраться. Чтобы вставить новое поле, нужно нажать кнопку нужного элемента.

В текстовой области видны поля, которые будут показаны посетителю. Их можно редактировать вручную. Для верстки доступны:

- элементы HTML (позволяют создать произвольную HTML-структуру),

- шорткоды плагина (добавляют элементы формы).

Символом "*" отмечены обязательные к заполнению поля.

Описание: элементы формы contact form 7

Рисунок 6 - Элементы формы в Contact Form 7

Когда заполненная пользователем форма обратной связи будет отправлена, администратор сайта получит email-уведомление. В нем указано имя посетителя, контакты и текст сообщения. Также имеется возможность настроить формат этого уведомления. Для этого необходимо открыть вкладку «Письмо».

Описание: contact form 7 письмо

Рисунок 7 - Настройка формата письма

Тут можно использовать имена полей. Например, есть поле [text* telephone]. Если в письме вписать [telephone], на его месте будет указан номер телефона, который ввел пользователь.

В поле «Кому» ввести рабочий e-mail. На этот адрес будут приходить все уведомления.

Закладка «Настройка уведомлений» отвечает за сообщения, которые будут выводиться при заполнении формы.

2. Работа с плагином обратного звонка

Описание: vdz-obratnyj-zvonok-wordpress-besplatno

Рисунок 8

Данный плагин обратного звонка для WordPress является единственным полностью бесплатным решением в данном рейтинге.

После активации плагина в правом нижнем углу сайта появляется соответствующий знчок.

Рисунок 9

При нажатии на значок появляется окно с двумя полями: имя пользователя и телефон для обратного звонка.

Рисунок 10

Чтобы заказать звонок с WordPress сайта, нужно ввести нужные данные. После этого выдается сообщение, задаваемое администратором сайта.

VDZ CallBack Plugin позволяет настраивать следующие параметры:

- язык и текст названия, а также надписи в полях всплывающего окошка;

- добавление/удаление «трафарета» для цифр телефона;

- текст на кнопке;

- цветовое решение всплывающего окна (через код);

- адрес электронной почты для получения уведомления о заявке клиента сайта на обратный звонок;

- шорткод для удобного добавления формы обратного звонка на любую тему WordPress.

К плюсам данного плагина обратного звонка для WordPress сайтов можно отнести следующие:

- простой виджет звонка WordPress;

- пользователь может менять текст в любом из полей, окошек и кнопок;

- заметен на сайте.

Минусы плагина:

- нет описания на русском;

- невозможность изменения цветовой гаммы без написания соответствующего кода.

Структура отчета:

1) название, цель лабораторной работы;

2) перечень заданий на лабораторную работу;

3) ответы на контрольные вопросы.

Контрольные вопросы:

1) Для чего необходима форма обратной связи на сайте?

2) Что можно настроить в разделе «Уведомления при отправке формы» плагина Contact Form 7?

ЛАБОРАТОРНАЯ РАБОТА № 12, 13
тема: «Работа с плагинами. Создание интернет-магазина»

Цель лабораторной работы:

- получение практических навыков работы с CMS WordPress: установка и настройка плагинов, создание интернет-магазина;

- развитие познавательного интереса;

Оборудование и программное обеспечение: ПК, ОС MS Windows 7 (10), офисный пакет MS Office, браузер, блокнот.

Количество часов: 4 часа.

Задание на лабораторную работу:

1) Скачать, установить и активировать плагин Woocommerce.

2) Создать меню «Интернет-магазин», которое должно содержать страницы «Магазин», «Корзина», «Отслеживание заказа», «Мой аккаунт».

Рисунок 1

3) Разместить меню с помощью виджета на странице сайта.

4) Создать 3 категории товаров в соответствии с предметной областью сайта.

5) В каждой категории разместить 3 различных товара с подробным описанием.

6) Вывести категории товаров на странице «Магазин».

7) С помощью шорткода вывести последние добавленные (новые) товары на странице «Новинки».

8) С помощью шорткода вывести товары со скидкой на странице «Скидки».

9) Оформить отчет по лабораторной работе.

Методика выполнения лабораторной работы

1. Установка и русификация плагина Woocommerce

Установить и активировать плагин интернет-магазина Woocommerce. Для этого необходимо открыть в административной панели вкладку «Плагины» - «Добавить новый» и ввести в поле поиска «woocommerce». Также плагин можно установить с компьютера, загрузив его в виде архива.

Сразу после активации появится сообщение, которое предложит установить необходимые страницы для работы Woocommerce (Shop, My Account, Checkout, Cart) и перевод для плагина интернет-магазина Woocommerce:

Рисунок 2

На первом сообщении нажать Install WooCommerce Pages, а на втором Unpdate Translation.

Если сообщение не появилось, для перевода плагина открыть в WooCommerce - System status - Tools - Force translation upgrade.

После установки появятся 4 новых страницы, а именно:

Shop — главная страница магазина, на которой будут отображаться товары.

My Account — страница аккаунта.

Checkout — страница оплаты.

Cart — страница корзины.

2. Добавление товара в WooCommerce

Для того, чтобы добавить новый товар, необходимо открыть в административном меню вкладку «Товары» - «Добавить товар».

Рисунок 3

В открывшемся окне добавить название товара (самое верхнее поле для заполнения).

После этого указать категорию (для того чтобы создать новую категорию нажать «Добавить новую категорию», в поле ввода ввести название для категории, после чего нажать кнопку «Добавить новую категорию товаров»), в которой будет отображаться товар в интернет-магазине и описание товара.

Рисунок 4

В поле «Обычная цена» указать цену товара или цену со скидкой в поле «Цена распродажи».

Изображение товара (миниатюра) добавляется абсолютно также как и обычная миниатюры к записи WordPress.

Для добавления галереи товара (дополнительные изображения продукта) нажать «Добавить картинки галереи товара» и указать необходимые изображения.

Краткое описание товара — описание, которое отображается обычно с правой стороны от изображения, заполнить в блоке «Краткое описание товара».

Рисунок 5

После того как заполнены все необходимые поля, нажать кнопку «Опубликовать». После этого новый товар будет опубликован. В результате добавленный товар в интернет- магазин на базе плагина WooCommerce и темы Storefront отобразится как на изображении ниже:

Рисунок 6

Рисунок 7

3. Шорткоды WooCommerce

[woocommerce_cart] – показывает страницу корзины;

[woocommerce_checkout]– показывает страницу оформления заказа;

[woocommerce_my_account] – показывает страницу “Мой аккаунт”;

[woocommerce_order_tracking] – показывает форму отслеживания заказа.

Как вывести последние добавленные (новые) товары?

Данный шорткод часто используют на главной странице для того, чтобы посетители видели новинки в ассортименте магазина:

[recent_products per_page="12" columns="4"]

Шорткод выводит 12 последних добавленных товаров в 4 колонки. Для того чтобы изменить количество товаров нужно установить нужное цифровое значение в recent_products per_page. Аналогично и с количеством колонок.

Как вывести популярные товары?

Для этого применить шорткод:

[featured_products per_page="12" columns="4"]

Этот шорткод работает точно так же, как и предыдущий, но отображает те товары, которые были отмечены звездочками «Рекомендуемый» в списке товаров:

Как вывести один товар по ID?

Для того, чтобы сделать вывод одного нужного товара по ID применить шорткод

[product id="45"]

ID (идентификатор товара) можно узнать при наведении на товар в списке товаров:

Как сделать вывод нескольких товаров по ID?

При желании можно сделать вывод товаров по идентификатору (ID), для этого применить шорткод:

[products ids="1, 2, 3, 4, 5"]

Через запятую нужно указывать ID товаров, которые нужно вывести.

Как вывести товары из категории WooCommerce?

Для вывода товаров из категории в WooCommerce есть шорткод:

[product_category category="kategoriya-1"]

В скобках нужно указывать не название категории, а ее ярлык. Узнать ярлык категории можно, перейдя в «Товары» - «Категории»:

Как сделать вывод категорий?

Для того чтобы сделать вывод категории применить шорткод:

[product_categories number="7" parent="0"]

Значение number — количество выводимых категорий.

С помощью шорткода ниже можно вывести категории(ю) по ID:

[product_categories ids="7,8" parent="0"]

Как вывести товары со скидкой?

Для этого применить шорткод:

[sale_products per_page="4"]

Как вывести топ рейтинговых товаров?

Обычно рейтинги товару назначаются при добавлении комментария. На основе этих рейтингов можно сделать вывод товаров. Для этого в WooCommerce есть специальный шорткод:

[top_rated_products per_page="12"]

Структура отчета:

1) название, цель лабораторной работы;

2) перечень заданий на лабораторную работу;

3) ответы на контрольные вопросы.

Контрольные вопросы:

1) Что такое шорткод?

2) Как создать новый товар в WooCommerce?

3) Для чего необходима страница «Отслеживание заказа»?

Критерии оценивания лабораторной работы

Критериями оценки результатов выполнения лабораторной работы являются:

- степень реализации цели работы;

- качество оформления отчета;

- степень соответствия результатов работы заданным требованиям.

Оценка выполнения лабораторной работы:

Отметка 5 – «отлично» выставляется, если студент имеет глубокие знания учебного материала по теме лабораторной работы, показывает усвоение взаимосвязи основных понятий, используемых в работе, самостоятельно выполнил все рекомендации по выполнению лабораторной работы, смог ответить на контрольные вопросы, даёт правильный алгоритм решения задачи, выполнены поставленные цели работы.

Отметка 4 – «хорошо» выставляется, если студент показал знание учебного материала, допускает небольшие неточности при выполнении заданий, смог ответить почти полно на все контрольные вопросы.

Отметка 3 – «удовлетворительно» выставляется, если студент в целом освоил материал лабораторной работы, но затрудняется с выполнением всех заданий лабораторной работы без помощи преподавателя, ответил не на все контрольные вопросы.

Отметка 2 – «неудовлетворительно» выставляется студенту, если он имеет существенные пробелы в знаниях основного учебного материала лабораторной работы, не может самостоятельно выполнить задания лабораторной работы, не раскрыл содержание контрольных вопросов.

Список использованных источников

Основные источники:

1) Диков, А.В. Веб-технологии HTML и CSS [Электронный ресурс]: учебное пособие/А.В. Диков. - 2-е изд. - Москва: Директ-Медиа, 2012. - 78 с.

2) Лыткина, Е.А. Основы языка HTML [Электронный ресурс]: учебное пособие/Е.А. Лыткина, А.Г. Глотова - Архангельск: САФУ, 2014. - 104 с.

Дополнительные источники:

1) Богданов, М.Р. Перспективные языки веб-разработки [Электронный ресурс]/ М.Р. Богданов. - 2-е изд., испр. - Москва: Национальный Открытый Университет «ИНТУИТ», 2016 - 265 с.

2) Кузнецов, М.В., Симдянов, И.В. РНР. Практика создания Web-сайтов., 2-ое издание – СПб: БХВ-Петербург, 2009

3) Основы программирования на PHP: курс лекций: учеб. пособие для студентов вузов, обучающихся по специальностям в области информ. технологий/ Н.В. Савельева. – М.: Интернет – Ун-т информ. технологий, 2005

4) Хольцнер С. PHP в примерах. Пер. с англ. – М.: ООО «Бином-Пресс», 2007

Скачать материал

Скачать материал "Методические указания по выполнению лабораторных работ по междисциплинарному курсу: «Web-программирование»"

Как учитель может зарабатывать на Инфоуроке?

Скачать материал

Найдите материал к любому уроку, указав свой предмет (категорию), класс, учебник и тему:

6 664 887 материалов в базе

Найти материалы

Скачать материал

Другие материалы

pptx

Презентация на тему "Виртуальные лаборатории и их ресурсы"

23.10.2021
446
3

docx

Реферат на тему "Виртуальные лаборатории и их ресурсы"

23.10.2021
2658
50

docx

Статья по ИКТ "Консультация школьников в курсе информатике и ИКТ как метод развития индивидуальных особенностей учащихся"

23.10.2021
165
0

docx

Статья ИКТ по теме "Индивидуализированное обучение в курсе информатики и ИКТ в школе"

23.10.2021
1095
22

pptx

Презентация "Создание базы данных. Open Office Base" 9 класс.

Учебник: «Информатика», Босова Л.Л., Босова А.Ю.
Тема: 1.6.3. Создание базы данных

23.10.2021
473
14

docx

Реферат "Реализация рациональной арифметики в системах символьной математики"

23.10.2021
519
1

pptx

Презентация "Инструменты анализа данных"

Учебник: «Информатика. Базовый уровень», Босова Л.Л., Босова А.Ю.
Тема: § 4. Инструменты анализа данных

23.10.2021
1181
38

«Информатика. Базовый уровень», Босова Л.Л., Босова А.Ю.

docx

Проект по информатике: "Буклет"

23.10.2021
886
5

Вам будут интересны эти курсы:

Оставьте свой комментарий

Авторизуйтесь, чтобы задавать вопросы.

Скачать материал
- 23.10.2021 2114
- DOCX 4.1 мбайт
- 133 скачивания
- Оцените материал:
Настоящий материал опубликован пользователем Серикбаева Жанат Куанышбековна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт

Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Автор материала

Серикбаева Жанат Куанышбековна
- На сайте: 7 лет и 7 месяцев
- Подписчики: 0
- Всего просмотров: 4558
- Всего материалов: 5