A kiválasztott változat és az aktuális verzió közötti különbségek a következők.
Előző változat mindkét oldalon Előző változat Következő változat | Előző változat Következő változat Következő változat mindkét oldalon | ||
oktatas:web:fejlesztoi_koernyezet_kialakitasa [2019/11/08 18:42] admin [Fejlesztői környezet] |
oktatas:web:fejlesztoi_koernyezet_kialakitasa [2023/06/07 10:09] admin [Futtatás online] |
||
---|---|---|---|
Sor 4: | Sor 4: | ||
* **Szerző:** Sallai András | * **Szerző:** Sallai András | ||
* Copyright (c) Sallai András, 2013, 2019 | * Copyright (c) Sallai András, 2013, 2019 | ||
- | * [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]] | + | * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]] |
- | * Web: http://szit.hu | + | * Web: https://szit.hu |
===== Fejlesztői környezet ===== | ===== Fejlesztői környezet ===== | ||
Sor 30: | Sor 30: | ||
* képességeik a kódolásra korlátozódnak | * képességeik a kódolásra korlátozódnak | ||
- | Itt most egy kódszerkesztő kerül ajánlásra. | + | |
- | * https://geany.org/ | + | ==== 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 | ||
+ | |||
+ | === 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 ===== | ===== Szerver ===== | ||
Szükségünk van egy szerverre, ahol kipróbálhatjuk fejlesztői változatunkat. | Szükségünk van egy szerverre, ahol kipróbálhatjuk fejlesztői változatunkat. | ||
Sor 57: | Sor 84: | ||
A LEMP szerver esetén az Apache-t felváltja a Nginx: | A LEMP szerver esetén az Apache-t felváltja a Nginx: | ||
* Linux | * Linux | ||
- | * Engixn | + | * Enginx |
* MySQL | * MySQL | ||
* PHP | * PHP | ||
Sor 84: | Sor 111: | ||
A LAMP szerverek keresztplatformos változata. | A LAMP szerverek keresztplatformos változata. | ||
Telepíthető Windows, Linux és macOS gépekre is. | 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 ===== | ||
Sor 116: | Sor 172: | ||
* [[oktatas:web:fejlesztői_környezet_kialakítása:Bracktes]] | * [[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:Atom]] | ||
+ | * [[oktatas:web:fejlesztői_környezet_kialakítása:Visual Studio Code]] | ||
* [[http://komodoide.com/komodo-edit/|Komodo-Edit]] | * [[http://komodoide.com/komodo-edit/|Komodo-Edit]] | ||
* [[http://geany.org/|Geany]] | * [[http://geany.org/|Geany]] | ||
* [[http://www.scintilla.org/SciTE.html|Scite]] | * [[http://www.scintilla.org/SciTE.html|Scite]] | ||
- | * [[:SWScite]] | ||
* [[http://www.flos-freeware.ch/notepad2.html|Notepad2]] (Win only) | * [[http://www.flos-freeware.ch/notepad2.html|Notepad2]] (Win only) | ||
* [[http://notepad-plus-plus.org/|Notepad++]] (Win only) | * [[http://notepad-plus-plus.org/|Notepad++]] (Win only) | ||
Sor 129: | Sor 185: | ||
* [[http://bluegriffon.org/|Bluegriffon]] | * [[http://bluegriffon.org/|Bluegriffon]] | ||
* [[http://www.sublimetext.com/|Sublime Text]] | * [[http://www.sublimetext.com/|Sublime Text]] | ||
- | * [[https://code.visualstudio.com/|Visual Studio Code]] | ||
- | * http://www.aptana.com/ (GPL, Native program) | ||
* http://maqetta.org/ (GPL, Webes felületen) | * http://maqetta.org/ (GPL, Webes felületen) | ||
- | * [[http://lighttable.com/|Light Table]] | ||
* [[wp>List_of_HTML_editors]] | * [[wp>List_of_HTML_editors]] | ||
* [[wp>Comparison_of_HTML_editors]] | * [[wp>Comparison_of_HTML_editors]] | ||
Sor 145: | Sor 198: | ||
* MariaDB, MySQL, PostgreSQL, MSSQL, Oracle Database | * MariaDB, MySQL, PostgreSQL, MSSQL, Oracle Database | ||
* PHP | * PHP | ||
- | * PhpMyAdmin | ||
* LAMP szerver | * LAMP szerver | ||
* Debian GNU/Linux, Linux Mint stb. | * Debian GNU/Linux, Linux Mint stb. | ||
Sor 154: | Sor 206: | ||
* [[https://www.ampps.com/|AAMPS]] | * [[https://www.ampps.com/|AAMPS]] | ||
* [[https://www.mamp.info/MAMP]] (macOS és Windows számára) | * [[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 | * Tervezés | ||
* https://wireframe.cc/ | * https://wireframe.cc/ | ||
Sor 166: | Sor 221: | ||
* http://gs.statcounter.com/ | * 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]] | ||
Sor 268: | Sor 331: | ||
* [✔] XML Snippets | * [✔] 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: | ||
+ | |||
+ | <code ini 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> | ||
+ | </code> | ||
+ | |||
+ | További beállítások: [[oktatas:programozas:programok:geany#snippets|Geany snippets]] | ||
+ | |||
+ | ===== 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/ |