Segédletek.hu
Segédletek weblap szerkesztéshez!
 |
Fórum:
Postaláda:
Szavazás:
Hány éves vagy?
Segédletek:
Linkek:
php + txt alapú vendégkönyv:
Sorozat - vendégkönyvek:Ebben a segédletben egy php + txt alapú vendégkönyvet készítünk, melyen keresztül kommunikálhatnak látogatóid!
Akkor kezdjük is el!
Amire szükségünk lesz:
- egy szövegszerkesztő (Word kizárva, notepad tökéletesen jó)
Fájlok:
- tarol.txt - ebben tároljuk az üzeneteket
- index.php - ez lesz gyakorlatilag az interface
- style.css - az oldal kinézetét adjuk meg benne
- vendegk.js - a smileykhez tartozó js függvények tárolója
- sm01.gif
- sm02.gif
- sm03.gif
- sm04.gif
- sm05.gif
forrás fájlok egyben
smileyk egyben
működő demó
Fontos, hogy a fájljaink egy mappában legyenek!
Először nyissunk egy üres dokumentumot, legyen a neve index.php
írjuk bele(gyengébbek kedvéért: csak a kódrészleteket, a szöveget ne!):
Ez a későbbi header() függvény miatt szükséges (lásd:lap alján)
Nem részletezném külön a fejlécet, ami fontos belőle az a style.css és a vendegk.js (lásd: később)
menjünk tovább:
Ez már egy kicsit hosszabb rész. A fenti kód annyit csinál, hogy kiír egy formot, 3 mezővel: név, e-mail cím, üzenet. Ide kell majd beírni a bejegyzéseket. Ami furcsa lehet az a <img src="sm01.gif" onClick="sm01(uzenet)" alt="sm01" /> és a társai. Ez beszúr egy képet(smileyt) és az onClick eseményére (rákattintás) meghív egy JavaScript függvényt, amit a vendegk.js - ben definiálunk. Ez a form így nem mutat túl jól, hát adjunk neki egy kis stílust!
nyiss egy új dokumentumot, mentsd el style.css néven.
tartalma:
Ennek ez lesz a végleges formája, akár be is zárhatjuk. Nem részletezném külön, mi - mit jelent. Egyenlőre nem használunk még minden stílust, de ami késik az (a vonat) nem múlik.
Most vegyük elő a vendegk.js -t és definiáljuk a már felhasznált függvényeket(természetesen azok még nem működhetnek.
írjuk bele:
Ez 5 pofon egyszerű függvény. A működésük annyi, hogy ha rákattintunk a smileykre(fent) akkor a szövegdoboz (amibe az üzenetet írjuk) tartalma gyarapodik pl ezzel: [sm01] Ez jó, de hogy lesz belőle smiley? A megoldás kulcsa: php :) php-ben fogjuk lecserélni ezt a megfelelő <img> - tagra.
Amink eddig van:
-egy form, amibe lehet üzeneteket írkálni(bár nem történik semmi)
-egy stíluslap
-egy js lap, amiben definiáltuk a függvényeinket.
akkor folytassuk tovább az index.php - t. Most, hogy megvan a form, fel kéne dolgozni az érkező adatokat, és ki kéne iratni a már tárolt hozzászólásokat.
A beállítások itt az elején, illetve ha hiba van, szól.
Később látni fogjuk, az üzenetek így tárolódnak el a szövegfájlunkban:
név|üzenet|e-mail cím|dátum|sorszám\n
név2|üzenet2|e-mail2|dátum2|sorszám\n
Ennek alapján kiolvassuk a szövegfájlból az üzeneteket, és a $uzenetek tömbbe rakjuk őket, majd megfordítjuk, hogy az új hozzászólások legyenek felül.
Látható, hogy minden egyes üzenet végén ottvan a \n . ennek alapján daraboljuk az explode függvénnyel. a $uzenetszam változóba megszámoljuk a tömböt, és belerakjuk az értéket, de egyet le kell vonni belőle, mert az explode() fgv az utolsó \n utáni részt is még egy tömb elemnek veszi, de az ugye üres.
Ez a rész a lapozást oldja meg. lekérjük a $_GET['lap'] változót. ha nincs ilyen, akkor automatikusan egyet adunk neki. Azt, hogy hány oldalra lesz szükségünk a
$lapszam = intval(($uzenetszam+($egyoldalon-1))/$egyoldalon); művelettel számítjuk ki.(függvény referencia a lap alján) azután kiíratjuk az oldalra való hivatkozásokat ilyen formában: 1 [2] [3] [4] stb...
Lehet, hogy kicsit zazásan fogalmaztam, de némi programozási ismerettel fel lehet fogni. Annélkül egyszerűen csak menj tovább bátran...
van egy tömbünk, amit a fájlból kiolvastunk, ez a $uzenetek. ez ilyen formában van:
array(
0 => "név|üzenet|e-mail|dátum|sorszám\n",
1 => "név2|üzenet2|e-mail2|dátum2|sorszám\n"
stb...
);
(php - ben a tömbök indexelése 0 - val kezdődik)
tehát minden tömbelem így néz ki : név|üzenet|e-mail|dátum|sorszám\n és minden elemhez tartozik egy szám is. Ezeket az elemeket tovább daraboljuk a | jel alapján.
$resz = explode("|",$uzenetek[$i]);
A $i változó kulcsfontosságú. Benne az az érték van, amelyik a kezdő elem lesz a fájlból olvasáskor.(a lapozás miatt.) így ha pl a $_GET['lap'] = 1 és a $egylapon = 10 akkor az 1.-10. ig fogja kiírni az üzeneteket (persze hátulról olvasva, mert a $uzenetek tomb meg van fordítva, így az új üzenetek lesznek felül.) A ciklusban a $i - t növeljük, a $egyoldalon - t csökkentjük, és ha az 0 lesz, akkor kilépünk a ciklusból, ezzel oldjuk meg azt, hogy csak annyi üzenetet írjon ki, amennyit szeretnénk.
tehát
$resz = explode("|",$uzenetek[$i]);
így a $resz tömbben vannak benne az üzenet részei a következő formában:
array(
"0" => "név",
"1" => "üzenet",
"2" => "e-mail",
"3" => "dátum",
"4" => "sorszám"
);
Ez végig így megy a ciklus során, csak értelemszerűen mindig más értékek vannak benne.(a ciklussal járjuk végig a $uzenetek tömböt.)
most, hogy szépen fel vannak darabolva a bejegyzések, nincs más dolgunk, mint kiíratnunk.
Most, hogy már meg tudjuk jeleníteni az adatokat, jó lenne valamit tárolni is.
Folytassuk az index.php - t:
Ezzel a kódrészlettel írjuk bele a fájlba a formból jövő adatokat. Ellenőrizzük, hogy minden mezőt kitöltöttek - e.
Ha ez megvan megnyitjuk a fájlt ("a+") hozzáfűzésre. a $aktualis változóban az új üzenet sorszáma van. a $uzenet - a formból jövő uzenet nevű mezővel lesz egyenlő. Egy - két műveletet elvégzünk vele, és itt a
$uzenet=str_replace("[sm01]","<img src='sm01.gif' alt='sm01' />",$uzenet);
smiley cserélő eljárásunk is.
ezekután a $row változóba belerakjuk az adatokat, és elválasztjuk | jellel, majd a végére egy újsor karaktert rakunk \n majd beleírjuk az adatokat a fájlba. Majd a header fgv - vel gyakorlatilag frissítjük a lapot, hogy mgjelenjen az új hozzászólásunk
most már csak annyi dolgunk van, hogy létrehozzunk egy tarol.txt nevű fájlt, és adjunk neki írási jogot (chmod: 777) (Total commander -> fájl -> attribútumok módosítása :777)
Hát ezzel meg is volnánk, kész a vendégkönyvünk. Természetesen ez egy alap változat, még van mit bővíteni rajta, de kiindulási alapnak megfelel.
A segédletben felhasznált php függvények:
ob_start()
ob_end_flush()
isset()
print()
fopen()
fread()
filesize()
explode()
array_reverse()
count()
intval()
htmlspecialchars()
str_replace()
date()
fwrite()
header()
Amire szükségünk lesz:
- egy szövegszerkesztő (Word kizárva, notepad tökéletesen jó)
Fájlok:
- tarol.txt - ebben tároljuk az üzeneteket
- index.php - ez lesz gyakorlatilag az interface
- style.css - az oldal kinézetét adjuk meg benne
- vendegk.js - a smileykhez tartozó js függvények tárolója
- sm01.gif
- sm02.gif
- sm03.gif
- sm04.gif
- sm05.gif
forrás fájlok egyben
smileyk egyben
működő demó
Fontos, hogy a fájljaink egy mappában legyenek!
Először nyissunk egy üres dokumentumot, legyen a neve index.php
írjuk bele(gyengébbek kedvéért: csak a kódrészleteket, a szöveget ne!):
<?php
ob_start();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>Vendégkönyv</title>
<link href="style.css" type="text/css" rel="stylesheet" />
<script language="JavaScript" type="text/javascript" src="vendegk.js"></script>
</head>
Nem részletezném külön a fejlécet, ami fontos belőle az a style.css és a vendegk.js (lásd: később)
menjünk tovább:
<body>
<form name="beir" method="post" action="<?=$_SERVER['PHP_SELF']?>">
<table class="beir">
<caption>Bejegyzés a vendégkönyvbe:</caption>
<tr>
<td>Név:</td>
<td><input type="text" name="nev" /></td>
</tr>
<tr>
<td>E-mail cím:</td>
<td><input type="text" name="email" /></td>
</tr>
<tr>
<td>Üzenet:</td>
<td><textarea rows="5" cols="30" name="uzenet" id="uzenet"></textarea></td>
</tr>
<tr class="smiley">
<td colspan="2">
<a href="#" onclick="sm01();return false"><img src="sm01.gif" alt="sm01" border="0"/>
<a href="#" onclick="sm02();return false"><img src="sm02.gif" alt="sm02" border="0"/>
<a href="#" onclick="sm03();return false"><img src="sm03.gif" alt="sm03" border="0"/>
<a href="#" onclick="sm04();return false"><img src="sm04.gif" alt="sm04" border="0"/>
<a href="#" onclick="sm05();return false"><img src="sm05.gif" alt="sm05" border="0"/>
</td>
</tr>
<tr>
<td colspan="2" class="submit"><input type="submit" name="mehet" value="Küldés" /></td>
</tr>
</table>
</form>
nyiss egy új dokumentumot, mentsd el style.css néven.
tartalma:
BODY {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
input,textarea{
color:#000099;
background-color:#FFFF99;
}
#sorszam{
margin-left:auto;
margin-right:auto;
text-align:center;
font-size:14px;
color:#0000FF;
margin-bottom:1em;
}
#sorszam a{
color:#0000FF;
}
.beir{
margin-left:auto;
margin-right:auto;
border:1px dashed #990000;
}
.uzenet{
margin-left:auto;
margin-right:auto;
width:500px;
margin-bottom:1em;
}
.header{
background-color:#3399FF;
}
.body{
background-color:#FFFF99;
color:#000099;
}
.id{
width:25px;
}
.datum{
text-align:right;
}
.nick{
width:100px;
text-align:left;
}
.nick a{
text-decoration:none;
color:#FFFFFF;
}
.smiley{
text-align:center;
}
.submit{
text-align:center;
}
Most vegyük elő a vendegk.js -t és definiáljuk a már felhasznált függvényeket(természetesen azok még nem működhetnek.
írjuk bele:
// JavaScript Document
function sm01() {
document.beir.uzenet.value +="[sm01]";
}
function sm02(text1) {
document.beir.uzenet.value +="[sm02]";
}
function sm03(text1) {
document.beir.uzenet.value +="[sm03]";
}
function sm04(text1) {
document.beir.uzenet.value +="[sm04]";
}
function sm05(text1) {
document.beir.uzenet.value +="[sm05]";
}
Ez 5 pofon egyszerű függvény. A működésük annyi, hogy ha rákattintunk a smileykre(fent) akkor a szövegdoboz (amibe az üzenetet írjuk) tartalma gyarapodik pl ezzel: [sm01] Ez jó, de hogy lesz belőle smiley? A megoldás kulcsa: php :) php-ben fogjuk lecserélni ezt a megfelelő <img> - tagra.
Amink eddig van:
-egy form, amibe lehet üzeneteket írkálni(bár nem történik semmi)
-egy stíluslap
-egy js lap, amiben definiáltuk a függvényeinket.
akkor folytassuk tovább az index.php - t. Most, hogy megvan a form, fel kéne dolgozni az érkező adatokat, és ki kéne iratni a már tárolt hozzászólásokat.
<?php
if (isset($_GET['error']))
{
print "Hiba: Minden mező kitöltése kötelező!";
}
//egy oldalon ennyi üzenet
$egyoldalon = "10";
//a tároló fájl neve
$f = "tarol.txt";
$handle = fopen($f,"r");
if ($tomb = @fread($handle,filesize($f)))
{
$uzenetek = explode ("\n",$tomb);
$uzenetek = array_reverse($uzenetek);
$uzenetszam = (count($uzenetek)-1);
név|üzenet|e-mail cím|dátum|sorszám\n
név2|üzenet2|e-mail2|dátum2|sorszám\n
Ennek alapján kiolvassuk a szövegfájlból az üzeneteket, és a $uzenetek tömbbe rakjuk őket, majd megfordítjuk, hogy az új hozzászólások legyenek felül.
Látható, hogy minden egyes üzenet végén ottvan a \n . ennek alapján daraboljuk az explode függvénnyel. a $uzenetszam változóba megszámoljuk a tömböt, és belerakjuk az értéket, de egyet le kell vonni belőle, mert az explode() fgv az utolsó \n utáni részt is még egy tömb elemnek veszi, de az ugye üres.
if (!isset($_GET['lap']))
{
$_GET['lap'] = 1;
}
$lapszam = intval(($uzenetszam+($egyoldalon-1))/$egyoldalon);
if ($lapszam!=1)
{
print "<div id=\"sorszam\">Oldalak: ";
for($i=1;$i<=$lapszam;$i++)
{
if ($i!=$_GET['lap'])
{
print '<a href="'.$PHP_SELF.'?lap='.$i.'">['.$i.']</a>';
}//if
else
{
print $i;
}//else
}//for
print "Összes üzenet:$uzenetszam</div>";
}//if
if ($_GET['lap'] !== 1)
{
$i = ($_GET['lap']-1)*$egyoldalon;
}
if ($_GET['lap'] == 1){
$i = 1;
}
$lapszam = intval(($uzenetszam+($egyoldalon-1))/$egyoldalon); művelettel számítjuk ki.(függvény referencia a lap alján) azután kiíratjuk az oldalra való hivatkozásokat ilyen formában: 1 [2] [3] [4] stb...
Lehet, hogy kicsit zazásan fogalmaztam, de némi programozási ismerettel fel lehet fogni. Annélkül egyszerűen csak menj tovább bátran...
while($uzenetek[$i] == true)
{
if ($egyoldalon > 0)
{
$resz = explode("|",$uzenetek[$i]);
?>
<table class="uzenet" cellspacing="0">
<tr class="header">
<td class="id">#<?=$resz[4];?></td>
<td class="nick"><a href="mailto:<?=$resz[1];?>"><?=$resz[0];?></a></td>
<td class="datum"><?=$resz[3];?></td>
</tr>
<tr class="body">
<td colspan="3"><?=$resz[2]?></td>
</tr>
</table>
<?php
$i++;
$egyoldalon--;
}//if
else
{
break;
}
}//while
}//if fread
else
{
print ("Hiba: Nem tudom megnyitni a fájlt ,Vagy nincs még bejegyzés");
}
?>
</body>
</html>
array(
0 => "név|üzenet|e-mail|dátum|sorszám\n",
1 => "név2|üzenet2|e-mail2|dátum2|sorszám\n"
stb...
);
(php - ben a tömbök indexelése 0 - val kezdődik)
tehát minden tömbelem így néz ki : név|üzenet|e-mail|dátum|sorszám\n és minden elemhez tartozik egy szám is. Ezeket az elemeket tovább daraboljuk a | jel alapján.
$resz = explode("|",$uzenetek[$i]);
A $i változó kulcsfontosságú. Benne az az érték van, amelyik a kezdő elem lesz a fájlból olvasáskor.(a lapozás miatt.) így ha pl a $_GET['lap'] = 1 és a $egylapon = 10 akkor az 1.-10. ig fogja kiírni az üzeneteket (persze hátulról olvasva, mert a $uzenetek tomb meg van fordítva, így az új üzenetek lesznek felül.) A ciklusban a $i - t növeljük, a $egyoldalon - t csökkentjük, és ha az 0 lesz, akkor kilépünk a ciklusból, ezzel oldjuk meg azt, hogy csak annyi üzenetet írjon ki, amennyit szeretnénk.
tehát
$resz = explode("|",$uzenetek[$i]);
így a $resz tömbben vannak benne az üzenet részei a következő formában:
array(
"0" => "név",
"1" => "üzenet",
"2" => "e-mail",
"3" => "dátum",
"4" => "sorszám"
);
Ez végig így megy a ciklus során, csak értelemszerűen mindig más értékek vannak benne.(a ciklussal járjuk végig a $uzenetek tömböt.)
most, hogy szépen fel vannak darabolva a bejegyzések, nincs más dolgunk, mint kiíratnunk.
Most, hogy már meg tudjuk jeleníteni az adatokat, jó lenne valamit tárolni is.
Folytassuk az index.php - t:
<?php
if (isset($_POST['mehet'])) //ha elküldték a formot
{
if ($_POST['uzenet'] !== "" && $_POST['nev']!== "" && $_POST['email'] !== "")
{//adatok ellenőrzése
$handle = fopen($f,"a+");
$tomb = fread($handle,filesize($f));
$uzenetek = explode ("\n",$tomb);
$aktualis = count($uzenetek);
$uzenet = $_POST['uzenet'];
$uzenet = htmlspecialchars($uzenet);
$uzenet = str_replace("[sm01]","<img src='sm01.gif' alt='sm01' />",$uzenet);
$uzenet = str_replace("[sm02]","<img src='sm02.gif' alt='sm02' />",$uzenet);
$uzenet = str_replace("[sm03]","<img src='sm03.gif' alt='sm03' />",$uzenet);
$uzenet = str_replace("[sm04]","<img src='sm04.gif' alt='sm04' />",$uzenet);
$uzenet = str_replace("[sm05]","<img src='sm05.gif' alt='sm05' />",$uzenet);
$uzenet = str_replace("\n","",$uzenet);
$row = $_POST['nev']."|";
$row .= $_POST['email']."|";
$row .= $uzenet."|";
$row .= date("Y-m-d H:m:s")."|";
$row .= $aktualis."\n";
fwrite($handle,$row);
header ("location: index.php");
}
else
{
header ("location: index.php?error=1");
}
}
?>
<?php
ob_end_flush();
?>
Ha ez megvan megnyitjuk a fájlt ("a+") hozzáfűzésre. a $aktualis változóban az új üzenet sorszáma van. a $uzenet - a formból jövő uzenet nevű mezővel lesz egyenlő. Egy - két műveletet elvégzünk vele, és itt a
$uzenet=str_replace("[sm01]","<img src='sm01.gif' alt='sm01' />",$uzenet);
smiley cserélő eljárásunk is.
ezekután a $row változóba belerakjuk az adatokat, és elválasztjuk | jellel, majd a végére egy újsor karaktert rakunk \n majd beleírjuk az adatokat a fájlba. Majd a header fgv - vel gyakorlatilag frissítjük a lapot, hogy mgjelenjen az új hozzászólásunk
most már csak annyi dolgunk van, hogy létrehozzunk egy tarol.txt nevű fájlt, és adjunk neki írási jogot (chmod: 777) (Total commander -> fájl -> attribútumok módosítása :777)
Hát ezzel meg is volnánk, kész a vendégkönyvünk. Természetesen ez egy alap változat, még van mit bővíteni rajta, de kiindulási alapnak megfelel.
A segédletben felhasznált php függvények:
ob_start()
ob_end_flush()
isset()
print()
fopen()
fread()
filesize()
explode()
array_reverse()
count()
intval()
htmlspecialchars()
str_replace()
date()
fwrite()
header()
Írta: requiem - 2006-06-30 09:30:27
* Nem vagy bejelentkezve!* Nem töltheted le a segédlet forrását egyben!
* Nem szavazhatsz a segédletre!
* Nem írhatsz a segédlethez tartozó fórum témába!
| rook | 2009-08-23 03:26:08 |
| a wordwrap-et hova kéne beszúrni? | |
| Wendeer | 2007-03-19 13:41:47 |
| már várom a php + mysql alapú vendégkönyvet,remélem lesz ilyen mert a fórumban írtad requiem! | |
| Firith | 2007-02-27 07:53:23 |
| A sortörést meg nehogy már ciklussal csináljátok! Használjátok a wordwrap függvényt amit direkt erre találtak ki! wordwrap($szoveg, $sorhossz,'<br />\n') vagy csak '\n' ha nl2br()-t is használsz |
|
| Firith | 2007-02-27 07:50:18 |
| Amúgy érdemesebb lenne a smile-kat és a hozzá tartozó képeket tömbökben tárolni, akkor szebb lene a kód, a str_replace() a PHP4.05 óta tud kezelni tömböket is! Lásd manual | |
| Firith | 2007-02-27 07:46:22 |
| dBLOOD miért nem rakod a txt-t a webroot-on kivülre? | |
| dBLOOD | 2007-01-21 15:05:36 |
| ehh... ok visszavonom... bárki leszedheti a fájlt, amiben az info-k vannak a kommentekről... | |
| dBLOOD | 2007-01-21 13:26:00 |
| szabadon kirakhatom az oldalamra? pont ilyent kerestem, semmi csicsa, csak kommentnek kell, arra pont tökéletes... csak vmi engedély v iesmi kell rá, vagy tegyem ki nyugodtan? |
|
| requiem | 2006-09-09 11:02:30 |
| A mai nappal csak regisztráltak szólhatnak hozzá. Az ok: a sok spam. | |
| Anonymus | 2006-09-04 01:57:36 |
| a spam támadások ellen van valami védelem? | |
| requiem | 2006-07-31 09:07:41 |
| Ja, most látom, ff - el nem mennek a smileyk. Most nem vagyok otthon, de jövő héten megnézem. A hosszú szöveg: egy ciklussal végiglépkedsz a szövegen, és ha nézed a karaktereket. Ha nem találsz szóközt pl 40 karakter óta, akkorbenyomsz egy sortörést, és kész. |
|
| Anonymus | 2006-07-21 14:15:57 |
| mozilla alatt se jók a smiley-ek beszúrása. Hosszu szöveg tordelésére van mód ? (Lásd demó) | |
| requiem | 2006-07-18 15:10:36 |
| Teszteltem operával, meg FF - el is. Mi volt a baj vele? |
|
| Anonymus | 2006-07-18 08:57:37 |
| csak ie-vel működik jól | |
Kapcsolat | Szerzői jogok | Oldaltérkép | Impresszum | Segédletet írnék
© Copyright 2006-2007 segedletek.hu
