Бид АУСистемийнхээ үндсэн класс, хэрэглэгч болон админ талын скриптүүд, баазаа үүсгээд байгаа. Одоо сайтын хэв буюу темплейт хэсгийг кодлох ажилдаа орох цаг болсон. Ингээд энэ хичээлээр хэрэглэгчийн талын хэсгийн хэвийг үүсгэх ажлыг хийх болно.
Оруулан ирэх файлууд.
Манай системийн хуудаснуудын толгой, хөл хэсгүүд бүх хэсэгт ижилхэн байхаар төлөвлөсөн. Энэ нь бичигдэх кодыг бага болгохын дээр сайтын темплейтийн стандарт хэсгийг хэрхэн боловсруулж ашиглахыг харуулах зорилготой. Сайтын үндсэн хавтаст templates нэртэй хавтас үүсгээд түүн дотроо include нэртэй хавтасыг үүсгэнэ.
include хавтаст сайтын бүх хуудаст ижилхэн байх толгой болон хөл хэсгийг хадгална. Ингэснээр эдгээрийг манай АУСистемийн бүх хэвэнд оруулан ирэх боломжтой болно. include хавтаст header.php нэртэй файл үүсгээд доорх кодыг оруулан өгнө.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo htmlspecialchars( $results['pageTitle'] )?></title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<a href="."><img id="logo" src="images/logo.jpg" alt="Сонин мэдээ" /></a>Энэ код HTML хуудасны эхлэлийг гаргана. meta тегид хуудасны кодчлол utf-8 байхыг заан өгөх хэрэгтэй. Ингэснээр кирил үсгүүдийг зөв харагдуулах болно. Үндсэн (index.php эсхүл admin.php) скриптээс дамжуулах $results['pageTitle'] хувьсагчаар title тегид хуудасны гарчгийг заан өгсөн. Бас style.css хэвийн хүснэгтийн файлыг оруулан ирэхийг заасан байгаа. Хэвийн хүснэгтийн файлыг бид арай хожуу хийн өгөх болно. $results['pageTitle'] хувьсагчийн утгыг htmlspecialchars() функцээр дамжуулан өгч байгааг анхаарна уу. Энэ функц нь (<, >, & гэх мэтийн) HTML-ийн тусгай тэмдэгтүүдийг тэдгээртэй харгалзах (<, > & гэх мэтийн) утгуудаар солин өгдөг. Өмнөх хичээлүүдэд үзсэн Article классын оролтын мэдээлэлд шүүлт хийх, гаралтыг кодлох энэ аргууд нь сайтын аюулгүй байдлыг сайжруулах сайн аргууд байдаг. Бид манай хэвүүдийн бараг бүх өгөгдлүүдийг ийм байдлаар кодлох болно.
Одоо include хавтаст footer.php нэртэй файл үүсгээд доорх кодыг оруулан өгнө.
<div id="footer">
Сонин мэдээ © 2015. <a href="admin.php">Сайтын админ</a>
</div>
</div>
</body>
</html>Дээрх код манай системийн HTML хуудас бүрийг дуусгаж байх юм. Сүүлийн гурван мөрөөр container, body, html дивүүд хаагдаж байгаад анхаарна уу. Бид эдгээр файлуудыг үндсэн хэвийн файлын өмнө ба сүүл хэсэгт оруулж ирснээр хуудсыг бүрдүүлнэ гэдгийг ойлгосон байх.
Нүүр хуудасны хэв homepage.php
Одоо templates хавтас дотроо homepage.php файлыг үүсгээд доорх кодыг оруулан өгөөрэй.
<?php include "templates/include/header.php" ?>
<ul id="headlines">
<?php foreach ( $results['articles'] as $article ) { ?>
<li>
<h2>
<span class="pubDate"><?php echo date('j F', $article->publicationDate)?></span><a href=".?action=viewArticle&articleId=<?php echo $article->id?>"><?php echo htmlspecialchars( $article->title )?></a>
</h2>
<p class="summary"><?php echo htmlspecialchars( $article->summary )?></p>
</li>
<?php } ?>
</ul>
<p><a href="./?action=archive">Мэдээний архив</a></p>
<?php include "templates/include/footer.php" ?>Энэхүү темплейт нүүр хуудаст мэдээнүүдийг жагсаалт хэлбэрээр гарган ирнэ. Скрипт $results['articles'] хадгалагдаж байгаа Article обьектуудын массивыг циклээр боловсруулж мэдээ бүрийн нийтлэгдсэн огноо, гарчиг, товч агуулгыг хуудаст үзүүлнэ. Мэдээний нэрүүд action=viewArticle параметрыг мэдээний ID -ийг хамтаар үндсэн скриптэд дамжуулах '.' (index.php) холбоос URL -г үүсгэнэ. Ингэснээр хэрэглэгч мэдээний гарчиг дээр даран холбоосоор орон мэдээг бүтнээр нь үзэх боломжтой болно. Үүнээс гадна хэв Мэдээний архивт хандах ("./?action=archive") холбоосыг агуулна. Php кодыг Html дотор оруулах боломжтой байдаг талаар та сайтын PHP хэл хэсгээс мэдсэн гэж найдаж байна.
homepage.php файл болон цаашдаа бүх темплейтүүд PHP include -ийг ашиглан хуудасны толгой болон хөлийг оруулан ирж байгаад анхаарна уу.
Мэдээний архивын хэв archive.php
Мэдээний архивыг үзүүлэх темплейт файлыг templates хавтаст archive.php нэрээр үүсгээд доорх кодыг оруулан өгнө.
<?php include "templates/include/header.php" ?>
<h1>Мэдээний архив</h1>
<ul id="headlines" class="archive">
<?php foreach ( $results['articles'] as $article ) { ?>
<li>
<h2>
<span class="pubDate"><?php echo date('j F Y', $article->publicationDate)?></span><a href=".?action=viewArticle&articleId=<?php echo $article->id?>"><?php echo htmlspecialchars( $article->title )?></a>
</h2>
<p class="summary"><?php echo htmlspecialchars( $article->summary )?></p>
</li>
<?php } ?>
</ul>
<p>Нийт <?php echo $results['totalRows']?> материалтай.</p>
<p><a href="./">Нүүр хуудаст буцах</a></p>
<?php include "templates/include/footer.php" ?>Скрипт нь манай АУСистемд байгаа бүх материалуудыг гаргах хэв. Код homepage.php файлтай бараг ижилхэн. Материалуудын жагсаалтыг нүүр хуудасныхаас өөр хэлбэрээр үзүүлэх үүднээс энд archive гэсэн CSS класс нэмэгдсэн байгаа. Архивт хэдэн жилийн өгөгдлүүд байж болох учраас нийтлэгдсэн огноонд оныг нэмэн оруулсан. Хуудас дээр өгөгдлийн санд байгаа материалуудын нийт тоог $results['totalRows'] элементийг ашиглан үзүүлнэ. Мэдээний архив холбоосын оронд нүүр хуудсын "Нүүр хуудаст буцах" холбоосыг оруулсан.
Мэдээг үзүүлэх хэв viewArticle.php
Хэрэглэгчийн талын сүүлийн темплейт бол хэрэглэгчид мэдээг үзүүлэх хэв юм. Үүний тулд templates хавтастаа viewArticle.php файлыг үүсгээд доорх кодыг оруулан өгнө.
<?php include "templates/include/header.php" ?>
<h1 style="width: 75%;"><?php echo htmlspecialchars( $results['article']->title )?></h1>
<div style="width: 75%; font-style: italic;"><?php echo htmlspecialchars( $results['article']->summary )?></div>
<div style="width: 75%;"><?php echo $results['article']->content?></div>
<p class="pubDate">Нийтлэгдсэн <?php echo date('j F Y', $results['article']->publicationDate)?></p>
<p><a href="./">Нүүр хуудаст буцах</a></p>
<?php include "templates/include/footer.php" ?>Хэв их энгийн кодтой. Энд сонгогдсон материалын гарчиг, товч агуулга, дэлгэрэнгүй агуулга, нийтлэгдсэн огноог гаргаж байгаа. Үүнээс гадна хуудаст нүүр хуудас руу буцах холбоосыг байрлуулсан болно.
Ингээд хэрэглэгчийн талын темплейтүүд бэлэн боллоо. Дараагийн хичээлд бид сервер талуудын хэвүүдийг үүсгэх болно.