Rss hírcsatornák:

Dinamikus Web-oldalak programozásának alapja

Szerver oldali PHP programozás lényege

A PHP vagy más CGI (Common Gateway Interface) programozásra épülő webes rendszerek (portálmotorok, web-áruházak, fórumok, híroldalak, blogok…) gyakorlatilag csak a tartalom formázására használják a HTML nyelvet. A szerver-program feldolgozza a PHP utasításokat, csak a generált HTML kimenetet küldi el a látogató böngészőjének. Az eredeti programkód kliens oldalról nem látható és nem is követhető vissza.

A PHP az egyik legelterjedtebb szerver-oldali kódnyelv, képes együttműködni a MySQL~ és egyéb adatbázis-kezelő rendszerrel, rugalmasan lehet integrálni HTML kódokba, vagy éppen HTML és egyéb kódokat generálni vele. Olyan feladatok végezhetőek el, amelyekre ügyféloldali szkriptek csak korlátozottan vagy nem is képesek, biztonságilag kockázatosak. Ilyenek például az űrlapok adategyeztetése és feldolgozása, fájlkezelő műveletek, adatfeldolgozás és adatbázis kezelés, adatokból dinamikus tartalom előállítása és rendezése, automatikus e-mail visszaigazolás stb. Egy igazi szerver-oldali alkalmazás, az integrált funkciók tudásának függvényében a munka ezen részét, emberi beavatkozás nélkül automatikusan végrehajtja.

A cikk a továbbiakban, egyszerűsített gyakorlati példával megpróbálja illusztrálni, a weben alkalmazott korszerű programozási megoldásokat, vezérlési algoritmusokat, melyek képesek a Web-oldalak intelligenssé tételének megvalósítására. Mindezt azok számára, akik kevésbé ismerik az Interneten ma alkalmazott technológiák mibenlétét. Részben inspiratív lehet egy bemutatkozó portál létrehozására.

Egy egyszerű dinamikus portálmotor felépítése

A Dinamikus Web-oldalak működésének alapja című oldal részletesebben tárgyalja az weboldalak szerkezeti felosztásával kapcsolatos okokat, miérteket, így erre most szükségtelen ismételten kitérni. A példák e korábbi cikktől eltérően csak a szükséges mértékben, minimálisan vannak tovább fejlesztve. Minden megváltozott állomány új elnevezést kapott, továbbá a minta oldalakat leszámítva, a teljes térkép, egy adat és egy feldolgozó fájl létrehozásával bővült.

 _________________
 | Közös fájlok: |
	|_____ adat fájl:........ data_file.txt
	|_____ feldolgozó:....... motor.php
	|_____ kezdő töredék:.... dinamic_head.php
	|_____ záró töredék:..... dinamic_foot.php
	|_____ stílus fájl:...... dinamic_sample.css
	|_____ háttérkép:........ bg_sample.gif
 __________________	
 | Minta oldalak: |
	|_____ Cím oldal:........ index.php
	|_____ Termékek:......... products.php
	|_____ Sikerstory:....... story.php
	|_____ Impresszum:....... impress.php

A közös fájlok a könnyebb érthetőség és áttekinthetőség kedvéért most nincsenek külön védett könyvtárba helyezve, de éles helyzetben mindenképpen ajánlott, mint ahogy a külső hozzáférést és listázhatóságot megakadályozni.

Közös fájlok

• Adat fájl (data_file.txt)

  Cím oldal|index.php|Szalmaszál Kft.|A Szalmaszál Kft. palimadarat keres… bla…bla…|
  Termékek|products.php|A Szalmaszál Kft. termékpalettája|A Szalmaszál Kft.gazdag termékpalettája már a nullát is meghaladja… bla…bla…|
  Sikerstory|story.php|A Szalmaszál Kft. működése és céljai|Legyen sikeres, szabaduljon utolsó fillérjeitől… bla…bla…|
  Impresszum|impress.php|A Szalmaszál Kft. szervezeti felépítése|A Szalmaszál Kft. felépítése… bla…bla…|

  Nem ritka eset, amikor kisebb adatbázist egyszerű szöveges állomány reprezentál. Jelen alkalmazását semmi más, csupán a működtető algoritmusok sokkal egyszerűbb, átláthatóbb bemutatása indokolja. Soronként a »|« (vertical bar) karakterrel elválasztva egy-egy oldal hivatkozásának címét, a fájl nevét, az oldal saját címét, és az oldal rövid meta leírását tartalmazza. A példákban szereplő feldolgozó algoritmusok megkövetelik, hogy ne legyenek benne üres sorok. A kriksz-krakszok elkerülése végett, a fájlt UTF–8 karakterkódolással kell elmenteni.

