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

2011-02-14 | Mindaugas | Temos: Ajax, JavaScript, MySQL, PHP | Komentarų: 6

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

Susiję straipsniai:

  1. Braižom grafikus su dygraphs
Žymos: , , , , ,

6 komentarai

Parašykite komentarą

El. pašto adresas nebus skelbiamas.