Ako pohodlne vyvíjať webové projekty

Ako už z názvu vyplýva, tento článok bude stručné zhrnutie mojich doterajších poznatkov, toho, ako mám riešené vývojové prostredie a ako tvorím weby.

Lokálne WAMP server

Ak chceme vytvoriť web, budeme potrebovať lokálny server. Predstava, že každú zmenu budeme nahrávať cez FTP klienta a skúšať na webe je priamo desivá. Snáď ani nemusím zdôrazňovať, že je to jednak pomalé a teda neefektívne a nedaj bože, že by niekoho napadlo ladiť priamo life-situ.

Takže ako prvý krok, ak ste teda ešte neurobili, budete potrebovať rozbehnúť onen WAMP server (Windows Apache Mysql PHP). Viď: Inštalácia XAMPP na Windows

Úprava lokálnych DNS - doména prvého poriadku

Páči sa vám obrázok vyššie? Ide o to, že vo svojom CMS používam pretty url teda napríklad davosovo/edit/clanek A keby som to mal na localhost a členené do priečinkov vyzeralo by to napríklad takto: localhost/SczCMS/edit/clanek A už by som musel modifikovať systém a osekávať parametre . Pretože ďalšie projekty môžem mať napríklad localhost/Projets/drbnito/edit/clanek Iste si teda dokážete predstaviť ako neefektívne a pracné by to bolo zakaždým prepisovať a myslieť na to. Preto si upravíme lokálne DNS záznamy. Zjednodušene ide o to, že zadáme URL napríklad davosovo a IP adresu na ktorú sa má URL presmerovať, pretože my chceme presmerovať na lokálny počítač použijeme 127.0.0.1. Osobne to robím tak, že ak vyvíjam nejaký web tak si pridám záznam a až je hotový odlazaný a viem, že už ho nebudem prerábať, tak si záznam zmažem, aby som v tom potom nemal guláš. Ale samozrejme to nevadí, záznamy sa skladajú prehľadne pod seba, takže ich môžete mať koľko len chcete.

Ako to teda urobiť?

Stlačte Windows + R a zadajte: C:\Windows\System32\drivers\etc\ v tomto adresári zeditujte súbor hosts napríklad v notepadu (ale pozor, ak máte zapnutý UAC potrebujete mať editor spustenie pod právami administrátora, pretože Vista + má systémový disk "chránený "proti zápisu).

Obsah tohto súboru by mal vyzerať nejako takto:

# Copyright (c) 1993-2009 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
#      102.54.94.97     rhino.acme.com          # source server
#       38.25.63.10     x.acme.com              # x client host

# localhost name resolution is handled within DNS itself.
#   127.0.0.1       localhost
#   ::1             localhost
127.0.0.1 davosovo

A ako vidíte úplne dole, pridal som si tam vlastný záznam. Mriežka # znamená jednoriadkový komentár. localhost je zakomentovaný, pretože je to akýsi štandard a DNS ho automaticky spracováva.

Zálohy na cloudu

Skôr než si nasmerujeme náš pridaný DNS záznam do nejakého adresára, odporúčam založiť si nejaký cloud, napríklad: Dropbox Vaša zdrojáky sa budú automaticky synchronizovať a verzovat. Budete k nim mať prístup odkiaľkoľvek a ak je omylom zmažete alebo niečo pokazíte tak si môžete obnoviť až 100 verzií späť. V priečinku Dropbox si urobte nejaký organizačný poriadok. Ja mám Programming\Language\Category.

Presmerovanie apache do iného adresára

Nájdite si zložku s XAMPP a otvorte konfiguračný súbor apache: C:\xampp\apache\conf\httpd.conf

A tam si nasledujúcim spôsobom zariadite presmerovanie do daného adresára:

<VirtualHost *:80>
ServerName http://localhost
DocumentRoot "C:\Users\David\Dropbox\Programming\PHP"
</VirtualHost>

<VirtualHost *:80>
ServerName http://davosovo
DocumentRoot "C:\Users\David\Dropbox\Programming\PHP\SczCMS"
</VirtualHost>

Môžete si to dať kam chcete, ja to mám tuším niekde hneď zo začiatku pod tými komentármi. Ale keď si tam pohľadajú tak zistíte, že je to vždy: Komentáre - dokumentácia (opis) ako čo urobiť, voľné miesto. A predpokladá sa teda, že tam sa bude to pre čo je v tých komentároch vysvetlivka písať.

Ide

Teraz prejdeme k IDE a jeho nastavenie. IDE oproti editora je mocný nástroj. Rozumie kódu, umožňuje nám refactoring, reformatting, doplňovanie abstraktných metód, interface, zobrazovanie premenných, ktoré používame, výpis popiskov daných tried / metód / premenných, rýchlu orientáciu v kóde a mnohé ďalšie. Čo ak to vieme naplno využívať nám veľmi zefektívni prácu. Na začiatky ale odporúčam pracovať v editore. Tak sa daný jazyk veľmi rýchlo naučíte. Môžem prezradiť, že prvá verzia ITnetwork boli písané v Notepad ++. Robili sme v tom asi 2 roky.

Ja osobne som si obľúbil PHPStorm, kde som si zdedil ovládanie s VisualStudio, nastavil nejaké skratky, tmavý vzhľad, doplňovanie šablón hlavičky atp.

** Odporúčam si preliezť a ponastavovat ***

1. IDE Settings / Appearance / Theme -> Darcula (tmavý vzhľad so svetlým písmom - Kodi treba celý deň a na oči je to ideálka)
2. IDE Settings / File Templates -> Nastavenie hlavičky (autor, kontakt), obsahu šablón etc
3. Code style nastavenia vášho štýlu písania kódu - odporúčam nastaviť, môžete si potom reformátovat akýkoľvek kód do vášho štýlu.
4. File Encodings - UTF-8 (odporúčam nastaviť DB, FTP, Editory - predvolenom nastavení na rovnaké kódovanie a najlepšie na Unix, inak s tým potom sú problémy)

Vytvorenie nového projektu

Prázdna zložka, alebo zložka s existujúcimi zdrojovými súbormi

Prepojenie s SVN

Ak robíte v tíme, tak ste určite už zistili alebo vám hovorím, že zistíte, že cez Dropbox to najni až zas tak efektívne. Môžete si prepísať súbory (Dropbox vytvorí pre každého novú kópiu s jeho menom a potom musíte dohľadávať zmeny). SVN nám umožňuje pripísať komentár k zmenám, IDE nám potom ukáže rozdiely a môžeme s tým oveľa lepšie pracovať.

Nasledujúce screenshoty snáď povedia všetko

Ak sa vám pod pravým tlačítkom myši pre súbory a priečinky neobjaví po prepojení s SVN možnosť Subversion a nemôžete teda commitovat zmeny. Urobte prvýkrát checkout.

Debugging webu

Len taká poznámečka na záver. Až budete web ladiť na prehliadačoch, tak teraz nedávno sme zistili, že v IE10 nefunguje simulačné mód a v IE9 je to také pofidérne. Museli sme si zriadiť virtuálny stroj s XP, kde máme originál IE8. Pretože ono to v tom simulačnom móde IE8 u IE10, IE9 a originál IE8 vyzerá občas úplne inak : D

Obrázok je len ilustratívneho charakteru, najni tam ukázaná žiadna chyba.

Tak to bude odo mňa zrejme všetko.