Страница заданий кружков «Web-дизайн»

Задания ниже – в первую очередь, для самопроверки. Если при чтении материалов и выполнении заданий возникают сложности, желательно задавать вопросы. Связь – любым удобным вам способом.

Задания по блоку HTML и CSS

18/22 апреля: Динамическое создание форм

Материалы по теме находятся на странице PHP: формы

11/15 апреля: Базы данных. Создание простой базы данных

Материалы по теме находятся на странице Работа с базой данных SQLite в PHP

4/8 апреля: Функции работы с файлами Загрузка файлов на сервер

Материалы по теме находятся на странице Работа с файлами в PHP

28/1 марта: Функции работы с изображениями в php

Просмотреть видеозапись занятия, доступную в группах Microsoft Teams

  1. В настройках сервера php.ini раскомментировать (удалить символ ; в начале строки) строку extension=gd
  2. В файле button.php, как показано в видео, сохранить следующий код: 
      <?php
  header("Content-type: image/png");
  // header("Content-type: image/jpeg");
  $string = $_GET['text'];
  $im     = imagecreatefrompng("images/button.png");
  $colorr = imagecolorallocate($im, 240, 200, 200);
  $px     = (imagesx($im) - 7.5 * strlen($string)) / 2;
  // imagestring($im, 3, $px, 150, $string, $colorr);
  $font = 'images/font.ttf';
  imagettftext($im, 38, 0, $px-100, 180, $colorr, $font, $string);
  imagepng($im);
  // imagejpeg($im, NULL, 100);
  imagedestroy($im);
  ?>
  3. Скачать файлы любого кириллического шрифта с fonts.google.com и сохранить как images/font.ttf
  4. Создать файл html с кодом картинки <img src="button.php?text=Это кнопка!" alt=""> и открыть его в браузере
  5. Страница с материалами по обработке изображений в PHP

21/25 марта: Решение задач по обработке строк

  1. Просмотреть видеозапись занятия, доступную в группах Microsoft Teams, и материалы по обработке строк в php
  2. Создать страницу с формой ввода и скриптом обработки введенного текста. Скрипт должен подсчитывать в тексте: количество символов, количество символов без пробелов и количество слов.
  3. Для решения задачи рекомендуется применить функции iconv_strlen, str_replace, explode, count.

14/18 марта: Функции работы с текстом в php

Просмотреть видеозапись занятия, доступную в группах Microsoft Teams;

  1. Просмотреть материалы по работе с текстом в php и материал про свойство шрифтов
  2. Создать страницу, на которой будут представлены 1) различные семейства шрифтов, 2) свойством font-size установлен размер шрифта и 3) подключен хотя бы один внешний шрифт

7 марта: Понятие функции. Функции в php

Просмотреть видеозапись занятия, доступную в группах Microsoft Teams

  1. В файле index.php, как показано в видео, создать и выполнить функцию: 
    <?php
function fun($inpt, $in2, $in3=4)
{
    echo "Пример функции. На входе $inpt, $in2, $in3\n";
    $inpt += 2;
    return array($inpt, $in2+3);
}

echo "Запускаем функцию\n", fun(7, 8)[1], "<br>";
?>
  2. Справочная информация: Функция (программирование). Subroutine. Функции, определяемые пользователем. Возврат значений. Пример на phporphp.000webhostapp.com/fun/

28 февраля: Создание эскиза для творческого задания

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

  1. Моя персональная web-страница
  2. Тематический сайт
  3. Арт-проект. Визуальное искусство средствами web-дизайна. Например, Enjoy the beautiful
  4. Демонстрация web-технологии. Например, страница с игрой или тест
  5. Мой взгляд на web-технологию. Например, Что такое программирование?

Задание от 21 февраля: решение задач на тему «Массивы»

Просмотреть видеозапись занятия, доступную в группах Microsoft Teams

  1. Запустить учебный сервер PHP или открыть файловый менеджер на хостинге с поддержкой PHP
  2. Изменить скрипт (файл с расширением php), как показано в видео: 
    <?php
if (is_numeric($a)) {
  for ($i = 1; $i <= abs($a); $i++)
    echo "Silence is golden<br>";
} else {
  echo "Bad n<br>";
}

if (is_numeric($a)) {
  $squares = array();
  for ($i = 1; $i <= abs($a); $i++)
    $squares[$i] = $i**2;

foreach ($squares as $item => $value)
  echo $item, ", ", $value, "<br>";
}

