Zadania na lekcje

Połączenie z bazą MySQLi i wyświetlanie danych

PHP
Priorytet: Normalny Szkic

Zadanie 150: Połączenie z bazą MySQLi i wyświetlanie danych

Wstęp

Większość nowoczesnych aplikacji webowych potrzebuje trwałego miejsca do przechowywania danych, takich jak użytkownicy, artykuły czy produkty. Baza danych pozwala na szybkie i bezpieczne zarządzanie ogromnymi ilościami informacji. W języku PHP jednym z najpopularniejszych sposobów na komunikację z bazą MySQL jest wbudowane rozszerzenie MySQLi (MySQL Improved). Dzięki niemu aplikacje stają się dynamiczne, pozwalając na swobodne zapisywanie, pobieranie i wyświetlanie informacji.

Cel zadania

Nauczysz się, w jaki sposób połączyć skrypt PHP z bazą danych MySQL używając zintegrowanego rozszerzenia mysqli, a także jak pobrać dane z przygotowanej tabeli i wyświetlić je bezpośrednio na stronie.

Wymagania techniczne

  1. Utworzyć testową bazę danych i tabelę zawierającą kilka przykładowych rekordów.
  2. Zaimplementować skrypt nawiązujący bezpieczne połączenie przy użyciu ulepszonej klasy mysqli.
  3. Napisać zapytanie w języku SQL, które pobierze wszystkie rekordy z wybranej tabeli.
  4. Odpowiednio wylistować pozyskane z bazy dane w postaci tabeli HTML na ekranie przeglądarkarki.

Kroki do wykonania

1. Przygotowanie bazy danych i tabeli

Aby zapytać bazę o cokolwiek, musimy najpierw stworzyć strukturę i dodać do niej przykłady. Będziemy pracować na tabeli pracowników. Otwórz swój ulubiony program do obsługi bazy (np. phpMyAdmin) lub uruchom z konsoli serwera lokalnego poniższy kod SQL:

CREATE DATABASE IF NOT EXISTS firma;
USE firma;

CREATE TABLE pracownicy (
    id INT AUTO_INCREMENT PRIMARY KEY,
    imie VARCHAR(50) NOT NULL,
    nazwisko VARCHAR(50) NOT NULL,
    stanowisko VARCHAR(50) NOT NULL,
    pensja DECIMAL(10,2) NOT NULL
);

INSERT INTO pracownicy (imie, nazwisko, stanowisko, pensja) VALUES
('Jan', 'Kowalski', 'Programista', 8000.00),
('Anna', 'Nowak', 'Księgowa', 6500.00),
('Piotr', 'Zieliński', 'Manager', 10500.00),
('Katarzyna', 'Wójcik', 'Specjalista HR', 5500.00),
('Michał', 'Dąbrowski', 'Administrator IT', 7000.00);

2. Połączenie z bazą danych za pomocą PHP

Następnym krokiem jest skonfigurowanie skryptu w taki sposób, aby wiedział, do jakiej bazy ma trafiać kod SQL i za pomocą jakich poświadczeń logowania to wykonać. Na samym początku głównego pliku index.php dodaj poniższą konfigurację:

[!TIP] W rzeczywistych projektach dobrą praktyką jest trzymanie tych parametrów w oddzielnym pliku np. config.php a następnie wywoływanie go za pomocą konstrukcji require_once().

<?php
$host = "localhost";
$user = "root";       // Domyślny użytkownik bazy na lokalnych serwerach XAMPP/WAMP
$password = "";       // Domyślne hasło to zazwyczaj puste pole
$dbname = "firma";    // Nazwa bazy zdefiniowanej w kroku 1

// Nawiązanie połączenia przy pomocy funkcji mysqli_connect
$conn = mysqli_connect($host, $user, $password, $dbname);

// Sprawdzenie, czy nie wystąpił krytyczny błąd połączenia
if (!$conn) {
    die("Błąd połączenia z bazą: " . mysqli_connect_error());
}

// Ustawienie wymuszonego kodowania znaków na utf8 (zapewnienie poprawnego wyświetlania polskich znaków: ą, ś, ć)
mysqli_set_charset($conn, "utf8");
?>

3. Pobranie danych i przygotowanie ich do wyświetlenia

Skoro mamy poprawnie ustanowione połączenie ze zdefiniowanym $conn, możemy korzystać z metod i poleceń w tej klasie. Stwórzmy teraz zapytanie w języku SQL pozwalające wyciągnąć informacje ze zdefiniowanej tabeli pracownicy.

<?php
// Twoje zapytanie przekazywane do wywołania po stronie bazy SQL
$sql = "SELECT id, imie, nazwisko, stanowisko, pensja FROM pracownicy";

// Wysłanie zapytania i zapisanie obiektu zwracanego ze zweryfikowanym plikiem wynikowym
$result = mysqli_query($conn, $sql);
?>

