• Szerző: Sallai András
• Copyright © 2013, Sallai András
• Szerkesztve: 2013, 2019
• Licenc: CC BY-SA 4.0
• Web: https://szit.hu

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.

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

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

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

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.

Megoldás gyűjtemény dinamikus weboldalak létrehozására.

• Linux
• Apache
• MariaDB vagy MySQL
• Perl, PHP vagy Python

Telepítés Linuxon

apt-get update
apt-get install apache2 php5 mysql-server

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

A LAMP windowsos változata, a WAMP tartalmazza a webszervert, adatbázis szervert és PHP-t.

• Windows
• Apache
• MySQL
• PHP

A LAMP szerverek keresztplatformos változata. Telepíthető Windows, Linux és macOS gépekre is.

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

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 segítheti az alkalmazásunk kipróbálást kifejezetten szervernek szánt gépen.

• VirtualBox

A hibakereséshez jól jön egy PHP hibakövető:

• https://xdebug.org/

• https://getcomposer.org/

A telepítés automatizálásához egyik megoldás lehet a Deployer:

• https://deployer.org

• Böngésző
  • Chrome
    • jQuery Debugger
    • jQuery Shell
    • Page Ruler
  • Firefox
  • Opera
• Szerkesztő
  • Bracktes
  • Atom
  • Visual Studio Code
  • Komodo-Edit
  • Geany
  • Scite
  • Notepad2 (Win only)
  • Notepad++ (Win only)
  • ICEcoder (Webes)
  • Bluefish
  • NetBeans
    • NetBeans Connector (Összekapcsolja a Chrome és a NetBeans fejlesztőeszközt)
  • WebStorm (30 napos trial)
  • Bluegriffon
  • Sublime Text
  • http://maqetta.org/ (GPL, Webes felületen)
  • List_of_HTML_editors
  • Comparison_of_HTML_editors
• Grafikai program
  • GIMP (Képszerkesztő, manipuláló)
  • Inkscape (Vektorgrafikus rajzoló)
• Játszótér
  • SWBin
  • JsBin
• Szerverhez
  • Apache
  • MariaDB, MySQL, PostgreSQL, MSSQL, Oracle Database
  • PHP
• LAMP szerver
  • Debian GNU/Linux, Linux Mint stb.
  • LAMP
  • XAMPP
    • http://bitnami.com/stack/xampp/ (Csomagok az XAMPP számára)
  • WAMP
  • AAMPS
  • https://www.mamp.info/MAMP (macOS és Windows számára)
• Adatbázis kliens
  • DBeaver GUI
  • PhpMyAdmin HTML
• Tervezés
  • https://wireframe.cc/
  • http://tridiv.com/
  • http://www.blended-html.com/

Megjegyzés: A Notepad++ UTF-8 BOM-al hibás PHP értelmezést eredményez. Dolgozzunk BOM nélkül.

• http://gs.statcounter.com/

Telepítés:

npm install -g lite-server

Leírás: A lite-server használata

# 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

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 -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

• https://www.regextester.com/ (2018)

• https://beautifier.io/ (2018)

• https://developers.google.com/speed/pagespeed/insights/?hl=hu

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 

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

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

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

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:

snippets.conf

[Javascript]
 
con=console.log(%cursor%);
 
 
[HTML]
 
html=<!DOCTYPE html>\n<html lang="hu">\n<head>\n\t<meta charset="utf-8">\n\t<title></title>\n</head>\n<body>\n\t<h1>%cursor%</h1>\n\t<p></p>\n\n</body>\n</html>\n
link=<link rel="stylesheet" href="%cursor%">
sc=<script src="%cursor%"></script>

További beállítások: Geany snippets

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

• https://jsfiddle.net/
• https://jsbin.com/
• https://playcode.io/