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.

001 – Czas zacząć

Pierwszy „prawdziwy” wpis dotyczący projektu SimpleStrap – tak właśnie nazwałem szablon który będę robić. Chciałbym przedstawić wszystkie wstępne założenia, zanim w ogóle zacznie cokolwiek powstawać.

Podstawowym aspektem mojego projektu jest responsywność – strona ma wyglądać dobrze i w taki sposób, jaki sobie wymyślę na każdym urządzeniu – smartphonie, laptopie czy telewizorze obsługującym rozdzielczość 4K.
Moim zdaniem blog o szerokości 1920px czy nawet 3840px jest zdecydowanie za duży, dlatego korzystając z możliwości Bootstrapa będzie miał on maksymalnie 1170px.
Układ strony będzie dwukolumnowy – po lewej stronie zawartość, po prawej widgety.
Nagłówek strony będzie oddzielony od ciała paskiem nawigacyjnym.
Na koniec oczywiście stopka z informacją o autorze 🙂

Wpisy będą swego rodzaju poradnikami. Zsumuję wiedzę którą znajdę na stackoverflow, codex’ie wordpressa, książkach i pozostałych stronach i skleję to w jedną całość. Postaram się opisać to najdokładniej jak potrafię.

W głównym menu mojej strony znajdziecie odnośnik do mojego GitHub’a gdzie możecie pobrać aktualną wersję motywu. Jeżeli natomiast chcecie podejrzeć jak cały ten kod interpretuje Wasza przeglądarka zapraszam na stronę http://kulinsky.pl/simplestrap/ – tam skórka będzie aktualizowana na bieżąco.

000 – Zaczynamy coś konkretnego

Znalazłem bardzo ciekawy konkurs i zamierzam wziąć w nim udział. Daj się poznać to konkurs w którym muszę stworzyć własny projekt w dowolnej technologii. Postawiłem na motyw do WordPressa – może i nie jest to wymagające zadanie, ale zaczynać będę od „prawie” zera. Do tej pory miałem styczność z PHP dosyć dużą ale HTML5 czy CSS3 to dla mnie dużo nowego materiału. JavaScript to dla mnie zupełna nowość tak jak i Bootstrap na którym będzie opierał się mój projekt, o systemie kontroli wersji Git nie wspominając.

Całość uważam za duże wyzwanie. Nie liczę na nagrody w konkursie, ale na to, że przejdę do grona finalistów, czyli spełnię wszystkie wymogi konkursu. W każdym tygodniu na moim blogu pojawią się 2 wpisy konkursowe. Jeden dotyczący projektu, a drugi związany z branżą IT. Nowe wpisy będą pojawiać się w środy i soboty o godzinie 22:00. Projekt będzie rozwijany przez minimum 10 tygodni.

Dla wszystkich zainteresowanych moimi postępami zapraszam na Git-Hub’a gdzie można będzie pobierać szablon i sprawdzać go na swojej stronie. Udostępniona zostanie też  strona na której będzie widać wizualne efekty moich prac.

Specjalnie na potrzeby konkursu założyłem również fanpage. Serdecznie zachęcam do polubienia go i oczywiście śledzenia bloga. Trzymajcie za mnie kciuki 🙂