Technologie Internetowe Raport z wykonanego projektu Temat: Internetowy sklep elektroniczny AiRIII gr. 2TI sekcja 1 Autorzy: Tomasz Bizon Józef Wawrzyczek 2
1. Wstęp Celem projektu było stworzenie sklepu internetowego, który w przyszłości mógłby umożliwić nam założenie własnej firmy lub administrację podobną aplikacją w pracy. Wzorowaliśmy się na funkcjonujących w rzeczywistości witrynach tak, aby nasz sklep odpowiadał na rzeczywiste potrzeby klientów. 2. Opis funkcjonalności a. funkcje wykonanego projektu Nasza aplikacja posiada następujące funkcje: rejestracja i logowanie użytkowników; możliwość zmiany hasła przez użytkownika po zalogowaniu; możliwość odzyskania hasła (nowe hasło na e-mail); Możliwość przeglądania produktów w kategorii; Możliwość wyświetlenia karty produktu (podstrona prezentująca dany produkt); Dodawanie produktów do koszyka (z możliwością podania liczby sztuk); Możliwość edycji koszyka (usuwanie produktów, zmiana ilości); Składanie zamówienia; Powiadomienie e-mail o przyjęciu zamówienia (dla klienta); Powiadomienie o złożeniu zamówienia (dla administratora); Zapisywanie zamówień do bazy danych; kontakt z administratorem; dodawanie/usuwanie/edycja produktów i kategorii; automatyczne generowanie miniaturek przy dodawaniu zdjęć; zabezpieczenie przed usunięciem kategorii, w której są produkty; przeglądanie listy zamówień; hasła muszą być zapisywane w postaci niejawnej (algorytm hashowania - MD5); poprawna walidacja wszystkich danych od użytkowników; zabezpieczenie przed atakami SQL-injection; Wyszukiwarka produktów z poprawianiem literówek; b. obsługa programu rejestracja Aby móc kupować w naszym sklepie należy się najpierw zarejestrować. Podajemy dane, które będą potrzebne do wysłania przesyłki. Formularz rejestracyjny przedstawia rys.1. 3
Rys.1. Formularz rejestracyjny. logowanie Gdy już jesteśmy zarejestrowani dostęp do koszyka umożliwia nam logowanie. Do logowania używa się adresu e-mail i hasła. Formularz logowania przedstawia rysunek 2. Rys.2. Formularz logowania i wyszukiwanie produktów. 4
wyszukiwanie produktów W celu znalezienia potrzebnego produktu możemy użyć rozwijanej listy produktów lub formularza wyszukiwania z poprawianiem błędnie wpisanych nazw. Omówione elementy zostały zaprezentowane na rys. 2. dodawanie do koszyka i jego przeglądanie Gdy otworzymy kartę produktu możemy dodać go do koszyka podając ilość zamawianych sztuk rys.3. Rys.3. Karta produktu z możliwością dodawania do koszyka. Następnie możemy przeglądać, usuwać i modyfikować ilość produktów w koszyku klikając odnośnik Zobacz zawartość koszyka po prawej stronie ekranu. Podstronę koszyka widać na rys. 4. 5
Rys.4. Podstrona koszyka. zamawianie Po dodaniu wszystkich szukanych produktów do koszyka możemy złożyć zamówienie klikając odnośnik Zamów na podstronie koszyka. Pojawia się wtedy Formularz zamówienia, w którym podajemy rodzaj przesyłki, formę płatności i ewentualne uwagi. Następnie pojawia się zestawienie zamawianych produktów i danych kupującego, gdzie można ostatecznie potwierdzić chęć zamówienia produktów rys.5. Rys.5. Zbiorcze zestawienie zamawianych produktów i danych kupującego. 6
kontakt Jeśli mamy jakieś pytania możemy je wysłać do administratora sklepu za pomocą formularza kontaktowego rys.6. Rys.6. Formularz kontaktowy. odzyskiwanie i zmiana hasła Na wypadek zgubienia hasła użytkownika została stworzona opcja odzyskiwania hasła. W formularzy należy podać adres e-mail użytkownika, na który zostanie wysłane nowe hasło, które następnie można zmienić klikając w odnośnik Zmień hasło. dodawanie produktu Gdy jesteśmy zalogowani jako administrator możemy dodawać, usuwać i edytować produkty oraz zmieniać nazwy kategorii rys.7. 7
Rys.7. Podstrona modyfikacji produktu. przeglądanie listy zamówień W panelu administratora możliwe jest też przeglądanie listy złożonych przez użytkowników zamówień. 3. Opis techniczny a. wykorzystane technologie Strona graficzna naszej witryny jest zbudowana w oparciu o język HTML, natomiast głównym językiem skryptowym, którego używaliśmy jest język PHP. Służył nam on do obsługi formularzy, bazy danych i wszystkich operacji na danych. W celu stworzenia rozwijanego menu z kategoriami produktów oraz do stworzenia powiększanego obrazka po kliknięciu miniatury produktu skorzystaliśmy ze skryptu napisanego w języku JavaScript. Skorzystaliśmy z tego narzędzia, gdyż skrypty napisane w JavaScript dają możliwość zapewnienia interaktywności przez reagowanie na zdarzenia w interfejsie użytkownika. W liście rozwijanej pomocne okazały się także style CSS. Jako system zarządzania bazą danych wykorzystano MySQL, głównie z racji tego, że jest wolnodostępny i popularny. 8
b. napotkane problemy i ich rozwiązanie SQL-injection W celu zabezpieczenia naszej bazy danych przed niechcianymi ingerencjami poprzez formularze wykorzystano funkcję addslashes i stripslashes na danych wprowadzanych przez użytkownika. Funkcja addslashes dodaje znaki slash przed znakami specjalnymi w ciągu tak, aby mógł być bezpiecznie zapisany do bazy danych. Przykładowy kod wykorzystujący omawiane funkcje podany został na listingu 1. $imie=addslashes($imie); $nazwisko=addslashes($nazwisko); $adres=addslashes($adres); $miasto=addslashes($miasto); $tel=addslashes($tel); $haslo=md5($haslo); Listing 1. Kod w PHP odpowiedzialny za ochronę przed atakami SQLinjection. walidacja adresu e-mail i kodu pocztowego W celu zapewnienia poprawności wprowadzanego adresu e-mail i kodu pocztowego skorzystaliśmy z funkcji eregi, która pozwala na określenie wyrażenia regularnego i porównanie z nim wartości wprowadzanej z danego pola formularza. Przykładowe zastosowanie pokazane zostało na listingu 2. if (eregi("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$", $email)){ if (eregi("^[0-9]{2}-[0-9]{3}$", $kodp)){ //wnętrze instrukcji }else echo 'Błędny kod pocztowy '.'<a href=rejestracja.php>powrót</a>'; }else echo 'Podany adres email jest nieprawidłowy '.'<a href=rejestracja.php>powrót</a>'; Listing 2. Kod odpowiedzialny za walidację adresu e-mail i kody pocztowego. bezpieczeństwo haseł Mając na uwadze bezpieczeństwo przechowywanych w bazie danych haseł użyto do ich haszowania funkcji md5. Z podanego ciągu znaków tworzy ona szyfr w postaci 32. znakowej heksadecymalnej liczby. Kod odpowiedzialny za szyfrowanie haseł został podany na listingu 3. 9
$haslob=mysql_result($result,$i,"haslo"); echo $emailb." ".$haslob; if($emailb==$emaill&&$haslob==md5($haslol)) Listing 3. Kod odpowiedzialny za sprawdzenie poprawności wprowadzonego hasła korzystający z szyfrowania algorytmem md5. wyszukiwanie produktów z poprawianiem literówek Wyszukiwanie produktów z błędnie wprowadzoną nazwą rozwiązaliśmy przy użyciu funkcji levenshtein, która zwraca odległość edycyjną dwóch ciągów znakowych. Przeszukujemy bazę danych i sprawdzamy, dla którego produktu omawiana funkcja zwróciła najmniejszą wartość. Ten produkt zwracany jest jako wynik wyszukiwania. Fragment kodu skryptu realizujący wyszukiwanie produktów został pokazany na listingu 4. if($_get['szukaj']==1){ $sznazwa=$_post['sznazwa']; $query="select * FROM produkty"; $nazwy=mysql_query($query); $num=mysql_numrows($nazwy); $maxpod=100; $i=0; while ($i < $num) { $podobienstwo=levenshtein(mysql_result($nazwy,$i,"nazwa"),$sznazwa); if($podobienstwo<$maxpod){ $maxpod=$podobienstwo; $numpro= $i; } if($podobienstwo==0) break; $i++; } $idprod=mysql_result($nazwy,$numpro,"id_prod"); $nazwa=stripslashes(mysql_result($nazwy,$numpro,"nazwa")); $cbrutto=mysql_result($nazwy,$numpro,"cena_brutto"); echo '<a href=index.php?idprod='.$idprod.'><img src=obrazki/'.$idprod.'.jpg width="50" height="50" alt='.$nazwa.'><br> Nazwa: '.$nazwa.'<br> Cena: '.$cbrutto.' zł</a><br>'; } Listing 4. Fragment kodu odpowiedzialny za wyszukiwanie produktów, w których może być błędnie podana nazwa. 10