Selenium teszt a böngészőből

Először is letöltjük a Selenium IDE-t a https://www.selenium.dev/ webcímről. Ez egy ipari standard a webalkalmazások automatizált teszteléséhez. Van robusztus megoldása is, a Selenium WebDriver, illetve elosztott teszteléshez a Selenium Grid. Nekünk bőven megfelel egy Chrome plugin a fejlesztő Debian 10.7 Linux gépemre – ahol Chrome-ot használok. Ez a plugin Selenium IDE része. Segítségével elég egyszerűen megnyomhatjuk a “like” gombot mondjuk ezerszer. 🙂

Miután beinstalláltuk a Chrome plugin-t (bővítményt), felvesszük a teszt esetet mintegy makróként, majd lejátszuk. Látható, hogy növekszik a like-ok száma. Lássuk a record/play képernyőrészleteket!.

Ennyi dióhéjban a webalkalmazások tesztelése. Tetszőleges teszt-utakat, teszt-eseteket vehetünk fel egy bonyolultabb weblap esetén, ahogy itt ezt egyszerűen “click”-nek neveztük a “mylike” nevű tesztünkben. Innentől ezt a scriptet bejátszhatjuk a robusztus script-futtató Selenium alrendszerekbe is akár. 🙂

A futtatást nézve egy másodperc alatt lefut a teszt oldal újratöltéssel együtt – persze ez nem mérvadó adat. Többet a skálázhatóságról, azaz a teljesítményről csak akkor tudhtunk meg, ha automatizáljuk pl. Selenium JavaScript motorral a végrehajtást.

A Selenium JavaScript kliens és WebDriver az alábbi oldalakról tölthető le:

https://www.selenium.dev/downloads/

https://www.npmjs.com/package/selenium-webdriver/v/4.0.0-alpha.8

Egyelőre többet erről nem árulok el, mert elvenném a tesztelők kenyerét. Annyit azonban elmondhatok programozóként, hogy egyszerű JavaScript-ben automatizálható a tesztelési folyamat, sőt: terheléses tesztelés is könnyen elvégezhető.

Teszt-világban kétféle filozófia létezik amúgy: ellenséges tesztelő (és coder) illetve a barátságos. Én ez utóbbit támogatom. Együttműködve jobb eredményt érhet el a fejlesztő és a teszt csapat. 🙂

Biztos ami biztos, ráeresztettem a https://wlammpp.wordpress.com/2020/08/14/meres-cgi-bash-perl-c-fastcgi-vagy-mod_perl-melyik-a-gyorsabb/ fejezetben írt parancssori script-et 1000x, hogy mennyi idő alatt fut le a mod_perl “like” alkalmazásunk tesztüzemben. Íme az eredmény.

gvamosi@gergo1:~/Documents/http_meres$ l
 total 4
 -rwxr-xr-x 1 gvamosi gvamosi 196 Aug 14 04:31 1000times_curl.sh
gvamosi@gergo1:~/Documents/http_meres$ ./1000times_curl.sh http://localhost/perl/mylike-dbi.cgi
 1610127040.356192334
 1610127051.815938599
 11.459746265

11,5 másodperc – ez adatbázis eléréssel 1000 lekérésre nem rossz teljesítmény! Nos, Mr. Zuckerberg, érdeklődik az ultragyors like-megoldásom iránt? 🙂

A “like” gomb működése és a cookie-k

Nézzük a két részletet, amelyek az előző részből kimaradtak. Az első rész a számláló növeléséért felelős. Ezt egy sima adatbázis UPDATE végzi a DBI interfészen keresztül. Fontos, hogy a finish() metódussal felszabadítsuk az utasítást, különben “lógna” a levegőben azaz a memóriában. A cookie-zás (sütizés) az egy kliensből történő többszöri like-olás megakadályozását szolgálja és az üzenetfejlécben állítjuk illetve kérdezzük le, mégis teszt célokból jelen kódban ki van “ütve”.

 my $cookie = $r->headers_in->get('Cookie');
 my $uri = URI::Encode->new( { encode_reserved => 1 } );
 my $uri_encoded_referer = $uri->encode($http_referer);
 #print $uri_encoded_referer;
 my $wasliked = $cookie ne '' && $cookie =~ /$uri_encoded_referer/;
 if ($like && ! $wasliked ) {
  # increment counter
  my $sthupd = $dbh->prepare('UPDATE mylike SET counter = counter + 1 WHERE approved = 1 and referer = ?');
  $sthupd->execute($http_referer);
  $sthupd->finish();

  my $cookie = CGI::Cookie->new(-name  => 'mylike'.$http_referer,
                                -value => 'SET');
  $r->headers_out->set('Set-Cookie' => $cookie);
  $wasliked = 1;

  # !! TEST ONLY !! temporary turn off cookie-mechanism !! COMMMENT OUT FOLLOWING TWO LINES FOR USE !!
  $r->headers_out->set('Set-Cookie' => '');
  $wasliked = 0;
 }

A like változó értékadása az előző részben szerepel, a GET metódus révén átadott paraméterként kerül kiértékelésre. Az alábbi gomb onclick javascript eseményéből kerül meghívásra like=1 URI változóként.

my $req = CGI->new($r);
my $like = $req->param('like');

A második kimaradt részecske maga a “like” gomb megjelenítéséért felelős. Ha már like-oltuk az oldalt, akkor disabled a gomb, azaz nem lehet többször megnyomni. 🙂

 print "<input type=\"button\" onclick=\"\$('#mylike').load('http://localhost/perl/mylike-dbi.cgi?like=1');\" value=\"like\" ".($wasliked?'disabled ':'')."/>\n";

És akkor nézzük meg a kimenetet!

