Amennyiben egy tárhelyszolgáltatónál vagyunk vagy vesszük a fáradságot beállítani a dolgokat, úgy pár kattintással is telepíthetjük a widget-et. A kettes adminisztrátori képernyőn a Bővítmények / Új hozzáadása menüpont alól indul a telepítés.
Keresősztringnek a calendar-t adom meg.
Innen a “Telepítés most” gombra kattintva telepíthető.
Nem bajlódom a telepítéssel, helyette hoznék egy élő oldalról működő naptárat. A http://szombathelyigorogkatolikus.hu oldalon található felprogramozott és karbantartott naptár widge, illetve bővítmény működés közben, a különböző egyházi liturgikus eseményekkel feltöltve. Lássuk! 🙂
Ahogy telepítettük, beépül a bővítmény a megfelelő helyekre az adminisztrátori képernyőn. Innen felvehetünk naptár-eseményt, illetve mindenféle beállítást elvégezhetünk a naptárunkon. 🙂
A Coality sablonunkban ugyan nem a címlapon, de van lehetőség aloldalakon oldalsáv megjelenítésére. Ezt úgy is nevezik a WordPress terminológiában, hogy Widget-ek. A kettes képernyőn a Megjelenés / Widgetek menüpont alatt vagy a hármas képernyőn wysiwyg szerkeszthetjük.
A Testreszabás / General Settings / Page Options alatt jelölhetjük ki, hogy right vagy left vagy hogy egyáltalán léegyen-e sidebar.
Alap esetben az alábbi widgetek, azaz elemek közül választhatunk.
Van itt lehetőség kép, szövegrész, videók beágyazására, egyéni HTML-re, azaz weblap tartalomra, de van legutóbbi bejegyzések, hozzászólások, kategóriák illetve akár címkefelhő is. Ez a widget oszlop minden aloldalunk jobb oldalán fog látszani.
Helyezzünk el egy címkefelhőt a widgetek között! Drag’n’drop (húzd és dobd, értsd: egérrel) működik és a megjelenési sorrendet is megszabhatjuk. 🙂
Osztályozásnak a kategóriákat állítom be, mivel címkéink (azaz tag-ek) még nincsenek a weboldalon. Láthatjuk az oldalon egy mentés / frissítés után az eredményt! 🙂
Ebben a sablonban lehetőség van még négy lábléc (footer) widget-terület megadására is, ezt most nem részletezem. Nézzük a kész oldal widgeteit! 🙂
Láthatók a legutóbbi bejegyzések is, illetve az archívum is.
Továbbá a kategóriák, amely most megegyezik a címkéinkkkel.
A blog tartalom a voltaképpeni weblap tartalommal megegyezik. Blog bejegyzések különböző kategóriák alá – ezel különböző menüpontok alá – tartozó halmaza a tulajdonképpeni “hálózatos” honlaptartalom.
Ezután a megjelenő wysiwyg – what you see is what you get – szerkesztőben felvesszük a példa kedvéért a Kezdeményezések menüpont három almenüjébe – alkategóriájába – tartozó három bejegyzésünket. Ezek: Saját / Hazai / Nemzetközi kezdeményezések.
Látható, hogy a konkrét példában a jobb szélső blokkban bejelöljük a kategóriát. Ott a kipipált checkbox. Így járunk el mind a három oldalnál.
Látható az alábbi képernyőkivágáson a három blogbejegyzésünkből kettő a megfelelő menüpont alatt.
Így a “Kezdeményezések” menü alatt három új bejegyzés fog szerepelni, míg a három almenüpontja alatt egy-egy bejegyzés.
A nyitóoldalon azt angol eredetit átnevezzük “Legfrissebb bejegyzések”-re a hármas képernyő wysiwyg szerkesztőjében. Itt még számos egyéb paramétert is beállíthatunk, mint például a megjelenő bejegyzések számát, ami jelenleg három.
És akkor vessünk a nyitóképernyőnk alsó részére egy pillantást! Itt találjuk mind a három új bejegyzésünket egy-egy rövid szövegkiemeléssel.
Ennyire egyszerű weboldalat felépíteni WordPress-ben! 🙂
Új honlapunkat összesen három különböző felületen lehet szerkeszteni.
1. Egyes képernyő, maga a honlap, szerkesztési lehetőségekkel az oldalon, illetve a felső menüsorban – http://localhost/hegypasztor/.
az 1-es képernyő elérhető a 2-es képernyőről: Vezérlőpult menüpont, Tekintsük meg a honlapot link, illetve bal felül Hegypásztor Kör Oszkó
2. Kettes képernyő, az adminisztrátori felület, innen minden módosítható, és itt lehet “bejelentkezni” is honlap tulajdonosként – http://localhost/hegypasztor/wp-admin/.
a 2-es képernyő elérhető az 1-es képernyőről: bal felül Hegypásztor Kör Oszkó
3. Hármas képernyő, ez az amit szerkesztel-látod szerkesztői felület (angolul: wysiwyg – what you see is what you get), itt változtatható a grafikai sablon – azaz az oldal kinézete -, szerkeszthetőek a fejléc, a menü, a blog oldal címfelirata, az oldalsáv és a lábrész – http://localhost/hegypasztor/wp-admin/customize.php.
a 3-as elérhető az 2-es képernyőről: Vezérlőpult menüpont, A honlap testreszabása gomb
a 3-as elérhető az egyes képernyőről is: Testreszabás menüpont
a 3-as képernyő bal felső X-re kattintva bezárható, és vissza tudunk jutni a kiinduló képernyőre, ez lehet az 1-es ill. a 2-es is 🙂
Tipikus szerkesztési folyamatok a következőek:
Sablon módosítása, a kinézet “belövése” – ez a 3-as képernyőn a “Bekapcsolt sablon” – “Váltás” gombbal, illetve ugyanide jutunk a 2-es képernyőn a “Megjelenés” menüpont alól
Új bejegyzés, média (pl. fénykép), illetve oldal – ez elérhető mind az 1-es, mind a 2-es képernyőkről – az 1-es képernyő felső menüsávja shortcut-okat tartalmaz a 2-es képernyő megfelelő menüpontjaihoz
Egyéb tartalmak (fejléc, menü, widgetek az oldalsávban vagy a lábrészben, lábrész) szerkesztése a 3-as képernyő megfelelő menüpontjai alatt elérhetőek
Tehát már van egy honlap-vázunk WordPress-ben. De mi köze ennek az adatbázishoz? Ennek járunk ma utána. 🙂 A DbVisualizer egy JAVA-ban írt adatbázis-feltérképező szoftver. Van Debian “.deb” csomagban is, az alábbi linkről telepíthetjük.
Ezután jöhet a konfiguráció – új kapcsolat varázsló – pár lépésben. A DbVisualizer ún. JDBC-n (Java Database Connectivity) keresztül kapcsolódik a MySQL adatbázisunkhoz. Esetünkben reverse engineering-re fogjuk használni a szoftvert, azaz a kész adatbázisból nyerjük ki a “tervet”. 🙂
Megfelelő konfiguráció után a DbVisualizer gombnyomásra felrajzolja nekünk mind a 12 adatbázistáblát a “wordpress2019” sémában. Az alábbi ábra egy ún. ER-diagram (Entity-Relationship), magyarul EK-diagram (egyed-kapcsolat). A táblák közti kapcsolatok ugyan nincsenek jelölve, azonban indirekten léteznek. Ennyi az egész WordPress! 🙂
Egy adatbázison (sémán) belül az adatok táblákba vannak rendezve, azon belül mezők vannak, és sorokban adatok, hasonlóan egy fejléccel ellátott Excel-táblázathoz. Az adatbázisunk táblái (entitásai, egyedei) rendre:
wp_commentmeta
wp_comments
wp_links
wp_options
wp_postmeta
wp_posts
wp_term_relationships
wp_term_taxonomy
wp_termmeta
wp_terms
wp_usermeta
wp_users
Talán hihetetlenül hangzik, de a fenti 12 táblában minden WordPress oldal, blog bejegyzés (post), felhasználó (user), beállítás, megjegyzés és metaadatok – tehát minden elfér. Ha ügyesek vagyunk, megnézhetjük az egyes táblák mezőit is. Látható, hogy minden táblában van ID, azaz egyedi azonosító vagy elsődleges kulcs – lásd pl. wp_users tábla, bizonyos táblákban pedig hivatkozásként szerepelnek az egyedi azonosítók, ún. idegen kulcsként – lásd wp_usermeta. (Ezek volnának az indirekt kapcsolatok.) Nézzük meg e két tábla mezőit.
Ez az adatszerkezet egy gyakori “trükk” SQL alapú adatbázisoknál. Tetszőleges kulcsokkal (meta_key) tetszőleges értékeket, azaz meta adatokat (meta_value) tárolhatunk el egy felhasználóhoz. A “wp_usermeta” tábla értékeit a “user_id” mezőben lévő kulcsérték köti a “wp_users” táblához, miközben “umeta_id” néven egyedi azonosítója is van minden táblabejegyzésnek, azaz “sornak”. Később látni fogjuk, hogy miért jó dolog egyedi azonosítót adni minden adatbázis táblának. 🙂
Hogy mi az az SQL (Structured Query Language)? Egész röviden: önálló programnyelv; a séma és az adatbázis objektumok (pl. táblák) definiálása – DDL (Data Definition Language), az adatok lekérdezése (SELECT) – DQL (Data Query Language), az adatok változtatása (INSERT, UPDATE, DELETE) – DML (Data Manipulation Language), továbbá a DCL(Data Control Language) illetve a TCL (Transaction Control Language). Ennyi nagyjából. Bővebben az alábbi linken olvashatunk róla, magyarul.
A legtöbb webes alkalmazásnak az ún. CRUD felépítésnek kell megfelelnie. Ez pedig a Create (létrehoz), Read (olvas), Update (módosít) és Delete (töröl). A terminológia a perzisztens adattárolás alapja. Így tárolhatunk adatokat akár webes környezetben, ún. webes form-ok, azaz űrlapok segítségével. A CRUD-ot könnyen párosíthatjuk az SQL INSERT, SELECT, UPDATE és DELETE parancsokkal vagy akár a HTTP protokollal (bemutatása később). Részletek alább – sajna csak angolul.
És egy jó tanács a végére. Ne próbáljunk meg kézzel belejavítani a tábla-adatokba! Dobhat tőle egy hátast az egész WordPress rendszerünk. Elégedjünk meg az architekturális betekintéssel és mérnöki feltárással! 😀
Hogy miért választottam a WordPress-t? Mivel itt gyakorlatilag nem is kell programozni; ezt a rendszert elég testreszabni és feltölteni tartalommal. A beállítások nagy része programozási ismeretek nélkül is elvégezhető. 🙂
A telepítés előtt győződjünk meg róla, hogy a szerveren rendelkezésre áll-e adatbázis szerver (MySQL vagy MariaDB), Apache vagy nginx webszerver és telepítve van-e a PHP aktuális verziója. Ezekre ugyanis mind szükségünk lesz a saját és ingyenes WordPress oldalunk elindításához. Hogy hogyan győződhetünk meg arról, hogy minden szükséges rendszer telepítve van, és készen áll? Jó megoldás a phpinfo() parancs meghívása a következő módon.
Ezt a file-t ne hagyjuk később “kint’ a szerveren, mert ha valaki véletlenül megtalálja, akkor mindent kideríthet a szerverünk beállításairól! (A webszerver általában a “.php” kiterjesztésű file-okat értelmezi kódként, ezért pl. átnevezhetjük “.akarmi” kiterjesztésűre vagy törölhetjük is.) Nézzünk pár részletet a kimenetéből, ha megnyitjuk böngészőben a http://localhost/info.php cím alatt.
PHP Version 7.0.33-0+deb9u3 Apache Version Apache/2.4.38 (Debian) MysqlI Support enabled mysqli.default_port 3306 3306 Client API version mysqlnd 5.0.12-dev - 20150407 - $Id: b5c5906d452ec590732a93b051f3827e02749b83 $
Ezek az adatok úgy vélem magukról beszélnek. 🙂
A MySQL szerverhez unix domain socket-en keresztül és port alapon (3306) tudunk csatlakozni. A portot jól tesszük, ha kizárólag localhost-on engedélyezzük a tűzfalunkban – ez egyébként alapbeállítás -, a socket (mysqld.sock) pedig úgyis csak filerendszerben van – így kizárjuk az adatbázis közvetlen külső elérhetőségét, ezzel is növelve szerverünk biztonságát. 🙂
gvamosi@gergo1:~$ l /var/run/mysqld/ total 8 -rw-r----- 1 mysql mysql 6 Oct 5 01:11 mysqld.pid srwxrwxrwx 1 mysql mysql 0 Oct 5 01:11 mysqld.sock -rw------- 1 mysql mysql 6 Oct 5 01:11 mysqld.sock.lock
Ha tárhelyet bérlünk valahol, akkor általában gombnyomásra működik a WordPress telepítése. Én most a hagyományos megoldást mutatnám be röviden terminál használatával. A letöltéshez információkat az alábbi honlapon találunk.
A WordPress telepítése tényleg egyszerű. Legelőször is szükségünk lesz egy új MySQL adatbázisra, felhasználóval és jelszóval – ez tárhelybérlésnél gombnyomásra történik. Egy (MySQL) adatbázis kapcsolathoz négy fontos adatra lesz szükségünk: adatbázis neve, felhasználó neve és jelszava, illetve a hoszt neve. Konzolból az alábbi módon – SQL parancsok használatával – tudunk MySQL adatbázist létrehozni.
gvamosi@gergo1:~$ mysql -u root -p mysql> CREATE DATABASE dbname CHARACTER SET utf8 COLLATE utf8_general_ci; mysql> CREATE USER 'user'@'localhost' IDENTIFIED BY 'password'; -- minden jog hozzárendelése az adatbázishoz a felhasználónknak mysql> GRANT ALL PRIVILEGES ON dbname.* TO 'user'@'localhost'; mysql> FLUSH PRIVILEGES;
Ezután csupán ki kell bontanunk a letöltött állományt a megfelelő helyre, mint “gyökérbe”.
Eközben a következő – WordPress webes telepítés előtti – képernyő fogad bennünket a http://localhost/hegypasztor/ webcím alatt.
Ezután a wp-config-sample.php állományt át kell másolnunk a wp-config.php állományba, majd kitöltenünk az adatbázis-hozzáférést és a titkos kulcsokat – ahogy a magyar nyelvű dokumentáció írja – pl. egy vi editorral.
gvamosi@gergo1:/var/www/html/hegypasztor$ cp wp-config-sample.php wp-config.php gvamosi@gergo1:/var/www/html/hegypasztor$ vi wp-config.php
Mihelyst elkészülünk a wp-config.php file kitöltésével, és megnyomtuk a “Rajta!” gombot, az alábbi képernyőt láthatjuk.
Ezután a webes felületen pár mező (honlapnév, webes adminisztrátor felhasználó neve és jelszava) kitöltésével gombnyomásra települ a WordPress honlapunk.
És máris az első bejelentkezésünknél tartunk.
Ezután vethetünk egy pillantást az alap honlapunkra. Ez a kiindulási pontunk a fejlesztéshez! Mivel be vagyunk jelentkezve adminisztrátorként, ezért a képernyő tetején egy menüsort találunk.
Illetve megnézhetjük az adminisztrátori képernyőt, a vezérlőpulttal. 🙂
A 21. századra rárobbant az információs kor. A World Wide Web, azaz a WWW kora, az Internet multimédia-tartalommal bíró kommunikációs csatornája, a kiszolgáló oldali (web)szerverek – ez volna az Apache vagy az nginx -, és a kliens oldali böngészők – Chrome, Firefox, Edge – kommunikációjaként előálló interakció. Az egész Internet lényegében tekinthető egy online adatfeldolgozó, -tároló és -továbbító rendszernek. Ezért fontos beszélni az adatok tárolására és feldolgozására szolgáló többnyire SQL alapú adatbázis szerverekről is – ezek a MySQL vagy a MariaDB -, illetve a szerver oldali adatfeldolgozó script-ekről, azaz webszerverbe ágyazott szoftverrendszerekről is, melyek sok esetben Perl és PHP nyelveken íródnak. Fontos még említeni a kliens oldal legütősebb script-nyelvét, a JavaScript-et. Legismertebb képviselője a széles körben elterjedt JavaScript könyvtár, a jQuery (https://jquery.com). Az adatok továbbítása valójában a hálózaton keresztül valósul meg, mindig kliens-szerver kommunikációban – lévén ugyanis a szerver egyszerre több klienst is kiszolgál, továbbá a szerverek egymással is tudnak beszélgetni, de adott esetben egy kliens is egyszerre több szerverhez kapcsolódhat. 🙂 Jelen írás a fentiekben leírtak bemutatásával szeretne foglalkozni.
A webfejlesztés tehát minden esetben egy szoftver-rendszerben történik. Egy jó kiindulási szoftver környezet található az alábbi linken.
Ebben az írásomban szeretném az operációs rendszer, az adatbázis szerver, a webszerver és a kliens oldal összhangját három esettanulmányon keresztül bemutatni. Egyébként a fenti link alatt található XAMPP-ot hívják még LAMP-nak is. Szinte mindegy, hogy melyik variánst vesszük, ugyanaz az eredmény. 🙂 Ez az architektúra (szoftverépítészeti megoldás) igen elterjedt és nagy népszerűségnek örvend, többek között a nem enterprise (nem nagyvállalati vagy nagy volumenű üzleti) felhasználási területen.
Megjegyezném, hogy ezen technológiák ismerete enterprise megoldások kiindulási pontja lehet, illetve hogy nagy dolgokat is meg lehet a segítségükkel valósítani. 🙂
A három esettanulmány – három rész – rendre a következők lesznek:
A nyílt forráskódú, PHP-ban írt WordPress (https://hu.wordpress.org/), weboldalak, blogok és egyéb webes alkalmazások motorjának bemutatása egy webalkalmazáson keresztül.
A nyílt forráskódú CodeIgniter (http://codeigniter.hu/) PHP keretrendszer megismertetése egy webalkalmazáson keresztül. Ez a keretrendszer a letisztult MVC (Model – View – Controller) programtervezési mintát (Design Patterns) követi.
Végül lássuk egy szemléltető diagramon az MVC pattern-t. A lényege, hogy mindent a Controller (vezérlő) végez, a modellváltoztatást is, és a felhasználó nézetének változtatását is. 🙂
Apache, MySQL/MariaDB, Perl/PHP 