Практическая работа №2. Сборка страниц из блоков
ДОНЕЦКАЯ НАРОДНАЯ РЕСПУБЛИКА
МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ
Донецкий государственный университет управления
Факультет Права и социального управления
кафедра Информационных технологий
| УТВЕРЖДАЮ | |
| Проректор по учебной работе | |
| ___.____.20___ |
| Методические указания к выполнению практических работ по дисциплине «Проектный практикум» Для студентов 3-го курса специальности «Прикладная информатика» |
| Автор(ы), разработчик(и): |
Ст.преподаватель Литвак Е.Г. | ||||
|
| |||||
|
Рассмотрено на заседании ПМК кафедры | «Прикладная информатика» | ||||
|
|
| ||||
| Протокол заседания ПМК от | № | ||||
|
| дата |
| |||
Председатель ПМК _____________ _________________________
(подпись) (инициалы, фамилия)
| Рассмотрено на заседании кафедры |
Информационных технологий | |||
|
| ||||
| Протокол заседания кафедры от | № | |||
|
| дата |
| ||
Заведующий кафедрой ____________ _________________________
(подпись) (инициалы, фамилия)
|
|
|
Оглавление
Практическая работа №1. Верстка страниц сайта. 4
Практическая работа №2. Сборка страниц из блоков. 10
Практическая работа №3. Работа с базой данных сайта. Создание библиотеки функций. 22
Практическая работа №4. Формирование списка статей на странице «Статьи» из базы данных. 26
Практическая работа №5. Передача параметров методом GET. 28
Практическая работа №6. Регистрация пользователей. 31
Практическая работа №7. Авторизация пользователей. 33
Практическая работа №8. Самостоятельное создание гостевой книги и баннеров. 36
Практическая работа №9. Загрузка пользователем файлов в базу. 37
Практическая работа №10 (самостоятельная). Скачивание файлов. 39
Список литературы.. 40
Практическая работа №1. Верстка страниц сайта
Необходимо сверстать страницы сайта в соответствии с шаблоном (рис.1)
Рис.1 – Шаблон сайта
При этом в части 2 расположены гиперссылки. При нажатии на эти гиперссылки изменяется содержание части 4 – «Основного контента». Части 1,2,3,5,6 при переходе по гиперссылкам остаются неизменными.
Установим в Notepad++ кодировку UTF-8 без ВОМ (рис.2), а в меню «СИнтаксис» выберем HTML.
Рис.2- Выбор кодировки
Создадим в корневом каталоге сайта файл mysite.php, содрежание которого показано на рис.3. Это будет главная страница сайта.
|
|
|
Рис.3 – Создание главной страницы сайта
В корневом каталоге сайта создадим папку styles, а в ней файл main.css с содержанием показанным на рис.4
Рис.4 - Содержание таблицы стилей
Сверстаем главную страницу в соответствии с шаблоном, как показано на рис.5, рис.6, рис.7
Рис.5 - HTML-код (часть1)
Рис.6 - HTML-код (часть2)
Рис.7 - HTML-код (часть3)
Создадим в корне сайта файлы top_articles.php, top_reg.php, top_guestbook.php и скопируем в них содержание mysite.php. На эти страницы будет осуществляться переход по гиперссылкам. В корне сайта создадим папку pic и сохраним в ней рисунок с названием banner1.png.
Результат этой табличной верстки показан на рис. 8
Рис.8 – Табличная верстка
Черные линии границ таблицы нужны для проверки правильности верстки. После того как результат верстки проверен можно изменить таблицу стилей, как показано на рис.9
Рис.9 – Таблица стилей
Окончательный результат верстки показан на рис.10
Рис.10 – Окончательный результат верстки
Практическая работа №2. Сборка страниц из блоков
Далее будем делить страницы сайта на блоки и «собирать» эти блоки при помощи php. С этой целью внесем корректировку в файл mysite.php. Создадим в корне сайта папку blocks. Часть кода, изображенную на рис.11 вырежем из файла mysite.php и перенесем в отдельный файл top.php. Файл top.php сохраним в папке blocks.
|
|
|
Рис.11 – Выделение блока в отдельный файл.
Вернемся в файл mysite.php и заменим удаленный фрагмент кодом
<?php
require_once “blocks/top.php”;
?>
Рис.12 – Подключение блока из другого файла
Проверим в браузере, что страница по-прежнему формируется верно. Если ошибок нет, то повторим операцию выноса блока в отдельный файл и его подключения еще для 4-х фрагментов (рис.13)
Рис.13 – Полный переход к блокам в файле mysite.php
Рис.14 – Блок формы аутентификации
Рис.15 – Блок главной статьи
Рис.16 – Блок «подвал сайта»
Блок с баннерами сделать самостоятельно.
В файле articles.php делаем тоже самое, что и в mysite.php, кроме блока со списком статей (рис.17-18)
Рис.17 –Вставка блока со списком статей
Рис.18 – Блок со списком статей
Гиперссылка в файле article_list.php указывает на файл article.php (рис.19)
Рис.19 – Страница с одной статьей из списка
Блок one_article.php показан на рис.20
Рис.20 - Блок one_article.php
Аналогично корректируем файл top_reg.php. Он будет отличаться формой регистрации (рис.21)
Рис.21 – Файл top_reg.php
Рис.22 – Блок регистрации reg.php
|
|
|
Аналогичным образом корректируем файл гостевой книги top_guestbook.php (рис.23)
Рис.23 – Файл гостевой книги top_guestbook.php
Рис.24 - Блок гостевой книги guestbook.php
Рис.25 – Блок с комментариями гостевой книги
Добавляем в main.сss еще несколько стилей.
Рис.26 – Новые стили
В результате должны получиться такие страницы сайта, как на рис.27-31
Рис.27 –Главная страница
Рис.28 - Статьи
Рис.29- Одна статья
Рис.30 - Регистрация
Рис.31 – Гостевая книга
Дата добавления: 2018-04-05; просмотров: 368; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!