Zadanie 3
Uczestniczysz w projekcie tworzenie witryny sklepu księgarni internetowej. Twoim zadaniem jest utworzyć:
Szablon strony
Utworzenie szablonu strony zgodnego z pokazanymi grafikamin stron index, logowanie. zakupy oraz koszyk. Strona powinna mieć szerokość 1000 pikseli dla szerokości okna przeglądarki mniejszej od 1200 pikseli oraz 1200 pikseli dla innych szerokości(układ responsywny). Zmiana rozmiaru strony powinna być widoczna podczas zmieniania rozmiaru okna przeglądarki.
Wysokość nagłówka wynosi 100 pikseli. Szerokość sekcji zawierającej obszar nawigacyjny i treść strony jest dzielona przez te elementy w proporcji 1:4 (szerokość obszaru treści jest cztery razy większa od szerokości części nawigacyjnej). Strona zajmuje całą wysokość viewportu przeglądarki (zastosować CSS3). Czcionka strony bezszeryfowa, najlepiej Arial. Rozmiar czcionki 16 pikseli, kolor navy. Tło strony, to grafika/tlo.jpg.
Tworząc szablon pamiętaj o zamieszczeniu opisu strony oraz słów kluczowych. Podaj swoje imię jako autora strony. Na jasnopomarańczowym pasku powinna być pokazana informacja o zalogowanym użytkowniku.
Nagłówek
W nagłówku umieścić obrazek uzyskany po przetworzeniu
"grafika/ksiazki.gif" oraz napis "Księgarnia internetowa BOOK-MAX". W
napisie zastosować efekt cienia, tekst wycentrowany. Obrazek oraz napis
powinny być odsyłaczami do strony głównej.
Nawigacja
Wykonaj lewe menu stosując listę. Po najechaniu wskaźnikiem myszki na
przycisk, tło staje się ciemniejsze, natomiast czcionka przyjmuje kolor
biały. Tak samo ma wyglądać przycisk strony aktualnie otwarta.
Stopka strony
Wysokość 40 pikseli, czcionka Arial koloru czarnego, pogrubiona,
rozmiar 12 pikseli, odstęp między znakami 5 pikseli, tekst wyśrodkowany
w poziomie i w pionie. W stopce znajduje się napis "Copyright
©
2010-2015 Księgarnia internetowa BOOK-MAX", przy czym drugi rok jest
zawsze aktualny i jest wyświetlany przy pomocy skryptu PHP. Napis jest
osyłaczem do strony głównej, po najechaniu wskaźnikiem
myszki
zmienia kolor na niebieski.
Należy wykonać następujące strony:
Strona główna - index.php
Powinna zawierać listę informujacą o zaletach księgarni, taką jak na obrazku index.. Należy za pomocą dowolnego programu, utworzyć prostą animację w której pokazywane są na przemian obrazki "czyta_a.gif" oraz "czyta_b.gif". Animacja powinna być osadzona pod listą.
Logowanie -
logowanie.php
Wykonaj wg. wzoru logowanie.
Obszar treści powinien być przewijany suwakami, w przypadku gdy treść
wykracza poza obszar.
Na tej stronie znajduje się także przycisk "Wyloguj"
Zakupy -
zakupy.php
Wykonaj wg. wzoru zakupy.
Jeżeli użytkownik nie jest zalogowany, to jest pokazywany tylko
komunikat "Musisz się najpierw zalogować", w przeciwnym przypadku
pokazany jest aktualny stan książek zapisanych w bazie "księgarnia"
(kolumna "Stan"). Aby dodać książki do koszyka, należy zaznaczyć
"Kupuję" oraz określić liczbę sztuk. Przycisk "Wrzuć do koszyka
zaznaczone książki" wkłada książki do koszyka i otwiera stronę "Koszyk"
która pokazuje zawartość koszyka.
Koszyk - koszyk.php
Wykonaj wg. wzoru koszyk.
Jeżeli użytkownik nie jest zalogowany, to jest pokazywany tylko
komunikat "Musisz się zalogować", w przeciwnym przypadku pokazany jest
aktualny stan koszyka. Przysk "Zamawiam" usuwa odpowiednie ilości
książek z bazy danych i wyświetla komunikat "Dziękujemy za zakupy w
naszym sklepie, Twoje zamówienie zostało przesłane do
realizacji"
Uwaga! Wszystie utworzone przez Ciebie pliki i foldery mają się znaleźć w folderze twoje imię_nazwisko. Skrypty PHP powinny się znajdować w folderze "php", natomiast obrazki w folderze "grafika".
Pliki potrzebne do wykonania zadania
Pliki graficzne oraz baza danych książek potrzene do wykonania zadania znajdują się pliku praktyczne.zipWskazówki i podpowiedzi do rozwiązania zadania
Wygląd strony - arkusz stylów
Obsługa bazy w zasadzie sprowadza się do jej importu na serwer i napisania skryptów dostępu do bazy z odpowiednimi, dość prostymi kwerendami. Najbardziej pracochłonną częścią zadania będzie opracowanie stron według zamieszczonych wzorów.
Podstawą dla wszystkich stron będzie odpowiedni arkusz stylów. Ponieważ w specyfikacji strony zawarty jest warunek uzależniający jej wymiary od szerokości okna przeglądarki w arkuszu CSS konieczne będzie zastosowanie tzw, zapytania mediów @media. (Więcej na ten temat przeczytasz w tym artykule). Najwygodniej będzie całą stronę umieścić w jednym wyświetlanym blokowo kontenerze (div). Szerokość kontenera będzie zdefiniowana za pomocą @media, jego wysokość należy określić na 100vh; - vh to wysokość viev portu, czyli mówiąc prościej wysokość okna przeglądarki.
#kontener
{
height:100vh;
margin:0 auto;
border:1px solid navy;
display:block;
}
@media screen and (max-width:1200px)
{
#kontener
{
width:1000px;
}
}
@media screen and (min-width:1200px)
{
#kontener
{
width:1200px;
}
}
Style pozostałych elementów strony można przeanalizować klikają na link style.css w źródle przykładowego rozwiązania.
Animowana grafika możliwa jest do wykonania np. w programie GIMP. Należy nałożyć na siebie dwa obrazki jako warstwy a następnie wybrać opcje eksportuj jako gif zaznaczając opcje zapisz jako animacje. W naszym przykładzie animowany gif jest już gotowy i dostępny w katalogu zadania.
Skrypty PHP
Skrypt wstawiający bieżący rok. Skryt należy umieścić w odpowiednim miejscu strony
<?php
$dzis=getdate();
$r=$dzis['year'];
echo $r;
?>
Skrypty funkcji rejestracji i logowania powinny być umieszczone w osobnym pliku (plikach). W skrypcie PHP obsługującym formularz logowania należy umieścić kod odwołania do tych plików w poniższym przykładzie skrypt korzysta z funkcji umieszczonych w katalogu php w 2 plikach logowanie.php i funkcje php. Poniższy kod należy umieścić w formularzu logowania
<?php
require_once('php/funkcje.php');
require_once('php/logowanie.php');
$komunikat=logowanie($logowanie_click);
if (!$logowanie_click)
$komunikat=zarejestruj($zarejestruj_click);
if (!$logowanie_click &&
!$zarejestruj_click) $komunikat=wyloguj();
echo ' Zalogowany
użytkownik: '.uzytkownik();
?>
Funkcje logowania i rejestracji które w przykładzie znajduje sie w pliku php/logowanie.php.
function
logowanie(&$logowanie_click)
{
$logowanie_click=false;
if
(!isset($_POST['zaloguj'])) return ''; else $logowanie_click=true;
if
(isset($_SESSION['login']))
{
if ($_SESSION['login']!='') return
'Jesteś zalogowany!';
}
$login=trim($_POST['login']);
$haslo=trim($_POST['haslo1']);
if
(empty($login) || empty($haslo)) return 'Brak loginu lub hasła!';
@
$baza=new mysqli('localhost','uzytkownik','haslo','nazwa_bazy');
if
(mysqli_connect_errno()) return 'Brak połączenia z MySQL!';
$haslo=sha1($haslo);
$zapytanie="select * from hasla where login='$login' and
haslo='$haslo'";
$wynik=$baza->query($zapytanie);
$ile_znaleziono=$wynik->num_rows;
if
($ile_znaleziono>0)
{
$_SESSION['login']=$login;
return 'Logowanie przebiegło pomyślnie';
}
else
return 'Podałeś błędny login lub hasło!';
}
function zarejestruj(&$zarejestruj_click)
{
$zarejestruj_click=false;
if
(!isset($_POST['zarejestruj'])) return ''; else $zarejestruj_click=true;
if
(isset($_SESSION['login']))
{
if ($_SESSION['login']!='') return
'Jesteś zalogowany! Najpierw się wyloguj';
}
$login=trim($_POST['login']);
$haslo1=trim($_POST['haslo1']);
$haslo2=trim($_POST['haslo2']);
if
(empty($login) || empty($haslo1) || empty($haslo1)) return 'Brak loginu
lub hasła!';
if
($haslo1!=$haslo2) return 'Podane hasła nie są jednakowe!';
@
$baza=new mysqli('localhost','użytkownik','hało','nazwa_bazy');
if
(mysqli_connect_errno()) return 'Brak połączenia z MySQL!';
$zapytanie="select * from hasla where login='$login'";
$wynik=$baza->query($zapytanie);
$ile_znaleziono=$wynik->num_rows;
if
($ile_znaleziono>0) return 'Podany login już istnieje! Podaj
inny login';
$haslo=sha1($haslo1);
$zapytanie="select * from hasla where haslo='$haslo'";
$wynik=$baza->query($zapytanie);
$ile_znaleziono=$wynik->num_rows;
if
($ile_znaleziono>0) return 'Podane hasło już istnieje! Podaj
inne hasło';
$zapytanie = "insert into hasla values (null,'".$login."',
'".$haslo."')";
$wynik =
$baza->query($zapytanie);
if
($wynik)
{
if ($baza->affected_rows==1);
$_SESSION['login']=$login;
return 'Zostałeś zarejestrowanym
użytkownikiem';
}
}
W pliku logowanie php należało by również umieścić funkcję wylogowania użytkownika (zakończenia sesji).
function
wyloguj()
{
if
(!isset($_POST['wyloguj'])) return '';
if
(!isset($_SESSION['login'])) return 'Nie jesteś zalogowany!';
if
($_SESSION['login']=='') return 'Nie jesteś zalogowany!';
$_SESSION['login']='';
return
'Zostałeś wylogowany';
}
W pliku funkcje php znajduje się funkcja uzytkownik() której zadaniem jest wpisanie nazwy zalogowanego użytkownika. Umieszczona została w innym pliku gdyż wykorzystujemy ja też na innych stronach nie tylko na stronie logowania.
function
uzytkownik()
{
if
(!isset($_SESSION['login'])) return 'brak';
if
($_SESSION['login']=='') return 'brak';
return
$_SESSION['login'];
}
W pliku fnkcje.php zamieszczona została również funkcja wczytująca książki z bazy danych
function
ksiazki(&$ksiazki)
{
$ksiazki=array();
@
$baza=new mysqli('localhost','użytkownik','haslo','nazwa_bazy');
if
(mysqli_connect_errno()) return false;
$baza->query('SET NAMES utf8');
$zapytanie = "select * from ksiazki";
$wynik =
$baza->query($zapytanie);
$ile_znaleziono = $wynik->num_rows;
if
($ile_znaleziono==0) return false;
for
($i=0;$i<$ile_znaleziono;$i++)
{
$wiersz=$wynik->fetch_assoc();
$ksiazki[$i]['tytul']=$wiersz['tytul'];
$ksiazki[$i]['autor']=$wiersz['autor'];
$ksiazki[$i]['isbn']=$wiersz['isbn'];
$ksiazki[$i]['cena']=$wiersz['cena'];
$ksiazki[$i]['stan']=$wiersz['stan'];
}
return
true;
}
?>
Wynikiem jej działania jest tablica zawierająca dane książek. Na stronie zakupowej powinniśmy dane te wyświetlić w formie tabeli dodając jeszcze dwie kolumy jedną chackboxem do zaznaczenia zakupu, drugą z polem do wpisywania iluści egzemplarzy. Najlepszym rozwiązaniem będzie pole input type="number". Unikniemy w ten sposób ręcznego wpisywania wartośći przez użytkownika, a co zatym idzie konieczności sprawdzania czy użytkownik wpisał właściwe znaki a nie np "1o" zamiast "10".
Funkcja tworząca taką tabelę przedstawiona jest poniżej. (W zasadzie też powinna być umieszczona w osobnym pliku w katalogu php)
<?php
require_once('rozne.php');
function pokaz_ksiazki($ksiazki)
{
echo
'<form action="koszyk.php" method="post">
<table>
<tr>
<th>Tytuł</th>
<th>Autor</th>
<th>ISBN</th>
<th>Cena
(zł)</th>
<th>Stan
(sztuk)</th>
<th>Kupuję</th>
<th>Sztuk</th>
</tr>';
if
(count($ksiazki)>0)
{
$i=-1;
foreach($ksiazki as $ksiazka)
{
$i++;
echo
'<tr>
<td>'
.$ksiazka['tytul'].'
</td>
<td>'
.$ksiazka['autor'].'
</td>
<td>'
.$ksiazka['isbn'].'
</td>
<td>'
.$ksiazka['cena'].'
</td>
<td>'
.$ksiazka['stan'].'
</td>
<td>
<input type="checkbox"
name="ksiazki[]"
value="'.$ksiazka['isbn'].'" />
</td>
<td>
<input type="number"
name="sztuk'.$i.'"
style="width:50px;" />
</td>
</tr>';
}
}
echo
'</table>
<input type="submit"
name="do_koszyka"
value="Wrzuć do koszyka zaznaczone książki"
style="margin-left:10px;" />
</form>';
}
?>
Oczywiście w formularzu zakupowym można pominąć chackboxy i przenosić do koszyka tylko te książki, dla których ilość egzemplarzy jest większa od zera.
Koszyk i zakupy
To obsługi koszyka potrzebne będą następujące funkcje. Funkcja przenosząca zaznaczone pozycje do koszyka, funkcja "zbierająca" książki które są w koszyku, funkcja realizacji zamówienia bardzo uproszczona bo poprzez kwerende zmienia tylko wartości w tabeli książki odejmując ilość zakupionych egzemplarzy, funkcja pokazująca koszyk oraz funkcja wyczyść koszyk, Prezentowane poniżej funkcje noszą nazwy zgodne z tym co robią, oczywiście funkcje powinniśmy umieścić w osobnym plku php.
require_once('rozne.php');
function do_koszyka(&$do_koszyka)
{
$do_koszyka=array();
if
(!isset($_POST['ksiazki'])) return false;
$isbns=$_POST['ksiazki']; if (count($isbns)==0) return false;
if
(!ksiazki($wszystkie_ksiazki)) return false;
$i=-1;
foreach($isbns as $isbn)
{
$j=-1;
foreach($wszystkie_ksiazki as $ksiazka)
{
$j++;
if
($ksiazka['isbn']==$isbn)
{
$i++;
$do_koszyka[$i]['tytul']=$ksiazka['tytul'];
$do_koszyka[$i]['autor']=$ksiazka['autor'];
$do_koszyka[$i]['isbn']=$ksiazka['isbn'];
$do_koszyka[$i]['cena']=$ksiazka['cena'];
$sztuk_klucz='sztuk'.$j;
$ilosc=$_POST["$sztuk_klucz"];
$do_koszyka[$i]['sztuk']=$ilosc;
break;
}
}
}
return
true;
}
function w_koszyku()
{
if
(!do_koszyka($do_koszyka)) return;
if
(!isset($_SESSION['koszyk']) || count($_SESSION['koszyk'])==0)
{
$_SESSION['koszyk']=$do_koszyka;
return;
}
foreach($do_koszyka as $ksiazka_do)
{
$jest_w_koszyku=false;
$i=-1;
foreach ($_SESSION['koszyk'] as
$ksiazka_w)
{
$i++;
if
($ksiazka_do['isbn']==$ksiazka_w['isbn'])
{
$_SESSION['koszyk'][$i]['sztuk']+=$ksiazka_do['sztuk'];
$jest_w_koszyku=true;
break;
}
}
if (!$jest_w_koszyku)
{
$i=count($_SESSION['koszyk']);
$_SESSION['koszyk'][$i]['tytul']=$ksiazka_do['tytul'];
$_SESSION['koszyk'][$i]['autor']=$ksiazka_do['autor'];
$_SESSION['koszyk'][$i]['isbn']=$ksiazka_do['isbn'];
$_SESSION['koszyk'][$i]['cena']=$ksiazka_do['cena'];
$_SESSION['koszyk'][$i]['sztuk']=$ksiazka_do['sztuk'];
}
}
}
function zamawiam()
{
if
(!isset($_POST['zamawiam'])) return;
if
(!isset($_SESSION['koszyk']) || count($_SESSION['koszyk'])==0) return;
$koszyk=$_SESSION['koszyk'];
@
$baza=new mysqli('localhost','uzytkownik','haslo','nazwa_bazy');
if
(mysqli_connect_errno())
{
echo
'Zamówienie nie zostało przyjęte, ponieważ nie udało się
połączyć z bazą danych!';
return;
}
foreach
($koszyk as $ksiazka)
{
$sztuk_zamowionych=$ksiazka['sztuk'];
$isbn=$ksiazka['isbn'];
$zapytanie="update ksiazki set stan=stan-'$sztuk_zamowionych' where
isbn='$isbn'";
$wynik=$baza->query($zapytanie);
if (!$wynik ||
$baza->affected_rows==0) echo 'Wystąpiły błędy podczas
realizacji
zamówienia!';
}
$_SESSION['koszyk']=array();
echo
'<p
style="margin-left:20px;">Dziękujemy za zakupy w naszym sklepie,
Twoje zamówienie zostało przesłane do
realizacji</p>';
}
function wyczysc_koszyk()
{
if
(!isset($_POST['wyczysc'])) return;
$_SESSION['koszyk']=array();
}
function pokaz_koszyk()
{
if
(!isset($_SESSION['koszyk']) || count($_SESSION['koszyk'])==0)
{
echo '<p
style="margin-left:20px;">Twój koszyk jest
pusty!</p>';
return;
}
$ksiazki=$_SESSION['koszyk'];
$suma=0;
echo
'<form action="" method="post">
<table>
<tr>
<th>Tytuł</th><th>Autor</th><th>ISBN</th><th>Cena
(zł)</th><th>Sztuk</th><th>Wartość</th>
</tr>';
$i=-1;
foreach($ksiazki as $ksiazka)
{
$i++;
$wartosc=$ksiazka['cena']*$ksiazka['sztuk'];
$suma+=$wartosc;
echo
'<tr>
<td>'
.$ksiazka['tytul'].'
</td>
<td>'
.$ksiazka['autor'].'
</td>
<td>'
.$ksiazka['isbn'].'
</td>
<td>'
.$ksiazka['cena'].'
</td>
<td>'
.$ksiazka['sztuk'].'
</td>
<td>'
.$wartosc.'
</td>
</tr>';
}
echo
'</table>
<p
style="margin-left:20px;">Wartość książek w koszyku - '.$suma.'
zł</p>
<input
type="submit" name="zamawiam" value="Zamawiam"
style="margin-left:10px;" />
<input
type="submit" name="wyczysc" value="Usuń towary z koszyka" />
</form>';
}
?>