[[oktatas:web|< Web]]
====== Webes fejlesztői környezet kialakítása ======
* **Szerző:** Sallai András
* Copyright (c) 2013, Sallai András
* Szerkesztve: 2013, 2019
* Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC BY-SA 4.0]]
* Web: https://szit.hu
===== Fejlesztői környezet =====
Egy egyszerű webes fejlesztői környezet esetén, szükségünk
van egy IDE eszközre, vagy egy kódszerkesztőre, webszerverre,
virtuális gépekre, PHP Debugger-re; a webszerveren PHP és
adatbázis-kezelő rendszer.
==== Fejlesztő eszköz ====
Különbséget kell tennünk az IDE és a kódszerkesztő között.
IDE:
* támogatja:
* kódszerkesztés
* fordítás
* futtatás
* hibakeresés
* általában egyetlen nyelvre összpontosít
* tartalmazza a nyelvre jellemző hibakeresőt
Kódszerkesztő:
* több nyelvet támogat
* képességeik a kódolásra korlátozódnak
==== Visual Studio Code ====
Tartalom köré HTML elem:
* kijelölöm a tartalmat
* F1
* Futtatom: Emmet: Wrap with Abbreviation
* Beírom a HTML elem nevét (esetleg .osztálynév)
* Enter
Több sor számára HTML elem beállítása. Például van egy ilyen lista:
alma
körte
barack
szilva
Szeretnénk egyetlen menetben li elemek közzé tenni.
* Aljunk az első sor elejére a szövegkurzorral (az alma szó elé)
* Nyomjuk meg a Shift-End billentyűt
* F1
* Emmet: Wrap with abbrevation
* Írjuk be: li
* Enter
=== Bővítmény ===
Lehetővé teszi fájlok megnyitását böngészőben.
* open in browser
Az open in broser használata:
* Az Explorerben HTML állomány felett jobb egér gomb
* Két lehetőség:
* Open in Default Browser
* Open in Other Browsers
Ha nincs beállítva az alapértelmezett böngésző, akkor válasszuk a második lehetőséget.
Opcionális:
* HTML CSS Support
===== Szerver =====
Szükségünk van egy szerverre, ahol kipróbálhatjuk fejlesztői változatunkat.
Erre valamilyen LAMP szervert szokás használni, ami tartalmaz webszervert,
adatbázisszervert, PHP vagy Perl nyelvet; a webszerver pedig képes futtatni
a PHP vagy a Perl scripteket.
==== LAMP szerverek====
Megoldás gyűjtemény dinamikus weboldalak létrehozására.
* **L**inux
* **A**pache
* **M**ariaDB vagy **M**ySQL
* **P**erl, **P**HP vagy **P**ython
Telepítés Linuxon
apt-get update
apt-get install apache2 php5 mysql-server
==== LEMP szerver ====
A LEMP szerver esetén az Apache-t felváltja a Nginx:
* Linux
* Enginx
* MySQL
* PHP
Tenedők:
apt install nginx
ufw allow 'Nginx HTTP'
apt install mysql-server
apt install php-fpm php-mysql
==== WAMP szerver ====
A LAMP windowsos változata, a WAMP tartalmazza a webszervert, adatbázis szervert
és PHP-t.
* **W**indows
* **A**pache
* **M**ySQL
* **P**HP
==== XAMPP ====
A LAMP szerverek keresztplatformos változata.
Telepíthető Windows, Linux és macOS gépekre is.
=== Windows 10 hiba ===
Error: Cannot create file "C:\xammp\xampp-control.ini
Megoldás:
* rendszergazdaként kell indítani az XAMPP-t
* Az indító ikonon:
* jobb egér, Tulajdonságok
* Speciális > [✔]Futtatás rendszergazdaként
* vagy a xampp-control.exe állományon:
* Tulajdonságok
* Kompatibilitás
* [✔] A program futtatása rendszergazdaként
=== Telepítés Chocolatey csomagkezelővel ===
choco install xampp-73
Szükség szerint más verziók is telepíthetők:
choco install xampp-74
choco install xampp-80
choco install xampp-81
===== Virtuális gép =====
Virtuális gép segítheti az alkalmazásunk kipróbálást kifejezetten szervernek szánt
gépen.
* [[https://www.virtualbox.org/|VirtualBox]]
===== PHP Debugger =====
A hibakereséshez jól jön egy PHP hibakövető:
* https://xdebug.org/
===== PHP függőségkezelő =====
* https://getcomposer.org/
===== Deploy eszköz =====
A telepítés automatizálásához egyik megoldás lehet a Deployer:
* https://deployer.org
===== Szoftverek =====
* Böngésző
* [[https://www.google.com/chrome/|Chrome]]
* [[https://chrome.google.com/webstore/detail/jquery-debugger/dbhhnnnpaeobfddmlalhnehgclcmjimi|jQuery Debugger]]
* [[https://chrome.google.com/webstore/detail/jquerify/gbmifchmngifmadobkcpijhhldeeelkc|jQuery Shell]]
* [[https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn|Page Ruler]]
* [[https://www.mozilla.org/hu/firefox/new/|Firefox]]
* [[http://www.opera.com/hu|Opera]]
* Szerkesztő
* [[oktatas:web:fejlesztői_környezet_kialakítása:Bracktes]]
* [[oktatas:web:fejlesztői_környezet_kialakítása:Atom]]
* [[oktatas:web:fejlesztői_környezet_kialakítása:Visual Studio Code]]
* [[http://komodoide.com/komodo-edit/|Komodo-Edit]]
* [[http://geany.org/|Geany]]
* [[http://www.scintilla.org/SciTE.html|Scite]]
* [[http://www.flos-freeware.ch/notepad2.html|Notepad2]] (Win only)
* [[http://notepad-plus-plus.org/|Notepad++]] (Win only)
* [[http://icecoder.net/|ICEcoder]] (Webes)
* [[http://bluefish.openoffice.nl/|Bluefish]]
* [[http://netbeans.org|NetBeans]]
* [[https://chrome.google.com/webstore/detail/netbeans-connector/hafdlehgocfcodbgjnpecfajgkeejnaa|NetBeans Connector]] (Összekapcsolja a Chrome és a NetBeans fejlesztőeszközt)
* [[http://www.jetbrains.com/webstorm/|WebStorm]] (30 napos trial)
* [[http://bluegriffon.org/|Bluegriffon]]
* [[http://www.sublimetext.com/|Sublime Text]]
* http://maqetta.org/ (GPL, Webes felületen)
* [[wp>List_of_HTML_editors]]
* [[wp>Comparison_of_HTML_editors]]
* Grafikai program
* [[http://gimp.org|GIMP]] (Képszerkesztő, manipuláló)
* [[http://inkscape.org/|Inkscape]] (Vektorgrafikus rajzoló)
* Játszótér
* [[http://szit.hu/swbin|SWBin]]
* [[http://jsbin.com|JsBin]]
* Szerverhez
* Apache
* MariaDB, MySQL, PostgreSQL, MSSQL, Oracle Database
* PHP
* LAMP szerver
* Debian GNU/Linux, Linux Mint stb.
* [[https://bitnami.com/stack/lamp/installer|LAMP]]
* [[https://www.apachefriends.org/hu/|XAMPP]]
* http://bitnami.com/stack/xampp/ (Csomagok az XAMPP számára)
* [[http://www.wampserver.com/|WAMP]]
* [[https://www.ampps.com/|AAMPS]]
* [[https://www.mamp.info/MAMP]] (macOS és Windows számára)
* Adatbázis kliens
* [[https://dbeaver.io/|DBeaver]] GUI
* [[https://www.phpmyadmin.net/|PhpMyAdmin]] HTML
* Tervezés
* https://wireframe.cc/
* http://tridiv.com/
* http://www.blended-html.com/
Megjegyzés:
A Notepad++ UTF-8 [[oktatas:web:szótár#bom|BOM]]-al hibás PHP értelmezést eredményez.
Dolgozzunk BOM nélkül.
==== Statisztika ====
* http://gs.statcounter.com/
==== lite-server ====
Telepítés:
npm install -g lite-server
Leírás: [[oktatas:web:nodejs:lite-server|A lite-server használata]]
==== live-server ====
# npm install -g live-server
Abban a könyvtárban, ahol a HTML oldalunk van, futtassuk:
$ live-server
A szerver elindul, a webhely pedig a következő címen érhető el:
* http://localhost:8080
A live-server dokumentációjában kapcsolók használatát is
gyakorolhatjuk:
* https://github.com/tapio/live-server
==== SimpleHTTPServer ====
Pythonnal együtt felkerül egy SimpleHTTPServer nevű webszerver is.
Indítása a webhelyet tartalmazó könyvtárban:
$ python -m SimpleHTTPServer
Alapértelmezett port 8000, vagyis így érhető el a böngészőben:
* http://localhost:8000
De megadható más port is:
$ python -m SimpleHTTPServer 9999
==== PHP HTTP Server ====
$ php -S localhost:8000
$ php --server localhost:8000
$ php -S localhost:8000 -t .
$ php -S localhost:8000 -t public
$ php --server localhost:8000 --docroot public
A böngészőbe:
localhost:8000
==== Regex tesztelő ====
* https://www.regextester.com/ (2018)
==== Kódformáló ====
* https://beautifier.io/ (2018)
==== Weblap sebessége ====
* https://developers.google.com/speed/pagespeed/insights/?hl=hu
===== Böngésző irányítása =====
A böngésző aktuális lapjának frissítése parancssorból:
xdotool search --onlyvisible --class Chrome windowfocus key ctrl+r
xdotool search --onlyvisible --class vivaldi windowfocus key ctrl+r
Ha az ablak nincs előtérben, előtérbe hozzuk:
xdotool windowactivate $(xdotool search --class vivaldi | tail -1) key ctrl+r
===== Geany =====
==== Telepítés ====
A Geany és kiegészítői telepítése Debian GNU/Linuxon:
apt install geany geany-plugin*
A PHP munkához szükség lesz még php csomagra is:
apt install php
==== Beállítások ====
Néhány hasznos beállítás:
* Szerkesztés > Beállítások
* Általános > Egyéb > "A projekt alapkönyvtárába mentse a projekt fájlt
* Fájlok > Kódolások > "Alapértelmezett kódolás (új fájlok): Unicode (UTF-8)
* Terminál > [✔] "Az aktuális fájl elérési útjának követése
==== Bővítmény aktiválása ====
A feltelepített bővítményeket aktiválni kell.
* Eszközök > Bővítménykezelő
Néhány ajánlás:
* [✔] Ablak felosztása
* [✔] Lipsum
* [✔] Lua Script
* [✔] Spell Check
* [✔] TreeBrowser
* [✔] Web helper
* [✔] XML Snippets
==== Snippets ====
A snippets-ek lehetővé teszik, hogy egy rövid kulcsszó beírása
után, a Tabulátor gomb megnyomására beírjon a Geany egy
komplett kódsort. A snippets a fájl kiterjesztéséből tudja,
hogy milyen snippet-t kell használnia, vagyis előbb szükség
van egy mentett állományra a működéshez.
A snippets beállítások a következő helyen találhatók:
* Eszközök > Konfigurációs fájlok > snippets.conf
Kiegészítések a snippets beállításokhoz:
[Javascript]
con=console.log(%cursor%);
[HTML]
html=\n\n\n\t\n\t\n\n\n\t