phpStorm

phpStorm oferuje nam mnóstwo możliwości i pewnie większości nie będziemy wykorzystywać. Chociaż, kto wie? Może właśnie Ty! A może i ja, z czasem. Jednak już samo to, co udało mi się poznać, pozwala mi stwierdzić z czystym sumieniem – nie pracowałem nigdy na lepszym IDE. Dlatego je polecam i dlatego je opiszę. Jeżeli jednak masz już swoje zwyczaje i swoje IDE, po prostu pomiń tę część artykułu, która się do phpStorm odnosi. Powtórzę jeszcze informację z zajawki, aby to było całkowicie jasne. JetBrains, firma odpowiadająca za phpStorm, nie płaci mi, nie namawia, nie wymaga, nie podpowiada. Wszystko co dobre (i co złe!) piszę sam z siebie, dziękuję za uwagę.

Struktura katalogów

Projekt

Zanim zaczniemy pracę, warto ją sobie dobrze przemyśleć. Swoje projekty trzymam w różnych miejscach (w zależności od tego, czy to projekt zlecony, z jakiej firmy, czy może coś mojego, do użytku prywatnego lub publicznego), ale wszystkie są i tak w katalogu „C:\bin\projects”. Jak łatwo się domyślić, korzystam w pracy z systemu Windows (w wersji 10). Na potrzeby naszych kursów, projekty będę trzymał w katalogu „C:\bin\projects\kursy”. Wybieram sobie jakąś nazwę projektu (zazwyczaj, w naszych kursach, będą to nazwy szablonów lub wtyczek) i tworzę taki katalog. Dla tego przykładu, proponuję nazwę „hello-world”. Taki standard. Tak więc mamy już katalog „C:\bin\projects\kursy\hello-world”. Teraz odtwarzam sobie ścieżkę WordPressa do katalogu z wtyczkami i z naszą nową wtyczką, uzyskując: „C:\bin\projects\kursy\hello-world\wordpress\wp-content\plugins\hello-world”. No, to już jest kawałek ścieżki.

WordPress

Do katalogu „C:\bin\projects\kursy” dodaję sobie świeżą instalację WordPressa, najnowszą. Posługuję się, jak widać na załączonym obrazku, instrukcją svn co https://develop.svn.wordpress.org/trunk/ w linii komend. Aby to zadziałało, musisz mieć zainstalowany SVN, ale programista PHP na pewno to wie. Nawiasem mówiąc, w trakcie naszej pracy będziemy korzystać z SVN do komunikacji z platformą wordpress.org oraz z GITa, do przechowywania własnych projektów.

Po pobraniu, mamy przed sobą najnowsze źródła WordPress. Należy je teraz skompilować. Wydajemy komendę npm install (teraz wiecie też, że należy mieć NodeJS) a po skompletowaniu katalogu C:\bin\projects\kursy\trunk\node_modules wydajemy kolejną, ostatnią już, komendę grunt. To akurat jest jedna z zależności opisanych w projekcie, więc poprzednia komenda (npm install) ściągnie nam grunt i możemy się tą komendą posłużyć bezpiecznie. Kiedy grunt skończy działanie, znajdziemy nowy katalog – C:\bin\projects\kursy\trunk\build w którym znajdziemy właśnie skompilowaną, najnowszą wersję WordPressa! Po zaktualizowaniu, należy komendy wydać jeszcze raz, aby być na bieżąco.

phpStorm

Mogliśmy te katalogi (mam na myśli projekt, ale właściwie WordPressa też to dotyczy) stworzyć z poziomu phpStorm, ale tutaj akurat wolę linię poleceń. Teraz odpalamy phpStorm i na dzień dobry widzimy coś podobnego do:

Możemy teraz zrobić parę rzeczy. Po lewej stronie jest lista ostatnio otwieranych projektów, którą musiałem z oczywistych względów wymazać. Nas jednak interesuje prawa strona. Możemy stworzyć nowy projekt, otworzyć istniejący, stworzyć nowy projekt z istniejących plików oraz stworzyć nowy projekt poprzez ściągnięcie plików z systemu kontroli wersji. Oczywiście korzystamy z przedostatniej opcji, ponieważ stworzyliśmy już sobie system katalogów. Wybieram opcję serwera zainstalowanego lokalnie i plików zainstalowanych lokalnie, w strukturze plików serwera. To akurat nie jest prawdą, ale nic nie szkodzi, tak jest (mnie w każdym razie) najszybciej i najwygodniej:

Teraz wybieram katalog hello-world, pamiętając o tym, aby wybrać ten pierwszy – jako katalog nadrzędny projektu – a nie ten na końcu, czyli właściwy katalog wtyczki:

Następnie musimy sobie wymyślić jakiś serwer, który działa lokalnie. Klikamy dodawanie nowego serwera i lecimy dalej.

