968
.pdfМинистерство образования и науки Российской Федерации Федеральное государственное бюджетное образовательное учреждение высшего образования
«Нижегородский государственный архитектурно-строительный университет»
А. И. Домрачев
WEB-ДИЗАЙН
Учебно-методическое пособие
по выполнению лабораторных работ
для обучающихся по дисциплине «WEB-ДИЗАЙН»
по направлению подготовки 21.03.03 Геодезия и дистанционное зондирование, профиль Инфраструктура пространственных данных
Нижний Новгород
2016
УДК 004 (075.8)
Домрачев А. И./ WEB-ДИЗАЙН [Электронный ресурс]: учеб. – метод. пос./ А. И. Домрачев; Нижегор. гос. архитектур. – строит. ун-т – Н. Новгород: ННГАСУ, 2016. - ___ с. 1 электрон. опт. диск (CD-R)
Предназначено для обучающихся в ННГАСУ подисциплине «WEBДИЗАЙН» по направлению подготовки 21.03.03 Геодезия и дистанционное зондирование, профиль Инфраструктура пространственных данных.
© А. И. Домрачев © ННГАСУ. 2016.
Лабораторная работа № 1. Основы HTML
HTML — теговый язык разметки документов. Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками —
тегами. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных (например, тег перевода строки <br>). В этом случае обычно не указывается закрывающий тег. Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства (например, размер шрифта для тега <font>). Атрибуты указываются в открывающем теге. Вот примеры фрагментов HTMLдокумента:
∙<strong>Текст между двумя тегами — открывающим и закрывающим.</strong>
∙<a href="http://www.example.com">Здесь элемент содержит атрибут href,
то есть гиперссылку.</a>
∙А вот пример пустого элемента: <br>
Регистр, в котором набрано имя элемента и имена атрибутов, в HTML значения не имеет (в отличие от XHTML). Элементы могут быть вложенными. Например, следующий код:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML Document</title>
</head>
<body>
<p>
<b>
Этот текст будет полужирным, <i>а этот — ещё и курсивным</i>.
</b>
</p>
</body>
</html>
даст такой результат:
Этот текст будет полужирным, а этот — ещё и курсивным.
Кроме элементов, в HTML-документах есть и сущности (англ. entities) — «специальные символы». Сущности начинаются с символа амперсанда и имеют вид &имя; или NNNN;, где NNNN — код символа в Юникоде в десятичной системе счисления.
Например, © — знак авторского права (©). Как правило, сущности используются для представления символов, отсутствующих в кодировке документа, или же для представления «специальных» символов: & — амперсанда (&), < — символа «меньше» (<) и> — символа «больше» (>), которые некорректно записывать «обычным» образом, из-за их особого значения в HTML.
Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, должен начинаться со строки объявления версии HTML <!DOCTYPE…>, которая обычно выглядит примерно так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Если эта строка не указана, то добиться корректного отображения документа в браузере становится труднее.
Далее обозначается начало и конец документа тегами <html> и </html> соответственно. Внутри этих тегов должны находиться теги заголовка (<head></head>) и тела (<body></body>) документа.
Задание по работе
Создать web страницу, содержащую элементы html.
Лабораторная работа № 2. Основы javascript
Для добавления JavaScript-кода на страницу, можно использовать теги <script></script>[Спецификация 6], которые рекомендуется, но не обязательно, помещать внутри контейнера <head>. Контейнеров <script> в одном документе может быть сколько угодно. Атрибут «type='text/javascript'» указывать необязательно, данное значение используется по умолчанию[54].
Скрипт, выводящий модальное окно с классической надписью «Hello, World!» внутри браузера:
<script type="application/javascript">
alert('Hello, World!');
</script>
Расположение внутри тега
Спецификация HTML описывает набор атрибутов, используемых для задания обработчиков событий[Спецификация 7]. Пример использования:
<a href="delete.php" onclick="return confirm('Вы уверены?');">
Удалить
</a>
В приведённом примере при нажатии на ссылку функция confirm('Вы уверены?'); вызывает модальное окно с надписью «Вы уверены?», а return false; блокирует переход по ссылке. Разумеется, этот код будет работать только если в браузере есть и включена поддержка JavaScript, иначе переход по ссылке произойдёт без предупреждения.
Использование кода JavaScript в контексте разметки страницы расценивается в рамках ненавязчивого JavaScript как плохая практика. Аналогом (при условии снабжения ссылки идентификатором alertLink)
<a href="delete.php" id="alertLink">
Удалить
</a>
приведённого примера может являться, например, следующий фрагмент JavaScript:
window.onload = function() {
var linkWithAlert = document.getElementById("alertLink");
linkWithAlert.onclick = function() {
return confirm('Выуверены?');
};
};
Вынесение в отдельный файл
Есть и третья возможность подключения JavaScript — написать скрипт в отдельном файле, а потом подключить его с помощью конструкции
<head>
<script type="application/javascript" src="http://Путь_к_файлу_со_скриптом">
</script>
</head>
Задание по работе
Добавить в созданную web страницу элементы javascript
Лабораторная работа № 3. Основы баз данных.
Пример работы с базой данных mysql. Создадим таблицу с первичным ключом id
mysql> CREATE TABLE users ( id INT AUTO_INCREMENT, name CHAR(30), age INT,PRIMARY KEY(id) ); mysql> insert into users (name, age) values ("Vasya", 20);
mysql> insert into users (name, age) values ("Petya", 22); mysql> select * from users;
+----+-------+------+
| id | name | age |
+---- |
+ |
-------+------ |
+ |
|
| |
1 |
| Vasya | |
20 | |
|
| |
2 |
| Petya | |
22 | |
|
+---- |
+------- |
+------ |
+ |
|
Как видим, поле id уникально и автоматически увеличивается
Создадимещёоднутаблицу
mysql> CREATE TABLE address ( id INT AUTO_INCREMENT, street CHAR(30), dom INT,PRIMARY KEY(id) ); mysql> insert into address (street, dom) values ("Gorkogo", 5);
mysql> insert into address (street, dom) values ("Pokrovka", 7); mysql> select * from address;
+ |
----+---------- |
+------ |
+ |
| id | street |
| dom | |
||
+---- |
+---------- |
+------ |
+ |
| 1 | Gorkogo | |
5 | |
||
| 2 | Pokrovka | |
7 | |
||
+---- |
+---------- |
+------ |
+ |
Создадим третью таблицу для связывания двух первых
mysql> CREATE TABLE users_address ( id_users INT,id_address INT );
mysql> insert into users_address (id_users, id_address) values (1,2); mysql> insert into users_address (id_users, id_address) values (2,1); mysql> select * from users_address;
+----------+------------+
| id_users | id_address |
+ |
----------+ |
------------+ |
| |
1 | |
2 | |
| |
2 | |
1 | |
+---------- |
+------------ |
+ |
Благодарятретьейтаблицеданныесвязаны. Сделаем выборку данных из всех таблиц.
mysql> select * from users, address, users_address where id_users = users.id and id_address = address.id;
+----+-------+------+----+----------+------+----------+------------+
| id | name | age | id | street | dom | id_users | id_address |
+---- |
+ |
-------+------ |
+ |
----+ |
----------+------ |
+---------- |
+------------ |
+ |
|
| |
1 |
| Vasya | |
20 | 2 | Pokrovka | |
7 | |
1 | |
2 | |
|||
| |
2 |
| Petya | |
22 | 1 | Gorkogo | |
5 | |
2 | |
1 | |
|||
+---- |
+------- |
+------ |
+---- |
+---------- |
+------ |
+---------- |
+------------ |
+ |
|
Сделаемвыборкутольконужныхнамполей
mysql> select name, age, street, dom from users, address, users_address where id_users = users.id and id_address = address.id;
+-------+------+----------+------+
| name | age | street | dom |
+ |
-------+------ |
+ |
----------+------ |
+ |
| Vasya | 20 | Pokrovka | |
7 | |
|||
| Petya | |
22 | Gorkogo | |
5 | |
||
+------- |
+------ |
+---------- |
+------ |
+ |
2 rows in set (0.00 sec)
Задание по работе
Создайте аналогично примеру собственные 3 таблицы со своими столбцами.
Лабораторная работа № 4. Основы PHP.
Взаимодействие PHP и MySQL
В этом разделе приводятся описания наиболее часто используемых функций, позволяющих работать с MySQL средствами PHP.
Замечание
SQL может применятся в прикладных программах двумя способами: в виде встроенного SQL и интерфейса программирования приложений (Application Program Interface, API). Первый способ напоминает использование PHP - инструкции SQL размещаются среди кода прикладной программы. В настоящий момент такой стиль не поддерживает ни MySQL ни PHP. Второй подход заключается в том, что программа взаимодействует с СУБД посредством совокупности функций. Именно такой подход используется при взаимодействии PHP и MySQL.
mysql_connect
resource mysql_connect ([string server [, string username [, string password]]])
Эта функция устанавливает соединение с сервером server MySQL и возвращает дескриптор соединения с базой данных, по которому все другие функции, принимающие этот дескриптор в качестве аргумента, будут однозначно определять выбранную базу данных. Вторым и третьим аргументами этой функции являются имя пользователя username и его пароль password соответственно:
<?php
$dblocation = "localhost"; // Имя сервера
$dbuser = "root"; |
// Имя пользователя |
$dbpasswd = ""; |
// Пароль |
$dbcnx = @mysql_connect($dblocation,$dbuser,$dbpasswd);
if (!$dbcnx) // Если дескриптор равен 0 соединение не установлено
{
echo("<P>В настоящий момент сервер базы данных не доступен, поэтому
корректное отображение страницы невозможно.</P>");
exit();
}
?>