Ennyi! That’s all! 🙂

Megjegyzés: azért a felhasznált javascript miatt ügyelni kell arra, hogy a site-unk include-olja script forrásként a jquery lib-eket.

Az utolsó részben megnézzük, hogyan lehet letesztelni illetve a teherbírását megmérni a like modulunknak.

A like-számlálójának működése, a REFERER a HTTP fejlécből

Minden további leírás helyett ideollózom a mylike-dbi.cgi azon részeit, amelyek a like-ok számának megjelenítéséért felelősek, illetve amelyek az első bejegyzés létrehozására alkalmasak.

#!/usr/bin/perl

use strict;
use warnings;
use DBI;
use Apache2::RequestRec ();
use Apache2::RequestUtil ();
use CGI;
use CGI::Cookie;
use URI::Encode;


my $r = Apache2::RequestUtil->request;

my $req = CGI->new($r);
my $like = $req->param('like');
#print $like;
my $http_referer = $ENV{'HTTP_REFERER'};

my $dbh = DBI->connect('DBI:mysql:mylike', 'mylike', 'mylike1'
                   ) || die "Could not connect to database: $DBI::errstr";

if ($http_referer) {

 # LIKE BUTTON CODE WAS HERE ##################

 my $sth = $dbh->prepare('SELECT id FROM mylike WHERE approved = 1 and referer = ?');
 $sth->execute($http_referer);
 my @result = $sth->fetchrow_array();
 my $len = @result;
 #print "numof result $len\n";
 $sth->finish();

 if ($len == 0) {
  # insert data into the links table
  my $sql = "INSERT INTO mylike (referer) VALUES(?)";

  my $stmt = $dbh->prepare($sql);

  # execute the query
  if($stmt->execute($http_referer)) {
   # ok
   #print "Mylike $http_referer inserted successfully";
  }

  $stmt->finish();
 }

 $sth = $dbh->prepare('SELECT counter FROM mylike WHERE approved = 1 and referer = ?');
 $sth->execute($http_referer);
 @result = $sth->fetchrow_array();

 print "$result[0] like(s)<br>\n";

 # LIKE BUTTON CODE WAS HERE ##################

 $sth->finish();
 
} else {
 # test

 my $results = $dbh->selectall_hashref('SELECT * FROM mylike', 'id');
 foreach my $id (keys %$results) {
  print "!!TEST!! ID $id: referer is $results->{$id}->{'referer'}, counter is $results->{$id}->{'counter'}\n";
 }

}

$dbh->disconnect();

A kód magyarázata.

Kivesszük a fejlécből a HTTP_REFERER-t. Ha ez definiált, akkor “éles” működés, ha nem akkor tesztüzemmód. Tesztüzemben az alábbi kimenetet kapjuk.

Látható, hogy két REFERER szerepel az adatbázisunkban. Ezeket sorolja fel tesztüzemmódban a script.

Éles üzemnél megvizsgálja a programunk, hogy létezik-e adatbázis-bejegyzés adott REFERER-rel. Ha még nincs, létrehoz egyet 0-ás like-oltsággal. 🙂 Ezután egy sima print utasítással kijelzi a kedvelések számát.

A következő részben megnézhetjük magának a “like” gombnak is a működését és a mögötte álló programkódot is. Ebben a forrásban ezt a

# LIKE BUTTON CODE WAS HERE ##################

részek jelölik.

A SELECT-jeinkben az approved = 1 az adminisztrátori funkció további lehetőségét hordozza magában. Tehát le lehet “tiltani” egy-egy beágyazást.

Látható a kód elején a use kulcsszavaknál, hogy használunk egynéhány modult. 🙂 Szinte gyerekjáték a Perl programozás.

Megjegyzem, hogy ez a like megvalósítás különböző webcímű (URI) weboldalanként ad lehetőséget like-olásra. Egy webcímen belül több like nem lehet. Nem a tökély a cél, csupán a megvalósíthatóság bemutatása.

A Hello World! mod_perl DBI alkalmazás

A /etc/apache2/conf-enabled/mod_perl.conf file-t az alábbiak szerint módosítottuk.

PerlModule ModPerl::Registry

Alias /perl /var/www/perl
<Directory /var/www/perl>
   AddHandler perl-script .cgi .pl
   PerlResponseHandler ModPerl::Registry
   Options +ExecCGI
</Directory>

Lehet saját handler-t is írni, de most enm tértünk ki erre a lehetőségre. 🙂

Nézzük a hello-world-dbi.cgi programocskánkat majd a beágyazását az apartman “Képek” oldalába.

#!/usr/bin/perl

use strict;
use warnings;
use DBI;
use Apache2::RequestRec ();
use Apache2::RequestUtil ();

my $r = Apache2::RequestUtil->request;

print "The referer in your HTTP-Header is: ", $ENV{'HTTP_REFERER'}, "\n";

my $dbh = DBI->connect('DBI:mysql:mylike', 'mylike', 'mylike1'
               ) || die "Could not connect to database: $DBI::errstr";

print "<br>\n";

my $results = $dbh->selectall_hashref('SELECT * FROM mylike', 'id');
foreach my $id (keys %$results) {
 print "Value of ID $id is $results->{$id}->{'referer'}\n";
}

$dbh->disconnect();

Használjuk a DBI és az új Apache2-es Request modulokat, majd lekérdezzük a HTTP_REFERER-t illetve egy select-tel belefetchelünk az adatbázisba. 🙂

Figyelem! Nagyon fontos a helyes beállítás az apache config oldalon.

A kis appunkat beágyazzuk mint widget-et az alábbi módon.

