Dzisiaj przyjrzymy się dość znanej funkcjonalności występującej głównie w sklepach internetowych. Za pomocą mechanizmu sesji w PHP wykonamy ćwiczenie, które zasymuluje proces wyboru produktu i dodania go do koszyka. Oczywiście, produkt będziemy mogli w każdej chwili z danego koszyka usunąć, a także umieszczać w koszyku wiele sztuk danego produktu. Myślę, że jest to ciekawe ćwiczenie, dla osób uczących się języka PHP, gdyż mechanizm sesji to jeden z ważniejszych jego elementów, który każdy powinien dobrze opanować. Po więcej wiadomości na temat PHP odsyłam do naszych kursów PHP.
Nie przedłużając, zabierzmy się do pracy. Jako, że będziemy korzystać z pliku z rozszerzeniem PHP, musimy oczywiście umieścić go na naszym lokalnym, bądź jak kto woli zdalnym serwerze. Ja skorzystam z serwera lokalnego. Na początku stwórzmy zwykły plik z rozszerzeniem *.php, a w nim umieśćmy standardowy szablon HTML5.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Koszyk</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Koszyk</h1>
<div> <a href="koszyk.php">sklep</a> | <a href="koszyk.php?koszyk">koszyk</a></div>
</header>
<div id="container">
<div id="left">
<form action="" method="post">
<table>
<caption>Produkty</caption>
<th>Nr.</th>
<th>Nazwa</th>
<th>Dodaj</th>
</table>
</form>
</div>
<div id="right">
</div>
</div>
</body>
</html>
Kilka słów na temat kodu – oprócz standardowego szablonu dodaliśmy dwie kolumny ‘left’ i ‘right’ – w lewej wyświetlimy sobie tabelkę z produktami, w prawej natomiast będzie się znajdował nasz koszyk. Jak widać mamy już nagłówki dla tabeli z produktami, jednak będziemy musieli resztę produktów wygenerować za pomocą języka PHP.
Stwórzmy więc plik functions.php gdzie umieścimy potrzebne nam mechanizmy.
<?php
function generate_products(){
for($i=1;$i<21;$i++)
{
echo "
<tr>
<td>$i</td><td>produkt$i</td><td><input type='submit' name='towar' value='produkt$i'></td>
</tr>";
}
}
Pierwsza funkcja generate_products() jak sama nazwa wskazuje ma za zadanie wygenerować 20 produktów w kolejnych wierszach. Nietypowo rozpoczynamy iterację od liczby 1. Oczywiście liczba produktów, które chcemy mieć dostępne w sklepie jest absolutnie dowolna.
function generate_cart(){
echo "
<form action = '' method = 'post'>
<table class='koszyk' border='3px solid'>
<caption>Koszyk</caption>
<th>Nr.</the><th>Produkt</th><th>Ilosc</th><th>Usuń</th>
";
$i=0;
foreach($_SESSION as $key=>$n)
{
$i++;
echo "
<tr>
<td>$i</td><td>$key</td><td>$n</td>
<td><input type='submit' name='towar-' value='$key' class='delete'></td>
";
}
}
Dalej generate_cart() będzie miał za zadanie wyświetlić tabelkę z ewentualnymi produktami, które mają się znaleźć w koszyku. Widać tutaj już pewną koncepcję naszej pracy z sesjami. Będziemy tworzyć kolejne zmienne sesyjne o indeksie takim jak nazwa naszego produktu. Wartość będzie natomiast oznaczała liczbę sztuk danego produktu.
function serve_post(){
if(isset($_POST['towar']))
{
$towar = $_POST['towar'];
if(!isset($_SESSION[$towar])) $_SESSION[$towar] = 1;
else $_SESSION[$towar]++;
header("Location: koszyk.php?koszyk");
}
if(isset($_POST['towar-']))
{
$towar = $_POST['towar-'];
if($_SESSION[$towar]==1) unset($_SESSION[$towar]);
else $_SESSION[$towar]--;
header("Location: koszyk.php?koszyk");
}
}
Wreszcie funkcja serve_post() będzie odpowiedzialna za obsługę danych przychodzących metodą POST. Jak widać są dwie opcję, albo dodajemy produkt do koszyka, albo go z niego usuwamy. Na koniec przekierowujemy na taki adres url, który pozwoli na wyświetlenie koszyka.
Wróćmy do naszego głównego pliku. Skoro korzystamy tutaj z mechanizmu sesji, to musimy o tym powiadomić nasz skrypt, tak by na samym początku mechanizm ten był inicjalizowany. Na samym początku pliku dodajmy więc:
<?php
session_start();
require_once('functions.php');
?>
Po pierwsze włączamy mechanizm sesji, po drugie załączamy plik z funkcjami, który oczywiście jest nam w tym przypadku niezbędny.
session_start();
require_once('functions.php');
if(!empty($_POST)){
serve_post();
}
Już w następnych liniach możemy dodać mechanizm obsługi danych przesyłanych metodą POST. Oczywiście sprawdzamy, czy w ogóle jakieś dane takową metodą zostały przesłane.
<div id="left">
<form action="" method="post">
<table>
<caption>Produkty</caption>
<th>Nr.</th>
<th>Nazwa</th>
<th>Dodaj</th>
<?php
generate_products();
?>
</table>
</form>
</div>
W naszej lewej kolumnie możemy teraz dołączyć generowanie produktów w tabelce.
<div id="right">
<?php
if((strpos($_SERVER['REQUEST_URI'], "?koszyk")))
{
generate_cart();
}
?>
</div>
Podobnie postąpimy z prawą kolumną, tutaj z kolei zanim wygenerujemy nasz koszyk, musimy sprawdzić czy został dołączony odpowiedni ciąg znaków do adresu url.
Tak ostatecznie kształtuje się nasz główny plik – koszyk.php
<?php
session_start();
require_once('functions.php');
if(!empty($_POST)){
serve_post();
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Koszyk</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Koszyk</h1>
<div> <a href="koszyk.php">sklep</a> | <a href="koszyk.php?koszyk">koszyk</a></div>
</header>
<div id="container">
<div id="left">
<form action="" method="post">
<table>
<caption>Produkty</caption>
<th>Nr.</th>
<th>Nazwa</th>
<th>Dodaj</th>
<?php
generate_products();
?>
</table>
</form>
</div>
<div id="right">
<?php
if((strpos($_SERVER['REQUEST_URI'], "?koszyk")))
{
generate_cart();
}
?>
</div>
</div>
</body>
</html>
Został nam już jedynie dołączony plik ze stylami – jest ono rzecz jasna dowolne. Ja mój skrypt ostylowałem mniej więcej w ten sposób.
body {
margin: 0 auto;
font-family: 'consolas';
}
#container {
display: flex;
}
header {
background-color: #2c3e50;
height: 150px;
position: relative;
}
header h1 {
color: white;
position: absolute;
top: 20%;
text-align: center;
margin: 0 auto;
width: 100%;
}
header div {
color: white;
position: absolute;
top: 70%;
text-align: center;
margin: 0 auto;
width: 100%;
}
header a {
color: white;
}
table,
td,
tr,
th {
border: 2px solid black;
}
table {
border-collapse: collapse;
text-align: center;
}
caption {
margin: 10px;
font-weight: bold;
}
#left {
width: 50%;
}
#right {
width: 50%;
}
#right table {
margin-left: auto;
}
input[type="submit"]:hover{
cursor:pointer;
}
Myślę, że takie ćwiczenie pozwoli nam lepiej zapoznać się z mechanizmem sesji w PHP. Ciekawym udoskonaleniem tego projektu byłoby wysyłanie danych nie przez tradycyjny formularz HTML, ale na przykład za pomocą technologii AJAX. Warto postawić sobie takie zadanie w ramach własnego dopracowania projektu.
