Suggesties met AJAX en PHP

Pagina 1

Inleiding

Wat is AJAX?
AJAX is een framework om direct gegevens weer te geven met JavaScript. Het kan gecombineerd worden met PHP. Voordat er AJAX was, moest de pagina eerst worden ververst. Met AJAX worden de gegevens meteen ververst. Dit is sneller voor de gebruiker. Wil je meer weten over AJAX? Dan verwijs ik je naar deze tutorial.

Pagina 2

JavaScript gedeelte

We gaan eerst het JavaScript/AJAX gedeelte programmeren. Dit is alles wat de gebruiker kan zien. Eerst kijken we of de string langer is dan 0 karakters. Als dat zo is gaan we een aanvraag doen op het PHP-script. Het PHP-script maken we op de volgende pagina.

Zet deze code in de <head></head> tags van je pagina.


<script type="text/javascript">
function showHint(str)
{
if (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code voor IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","gethint.php?q="+str,true);
xmlhttp.send();
}
</script>

Dit is het grafische gedeelte van de pagina. Ik denk dat je hiervoor niet zoveel uitleg nodig hebt, want ik denk dat je al aardig wat van HTML kan.
Deze code zet je in de <body></body> tags van je pagina.


<p><b>Begin met het typen van de naam:</b></p>
<form> 
Voornaam: <input type="text" onkeyup="showHint(this.value)" size="20" />
</form>
<p>Suggesties: <span id="txtHint"></span></p>

Ga snel door naar de volgende pagina voor het PHP-script.

Pagina 3

PHP: gethint.php

Dit is het PHP-script, als je het niet wilt combineren met MySQL. Eerst maken we de array genaamd $a. Hier voegen we alle namen toe die we willen hebben. Daarna kijken we of $_GET['q'] langer is dan 0. Als dat zo is gaan we zoeken voor suggesties. Daarna gaan we kijken of er meerdere suggesties zijn. Als er meerdere suggesties zijn voegen we ze allemaal toe. Als er niks is gevonden zetten we de suggesties op "Geen suggesties". Daarna laten we $response zien.


<?php
// Voeg de namen toe
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";

//Als $_GET['q'] langer is dan 0 dan zoekt hij voor hints
if (strlen($_GET["q"]) > 0)
  {
  $hint="";
  for($i=0; $i<count($a); $i++)
    {
    if (strtolower($_GET['q'])==strtolower(substr($a[$i],0,strlen($_GET['q']))))
      {
      if ($hint=="")
        {
        $hint=$a[$i];
        }
      else
        {
        $hint=$hint." , ".$a[$i];
        }
      }
    }
  }

// Als er niks is gevonden zetten we hem op "Geen suggesties"
// of als er wel iets is gevonden zetten we hem op die naam
if ($hint == "")
  {
  $response="Geen suggesties";
  }
else
  {
  $response=$hint;
  }

//Echo de suggestie(s)
echo $response;
?>

Pagina 4

PHP + MySQL: gethint.php

PHP script
Dit is het PHP-script, dat je kan combineren met MySQL. We gaan eerst uit de database alle namen halen, die we dan toevoegen aan $a. Daarna kijken we of $_GET['q'] langer is dan 0. Als dat zo is gaan we zoeken voor suggesties. Daarna gaan we kijken of er meerdere suggesties zijn. Als er meerdere suggesties zijn voegen we ze allemaal toe. Als er niks is gevonden zetten we de suggesties op "Geen suggesties". Daarna laten we $response zien. LET OP: Je moet waarschijnlijk de database-gegevens aanpassen.


<?php
//foutafhandeling
# errors weergeven
    ini_set('display_errors',0); // 1 == aan , 0 == uit
    error_reporting(E_ALL | E_STRICT);

    # sql debug
    define('DEBUG_MODE',false);  // true == aan, false == uit


    # functie voor sql debug
    function showSQLError($sql,$error,$text='Error')
    {
        if (DEBUG_MODE)
        {
            return  '<pre>Error: ' . $error . '<br />' . $sql . '</pre>';
        }
        else
        {
            return $text;
        }
    }   

$con = mysql_connect( 'localhost', 'root', '' )
if (!$con)
  {
  echo "Er is een fout opgetreden bij het verbinden met de MySQL database."
  }

mysql_select_db( 'gebruikers' )

$query = "SELECT naam, ID FROM `gebruikers` ORDER by `ID`";
if (($result = mysql_query($query)) === false) 
{
    # als de query fout is -> foutafhandeling
    echo showSQLError($sql,mysql_error(),'Fout met database.');
// we stoppen met het script
echo "Foute query."
}
else 
{
    # De query is gelukt
$num_results = mysql_num_rows($result);  
 for($i = 0; $i < $num_results; $i++)
    {
         $row = mysql_fetch_assoc($result);
         $a[] = $row['naam'];
    }


if (strlen($_GET['q']) > 0)
  {
  $hint="";
  for($i=0; $i<count($a); $i++)
    {
    if (strtolower($_GET['q'])==strtolower(substr($a[$i],0,strlen($_GET['q']))))
      {
      if ($hint=="")
        {
        $hint=$a[$i];
        }
      else
        {
        $hint=$hint." , ".$a[$i];
        }
      }
    }
  }


if ($hint == "")
  {
  $response="Geen suggesties";
  }
else
  {
  $response=$hint;
  }

echo $response;
}

?>

Database stuctuur
Als je lui bent, of gewoon geen zin hebt om de databasestructuur aan te maken, kan je deze dump gebruiken. Zet de code in een bestand met de extensie .sql. Bijvoorbeeld databasedump.sql.
Handleiding voor PHPMyAdmin
Log in met je gebruikersnaam en wachtwoord dat je normaal ook gebruikt. Ga dan naar tabblad Importeer. Kies eerst het bestand bij Bestand kiezen. Meestal staat de indeling op SQL. Dit moet je laten staan. Staat de indeling nog niet op SQL? Klik dan op SQL. Klik daarna op Start. Als het goed is wordt de database gebruikers aangemaakt met daarin 1 tabel.


# Dumping database structure for gebruikers
CREATE DATABASE IF NOT EXISTS `gebruikers` /*!40100 DEFAULT CHARACTER SET latin1 */;
USE `gebruikers`;


# Dumping structure for table gebruikers.users
CREATE TABLE IF NOT EXISTS `users` (
  `ID` int(11) NOT NULL AUTO_INCREMENT,
  `naam` varchar(100) NOT NULL,
  PRIMARY KEY (`ID`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=latin1;

# Dumping data for table gebruikers.users: ~2 rows (approximately)
DELETE FROM `users`;
/*!40000 ALTER TABLE `users` DISABLE KEYS */;
INSERT INTO `users` (`ID`, `naam`) VALUES
	(1, 'Gebruiker1'),
	(2, 'Gebruiker2');
/*!40000 ALTER TABLE `users` ENABLE KEYS */;
/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;
/*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;

Pagina 5

Afsluiting

Ik hoop dat ik je hiermee vooruit heb geholpen. Ik heb dit systeem ook voor mijn website 'Karma' gebruikt. Kijk maar bij dit topic.

Mvg,

Koen