Практическая работа № 11

Практическая работа № 20

Тема: Работа с базами данных MySQL. Создание новостного сайта

Цель работы: получить практические навыки по отображению данных из таблиц БД для организации простого новостного сайта

Ход работы

Пусть имеется БД "news" для хранения данных о новостях. В БД имеется две таблицы:

- razdel - для хранения названий разделов новостей (id_razdel, nazv_razdel);

- articles - для хранения статей новостей (id_article, id_razdel, data, author, title, intro, fulltext).

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

Указания: вначале создадим PHP файл для подключения к БД. Для этого в новом файле введите текст:

<? //подключаемся к серверу

mysql_connect ('localhost','root','111') or die (mysql_error());

//выбираем базу данных

mysql_selectdb('news');

//устанавливаем кодировку символов

mysql_query('SET character_set_database = utf8');

mysql_query('SET NAMES utf8'); ?>

В папке localhost/www создайте папку news и сохраните созданный файл в эту папку под именем connect.php

Создание главной страницы

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

Создайте новый HTML файл, в который введите код формирования содержимого:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<head>

<title>Новостной сайт</title>

</head>

<body>

<div id="title">Пример новостного сайта на PHP + MySQL</div>

//подключаемся к БД

include ('connect.php');

//отбираем новости из таблицы

$rez = mysql_query('select * from articles where id_razdel='.($_GET['idr']?$_GET['idr']:1));

//в цикле построчно считываем записи из отобранного набора

while ($row=mysql_fetch_assoc($rez))

{

//печатаем очередную строку таблицы с данными

//поля помещаем в отдельный блок div с классом

//для форматирования содержимого с помощью css

echo '<div class="article">';

echo '<div class="nazv">'.$row['title'].'</div>';

echo '<div class="author">'.$row['author'].' '.$row['data'].'</div>';

echo '<div class="text">'.$row['intro'].'</div>';

//формируем ссылку для чтения полного текста новости

//ссылка передает методом $_GET номер новости (id_article)

echo '<div class="href"><a href="read.php?id='.$row['id_article'].'">Полный текст</a></div>';

echo '</div>';

}

</div>

<div id="footer">Практическая работа № 11 (новостной сайт)</div>

</div>

</body>

</html>

Сохраните файл под именем index.php.

Создание блока с названием разделов

Как видно из текста страницы в блоке div#left подключается PHP файл для отображения списка разделов документа. Создайте новый документ и введите в него текст:

<? //подключаемся к БД

include ('connect.php');

$rez = mysql_query('select * from razdel');

//в цикле построчно считываем записи из отобранного набора

while ($row=mysql_fetch_assoc($rez))

//печатаем очередную строку таблицы с данными

//при этом каждый раздел - этотгиперссылка,

//которая через метод GET передает номер раздела (id_razdel)

echo '<a href = "index.php?idr='.$row['id_razdel'].'">'.$row['nazv_razdel'].'</a></br>'; ?>

Сохраните файл под именем menu.php

Задание оформления страницы

Для оформления внешнего вида сайта добавьте в раздел head созданной страницы команду подключения таблицы стилей:

В папке с сайтом создайте папку css, а в ней создайте файл style.css с текстом форматирования страницы:

/*отступы для всех блоков*/

margin: 0;

padding: 0;

}

/*общие параметры для тела документа*/

body {

background-color: lightgray;

font-family: calibri;

font-size: 18px;

}

/*параметры общего блока страницы*/

#wrapper {

width:950px;

margin:0 auto;

}

/*параметры блока заголовка*/

#title {

text-align: center;

font-size: 35px;

color: brown;

height:65px;

background-color: darkorange;

padding-top:25px;

margin-bottom: 10px;

}

/*параметры блока с перечнем разделов*/

#menu {

width: 200px;

background-color: violet;

float: left;

text-align: center;

line-height: 35px;

margin-bottom: 10px;

margin-right: 10px;

}

/*параметры блока для отображения текста новостей*/

#content {

width: 740px;

margin-left: 210px;

margin-bottom: 10px;

}

/*стиль отображения всей новости*/

.article {

border: 1px solid violet;

margin-top:10px;

background-color: #B5E7C2;

padding: 10px;

border-radius: 10px;

}

/*стиль отображения названия новости*/

.nazv {

font-size: 24px;

font-weight: bold;

color: blue;

padding-left: 40px;

}

/*стиль отображения автора и даты новости*/

.author {

font-size: 12px;

font-style: italic;

padding-left: 20px;

}

/*стиль отображения текста новости*/

.text{

font-size: 16px;

text-indent: 40px;

}

/*стиль отображения гиперссылки новости*/

.href {

font-size: 14px;

text-align: right;

color: green;

}

/*стиль блока подвала страницы*/

#footer {

clear: both;

background-color: violet;

text-align: center;

height: 22px;

font-size: 14px;

background-color: darkgray;

color: white;

padding-top: 8px;

}

Создание страницы для просмотра полной новости

Данная страница имеют ту же структуру, что и главная страница, только в разделе div#content отображается текст статьи, номер которой был передан странице с помощью параметра $_GET['id']

Сохраните страницу index.php под именем read.php. Откройте созданный файл и в блоке div#content удалите весь текст и добавьте команды:

<? //подключаемся к БД

include ('connect.php');

//отбираем статью по ее номеру

$rez = mysql_query('select * from articles where id_article='.$_GET['id']);

//считываем найденную запись в переменную $rez

$row=mysql_fetch_assoc($rez);

//печатаем статью и другие параметры (название, дату и автора),

//помещая их в блоки div для форматирования

echo '<div class="article">';

echo '<div class="nazv">'.$row['title'].'</div>';

echo '<div class="author">'.$row['author'].' '.$row['data'].'</div>';

echo '<div class="text">'.$row['fulltext'].'</div>';

echo '</div>';

Сохраните изменения на странице.

Создание колонок одинаковой высоты

Если просмотреть сайт, то видно, что высота колонок с меню и новостями разная. Для задания одинаковой высоты колонок воспользуемся возможностями JQuery. На сайте создайте папку script и поместите в нее файл JQuery.js (см. содержимое архива).

Откройте файл index.php. В раздел head добавьте текст вида:

$(function()

{

//если высота меню больше высоты контента

if ($('#menu').height()>$('#content').height())

//контенту присваиваем высоту меню

$('#content').css('height',$('#menu').height())

//иначе, делаем наоборот

else

$('#menu').css('height',$('#content').height());

})

</script>

Внесите аналогичные изменения в файл read.php.