- 11.09.2017
- 12708
- 217
РАЗРАБОТКА, ВНЕДРЕНИЕ И АДАПТАЦИЯ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ
ОТРАСЛЕВОЙ НАПРАВЛЕННОСТИ
Методические рекомендации по выполнению практических работ
Создание макетов страниц
Цели: усвоить знание о структуре веб-страниц; освоить способы создания макетов страниц.
Краткие теоретические положения
Любой html документ состоит из обычного текста и разметочных тэгов. Текст используется для передачи информации, а разметочные тэги используются для ее группировки и оформления.
Разметочные тэги html представляют собой специальные слова, которые окружены с обеих сторон угловыми скобками. Тэги обычно используются в паре, например: <b></b>. Первый тэг называется начальным тэгом, а второй конечным тэгом.
Если html документ открыть в редакторе, он будет отображен как обычный текстовый файл. Если html документ открыть в браузере, он будет отображен в соответствии с разметочными тэгами и будет называться веб-страницей. Главная цель любого веб-браузера – прочитать html документ и отобразить его как веб-страницу.
Макеты веб-страниц содержат разметочные теги и контентные заглушки. Теги создают каркас страниц; заглушки не несут смысловой информации, но дают представление о внешнем виде страниц.
Для оформления страниц применяют каскадные таблицы стилей. Сокращение css расшифровывается Cascading Style Sheets. Таблицы позволяет хранить информацию об оформлении html документа в отдельном внешнем файле с расширением .css. Редактируя лишь один этот файл стало возможным изменение оформления целого веб-сайта.
Задача. Создать несколько макетов страниц, содержащих контентные заглушки. Применить форматирование стилями для контентных заглушек.
Рис. 1. Документ html в редакторе и в браузере
Программа работы
1. Создать и сохранить в отдельной папке пустые макеты страниц под произвольными именами.
2. Разработать эскизы страниц с тегами и селекторами.
3. Разработать правила оформления для селекторов и сохранить их в файле с расширением css.
4. Наполнить макеты контентными заглушками протестировать их вид в браузере.
5. Нарисовать эскизы страниц и записать тексты файлов с расширением html и css с комментариями в отчете по работе.
Контрольные вопросы
1. Какое расширение имеют файлы веб-страниц?
2. Какое программное обеспечение достаточно для создания веб-страниц?
3. Какое программное обеспечение необходимо для просмотра веб-страниц?
4. Для чего применяются каскадные таблицы стилей?
5. Как подключается файл стилей к веб-странице?
Заполнение макетов контентом
Цели: усвоить знание о свойствах контента для веб-страниц; освоить способы подготовки контента и наполнения им веб-страниц.
Краткие теоретические положения
Контент – это те виды информации, которая находится на сайте (на блоге). Другими словами, это наполнение веб-ресурса информацией с помощью разных способов. То есть на сайте есть материалы, которые подаются с помощью символов, графики, звука или видео. Таким образом определение контента сводится к содержимому сайта.
В зависимости от поставленных ресурсу задач, контент может быть реализован разными способами (текст, изображения, аудиозапись, видеозапись, инфографика и т.д.) и их комбинацией. На следующем рисунке по сути одна и та же информация подана разными вариантами контента – в первом случае форматированным текстом и картинками, во втором – инфографикой.
Рис. 1. Представление информации разными способами
Контента должно быть столько, чтобы полностью удовлетворить потребности читателя. Современный контент должен содержать в себе не только уникальную и полезную информацию. Он должен быть еще и актуальным. Контент целевой статьи сайта должен отвечать требованиям читателей, отвечать на их потенциальные вопросы. Главное – это удовлетворить потребность человека, сделать свой материал релевантным его запросам.
Задача. Заполнить готовые макеты страниц тематическим контентом с определенным стилевым оформлением.
Программа работы
1. Скопировать и сохранить в отдельной папке макеты страниц под произвольными именами.
2. Подобрать и обработать контент для заполнения страниц, сохранить его в отдельных папках.
3. Заполнить страницы контентом и сохранить их.
4. Протестировать страницы в браузере и при необходимости внести изменения.
5. Нарисовать эскизы страниц и записать тексты файлов с расширением html и css с комментариями в отчете по работе.
Контрольные вопросы
1. Что такое контент?
2. В какой форме может быть реализован контент?
3. Что такое инфографика?
4. Чему должен соответствовать контент статьи на сайте?
5. Что такое релевантность контента?
Применение анимации на страницах
Цели: усвоить знание о роли анимации на веб-страницах; освоить способы создания и отображения анимации на веб-страницах.
Краткие теоретические положения
Анимация в информационных технологиях – способ создания серии снимков, рисунков, цветных пятен, кукол или силуэтов в отдельных фазах движения, с помощью которого во время показа их на экране возникает впечатление движения существа или предмета. Движение здесь больше иллюзорно, чем реально, так как все-таки зависит от частоты смены картинок и их предельной детализации и прорисовки.
Для создания анимации в CSS3 используется свойство @keyframes. Данное свойство представляет собой контейнер, в который должны помещаться различные свойства оформления. Синтаксически это выглядит так:
|
@keyframes имяАнимации { from {css свойства} /* Оформление элемента перед началом анимации */ to {css свойства} } /* Оформление элемента после завершения анимации */ |
После того, как анимация была создана, необходимо добавить к элементу, который надо анимировать, css3 свойство animation и указать в нем имя анимации (1 значение) и время (2 значение), в течении которого она будет выполняться. Также можно устанавливать количество повторов анимации (3 значение).
|
@keyframes anim { from {margin-left:3px;} to {margin-left:500px;} } #wrap1 {animation: anim 4s 3;} |
Задача. Создать веб-страницу с определенным количеством анимированных элементов. Для оформления использовать каскадные таблицы стилей.
|
|
|
Рис. 1. Пример анимации элемента
Программа работы
1. Создать и сохранить в отдельной папке веб-страницу под произвольным именем.
2. Подобрать контент и заполнить им страницу.
3. Создать анимацию для элементов страницы.
4. Протестировать страницу в браузере и при необходимости внести изменения.
5. Нарисовать эскиз страницы и записать тексты файлов с расширением html и css с комментариями в отчете по работе.
Контрольные вопросы
1. Какой процесс называют анимацией в информационных технологиях?
2. Какое свойство в CSS3 используется для создания анимации?
3. Имеет ли анимация имя?
4. Какое свойство добавляется к элементу, который надо анимировать?
5. Что указывается в свойстве animation?
Ввод и вывод данных
Цели: усвоить знание возможностей языка JavaScript при вводе и выводе данных; освоить способы ввода и вывода данных.
Краткие теоретические положения
Метод alert используется для вывода простейшего диалогового окна, содержащего текст сообщения и единственную кнопку Ok. Формат вызова данной функции: alert(Текст сообщения);.
Функция confirm позволяет вывести пользователю диалоговое окно, содержащее текст сообщения и кнопки Ok и Cancel. Используется в тех случаях, когда пользователь должен сделать выбор. Формат вызова данной функции:
var result=confirm("Текст вопроса"); //условная конструкция для проверки результата;
if(result) { /* действия */ } else { /* действия */ };.
Функция prompt позволяет вывести пользователю диалоговое окно запроса на ввод данных. Используется в тех случаях, когда пользователь должен ввести строку текста. Формат вызова данной функции: var str=prompt(Запрос на ввод данных, значение по умолчанию);.
Необходимо помнить, что функция prompt возвращает результат строкового типа. Поэтому, прежде чем его использовать в арифметических выражениях, необходимо выполнить преобразование типов к числовому. Это можно сделать при помощи следующих функций:
parseInt(строка) - преобразует строку в целое число;
parseFloat(строка) - преобразует строку в число с плавающей точкой.
Задача. Создать веб-страницу, на которой запрашиваются данные, обрабатываются и результат выводится.
Рис. 1. Пример диалогового окна
Программа работы
1. Выбрать или создать макет веб-страницы и сохранить его в папке проекта.
2. На основе макета создать веб-страницу, которая использует файлы с расширением css и js.
3. Для файла скриптов разработать программный код на языке JavaScript в соответствии с темой работы.
4. Протестировать веб-страницу в браузере, при необходимости внести исправления и изменения.
5. Нарисовать эскиз страницы и записать тексты файлов с расширением html, css, js с комментариями в отчете по работе.
Контрольные вопросы
1. Для чего используется метод alert?
2. Для чего используется функция confirm?
3. Для чего используется функция prompt?
4. При помощи каких функций строка превращается в число?
5. Как подключается к веб-странице файл скриптов?
Использование операторов
Цели: усвоить знание операторов языка JavaScript; освоить способы применения операторов языка.
Краткие теоретические положения
Арифметические операторы используются для выполнения арифметических операций над переменными или значениями: +, –, *, /, %, ++, - -.
Для того, чтобы уменьшить размер можно использовать сокращенную запись арифметических операций: +=, –=, *=, %=.
Операторы сравнения позволяют производить над переменными и значениями различные операции сравнения: ==, ===, !=, >, <, >=, <=.
В результате выполнения таких операций в зависимости от исхода возвращается true (истина) или false (ложь).
Логические операторы используются для связки нескольких операторов сравнения: &&, ||, !.
Пример применения арифметических операторов:
var ex1=10+5; document.write(ex1 + '<br />');
var ex2='10'+'5'; document.write(ex2 + '<br />'); //Сложение двух строк
var ex3='10'+5; document.write(ex3 + '<br />'); //Сложение строки и числа
var ex4='5'+10; document.write(ex4);
Пример применения операторов сравнения:
<script>
var a=10; //Запишем число 10 в переменную a
var b=7; //Запишем число 7 в переменную b
//Проверим совпадают ли числа
if (a==b) {document.write('Числа совпадают');}
else {document.write('Числа не совпадают');}
</script>
Задача. Создать веб-страницу, на которой запрашиваются данные, обрабатываются при помощи операторов и результат выводится.
Программа работы
1. Выбрать или создать макет веб-страницы и сохранить его в папке проекта.
2. На основе макета создать веб-страницу, которая использует файлы с расширением css и js.
3. Для файла скриптов разработать программный код на языке JavaScript в соответствии с темой работы.
4. Протестировать веб-страницу в браузере, при необходимости внести исправления и изменения.
5. Нарисовать эскиз страницы и записать тексты файлов с расширением html, css, js с комментариями в отчете по работе.
Контрольные вопросы
1. Какие действия выполняют арифметические операторы?
2. Какие действия выполняют операторы сравнения?
3. Какие действия выполняют логические операторы?
4. Как обозначается оператор, который проверяет переменные или значения на равенство, учитывая тип переменной?
5. Как обозначается оператор, который вычисляет остаток от деления чисел?
Использование алгоритмических конструкций
Цели: усвоить знание алгоритмических конструкций языка JavaScript; освоить способы применения алгоритмических конструкций.
Краткие теоретические положения
В JavaScript имеются следующие условные конструкции:
конструкция if применяется для того, чтобы блок команд был выполнен, если указанное условие истинно;
конструкция if..else применяется для того, чтобы один блок команд был выполнен, если указанное условие истинно, и другой блок команд, если условие ложно;
конструкция if..else if..else применяется для того, чтобы при определенном условии команды выполнились только в одном из нескольких блоков;
конструкция switch применяется для того, чтобы при определенном условии команды выполнились только в одном из нескольких блоков.
В JavaScript поддерживает следующие виды циклов: for; while; do..while.
Цикл for исполняет блок команд пока заданное условие является истинным.
Цикл while выполняет блок кода, пока заданное условие истинно.
Цикл do..while часто называют циклом с постусловием, потому что в отличие от предыдущих циклов он вначале исполняет блок команд и только потом проверяет заданное условие. Если условие истинно блок команд выполняется еще раз, если условие ложно цикл завершает исполнение.
С помощью команды break принудительно прерывают выполнение цикла. Команда continue обрывает текущую итерацию выполнения цикла и переходит к следующей.
Задача. Создать веб-страницу, на которой запрашиваются данные, обрабатываются при помощи условных и циклических операторов и результат выводится.
Пример программного кода:
var i=1;
while (i<=30) {document.write (i+' '); i++; };
Будет выведено: 1 2 3 … 30.
Программа работы
1. Выбрать или создать макет веб-страницы и сохранить его в папке проекта.
2. На основе макета создать веб-страницу, которая использует файлы с расширением css и js.
3. Для файла скриптов разработать программный код на языке JavaScript в соответствии с темой работы.
4. Протестировать веб-страницу в браузере, при необходимости внести исправления и изменения.
5. Нарисовать эскиз страницы и записать тексты файлов с расширением html, css, js с комментариями в отчете по работе.
Контрольные вопросы
1. Для чего применяется конструкция if..else?
2. Для чего применяется конструкция switch?
3. Для чего применяется конструкция do..while?
4. Чем отличаются конструкции for и while?
5. При помощи каких команд прерывается выполнение цикла или итерации?
Обработка массивов
Цели: усвоить знание процесса обработки массивов; освоить способы обработки массивов.
Краткие теоретические положения
Массивы в JavaScript представляют собой объектный тип данных, служащий для хранения и обработки множества значений (чаще всего одного типа данных). Массивы создаются при помощи оператора new. Существует три варианта вызова конструктора Array():
var empty = new Array(); // создание пустого массива
var a = new Array(length); // создание массива из "length" неопределенных значений
var a = new Array(item1, item2, ...); // создание массива из заданных значений
Цикл for..in используется для перебора массивов или объектов. В ходе выполнения цикла переменная будет поочередно принимать значения всех элементов массива или всех свойств объекта. Синтаксис:
for (переменная in объект или массив)
{ //Код, который будет выполнен для каждого элемента или свойства};
Для ввода массива с клавиатуры чаще всего используют цикл. Если количество элементов массива известно заранее, используют цикл for, иначе подойдет цикл с постусловием do…while.
|
Пример программного кода |
Результат выполнения кода |
|
var a = new Array(); var count = 10; for (var i=0; i<count; i++) a[i]=parseInt(prompt("Введите целое число:", "")); alert("Массив: "+a.join(", ")); // вывод массива |
|
Для добавления элементов в массив можно воспользоваться методами push() и unshift(). Метод push() добавляет элементы в конец массива, а метод unshift() - в начало.
Для удаления элементов из массива используйте методы pop() и shift(). Метод pop() удаляет последний элемент массива, а метод shift() - первый.
Задача. Создать веб-страницу, на которой создаются массивы, обрабатываются при помощи операторов и результат выводится.
Программа работы
1. Выбрать или создать макет веб-страницы и сохранить его в папке проекта.
2. На основе макета создать веб-страницу, которая использует файлы с расширением css и js.
3. Для файла скриптов разработать программный код на языке JavaScript в соответствии с темой работы.
4. Протестировать веб-страницу в браузере, при необходимости внести исправления и изменения.
5. Нарисовать эскиз страницы и записать тексты файлов с расширением html, css, js с комментариями в отчете по работе.
Контрольные вопросы
1. Как создаются массивы в JavaScript?
2. Для чего используется цикл for..in?
3. Что используют чаще всего для ввода массива с клавиатуры?
4. Какие методы применяют для добавления элементов в массив?
5. Какие методы применяют для удаления элементов из массива?
Программирование событий
Цели: усвоить знание процесса программирования событий; освоить способы программирования событий.
Краткие теоретические положения
События - это функции, которые могут быть привязаны к элементам HTML страниц. Код событий выполнится только после того, как произойдет их активирующее действие. Разные типы событий имеют разные активирующие действия.
Примеры активирующих действий JavaScript:
Щелчок мыши (onclick);
Нажатие клавиши (onkeypress);
Отправление формы (onsubmit);
Наведение курсора мыши на элемент (onmouseover)
Выведение курсора мыши за пределы границ элемента (onmouseout);
Полная загрузка страницы или картинки (onload);
Изменение содержимого элемента (onchange).
|
Пример программного кода |
Вид до и после |
|
<html> <head> <script> function messageShow() {document.write('Вы нажали на кнопку!'); } </script> </head> <body> <input type='button' value='Нажмите на кнопку' onclick='messageShow()'/> </body> </html> |
До
После
|
Задача. Создать веб-страницу, на которой запрашиваются данные, обрабатываются при выполнении событий и результат выводится.
Программа работы
1. Выбрать или создать макет веб-страницы и сохранить его в папке проекта.
2. На основе макета создать веб-страницу, которая использует файлы с расширением css и js.
3. Для файла скриптов разработать программный код на языке JavaScript в соответствии с темой работы.
4. Протестировать веб-страницу в браузере, при необходимости внести исправления и изменения.
5. Нарисовать эскиз страницы и записать тексты файлов с расширением html, css, js с комментариями в отчете по работе.
Контрольные вопросы
1. Что называют событием в языке JavaScript?
2. Что происходит после активирующего действия?
3. Какое активирующее действие происходит после загрузки страницы или картинки?
4. Какое активирующее действие происходит после наведение указателя мыши на элемент?
5. Чему соответствует активирующее действие onkeypress?
Определение и применение свойств объектов
Цели: усвоить знание объектов JavaScript; освоить способы определения и применения свойств объектов.
Краткие теоретические положения
Объектно-ориентированное программирование - это стиль программирования, ориентированный на работу с объектами.
Объект в ООП — это сущность, способная сохранять свое состояние (информацию) и обеспечивающая набор операций (поведение) для проверки и изменения этого состояния.
В реальном мире мы можем рассматривать как объекты все, что нас окружает. Объектом может быть: компьютер, машина, самолет, дом, гитара. В JavaScript объектами являются строки, массивы, регулярные выражения и т.д. Объекты могут иметь свойства и методы.
Свойства являются значениями, которые связаны с объектами. Объект массив имеет свойство length позволяющее узнать количество элементов в этом массиве. При обращении к свойству объекта необходимо отделить его точкой от названия объекта (объект.свойство).
Методы являются действиями, которые могут быть совершены над объектами. Объект массив имеет метод reverse() позволяющий изменять порядок следования элементов в массиве на противоположный. При обращении к методу объекта необходимо отделить его точкой от названия объекта и добавить после него круглые скобки, например объект.метод().
Пример: var mas=new Array();
mas[0]='1 элемент массива';
mas[1]='2 элемент массива';
document.write('Массив содержит '+mas.length+' элементов.');
document.write(mas.reverse());
Объект Date позволяет производить различные операции с датой и временем. Используя свойства и методы объекта Math можно выполнять в JavaScript различные математические операции. Объект String (строковый объект) используется для хранения и обработки текстовой информации.
Задача. Создать веб-страницу, на которой выводятся свойства объектов, применяются методы объектов, изменяются свойства при выполнении событий.
Программа работы
1. Выбрать или создать макет веб-страницы и сохранить его в папке проекта.
2. На основе макета создать веб-страницу, которая использует файлы с расширением css и js.
3. Для файла скриптов разработать программный код на языке JavaScript в соответствии с темой работы.
4. Протестировать веб-страницу в браузере, при необходимости внести исправления и изменения.
5. Нарисовать эскиз страницы и записать тексты файлов с расширением html, css, js с комментариями в отчете по работе.
Контрольные вопросы
1. Что называют объектом в объектно-ориентированном программировании?
2. Что называют свойством объекта?
3. Что называют методом объекта?
4. Как обращаются к свойству объекта?
5. Как обращаются к методу объекта?
Работа с формами и элементами страницы
Цели: усвоить знание свойств форм и элементов на странице; освоить способы использования форм и элементов на странице.
Краткие теоретические положения
Если в html-документе определена форма, то она доступна сценарию JavaScript как объект, входящий в объект document с именем, заданным атрибутом name тега form.
Форма имеет два набора свойств, состав одного из которых фиксированный, а состав другого зависит от того, какие элементы определены в форме.
Таблица 1. Свойства и методы элементов формы
|
Кнопки (BUTTON, RESET, SUBMIT) |
Поле ввода (TEXT) |
|
Свойства name. Имя объекта. value. Надпись на кнопке. Метод click( ). Вызов этого метода тождественен щелчку мышкой по кнопке.
|
Свойства name. Имя объекта. defaultValue. Начальное содержимое поля. value. Текущее содержимое поля. Методы focus( ). Передает полю фокус ввода. blur( ). Отбирает у поля фокус ввода. select( ). Выделяет содержимое поля. |
Из сценария скрипта можно обратиться к информации, введенной в свойство value элемента формы.
Таблица 2. Примеры программных кодов
|
Создание формы с элементами |
Обращение к свойствам элемента формы |
|
<form name="anketa"> <p> Введите ФИО в поля ниже: </p> <br /> Имя: <input type="text" name="firstname"/><br/> Фамилия:<input type="text" name="lastname1"/><br/> Отчество: <input type="text" name="lastname2" /> </form> |
<script> document.write (anketa.firstname+"*"+ anketa. lastname1 +"** "+ anketa.lastname2); var fio= document. anketa.firstname; </script> |
Задача. Создать веб-страницу, на которой при помощи форм вводятся данные, происходит обработка данных, результаты обработки выводятся.
Программа работы
1. Выбрать или создать макет веб-страницы и сохранить его в папке проекта.
2. На основе макета создать веб-страницу, которая использует файлы с расширением css и js.
3. Для файла скриптов разработать программный код на языке JavaScript в соответствии с темой работы.
4. Протестировать веб-страницу в браузере, при необходимости внести исправления и изменения.
5. Нарисовать эскиз страницы и записать тексты файлов с расширением html, css, js с комментариями в отчете по работе.
Контрольные вопросы
1. В виде чего форма на странице доступна сценарию JavaScript?
2. Каким методом обладают элементы Кнопки формы?
3. Какое свойство элемента Поле ввода формы содержит введенную строку?
4. Как в сценарии JavaScript можно переменной присвоить значение строки из Поля ввода?
5. Какими методами обладает элемент Поле ввода формы?
Работа с графикой и мультимедиа
Цели: усвоить знание возможностей языка JavaScript по работе с графикой и мультимедиа; освоить способы использования графики и мультимедиа на странице.
Краткие теоретические положения
Одна минута видео иногда может рассказать пользователям больше, чем десятки страниц текста. В HTML5 введен специальный тэг <video> позволяющий встраивать в веб-страницы видео файлы. Атрибут src тэга <video> позволяет указать путь к видео файлу, который будет воспроизведен. Атрибут controls отображает в плеере кнопки управления видео, a атрибуты height (высота) и width (ширина) задают размеры плеера.
Пример: <video src="mountvideo.ogv" width='300' height='200' controls='controls'></video>
Таблица 1. Атрибуты тега видео
|
Арибут |
Значение |
Описание |
|
autoplay |
autoplay |
Указывает, что видео файл должен начинать проигрываться сразу после загрузки страницы. |
|
loop |
loop |
Указывает, что видео файл после окончания должен снова начинать проигрываться. |
|
muted |
muted |
Приглушает звук видео файла. |
|
poster |
URL |
Указывает URL адрес картинки, которая будет отображена в проигрывателе пока пользователь не нажмет кнопку начала воспроизведения. |
|
load |
auto |
load=auto указывает, что видео файл должен
начинать загружаться сразу после загрузки документа. |
Используя тег <audio>, можно добавить на веб-сайт музыкальный трек или подкаст. Атрибут src тэга <audio> позволяет указать путь к аудио файлу, а атрибут controls добавляет кнопки управления.
Пример: <audio src="ghost_k-stop.ogv" controls='controls'></audio>
Задача. Создать веб-страницу, на которой при помощи форм выбираются и воспроизводятся файлы мультимедиа.
Программа работы
1. Выбрать или создать макет веб-страницы и сохранить его в папке проекта.
2. На основе макета создать веб-страницу, которая использует файлы с расширением css и js.
3. Для файла скриптов разработать программный код на языке JavaScript в соответствии с темой работы.
4. Протестировать веб-страницу в браузере, при необходимости внести исправления и изменения.
5. Нарисовать эскиз страницы и записать тексты файлов с расширением html, css, js с комментариями в отчете по работе.
Контрольные вопросы
1. Какой тег в HTML5 предназначен для воспроизведения видео файлов?
2. Какой тег в HTML5 предназначен для воспроизведения аудио файлов?
3. Какой атрибут тэга <video> позволяет указать путь к видео файлу?
4. Какие атрибуты тэга <video> задают размеры плеера?
5. Что отображает в плеере атрибут controls?
Установка ПО сервера
Цели: усвоить знание требований к программному обеспечению для установки локального сервера; освоить способы установки ПО сервера.
Краткие теоретические положения
Для тестирования и настройки программ необходимо установить на компьютер специальное программное обеспечение:
1. Веб-cepвep Apache – программное обеспечение, отвечающее за отображение документов, запрашиваемых в адресной строке веб-6payзepa;
2. Интерпретатор РНР – для выполнения программ, написанных на языке РНР;
3. MySQL – сервер баз данных;
4. РhpMyAdmin – набop скриптов на РНР для управления базами данных.
Все эти программы можно бесплатно получить с сайтов производителей. Установка требует большого количества настроек.
Альтернативным вариантом является установка Джентльменского набора Web-разработчика (Д.н.w.р, читается Денвер): локальный сервер (Apache, PHP,MySQL, Perl и т.д.) и программная оболочка, используемые для разработки сайтов на локальной Windows-машине.
Локальный сервер представляет собой специализированное программное обеспечение, установив которое на свой компьютер, веб-мастер может разрабатывать свой сайт, не выходя в Интернет.
Localhost (так называемый, локальный хост, по смыслу – этот компьютер) – в компьютерных сетях стандартное, официально зарезервированное, доменное имя для частных IP-адресов (в диапазоне 127.0.0.1 – 127.255.255.255). Для сети, состоящей только из одного компьютера, как правило, используется всего один адрес – 127.0.0.1.
Рис. 1. Окончание установки пакета Денвер
Программа работы
1. Ознакомиться с инструкциями по установке программного обеспечения.
2. Скачать программное обеспечение с сайтов производителей.
3. Установить программное обеспечение на компьютер.
4. Протестировать работу ПО на простых примерах.
5. Записать алгоритм установки По в отчет по работе.
Контрольные вопросы
1. Какое программное обеспечение необходимо установить для тестирования и настройки локального веб-сервера?
2. Какой пакет позволяет установить одновременно весь комплект программ с настройками?
3. Что такое локальный сервер?
4. Что такое локальный хост?
5. Как записывается адрес локального хоста одного компьютера?
Создание страниц на PHP
Цели: усвоить знание основ языка PHP; освоить способы создания веб-страниц на языке PHP.
Краткие теоретические положения
Язык программирования PHP используется по всему миру и на нём можно создавать сайты всех уровней сложности, от сайтов-визиток до крупных порталов.
PHP-код встраивается в html-страницы при помощи угловых скобок и знака вопроса <?php код; ?>, однако можно ограничиться скобками со знаками вопроса<? код; ?>. Нужно изменить расширение файла на .php.
Таблица 1. Простая страница на PHP
|
Пример файла index.php |
Пояснение |
|
html> <head> <title>Пример использования PHP</title> </head> <body> <?php echo "Привет, мир!"; ?> </body> </html> |
Оператор echo нужен для вывода данных. Содержимое берут в кавычки, а в конце ставят точку с запятой ; это обозначает конец работы оператора. |
В отличие от оператора echo, print выводит данные с учётом пробелов и переносов текста. Имеет некоторые ограничения - можно использовать только один аргумент. Поэтому для вывода больших частей html кода есть другой оператор вывода, использующего синтаксис heredoc.
Переменные в php - это некий информационный контейнер, который может содержать в себе различные типы данных (текст, цифры, массивы и так далее). В целом переменные позволяют создавать, хранить, изменять, а в дальнейшем оперативно обращаться к информации, заданной в них
Вначале имена переменных содержат знак $ (доллар), потом буквы латинского алфавита (от a до z и маленькие и большие), в конце могу содержать цифры. Также в названии допускается использование нижнего подчеркивания (не в конце).
Задача. Создать страницу, на которой выводится информация различного типа различными методами.
Программа работы
1. Выбрать или создать макет веб-страницы и сохранить его в папке проекта с расширением .php.
2. На основе макета создать веб-страницу, которая использует файл с расширением css и содержит код php.
3. Разработать программный код на языке PHP в соответствии с темой работы.
4. Протестировать веб-страницу в браузере, при необходимости внести исправления и изменения.
5. Нарисовать эскиз страницы и записать тексты файлов с комментариями в отчете по работе.
Контрольные вопросы
1. Для чего предназначен язык программирования PHP?
2. Как PHP-код встраивается в html-страницы?
3. С помощью каких операторов выводятся данные?
4. Что может храниться в переменной PHP?
5. С чего начинаются идентификаторы переменных?
Применение операторов PHP
Цели: усвоить знание операторов PHP; освоить способы применения операторов PHP.
Краткие теоретические положения
В случае с числовыми значениями можно проводить арифметические операции: сложение, вычитание, умножение и так далее.
|
Пример |
Название |
Результат |
|
-$a |
Отрицание |
Смена знака $a. |
|
$a + $b |
Сложение |
Сумма $a и $b. |
|
$a - $b |
Вычитание |
Разность $a и $b. |
|
$a * $b |
Умножение |
Произведение $a и $b. |
|
$a / $b |
Деление |
Частное от деления $a на $b. |
|
$a % $b |
Деление по модулю |
Целочисленный остаток от деления $a на $b. |
Операции инкремента и декремента
|
Пример |
Название |
Действие |
|
++$a |
Префиксный инкремент |
Увеличивает $a на единицу и возвращает значение $a. |
|
$a++ |
Постфиксный инкремент |
Возвращает значение $a, а затем увеличивает $a на единицу. |
|
--$a |
Префиксный декремент |
Уменьшает $a на единицу и возвращает значение $a. |
|
$a-- |
Постфиксный декремент |
Возвращает значение $a, а затем уменьшает $a на единицу. |
Базовый оператор присвоения обозначается как =. На первый взгляд может показаться, что это оператор равно. На самом деле это не так. В действительности, оператор присвоения означает, что левый операнд получает значение правого выражения, (т.е. устанавливается результирующим значением).
В PHP есть два оператора для работы со строками. Первый – оператор конкатенации ('.'), который возвращает объединение левого и правого аргумента. Второй – оператор присвоения с конкатенацией, который присоединяет правый аргумент к левому.
В дополнение к
базовому оператору присвоения имеются комбинированные операторы для всех
бинарных арифметических и строковых операций. Пример: $a = 3;
$a += 5;. Переменная $a будет равна 8.
Задача. Создать страницу, на которой применяются различные операторы.
Программа работы
1. Выбрать или создать макет веб-страницы и сохранить его в папке проекта с расширением .php.
2. На основе макета создать веб-страницу, которая использует файл с расширением css и содержит код php.
3. Разработать программный код на языке PHP в соответствии с темой работы.
4. Протестировать веб-страницу в браузере, при необходимости внести исправления и изменения.
5. Нарисовать эскиз страницы и записать тексты файлов с комментариями в отчете по работе.
Контрольные вопросы
1. Что происходит со значениями переменных при применении операции инкремента?
2. Что происходит со значениями переменных при применении операции декремента?
3. Как обозначается оператор присвоения?
4. К каким переменным применяется оператор конкатенации?
5. Что представляют собой комбинированные операторы?
Использование массивов PHP
Цели: усвоить знание особенностей массивов PHP; освоить способы применения массивов PHP.
Краткие теоретические положения
Массив представляет собой набор элементов, который хранится в одной переменной. Элемент представлен парой ключ – значение. Ключ – это идентификатор, с помощью которого можно обратиться к определенному значению. Числовые ключи массива чаще всего называют индексами. Значение элемента может быть представлено любым типом данных.
В качестве ключей могут использоваться целые числа (в этом случае массив называют числовым), строки (ассоциативный массив) или комбинация чисел и строк (смешанный массив).
Создать массив можно с помощью конструктора array(): $a = array(1,2,3);. Можно использовать более короткий синтаксис создания массива: $a = [1,2,3];. Оба эти способа позволяют также явно указывать индексы для значений: $b = [1=>1, 2=>2, 3=>3];.
Ассоциативный массив можно создать как с помощью конструктора array(), так и при помощи короткого синтаксиса – квадратных скобок. Для указания элементов используется формат ключ => значение. Пример: 'foo' => 'bar'.
Добавить элемент в массив можно с помощью операции присваивания: $a[3] = 4;. Чтобы удалить какой-либо элемент массива, используют функция unset($a[2]);. Для вывода массива применяют функции: var_dump($a); print_r($a);.
Цикл foreach осуществляет последовательный перебор всех элементов массива. Он работает только с массивами и объектами.
Пример: foreach ($a as $k => $v) {echo $k." => ".$v."<br>";}.
Задача. Создать страницу, на которой вводятся, обрабатываются и выводятся различные массивы.
Программа работы
1. Выбрать или создать макет веб-страницы и сохранить его в папке проекта с расширением .php.
2. На основе макета создать веб-страницу, которая использует файл с расширением css и содержит код php.
3. Разработать программный код на языке PHP в соответствии с темой работы.
4. Протестировать веб-страницу в браузере, при необходимости внести исправления и изменения.
5. Нарисовать эскиз страницы и записать тексты файлов с комментариями в отчете по работе.
Контрольные вопросы
1. Что представляет собой массив?
2. Из чего состоит элемент массива?
3. Чем числовой массив отличается от ассоциативного?
4. Какими способами можно создать массив?
5. Для чего предназначен цикл foreach?
Применение функций PHP
Цели: усвоить знание основных функций PHP; освоить способы применения функций PHP.
Краткие теоретические положения
Функция – это именованный блок кода, в данном случае на языке PHP, который определяется один раз, а затем может вызываться на исполнение сколько угодно раз. Определение функции выполняется с помощью ключевого слова function за которым указываются следующие компоненты:
1. Идентификатор, определяющий имя функции.
2. Пара круглых скобок вокруг списка из нуля или более идентификаторов, разделенных запятыми. В теле функции они используются в качестве локальных переменных.
3. Пара фигурных скобок с нулем или более инструкций. Эти инструкции составляют тело функции: они выполняются при каждом вызове функции.
Значения, которые будут присвоены параметрам, называются аргументами, которые могут быть различного типа. По умолчанию аргументы передаются в функцию по значению (это значит, что если изменить значение параметра внутри функции, то вне ее переданное значение останется прежним).
Если необходимо разрешить функции изменять переданные аргументы за ее пределами, то следует передавать их по ссылке. Для этого надо указать знак & (амперсанд) перед именем параметра в определении функции.
Когда выполнение функции завершается, она может возвратить некоторое значение (результат работы функции) программе, которая ее вызвала. Оператор return внутри функций служит для определения значения, возвращаемого функцией.
Синтаксис: function имя_функции([параметры]) { блок кода }. Пример:
function my_car($car, $color) {echo "Марка машины: $car и она имеет $color цвет";};
Вызов функции по имени с указанием аргументов: my_car('меган', 'серый');.
Задача. Создать страницу, на которой объявляются и применяются различные функции, с помощью которых обрабатываются различные данные.
Программа работы
1. Выбрать или создать макет веб-страницы и сохранить его в папке проекта с расширением .php.
2. На основе макета создать веб-страницу, которая использует файл с расширением css и содержит код php.
3. Разработать программный код на языке PHP в соответствии с темой работы.
4. Протестировать веб-страницу в браузере, при необходимости внести исправления и изменения.
5. Нарисовать эскиз страницы и записать тексты файлов с комментариями в отчете по работе.
Контрольные вопросы
1. Что называют функцией?
2. Какую роль играет идентификатор функции?
3. Что представляют собой параметры функции?
4. Что такое блок кода функции?
5. Какую роль играет оператор return?
Условные и циклические операторы PHP
Цели: усвоить знание алгоритмических конструкций PHP; освоить способы применения алгоритмических конструкций PHP.
Краткие теоретические положения
Оператор if сначала вычисляет условное выражение указанное в круглых скобках, результатом этого выражения является булево значение.
Пример: if ($foo < $bar) $min = $foo; else $min = $bar;
Тернарный оператор использует три операнда: $min = ($foo < $bar) ? $foo : $bar;.
Оператор switch сравнивает значение условного выражения с несколькими значениями.
Цикл – это блок кода, позволяющий повторять выполнение некоторых действий (инструкций) определенное количество раз. Каждое отдельное исполнение последовательности инструкций в цикле называется – итерация.
Цикл while является простейшим видом цикла в PHP. Цикл do while очень похож на цикл while, с тем отличием, что условное выражения проверяется в конце итерации, а не в начале. Цикл for является почти универсальным, поскольку он допускает самые разные варианты своего применения.
Таблица 1. Примеры применения операторов
|
Оператор switch |
Цикл while |
Цикл do while |
Цикл for |
|
switch ($action) { case 'JUMP': echo "Прыгать."; break; case 'SWEEM': echo "Плавать."; break;} |
$num = 1; while ($num <= 10) { echo "Итерация номер: $num<br>\n"; $num++;} |
$num = 1; do { echo "Итерация номер: $num<br>\n"; $num++; } while ($num <= 10); |
for ($k = 1; $k <= 10; $k++) { echo "$k "; } |
Задача. Создать страницу, на которой применяются условные и циклические операторы, с помощью которых обрабатываются различные данные.
Программа работы
1. Выбрать или создать макет веб-страницы и сохранить его в папке проекта с расширением .php.
2. На основе макета создать веб-страницу, которая использует файл с расширением css и содержит код php.
3. Разработать программный код на языке PHP в соответствии с темой работы.
4. Протестировать веб-страницу в браузере, при необходимости внести исправления и изменения.
5. Нарисовать эскиз страницы и записать тексты файлов с комментариями в отчете по работе.
Контрольные вопросы
1. Какие операторы относятся к условным?
2. Сколько операндов использует тернарный оператор?
3. В каком циклическом операторе условие проверяется до выполнения тела цикла?
4. В каком циклическом операторе условие проверяется после выполнения тела цикла?
5. В каком циклическом операторе заранее известно число итераций?
Работа с файлами и каталогами
Цели: усвоить знание методов работы с файлами и каталогами в PHP; освоить способы применения файлов и каталогов в PHP.
Краткие теоретические положения
Работа с файлами разделяется на 3 этапа: открытие файла; манипуляции с данными; закрытие файла.
Для того чтобы открыть файл в среде PHP используется функция fopen(). Обязательными параметрами этой функции является имя файла и режим файла.
Пример: $fp = fopen('counter.txt', 'r');.
Согласно документации PHP выделяют следующие виды режимов файлов:
|
Записывать данные в файл можно при помощи функции fwrite(). Это функция принимает 2 обязательных параметра (дескриптор файла и режим файла) и 1 необязательный.
Для построчного считывания файла используют функцию fgets(). Функция принимает 2 обязательных параметра.
Для того, чтобы считать файл как единое целое, нужно использовать функцию readfile(), принимающая 1 обязательный параметр.
При вызове функции file() каждая строка файла сохранятся в отдельном элементе указанного массива.
Когда файл необходимо считать по символам, применяют функцию fgetc().
Закрытие файла происходить с помощью функции fclose(), которая принимает 1 обязательный параметр.
Задача. Создать страницу, на которой создаются, читаются, обрабатываются, записываются файлы.
Программа работы
1. Выбрать или создать макет веб-страницы и сохранить его в папке проекта с расширением .php.
2. На основе макета создать веб-страницу, которая использует файл с расширением css и содержит код php.
3. Разработать программный код на языке PHP в соответствии с темой работы.
4. Протестировать веб-страницу в браузере, при необходимости внести исправления и изменения.
5. Нарисовать эскиз страницы и записать тексты файлов с комментариями в отчете по работе.
Контрольные вопросы
1. Какая функция используется для открытия файла в среде PHP?
2. При помощи какой функции можно записывать данные в файл?
3. Для чего применяется функция readfile()?
4. Для чего применяется функция file()?
5. Какая функция используется для закрытия файла в среде PHP?
Создание и использование баз данных
Цели: усвоить знание методов создания и использования баз данных; освоить способы создания и использования баз данных.
Краткие теоретические положения
База данных – это некоторый набор данных, организованный по определенным правилам и имеющий определенную структуру. По форме может быть совокупностью связанных между собой таблиц. Например, в одной таблице может храниться информация о пользователе, зарегистрированном на сайте, а в другой – информация о комментариях, которые оставил пользователь на сайте.
MySQL – система управления базами данных (СУБД). MySQL может хранить огромное количество записей в своих таблицах. Этим обеспечивается возможность создания крупных проектов. Немаловажным показателем является также простая и эффективная система безопасности. MySQL распространяется совершенно бесплатно, используя лицензию GNU.
Программное обеспечение phpMyAdmin – бесплатное ПО, написанное на PHP, предназначенное для работы с базами данных MySQL. Приложение phpMyAdmin поддерживает большое количество операций с MySQL. Те операции, которые используются наиболее часто, реализованы в пользовательском интерфейсе.
Рис. 1. Внешний вид приложения phpMyAdmin
Задача. Создать базу данных в системе управления базами данных MySQL, используя программное обеспечение phpMyAdmin; с целью тестирования базы данных выполнить несколько доступных манипуляций с данными.
Программа работы
1. Разработать структуру базы данных.
2. Создать базу данных в соответствии со структурой.
3. Наполнить базу конкретными данными.
4. Создать резервную копию базы данных.
5. Провести восстановление базы данных из резервной копии.
6. Провести оптимизацию базы данных.
7. В отчет по работе внести описание выполненных действий с комментариями.
Контрольные вопросы
1. Что представляет собой база данных?
2. Каковы особенности системы управления базами данных MySQL?
3. Для чего предназначено приложение phpMyAdmin?
4. Для чего создается резервная копия базы данных?
5. Что происходит при оптимизации базы данных?
Рабочие листы
к вашим урокам
Скачать
6 668 183 материала в базе
Настоящий материал опубликован пользователем Павлов Виктор Григорьевич. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Ваша скидка на курсы
40%
Курс профессиональной переподготовки
300/600 ч.
Курс повышения квалификации
72/180 ч.
Курс профессиональной переподготовки
600 ч.
Мини-курс
4 ч.
Мини-курс
10 ч.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.