$summa = 0;
$mult = 1;
foreach ($squares as $item => $value) {
  $summa += $value;
  $mult *= $value;
}
echo "$summa, $mult<br>";
?>
  3. Справочная информация: Массивы. Задачи на основы работы с массивами в PHP. Циклы и массивы в PHP. Пример на phporphp.000webhostapp.com/array/

Задание от 14 февраля: Массивы. Ассоциативные массивы. Цикл for

Просмотреть видеозапись занятия, доступную в группах Microsoft Teams

  1. Запустить учебный сервер PHP или открыть файловый менеджер на хостинге с поддержкой PHP
  2. Изменить скрипт (файл с расширением php), как показано в видео: 
    <?php
$zz = array();
$arr = array(5 => 1, 12 => 2);
$arr[0] = 7;
$arr[] = "sdsv";

foreach($arr as $item => $value) {
  echo $item, ", ", $value, "<br>";
}
echo "$arr[0], $arr[5], $arr[13]<br>";

$z = array("foo", "bar", "hello", "world");
$z = $z + $arr;

foreach($z as $item => $value) {
  echo $item, ", ", $value, "<br>";
}

foreach($arr as $item => $item_count)
  echo "Item=" . $item . ", Value=" . $item_count . ".<br>";
?>
    Мы изучили устройство массивов в PHP и научились работать с ними. Попробуйте применить массивы и циклы в своих проектах! Например, в массиве могут содержаться данные о пользователе, который оставил запись в гостевой книге.
  3. Справочная информация: Массивы, Операторы, работающие с массивами. Ассоциативные массивы в PHP с примерами. foreach. Пример на phporphp.000webhostapp.com/for/

Задание от 7 февраля: Вложенные циклы. Решение задач.

Просмотреть видеозапись занятия, доступную в группах Microsoft Teams и попробовать выполнить следующие задачи:

  1. Запустить учебный сервер PHP или открыть файловый менеджер на хостинге с поддержкой PHP. Например, бесплатный аккаунт на 000webhost.com
  2. Модифицировать файлы, созданные в прошлый раз. Изменить скрипт (файл с расширением php), как показано в видео: 
    <?php
$x = 1;
$y = 1;
while ($x <= $a) {
  $y = 1;
  while ($y <= $b) {
    echo $x, $y, "<br>";
    $y++;
  }
  $x++;
}
echo "Цикл for<br>";

for ($i = 1; $i <= $a; $i++)
    for ($j = 1; $j <= $b; $j++)
      if ($i != $j)
        echo $i, $j, "<br>";
?>
    Так мы вывели на экран все двузначные числа, где цифры ограничены введенными в форму значениями. Условное выражение во вложенных цикклах for исключает все числа, в которых цифры совпадают.
  3. Попробуйте найти все трехзначные числа, у которых все цифры различны.
  4. Справочная информация: Цикл for. Пример на phporphp.000webhostapp.com/while/

Задание от 31 января: Цикл while. Решение задач на циклы.

Просмотреть видеозапись занятия, доступную в группах Microsoft Teams и попробовать выполнить следующие задачи:

  1. Запустить учебный сервер PHP или открыть файловый менеджер на хостинге с поддержкой PHP. Например, бесплатный аккаунт на 000webhost.com
  2. Создать новый каталог и скопировать туда файлы, созданные в прошлый раз.
  3. Изменить скрипт (файл с расширением php), как показано в видео: 
    <?php
    $a = htmlspecialchars($_POST['i1']);
    $b = htmlspecialchars($_POST['i2']);
    while ($a <= $b) {
      if ($a % 2 == 0)
        echo $a, "<br>";
      $a++;
    }
?>
    Так мы вывели на экран все четные числа между a и b.
  4. Аналогичным образом можно вывести все степени числа. Для этого потребуется изменить оператор инкрементации ++ на оператор *=
    Попробуйте вывести степени двойки!
  5. Справочная информация: while, do-while.
    Пример на phporphp.000webhostapp.com/while/

Задание от 24 января: Написание программы для решения уравнений.

Просмотреть видеозапись занятия, доступную в группах Microsoft Teams и попробовать выполнить следующие задачи:

  1. Запустить учебный сервер PHP или открыть файловый менеджер на хостинге с поддержкой PHP. Например, бесплатный аккаунт на 000webhost.com
  2. Изменить код формы, созданный ранее: добавить в элемент input атрибут required:
    <input type="text" value="3" name="i2" required>
  3. Изменить скрипт (файл с расширением php), как показано в видео: 
    <?php