<div id="mylike"></div>
<script>$("#mylike").load("http://localhost/perl/hello-world-dbi.cgi</script>

És akkor lássuk az eredményt.

A “like” alkalmazás előtt

Mit is kell tudjon egy tetszőleges oldalba beágyazható like alkalmazás? Tulajdonképpen esetünkben arról van szó, hogy egy tetszőleges oldalon a weblapról egy tetszésnyilvánítást rögzíthessünk illetve kijelezzük a tetszésnyilvánítások számát. Nyilvánvalóan adatbázisra lesz szükségünk a dinamikus működés biztosításához.

I. Először is két részre kell bontsuk a megvalósítást. Van egy számláló-kijelzés funkciónk, azaz hogy hány like volt eddig illetve egy “like” gomb, hogy a számláló értékét növelhessük. Továbbá beágyazhatóvá kell tennünk egy tetszőleges weboldalba a funkciót. Innentől like-widget-ről beszélhetünk (https://hu.wikipedia.org/wiki/Vez%C3%A9rl%C5%91elem).

II. Másodszor is hozzá kell kötnünk a like widget-ünket a megjelenés helyéhez. Ez a funkcionalitás a REFERER HTTP fejléc attribútum adatbázisban letárolásával és vizsgálatával oldható meg. Ez az attribútum a hivatkozott oldal címét tartalmazza (https://hu.wikipedia.org/wiki/Referer). Innen fogjuk tudni, hogy melyik a “hívó” webcím.

III. Harmadszor pedig meg kell vizsgálnunk, hogy a like funkciót felhasználóhoz vagy böngésző példányhoz kössük-e nyilvánvalóan azért, hogy ne lehessen egy személynek többször like-olnia ugyanazon a helyen. Ha felhasználóhoz kötjük, úgy a facebook stílusú megoldást kapjuk. Ez nekünk azonban túl bonyolult volna, így egyszerűen a böngészőben fogunk letárolni egy cookie-t, hogy az adott kliensen már történt egy like-olás azaz egy tetszésnyilvánítás adott webcímre.

A tervezési megfontolások nagyjából ennyit tesznek ki. Még foglalkozhatnánk a színes-szagos külcsínyről is, de azt most elhanyagoljuk. Egyszerűen egy félkövér szám lesz a like-ok száma, alatta pedig sortöréssel egy “like” feliratú gomb. Ha nem “szürke” azaz “disabled”, akkor adott kliens még nem like-olt, azaz lehet like-olni. Ennyi. 🙂

Mérés – CGI (bash/perl/C), FastCGI vagy mod_perl? Melyik a gyorsabb? :)

És akkor jöjjön az igazság órája! Nézzük meg, hogy az előző két fejezet kis webalkalmazásai közül melyek a leggyorsabbak. Természetesen egy komplex webalkalmazás mérése beszédesebb volna, de reményeim szerint 1000 mérésből a curl programcsomag segítségével egy egyszerű script segítségével is ki tudjuk deríteni, hogy mi a helyzet.

Kiindulás. A rendszer load-ja (leterheltsége) az utolsó 5 percben 1,19. Alacsony. Ez ahogy később kiderült, nem is válltozik. 🙂 És igen, a notebook 161 napja nem volt újraindítva. 🙂

gvamosi@gergo1:/var/www/perl$ uptime
 04:07:48 up 161 days,  5:02,  1 user,  load average: 1.68, 1.19, 1.02

Nézzük a mérést végző script-ünket!

#!/bin/bash

START=`date +%s.%N`
echo $START
for ((i=1;i<=1000;i++)); 
do 
	curl -s $1 2>&1> /dev/null
done
END=`date +%s.%N`
RUNTIME=$(echo "$END - $START" | /usr/bin/bc)
echo $END
echo $RUNTIME

Ez egy egyszerű script. Az időt méri, és a parancssorban kapott első paraméterre mint URL-re meghívja a curl parancs segítségével a webalkalmazásunkat.

MÉRÉS I. CGI, bash script. http://localhost/cgi-bin/counter.sh – 13,76 másodperc.

gvamosi@gergo1:~/Documents/http_meres$ ./1000times_curl.sh http://localhost/cgi-bin/counter.sh
1597372454.016087696
1597372467.780319906
13.764232210

MÉRÉS II. CGI, perl. http://localhost/cgi-bin/counter.pl – 16,75 másodperc.

gvamosi@gergo1:~/Documents/http_meres$ ./1000times_curl.sh http://localhost/cgi-bin/counter.pl
1597372699.883363458
1597372716.637874845
16.754511387

MÉRÉS III. CGI, natív C. http://localhost/cgi-bin/counter.cgi – 12,37 másodperc.

gvamosi@gergo1:~/Documents/http_meres$ ./1000times_curl.sh http://localhost/cgi-bin/counter.cgi
1597372832.246672103
1597372844.623081288
12.376409185

MÉRÉS IV. FastCGI, perl. http://localhost/cgi-bin/counter.pl.fcgi – 10,19 másodperc.

gvamosi@gergo1:~/Documents/http_meres$ ./1000times_curl.sh http://localhost/cgi-bin/counter.pl.fcgi
1597372942.444961716
1597372952.635298535
10.190336819

MÉRÉS V. mod_perl. http://localhost/perl/counter-mod_perl.cgi – 10,51 másodperc.

gvamosi@gergo1:~/Documents/http_meres$ ./1000times_curl.sh http://localhost/perl/counter-mod_perl.cgi
1597373028.237804238
1597373038.753424598
10.515620360

Látható, hogy bár igen egyszerű a webalkalmazás, csupán pár sor, a várható mérési eredményeket hozta. A leglassabb a sima perl CGI, gyorsabb a bash script illetve a natív C, míg a FastCGI illetve a mod_perl a leggyorsabbak. 🙂

És akkor egy (viszonylag régi) összehasonlító mérés a net-ről (https://stackoverflow.com/questions/382798/mod-perl-vs-mod-fastcgi). 🙂

cgi - 1200+ requests per minute
mod_perl - 6000+ requests per minute (ModPerl::PerlRun only)
fast_cgi - 6000+ requests per minute
mod_perl - 6000+ requests per minute (ModPerl::Registry)
servlets - 2438 requests per minute.

Megjegyzés: ez egy egyszerű tesztelési eljárás alapbeállításokkal (Apache) szerveroldalon, helyi gépen, 8GB memóriával, 4 magos processzorral és SSD háttértárral. Lehetne több szerverpéldányt indítani, párhuzamosítani, azaz egyszerre több kliensről tesztelni. Alapvetően idő és tárkorlátos minden számítástechnikai eljárás, szoftver, illetve program. Tehát CPU és memória/háttértár. A webes tesztekbe ezen kívül a hálózati sebesség is beleszámít(hat).

Egyszerű CGI számláló bash, perl és C nyelveken

Először is engedélyezzük a cgi modul-t az Apache webszerverünkben. Ez pár sor Debian 10.5 alatt root-ként (rendszergazdaként).

root@gergo1:/etc/apache2/mods-enabled# ln -s ../mods-available/cgi.load
root@gergo1:/etc/apache2/mods-enabled# ls -l
..
lrwxrwxrwx 1 root root 26 Aug 12 02:24 cgi.load -> ../mods-available/cgi.load
root@gergo1:/etc/apache2/mods-enabled# service apache2 reload

root@gergo1:/etc/apache2/conf-enabled# ls -l
..
lrwxrwxrwx 1 root root 36 Aug 28  2017 serve-cgi-bin.conf -> ../conf-available/serve-cgi-bin.conf

Nézzük a serve-cgi-bin.conf konfigurációs file tartalmát!

<IfModule mod_alias.c>
        <IfModule mod_cgi.c>
                Define ENABLE_USR_LIB_CGI_BIN
        </IfModule>

        <IfModule mod_cgid.c>
                Define ENABLE_USR_LIB_CGI_BIN
        </IfModule>

        <IfDefine ENABLE_USR_LIB_CGI_BIN>
                ScriptAlias /cgi-bin/ /usr/lib/cgi-bin/
                <Directory "/usr/lib/cgi-bin">
                        AllowOverride None
                        Options +ExecCGI -MultiViews +SymLinksIfOwnerMatch
                        Require all granted
                </Directory>
        </IfDefine>
</IfModule>

Látható, hogy a /usr/lib/cgi-bin könyvtárban kell létrehozzuk a számlálóinkat bash, perl és C nyelveken. Nézzük az elsőt bash shell script nyelven!

#!/bin/bash

printf "Content-type: text/html\n\n"
let COUNTER++
printf "$COUNTER\n"

És akkor teszteljük le parancssorból, majd web-en!

gvamosi@gergo1:/usr/lib/cgi-bin$ chmod +x counter.sh 
gvamosi@gergo1:/usr/lib/cgi-bin$ ./counter.sh 
Content-type: text/html

1

Látható, hogy 1-et ír ki, ha parancssorban futtatjuk.

Ha megnézzük weben is a http://localhost/cgi-bin/counter.sh cím alatt, ugyanez az eredmény. Látható, hogy elég a Content-type beállítása a válasz fejlécében, majd kettő soremelés után bármit kiírathatunk. 🙂

A Content-type egyébként az ún. media type (régebben MIME type) értéket tartalmazza. Részletek: https://en.wikipedia.org/wiki/Media_type.

És akkor nézzük ugyanezt perl nyelven!

#!/usr/bin/perl

use strict;
use warnings;

print "Content-type: text/html\n\n";

my $a = 0;
&number();

sub number {
  $a++;
  print "number \$a = $a\n";
}

A parancs kimenete hasonlatos mind parancssorban, mind a http://localhost/cgi-bin/counter.pl webcím alatt.

gvamosi@gergo1:/usr/lib/cgi-bin$ chmod +x counter.pl 
gvamosi@gergo1:/usr/lib/cgi-bin$ ./counter.pl 
Content-type: text/html

number $a = 1

Végül nézzük meg C nyelven. Megjegyzem: a C nyelvű scriptet a gcc programcsomag segítségével le kell fordítanunk. 🙂

#include <stdio.h>

int i=0;

int incrementcount()
{

  i++;
  return i;
}

int main()
{
  printf("Content-type: text/html\n\n");
  printf("The current count is: ");
  printf("%d\n", incrementcount());
  return 0;
}

És akkor nézzük meg a fordítást majd a kimenetet. Ugyanez lesz látható a http://localhost/cgi-bin/counter.cgi webcím alatt is.

gvamosi@gergo1:/usr/lib/cgi-bin$ gcc counter.c -o counter.cgi
gvamosi@gergo1:/usr/lib/cgi-bin$ ls -l
total 32
-rw-r--r-- 1 gvamosi gvamosi   216 Aug 12 03:05 counter.c
-rwxr-xr-x 1 gvamosi gvamosi 16720 Aug 12 03:05 counter.cgi
-rwxr-xr-x 1 gvamosi gvamosi   158 Aug 12 02:47 counter.pl
-rwxr-xr-x 1 gvamosi gvamosi    84 Aug 12 02:37 counter.sh
gvamosi@gergo1:/usr/lib/cgi-bin$ ./counter.cgi 
Content-type: text/html

The current count is: 1

Bámulatos, nem? 🙂 Hogy mire lesz jó ez az egész három különböző nyelvű, méghozzá benne egy natív C implementáció is? A következő fejezetekben kiderül!

Megjegyzés: natívan, bár gyorsabb a végeredmény, azért nem fejlesztünk többnyire, mert rendkívül bonyoluttá válik összetett oldalak esetén a programkód. Továbbá elég egy pici hiba, és már is “vulnerable”, azaz sérülékeny lehet a weboldalunk, amit a hacker-ek ún. exploit-tal ki tudnak használni, azaz adott esetben fel is törthetik az oldalainkon keresztül a szervereinket.

Apache config – a webszerver beállításának (konfigurációjának) alapjai, hasznos modulok

Ebben a fejezetben megnézzük, hogy mik a főbb konfigurációs direktívái az Apache webszerverünknek, és hogy milyen főbb beépülő modulokkal rendelkezik, és ezek hogyan konfigurálhatóak, ti. moduláris a felépítése.

Van egy kisebb bemutató szócikk a magyar wikipédián, ez a https://hu.wikipedia.org/wiki/Apache_HTTP_Server cím alatt érhető el. Amit kiemelnék ez alapján az angol nyelvű szócikkből az, hogy a világ webes kiszolgálóinak majd egyharmadát 2020-ban az Apache 2-es szerver adta, míg a top 10 milló website 40%-át. Ez igen komoly részesedés. Továbbá azt is érdemes megemlíteni, hogy a magyarországi Internet hőskorában a 90-es években gyakorlatilag Apache volt vagy semmi. Mondjuk anno írtunk 20 soros saját webszervert is perl-ben. 🙂

Mindenféle Apache dokumentáció kiindulásául szolgáljon a hivatalos angol nyelvű weblap. E cikk keletkezésének idején az aktuális verzió a 2.4-es, webcíme a http://httpd.apache.org/docs/2.4/.

A konfiguráció rövid bemutatása a http://httpd.apache.org/docs/2.4/configuring.html cím alatt olvasható. A teljes fordítás nélkül beszéljünk pár részletről.

A konfigurációs állaományt httpd.conf-nak hívják, és saját fordításnál a /usr/local/apache2/conf könyvár alatt található. Az előreinstallált különféle disztribúciós csomagokban viszont a rendszer /etc könyvtárában találhatóak a különböző konfigurációs állományok. Nálam, Debian 10.5 alatt történetesen a /etc/apache2 könyvtár alatt rejlik minden beállítás. Ez egyébként nem is standard megoldású konfiguráció, de könnyen ki lehet találni a működését. Az Include direktíva (http://httpd.apache.org/docs/2.4/mod/core.html#include) teszi lehetővé a konfiguráció több állományra osztását, illetve beillesztését végsősoron egy konfigurációs file-ba.

Amennyiben a beálításban lehetőséget adunk az AllowOverride direktívával (http://httpd.apache.org/docs/2.4/mod/core.html#allowoverride), akkor az ún. .htaccess file-okban a különböző könyvtárainkban az ún. DocumentRoot könyvtár, azaz a webes gyökér könyvtárunk alatt felülírhatunk bizonyos beállításokat. Ez főleg <VirtualHost> direktívával történő konfiguráció esetén (http://httpd.apache.org/docs/2.4/mod/core.html#virtualhost), tehát virtuális szerverek, magyarul egy fizikai gépen több webcím üzemeltetése esetén hasznosak igazán – végső soron masszív többfelhasználós módban. Pláne szükségszerű, ha továbbértékesítjük a virtuális webhelyeket, hiszen így – bizonyos főbb biztonsági megfontolások mellett – minden ügyfelünk saját maga állíthatja be bizonyos dolgokat. Példa: .pl kiterjesztésű – többnyire perl – programkód ún. CGI-ként (https://hu.wikipedia.org/wiki/Common_Gateway_Interface) vagy akár beépülő perl modulként fusson. Ez mindenkor beállítás kérdése, mert hívhatnám akár .kutyafule-nek is ezeket az állományokat. Természetesen ezek a dinamikus tartalmat generáló programocskák pont így jelennek meg az URL-ben is a böngészőablakban kliensoldalon. 🙂

Nézzük meg a <Directory> direktívát egy konkrét példában.

<Directory "/usr/local/httpd/htdocs">
  Options Indexes FollowSymLinks
</Directory>

Ez azt jelenti, hogy a /usr/local/httpd/htdocs könyvtár – általában ServerRoot, ami az “alap” hoszt DocumentRoot könyvtára – mutasson könytár indexeket és “kövesse” a szimbolikus linkeket (részletek: https://gvamosi.wordpress.com/2019/09/08/jogosutsagkezeles-filerendszer-szinten/). Sok kis trükk és beállítási lehetőség, nem célom mindet bemutatni.

Az egész konfiguráció lényege tulajdonképpen az, hogy filerendszerben lévő könyvtárak, programocskák és állományok milyen módon kerülnek a webre, azaz a böngésző címsorába.

A modulokról is ejtsünk néhány szót. Betöltésük, ha jelen vannak a rendszerben, a LoadModule direktívával történik (http://httpd.apache.org/docs/2.4/mod/mod_so.html#loadmodule). Konfigurációjuk feltételes az <IfModule> direktíva segítségével történik (http://httpd.apache.org/docs/2.4/mod/core.html#ifmodule). Nyilván azért, hogy csak akkor hajtótdjon végre a beállítás, ha lehetséges, tehát a modul betöltött. Ez amúgy sima Linux dinamikus könytárként van megvalósítva. 🙂

A modulok listája az alábbi oldalon elérhető http://httpd.apache.org/docs/2.4/mod/. Nem teljes, vannak alprojektek is, mint például a FastCGI modul (http://httpd.apache.org/mod_fcgid/), amely segítségével a CGI-k folyton kiszolgálják a kéréseket – tehát a memóriában maradnak. Így gyorsabban futnak, mivel nem kell újra és újra “elindulniuk”. Ez a teljesítménybeli kérdéseknél lesz majd fontos.

Hasznos modulok a mod_cgi – CGI-k végrehajtása, a mod_cache – mindenféle gyorsítótárazás, a mod_proxy – proxy-szerver, azaz “előtét” (https://hu.wikipedia.org/wiki/Proxyszerver), a mod_rewrite – URL-ek szabály alapú átírása (így tűntethető el az a bizonyos index.php rész a CodeIgniter URL-ekből :)) vagy a mod_ssl – HTTPS biztonság.

III. rész – Perl-ben írt “like” webalkalmazás – a HTTP protokoll és az Apache webszerver

Az Apache(2) webszerverünk a 80-as http porton “csücsül” alapból a rendszerünkben. Nézzünk picit bele a start-stop script-ek segítségével!

root@gergo1:~# /etc/init.d/apache2 
Usage: apache2 {start|stop|graceful-stop|restart|reload|force-reload}
root@gergo1:~# /etc/init.d/apache2 reload
[ ok ] Reloading apache2 configuration (via systemctl): apache2.service.

Látható, hogy van pár opciónk. Megjegyzem, ez a Debian vagy Ubuntu struktúra. Root-ként az apache webszerverünket elindíthatjuk, leállíthatjk, újraindíthatjuk vagy a konfigurációt “menet közben” újratölthetjük. 🙂

Nézzük a processz (folyamat) listát!

root@gergo1:~# ps axu | grep apache2
root     12030  0.0  0.3 199612 24228 ?        Ss   Apr07   0:22 /usr/sbin/apache2 -k start
www-data 29171  0.0  0.1 199920  8276 ?        S    03:36   0:00 /usr/sbin/apache2 -k start
www-data 29172  0.0  0.0 199920  7892 ?        S    03:36   0:00 /usr/sbin/apache2 -k start
www-data 29173  0.0  0.0 199920  7892 ?        S    03:36   0:00 /usr/sbin/apache2 -k start
www-data 29174  0.0  0.0 199920  7892 ?        S    03:36   0:00 /usr/sbin/apache2 -k start
www-data 29175  0.0  0.0 199920  7892 ?        S    03:36   0:00 /usr/sbin/apache2 -k start
www-data 29176  0.0  0.0 199920  7892 ?        S    03:36   0:00 /usr/sbin/apache2 -k start

Látható, hogy az apache2 folyamataink www-data felhasználó alatt futnak, kivéve a starter folyamatot, ami root-ként fut. Abból “forkol” ki a többi folyamat. Ez a rendszerünk biztonságát szolgálja, hiszen a www-data user nem interaktív és különleges jogok nélküli felhasználó a linuxunkon.

Részletesebben a folyamatokról a https://gvamosi.wordpress.com/2019/09/13/linux-parancsok-iii-folyamat-processz-vagyis-process-kezeles/ címen olvashatunk.

Láthatjuk tehát, hogy alapból ez a 6+1 folyamat szolgálja ki a rendszerünkön a HTTP kéréseket.

Magát a HTTP protokoll-t nagyon nem is részletezném, egy elég jó leírás található a https://hu.wikipedia.org/wiki/HTTP webcímen magyar nyelven.

Hoznék viszont pár gyakorlati megfontolást és példát. Jelenleg a HTTP 1.1 szabvány van érvényben. Ez remekül ki tud szolgálni akár egy facebook (https://www.facebook.com/) alkalmazást, ahol kis piros ikonok jelzik a folyamatos tartalomfrissülést, sőt még tájékoztatást is kapunk arról, akár a Yahoo! (https://mail.yahoo.com/) levelező alkalmazásában, hogy van-e aktuálisan webes (internet) kapcsolatunk. Továbbá egy YouYube https://www.youtube.com/ video stream is, de akár egy on-line rádió is (https://www.kissfm.pt/) kiválóan “elketyeg” ezen a protokoll változaton keresztül. 🙂

Egyébként az előző részben bemutatott AJAX tudás szükséges a folyamatos weblapfrissítéshez illetve a kapcsolatfigyeléshez.

Minden további magyarázat helyett nézzünk bele a HEAD és a GET HTTP parancsok kimenetébe a localhost-ra. Részletek erről a https://gvamosi.wordpress.com/2019/09/18/telnet-http-80-as-port/ webcímen találhatóak.

Tehát a HEAD parancs.

gvamosi@gergo1:/var/www/html$ telnet localhost 80
Trying ::1...
Connected to localhost.
Escape character is '^]'.
HEAD / HTTP/1.1
HOST: localhost

HTTP/1.1 200 OK
Date: Mon, 10 Aug 2020 02:09:29 GMT
Server: Apache/2.4.38 (Debian)
Last-Modified: Mon, 28 Aug 2017 10:20:32 GMT
ETag: "29cd-557cda50c52f6"
Accept-Ranges: bytes
Content-Length: 10701
Vary: Accept-Encoding
Content-Type: text/html

Connection closed by foreign host.

A kiadott parancs a HEAD / HTTP/1.1<ENTER>HOST: localhost<ENTER><ENTER>. Látható a két enter begépelése után az egyszerű http header (fejléc). A kapcsolat, mivel HTTP 1.1-ben vagyunk, megmarad, idővel automatikusan bezáródik. Ez az utolsó sor.

Látható a válaszüzenetben továbbá a 200-as OK státuszkód is, ami a sikeres kérés-kiszolgálást jelzi.

Nézzünk egy “nem található” GET parancsot is.

gvamosi@gergo1:/var/www/html$ telnet localhost 80
Trying ::1...
Connected to localhost.
Escape character is '^]'.
GET /alma
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>404 Not Found</title>
</head><body>
<h1>Not Found</h1>
<p>The requested URL was not found on this server.</p>
<hr>
<address>Apache/2.4.38 (Debian) Server at 127.0.1.1 Port 80</address>
</body></html>
Connection closed by foreign host.

Látható, hogy alma néven nincs erőforrás a szerverünkön, 404 Not Found (nem található) választ kapunk.

A Cache (gyorsítótár) funkciót még bemutatnám egy rövid példán keresztül. Ehhez nézzük meg az előző részben lefejlesztett weblapunk képek oldalát bemutató oldalt (https://wlammpp.wordpress.com/2020/07/28/egyszeru-oldal-letrehozasa-kepek-oldal/) böngésző oldalon. Boncasztalon a könyv saját maga! 🙂 A chrome böngészőnkben a Developer tools segítségével (Ctrl+Shift+I) nézhetünk bele a fejlécbe. Kiadhanánk parancssorból is GET parancsokkal is az egész többmenetes weblaplekérést, csak az egy picit bonyolult volna. 🙂 Ti. a böngészőnk letölti a weblapot, aztán a scripteket és a képeket is, tehát a különböző erőforrásokat. Amint megvizsgáljuk a style.css file-t egy újratöltés után a “Network” tabfül alatt, láthatjuk, hogy a fejlécben van egy cache-control: max-age=31536000 bejegyzés. Ez azt fogja jelenteni, hogy a stíluslapunk elég hosszú ideig nem lesz újratöltve, ha frissítjük vagy újra megnyitjuk a weblapot. Csak akkor, ha Ctrl gombbal együtt frissítjuk a weblapot vagy ha a “Clear browsing data…” (Ctrl+Shift+Del) funkcióval kitötöljük a böngészőadatokat. Hogy ez mire jó? Ha fejlesztünk, figyelembe vehetjük a Cache implementációját. Ilyenkor a nagyméretű, de ritkán változó képeket és egyéb file-okat cache-elhetővé tehetjük, ezáltal csökkentve az újratöltési időt. Ugyanakkor amint fejlesztünk, és átírunk egy cache-elt (gyorsítótárazott) JavaScript (js) könyvtárat, akkor Ctrl+F5-tel újra kell töltsük az oldalunkat teszteléshez vagy debug-oláshoz. 🙂

A kis lakat ikon a weblap címe mellett balra a böngésző címsávjában. Nos ez a biztonságos ún. HTTPS adatátvitelt jelöli. Ez csupán annyit lejent, hogy a webszerver és a böngészőnk közötti adatátvitel elég jól kódolt. Tehát harmadik fél nem tud belenézni, kivéve a kormányokat, dehát ezt most ne is taglaljuk. 🙂

Megállapíthatjuk ennyi ismertetés után, hogy nem ördöngősség a web. 🙂

Kapcsolat oldal, levélküldés levélszerveren át

Először is telepítsük a sendmail levélszervert és a mail levelező programot, hogy legalább localhost-on le tudjuk tesztelni a levélküldést. Nagyon nem lesz nehéz dolgunk a CodeIgniter-t illetőleg, mivel támogatja a sendmail levelező csomagot.

root@gergo1:~# apt install sendmail
root@gergo1:~# apt-get install mailutils

Ezután teszteljük le a levélküldést. Tegyük fel, hogy fut a sendmail felépítmény (szerver, leírás https://en.wikipedia.org/wiki/Sendmail).

gvamosi@gergo1:/var/www/html/apartman/application$ mail -s "Teszt levél" gvamosi@localhost < /dev/null
mail: Null message body; hope that's ok
gvamosi@gergo1:/var/www/html/apartman/application$ mail
"/var/mail/gvamosi": 1 message 1 new
>N   1 gvamosi            Fri Aug  7 00:46  14/520   Teszt levél
? q
Held 1 message in /var/mail/gvamosi

Láthatjuk, hogy a levelünk “Teszt levél” tárggyal és üres tartalommal elküldésre került és szerencsésen meg is érkezett. 🙂 Helyben került kézbesítve, helyi feladótól. Ne ijedjünk meg, ha picit lassú a kézbesítés, a névfeloldás megy nehezen a sendmail-ünknek, mivel nem vagyunk internetre kötött ún. SMTP host, azaz hivatalos levélküldő szerver. Attól sem kell félnünk, hogy igazi levelet tudunk küldeni a nagyvilágba, ez így lehetetlen. 🙂

Részleteket az internetes levelezésről az alábbi címen találhatunk https://hu.wikipedia.org/wiki/Simple_Mail_Transfer_Protocol.

Mindez szép és jó, de hogyan küldjük el akkor egy webes form-ból a levelet az adminisztrátornak, tehát a kapcsolatfelvételi formot hogyan is programozzuk le?

Vegyünk egy sima, nem JavaScript-es form-ot az egyszerűség kedvéért, majd használjuk a CodeIgniter email könyvtárát. Annyi lesz az egész, hogy be kell konfiguráljuk a sendmail-ünket, és meg kell hívnunk a megfelelő rutinokat a controller-ünkben űrlapküldés után.

Elsőnek hozzuk létre a kapcsolati űrlapot views/contact.php néven!

<?php
        $my_base_url = '/apartman/';
?>
                                <div class="row">
                                        <div class="col-sm-2">
                                                <div id="fh5co-logo"><a href="index.html">Apartman<span>.</span></a></div>
                                        </div>
                                        <div class="col-sm-10 text-right menu-1">
                                                <ul>
                                                        <li><a href="photos"><?php echo $this->lang->line('menu_photos'); ?></a></li>
                                                        <li><a href="booking"><?php echo $this->lang->line('menu_booking'); ?></a></li>
                                                        <li class="active"><a href="contact"><?php echo $this->lang->line('menu_contact'); ?></a></li>
                                                </ul>
                                        </div>
                                </div>
                                
                        </div>
                </div>
        </nav>
        <div class="container">
                <div id="fh5co-intro">
                        <div class="row animate-box">
                                <div class="col-md-8 col-md-offset-2 col-md-pull-2">
                                        <h2><?php echo $this->lang->line('menu_contact'); ?></h2>
                                </div>
                        </div>
                </div>
                <div id="fh5co-contact">
                        <div class="row">
                                <div class="col-md-8 animate-box">
                                        <div class="form-wrap">
                                                <div class="row">
                                                        <form action="send" method="POST">
                                                        <div class="col-md-12">
                                                                <div class="form-group">
                                                                        <input type="text" name="name" class="form-control" placeholder="Your name">
                                                                </div>
                                                        </div>
                                                        <div class="col-md-12">
                                                                <div class="form-group">
                                                                        <input type="text" name="email" class="form-control" placeholder="Your email">
                                                                </div>
                                                        </div>
                                                        <div class="col-md-12">
                                                                <div class="form-group">
                                                                        <textarea id="message" name="message" class="form-control" id="" cols="30" rows="15" placeholder="Your message"></textarea>
                                                                </div>
                                                        </div>
                                                        <div class="col-md-12">
                                                                <div class="form-group">
                                                                        <input type="submit" value="Send message" class="btn btn-primary btn-modify">
                                                                </div>
                                                        </div>
                                                        </form>
                                                </div>
                                        </div>
                                </div>
                        </div>
                </div>
        </div><!-- END container -->

Látható, hogy ez egy sima form. Nem is fűzök hozzá magyarázatot.

Majd hozzük létre a visszajelző oldalt views/contact_sent.php néven!

<?php
        $my_base_url = '/apartman/';
?>
                                <div class="row">
                                        <div class="col-sm-2">
                                                <div id="fh5co-logo"><a href="index.html">Apartman<span>.</span></a></div>
                                        </div>
                                        <div class="col-sm-10 text-right menu-1">
                                                <ul>
                                                        <li><a href="photos"><?php echo $this->lang->line('menu_photos'); ?></a></li>
                                                        <li><a href="booking"><?php echo $this->lang->line('menu_booking'); ?></a></li>
                                                        <li class="active"><a href="contact"><?php echo $this->lang->line('menu_contact'); ?></a></li>
                                                </ul>
                                        </div>
                                </div>
                                
                        </div>
                </div>
        </nav>
        <div class="container">
                <div id="fh5co-intro">
                        <div class="row animate-box">
                                <div class="col-md-8 col-md-offset-2 col-md-pull-2">
                                        <h2><?php echo $this->lang->line('menu_contact'); ?></h2>
                                </div>
                        </div>
                </div>
                <div id="fh5co-contact">
                        <div class="row">
                                <div class="col-md-8 animate-box">
                                        <div class="form-wrap">
                                                <div class="row">
                                                        <div class="col-md-12">
                                                                <div class="form-group">
                                                                        <h3><font color="red">Thank you for contacting us!</font></h3>
                                                                </div>
                                                        </div>
                                                </div>
                                        </div>
                                </div>
                        </div>
                </div>
        </div><!-- END container -->

Ez is beton egyszerű.

Nézzük meg azt a három metódust, amivel a controllers/Apartments.php vezérlőnket bővítettük!

        public function contact() {
                $data = array();

                $this->template->set('title', $this->lang->line('menu_contact'));
                $this->template->load('menu_layout', 'contents', 'contact', $data);
        }

        public function send() {

                $this->load->library('email');

                $config['protocol'] = 'sendmail';
                $config['mailpath'] = '/usr/sbin/sendmail';
                $config['charset'] = 'utf-8';

                $this->email->initialize($config);

                $this->email->from($this->input->post('email'), $this->input->post('name'));
                // mail of administrator
                $this->email->to('gvamosi@localhost');
                $this->email->subject('Mail from booking site');
                $this->email->message($this->input->post('message'));

                $this->email->send();

                redirect(base_url('index.php/apartments/contact_sent'));
        }

        public function contact_sent() {
                $data = array();

                $this->template->set('title', $this->lang->line('menu_contact'));
                $this->template->load('menu_layout', 'contents', 'contact_sent', $data);
        }

A contact() metódus csupán kirajzol egy oldalt, ahogy a contact_sent() is. Az érdekesebb metódusunk a send(), amiben a tulajdonképpeni levélküldés történik. Ennyi az egész! 🙂 A valóságban persze az adminisztrátorok és a fejlesztők együttműködésére és közreműködésére van szükség mind fejlesztés, mind pedig a webalkalmazás telepítése során.

És akkor nézzük a http://localhost/apartman/index.php/apartments/contact oldalunkat!

Kis várakozás után megkapjuk a levelünket. Kettes sorszámmal látható a parancssori levelezőnkben. 🙂

gvamosi@gergo1:/var/www/html/apartman/application$ mail
"/var/mail/gvamosi": 2 messages 1 new 1 unread
 U   1 gvamosi            Fri Aug  7 00:46  17/564   Teszt levél
>N   2 Teszt Elek         Fri Aug  7 01:14  23/823   Mail from booking site
? q
Held 2 messages in /var/mail/gvamosi