• Feldolgozó (motor.php)

  <?php
  class MOTOR {
  	public $DATA_FILE = '';
  	public $TEMP_ARRAY = array();
  	public $ACTUAL_PAGE = '';
  	
  	function MOTOR($data_file) {
  		$this->DATA_FILE = $data_file;
  		$this->ACTUAL_PAGE = pathinfo ($_SERVER ['PHP_SELF']);
  		$handle = fopen ($this->DATA_FILE, "r");
  		if ($handle) {
  			while (! feof ($handle)) {
  				$buffer = fgets ($handle, filesize ($this->DATA_FILE));
  				$row = explode ("|", $buffer);
  				array_push ($this->TEMP_ARRAY, $row);
  			}
  			fclose ($handle);
  		} else {
  			die ("Az adat fájlt nem lehet olvasni!");
  		}
  	}
  	
  	function print_meta() {
  		print "\n<!-- Dynamic meta -->\n";
  		foreach ($this->TEMP_ARRAY as $position) {
  			if ($this->ACTUAL_PAGE ['basename'] == $position [1]) {
  				print "<meta name=\"description\" content=\"" . $position [3] . "\">\n";
  				print "<title>" . $position [2] . "</title>\n";
  			}
  		}
  		print "<!-- End dynamic meta -->\n\n";
  	}
  	
  	function print_article_title() {
  		print "\n<!-- Dynamic article title -->\n";
  		foreach ($this->TEMP_ARRAY as $position) {
  			if ($this->ACTUAL_PAGE ['basename'] === $position [1]) {
  				print "\t\t\t<h1>" . $position [2] . "</h1>\n";
  			}
  		}
  		print "\n<!-- End dynamic article title -->\n";
  	}
  		
  	function print_menu() {
  		print "\n<!-- Dynamic menu -->\n";
  		print "\t\t\t<div class=\"gray_bg\">\n\t\t\t\t<ul>";
  		foreach ($this->TEMP_ARRAY as $position) {
  			$file_path = pathinfo ($position [1], PATHINFO_BASENAME);
  			print "\n\t\t\t\t\t<li><a href=\"" . $file_path . "\" title=\"" . $position [2] . "\">" . $position [0] . "</a></li>";
  		}
  		print "\n\t\t\t\t</ul>\n\t\t\t</div>";
  		print "\n<!-- End dynamic menu -->\n\n";
  	}
  }
  ?>

  A function MOTOR($data_file) (a PHP osztály konstruktora) beolvassa az adatfájl (data_file.txt) tartalmát, soronként végigmegy, minden egyes sort külön tömbbe helyezve. A tömb elemeit a »|« jel mentén választja szét.

  A function print_meta() függvény az adatfájlból kiolvassa az egyes oldalakra vonatkozó változó metaadatokat és beilleszti a HTML kódba. Ezen információk az internetes látogatok, valamint a szabadszavas keresők számára fontos.

  A function print_article_title() függvény jelenleg csak az oldalon megjelenő cikknek a címét illeszti be a HTML kódba. Funkcióit lehetne bővíteni pl.: keltezés dátuma, szerző stb.

  A function print_menu() függvény, az osztály-konstruktor által generált tömbökből kiolvassa a hiperhivatkozásokhoz szükséges tömbelemeket, majd formázott HTML kódot generál a függvény meghíváskor.