[!IMPORTANT] Zmienna $result nie przechowuje jeszcze gotowej zparsowanej tablicy. To specjalny dedykowany zasób z wierszami do przeprocesowania. Dlatego będziemy odbierać wyniki używając w pętli metody dekompresyjnej przypisującej rekordy do poszczególnych zmiennych.

4. Wyświetlanie zwróconych elementów jako wierszy HTML

Aby czytelnie wyprowadzić odebrane dane, sprawdzamy ich ilość zapytując o parametr num_rows. Następnie pętlą budujemy wiersze tabeli wypinając kolejne komórki bezpośrednio w kod HTML i przeplatając ich bloki ze strukturą graficzną.

Commit 1: Zaprojektowanie wyświetlania listy osób pracujących i zwrotnej iteracji ze stronicowanego źródła z MySQL.

<?php
if (mysqli_num_rows($result) > 0) {
    echo "<h2>Lista Pracowników:</h2>";
    echo "<table border='1' cellpadding='10'>
            <tr>
                <th>ID</th>
                <th>Imię</th>
                <th>Nazwisko</th>
                <th>Stanowisko</th>
                <th>Pensja</th>
            </tr>";
            
    // Funkcja mysqli_fetch_assoc() służy do zamiany analizowanego wiersza w asocjacyjną tablicę, do której będziemy się posiłkować odwoływać przez string ze struktury zadeklarowanego pola
    while($row = mysqli_fetch_assoc($result)) {
        echo "<tr>
                <td>" . htmlspecialchars($row["id"]) . "</td>
                <td>" . htmlspecialchars($row["imie"]) . "</td>
                <td>" . htmlspecialchars($row["nazwisko"]) . "</td>
                <td>" . htmlspecialchars($row["stanowisko"]) . "</td>
                <td>" . htmlspecialchars($row["pensja"]) . " PLN</td>
              </tr>";
    }
    echo "</table>";
} else {
    echo "<p>Brak pracowników w bazie.</p>";
}

// Zamykamy sesję i zwalniamy zalokowane połączenie
mysqli_close($conn);
?>

[!CAUTION] Pamiętajcie o bardzo częstym używaniu walidatora formatowania np. htmlspecialchars($zmienna) na każdej wyświetlanej komórce pobranej do przeglądarki ze stringiem jako obrona przed XSS! Przed zgaszeniem interpretera również zamykaj otwartą bazę podaną instrukcją mysqli_close($conn);.

Zadanie dla chętnych

Spróbuj wdrożyć 5 niezależnych modyfikacji do zrealizowanego skryptu po to, aby przećwiczyć pisanie w środowisku integracji back-endu z SQL i ułaskawić swoje umiejętności:

  1. Sortowanie danych na wyjściu: Zmodyfikuj zapytanie bazowe SELECT w taki sposób poprzez odpowiednią klauzulę, aby pracownicy domyślnie pojawiali się posortowani w porządku malejącym według wysokości przypisanej im pensji.
  2. Dodawanie nowej kolumny reprezentującej informację: Dołącz do tabeli pracownicy w bazie kolumnę rocznik_urodzenia (np. ze znakiem DATE/YEAR), wypisz z głowy daty dla przykładowych pracowników i zrób małą rekonfigurację w tagach w taki sposób aby obydwie struktury w widoku zaprezentowały obok stan nowej komórki na WWW - upewniając się zapytaniem i dodaniem na wyjściowym echo.
  3. Filtrowanie uzyskanych wyników za pomocą restrykcji limitacji: Przebuduj ciąg tekstowy skryptu i wykorzystaj w nim klauzulę opierającą się na WHERE, by lista pracownicza przedstawiła jedynie osoby z zadeklarowaną wypłatą większą niż próg wartości 7000.00.
  4. Rozszerzone statystyki iteracyjne w firmie: Zabezpiecz wykaz o dodatkowe obliczenia programując pętle wykonawczą do tego stopnia żeby w obrebie analizowanej firmy wyliczyć całowitą pensję oddaną ze stanowisk zaistniałych osób zatrudnionych i po zamknięciu elementu tablicy </table> zaprezentuj ją estetycznie jako kwotę budżetową, a także wyrzuć połączone na widok sumarycznie okodowane liczby rekordów wyświetlających się z samej zmiennej.
  5. Modernizacja szaty wyświetlanej stylizacji w CSS: Ściągnij parametr definicji border='1' na tagach z samego szkieletowego HTML, dodaj powiązanie przez znacznik ze style.css - i zaopiekuj się formatowaniem kolumn z paddingami w klasowo-rozróżnianych formatach z pogrubioną czcionką czy jednolitym kolorem. Zaprojektuj eleganckie wdrożenie i dopracowany kod Front-endu w czystej implementacji tabelarycznego wyglądu jak u nowo-wyznaczonych deweloperów z wizją UI.