if (empty($_POST['i1']) && empty($_POST['i2'])) {
  $a = htmlspecialchars($_POST['i1']);
  $b = htmlspecialchars($_POST['i2']);
  echo "Введены числа ", $a, " и ", $b, "<br>";
}
  echo "Решаем уравнение", $a - $b / $b, "<br>округленное значение: ", round($a - $b / $b), "<br>";
else
  echo "Одно или несколько значений не установлены";

?>
  4. Попробуйте при решении уравнений применить другие математические функции.
  5. Справочная информация: Услловное выражение if, empty — Проверяет, пуста ли переменная.
    Пример на phporphp.000webhostapp.com/if/.

Задание от 17 января: Условный оператор IF. Операторы сравнения.

Просмотреть видеозапись занятия, доступную в группах Microsoft Teams и попробовать выполнить следующие задачи:

  1. Запустить учебный сервер PHP или открыть файловый менеджер на хостинге с поддержкой PHP. Например, бесплатный аккаунт на 000webhost.com
  2. Скопировать код формы и скрипта, созданные по теме Арифметические операции (занятие 13/17 декабря)
  3. Изменить файл с расширением php, как показано в видео: 
    <?php
$a = htmlspecialchars($_POST['i1']);
$b = htmlspecialchars($_POST['i2']);

if ($a > $b)
  echo "a ($a) больше b ($b)<br>";
else
  echo "b ($b) больше или равно a ($a)<br>";

if ($a != $b)
  echo "a ($a) не равно b ($b)<br>";
else
  echo "a ($a) равно b ($b)<br>";

if ($a == 1 || $b == 2 && $a + $b == 3)
  echo "a ($a) равно 1 или b ($b) равно 2<br>";
else
  echo "a ($a) не равно 1 и b ($b) не равно 2<br>";
?>
  4. Попробуйте применить другие операторы сравнения и логические операторы И, ИЛИ.
  5. Справочная информация: Услловное выражение if. Пример на phporphp.000webhostapp.com/if/

Задание от 27/31 декабря: Строки. Строковые операторы. Арифметические операторы

Просмотреть видеозапись занятия, доступную в группах Microsoft Teams и попробовать выполнить следующие задачи:

  1. Запустить учебный сервер PHP или открыть файловый менеджер на хостинге с поддержкой PHP. Например, бесплатный аккаунт на 000webhost.com
  2. Создать файл с расширением php слежующего содержания: 
    <pre>
<?php
  $a = trim(' Hello');
  $b = ' world';
  $a .= $b;
  echo $a;
  echo "\nHello $a" . '!!!' . "\n";
  echo 'Новая строка';
?>
</pre>
  3. Попробуйте заменить оператор конкатенации . на оператор сложения +
    Что произошло?
  4. Справочная информация: Строковые операторы, Строки. Пример на phporphp.000webhostapp.com/string/.

Задание от 20/24 декабря: Связь html-форм и php страниц

Просмотреть видеозапись занятия, доступную в группах Microsoft Teams и попробовать выполнить следующие задачи:

  1. Запустить учебный сервер PHP или открыть файловый менеджер на хостинге с поддержкой PHP. Например, бесплатный аккаунт на 000webhost.com
  2. Создать отдельную папку. Создать в ней файл index.html с кодом формы: 
    <form name="file_upload" method="POST" action="action.php" enctype="multipart/form-data">
  Загрузите ваш аватар:
  <input type="file" name="avatar">
  <input type="submit" name="send" value="Отправить файл">
</form>
  3. Создать там же файл action.php с кодом обработки формы: 
    <?php
if (isset($_FILES['avatar'])) {
    $file = $_FILES['avatar'];
    print("Загружен файл с именем " . $file['name'] . " и размером " . $file['size'] . " байт:<br>");
  }

$current_path = $_FILES['avatar']['tmp_name'];
$filename = $_FILES['avatar']['name'];
$new_path = dirname(__FILE__) . '/../images/' . $filename;
move_uploaded_file($current_path, $new_path);

echo "<img alt='' src='../images/$filename'>";
?>
    Для работы скрипта необходимо создать папку с именем "images" в родительском каталоге, в директории public_html (также говорят "в корне"). Скрипт печатает имя и размер загруженного файла, затем перемещает его в папку images и показывает на экране.
  4. Загрузите картинку (аватарку) при помощи созданной формы. Убедитесь, что в папке images появился новый файл.
  5. При помощи формы загрузки можно загружать любые файлы. Попробуйте загрузить файл, не являющийся изображением. Что произойдет?

