Версия для печати. Взято с сайта phpsql.ru

На главную   Назад   Вперед

Пишем сайт на PHP

Написать сайт на PHP - это нетрудно.

В этом примере мы с Вами напишем свой первый полностью рабочий сайт на PHP на примере шаблона.
Т.е. дизайном пока заниматься не будем (дизайн это сложно), а возьмем готовый чужой сайт и переделаем его под свою базу и свои данные.

Далее можно уже править стили, менять картинки в шапке страницы и т.д.
Наша задача сейчас - не заострять внимание на дизайне, а заняться программированием.

В предыдущих статьях мы рассмотрели тонкости PHP, знать которые нам необходимо перед тем, как браться за разработку своего сайта. Если что-то в коде Вам не понятно, вернитесь туда и изучите.

Итак, начнем.

1.2.3. Сначала пишем файл подключения к базе данных connect.php и создаем структуру базы данных, выполнив скрипт install.php
Смотрим п.1-3 в нашем примере админки вот ТУТ.
После выполнения п.3 база данных у нас создана. Продолжаем.

4. Ишем готовый шаблон. Поскольку мы договорились не увлекаться дизайном, а переделывать готовый сайт, то находим сайт, который нам нравится и начинаем его менять.
Желательно, чтобы исходный код сайта не был излишне громоздким и Вы могли в нем разобраться. Ищите для начала пример попроще. Исходный код смотрим как Просмотреть исходный код в браузере.

Разумеется, у Вас должны быть начальные знания и представления о HTML и CSS.
Почитайте справочник, это несложно.

Для примера, чтобы было от чего отталкиваться, разберем этот сайт.
Положим, заместо списка статей Вы хотите вывести заголовки своих статей, а по щелчку мышью по ним открыть сами статьи.

5. Сохраняем шаблон вместе со всеми данными.
Например, для этого сайта, открываем главную страницу phpsql.ru
И в мозилле firefox выбираем
Файл-Сохранить как... Веб-Страница полностью
называем страницу как index
В других браузерах делается примерно так же.

6. Проверяем, как сохранилась страница.
Для этого открываем ее из браузера Файл-Открыть
из того места на диске, где мы ее сохранили.
Вместе с файлом index.html там хранится папка index_files
со всеми стилями, картинками и прочими нужными для этой страницы данными.

7. Редактируем текст сохраненного index.html в блокноте, notepad++ или любом другом текстовом редакторе, который Вам нравится, желательно с подсветкой синтаксиса html.

Отладка кода выглядит так: корректируем код в редакторе, сохраняем и переходим в браузер, обновляем изображение (F5). Смотрим, что получилось.

8. Заменяем текст в тегах title, meta keywords, meta description на свой.
Пишем туда свои описания для сайта.
Например после title идет PHP, SQL. Меняем на Мой сайт.

9. Выкидаем ВСЕ ссылки на чужой сайт, находящиеся после href, заменяем их на пустые "", например, было a href="/" меняем на href=""
На чужой сайт нам ссылаться не нужно, пусть пока ссылаются на главную страницу, позже вставим ссылки на свой сайт.

10. Выкидываем лишние повторения данных.
Список статей мы будем брать из базы данных и выводить в цикле.
Длиннющие списки чужого сайта нам не нужны, нужен лишь один образец для вставки в цикл. Для phpsql.ru список статей это "О сайте", "О чем этот блог" и т.д.
Находим, где в коде "О сайте". Все строки ниже схожи. Оставляем строку "О сайте", остальные все до тега td удаляем. Сохраняем, обновляем страницу.
У нас должна отобразиться только одна статья "О сайте".

PS После изменений не забываем сохранить текст, не закрывая редактор, переключиться на браузер и там Обновить страницу (F5) и убедиться, что не стерли лишнего.
Если ошиблись, то отменяйте изменения в текстовом редакторе назад.
Желательно проверять корректность отображения не в одном браузере, а во всех основных: IE, firefox, opera, chrome.
Этот совет относится, в основном, к верстке, где в разных браузерах все идет вкривь и вкось.

Получаем из .html .php код. Для этого:

