Come popolare una select dinamica da un database con php mysql e ajax

Ciao a tutti,

L’esempio che voglio portare è:

1. - Scelgo un continente sulla prima select
2. - Popolo la seconda select con gli stati appartenenti al continente che ho scelto nella prima select

cosa ho usato:

- database in MySQL
- PHP
- Ajax

Non ho molta dimestichezza con Ajax, ma ho capito come funziona, girovagando su internet e studiando l’ogetto “XMLHttpRequest”, fondamentale per realizzare uno script del genere.

La prima cosa che ho fatto è stato il disegno del database, con la seguente struttura:

nome database: test

nome tabella: l1 (contiene i continenti, ecco il DUMP):

-- phpMyAdmin SQL Dump
-- version 2.10.0.2
-- http://www.phpmyadmin.net
-- 
-- Host: localhost
-- Generato il: 22 Mag, 2007 at 05:10 PM
-- Versione MySQL: 5.0.37
-- Versione PHP: 5.2.1

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";

-- 
-- Database: `test`
-- 



-- 
-- Struttura della tabella `l1`
-- 

CREATE TABLE `l1` (
`l1_id` int(11) NOT NULL auto_increment,
`l1_name` text collate latin1_general_ci NOT NULL,
`l1_link` text collate latin1_general_ci NOT NULL,
`l1_order` int(11) NOT NULL,
PRIMARY KEY (`l1_id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=6 ;

-- 
-- Dump dei dati per la tabella `l1`
-- 

INSERT INTO `l1` VALUES (1, 'America', '', 100);
INSERT INTO `l1` VALUES (2, 'Europa', '', 200);
INSERT INTO `l1` VALUES (3, 'Asia', '', 300);
INSERT INTO `l1` VALUES (4, 'Oceania', '', 400);
INSERT INTO `l1` VALUES (5, 'Africa', '', 500);


nome tabella: l2 (contiene gli stati, ecco il DUMP):

Citazione:
-- phpMyAdmin SQL Dump
-- version 2.10.0.2
-- http://www.phpmyadmin.net
-- 
-- Host: localhost
-- Generato il: 22 Mag, 2007 at 05:10 PM
-- Versione MySQL: 5.0.37
-- Versione PHP: 5.2.1

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";

-- 
-- Database: `test`
-- 

 Struttura della tabella `l2`
-- 

CREATE TABLE `l2` (
`l2_id` int(11) NOT NULL auto_increment,
`l2_name` text collate latin1_general_ci NOT NULL,
`l2_link` text collate latin1_general_ci NOT NULL,
`l2_order` int(11) NOT NULL,
`l2_l1id` int(11) NOT NULL,
PRIMARY KEY (`l2_id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=9 ;

-- 
-- Dump dei dati per la tabella `l2`
-- 

INSERT INTO `l2` VALUES (1, 'Giappone', '', 100, 3);
INSERT INTO `l2` VALUES (2, 'Cina', '', 200, 3);
INSERT INTO `l2` VALUES (3, 'Mongolia', '', 300, 3);
INSERT INTO `l2` VALUES (4, 'Stati Uniti', '', 100, 1);
INSERT INTO `l2` VALUES (5, 'Canada', '', 200, 1);
INSERT INTO `l2` VALUES (6, 'Messico', '', 300, 1);
INSERT INTO `l2` VALUES (7, 'Italia', '', 100, 2);
INSERT INTO `l2` VALUES (8, 'Spagna', '', 200, 2);

Successivamente, ho realizzato 4 pagine in php:

- inc/conn.inc.php (pagina di connessione al database)
- inc/class/select.class.php (pagina dei metodi di selezione dei campi)
- get.php (pagina di iterazione con il javascript)
- index.php (pagina di visualizzazione esempio)

ecco il codice relativo alle 4 pagine (ovviamente da 4 pagine se ne può fare anche una o due, ma io per comodità ho scelto di separare il codice):

pagina “inc/conn.inc.php”:

<?php
// Inizio – Connessione DataBase
$host = ‘localhost’;
$login = ‘root’;
$password = ‘password’;
$db = ‘test’;
$conn = mysql_connect($host,$login,$password);
mysql_select_db($db,$conn);
// Fine – Connessione DataBase
?>

pagina inc/class/select.class.php:

<?php
class select{

function select(){
}

function getL1($id=”){
if(!empty($id)){
$sSQL = “SELECT * FROM l1 WHERE l1_id = $id”;
}else{
$sSQL = “SELECT * FROM l1 Order by l1_order”;
}
$ris = mysql_query($sSQL);
while($row = mysql_fetch_assoc($ris)){
$list[] = array(‘l1_id’ => $row["l1_id"],
‘l1_name’ => $row["l1_name"]);
}
return $list;
}

function getL2($id){
$sSQL = “SELECT * FROM l2 WHERE l2_l1id = $id Order By l2_order”;
$ris = mysql_query($sSQL);
while ($row = mysql_fetch_assoc($ris)) {
$list[] = array(‘l2_id’ => $row["l2_id"],
‘l2_name’ => $row["l2_name"]);
}
return $list;
}

function getL3($id){
$sSQL = “SELECT * FROM l3 WHERE l3_l2id = $id Order By l3_order”;
$ris = mysql_query($sSQL);
while ($row = mysql_fetch_assoc($ris)) {
$list[] = array(‘l3_id’ => $row["l3_id"],
‘l3_name’ => $row["l3_name"]);
}
return $list;
}

}
?>

Pagina “get.php”:

<?
include(‘inc/conn.inc.php’);
include(‘inc/class/select.class.php’);
$id = $_REQUEST['id'];
$obj = new select();
$l1 = $obj->getL1($id);
$Js = ”;
for($x=0; $x<count($l1); $x++){
$l2 = $obj->getL2($l1[$x]['l1_id']);
for($y=0;$y<count($l2);$y++){
if($y < (count($l2)-1)){
$end = “,”;
}else{
$end = “”;
}
$Js .= $l2[$y]['l2_id'].”-”.$l2[$y]['l2_name'].$end;
}
}
//echo “text”;
echo $Js;
?>

Pagina “index.php”:

<?
include(‘inc/conn.inc.php’);
include(‘inc/class/select.class.php’);
$obj = new select();
$l1 = $obj->getL1();
?>
<!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” lang=”it”>
<head>
<title>Select dinamiche con dati provenienti da Database</title>
<script type=”text/javascript”>

var http = createRequestObject();

function createRequestObject() {
var ro;
var browser = navigator.appName;
if(browser == “Microsoft Internet Explorer”){
ro = new ActiveXObject(“Microsoft.XMLHTTP”);
}else{
ro = new XMLHttpRequest();
}
return ro;
}

function loading(){
var id = document.getElementById(‘l1′).value;
http.open(‘GET’,'get.php?id=’+id, true);
http.onreadystatechange = getState;
http.send(null);
}

function getState(){
var newOption;
var where = (navigator.appName == “Microsoft Internet Explorer”) ? -1 : null;
var State = document.getElementById(‘l2′);
while (State.options.length) {
State.remove(0);
}
id = document.getElementById(‘l1′).value;
if(id == ‘sel’){
document.getElementById(‘l2′).disabled = true;
newOption = document.createElement(“option”);
newOption.value = ‘sel’;
newOption.text = ‘Seleziona uno Stato:’;
State.add(newOption, where);
}else{
if(http.readyState == 4){
if (http.status == 200) {
var response = http.responseText;
if(response == ”){
document.getElementById(‘l2′).disabled = true;
newOption = document.createElement(“option”);
newOption.value = ‘sel’;
newOption.text = ‘Nessuna voce’;
State.add(newOption, where);
}else{
coppia = response.split(‘,’);
max = coppia.length;
newOption = document.createElement(“option”);
newOption.value = ‘sel’;
newOption.text = ‘Seleziona uno Stato:’;
State.add(newOption, where);
for(x=0;x<max;x++){
val = coppia[x].split(‘-’);
newOption = document.createElement(“option”);
newOption.value = val[0];
newOption.text = val[1];
State.add(newOption, where);
}
document.getElementById(‘l2′).disabled = false;
}
}
}
}
}

</script>

</head>
<body>
<form name=”form”>
<div id=”content”>
<div id=”label1″>
Select 1
</div>
<div id=”select1″>
<select name=”l1″ id=”l1″ onchange=”loading()”>
<option value=”sel” selected=”selected”>Seleziona un Continente:</option>
<?
for($x=0;$x<count($l1);$x++){
?>
<option value=”<?=$l1[$x]['l1_id']?>”><?=$l1[$x]['l1_name']?></option>
<?
}
?>
</select>
</div>
<div id=”label2″>
Select 2
</div>
<div id=”select2″>
<select name=”l2″ id=”l2″ disabled>
<option value=”sel” selected=”selected”>Seleziona uno Stato:</option>
</select>
</div>
</div>
</form>
</body>
</html>

Spero di non essermi dimenticato di qualcosa…

Open Source) e perchè ritengo che, se pur funzionante (l’ho testato solo con Explorer), sicuramente può essere migliorato.

Inoltre, tengo a precisare che lo script è rivolto a coloro che hanno già dimestichezza con php.
Commenta questo articolo nel forum.

(2 votes, average: 5,00 out of 5)
 Loading ...