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 '.'Powrót'; }else echo 'Podany adres email jest nieprawidłowy '.'Powrót';

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