• Kezdő töredék (dinamic_head.php)

  <?php
  include ("motor.php");
  $dinamic_content = new MOTOR ("data_file.txt");
  ?>
  <!-- constant content -->
  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="author" content="InterMatrix.hu">
  <!-- end constant content -->
  <?php
  $dinamic_content ->print_meta();
  ?>
  <!-- constant content -->
  <link rel="stylesheet" href="dinamic_sample.css" type="text/css">
  </head>
  <body>
  	<div id="top">
  		Fejléc
  		<p>Állandó tartalom… Lógó, főmenü stb.</p>
  	</div>
  	<div id="body_content">
  		<div id="left">
  			<p>Almenü, speciális funkciók…</p>
  <!-- end constant content -->
  <?php 
  $dinamic_content -> print_menu();
  ?>
  <!-- constant content -->
  		</div>
  		<div id="center">
  <!-- end constant content -->
  <?php 
  $dinamic_content -> print_article_title()
  ?>
  
  <!-- Edited content -->
  

  A dinamikus adatok a HTML kód azon részére kerülnek, ahol a feldolgozó motor függvényei meghívásra kerülnek.

• Záró töredék (dinamic_foot.php)

  <!-- End edited content -->
  
  <!-- constant content -->	
  		</div>
  		<div id="right">
  			<h2>Speciális funkciók…</h2>
  			<p class="green_border">Zöld szöveg, zöld kerettel</p>
  			<p class="gray_bg">A szöveg méretéhez függőlegesen igazodik a
  			háttérszín, azonban egy szélesebb méretű kép esetén számolni kell a
  			horizontális túlcsordulással. A túlcsordulás CSS technikával
  			megakadályozható.</p>
  			<p class="warning_text">A példaoldalak szövege semmilyen céget, csupán egy
  			nem létező internetes oldal valóságtól elrugaszkodó tartalmát
  			ironizálja.</p>
  		</div>
  	</div>
  	<div id="foot">
  		Lábléc
  		<p>Állandó tartalom… <a href="impress.php">Impresszum</a> stb.</p>
  	</div>
  </body>
  </html>
  <!-- end constant content -->
  

  Ebben a részben nem szerepel dinamikus adat, ami természetesen nem jelenti azt, hogy itt nem is lehetne, ha a portál szolgáltatásai úgy kívánják.

• Stílus fájl (dinamic_sample.css)

  @CHARSET "UTF-8";
  
  /* START common elements */
  html,body {
  	width: 1000px;
  	margin: 0 auto;
  	font-family: sans-serif;
  	font-size: 0.9em;
  }
  
  h2 {
  	font-size: 1.1em;
  }
  
  .green_border {
  	color: green;
  	border: 1px solid green;
  }
  
  .gray_bg {
  	background-color: #ddd;
  	width: 100%;
  }
  
  .warning_text {
  	color: #f22;
  	background-color: #ddd;
  	width: 100%;
  }
  /* END common elements */
  
  /* START #top */
  #top {
  	width: 1000px;
  	height: 125px;
  	background-color: aqua;
  }
  /* END #top */
  
  /* START #body_content */
  #body_content {
  	float: left;
  	background: url("bg_sample.gif") #fff center repeat-y;
  }
  
  #left {
  	float: left;
  	width: 230px;
  	padding: 0 10px 0 10px;
  }
  
  #left ul {
  	list-style: none;
  	display: block;
  	margin-left: -40px;
  }
  
  #center {
  	float: left;
  	width: 480px;
  	padding: 0 10px 0 10px;
  }
  
  #center h1 {
  	font-size: 1.4em;
  }
  
  #right {
  	float: left;
  	width: 230px;
  	padding: 0 10px 0 10px;
  }
  /* END #body_content */
  
  /* START #foot */
  #foot {
  	clear: both;
  	width: 1000px;
  	height: 75px;
  	background-color: #aca;
  	width: 1000px;
  }
  
  #foot p {
  	text-align: center;
  }
  /* END #foot */
  

  A stílusfájl kódját kissé tovább fejlesztve, ebben már a menühöz alkalmazott felsorolás tulajdonságai is szerepelnek.

• Háttérkép (bg_sample.gif)

  A háttérkép nem változott, akár el is hagyható vagy lecserélhető. Mint ahogy nagyobb cégnél a CSS szerkesztése, úgy ez is, a dizájner munkája.

Minta oldalak

Az alábbi példákból kikövetkeztethető, hogy egy dinamikus internetes portál dizájnjának és vezérlésének megoldása után, igazából már csak a tatalom feltöltésre kell koncentrálni. Egy jó adminisztrációs felülettel kiegészítve, már egy átlagos informatikai tapasztalat is elegendő.

