Нова практична 4
В цій лабораторній роботі створимо карточку товарів. Так як людина із каталогу після натискання по посиланню має кудись попасти ). В лабораторній роботі нових таблиць створюватись не буде, так як, всі характеристики товарів були нами задані в минулій лабораторній роботі коли формували каталог.
Для карточки товарів використаємо все той же безкоштовний шаблон bootstrap, він наведений нижче
По великому рахунку у нас вже все є, єдине що може піти непередбачувано це розміри фотографій товару, якщо ви для каталогу завантажили мініатюри (малюнки малих розмірів). Тоді за рахунок зменшення області фото, зіб’ється верстка. Тому Вам буде потрібно поміняти малюнки на більші, а в каталозі товарів зменшити їх до потрібних за допомогою каскадних стилів.
На зображенні в цей раз не відмічено, але все-таки нагадаю, що верх та низ сторінки збігається із іншими шаблонами, тому покопіюйте блоки шапки та підвалу, наприклад, із головної сторінки. Потім переіменовуємо шаблон і кладемо у папку templates\ (не забудьте, якщо у вас є стилі і яваскрипти то в посиланні на них потрібно також включити директорію templates\).
Отже підготовчий етап завершено, можна приступати до програмного коду. І так, змінимо нашу систему завантаження сторінок (файл page.php в корені сайту) дописавши туди ще функцію завантаження товару (коментарями буде відмічена та частина, яка змінилась):
<?php
require_once("database.php");
function get_page($pid){
global $mysqli;
$res=$mysqli->query("SELECT * FROM `page` WHERE `id`='".mysql_escape($pid)."';");
$page=array();
while ($row=$res->fetch_assoc()) {
$page['title']=$row['title'];
$page['body']=$row['body'];
$page['type']=$row['type'];
return $page;
}
return false;
}
function get_product($pid) { // нова функція, названа по аналогії із функцією повернення сторінки
global $mysqli; //створюємо посилання на підключення до БД
$res=$mysqli->query("SELECT * FROM `product` WHERE `id`='".mysql_escape($pid)."';");// виконуємо запит для повернення потрібної нам одиниці товару
$page=array();//оголошуємо порожній масив
//перебираємо отриманий результат запиту,
//але після першого рядка перериваємо фунцію та повертаємо результат
//через змінну $page для наочності.
//Нам не потрібно перебирати весь результат так як дана умова не може повернути більше одного рядка
while ($row=$res->fetch_assoc()) {$page=$row;return $page;}
return false;//якщо товару не знайдено повертаємо порожній результат
}
?>
Тепер потрібно модифікувати наш завантажувач сайту (index.php, який лежить в кореневій директорії сайту). Доданий блок коду підписаний коментарями. Зверніть увагу на те, що товари будуть доступні за посиланням виду ?q=product/<id> - де <id> є ідентифікатором товару в таблиці товарів. Але Вам нічого не мішає дописувати «прямі» посилання на товари в таблицю router, тільки вказувати type=product, entity_id=<ідентифікатор запису у таблиці товарів>, і тоді, Ви зможете мати посилання виду - ?q=tepli_noski_aktcia.
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
require_once("database.php");
require_once("block.php");
require_once("menu.php");
require_once("page.php");
if (isset($_GET['q'])) {$q=$_GET['q'];} else {$q='/';}
if ($q=='/') {include("templates/frontpage.php");}
else {
$res=$mysqli->query("SELECT * FROM `router` WHERE `link`='".mysql_escape($q)."';");
//no record in router table, first parameter - type, second - entity_id
if (!($row=$res->fetch_assoc())) {
$qp=explode('/',$q);
$row['type']=$qp[0];
$row['entity_id']=$qp[1];
}
//type=page
if ($row['type']=='page') {
$page_id=$row['entity_id'];
$p=get_page($page_id);
if ($p['type']=='html') include('templates/article.php');
if ($p['type']=='php') include($p['body']);
}
//type = product
if ($row['type']=='product') { //якщо тип = товар
$page_id=$row['entity_id'];//передаємо ідентифікатор для обробітку шаблону
include('templates/product.php'); //викликаємо сам шаблон
}
}
?>
Тепер наведемо наш шаблон, нагадую, що верх та низ сторінки одинакові, тому коментарі будуть лише в тих місцях де саме формується відображення товару, отже файл product.php із директорії templates\
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title><?php echo $sitetitle;?></title>
<!-- Bootstrap core CSS -->
<link href="templates/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="templates/css/modern-business.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="index.html"><?php echo $sitename;?></a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<?php echo get_menu('main_menu');?>
</div>
</div>
</nav>
<!-- Page Content -->
<div class="container">
<!-- починаємо формувати товар -->
<?php $page=get_product($page_id);?> <!-- завантажуємо потрібний нам товар -->
<!-- Page Heading/Breadcrumbs -->
<h1 class="mt-4 mb-3">Носочкі
<small><?php echo $page['title']?$page['title']:'Недоступно';?> <!-- Виводимо назву товару, або слово «недоступно» --></small>
</h1>
<!-- Portfolio Item Row -->
<div class="row">
<div class="col-md-8">
<!-- тут задається файл із зображенням товару -->
<img class="img-fluid" src="/images/<?php echo $page['picture'];?>" alt="">
</div>
<div class="col-md-4">
<h3 class="my-3"><?php echo $page['title']?$page['title']:'Недоступно';?> <!-- Виводимо назву товару, або слово «недоступно» --></h3>
<p><?php echo $page['description']?$page['description']:'Недоступно';?> <!-- Виводимо опис товару, або слово «недоступно» --></p>
<h3 class="my-3">Особливоті</h3>
<ul>
<li><b>Розмір</b> - <?php echo $page['size'];?> <!-- Виводимо розмір --></li>
<li><b>Колір</b> - <?php echo $page['color'];?> <!-- Виводимо колір --></li>
<li><b>Виробник</b> - <?php echo $page['vendor'];?> <!-- Виводимо виробника --></li>
</ul>
<h3 class="my-3" style="color:red;"><b><?php echo $page['price'].' грн';?> <!-- Виводимо ціну --></b></h3>
</div>
</div>
<!-- /.row -->
<div class="row" style="height:1em"></div>
<!-- /.row -->
</div>
<!-- /.container -->
<!-- Footer -->
<footer class="py-5 bg-dark">
<div class="container">
<div class="row"><style>footer div.container div a {color:rgba(217, 219, 222, 1);}</style>
<div class="col-lg-4" style="color:white;"><?php $block=get_block('footer_first');echo $block['block'];?></div>
<div class="col-lg-4" style="color:white;"><?php $block=get_block('footer_second');echo $block['block'];?></div>
<div class="col-lg-4" style="color:white;"><?php $block=get_block('footer_third');echo $block['block'];?></div>
</div>
<p class="m-0 text-center text-white">Copyright © 2018</p>
</div>
<!-- /.container -->
</footer>
<!-- Bootstrap core JavaScript -->
<script src="templates/vendor/jquery/jquery.min.js"></script>
<script src="templates/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>
І на кінець у Вас має вийти щось на зразок цього. Знову ж таки у Вас свої товари із своїми характеристиками, тому в шаблоні товару їх потрібно обробляти згідно із Вашими полями у БД.
