Technologie Internetowe Raport z wykonanego projektu Temat: Internetowy sklep elektroniczny

Wielkość: px

Rozpocząć pokaz od strony:

Download "Technologie Internetowe Raport z wykonanego projektu Temat: Internetowy sklep elektroniczny"

Witold Świderski
8 lat temu
Przeglądów:

1 Technologie Internetowe Raport z wykonanego projektu Temat: Internetowy sklep elektroniczny AiRIII gr. 2TI sekcja 1 Autorzy: Tomasz Bizon Józef Wawrzyczek 2

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 ); 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 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

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

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 i hasła. Formularz logowania przedstawia rysunek 2. Rys.2. Formularz logowania i wyszukiwanie produktów. 4

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

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.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.

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.

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 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

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

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

Służył nam on do obsługi formularzy, bazy danych i wszystkich operacji na danych.

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 i kodu pocztowego W celu zapewnienia poprawności wprowadzanego adresu 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})$", $ )){ 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 jest nieprawidłowy '.'<a href=rejestracja.php>powrót</a>'; Listing 2. Kod odpowiedzialny za walidację adresu 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

Przykładowy kod wykorzystujący omawiane funkcje podany został na listingu 1.

9 $haslob=mysql_result($result,$i,"haslo"); echo $ b." ".$haslob; if($ b==$ l&&$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

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

Podobne dokumenty

Sklep Internetowy (HTML/xHTML, CSS, JavaScript, PHP, MySQL)

Zaawansowany projekt programowania obiektowego Sklep Internetowy (HTML/xHTML, CSS, JavaScript, PHP, MySQL) Szkoły BTE opracował: mgr inż. Radosław Wylon PROGRAMOWANIE OBIEKTOWE Projekt sklepu internetowego