Ajax rėksnių dėžė (ShoutBox)

Rėksnių dėžė

Rėksnių dėžė

Šis straipsnis skirtas norintiems išmokti sukurti paprastą rėksnių dėžę panaudojant Ajax.
Šiuo atveju mes nenaudosime jokios JavaScript bibliotekos, o tiesiog kursime viską savo ir Ajax užklausas bei metodus apsirašysime patys. Kadangi kaip žinia Ajax nereikalingi jokie papildomi HTML elementai kaip pavyzdžiui <iframe>, o visas Ajax pagalba gautas turinys įkeliamas vos ne tą pačią sekundę į nurodytą vietą.

Susikurkime MySQL duomenų baze lentelę

Mums reikės:

  • ID – kuris bus naudojamas naujoms žinutėms numeruoti
  • Vardas – Naudotojo vardas kuris paskelbė žinutę
  • Data – Data kada buvo paskelbta žinutė
  • Turinys – Žinutės tekstas
  • Nuoroda – Naudotojo nuoroda

Žemiau pateiktą tekstą tiesiog nukopijuokite į phpMyAdmin:

CREATE TABLE `shoutbox` (
  `id` int(5) NOT NULL auto_increment,
  `vardas` varchar(50) NOT NULL default '',
  `data` datetime NOT NULL default '0000-00-00 00:00:00',
  `turinys` varchar(255) NOT NULL default '',
  `nuoroda` varchar(255) NOT NULL default '',
  PRIMARY KEY  (`id`)
);

Susikurkime Shoutbox aplinką

Toliau pateiktamo kodo pavyzdyje yra nurodoma:

  • HTML div elementas su nurodytu ID=“shoutbox“. Ši dalis skirta išvesti visas esamas žinutes į ekraną.
  • Toliau pateikiama forma su taip pat nurodytu ID=“shout“ ir su JavaScript įvykiu onsubmit. Kadangi visą formos informaciją mes perduosime vėliau į JavaScript funkciją Saugoti()
  • Toliau pateikiami formos laukeliai kuriuose bus įvesta informacija ir ši informacija bus perduota į Ajax užklausą.

Žemiau esantį kodą tiesiog išsaugokite shoutbox.php faile:

<div id="shoutbox"></div>
<form id="shout" name="shoutbox" method="POST" onsubmit="Saugoti(); return false;">
	<p>Vardas: <br /><input name="vardas" type="text" /></p>
	<p>URL/El. Paštas<br /><input name="url" type="text" /></p>
	<p>Žinutė<br /><input name="komentaras" type="text" /></p>
	<br />
	<p><input type="submit" name="submit" value="Pateikti" /></p>
</form>

Kuriame JavaScript funkcijas

Dabar susikursime 3 funkcijas kurios bus paaiškintos viena po kitos.

ajaxFunction()

  • Mums reikalingas JavaScript kintamasis ajaxRequest kuriame bus nustatytas XMLHttpRequest
  • Su šia funkcija mes siųsime Ajax (XMLHttpRequest) užklausas priklausomai nuo mūsų esamos naršyklės.
function ajaxFunction(){
	var ajaxRequest;
 
	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer 
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				alert("Jūsų naršyklė nepalaiko Ajax. Gal laikas atsinaujinti?");
				return false;
			}
		}
 
	}
	return ajaxRequest;
}

