008 – Powrót

Po dłuższej przerwie spowodowanej w sumie niczym konkretnym wracam do projektu który posunął się zdecydowanie do przodu. Dwa schematy kolorów są ostylowane i zoptymalizowane pod względem kolejnych zmian. Wszystkie klasy które mają mieć ten sam kolor zostały skondensowane do jednej reguły w CSS’ie. Pliki te oczywiście dostępne są na GitHubie. Na podglądzie strony można już zobaczyć prawie gotową stronę główną:

  • Wpisy nie są już sztywnym html-em a pobierane są z bazy danych
  • Wielopoziomowe menu działa tak jak powinno
  • Dopracowana kolorystyka

Pozostaję mi do odpowiedniego oskryptowania i ostylowania pasek widgetów – wtedy strona główna będzie gotowa. Następnie przygotuję widok dla poszczególnych podstron oraz pojedynczych wpisów.

Na koniec dokończenie ustawień w panelu administracyjnym odpowiedzialnych za opcje wyświetlania nagłówka strony oraz wyboru kolorystyki strony.

Kolejny poradnik do PHP mam nadzieję pojawi się również jeszcze w tym tygodniu.

Formularze

Formularze

1.    Wstęp

Pisanie w PHP wiąże się przede wszystkim z przetwarzaniem danych i operacjach na bazie danych. Tym razem pod lupę weźmiemy formularze. Są one podstawową rzeczą za pomocą których użytkownik wprowadza dane do naszego systemu. Na razie ograniczymy się do odczytania danych i nie będziemy wprowadzać ich do bazy danych.

2.    Formularz

Prosty formularz tworzymy w HTML’u za pomocą znacznika <form>. Musimy w nim określić dwa parametry – plik, do którego dane wprowadzone przez użytkownika mają zostać przesłane za pomocą parametru action=””, oraz metodę przesłania danych za pomocą parametru method=””.
W parametrze action podajemy ścieżkę do pliku np. /dane.php natomiast w parametrze method używamy wartość get lub post.

<form action="dane.php" method="get">
    <input name="war1" type="text" placeholder="Wartość 1" /> 
    <input name="war2" type="text" placeholder="Wartość 2" /> 
    <input type="submit" value="wyślij" />
</form>

Jeżeli przesyłamy nasze wartości za pomocą metody get nasze dane zostaną przesłane w sposób jawny. Przycisk „wyślij” przekieruje nas do pliku dane.php, ale adres w pasku naszej przeglądarki będzie wyglądał np. tak:

http://localhost/test/dane.php?war1=7&war2=andrzej

Po ścieżce dostępu do pliku mamy pytajnik ? a po nim wszystkie wartości przekazane w formularzu, czyli war1 oraz war2. Nazwy te są identyczne, jak te które zadeklarowaliśmy w formularzu jako parametr name dla każdego znacznika input.

Jeżeli powyższy formularz prześlemy metodą post, w pasku adresu, nie wyświetlą nam się wartości przekazywane. Przekazane one zostaną niejawnie.
W naszym pliku dane.php aby uzyskać dostęp, do wartości podanych przez użytkownika, możemy to zrobić odczytując dane z tablicy $_GET lub $_POST – zależnie od sposobu przesłania danych.

$war1 = $_GET['war1']; //Przypisanie do zmiennej $war1 wartości war1 przekazanej za pomocą metody GET
 
$war1 = $_POST['war1']; //Przypisanie do zmiennej $war1 wartości war1 przekazanej za pomocą metody POST

Za pomocą metody GET możemy również tworzyć własne odnośniki, za pomocą których przekażemy konkretne parametry bez używania formularzy.

<a href="dane.php?imie=Jan&amp;nazwisko=Kowalski">Jan Kowalski</a>

Za pomocą takiego linku, w pliku dane.php, możemy odwołać się do zmiennych $_GET[‘imie’] oraz $_GET[‘nazwisko’] i pozyskać dane, wpisane na sztywno przez twórcę strony.

007 – Kolorów ciąg dalszy

Nie przypuszczałem, że ten temat będzie dla mnie aż taką zmorą. Projekt zaczyna coraz bardziej wyglądać jak coś, czym może nie do końca można się chwalić, ale na pewno pokazać i mówić „to dopiero wersja pre-alpha”. Tutaj można podejrzeć efekty mojej pracy i muszę przyznać że jestem z siebie dumny. Mimo iż nie jest to cudo, które umieściłbym na pierwszej stronie swojego portfolio (choć w chwili obecnej musiałbym to niestety zrobić :/), to widzę przede wszystkim moje postępy jeżeli chodzi o frontend (w porównaniu do tego, co było jeszcze kilka miesięcy temu) oraz organizację pracy. O ile zdarza mi się nie dodać postu w terminie który ustaliłem (środa i sobota o 18) o tyle zgodnie z regulaminem konkursu, dwa posty tygodniowo się tu pojawiają.

