< Web

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

Szerző: Sallai András

Copyright © 2013, Sallai András

Szerkesztve: 2013, 2019, 2024

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

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

Power Shell

Néha előfordul, hogy Power Shell-ben szeretnénk egy parancsot kiadni, de megfelelő aláírás hiányában ez tiltva van. Engedélyezhetjük:

Rendszergazdaként egy Power Shell ablakban:

Set-ExecutionPolicy Unrestricted

Másik lehetőség:

Set-ExecutionPolicy RemoteSigned

Ellenőrzés:

Get-ExecutionPolicy

Virtuális gép

Virtuális gép segítheti az alkalmazásunk kipróbálást kifejezetten szervernek szánt gépen.

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ő

Chrome

jQuery Debugger

jQuery Shell

Page Ruler

Firefox

Opera

Szerkesztő

Bracktes

Atom

Visual Studio Code

Geany

Scite

Notepad2 (Win only)

Notepad++ (Win only)

ICEcoder (Webes)

NetBeans

NetBeans Connector (Összekapcsolja a Chrome és a NetBeans fejlesztőeszközt)

WebStorm (30 napos trial)

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

AMPPS (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/

Eszköz gyűjtemény:

https://testdev.tools/

Megjegyzés: A Notepad++ UTF-8 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: A lite-server használata

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/ArchGPT/insomnium ✔

https://github.com/frigus02/RESTer

https://www.postman.com/

https://insomnia.rest/

https://www.thunderclient.com/ (VSCode bővímény)

https://www.usebruno.com/

Futtatás online

https://jsfiddle.net/

https://jsbin.com/

https://playcode.io/

REST API helyettesítő szerver

https://github.com/techiediaries/fake-api-jwt-json-server