WordPress honlap szerkesztése, szerkesztési “utak”

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

A WordPress – és ami mögötte van: adatbázis és DbVisualizer

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.

https://www.dbvis.com/download

Installálni igen egyszerű.

root@gergo1:~# dpkg -i dbvis_linux_10_0_22.deb

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.

https://hu.wikipedia.org/wiki/SQL

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.

https://en.wikipedia.org/wiki/Create,_read,_update_and_delete

É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! 😀

I. rész – WordPress webfejlesztés – A WordPress telepítése

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.

gvamosi@gergo1:/var/www/html$ cat info.php
<?php
phpinfo();
?>

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.

https://hu.wordpress.org/download/

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

gvamosi@gergo1:/var/www/html/hegypasztor$ wget https://hu.wordpress.org/latest-hu_HU.tar.gz
..
gvamosi@gergo1:/var/www/html/hegypasztor$ tar xzvf latest-hu_HU.tar.gz
..
gvamosi@gergo1:/var/www/html/hegypasztor$ mv wordpress/* .

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

Mit értünk webprogramozás, webfejlesztés alatt

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.

https://www.apachefriends.org/hu/index.html

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.

https://hu.wikipedia.org/wiki/LAMP_(szoftvercsomag)

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:

  1. 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.
  2. 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.
  3. Harmadikként pedig a 30 éve folyamatosan fejlesztett Perl nyelven a szintén nyílt forráskódú Catalyst (http://www.catalystframework.org/, https://www.perl.org/about/whitepapers/perl-webframework.html), nem meglepő módon MVC alapú keretrendszer felhasználásával fogunk webalkalmazást írni. 🙂

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