< Web

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

Szerző: Sallai András

Copyright © Sallai András, 2013, 2019

CC Attribution-Share Alike 4.0 International

Web: http://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

Itt most egy kódszerkesztő kerül ajánlásra.

https://geany.org/

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.

Linux

Apache

MariaDB vagy MySQL

Perl, PHP vagy Python

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

Engixn

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.

Windows

Apache

MySQL

PHP

XAMPP

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

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

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

Visual Studio Code

Visual Studio Code

https://vscodium.com/

http://www.aptana.com/ (GPL, Native program)

http://maqetta.org/ (GPL, Webes felületen)

Light Table

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

PhpMyAdmin

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

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.

Statisztika

http://gs.statcounter.com/

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