Задание от 13/17 декабря: Арифметические операции

Просмотреть видеозапись занятия, доступную в группах Microsoft Teams и попробовать выполнить следующие задачи:

  1. Запустить учебный сервер PHP или открыть файловый менеджер на хостинге с поддержкой PHP. Например, бесплатный аккаунт на 000webhost.com
  2. Создать файл index.html с кодом формы: 
    <form action="action.php" method="post">
  <input type="text" value="2" name="i1">
  <input type="text" value="3" name="i2">
  <input type="submit" value="Отправить">
</form>
  3. Создать там же файл action.php с кодом обработки формы: 
    <?php
  $a = htmlspecialchars($_POST['i1']);
  $b = htmlspecialchars($_POST['i2']);
  echo "Введены числа <b>", $a, " и ", $b, "</b><br>";
  echo "Результат операции сложения: ", $a + $b, "<br>";
  echo "Результат операции вычитания: ",  $a - $b, "<br>";
  echo "Результат операции умножения: ",  $a * $b, "<br>";
  echo "Результат операции деления: ",  $a / $b, "<br>";
  echo "Результат операции возведения в степень: ",  $a ** $b, "<br>";
  echo "Возведение в степень при помощи функции pow(): ",  pow($a, $b), "<br>";
?>
    Теперь наш скрипт умеет выполнять арифметические операции. Обратите внимание: мы управляем форматированием вывода при помощи тегов HTML. То есть, команда echo может (и должна) выводить не просто текст, а код HTML.
  4. Напишите обработку формы, в первое поле которой вводится имя, а во второе поле - год рождения. После нажатия кнопки "отправить" запускается скипт action.php, который выводит приветствие вида "Здравствуй, Вася! Тебе 12 лет". Имя и возраст подставляются скриптом.
  5. Справочная информация, пример на phporphp.000webhostapp.com/arithmetic/

Задание от 6/10 декабря: Команда echo. Вывод переменных в html-документ

Просмотреть видеозапись занятия, доступную в группах Microsoft Teams и попробовать выполнить следующие задачи:

  1. Запустить учебный сервер PHP или создать аккаунт на хостинге с поддержкой PHP. Например, бесплатный аккаунт на 000webhost.com
  2. Создать в корневой директории (папке) файл index.html с кодом формы: 
    <form action="action.php" method="post">
  <input type="text" value="2" name="i1">
  <input type="text" value="3" name="i2">
  <input type="submit" value="Отправить">
</form>
  3. Создать там же файл action.php с кодом обработки формы: 
    <?php
  $a = htmlspecialchars($_POST['i1']);
  $b = htmlspecialchars($_POST['i2']);
  echo $a + $b;
?>
    Теперь наш скрипт умеет складывать введенные значения!
  4. Поменяйте в форме метод method="get" и замените названия служебной переменной $_POST на $_GET. Что изменилось?
  5. Попробуйте создать калькулятор, который выводит результаты операций сложения, вычитания, умножения и деления.
  6. Справочная информация, код более сложной формы.

Задание от 29 ноября: Основы PHP. Синтаксис. Переменные

Просмотреть видеозапись занятия, доступную в группах Microsoft Teams и попробовать выполнить следующие задачи:

  1. Скачать архив с интерпретатором PHP по ссылке. Подойдет версия VS16 x86 Non Thread Safe, ссылка на Zip-архив.
  2. Распаковать zip-архив в отдельную папку, создать ярлык файла php.exe (с зажатой клавишей Alt перетащить файл php.exe на рабочий стол или иную папку).
  3. Нажать правой кнопкой мыши на ярлык, открыть его свойства. В поле "объект" после php.exe через пробел дописать строку "-S localhost:8000" (без кавычек).
  4. Запустить учебный сервер PHP, дважды кликнув по созданному ярлыку. Должно открыться окно с текущей датой/временем и версией тестового сервера PHP.
  5. Создать текстовый файл с названием hello.php и сохранить его в папку, где находится распакованный файл php.exe. Содержимое hello.php – строка <?php echo 'Hello, world!'; ?>
  6. При запущенном сервере открыть в баузере страницу с URL localhost:8000/hello.php
  7. По желанию: повторить все действия с сервером и программой на PHP из видеозаписи занятия.