Dokumentacja WebMaster ver 1.0

Transkrypt

1 1 Wstęp Dokumentacja WebMaster ver 1.0 Dokumentacja ta przeznaczona jest dla webmasterów, grafików, programistów. Przedstawia ona strukturę aplikacji SOTEeSKLEP, opisuje działanie oraz wyjaśnia m.in. jak zmienić wygląd graficzny sklepu czy dodać nowe skrypty itp. 2 Ogólny opis projektu Dokumentacja ta może stanowić wstęp do projektowania własnych rozszerzeń do programu SOTEeSKLEP. Jeśli chcesz stworzyć profesjonalny sklep internetowy z indywidualnymi funkcjami, SOTEeSKLEP może stanowić dla ciebie doskonałą bazę do stworzenia docelowej aplikacji. Dzięki SOTEeSKLEP będziesz mieć dostępne wszystkie mechanizmy niezbędne w sklepie internetowym: obsługę bazy produktów, zamówień, klientów, rabatów, promocji, nowości, korespondencji seryjnej i wiele innych. Dzięki temu możesz się skupić na indywidualnych funkcjach, nie tracąc czasu na elementy, które są już gotowe. Poza tym nie musisz się martwić o rozwój poszczególnych elementów programu, gdyż SOTEeSKLEP jest ciągle rozwijany i możesz wprowadzać na bieżąco nowości do swojego projektu. 3 Środowisko SOTEeSKLEP SOTEeSKLEP jest napisany w języku programowania PHP. Zalecane jest uruchamianie sklepu na platformach z systemem operacyjnym Linux lub FreeBSD. Dla wersji 4.0 wymagane jest PHP w wersji minimum 5. Więcej informacji o wymaganiach systemowych i programowych programu znajduje się w dokumentacji instalacji. 4 Wygląd sklepu Program SOTEeSKLEP jest tak zaprojektowany, żeby można było w prosty sposób zmienić wygląd praktycznie dowolnego elementu programu. W tym celu zostały stworzone tematy. Temat to zbiór plików tekstowych i graficznych odpowiedzialnych za wygląd stron WWW programu po stronie sklepu. Wygląd sklepu można zmienić wstawiając nowe pliki graficzne np. koszyk, przyciski itp, ale można również zmieniać pliki HTML, a także wstawiać własne skrypty PHP. Sprawny webmaster może sobie pozwolić na bardzo głęboko idące zmiany w programie, a co za tym idzie ma możliwość pełnego dostosowania programu do swoich potrzeb. 4.1 Schemat wywoływania plików w SOTEeSKLEP SOTEeSKLEP składa się z 2 głównych części: htdocs jest to część związana z funkcjonowaniem sklepu po stronie klienta sklepu: prezentacja ofert, koszyk, realizacja zamówienia itp. admin jest to część związana z obsługą sklepu przez sprzedawcę(ców) Jeśli mamy adresy np. dla sklepu i admin.example.com dla panelu administracyjnego to:

2 odwołuje się do pliku htdocs/index.php admin.example.com do admin/index.php Wszystkie skrypty bezpośrednio wywoływane w sklepie znajdują się w podkatalogu htdocs/go/ np. dla wywołania koszyka jest to htdcos/go/_basket/index.php ( itp. Znając w/w zasadę bardzo łatwo zorientować się który skrypt jest wywoływany w danym momencie i do jakich plików sie odwołuje. Poniższy schemat prezentuje, w jaki sposób są pobierane elementy z tematu w celu przedstawienia ich na stronie WWW oraz strukturę wywołania skryptu PHP w sklepie. 4.2 Tworzenie nowego tematu graficznego sklepu Należy zalogować się do panelu administracyjnego i wejść w zakładkę Edycja wyglądu. Rys.2 Edycja wyglądu

3 U dołu strony podajemy nazwę nowego, tematu który ma zostać utworzony. Każdy nowy temat ma w nazwie prefix user_ by w strukturze katalogów odróżniał się od oryginalnych tematów. Rys.3 Dodawanie nowego tematu Tak utworzony temat musimy ustawić w sklepie jako domyślny ( jeśli nie zrobiliśmy tego wcześniej przy dodawaniu tematu ). Rys.4 Ustawianie nowego tematu jako domyślnego w sklepie Uwaga Nie ma możliwości edytowania nowo utworzonego tematu z poziomu panela administracyjnego. 4.3 Pliki odpowiedzialne za wyświetlanie tematu Nowo utworzony temat jest widziany w systemie plików jako pusty katalog znajdujący się w lokalizacji: soteesklep4/htdocs/themes/base/user_nowy Mimo iż katalog jest pusty, na stronie sklepu wyświetla się temat base_theme. Na jego podstawie budowane są wszystkie inne tematy. Zgodnie z logiką przedstawioną na rysunku 1, wszystkie pliki niezbędne do wyświetlenia tematu, łącznie z obrazkami i plikami styli, są pobierane z tematu base_theme. Zatem jeżeli chcemy modyfikować wygląd lub funkcjonalność tematu należy skopiować zawartość katalogu base_theme do user_nowy. Nie trzeba kopiować wszystkich plików wystarczy skopiować tylko te pliki, które chcemy modyfikować, w razie potrzeby system pobierze brakujące pliki z katalogu base_theme. Przykład: Chcąc zmodyfikować tylko wygląd nagłówka sklepu, kopiuje plik head.html.php z katalogu base_theme do katalogu user_nowy. W skopiowanym pliku head.html.php dokonuje zmian. Na stronie sklepu pokaże się temat base_theme ze zmienionym nagłówkiem.

4 Rys.5 Struktura katalogów 4.4 Niezbędne katalogi i pliki po stronie htdocs Po dodaniu nowego tematu należy utworzyć podstawowe katalogi z, których nowo utworzony temat będzie korzystał. Poniżej znajduje się lista niezbędnych katalogów: soteesklep4/htdocs/themes/base/user_nowy/_cfg soteesklep4/htdocs/themes/base/user_nowy/_img soteesklep4/htdocs/themes/base/user_nowy/_style katalog _cfg Katalog _cfg musi zawierać plik: desktop.cfg.php plik zawiera konfigurację boxów danego tematu (szczegółowo system boxów opisano w dodatku do dokumentu webmastera dodatek A ) katalog _img Katalog _img zawiera wszystkie pliki graficzne, do których będzie odwoływał się plik konfiguracyjny desktop.cfg.php katalog _style Katalog _style zawiera plik style.css jest to plik styli z których będzie korzystał utworzony przez nas temat.

5 Dokumentacja webmastera dodatek A Opis pliku konfiguracyjnego tematu desktop.cfg.php Plik ten znajduje się w katalogu tematu _cfg/desktop.cfg.php. Plik ten zawiera tablicę wszystkich elementów graficznych na stronie. Przykładowy plik wygląda następująco <?php global $border; $border=array( 'box_top'=> array ( '1'=>"top.jpg", 'box_empty'=> array ( '1'=>"empty", //Sciezka do obrazka góra '2'=>"style:normal2", 'box_hex_brown'=> array ( '1'=>"#d2bda2", //Sciezka do obrazka góra 'box8_white'=> array ( '1'=>"lt_white.gif", //Sciezka do obrazka lewy górny róg '2'=>"tl_white.gif", //Sciezka do obrazka górna belka '3'=>"rt_white.gif", //Sciezka do obrazka prawy górny róg '4'=>"ll_white.gif", //Sciezka do obrazka lewa belka '5'=>"#ffffff", //Sciezka do obrazka wypełnienie lub kolor w hex np.(#ffffff) '6'=>"rl_white.gif", //Sciezka do obrazka prawa belka '7'=>"lb_white.gif", //Sciezka do obrazka lewy dolny róg '8'=>"bl_white.gif", //Sciezka do obrazka dolna belka '9'=>"rb_white.gif", //Sciezka do obrazka prawy dolny róg 'boxh3_button_top'=> array ( '1'=>"hl_button_top.gif", //Sciezka do obrazka lewo '2'=>"hm_button_top.gif", //Sciezka do obrazka srodek '3'=>"hr_button_top.gif", //Sciezka do obrazka prawo '4'=>"style:normal", 'boxv3_newsletter'=> array ( '1'=>"vt_button_small.gif", //Sciezka do obrazka góra '2'=>"vm_button_small.gif", //Sciezka do obrazka srodek

6 '3'=>"vb_button_small.gif", //Sciezka do obrazka dół );?> Plik ten ma postać tablicy wielowymiarowej (2 gdzie przechowywane są nazwy poszczególnych boxów (box_top - nazwa boxa): 'box_top'=> array ( '1'=>"top.jpg", oraz kolejno numerowane począwszy od 1, elementy boxa (top.jpg) 'box_top'=> array ( '1'=>"top.jpg", jako elementy boxa mogą występować następujące wartości: top.jpg nazwa pliki (może to być też ścieżka do pliku gdzie przechowywany jest obrazek domyślnie ścieżka wskazuje na katalog _img/ w wybranym temacie) #ffffff kolor w hexie oznaczający że dany element boxa jest kolorem empty oznacza że dany box jest pusty w środku nie zawiera ani koloru ani obrazka obszar ten może być jednak wykorzystany do przechowywania innych elementów w określonym stylu css. Jako ostatni element boxa może być zadeklarowana nazwa stylu, której definicja znajduje się w pliku css stylu tematu, domyślnie _style/style.css w wybranym temacie. np. Nazwa stylu musi być poprzedzona napisem style:nazwa_stylu np. 'boxh3_button_top'=> array ( '1'=>"hl_button_top.gif", '2'=>"hm_button_top.gif", '3'=>"hr_button_top.gif", '4'=>"style:normal", w przypadku gdy styl nie jest określony jest brany domyślny styl arkusza css dla danego bloku System rozpoznaje boxy po nazwach boxów w tablicy, w zależności od przedrostka zastosowanego przed nazwą boxa. Oznacza to, że nazwa składa się z dwóch członów przy czym pierwszy człon oznacza jaki to box a drugi jest nazwą właściwą np. box8_white, oznacza box ośmioelementowy którego nazwa to white. lista przedrostków które należy stosować box8 oznacza box ośmio elementowy np. 'box8_white'=> array (

7 '1'=>"lt_white.gif", '2'=>"tl_white.gif", '3'=>"rt_white.gif", '4'=>"ll_white.gif", '5'=>"#ffffff", '6'=>"rl_white.gif", '7'=>"lb_white.gif", '8'=>"bl_white.gif", '9'=>"rb_white.gif", box oznacz box jedno elementowy 'box_top'=> array ( '1'=>"top.jpg", boxh3 oznacza box trzy elementowy w układzie poziomym (horizontal) 'boxh3_button_top'=> array ( '1'=>"hl_button_top.gif", //Sciezka do obrazka lewo '2'=>"hm_button_top.gif", //Sciezka do obrazka srodek '3'=>"hr_button_top.gif", //Sciezka do obrazka prawo boxv3 oznacza box trzy elementowy w układzie pionowym (vertical) 'boxv3_newsletter'=> array ( '1'=>"vt_button_small.gif", //Sciezka do obrazka góra '2'=>"vm_button_small.gif", //Sciezka do obrazka srodek '3'=>"vb_button_small.gif", //Sciezka do obrazka dół Nazwy obrazków są dowolne proponuje jednak zachować pewną systematykę przedrostkową : Boxy ośmio elementowe box8_nazwa_boxa lt_white.gif left top tl_white.gif top line rt_white.gif right top ll_white.gif left line m_white.gif - middle rl_white.gif right line lb_white.gif left bottom bl_white.gif - bottom line rb_white.gif right bottom Boxy jedno elementowe box_nazwa_boxa Boxy trzy elementowe w układzie poziomym boxh3_nazwa_boxa

8 hl_button_top.gif horizontal left hm_button_top.gif horizontal middle hr_button_top.gif horizontal right Boxy trzy elementowe w układzie pionowym bovh3_nazwa_boxa vt_button_top.gif vertical top vm_button_top.gif vertical middle vb_button_top.gif vertical bottom Spis funkcji odpowiedzialnych za wyświetlanie boxów po stronie htdocs Funkcje te znajdują się w pliku theme.inc.php wybranego tematu desctop() DesctopOpen8() DesctopClose8() DesktopOpenBox() DesktopCloseBox() DesktopOpen3Vertical() DesktopClose3Vertical() DesktopOpen3Horizontal() DesktopClose3Horizontal() SetOpenPosition() SetClosePosition() desktopboximage() desktopboximagereturn() desktop() pseudo konstruktor pobiera dane konfiguracyjne boxów z danego tematu konfiguracja ta znajduje się w _cfg/desktop.cfg.php po wywołaniu tej funkcji można korzystać z innych funkcji boxów. DesktopOpen8($desctopData, $width='',$height='',$valign='',$align='', $style='', $left='', $top='', $position='relative') funkcja odpowiedzialna za otwarcie boxa składającego się z 8 elementów $desctopdata tablica zawierająca ścieżki do plików obrazków lub kolorów w hex. Tablica wszystkich tych elementów znajduje się w pliku konfiguracyjnym tematu _cfg/desktop.cfg.php. przykład tablicy 'box8_white'=> array ( '1'=>"lt_white.gif", //Ścieżka do obrazka lewy górny róg '2'=>"tl_white.gif", //Ścieżka do obrazka górna belka '3'=>"rt_white.gif", //Ścieżka do obrazka prawy górny róg

9 '4'=>"ll_white.gif", '5'=>"#ffffff", '6'=>"rl_white.gif", '7'=>"lb_white.gif", '8'=>"bl_white.gif", '9'=>"rb_white.gif", //Ścieżka do obrazka lewa belka //Ścieżka do obrazka wypełnienie lub kolor w hex np.(#ffffff) //Ścieżka do obrazka prawa belka //Ścieżka do obrazka lewy dolny róg //Ścieżka do obrazka dolna belka //Ścieżka do obrazka prawy dolny róg $width - szerokość boxa $height wysokość boxa $valign rozmieszczenie elementów w środku boxa $align - rozmieszczenie elementów w środku boxa $style nazwa classy stylu przypisanego do boxa może być ona umieszczona jako ostatni element tablicy w pliku konfiguracyjnym określenie stylu może być zarówno lokalne i jak i globalne zdefiniowane w głównym pliku styli css. 'box8_white'=> array ( '1'=>"lt_white.gif", '2'=>"tl_white.gif", '3'=>"rt_white.gif", '4'=>"ll_white.gif", '5'=>"#ffffff", '6'=>"rl_white.gif", '7'=>"lb_white.gif", '8'=>"bl_white.gif", '9'=>"rb_white.gif", '10'=>''style:normal'', // nazwa stylu $left pozycja boxa od lewej strony $top pozycja boxa od góry $position określanie pozycji relative absolute itd.. DesktopClose8($desctopData) funkcja odpowiedzialna za zamknięcie boxa składającego się z 8 elementów $desctopdata tablica zawierająca ścieżki do plików obrazków lub kolorów w hex. Tablica wszystkich tych elementów znajduje się w pliku konfiguracyjnym tematu _cfg/desktop.cfg.php. przykład tablicy 'box8_white'=> array ( '1'=>"lt_white.gif", //Ścieżka do obrazka lewy górny róg '2'=>"tl_white.gif", //Ścieżka do obrazka górna belka

10 '3'=>"rt_white.gif", '4'=>"ll_white.gif", '5'=>"#ffffff", '6'=>"rl_white.gif", '7'=>"lb_white.gif", '8'=>"bl_white.gif", '9'=>"rb_white.gif", //Ścieżka do obrazka prawy górny róg //Ścieżka do obrazka lewa belka //Ścieżka do obrazka wypełnienie lub kolor w hex np.(#ffffff) //Ścieżka do obrazka prawa belka //Ścieżka do obrazka lewy dolny róg //Ścieżka do obrazka dolna belka //Ścieżka do obrazka prawy dolny róg DesktopOpenBox($desctopData, $width='',$height='',$valign='left',$align='top', $style='', $left='', $top='', $position='relative') funkcja odpowiedzialna za otwarcie pojedynczego boxa składającego się z jednego elementu $desctopdata tablica zawierająca ścieżki do pliku obrazka lub koloru w hex. Tablica wszystkich tych elementów znajduje się w pliku konfiguracyjnym tematu _cfg/desktop.cfg.php. przykład tablicy 'box_empty'=> array ( '1'=>"empty", //Ścieżka do obrazka wypełnienie lub kolor w hex np.(#ffffff) empty - pusty '2'=>"style:normal2", // nazwa stylu reszta parametrów analogicznie do funkcji DesctopOpen8 DesktopCloseBox() funkcja odpowiedzialna za zamknięcie pojedynczego boxa składającego się z jednego elementu DesktopOpen3Vertical($desctopData, $width='',$height='',$valign='',$align='', $style='', $left='', $top='', $position='relative') funkcja odpowiedzialna za otwarcie boxa składającego się z 3 elementów w układzie pionowym $desctopdata tablica zawierająca ścieżki do plików obrazków lub kolorów w hex. Tablica wszystkich tych elementów znajduje się w pliku konfiguracyjnym tematu _cfg/desktop.cfg.php. przykład tablicy 'boxv3_button_top'=> array ( '1'=>"vl_button_top.gif", //Sciezka do obrazka gora '2'=>"vm_button_top.gif", //Sciezka do obrazka srodek '3'=>"vb_button_top.gif", //Sciezka do obrazka dół '4'=>"style:normal", reszta parametrów analogicznie do funkcji DesctopOpen8 DesktopClose3Vertical($desctopData)

11 funkcja odpowiedzialna za zamknięcie boxa składającego się z 3 elementów w układzie pionowym $desctopdata tablica zawierająca ścieżki do plików obrazków lub kolorów w hex. Tablica wszystkich tych elementów znajduje się w pliku konfiguracyjnym tematu _cfg/desktop.cfg.php. DesktopOpen3Horizontal($desctopData, $width='',$height='',$valign='',$align='', $style='', $left='', $top='', $position='relative') funkcja odpowiedzialna za otwarcie boxa składającego się z 3 elementów w układzie poziomym $desctopdata tablica zawierająca ścieżki do plików obrazków lub kolorów w hex. Tablica wszystkich tych elementów znajduje się w pliku konfiguracyjnym tematu _cfg/desktop.cfg.php. przykład tablicy 'boxh3_button_top'=> array ( '1'=>"hl_button_top.gif", //Sciezka do obrazka lewo '2'=>"hm_button_top.gif", //Sciezka do obrazka srodek '3'=>"hr_button_top.gif", //Sciezka do obrazka prawo '4'=>"style:normal", reszta parametrów analogicznie do funkcji DesctopOpen8 DesktopClose3Horizontal($desctopData) funkcja odpowiedzialna za zamknięcie boxa składającego się z 3 elementów w układzie poziomym $desctopdata tablica zawierająca ścieżki do plików obrazków lub kolorów w hex. Tablica wszystkich tych elementów znajduje się w pliku konfiguracyjnym tematu _cfg/desktop.cfg.php. SetOpenPosition($left='', $top='', $position='relative') funkcja odpowiedzialna za rozmieszczenie zamkniętego wewnątrz obiektu na ekranie (otwiera blok) $left pozycja boxa od lewej strony $top pozycja boxa od góry $position określanie pozycji relative absolute itd.. SetClosePosition() funkcja odpowiedzialna za rozmieszczenie zamkniętego wewnątrz obiektu na ekranie (zamyka blok)

12 desktopboximage($name) funkcja odpowiada za wyświetlenie pojedynczego obrazka $name nazwa boxa zawierającego pojedynczy obrazek desktopboximagereturn($name) funkcja odpowiada za wyświetlenie pojedynczego obrazka (funkcja ta nie wyświetla tylko zwraca kod) $name nazwa boxa zawierającego pojedynczy obrazek