Wracając do tematu – W dobraniu kolejnych (bo już postanowiłem, że nie będę ograniczać się tylko do jednego) schematów kolorów pomoże mi paletton.com. A implementacja jest bajecznie prosta – kilka plików *.css – w jednym wszystkie wymiary, animacje itp. natomiast wszystkie kolory w wielu osobnych. Wybór kolorystyki pozostawię użytkownikowi w panelu administracyjnym.

Kod oczywiście do podejrzenia na moim GitHubie

Początek kodu, zmienne, tablice

1.    Wstęp

Zanim zaczniesz czytać dalszą część poradnika musisz posiadać podstawową wiedzę na temat programowania – zmienne, pętle czy funkcje – te pojęcia powinny być Ci znane. Jeżeli udało Ci się przebrnąć już kiedyś przez Pascala czy podstawy C/C++, to mam nadzieję, że bez problemu odnajdziesz się w kolejnych rozdziałach mojego poradnika do PHP. Bardzo często będę używał porównań właśnie do języka C/C++ w celu zobrazowania różnic.

2.    Początek kodu

W C++ po prostu piszemy kod. W pliku *.cpp załączamy interesujące nas biblioteki, tworzymy funkcje, inicjujemy zmienne itd. Wszystkie linie wpisane przez nas (oczywiście oprócz tych, które oznaczyliśmy jako komentarze) zostaną potraktowane przez kompilator jako kod, który musi odpowiednio przetłumaczyć na język maszynowy. Ponieważ często (choć nie jest to zasadą) język PHP przeplata się np. z HTML-em, nasz serwer, a w zasadzie interpreter PHP musi wiedzieć, który kod ma być wykonywany po stronie serwera, a który ma zwrócić do klienta. Aby poinformować nasz interpreter w którym miejscu ma zacząć „tłumaczyć”, umieszczamy nasz kod w znacznikach:

<!--?php //nasz kod php ?-->

Przy takim oznaczeniu interpreter wie, że ten kod ma zostać wykonany po stronie serwera i nie może wyświetlić go użytkownikowi.
Jeżeli nasz kod PHP przeplata się z HTML-em:

 

znacznik <?php musi być bezwzględnie zamknięty. W innym przypadku nasz serwer będzie próbował wykonać kod, który jest kodem HTML jako skrypt PHP co będzie powodować błędy. Wyjątkowym przypadkiem jest plik, który w całości zawiera kod PHP. W takim przypadku nie powinniśmy go zamykać.

3.    Zmienne

Już na samym początku widzimy zasadniczą różnicę między C/C++ a PHP. W tych pierwszych musimy najpierw zadeklarować zmienną oraz określić jej typ np.

int a = 10;      //zmienna typu całkowitego
char b = ‘b’;    //zmienna typu znakowego
float c = 10.23; //zmienna typu zmiennoprzecinkowego

W przypadku PHP wygląda to inaczej. Aby interpreter PHP rozpoznał, że chcemy użyć zmiennej, a nie np. funkcji, przed jej nazwą umieszczamy znak $.  Zmiennych nie musimy deklarować przed ich użyciem. Możemy je tworzyć „w locie”. Jeżeli chcemy wynik jakiejś funkcji przypisać do zmiennej wpisujemy:

$zmienna = funkcja();

Deklaracja tych samych zmiennych, których przykład umieściłem powyżej, w języku PHP wygląda tak:

$a = 10;    //zmienna typu całkowitego
$b = 'b';   //zmienna typu znakowego
$c = 10.23; //zmienna typu zmiennoprzecinkowego

Istnieje jeszcze jedna właściwość zmiennych w PHP o której warto wspomnieć. Na potrzeby jakiejś funkcji potrzebujemy stworzyć zmienną chwilową $tmp. Typ zmiennej określamy dopiero w momencie przypisania do niej wartości – nie musi on być jednak taki sam w całym naszym programie. Do zmiennej $tmp możemy najpierw przypisać liczbę całkowitą, później zmiennoprzecinkową, a kilka linii dalej ciąg znaków czy nawet tablicę.

4.    Tablice

A jeżeli już przy tablicach jesteśmy to też mają one bardzo ciekawe własności. W PHP używamy tablic asocjacyjnych – nie musimy ich indeksować liczbami całkowitymi. Typową, jednowymiarową tablicą asocjacyjną jest np. kwestionariusz osobowy:

