Dinamikus honlapok megtervezése, felépítése kiprobálható és letölthető egyszerűsített HTML, CSS és PHP példa kódokkal.
Honlapok megtervezése, felépítése eléggé összetett dolog, a stratégia kialakításakór sok mindent kell figyelembe venni. Mindenképpen a legfontosabbak egyike, hogy a Web, jellegéből adódóan platformfüggetlen és rendszerfüggetlen. Sajnálatos módon a kapcsolatos oktató anyagok túlnyomó többsége nagyon elavult és ennek tetejében még részrehajló is.
Az internetes látogató, külön utasítások nélkül szereti könnyen megtalálni azt ami érdekli. Egy szisztematikusan felépített honlap weboldalai között akadálymentesen el tud navigálni és szívesebben tér vissza, ajánlja másoknak. Jól működő honlapok előfeltétele a minél alaposabban átgondolt tervezés. Érdemes felépíteni egy vázlatot, körvonalazni az elvárásokat, számításba venni a lehetőségeket.
A(z) (X)HTML oldalakat több módon lehet felosztani, de mindig lényeges, hogy tartalmi összetevői logikusan kapcsolódva kerüljenek a legmegfelelőbb helyeikre. A jó struktúra szervezésének fontossága, hogy könnyen és lehetőleg minél kevesebb emberi munkával lehessen manipulálni, szükség esetén megváltoztatni a kinézetet vagy tartalmat úgy, hogy a honlap egészében ne keletkezzenek törések. Nagyon sok többlet munka és energia megspórolható.
Az oldalak felosztására még gyakran használják az elavult keretes (frameset) technikát. Az eljárás arra született, hogy csupán HTML eszközökkel egyszerűen megoldható legyen a honlap navigációs rendszere és a tartalom elhelyezése. Az elv, több külön funkciókkal ellátott HTML oldal egybe ágyazása, ami nem egy elvetemült elképzelés, csakhogy a böngészőprogramok és internetes keresők a dokumentum (X)HTML forráskódjának alapján tudják megjeleníteni a tartalmat. Eddig minden rendben is van, azonban egy beágyazott oldal külön megjelenítése igencsak problémás lehet és ennek kivédésére semmilyen lehetőség nincs.
<!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"> <title>Minta dokumentum</title> <link rel="stylesheet" href="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> </div> <div id="center"> <h1>Az aloldal tartalmának főcíme</h1> <h2>Alcím</h2> <p>Oldalanként változó tartalom… </p> </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 nagyobb 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> </div> </div> <div id="foot"> Lábléc <p>Állandó tartalom… Impresszum stb.</p> </div> </body> </html>A dobozmodell (<div>) használata, még a böngészők eltérő értelmezésének ellenére is gyorsabb és rugalmasabban használható, mint a táblázatos felosztás, melynek lassú betöltödése egy méretesebb weboldal halálát is jelentheti.
@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: #ccc;
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;
}
#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 fentihez hasonló CSS kód, akár egy honlap összes aloldalain alkalmazható. A HTML kód ennél bonyolultabb, míg felépítés szempontjából nem változik, a tartalmi rész annál inkább.
Korábban volt szó az elavult keretes technika hátrányairól, viszont „egy kicsit átalakítva”, szerver oldali programozással továbbfejlesztve, meg lehet szabadulni az összes negatív tulajdonságaitól, kialakítható egy olyan rendszer, melyben a későbbiek során, az újabb tartalmak kreálásához már nincs szükség az ismétlődő kódok újraírására, sem pedig szakirányú tudásra.
A HTML kód darabolása három részre egyszerűsített példával szemléltetve:
<?php
function print_title() {
$this_page = basename ( $_SERVER ["REQUEST_URI"] );
$this_title = "";
switch ($this_page) {
case "xy.php" :
$this_title = "XY dokumentum";
case "xyz.php" :
$this_title = "XYZ dokumentum";
}
return $this_title;
}
?>
<!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">
<?php
print "<title>" . print_title() . "</title>\n";
?>
<link rel="stylesheet" href="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>
</div>
<div id="center">A head.php az összes HTML
dokumentum kódjának első részét helyettesíti. A példában egy beépített
PHP függvény váltogatja az oldal címére vonatkozó kódot. Megjegyzendő,
ez a megoldás nem helyes, hasonló adatokat inkább adatbázisból szokás
venni.</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 nagyobb 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> </div> </div> <div id="foot"> Lábléc <p>Állandó tartalom… Impresszum stb.</p> </div> </body> </html>A foot.php helyettesíti az összes további HTML dokumentum kódjának befejező részét. Jelen esetben nincs eszközölve semmi változtatás, de ugyanúgy lehetne dinamikus tartalmat bevinni, mint a dokumentum első részében.
<?php include 'head.php'; ?> <h1>XY oldal tartalmának főcíme</h1> <h2>Alcím</h2> <p>XY oldalhoz tartozó tartalom…</p> <?php include 'foot.php'; ?>Az xy.php az oldalanként eltérő kézzel szerkesztett tartalmát (adatbázisból generált is lehet) és a részekre bontott HTML kódokat foglalja egységbe, így jön létre a teljes HTML forrás, amit a böngészőprogramok már egy teljesen szabályos weboldalként érzékelnek. A szerver oldali programozás kódjából semmit, csak a számukra legenerált tartalmat adják vissza.
<?php include 'head.php'; ?> <h1>XYZ dokumentum főcíme</h1> <h2>Alcím</h2> <p>XYZ oldalhoz tartozó tartalom…</p> <?php include 'foot.php'; ?>Az xyz.php bizonyíték arra, hogy a célnak megfelelő rendszer kialakítása után, többszörösen minimalizált emberi munkával, az egyes elemek nagyon egyszerűen, a végtelenségig újrafelhasználhatóak.
A PHP kódok csak akkor próbálhatók ki saját számítógépen, ha arra szerver program van telepítve PHP motorral. Linux rendszerre való telepítésére útmutató található a LAMP szerver, valamint a VirtualHostok című oldalakon. Windows rendszerre hozzávetőlegesen jó megoldás lehet a XAMPP csomag telepítése.
A legtöbb tárhelyszolgáltató UNIX (Linux) alapú szervert működtet, éppen ezért érdemes minél jobban megismerni. Jól működő weboldalak elengedhetetlen kelléke, a fejlesztőgépen való tesztelés lehetősége, asztali…
A teszt szerver kialakítása cikk alapján, remélhetőleg egy működő HTTP kiszolgáló rendszert hoztunk létre. A rendszer, ugyan működik, de sok mindenre ebben a formában még nem alkalmas, nehezen kezelhető. Gondoljunk csak…
A phpMyAdmin, MySQL adatbázisok internetes menedzselésére PHP nyelven írt grafikus felületű eszköz, mely támogatja a leggyakrabban használt adatbázis műveleteket: adatbázisok kezelése, táblázatok, mezők, kapcsolatok, indexek,…
Amint egy bármilyen számítógép internetes hálózatra kapcsolódik mindig fenn áll a veszélye, hogy valaki(k) adatokat próbálnak megszerezni, vagy még ezen is túl, megszerezni a számítógép irányítását. Példának okáért az…
A webszerverek különböző sorszámú kódokat küldenek a HTTP munkameneteknek, amelyek naplózási adatokból visszakövethetőek és biztonságtechnikailag felhasználhatóak. Egy részük a fellépő hibákra utalnak, míg más részük a…
Bármely web-oldal életképességének sikere megköveteli a folyamatosan változó látogatói tendenciák követését, a kliensektől érkező információk olyan elemzését, amely konstruktívabb következtetések levonására képeznek…