Udělejte si svůj weblog v PHP

22. listopadu 2002

•

Dnes začíná série článků, ve které se postupně dozvíte, jak vytvořit svůj vlastní weblog – jednoduchý „redakční systém“, sloužící k pohodlnému publikování nejrůznějších informací, od odkazů přes komentáře a eseje až po články nejrůznějšího zaměření. Dnes si kromě nutného úvodu popíšeme ještě CSS layout a způsob obsluhy databázových chyb.

Ještě než začneme popisovat jednotlivé části weblogu, podívejte se na výslednou aplikaci, abyste si učinili lepší představu o konečném cíli našeho společného snažení.

Co je weblog?

Weblog, mnohdy označovaný pouze jako blog, je jednoduchá webová stránka obsahující chronologicky seřazené záznamy. Charakter těchto záznamů bývá velmi rozmanitý, nejčastěji však jde o komentované odkazy na zajímavé stránky, o glosy, poznámky, eseje a podobné články. Mnohem lepší představu o weblogu získáte, pokud si prohlédnete například weblog Sovy v síti, Weblog o lidech, společnosti a internetu, Mediář Miloše Čermáka či zahraniční Metafilter.

Pojmem weblog se však neoznačuje pouze výsledná stránka, ale i systém sloužící pro správu takové stránky. Nejznámějším systémem je Blogger.com, který využívají i výše zmíněné weblogy. Tento systém umožňuje všem jednoduché a pohodlné publikování na internetu, a to bez nejmenších znalostí HTML či skriptovacích jazyků.

Další informace týkající se weblogů a systémů pro jejich správu najdete také na Sově v síti v článku Jak si založit weblog, na stránkách docenta Katolického v části Moje cesta k weblogu, v článku Miloše Čermáka Blogeři všech zemí, spojte se! či na stránkách Rebeccablood.net v článku Weblogs: A history and perspective.

Popis a struktura weblogu

Základní funkcí je zobrazování článků, a to buď na dynamicky generované stránce nebo na pravidelně generované statické stránce. Všechny stránky jsou generovány podle jednotné šablony. Každý článek je doplněn o trvalý odkaz směřující do příslušné archivní stránky obsahující články vydané v daném týdnu.

Aplikace umožňuje registraci autorů, kteří jsou rozděleni na administrátory, mající práva ke všem článkům, a obyčejné autory, kteří mohou manipulovat jen s vlastními články. Přihlašování autorů je vyřešeno pomocí sessions a po přihlášení do administrační části může autor kromě vložení nového článku také mazat a upravovat články, ke kterým má práva.

Aplikace se skládá z několika souborů, o kterých se budu postupně zmiňovat v dalších dílech: db.php (zajišťuje připojení k databázi), error.php (vypisuje chybové hlášky), function.php (obsahuje funkce pro výpis článků a odkazů na archivní stránky), index.php (zobrazuje aktuální články), page.php (šablona pro vytváření stránek) a style.css. Kromě těchto souborů je v základním adresáři umístěn také soubor index.html, obsahující aktuální články a dále všechny archivní stránky. V adresáři admin najdete tyto soubory: archive.php (obsahuje funkce pro vytváření archivních stránek), form.php (formulář pro přidání nového článku), checklogin.php (kontroluje, zda je autor přihlášen), login.php (zajišťuje přihlášení autorů), makearchive.php (vytváří archivní stránky), reg.php (zajišťuje registraci autorů), update.php (umožňuje úpravu článků) a style.css.

Weblog využívá pouze dvě databázové tabulky: article, obsahující informace o článcích, a author, která obsahuje informace o jednotlivých autorech. Další podrobnosti o obou tabulkách budou uvedeny v příštím dílu.

CSS layout

V celé aplikaci nenajdete jedinou HTML tabulku. K rozložení všech prvků je použito výhradně CSS. Šablona, která se použije jak při vytváření úvodní stránky weblogu, tak při generování archivních stránek, se nachází v souboru page.php v proměnné $page. Celá stránka je umístěna v bloku main, který obsahuje 5 důležitých částí: hlavičku (header), levé menu s odkazy do jednotlivých částí weblogu (leftmenu), vlastní obsah (content), pravé menu s odkazy do archivu (rightmenu) a patičku (footer). Značky $nazev$ (např. $WEBLOG_TITLE$ ) budou při generování výsledné stránky nahrazeny příslušnými daty. Přesný význam všech značek bude vysvětlen v příštím dílu.