Imię Jan
Nazwisko Nowak
PESEL 80123112345

Taką tablicę możemy stworzyć w następujący sposób:

$osoba = array('imię' => 'Jan',
		'nazwisko' => 'Nowak',
		'PESEL' => 80123112345);

W przypadku języka C++, mogliśmy w bardzo prosty sposób poruszać się po zwykłej, indeksowanej tablicy np. za pomocą pętli for. Inicjalizowaliśmy licznik który wskazywał nam na konkretny element tablicy i w tej właśnie pętli wykonywaliśmy interesujące nas operacje np.

for (int i = 0; i < 10; i++) {
	cout << tablica[i] << endl;
}

W przypadku PHP, jeżeli tablica nie jest indeksowana w ten sposób, musimy wykonać to inaczej. Tutaj przydatną funkcją, jest funkcja foreach.

foreach ($osoba as $wartosc) {
	echo $wartosc . '
';
}

lub

foreach ($osoba as $klucz => $wartosc) {
	echo $klucz . ' - ' . $wartosc . '
';
}

Na przykładzie tablicy $osoba, w której umieściliśmy dane Nowaka, pierwszy foreach wypisze na ekranie wszystkie wartości wpisane do tablicy oraz zakończy znakiem przerwania linii:

Jan
Nowak
80123112345

Dzięki zastosowaniu konstrukcji, w której używamy zmiennej $klucz, możemy również dostać się do nazw kolejnych pól w tablicy. Efektem wywołania drugiego foreach’a będzie:

imię - Jan
nazwisko - Nowak
PESEL - 80123112345

5.    Podsumowanie

Po przeczytaniu tego poradnika powinieneś potrafić zagnieżdżać kod PHP pomiędzy znacznikami HTML, stworzyć szkielet pliku w całości napisanego w PHP, używać zmiennych oraz zmiennych tablicowych, a także poruszać się po tablicach za pomocą pętli foreach.

006 – Kontenery

Na stronie http://www.kulinsky.pl/simplestrap/ jest dostępna kolejna wersja szablonu. Wszystkie najważniejsze kontenery są już widoczne: nagłówek, menu nawigacyjne, pasek widgetów, stopka, oraz najważniejsze – treść. Są to na razie zwykłe divy, odróżniające się od siebie kolorem tła. Kolejnym etapem będzie stylowanie – przede wszystkim dobranie kolorystyki. Jak już pisałem w kilku poprzednich postach – mam problem z wyglądem – nie tylko swoim ale również z wyglądem strony 😀

Zdecydowałem się ustalić paletę 7 barw wykorzystywanych na stronie:

  • tło nagłówka
  • hiperłącza
  • tło napisu w nagłówku
  • tło strony
  • elementy menu
  • czcionka
  • tło posta/widgetów/stopki

Zgodnie z tą kolejnością przygotowałem 4 palety barw:

        

Na dniach ostyluję główne kontenery strony w oparciu o te palety i poddam pod głosowanie gotowy już wygląd. Wszelkie pomysły na inne zestawy kolorów, lub pomysły na poprawki tych wyżej przyjmę z otwartymi ramionami 🙂

Biorę się do roboty 😀

 

WAMP – Instalacja i konfiguracja

1.    Co to jest Wamp?

WAMP to skrót od Windows Apache MySQL PHP – odpowiednik Linuxowego LAMP-a. Z poziomu jednego instalatora możemy zainstalować kilka usług na naszym komputerze. Najważniejsze usługi które uruchomimy po instalacji to:

  • Apache – serwer WWW. O ile pliki *.html oraz *.js o które te pierwsze są rozszerzane możemy otworzyć po prostu za pomocą przeglądarki o tyle skrypty PHP są wykonywane po stronie serwera i dopóki takowego nie ma, nie będą mogły po prostu zadziałać.
  • MySQL – serwer bazodanowy. Tworzenie stron w oparciu o PHP bez żadnego serwera bazodanowego praktycznie nie ma sensu. Za pomocą PHP chcemy, aby strona była bardziej żywa – nie była statyczną stroną na której zawsze wyświetla się to samo. Chcielibyśmy dodać post na naszego bloga czy dodać użytkowników do strony – wszystko to zapiszemy w naszej bazie danych.
  • PHP – to po prostu moduł do naszego serwera Apache w którym zaszyty jest interpreter PHP, dzięki niemu skrypty napisane przez nas dają widoczny efekt.

