Parser des caractéristiques techniques et générer un tableau convivial

Commenter

Contenu du snippet

Ce script récupére des données brutes pour générer un tableau où des boutons permettent à l'internaute de voir les caractéristiques qui l'interresse.

Dans le source, $caracteristiques contient des données comme ci-dessous:

DIMENSIONS
Longueur : 2260 mm
Hauteur de Selle: 693 mm
Garde au Sol: 141.0 mm
Angle de Chasse / Chasse : 29.6º / 116.8 mm
Empattement : 1520 mm
Contenance du Réservoir : 12.9 L
Capacité en Huile : 3.4 L
Poids à Vide : 251 kg
MOTORISATION
Moteur : Evolution
Cylindrée : 883 cm³
Alésage et Course : 76.2 mm x 96.8 mm
Couple: 69 nm @ 4200 trm
Alimentation : Carburateur
Taux de Compression : 9 / 1
Rapports (Finaux)
1ère : 9.79
2ème : 6.73
3ème : 5.22
4ème : 4.30
5ème : 3.64
ROUES/PNEUS
Roues
Avant : 19" 13 jantes à bâtons
Arrière : 16" 13 jantes à bâtons
Dim. des Pneus
Avant : 100/90-19 57H
Arrière : 150/80B16 71H

Concrétement, il y a une caractéristique (ou un titre) par ligne, et le nom est séparé de sa valeur par un deux-points (:)... Et parfois même des lignes vides, des espaces, ou des tabulations inutiles.

Le script reconnait les titres de groupes de caractéristiques pour ajouter les boutons permettant de les afficher ou cacher (par défaut)... Si 2 titres se suivent, ils seront confondus en un seul.

Les couleurs et bordures sont définies via des classes de style CSS.

Source / Exemple : 


//Variable avec les données brutes
			$caracteristiques = stripslashes($caracteristiques);

				echo("<TABLE CLASS=TableauSpecifications WIDTH='100%' CELLPADDING=0 CELLSPACING=0><TR><TD COLSPAN=2 CLASS=TitreSpecifications><b>Caractéristiques techniques</b></TD></TR>\n<TBODY>\n");
				//Une caracteristique ou un titre par ligne, les lignes vides sont acceptées
				$listecaracteristiques = explode("\n",$caracteristiques);
				
				$nbcaracteristiques = count($listecaracteristiques);
				$nbsouscategories = 0;
				$dernierecaracteristique = 0;
				
				for ($i = 0; $i < $nbcaracteristiques; $i++)
					{
					//cest une caracteristique ou un titre ?
					if (strpos($listecaracteristiques[$i],":") > 3)
						{
						echo("<TR><TD CLASS=SpecificationNomValeur WIDTH=35%><u>".str_replace(":"," :</u></TD><TD CLASS=SpecificationValeur><i>",$listecaracteristiques[$i])."</i></TD></TR>\n");
						$dernierecaracteristique = $i;
						}
					//Cest un titre ou une ligne vide ?
					else if (trim($listecaracteristiques[$i]) != "")
						{
						//Cest un soustitre ou un titre principal ?
						if (($i >= 1) AND (strpos($listecaracteristiques[$dernierecaracteristique],":") <= 1))
							{
							echo("<TR><TD COLSPAN=2 CLASS=SousTitreSpecifications><b><u>$listecaracteristiques[$i] :</u></b></TD></TR>\n");
							}
						else
							{
							echo("</TBODY>\n<TR><TD COLSPAN=2 CLASS=SousTitreSpecifications><INPUT TYPE=Button VALUE=Afficher ID=AfficherGroupe$nbsouscategories CLASS=\"Bouton Boutonspecifications\" onclick=\"groupespecifications$nbsouscategories.style.display = 'inline'; CacherGroupe$nbsouscategories.style.display='inline'; AfficherGroupe$nbsouscategories.style.display='none';\"><INPUT TYPE=Button VALUE=Cacher ID=CacherGroupe$nbsouscategories CLASS=\"Bouton Boutonspecifications\" onclick=\"groupespecifications$nbsouscategories.style.display = 'none'; CacherGroupe$nbsouscategories.style.display='none'; AfficherGroupe$nbsouscategories.style.display='inline';\" STYLE=\"display: none\"> <u>les caractéristiques <b>$listecaracteristiques[$i]</b> :</u></TD></TR>\n<TBODY ID=groupespecifications$nbsouscategories STYLE=\"display: none\">\n");
							$nbsouscategories++;
							}
						$dernierecaracteristique = $i;
						}
					}
					
				echo("</TBODY></TABLE>\n");

Pour la présentation (comme sur la capture),  il faut faire la déclaration de style CSS ci-dessous :

TABLE.TableauSpecifications {border-width: 1px; border-style: solid; border-collapse: collapse; border-color: #FFCC00; border-right-width: 2px; border-bottom-width: 2px}
TD.TitreSpecifications,TD.SousTitreSpecifications, TD.SpecificationTitre,TD.SpecificationNomValeur, TD.SpecificationPrix, TD.SpecificationValeur,TD.SpecificationReference {padding: 3px; border-width: 1px; border-style: solid; text-align: left}
TD.TitreSpecifications {text-align: center; color: #4D4D4D; background-color: #FFCC00; font-size: 14px}
TD.SousTitreSpecifications {color: #4D4D4D; background-color: white; border-style: none; border-color: #FFCC00; border-top-style: solid}
TD.SpecificationTitre,TD.SpecificationNomValeur, TD.SpecificationPrix, TD.SpecificationValeur,TD.SpecificationReference {padding: 1px; border-style: none; padding-left: 3px}
TD.SpecificationTitre,TD.SpecificationNomValeur {color: #4D4D4D; background-color: #CCCCCC; border-color: white; border-right-style: solid; vertical-align: top}
TD.SpecificationPrix {text-align: right; font-weight: bold; background-color: #A5A5A5}
TD.SpecificationReference {text-align: left; background-color: #A5A5A5}
TD.SpecificationNomValeur {}
TD.SpecificationValeur {text-align: left; background-color: #A5A5A5;}
INPUT.Boutonspecifications {color: #4D4D4D; background-color: #EFEFEF}

Conclusion :


Script réalisé pour le site www.harley-davidson-lille.com qui sera ouvert au public fin octobre 2003 ;o)

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (cs_olid)