Refactoring (a kód újra rendszerezése), templating (sablonok használata) és menü

A legutóbbi fejezetben megírtuk a Hello, Világ! oldalunkat. Most ezt egy kicsit újra rendszerezzük. Bár kétségkívűl jól mutat, most mégis eltávolítjuk a controller-ből a _controller utótagot. 🙂

Ezt néhány file-átnevezéssel, illetve pár sornyi kódmódosítással megtehetjük. A hivatkozások miatt (referenciák) ezt a műveletet nyilván körültekintéssel kell elvégeznünk. Így az oldalunkat az alábbi címen is elérhetjük.

http://localhost/apartman/index.php/apartments/index

Ahol az apartments a controller neve, az index pedig a megfelelő metódus. Ez egy ún. beszédes url, a RESTful architektúrának (https://hu.wikipedia.org/wiki/REST) megfelel.

CodeIgniter modell réteg az adatbázissal és a Hello, World!

Programozóknak ugyan nem kell bemutatni Hello, World! fogalmát, de most kell hogy beszéljünk róla. A mai fejezetben szeretnénk létrehozni az adatbázist MySQL-ben, legyártani a modell réteget, majd adattal feltölteni, és a weben megjelentíteni. Mindezt mind saját kézzel írt kóddal, lehetőleg kevés kódsorban megvalósítva! Ez a Hello, World! – Helló, Világ! példánkban.

https://en.wikipedia.org/wiki/%22Hello,_World!%22_program

Hozzunk létre egy adatbázist a MySQL szerverünkön a https://wlammpp.wordpress.com/2019/10/04/i-resz-wordpress-webfejlesztes-a-wordpress-telepitese korábbi fejezetben ismertetett módon. Van egy adatbázis dump-om, ezt kell “bejátszani”.

-- MySQL dump 10.13 Distrib 5.7.29, for Linux (x86_64)
-- Host: localhost Database: evaap_devel

-- Server version 5.7.29
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;
/*!40103 SET @OLD_TIME_ZONE=@@TIME_ZONE */;
/*!40103 SET TIME_ZONE='+00:00' */;
/*!40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */;
/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;
/*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;
--
-- Table structure for table apartments
DROP TABLE IF EXISTS apartments;
/*!40101 SET @saved_cs_client = @@character_set_client */;
/*!40101 SET character_set_client = utf8 */;
CREATE TABLE apartments (
id bigint(20) NOT NULL AUTO_INCREMENT,
name varchar(255) DEFAULT NULL,
address varchar(255) DEFAULT NULL,
created_at datetime NOT NULL,
updated_at datetime NOT NULL,
PRIMARY KEY (id)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8mb4;
/*!40101 SET character_set_client = @saved_cs_client */;
--
-- Dumping data for table apartments
LOCK TABLES apartments WRITE;
/*!40000 ALTER TABLE apartments DISABLE KEYS */;
INSERT INTO apartments VALUES (1,'Budapest I','VII. kerulet','2020-03-20 00:26:35','2020-03-20 00:26:35');
/*!40000 ALTER TABLE apartments ENABLE KEYS */;
UNLOCK TABLES;
--
-- Table structure for table reservations
DROP TABLE IF EXISTS reservations;
/*!40101 SET @saved_cs_client = @@character_set_client */;
/*!40101 SET character_set_client = utf8 */;
CREATE TABLE reservations (
id bigint(20) NOT NULL AUTO_INCREMENT,
name varchar(255) DEFAULT NULL,
email varchar(255) DEFAULT NULL,
phone varchar(255) DEFAULT NULL,
checkin date DEFAULT NULL,
checkout date DEFAULT NULL,
message text,
approved tinyint(1) DEFAULT NULL,
apartment_id int(11) DEFAULT NULL,
locale varchar(255) DEFAULT NULL,
created_at datetime NOT NULL,
updated_at datetime NOT NULL,
PRIMARY KEY (id)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8mb4;
/*!40101 SET character_set_client = @saved_cs_client */;
--
-- Table structure for table users
DROP TABLE IF EXISTS users;
/*!40101 SET @saved_cs_client = @@character_set_client */;
/*!40101 SET character_set_client = utf8 */;
CREATE TABLE users (
id bigint(20) NOT NULL AUTO_INCREMENT,
name varchar(255) DEFAULT NULL,
email varchar(255) DEFAULT NULL,
password varchar(255) DEFAULT NULL,
is_admin tinyint(1) DEFAULT NULL,
created_at datetime NOT NULL,
updated_at datetime NOT NULL,
PRIMARY KEY (id)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8mb4;
/*!40101 SET character_set_client = @saved_cs_client */;
--
-- Dumping data for table users
LOCK TABLES users WRITE;
/*!40000 ALTER TABLE users DISABLE KEYS */;
INSERT INTO users VALUES (1,'admin','gvamosi@linux.hu','manager',1,'2020-03-19 00:00:00','2020-03-19 00:00:00');
/*!40000 ALTER TABLE users ENABLE KEYS */;
UNLOCK TABLES;
/*!40103 SET TIME_ZONE=@OLD_TIME_ZONE */;
/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;
/*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;
/*!40014 SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS */;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
/*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;
-- Dump completed on 2020-04-07 14:05:14

Az alábbi módon:

gvamosi@gergo1:/var/www/html/apartman$ mysql -u root -p
Enter password:
Welcome to the MySQL monitor. Commands end with ; or \g.
Your MySQL connection id is 50
Server version: 5.7.29 MySQL Community Server (GPL)
Copyright (c) 2000, 2020, Oracle and/or its affiliates. All rights reserved.
Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.
Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.
mysql> CREATE DATABASE apartman_devel CHARACTER SET utf8 COLLATE utf8_general_ci;
Query OK, 1 row affected (0.01 sec)
mysql> CREATE USER 'apartman'@'localhost' IDENTIFIED BY 'apartman1';
Query OK, 0 rows affected (0.02 sec)
mysql> GRANT ALL PRIVILEGES ON apartman_devel.* TO 'apartman'@'localhost';
Query OK, 0 rows affected (0.00 sec)
mysql> FLUSH PRIVILEGES;
Query OK, 0 rows affected (0.01 sec)
mysql> \q
Bye
gvamosi@gergo1:/var/www/html/apartman$ mysql -u apartman -p apartman_devel < db/create_and_insert_tables.sql
Enter password:
gvamosi@gergo1:/var/www/html/apartman$

Hozzuk létre az alkalmazás modell rétegét! Ehhez először be kell konfigurálnunk az adatbázist.

gvamosi@gergo1:/var/www/html/apartman/application$ vi config/database.php

$db['default'] = array(
'dsn' => '',
'hostname' => 'localhost',
'username' => 'apartman',
'password' => 'apartman1',
'database' => 'apartman_devel',
'dbdriver' => 'mysqli',
'dbprefix' => '',
'pconnect' => FALSE,
'db_debug' => (ENVIRONMENT !== 'production'),
'cache_on' => FALSE,
'cachedir' => '',
'char_set' => 'utf8',
'dbcollat' => 'utf8_general_ci',
'swap_pre' => '',
'encrypt' => FALSE,
'compress' => FALSE,
'stricton' => FALSE,
'failover' => array(),
'save_queries' => TRUE
);

Ez eddig 3 string (karakterlánc)! 🙂 Aztán meg kell írnunk az Apartments_model.php file-t!

gvamosi@gergo1:/var/www/html/apartman/application$ vi models/Apartments_model.php

<?php
class Apartments_model extends CI_Model {
public function get_last_ten_entries()
{
$query = $this->db->get('apartments', 10);
return $query->result();
}
}

Ez 8 sor. 🙂 Most írjuk meg a controller-t!

gvamosi@gergo1:/var/www/html/apartman/application$ vi controllers/Apartments_controller.php
<?php
class Apartments_controller extends CI_Controller {
public function index() {
echo 'Helló, Világ!!';
$this->load->model('apartments_model');
$data['query'] = $this->apartments_model->get_last_ten_entries();
$this->load->view('apartments', $data);
}
}

Ez újabb 9 sor! Nem sok ez egy listáért? És akkor írjuk meg a view-t is!

gvamosi@gergo1:/var/www/html/apartman/application/views$ vi apartments.php

<ul>
<?php foreach ($query as $item):?>
<li><?php echo $item->address;?></li>
<?php endforeach;?>
</ul>

Ez húzós 5 sor! 🙂 Állítsuk be az útvonalakat, az autoload-ot (még két sor :)), majd hívjuk meg a következő módon a böngészőnkből az “oldalunkat”!

gvamosi@gergo1:/var/www/html/apartman/application$ vi config/routes.php
$route['apartmanok'] = 'apartments_controller/index';

gvamosi@gergo1:/var/www/html/apartman/application$ vi config/autoload.php
$autoload['libraries'] = array('database','session');

http://localhost/apartman/index.php/apartmanok

Listázza az egy darab apartmanunk címét, Budapesten. Siker! 🙂

Airbnb apartman foglalás – esettenulmány – PHP CodeIgniter keretrendszerben

Amint megígértem, ebben az évben folytatom, és remélhetőleg be is fejezem a webprogramozásról szóló online könyvemet. 🙂

Hogy jobban megértsük a webprogramozást, egy kis architektúrális ismertetőt kell tartsak. Általánosságban már szóltam a kliens-szerver felépítésről (https://wlammpp.wordpress.com/2019/10/03/mit-ertunk-webprogramozas-webfejlesztes-alatt). Egy webes alkalmazás a felhasználóval a böngészőn (browser) keresztül “lép interaktív kapcsolatba”. Ez azt jelenti, hogy a felhsználó egy böngésző ablakban illetve tabfülön keresztül látja illetve használja a grafikus felhasználói felületet (GUI – graphical user interface, ide tartozik még a népszerű Ui / UX Design fogalma, vagyis a felhasználói felület és élmény tervezés). A felhasználó az alkalmazás funkcióit a böngészőben megjelenő felületen keresztül éri el: elolvas információkat, regisztrál egy webes űrlapon (formon) keresztül, keres, navigál, “kattint” (click-el). Ezek közül komolyabb programozást az űrlapkitöltés és a keresés igényel, illetve a különböző grafikai látványelemek is.

Az egész webprogramozás illetve -fejlesztés azért tűnhet bonyolultnak, mert egyrészt kellenek a “szerver oldali” dolgok: egy adatbázis – esetünkben relációs -, amit az ún. SQL nyelven lehet manipuláni, lekérdezni, feltölteni, frissíteni illetve törölni (https://hu.wikipedia.org/wiki/SQL), továbbá egy beágyazott, illetve szerver oldalon értelmezett (ún. script) nyelv, ez a PHP 7-es verzió konkrét esetünkben (https://www.php.net/), amely a funkcionalitást, az “üzleti folyamatot” valósítja meg (implementálja). A PHP Hyprtext Preprocessor-nak hirdeti magát, ami azt jelenti, hogy a HTML nyelven (ez a weblapok nyelve) írt hypertext-be van beágyazva, amit a webszerverünk megfelelő modulja értelmez, amikor valaki az adott weboldalt a böngészőjében megnyitja. Tehát nincs előre lefordítva, mint például egy C nyelven írt kernel modul (Linux), hanem “on the fly” fordul (compile), és “fut” (run). Ezt szemléltetném is egy pár soros kódban.

<!DOCTYPE html>
<html>
<head>
<title>Lapcím</title>
</head>
<body>

<h1>Ez egy címsor.</h1>
<p>Ez egy bekezdés.</p

<!-- Ez egy megjegyzés. Ide jön a PHP kódrészlet. -->

<?php
phpinfo();
?>

</body>
</html>

Ebben a rövid kódrészletben (snippet) ún. HTML tag-eket láthatunk. Az eleje egy dokumentum típus megjelölés, majd html, head – fejléc, body – törzs olvashatóak. Látható, hogy <? ?> jelek között van a PHP kódrészlet, ami konkrétan egy hosszú és részletes kiírást eszközöl a szerverünk beállításáról, ha megnézzük böngészőben (írtam már róla itt: https://wlammpp.wordpress.com/2019/10/04/i-resz-wordpress-webfejlesztes-a-wordpress-telepitese). Ezek a tag-ek mind “kacsacsőrök” között vannak. Ez a leíró nyelvek sajátossága. Az XML is ilyen formátumú. 🙂

A HTML oldal önmagában statikus, ha pl. PHP kódrészletet nem tartalmaz. Lehet benne hivatkozás képre, hangra, videóra, tehát Hypertext, ugyanakkor nem igényel szerveroldali processzálást (feldolgozást). Ezért a szerveren statikus oldalként kerül kiszolgálásra. Erre általában az oldalt tartalmazó állomány nevének kiterjesztése utal, ez többnyire .html – PHP oldalak esetében pedig .php. A nagy különbség egy “honlap” és egy “webalkalmazás” között abban rejlik, hogy milyen és mennyi “kód” van mögötte és benne a szerveren, illetve a kliens oldalon JavaScript formájában, értsd: hogy mennyire interaktív. Alábbiakban egy kis összefoglaló a HTML struktúráról, a tag-ekről.

<!-- Nyitó és záró tag, közte a tartalom. -->
<tagnev>Töltelék.</tagnev>

<!-- Önmagában záródó tag (XML helyes), paraméterekkel. -->
<tagnev parameter1="ertek1" parameter2="ertek2" />

<!-- A legegyszerűbb "beágyazás". -->
<tag1>
<tag2 />
</tag1>

Ha ez már bonyolult volna, szólnom kell még a kliens oldalon fontossá váló komponensekről. Ezek az előbbiekben taglalt az oldalak alapvető struktúrájáért és megjelenéséért felelős HTML (Hypertext Markup Language – https://www.w3schools.com/html/), a látványért felelős CSS (https://hu.wikipedia.org/wiki/Cascading_Style_Sheets, https://www.w3schools.com/css/) illetve a dinamikus működésért felelős JavaScript (https://www.w3schools.com/js/) nyelveken implementált böngészőben futó, “héj” réteg. A könyv legelején taglalt MVC architektúra (Model – View – Controller) View – nézet rétegéről szól ez a kliens oldali rész. A dinamikus működést biztosító JavaScript, ha AJAX-ról (https://hu.wikipedia.org/wiki/Ajax_(programoz%C3%A1s)) beszélünk, akkor lehet “okos” Controller – vezérló működésű is, sőt bizonyos szempontból még Model – adatszerkezet érintettségről is beszélhetünk, amennyiben XML-formátumban történik az adatátvitel pl. egy kliens oldali űrlap (form) és a szerver oldali Controller között.

A szerveroldali részek azonban a Model és a Controller rétegbe tartoznak. Technikailag ugyan a View is a szerver oldalon van, ámde csupán a böngészőben válik látvánnyá. Ha jól implementáltuk (programoztuk) az alkalmazást, az architektúrális elveknek megfelelően, akkor elválnak egymástól a rétegek. Ettől áttekinthető és karbantartható marad a kódunk. Sokkal kisebb a hibalehetőség, illetve egyszerűbb továbbfejleszteni, módosítani és dokumentálni. Hogy ezt az architektúrális szétválasztást tényleg meg is tehessük, segítségül hívtuk a CodeIgniter (https://codeigniter.com/) keretrendszert (framework-öt).

A CodeIgniter-t (3-as verzió) egész egyszerűen letöltjük (https://codeigniter.com/download), és kicsomagoljuk a webszerverünk gyökér könyvtára alatt létrehozott “apartman” könyvtárba.

gvamosi@gergo1:/var/www/html$ sudo mkdir apartman
[sudo] password for gvamosi:
gvamosi@gergo1:/var/www/html$ sudo chown gvamosi:gvamosi apartman/
gvamosi@gergo1:/var/www/html$ cd apartman/
gvamosi@gergo1:/var/www/html/apartman$ cp ~/Downloads/bcit-ci-CodeIgniter-3.1.11-0-gb73eb19.zip .
gvamosi@gergo1:/var/www/html/apartman$ unzip bcit-ci-CodeIgniter-3.1.11-0-gb73eb19.zip
gvamosi@gergo1:/var/www/html/apartman$ mv bcit-ci-CodeIgniter-b73eb19/* .
gvamosi@gergo1:/var/www/html/apartman$ l
total 3836
drwxr-xr-x 14 gvamosi gvamosi 4096 Sep 19 2019 application
-rw-r--r-- 1 gvamosi gvamosi 2758337 Apr 6 11:30 bcit-ci-CodeIgniter-3.1.11-0-gb73eb19.zip
drwxr-xr-x 2 gvamosi gvamosi 4096 Apr 6 11:32 bcit-ci-CodeIgniter-b73eb19
-rw-r--r-- 1 gvamosi gvamosi 594 Sep 19 2019 composer.json
-rw-r--r-- 1 gvamosi gvamosi 6841 Sep 19 2019 contributing.md
-rw-r--r-- 1 gvamosi gvamosi 1117463 Apr 6 11:23 framework-4.0.2.zip
-rwxr-xr-x 1 gvamosi gvamosi 10255 Sep 19 2019 index.php
-rw-r--r-- 1 gvamosi gvamosi 1114 Sep 19 2019 license.txt
-rw-r--r-- 1 gvamosi gvamosi 2343 Sep 19 2019 readme.rst
drwxr-xr-x 8 gvamosi gvamosi 4096 Sep 19 2019 system
drwxr-xr-x 14 gvamosi gvamosi 4096 Sep 19 2019 user_guide

Ezek után megnézhetjük a “helyi” webszerverünket, hogy sikerült-e a telepítés. Írjuk be a kedvenc böngészőnkbe (én a Google Chrome-ot használom) a következő címet: http://localhost/apartman/. 🙂

Siker! 🙂 Jól látható, hogy vagy 5 nyelven kell tudnunk kódolni egy átlagos webalkalmazáshoz. 😀 Megjegyzem, hogy ez az esettanulmány ugyan konkrét példát mutat be, azonban általános érvényű az architektúrában és főbb irányelveiben.

Webcím: URL-képzés, Apache document root, keresőbarát URL, HTTP GET és POST metódusok

Az URL (Uniform Resource Locator), mint URI (Uniform Resource Identifier, egységes erőforrás-azonosító) többnyire szinonímája a webcímnek, holott valójában nem csak webcímet jelöl. Tény azonban az, hogy webcímként az ún. namespace-ben (névtér) egyedileg azonosít az egész világhálón egy helyet. 🙂

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

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

URL-ek, a teljesség igénye nélkül:

  1. http://dummy.restapiexample.com/ – ez már kacsintás a REST (Representational State Transfer) témakörbe, egy “sima” HTTP (HyperText Transfer Protocol) webcím, a 80-as porttal kommunikál (így is működik: http://dummy.restapiexample.com:80/)
  2. https://hu.wikipedia.org/wiki/REST – ez egy napjainkra elterjedt biztonságos (HTTPS) webcím (alternatívája a https://hu.wikipedia.org:443/wiki/REST – a portszámot elhagyjuk a gyakorlatban)
  3. ftp://ftp4.de.freesbie.org/pub/linux/metalab/system/emulators/wine – ez egy klasszikus FTP (File Transfer Protocol) cím, szintén kódolatlan, tökéletes file-ok letöltéséhez, és a böngészőnkbe is simán beírható! 🙂 Részletek: https://hu.wikipedia.org/wiki/File_Transfer_Protocol
  4. és akkor a végére egy érdekesség az Internet múltjából – a Gopher -, ilyen is van: http://gopher.quux.org:70/ – natív címen: gopher://gopher.quux.org/1/ – persze ezt már a Chrome böngészőm sem ismeri 🙂

Akkor mostanra kezdjük érteni a cím előtagját és a portszámot. Mit lehet még belefoglalni egy URL-be? Lehet benne pl. felhasználónév és jelszó is! Pl. “ftp://felhasznalonev:jelszo@szervern.ev/konyvtar1/konyvtar2/“. Aztán megnézhetjük a szervernév utáni törtvonal (“/” – perjel) határolta részeket. Ezek egy alap Linux rendszerben az ún. Document root – web gyökér – könyvtárunkban sima könyvtárnevek a filerendszerben. 🙂 Az Apache webszerverünk fordítja át a külvilág felé webes tartalommá. Egy ilyen könyvtárban kérhetjük a szerverünket egy automatikus index oldal megjelenítésére, de az nem túl biztonságos. Általában egy index.php (dinamikus script) vagy index.html (többnyire statikus adat) file kell legyen minden ilyen publikus könyvtárban, hogy az Interneten is megjelenhessen a tartalma. Amit index.html file-ba teszünk azt a sima “/” cím alatt láthatjuk. Tehát ha az Apache Document root-unk “/var/www/html“, a hosztnevünk nextweb.hu, akkor a “/var/www/html/index.html” file az Interneten a böngészőnkben a http://nextweb.hu/ cím alatt látszódik. Megjegyzem, hogy a záró törtvonal a webcím végén nem fontos. 🙂

Szólnunk kell a speciális (pl. magyar ékezetes) karakterek sorsáról URL-ben. Ugyanis nem lehetnek benne igazán az ún. ASCII karaktereken kívül mások. A ” “, space – üres – karaktert pl. “+” jellel vagy “%20”-ként lehet kódolni. Részletesebben az alábbi link alatt olvashatunk erről.

https://www.w3schools.com/tags/ref_urlencode.asp

Fontos lehet a DNS-ről korábban írtak (https://gvamosi.wordpress.com/2019/09/21/ethernet-bridging-switching-routing-es-a-linux-router-tablaja/) figyelembevételével az ún. virtuális hoszting témaköre. Egy feloldott IP-cím “alatt” több szervernév is van a gyakorlatban. Az Apache webszerverrel ezt ún. virtuális szerverek, hosztok (VirtualHost) konfigurálásával és futtatásával oldhatjuk meg. Így lehetséges egy webtárhely szolgáltatónál több webcím regisztrálása és kiszolgálása! Mielőtt azonban ISP-t (Internet Service Provider, azaz Internetszolgáltató) gründolnánk a lakásunkban, elmondanám, hogy azért ahhoz kissé több kell egy PC-nél (cluster-be, fürtbe kapcsolt számítógépek, terhelés-elosztás, azaz load balancing, RAID – redundáns, hibajavító-tűrő módon felépített háttértártömbök, etc.) 🙂

Visszatérve az URL-ekhez. Az URL-ekben, ahogy pl. egy google keresésben láthatjuk, kulcs-érték párokat is “átadhatunk” a szerver oldali programocskánknak (URL-ben lévő paraméterek a GET metódussal jutnak el a szerver oldalra): https://www.google.com/search?q=alma&oq=alma. Itt a “q” értéke “alma”, az “oq” értéke szintén “alma”. Így rákereshetünk a világ legjobb és legnagyobb keresőjében az “alma” kifejezésre. Elég csak a “q”-t megadni, de akkor nem láthattuk volna, hogy a “&” jel a kulcs-érték párok elválasztására való, míg ezeket a “?” választja el az URL első részétől. Na ez a nem keresőbarát. 😀 A google keresőmotorja nem keresőbarát. Persze minek is lenne az! 😀 A keresőbarát jóval közelebb áll a REST megközelítéshez. Világos, könyvtár-szerű, beszédes nevekkel ellátott URL-ek. Pl. ha ID kell bele, akkor nemakarmi.php?id=111“, hanem “/akarmi/111“. A keresők a web feltérképezéséhez ún. robotokat használnak, automatikus programokat – ugyanúgy, akár az ember egy böngészőben, csak egy robot tölti le, és indexeli az oldalt. Amennyiben értelmes kifejezések vannak már magában az URL-ben is, úgy máris eggyel jobb helyen vagyunk a találati listán, mivel a keresők kulcsszónak fogják venni az URL-ben találtakat is! A WordPress rendszerünk szerencsénkre keresőbarát, “beszédesURL-eket használ, ráadásul ún. “permalink“-eket is. Hiszen az is fontos, hogy fél év múlva is megtalálható legyen egy októberi írás, tehát legyen rá egy “permalink“, azaz egy állandó – és beszédeshivatkozás. 🙂

Ide beszúrom – csak az érdekesség kedvéért egy kacsintás az enterprise világába -, hogy a REST HTTP szoftverarchitektúra témaköréhez tartozik a hozzá hasonlóan felépített ún. “RESTful Web services” is. Csupán hogy valamit írhassak a Webszolgáltatásokról (Webservice). 😀

Végül nézzük meg a leggyakoribb HTTP metódusokat, a GET és a POST témákat. A GET-ről írtam a google kereső URL megadásánál. Az nagyjából ennyi. A POST metódussal webes formokat, vagyis ürlapokat küldhetünk el a szervernek, ahol ezek a GET metódussal kapott kulcs-érték párokhoz hasonlóan feldolgozásra kerülnek. Egy file feltöltés pl. tipikusan POST metódussal történik. Bővebben az alábbi linkeken tájékozódhatunk. 🙂

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

https://stackoverflow.com/questions/8659808/how-does-http-file-upload-work

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 fogunk webalkalmazást, azon belül is klasszikus CGI-t (Common Gateway Interface https://hu.wikipedia.org/wiki/Common_Gateway_Interface) illetve FastCGI-t í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. 🙂