Celowo poradnik jest pisany pod Windowsa, ze względu na to, że moje próby obsługi LAMP-a zawsze kończyły się zmarnowanym czasem na naprawianie błędów z którymi nigdy nie spotykałem się na Windowsie.

2.    Instalacja Wamp-a

Najprostszym sposobem jest oczywiście wejście na stronę http://www.wampserver.com/en/ i pobranie odpowiadającej nam wersji (x64 lub x86). Sama instalacja przebiega standardowo, po wyklikaniu wszystkich „nextów” powinniśmy móc uruchomić nasz serwer. W zasobniku systemowym powinna pojawić nam się ikonka wamp - zielona ikona . Jeżeli będzie ona pomarańczowa (wamp - pomarańczowa ikona) to prawdopodobnie mamy włączonego Skypa który korzysta z tych samych portów co WAMP. Wystarczy wyłączyć Skypa, zrestartować usługi WAMP’a i gotowe.

3.    Dodanie pierwszej strony

Pracować będziemy na Aliasach – za ich pomocą mapujemy ścieżkę dostępu z naszego systemu plików jako nazwę naszej strony. Po wpisaniu w przeglądarkę http://127.0.0.1/mojastrona, zaczniemy wyświetlać pliki z katalogu D:\www\mojastrona. Aby to zrobić wystarczy wykonać kilka prostych kroków:

  • Tworzymy folder D:\www\test\
  • Klikamy LPM na ikonkę WAMP’a
  • Wyszukujemy opcję Apache>Alias directories>Add dan alias
  • Wpisujemy nazwę naszego aliasu np. „test” po czym wciskamy ENTER
  • Następnie podajemy ścieżkę dostępu do naszego katalogu w którym będziemy trzymać nasze pliki PHP. Należy pamiętać o użyciu notacji linuxowej tzn. ukośniki skierowane w prawo / „D:/www/test/” – bardzo ważnym elementem jest również ukośnik na końcu ścieżki dostępu, dzięki czemu serwer będzie wiedział, że chodzi nam o katalog.

W ten sposób stworzyliśmy nasz alias. Teraz możemy wejść do naszego katalogu D:/www/test/, stworzyć tam plik index.php a jako zawartość możemy wpisać:

1
&lt;!--?php echo 'Hello World';

Otwieramy naszą przeglądarkę i wpisujemy http://localhost/test/. Naszym oczom powinien ukazać się piękny napis „hello World”.

4. Jak działa serwer WWW

Na ten temat można napisać sporych rozmiarów wypracowanie, natomiast ja skupię się na kilku najważniejszych elementach. Po wpisaniu interesującego nas adresu, serwer wyszukuje pliku „index”– czyli głównego pliku strony. Następnie na podstawie jego zawartości tworzy kod HTML który zostanie wysłany do użytkownika. W momencie w którym trafimy na znacznik początku kodu PHP (<?php), nasz interpreter analizuje skrypt i wykonuje wszystkie zadeklarowane w nim funkcje. Ot cała filozofia. Wszystkie skrypty PHP wykonywane są po stronie serwera. Użytkownik nie może podejrzeć jego zawartości, a jedynie wyświetlić kod jaki zwróci mu serwer. Tak wygląda fragment pliku
wp-config.php – pliku konfiguracyjnego WordPressa:

define('DB_NAME', 'wp');
define('DB_USER', 'root');
define('DB_PASSWORD', '');
define('DB_HOST', 'localhost');

Widzimy tutaj dane dostępu do bazy danych. Gdyby użytkownik mógł wyświetlić zawartość pliku *.php, mógłby nam zrobić w niej niemałe zamieszanie.

5.    Podsumowanie

Po przeczytaniu tego poradnika powinieneś potrafić stworzyć bazę do swojego projektu PHP, czyli działający serwer za pomocą którego będziesz wykonywał swoje skrypty. W kolejnej części omówię składnię PHP, jednak wymagana będzie minimalna wiedza na temat programowania – co to są zmienne, funkcje itp.

005 – Kolorystyka

Jak już wspominałem w jednym z poprzednich postów – esteta ze mnie żaden. Niestety muszę stawić czoła temu problemowi i wiem, że nie będzie to łatwa walka – kolorystyka. Muszę dobrać jakąś paletę barw do mojego motywu. Starać się trzymać pewnego schematu albo schematów. Jak już pisałem – implementacja kliku stylów będzie bardzo prostą rzeczą do wykonania, natomiast „pokolorowanie” strony…