// stranka, ktera se pouzije pri generovani uvodni strany Weblogu i vsech archivnich stranek
// znacka $nazev$ oznacuje cast, ktera bude pri generovani modifikovana
$page = ‚
<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.0 Transitional//EN“>
<html>
<head>
<title>$WEBLOG_TITLE$</title>
<style media=“all“ type=“text/css“>@import „style.css“;</style>
<meta http-equiv=“Content-Type“ content=“text/html; charset=windows-1250″>
<meta http-equiv=“Cache-control“ content=“no-cache“>
<meta http-equiv=“Pragma“ content=“no-cache“>
<meta http-equiv=“Expires“ content=“-1″>
</head>
<body>
<div id=“main“>
  <div id=“header“><h1>Weblog</h1></div>

  <div id=“leftmenu“><h2>Menu</h2>
    <ul>
      <li><a href=“index.html“>Úvod</a></li>
      <li><a href=“admin/login.php“>Login</a></li>
      <li><a href=“admin/reg.php“>Registrace</a></li>
    </ul>
  </div>

  <div id=“content“>
    $WEBLOG_ARTICLES$
  </div>

  <div id=“rightmenu“><h2>Archiv</h2>
    <ul>
      $WEBLOG_ARCHIVE$
    </ul>
    <br>
    <p class=“validation“><a href=“http://validator.w3.org/check/referer“><img border=“0″ src=“http://www.w3.org/Icons/valid-html40″ alt=“Valid HTML 4.0!“ height=“31″ width=“88″></a></p>
    <p class=“validation“><a href=“http://jigsaw.w3.org/css-validator/“><img style=“border:0;width:88px;height:31px“ src=“http://jigsaw.w3.org/css-validator/images/vcss“ alt=“Valid CSS!“></a></p>
  </div>

  <div id=“footer“><p>generated by Weblog 1.0</p></div>
</div>
</body>
</html>‘;

Nejdůležitější části souboru style.css jsou uvedeny níže. Důležité jsou především vlastnosti float a clear způsobující správné zarovnání daných prvků.

BODY {
  font: 13px/1.5 „Verdana CE“, „Helvetica CE“, „Arial CE“, Verdana, Helvetica, Arial, sans-serif;
  color: #000000;
  background: #fafafa;
}
#main {
  margin: 5px;
  width: 740px;
}
#header {
  width: 740px;
  margin: 0px 0px 10px 0px;
  border: 2px solid Black;
  background: #005e8a;
  color: #000000;
  height: 50px;
}
#leftmenu {
  padding: 5px;
  border: 1px solid Black;
  width: 150px;
  float: left;
  background: #e7ebf8;
  color: #000000;
}
#content {
  width: 400px;
  margin-left: 5px;
  float: left;
  background: #fefded;
  color: #000000;
  border-left : 1px solid #003366;
  border-right : 1px solid #003366;
  border-top : 1px solid #003366;
}
.article {
  padding: 0px 5px;
  border-bottom : 1px solid #003366;
}
.article P {
  margin: 0px;
}
P.author {
  margin: 5px 0px;
  font-size: 110%;
  font-weight: bold;
}
#rightmenu {
  margin-left: 5px;
  padding: 5px;
  border: 1px solid Black;
  width: 180px;
  float: left;
  background: #e7ebf8;
  color: #000000;
}
#footer {
  clear: both;
  width: 740px;
  margin: 10px 0px 0px 0px;
  border: 2px solid Black;
  background: #005e8a;
  color: #000000;
  height: 30px;
}

Připojení k databázi a obsluha databázových chyb

Připojení k databázi zajišťuje soubor db.php. Kromě toho je zde definovaná ještě funkce Weblog_Error($error_num), která obsluhuje chybové stavy. V parametru je předáno číslo příslušné chyby, funkce po svém zavolání způsobí přesměrování na stránku error.php, kde je vypsána příslušná chybová hláška.

// udaje o databazi
$server_name = „localhost“;  // jmeno databazoveho serveru
$db_user = „“; // uzivatel
$db_pass = „“; // heslo
$db_name = „weblog“; // jmeno databaze
// obsluhuje chybove stavy, v parametru je predano cislo chyby
function Weblog_Error($error_num) {
  Header(‚Location: http://‘. $_SERVER[‚HTTP_HOST‘] . ‚/weblog/error.php?error=‘ . $error_num);
  exit;
}
@MySQL_Connect($server_name, $db_user, $db_pass) or Weblog_Error(0); // pripojeni k databazi
@MySQL_Select_DB($db_name) or Weblog_Error(1); // vyber databaze

V souboru error.php jsou v poli $msg_error definovány chybové hlášky. Na základě proměnné error předané odkazem je vypsána příslušná chybová hláška.

<?php
// chybove hlasky
$msg_error = Array(‚Nepodařilo se připojit k DB serveru.‘, ‚Nepodařila se otevřít databáze.‘, ‚Nastala chyba při zpracování SQL dotazu.‘, ‚Nastala chyba při generování statické stránky.‘);
?>
<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.0 Transitional//EN“>
<html>
<head>
<title>Chyba</title>
<style media=“all“ type=“text/css“>@import „style.css“;</style>
<meta http-equiv=“Content-Type“ content=“text/html; charset=windows-1250″>
<meta http-equiv=“Cache-control“ content=“no-cache“>
<meta http-equiv=“Pragma“ content=“no-cache“>
<meta http-equiv=“Expires“ content=“0″>
</head>
<body>
<?php
// vypise chybu
echo ‚<p>‘ . $msg_error[$_GET[‚error‘]] . ‚</p>‘;
?>
</body>
</html>