LAB06 - nvbach91/4IZ278-2020-2021-LS GitHub Wiki

Cvičení 06 - To a great mind, nothing is little

Povinná četba (na doma)

Náplň cvičení

  • Připojení k databázi v PHP pomocí PDO a abstrakce OOP
  • Posílání SQL příkazů do databáze pomocí PDO prepared statement
  • Zpracování výsledků z databáze
  • Návrh databáze pro e-shop
  • SQL dotazy pro e-shop

Obrázek ze cvičení (ERD, notace Barker's)

image

Příklady dat

  • products (1)
product_id name price category_id
11 Tommy 100.00 21
12 Kent 80.00 22
13 Ataulfo 110.00 22
14 Haden 150.00 24
15 Keitt 120.00 23
16 Francine 80.00 24
  • categories (2)
category_id name
21 Alphonso
22 Chaunsa
23 Langra
24 Benishan
  • orders (3)
order_id date discount user_id
31 2021-03-26 09:10:11 5 44
32 2021-03-26 15:59:00 10 41
33 2021-03-26 17:01:11 0 41
34 2021-03-26 18:19:11 0 43
35 2021-03-26 18:14:11 20 43
36 2021-03-26 21:30:11 15 42
  • users (4)
user_id privilege name email phone address
41 2021-03-26 09:10:11 Bruce Wayne [email protected] 123456789 Woodfield West
42 2021-03-26 15:59:00 Clark Kent [email protected] 987654321 Rhosddu Road
43 2021-03-26 17:01:11 Lana Lang [email protected] 456789123 Rutherford Poplars
44 2021-03-26 18:19:11 Lex Luthor [email protected] 654987321 Cock & Dolphin Yard
45 2021-03-26 18:14:11 Lois Lane [email protected] 741258963 Westcoombe Avenue
46 2021-03-26 21:30:11 Arthur Curry [email protected] 951847623 Miles Mews
  • order_items (5)
order_item_id quantity price product_id order_id
51 2 100.00 11 31
52 3 110.00 13 31
53 1 120.00 15 32
54 -1 100.00 11 33
55 5 150.00 14 33
56 10 120.00 15 33

PDO - PHP Data Objects

  • PHP extension
  • Konzistentní API pro práci s databází
  • Funguje s různými databázemi, MySQL, PostgreSQL, MS SQL, Oracle, ...
  • OOP přístup
  • Bezpečné & odolné vůči SQL injection díky prepared statement
  • Prepared statement - předkompilované instrukce, custom šablony s parametry
  • Obsahuje pomocné funkcionality pro usnadnění práce s databází
  • Přepoužitelnost
  • Snadné zacházení s chybami

Bodovaná samostatná práce na cvičení

  • Vytvořte domovskou stránku pro e-shop, kde budou zobrazeny seznam kategorií, produkty a slider pro akční produkty podle dat v databázi.

Návod

  • V phpMyAdmin nastavte svou databázi tak, aby měla vždy charset utf8mb4 a collation utf8mb4_unicode_ci pro zajištění správného zobrazení dat.
  • Stáhněte si Bootstrap HTML šablonu pro e-shop https://github.com/BlackrockDigital/startbootstrap-shop-homepage
  • Z ní vystřihněte části produkty, kategorie, slider a umístěte je do samostatných souborů, např. ProductDisplay.php, CategoryDisplay.php, SlideDisplay.php.
  • ====================
  • V části produkty zparametrizujte název, cenu a obrázek, tj. nahraďte příslušné placeholdery s PHP bloky kódu.
  • Vytvořte pole obsahující alespoň 7 produktů. Každý produkt obsahuje zmíněné 4 údaje id, name, price, img.
  • Naimplementujte HTML komponentu pro zobrazení produktů, tj. pomocí cyklu vypište všechny produkty do HTML šablony.
/**
 * File: ProductDisplay.php
 * + Requires File: ProductsDB.php
 */
<?php require __DIR__ . '/../db/ProductsDB.php'; ?>
<?php

// $products = [
//   ['name' => 'Tommy Atkins', 'price' => 49.9, 'img' => 'https://www.mango.org/wp-content/uploads/2017/11/kent-variety.jpg'],
//   ['name' => 'Ataulfo', 'price' => 60.9, 'img' => 'http://elbefruit.eu/wp-content/uploads/2018/07/tommy-variety-1.jpg'],
//   ['name' => 'Kent', 'price' => 47.9, 'img' => 'https://media.mercola.com/assets/images/foodfacts/mango-nutrition-facts.jpg'],
//   ['name' => 'Haden', 'price' => 51.9, 'img' => 'https://images-na.ssl-images-amazon.com/images/I/21jivLJsAeL.jpg'],
//   ['name' => 'Keitt', 'price' => 39.9, 'img' => 'http://betterhomegardening.com/wp-content/uploads/2015/05/pakistan-Ataulfo-mango.jpg'],
//   ['name' => 'Francine', 'price' => 59.9, 'img' => 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcStvS-QHWIlsLILy-fIIGXcxlb2jUIrXNDjKXs4eLbSJt4gJKLu'],
// ];

// INSERT INTO `products` (`name`, `price`, `img`) VALUES
// ('Tommy Atkins', '40', 'https://www.mango.org/wp-content/uploads/2017/11/kent-variety.jpg'),
// ('Ataulfo', '61', 'http://elbefruit.eu/wp-content/uploads/2018/07/tommy-variety-1.jpg'),
// ('Kent', '48', 'https://media.mercola.com/assets/images/foodfacts/mango-nutrition-facts.jpg'),
// ('Haden', '52', 'https://images-na.ssl-images-amazon.com/images/I/21jivLJsAeL.jpg'),
// ('Keitt', '40', 'http://betterhomegardening.com/wp-content/uploads/2015/05/pakistan-Ataulfo-mango.jpg'),
// ('Francine', '60', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcStvS-QHWIlsLILy-fIIGXcxlb2jUIrXNDjKXs4eLbSJt4gJKLu');

$productsDB = new ProductsDB();
// custom metoda fetchAll pošle SQL dotaz do databáze a vrátí všechny produkty z databáze
$products = $productsDB->fetchAll();

?>

<div class="row">
  <?php foreach($products as $product): ?>
  <div class="col-lg-4 col-md-6 mb-4">
    <div class="card h-100 product">
      <a href="#"><img class="card-img-top product-image" src="<?php echo $product['img']; ?>" alt="mango-product-image"></a>
      <div class="card-body">
        <h4 class="card-title"><a href="#"><?php echo $product['name']; ?></a></h4>
        <h5><?php echo number_format($product['price'], 2), ' ', GLOBAL_CURRENCY; ?></h5>
        <p class="card-text">...</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">&#9733; &#9733; &#9733; &#9733; &#9734;</small>
      </div>
    </div>
  </div>
  <?php endforeach; ?>
</div>
  • Tuto komponentu zapíchněte zpátky do hlavní HTML stránky pomocí require.
  • Otevřete hlavní stránku a ověřte, že komponenta funguje správně.
  • Nyní v rámci této komponenty budeme dotazovat na data produktů z databáze.
  • Vytvořte tabulku products a do ní naimportujte všech 7 zmíněných produktů. U každého produktu evidujte 4 informace, tj. bude mít 4 sloupce:
    • ID - product_id (primární klíč, auto increment),
    • Název - name (varchar 255),
    • Cena - price (double),
    • Obrázek - img (text - v podobě URL odkazující na nějaký obrázek na internetu).
  • Vyzkoušejte SQL dotaz SELECT * FROM products; v phpMyAdmin.
  • Naimplementujte třídu ProductsDB pro práci s touto tabulkou:
    • V konstruktoru vytvořte novou instanci PDO pro připojení k databázi.
    • Naimplementujte vlastní metodu fetchAll() pro načtení všech produktů, která pošle zmíněný SQL dotaz do databáze a vrátí pole všech produktů z tabulky.
SELECT * FROM products;
  • Zavolejte tuto fetchAll() metodu a a výsledek volání uložte do proměnné ve vaší komponentě.
  • v této proměnné by mělo být pole se záznamy z vaší tabulky, záznamy vyrendrujte do HTML
  • ====================
  • Tento postup zopakujte pro zbylé dvě komponenty (kategorie a slidy)
    • Tabulka categories bude mít sloupce category_id, number, name.
    • Tabulka slides bude mít sloupce slide_id, img, title.
  • POZOR! před nahráváním na GitHub nezapomeňte odstranit přístupové údaje do databáze z konfiguračního souboru
  • Ukázkové řešení: https://eso.vse.cz/~nguv03/cv06/
  • 1 bod dostanete až po
⚠️ **GitHub.com Fallback** ⚠️