Teraz coś trzeba z siebie wykrzesać więcej. Nazwa to coś, co będziemy jako tako rozpoznawać w przyszłości. Dlatego nazwałem to „Serwer lokalny z kursami”. Raczej mi się z niczym nie pomyli. Dopóki nie zacznę pisać jakiejś aplikacji wspomagającej handel walutami. Dodaję też adres serwera, który wymyśliłem sobie jako „http://kursy.local”. Końcówka .local ma mi przypominać, że nie jesteśmy w internecie. Dodatkowo zaznaczam, aby phpStorm nie sprawdzał połączenia z serwerem. Z prostej przyczyny – jeszcze go nie skonfigurowałem do obsługi tej domeny lokalnej.

Potem opisuję, gdzie dokładnie mogę zobaczyć rezultat działania naszej aplikacji. Nie jestem pewien, czy to będzie właściwy adres, ale póki go nie mam – dodaję po prostu /hello-world do adresu:

No i w zasadzie (nieprawda) to tyle, możemy rozpocząć nasz projekt:

Serwer i domena

Teraz na szybko skonfiguruję sobie domenę, edytując plik C:\Windows\System32\drivers\etc\hosts. Dodaję linijkę o treści 127.0.0.1 kursy.local. Gdy teraz wywołam adres http://kursy.local/, dostanę śliczną informację z serwera Apache (bo taki mam akurat zainstalowany, nic nie stoi na przeszkodzie abyś używał innego) że działa. Teraz muszę sobie szybko skonfigurować katalog wirtualnego hosta. Więc muszę podjąć kolejne decyzje. Akurat wirtualne hosty trzymam w katalogu C:\bin\domains. Wobec powyższego, tworzę katalog C:\bin\domains\kursy.local. Kopiuję tam zawartość katalogu C:\bin\projects\kursy\trunk\build (pamiętacie? nasz zbudowany WordPress) i mam najnowszą wersję WP na lokalnym serwerze.

To znaczy muszę jeszcze tego wirtualnego hosta skonfigurować… Robię to, edytując plik C:\bin\apache\conf\extra\httpd-vhosts.conf. U Ciebie, nawet jeżeli masz Apache w dokładnie tej samej wersji (obecnie 2.4.34), może się okazać, że wirtualne hosty konfigurujesz gdzie indziej. Do pliku dopisuję:

<VirtualHost *:80>
  DocumentRoot "C:\bin\domains\kursy.local"
  ServerName kursy.local
  <Directory "C:\bin\domains\kursy.local">
    Require all granted
    AllowOverride All
  </Directory>
</VirtualHost>

DocumentRoot "C:\bin\domains\kursy.local"

ServerName kursy.local

Require all granted

AllowOverride All

</Directory>

</VirtualHost>

Instalacja WordPress

Następnie restartuję serwer Apache (trywialne httpd -k restart). I już. Mam skonfigurowaną domenę lokalną i lokalny wirtualny host. Teraz mogę go odwiedzić i – jeżeli wszystko zrobiliśmy dobrze – zobaczyć ekran instalacji WordPress. Instalacja jest trywialna, szczególnie dla programistów PHP, nawet początkujących, więc daruję sobie jej opis. Ważne jest, aby dotrzeć do końca. Pamiętaj, aby wybrać wersję angielską – tworząc wtyczki i szablony WordPress, będziemy je tworzyć po angielsku. Potem, oczywiście, przetłumaczymy co zechcemy na język polski. Po instalacji powinieneś zobaczyć coś takiego:

Powiedzmy, że może nie zgadzać się wersja (warto, abyś używał najnowszej) i raczej nie będzie zgadzała się nazwa użytkownika.

Sieć witryn

Ponieważ na jednym kursie nie poprzestaniemy, stworzymy sobie sieć witryn. Nie trzeba będzie co chwilę wprowadzać kolejnej domeny czy serwisu. No i nie potrzebujemy mnożyć kopii WordPress na naszym serwerze lokalnym. Pierwsze, co musimy zrobić, to zezwolić WordPress na instalację sieci. Musimy w tym celu wyedytować plik C:\bin\domains\kursy.local\wp-config.php. Szukamy tam linijki „/* That’s all, stop editing! Happy blogging. */” i tuż nad nią wklejamy:

/* Multisite */
define( 'WP_ALLOW_MULTISITE', true );

1 2	/* Multisite */ define( 'WP_ALLOW_MULTISITE', true );