Zastanawiam się nad zaprzestaniem pisania kolejnych elementów w sposób, w jaki robię to teraz. Nie będę ich pisał od początku do prawie samego końca. Dobrym pomysłem wydaje się utworzenie ogólnego szkieletu, który później będę ubogacał o kolejne funkcje i wodotryski. Po zaprojektowaniu szkieletu wezmę się za kolorowanie – mam nadzieję, że facebookowicze pomogą wybrać mi paletę/palety barw 😀

Póki co, jeżeli chodzi o funkcjonalność strony, mocno hamuje mnie brak jakiejkolwiek znajomości JavaScriptu. Książka stoi na półce i czeka na skończenie bootstrapa, poradniki w Internetach dodane do zakładek, ale nie chciałbym zaczynać JS’a zanim nie dokończę Bootstrapowej lektury.

W międzyczasie staram się pisać poradnik do PHP. Problemy z dźwiękiem nie pozwalają mi niestety nagrać sensownego poradnika wideo. Mam nadzieję, że do soboty uwinę się z youtube’ową wersją poradnika – wersja PDF czeka na ostatnie poprawki i publikację.

 

004 – Najbliższe plany

Długo myślałem nad formą postów konkursowych. Na początku myślałem o wrzucaniu tylko i wyłącznie postów związanych z projektem ale wpadłem na inny pomysł.

Skorzystam z możliwości jakie daje regulamin konkursu – posty środowe będą dotyczyć projektu natomiast posty sobotnie będą poradnikami dotyczącymi m. in. PHP. Zacznę od instalacji serwera PHP na lokalnej maszynie i po kolei będę przechodzić dalej. Bardzo możliwe, że poradniki będą w wersji wideo. Skupię się bardziej na PHP niż na HTML-u czy CCS-ie.

Po zaprezentowaniu podstaw PHP przejdę do użytkowania Frameworka jakim jest CodeIgniter. Myślę, że da mi to możliwość skupienia się na rozwoju projektu jak i na wypełnieniu bloga inną zawartością – kierowaną do osób niezainteresowanych moim projektem.

003 – Wielopoziomowe menu

Szablon staram się robić po kolei – od góry do dołu. Po nagłówku przyszedł czas główne menu nawigacyjne – nigdy nie przypuszczałem, że tyle będę walczył z tak prostym elementem.

Wykonanie samego menu to nie jest taki dużo kłopot – ot zwykła lista elementów która wystarczy odpowiednio wystylować żeby wyglądała jakoś sensownie. Ale wtedy jak wiadro wody na otrzeźwienie, dobija się do głowy myśl – „wielopoziomowe menu”. Tutaj zaczęły się schody. Stylowanie listy która znajduje się w liście która znajduje się w liście przerosła moje skromne możliwości – i dobrze. Właśnie po to, chwyciłem się tego konkursu, żeby nie zniechęcić się na takiej błahostce.

Z menu które się pojawia po najechaniu już sobie poradziłem – chwilowo walczę z tym, aby menu było bardziej „smooth” – wygląd oraz animacja rozwijania. Jeszcze w tym tygodniu powinno znaleźć się demo do obejrzenia.

002 – Wstępny szkic

Pierwsza wersja tego posta zakładała poradnik krok po kroku jak zacząć tworzenie szablonu, ale muszę zrezygnować z tej formy na chwilę obecną.

Muszę dokładnie przemyśleć formę i punkt startowy takich poradników. Bardzo możliwe, że pojawią się one tutaj.

Jeżeli ktoś obserwuje mój fanpage, to mógł zauważyć pewne postępy – mam już bardzo dużą część nagłówka strony, łącznie ze stroną konfiguracyjną. Kod wstępnej wersji jest już dostępny na moim githubie, a podgląd dostępny jest tutaj. Walczę z możliwością dodania wordpressowego media picker’a który bedzie ustawiał logo strony lub obrazek w nagłówku.

Na tym etapie skończę w chwili obecnej nagłówek a zacznę projektować menu. Z uwagi na responsywność motywu która stoi na pierwszym miejscu, menu strony w wersji „stacjonarnej” będzie oddzielać nagłówek od treści strony, natomiast w wersji mobilnej będzie się ono wysuwać. Cały czas rozmyślam jeszcze nad kolorystyką strony. Chciałbym w tym projekcie unikać używania obrazków jako tła strony. Jeżeli doprowadzę do stworzenia kolejnego motywu, to prawdopodobnie skuszę się na taką opcję.

Po głowie chodzi mi jeszcze jedna myśl – ustawić możliwość edycji kolorystyki użytkownikowi. Jeżeli chodzi o kod nie będzie to ciężkie do zaimplementowania a mi nawet ułatwi pracę bo niestety ale esteta ze mnie żaden.