• Cím oldal (index.php)

  <?php
  include 'dinamic_head.php';
  ?>
  
  			<h2>Céginformáció</h2>
  			<p>A Szalmaszál Kft. a hazai piacon az egyetlen olyan cég, amely teljes
  			és skálázható megoldást tud nyújtani a <em>szalmaszálak keresztbe rakása</em>
  			minden területére, tetszőleges méretű és tevékenységű világcég számára.
  			A Szalmaszál, mára a Naprendszer magyarországi megoldásszállító
  			partnere, képviseli a szalma-szoftvergyártás teljes termékpalettáját.</p>
  <?php
  include 'dinamic_foot.php';
  ?>
  

• Termékek (products.php)

  <?php
  include 'dinamic_head.php';
  ?>
  
  			<h2>Szalmakereszt szoftver</h2>
  			<p>A Szalmaszál Kft. egyetlen szoftvertermékének segítségével vállalkozása
  			szalma készletének aktuális állapota naprakészen nyomon követhető és a
  			szalmakeresztek folyamatainak kimutatásai is bármikor lekérdezhetőek,
  			összehasonlíthatóak. Beruházása jól kimutatható azonnali és hosszú távú
  			költségmegtakarítást és forradalmi fellendülést eredményezhet a
  			Világegyetem minden szegletében.</p>
  <?php
  include 'dinamic_foot.php';
  ?>
  

• Sikerstory (story.php)

  <?php
  include 'dinamic_head.php';
  ?>
  
  			<h2>Hatékonyság növelés</h2>
  			<p>A XX. század végén alapított Szalmaszál Kft. mára új lehetőségekkel
  			bővítette a cég szoftvertermékének portfólióját, az alkalmazás
  			hatékonyságának megkétszerezésével. Az extra funkció használatba vétele
  			után az Ön vállalkozása, míg eddig egyet sem, immár évente két
  			szalmaszálat rakhat keresztbe elfogadható biztonsággal.</p>
  			<h2>A sikeresség titka</h2>
  			<p>A Szalmakereszt szoftver a Világegyetem legsikeresebb terméke,
  			megvásárlása következtében olyan mértékben megszűnnek anyagi függőségei,
  			hogy az utolsó két szalmaszálat sem kell már keresztbe tennie, minden
  			tulajdonától tehermentesítjük.</p>
  <?php
  include 'dinamic_foot.php';
  ?>
  

• Impresszum (impress.php)

  <?php
  include 'dinamic_head.php';
  ?>
  
  			<h2>A sikeresség titka</h2>
  			<p>A Szalmaszál Kft. minden egyes tagja zseniálisan
  			képzett vezető beosztású, kizárólag rokonsági és …bajtársi
  			kapcsolatok alapján tevődik össze… … …</p>
  <?php
  include 'dinamic_foot.php';
  ?>
  

A fenti négy mintaoldalhoz hasonlóan (egy elképzelt nem létező vállalkozás internetes portálja), további oldalak hozhatók létre, persze a statikus tartalmat, helyenként dinamikussal is lehetne keverni, vagy éppen lecserélni. Megfigyelhető, hogy bármelyik oldalról ugyanúgy elérhető a többi másik.

Néhány szóban a kódolás formázásáról

Dinamikus technológiák használatánál rendkívülien fontos, hogy az esetlegesen közbecsúszott hibákat gyorsan kell kijavítani, mert minden oldal rosszul fog működni, vagy tönkre megy, ahol a hibás kód jelen van.

A forráskódok formázása behúzással, sortöréssel, új sorok beszúrásával történik. A kódok angol nyelvű kifejezéseket tartalmaznak, bonyolultabb kódoknál angol nyelvű megjegyzések segítik a programozó eligazodását, melyet a világ minden területén megértenek, ami következésképpen azt jelenti, hogy egy távolkeleti programozó is épp úgy ki tudja javítani a programhibákat mint egy magyar.

Érdemes böngészőből sorra megnézni, összehasonlítani a négy megnyitott példa-oldal forráskódját, elemezni, megkeresni a dinamikus, valamint statikus részeket és megsaccolni a még csak kezdetlegesnek mondható portál-motor által elvégzett munka mennyiségét.

A kódok letöltése kipróbálásra.

Kapcsolódó tartalom:

Az InterMatrix.hu programozása egyedi, saját fejlesztés © Minden jog fenntartva 2008- 2012 .