[[oktatas:web|< Web]]

====== Webes fejlesztői környezet kialakítása ======

  * **Szerző:** Sallai András
  * Copyright (c) 2013, Sallai András
  * Szerkesztve: 2013, 2019, 2024
  * 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, fejlesztői
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:

<code>
alma
körte
barack
szilva
</code>


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 browser 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
  * MDN Docs



===== 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
    * [[https://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 ====

Rendszergazdaként:
  npm install -g live-server

Abban a könyvtárban, ahol a HTML oldalunk van, futtassuk felhasználóként:
  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



===== API teszt =====

  * https://httpie.io/
  * https://github.com/frigus02/RESTer
  * https://www.postman.com/

===== Futtatás online =====
  * https://jsfiddle.net/
  * https://jsbin.com/
  * https://playcode.io/