RodytiDuomenis()

  • Ši funkcija iškvies ajaxFunction() funkciją kurios pagalba bus sukurtas XMLHttpRequest darbui su naršyklėmis.
  • Kai bus sukurtas ryšys su naršykle kad galime naudoti Ajax užklausas, tuomet JavaScript susiras nustatytą ID (šiuo atveju shoutbox kuris buvo sukurtas prieš tai esančioje formoje.
  • Ajax metodas kreipsis į nustatytą PHP failą (isvedimas.php) ir reikalaus duomenų iš šio failo, kad būtų galima išvesti juos į HTML elementą.
  • Ši funkcija bus naudojama kiekvieną kartą kas 1000 ms (1 sekundę)
function RodytiDuomenis() {
	htmlRequest = ajaxFunction();
	if (htmlRequest==null){ // nepavyko sukurti Xmlhttp objekto.
		alert ("Naršyklė nepalaiko HTTP Užklausų");
		return;
	} 
 
	htmlRequest.onreadystatechange = function(){
		if(htmlRequest.readyState == 4){
			document.getElementById("shoutbox").innerHTML = htmlRequest.responseText;
		}
	}
	htmlRequest.open("GET", "isvedimas.php", true);
	htmlRequest.send(null);
}
 
RodytiDuomenis();
setInterval("RodytiDuomenis()",1000);

Saugoti()

  • Ši funkcija iškviečiama tuomet kai norime išsaugoti formoje pateiktus duomenis į MySQL duomenų bazę.
  • Taip pat vėl bus sukurtas scenarijus padėsiantis bendrauti naršyklei su Ajax per Xmlhttp objektą.
  • Kai tik objektas bus sukurtas bus tikrinama ar visi reikalingi duomenys yra įvesti į formos laukelius. Jeigu ne viskas yra įvesta tuomet bus iškviestas klaidos langas su klaidos pranešimu ir bus reikalaujama kad būtų įvesti visi duomenys
  • Jeigu visi duomenys įvesti tuomet viskas bus perduota į PHP failą irasyti.php
function Saugoti(){
	htmlRequest = ajaxFunction();
	if (htmlRequest==null){ // Nepavyko sukurti Xmlhttp objekto.
		alert ("Naršyklė nepalaiko HTTP užklausų");
		return;
	} 
 
	if(document.shoutbox.vardas.value == "" || document.shoutbox.vardas.value == "NULL" || document.shoutbox.komentaras.value == "" || document.shoutbox.komentaras.value == "NULL"){
		alert('Jūs privalote įvesti vardą ir žinutę!');
		return;
	}
	htmlRequest.open('POST', 'irasyti.php');
	htmlRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	htmlRequest.send('vardas='+document.shoutbox.vardas.value+'&zinute='+document.shoutbox.komentaras.value+'&url='+document.shoutbox.url.value); 
 
	document.shoutbox.komentaras.value = ''; // Ištrinamas esamas komentaras.
	document.shoutbox.komentaras.focus(); // Nustatomas kursorių/žymėklį į komentaro laukelį.
}

Visas šis tris funkcijas išsaugokite shoutbox.js faile.
Kai sukurėte shoutbox.js failą įkelkite jį HTML puslapį tarp :

<script language="JavaScript" type="text/javascript" src="shoutbox.js"></script>

PHP Skaitymas ir rašymas

Dabar pats tas laikas sukurti 2 PHP failus kurie bus atsakingi už įrašymą ir skaitymą iš duomenų bazės. Prieš pradedant skaitymą ir įrašymą susikurkime naują failą prisijungimas.php kuris bus skirtas už susijungimą su MySQL duomenų baze.

  • Pirmiausia susikurkime prisijungimas() funkciją kurios pagalba bus susijungiama su MySQL duomenų baze.
  • Nustatome visus reikiamus kintamuosius kurie bus naudojami prisijungiant.
  • Sukuriamas susijungimas su nustatytais kintamaisiais ir duomenų baze
  • Pasirenkame duomenų bazės lentelę
 <?
 	function prisijungimas()
	{
		$host = "localhost";
		$user = "vartotojas";
		$pass = "slaptazodis";
		$db = "lentele";
 
		$connect = mysql_connect($host, $user, $pass)
						or die ("Nepavyko prisijungti");
 
		mysql_select_db($db)
				or die ("Nepavyko pasirinkti lentelės");
 
	}
?>

Po to kai turime susikūrę funkciją kurios pagalba prisijungsime prie MySQL duomenų bazės, pats laikas susikurti failus kurie išsaugos ir išves duomenis iš MySQL duomenų bazės.

Failas irasyti.php

  • Įkeliamas MySQL prisijungimo failas.
  • Susirenkame duomenis kurie buvo pateikti iš shoutbox.js
  • Kai duomenys yra nustatyti, tuomet viskas yra perduodama į MySQL užklausą ir įrašome į duomenų bazės lentelę.
<?
	include("prisijungimas.php");
	prisijungimas();
 
	$vardas=addslashes(strip_tags(htmlspecialchars($_POST['vardas'], ENT_QUOTES)));
	$zinute=addslashes(strip_tags(htmlspecialchars($_POST['zinute'], ENT_QUOTES)));
	$url=addslashes(strip_tags(htmlspecialchars($_POST['url'], ENT_QUOTES)));
 
	$data = date("Y-m-d H:i:s");
	$sql = "INSERT into shoutbox (vardas, data, turinys, nuoroda)
					VALUES ('$vardas', '$data', '$zinute', '$url')";
	$rezultatas = mysql_query($sql);
 
?>

Failas isvedimas.php

Toliau išvedame duomenis iš MySQL duomenų bazės lentelės.

  • Išvalomas IE kešas.
  • Iš naujo įkeliamas MySQL prisijungimas ir paleidžiama funkcija norint prisijungti prie MySQL duomenų bazės.
  • Nuskaitomi visi duomenys.
  • Išvedami duomenys su skirtingomis
    CSS klasėmis kad nesimaišytų visos žinutės vienodame stiliuje.
<?
	header("Expires: Sat, 05 Nov 2005 00:00:00 GMT");
	header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT");
	header("Cache-Control: no-store, no-cache, must-revalidate");
	header("Cache-Control: post-check=0, pre-check=0", false);
	header("Pragma: no-cache");
 
	include("prisijungimas.php");
	prisijungimas();
 
	$sql = "SELECT * FROM shoutbox ORDER BY `data` DESC";
	$rezultatas = mysql_query($sql);
	$count = 0;
 
	while($shout_row = mysql_fetch_array($rezultatas))
	{
		$vardas = $shout_row['vardas'];
		$turinys = $shout_row['turinys'];
		$turinys = stripslashes($turinys );
		$data= $shout_row['data'];
		$url= $shout_row['nuoroda'];
		$skaicius = 0;
 
		$diena = substr($data, 8, 2);
		$menesis = substr($data, 5, 2);
		$metai = substr($data, 0, 4);
 
		if(($count % 2) != 0)
		{
				echo "<p class='odd'>$vardas - $turinys $diena-$menesis-$metai</p>";
 
		}
		else
		{
				echo "<p class='even'>$vardas - $turiny $diena-$menesis-$metai</p>";
 
		}
		$count++;
	}
 
?>

Po visų šių failų jums tereikia susikurti CSS stilių savo norimai rėksnių dėžei. Manau CSS truputį išmanot ir nesunkiai tai įgyvendinsite.

Mindaugas

IT specialistas, PHP programuotojas. Sritys: PHP, MySQL, JavaScript, Ajax, jQuery, Arduino, (x)HTML, CSS, XML

More Posts - Website

Žymos: , , , , ,

6 komentarai

  1. Lukas

    Opa, nice.

    Kaip tik žaidžiu su panašia problema. Pasistengsiu prie progos ta pačia tem brūkštelti kelis komentarus :)

    Tiesa, dėl JS
    >> &zinute=’+document.shoutbox.komentaras.value+’&url=’

    kažkaip pavojingai atrodo šita vieta. Kas bus jei shaoutboxe kasnos norės pasidalinti nuoroda su GET parametrais?

    Kaip geriausia tokioj vietoj escapinti žinutę, ar tiesiog paliekam, kaip yra ir leidžiam tik paprastus žoždžius?

  2. GET/POST visuomet eina padirbti. Čia neapsisaugosi nuo šito niekaip :) Pažiūrėk ties „Failas irasyti.php“ Nors tai nėra idealus sprendimo būdas apsisaugojimui, bet pradžiai tikrai pakanka 😉

  3. sveikas.
    radau klaidele.
    kur nustatomas $shout_row kintamasis nes man serveris klaida meta kad nera nustatytas $shout_row kintamasis :)

  4. while($eilute = mysql_fetch_array($rezultatas))
    {
    $vardas = $eilute[‘vardas’];
    $turinys = $eilute[‘turinys’];
    $turinys = stripslashes($turinys );
    $data= $eilute[‘data’];
    $url= $eilute[‘nuoroda’];
    turetu buti
    :) klaidele iveliai

  5. echo „$vardas – $zinute$diena-$menesis-$metai“;
    vietoj $zinute turetu buti $turinys :)

  6. Dėkui už pastebėjimus. Turbūt per skubėjimus susimaišiau 😉

Parašykite komentarą

El. pašto adresas nebus skelbiamas. Būtini laukeliai pažymėti *

Galite naudoti šias HTML žymas ir atributus: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>