Korzystając z okazji, modyfikujemy też linijkę „define( 'WP_DEBUG’, false );”, zamieniając ją na:

define( 'WP_DEBUG', true );

1	define( 'WP_DEBUG', true );

Jest to działanie niedopuszczalne na serwerze produkcyjnym. Jednakże na serwerze deweloperskim, gdzie tworzymy – jest to wręcz oczywiste. Musimy wiedzieć jak najwięcej o naszym kodzie, aby upewnić się, że dobrze działa i że dobrze będzie działał wszędzie. Nie powinniśmy sobie pozwalać na błędy, ostrzeżenia (Warning) czy nawet drobne ostrzeżenia (Notice). Zwracamy też szczególną uwagę na używanie przestarzałych (Deprecated) funkcji czy też metod. Trzymajmy się standardów, bądźmy na bieżąco.

Teraz zapisujemy zmieniony plik konfiguracyjny i odświeżamy sobie widok kokpitu WordPress (pod adresem http://kursy.local/wp-admin/). W menu „Tools” zobaczymy nową pozycję, „Network Setup”. Wchodzimy tam! Teraz konfigurujemy sobie sieć. W środowisku Windows nie da się w łatwy sposób zautomatyzować dodawania pod domen do pliku hosts i konfiguracji Apache, więc zalecam wybranie „Sub-directories” jako adresy witryn sieci. Następnie klikamy „Install”.

Jeżeli wybieraliście to, co ja, treść się będzie zgadzała. Jeżeli nie, może się nieco różnić. W każdym razie wracamy do edycji wp-config.php i dodajemy (po zdefiniowaniu WP_ALLOW_MULTISITE):

define('MULTISITE', true);
define('SUBDOMAIN_INSTALL', false);
define('DOMAIN_CURRENT_SITE', 'kursy.local');
define('PATH_CURRENT_SITE', '/');
define('SITE_ID_CURRENT_SITE', 1);
define('BLOG_ID_CURRENT_SITE', 1);

define('MULTISITE', true);

define('SUBDOMAIN_INSTALL', false);

define('DOMAIN_CURRENT_SITE', 'kursy.local');

define('PATH_CURRENT_SITE', '/');

define('SITE_ID_CURRENT_SITE', 1);

define('BLOG_ID_CURRENT_SITE', 1);

Musimy też podmienić zawartość pliku .htaccess, u mnie na:

RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]

# add a trailing slash to /wp-admin
RewriteRule ^([_0-9a-zA-Z-]+/)?wp-admin$ $1wp-admin/ [R=301,L]

RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^([_0-9a-zA-Z-]+/)?(wp-(content|admin|includes).*) $2 [L]
RewriteRule ^([_0-9a-zA-Z-]+/)?(.*\.php)$ $2 [L]
RewriteRule . index.php [L]

RewriteEngine On

RewriteBase /

RewriteRule ^index\.php$ - [L]

# add a trailing slash to /wp-admin

RewriteRule ^([_0-9a-zA-Z-]+/)?wp-admin$ $1wp-admin/ [R=301,L]

RewriteCond %{REQUEST_FILENAME} -f [OR]

RewriteCond %{REQUEST_FILENAME} -d

RewriteRule ^ - [L]

RewriteRule ^([_0-9a-zA-Z-]+/)?(wp-(content|admin|includes).*) $2 [L]

RewriteRule ^([_0-9a-zA-Z-]+/)?(.*\.php)$ $2 [L]

RewriteRule . index.php [L]

No i wystarczy teraz przeładować stronę, będziesz automatycznie wylogowany. Zaloguj się i masz do dyspozycji sieć. Teraz przejdź pod adres „http://kursy.local/wp-admin/network/sites.php” i dodaj swoją pierwszą witrynę (poza główną) pod nazwą, bez niespodzianek, Hello World a adresem /hello-world/. Dzięki temu to, co ustawialiśmy w phpStorm, mamy jak na dłoni – http://kursy.local/hello-world/.

Wracamy do phpStorm

Integracja z WordPress

Po co w ogóle instalowaliśmy tego WordPressa i co to ma wspólnego z phpStorm? Pierwsza rzecz, to rzecz jasna testowanie. Będziemy sobie na bieżąco oglądać wyniki naszej pracy. Kolejna rzecz, to podpowiedzi. PhpStorm będzie umiał nam podpowiedzieć składnię funkcji i klas WordPressa! Robimy to w ustawieniach, w taki sposób:

Czyli wchodzimy w ustawienia (Settings), wybieramy Languages & Frameworks, znajdujemy PHP, wybieramy Frameworks, rozwijamy (po prawej stronie) WordPress i klikamy Enable WordPress integration. Musimy jeszcze wybrać źródło, w naszym wypadku jest to oczywiście C:\bin\projects\kursy\trunk\build. Po krótkiej (lub dłuższej, w zależności od szybkości Twojego komputera) chwili, phpStorm zaindeksuje sobie WordPressa i jest, działa!

PHP

A skoro już jesteśmy w ustawieniach, warto zadbać o integrację z PHP, jako takim. W końcu chcemy wycisnąć z naszego oprogramowania jak najwięcej. Wybieramy Settings -> Languages & Frameworks -> PHP i klikamy samo PHP. Wybieramy poziom języka (osobiście uważam, że wybieranie czegokolwiek poniżej 7.2 jest po prostu przestarzałe) a w polu CLI Interpreter wybieramy PHP, który mamy zainstalowany na dysku. U mnie jest akurat w C:\bin\php. Dodajemy sobie też ścieżkę do PEAR (jak na obrazku):

Oczywiście to nie koniec, ale na początek wystarczy. Kolejnych rzeczy będziemy dowiadywać się w kolejnych fragmentach kursu.