11. Запускаем наш сайт из под Денвера.
Про установку денвера смотрим в предыдущих статьях.
Обычно денвер подключает дополнительный диск. В нем папка home, где лежат наши сайты. Внутри home создаем папку с именем нашего сайта, например mysite, а в ней папку www, туда помещаем index.html и папку index_files.
Не забываем ПЕРЕЗАПУСТИТЬ денвер значком на рабочем столе.
В браузере набираем имя сайта, например mysite, наша страница должна отобразиться на экране.

12. Переименовываем index.html в index.php
Используем либо far, TC, либо средства виндоуз,
для чего показ расширений файлов в системе должен быть включен:
"Сервис-Свойства папки-Вид-Скрывать расширения..." убрать галочку.
Щелкаем Обновить страницу в браузере, должен отображаться так же.

13. Переименовываем index.php в page.php
и создаем пустой файл index.php, куда записываем код

<?php
include "page.php";
?>

Обновляем браузер, проверяем, все так же должно быть.
Смысл действия: мы разделяем php код index.php и шаблон page.php.
Зачем? Поймете позже, пока сделайте.

14. Встраиваем функцию в шаблон page.php
Из файла page.php переносим строчку где "О сайте" в index.php
для чего заместо нее пишем:

<?php
  main();
?>

а в index.php добавляем после include "page.php":

function main(){
  echo "<a href=\"\">О сайте</a>";
}

Меняем слова "О сайте" на что-нибудь типа "Мой пример".
Сохраняем, запускаем. Ничего, кроме названия, не должно поменяться.

15. Теперь наша задача подставить туда данные из базы.
Для этого модифицируем код index.php (далее меняем только его):

<?php
include "connect.php";
include "page.php";

function main(){
  echo "<a href=\"\">О сайте</a>";
}
?>

Здесь в первой строке мы подключили код соединения с базой данных.
Запрос query это найти все записи. В цикле выводятся найденные записи.

Т.к. базу данных еще не заполнили записей нет.
Позже доделаем админку и занесем туда записи.

16. Пока добавим пару тестовых записей, выполнив однократно следующий код.
Добавьте в index.php эту строчку и обновите страницу один раз, потом этот код уберите.

<?php
  $query1="INSERT INTO blog (tema,text) VALUES (`Тема 1`,`Это содержимое первой статьи`)";
  $query2="INSERT INTO blog (tema,text) VALUES (`Тема 2`,`Это содержимое второй статьи`)";
  mysql_query($query1);
  mysql_query($query2);
?>

PS Внимание! Вместо ` ставится одинарная кавычка \'

17. Выводим список статей из базы.

<?php
include "connect.php";
include "page.php";

function main(){
  $query = "SELECT * FROM blog";
  $result = mysql_query($query);
  while($r = mysql_fetch_array($result)){
    echo "<a href=\"/?id=",$r["id"],"\">",$r["tema"],"</a><br>";
  }
}
?>

Пояснения:
Строка $query содержит запрос: вывести все поля всех записей из базы blog.
В цикле в массив $r[] мы получаем последовательно поля записей, такие как:
$r[id], $r[tema], $r[text] и оператором echo создаем ссылки на статьи вида /?id=номер записи $r[id]

18. Выводим содержимое страницы
Пусть пользователь щелкнул на ссылку нашей статьи и перешел по адресу /?id=1 (переменная $_GET["id"]=1)
мы должны ее отобразить.
Для этого ищем статью по номеру id и выводим ее. Итоговый файл

<?php
include "connect.php";
include "page.php";

function main(){
  if(isset($_GET["id"])){
    $query = "SELECT * FROM blog WHERE id=" .$_GET["id"];
    $result = mysql_query($query);
    if(($r = mysql_fetch_array($result))){
      echo $r["text"];
      return;
    }
  }
  $query = "SELECT * FROM blog";
  $result = mysql_query($query);
  while($r = mysql_fetch_array($result)){
    echo "<a href=\"/?id=",$r["id"],"\">",$r["tema"],"</a><br>";
  }
}
?>

Функция isset() проверяет установлена ли переменная $_GET[id]
и если да (мы на странице с адресом вида /?id=), то мы ищем
запись с данным id-ом и выводим ее. Иначе выводим список статей.

Итак, щелкаем по названиям статей, проверяем, выводится ли их текст.
Все! Простейший сайт мы сделали. Он содержит недоделки, но вполне рабочий.
В следующей статье будем его улучшать.

 
Предыдущая   На главную   Следующая