Page 1 sur 1

SQL et div sous bootstrap

Posté : 21 oct. 2014, 23:38
par DelphineNC
Bonjour à tous et toutes,

je suis débutante en programmation avec bootstrap et voudrais réaliser une FAQ une div collapse.

Pour l'instant je sais faire la FAQ en mettant les questions et les réponses en dur dans ma page.
Le problème c'est que je dois faire çà pour plusieurs logiciels et qu'il y a de plus en plus de questions.

Pouvez-vous me dire si c'est possible de remplir les div collapse avec une requête sql.
Je mets ci-dessous un bout du code que j'utilise

<section id="faq">
<div class="section-header">
<div class="container">
<h2><i class="fa fa-question-circle"></i> Frequent Asked Questions CaisseXL</h2>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="panel-group" id="accordion">
<!-- Question -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">
question1</a></h4>
</div>
<!-- div de la Reponses -->
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
Reponse
</div>
</div>
</div>
</div><!-- <div class="panel-group" id="accordion"> -->
</div><!-- <div class="col-lg-12"> -->
</div><!-- <div class="row">-->
</div><!-- <div class="container"> -->
</section>


Merci d'avance pour les réponses que vous apporterez..

Re: SQL et div sous bootstrap

Posté : 22 oct. 2014, 11:02
par Aureusms
Bonjour,

Oui c'est possible mais as-tu des données dans ta base, du code PHP, à afficher car là, avec du code HTML, on ne peut pas trop aider...

Re: SQL et div sous bootstrap

Posté : 22 oct. 2014, 13:21
par DelphineNC
Bonjour Aureusms 

Merci de me venir en  aide.

Je vous envoie une partie de la table dont j'ai besoin.

[color=#BFBF00]CREATE TABLE IF NOT EXISTS `problemes` (
  `id_probleme` int(11) NOT NULL AUTO_INCREMENT,
  `id_logiciel` int(11) NOT NULL,
  `probleme` text NOT NULL,
  `solution` text NOT NULL,
  PRIMARY KEY (`id_probleme`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

INSERT INTO `problemes` (`id_probleme`, `id_logiciel`, `probleme`, `solution`) VALUES
(1, 1, 'Problème impression de pdf', 'Vérifier qu''Adobe soit installé'),
(2, 2, 'Je n''arrive pas à demarrer easyphp quand skype est déjà allumé', 'Il faut démarré easyphp puis skype');[/color]


Pour la connection à la base de données j'utilise de code suivant
<?php

[color=#8080FF]        $BDD_ADRESSE  = "mysql:host=127.0.0.1";
	$BDD_DBNAME   = "faq";
	$BDD_LOGIN    = "root";
	$BDD_PASSWORD = "";

	try {
		$bdd = new PDO("$BDD_ADRESSE;dbname=$BDD_DBNAME", $BDD_LOGIN, $BDD_PASSWORD);
    } catch(Exception $e) {
        exit('Impossible de se connecter à la base de données.');
    }[/color]

    // exécution de la requête
    $resultat = $bdd->query($requete) or die(print_r($bdd->errorInfo()));
?>



Voici ma requête SQL
$requete = "SELECT probleme, solution FROM problemes";


Dans ma page web pour la version FAQ remplie avec la requete SQL est faite avec du bootstrap.
Partie de la page pour afficher la FAQ

<?php 
<section id="faq">
<div class="section-header">
<div class="container">
<h2><i class="fa fa-question-circle"></i> Frequent Asked Questions CaisseXL</h2>
</div>
</div>
<div class="container">

<?php
while($donnees = $resultat->fetch(PDO::FETCH_ASSOC)) {
?>

//c'est à partir d'ici que je veux que les données soient remplies avec le sql

<div class="row">
<div class="col-lg-12">
<div class="panel-group" id="accordion">
<!-- Question -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">
question1</a></h4>
</div>
<!-- div de la Reponses -->
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
Reponse
</div>
</div>
</div>

<?php
}//end while ?>

</div><!-- <div class="panel-group" id="accordion"> -->
</div><!-- <div class="col-lg-12"> -->
</div><!-- <div class="row">-->
</div><!-- <div class="container"> -->
</section>

Je pense vous avoir donner les informations dont vous avez besoin.
Merci pour aide.

Re: SQL et div sous bootstrap

Posté : 22 oct. 2014, 14:37
par Aureusms
Ton code ne sépare pas l'HTML du PHP c'est donc normal que cela ne peut pas fonctionner. Est ce toi qui a écrit cela :

Code : Tout sélectionner

<span style="color: #BFBF00">CREATE TABLE IF NOT EXISTS `problemes` ( `id_probleme` int(11) NOT NULL AUTO_INCREMENT, `id_logiciel` int(11) NOT NULL, `probleme` text NOT NULL, `solution` text NOT NULL, PRIMARY KEY (`id_probleme`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ; INSERT INTO `problemes` (`id_probleme`, `id_logiciel`, `probleme`, `solution`) VALUES (1, 1, 'Problème impression de pdf', 'Vérifier qu''Adobe soit installé'), (2, 2, 'Je n''arrive pas à demarrer easyphp quand skype est déjà allumé', 'Il faut démarré easyphp puis skype');</span> Pour la connection à la base de données j'utilise de code suivant <?php
Au fait pour : Je n''arrive pas à demarrer easyphp quand skype est déjà allumé' => 'Il faut démarré easyphp puis skype'
Tu peux d’abord activer le service apache windows dans le panneau de configuration. De ce fait, le port 80 occupé, skype cherchera un autre port de disponible.

Re: SQL et div sous bootstrap

Posté : 22 oct. 2014, 14:57
par ynx
Salut,

En rassemblant le tout sur la même page :
<?php
 
$BDD_ADRESSE  = "mysql:host=127.0.0.1";
$BDD_DBNAME   = "faq";
$BDD_LOGIN    = "root";
$BDD_PASSWORD = "";

try {
	$bdd = new PDO("$BDD_ADRESSE;dbname=$BDD_DBNAME", $BDD_LOGIN, $BDD_PASSWORD);
} catch(Exception $e) {
	exit('Impossible de se connecter à la base de données.');
}

$requete = "SELECT probleme, solution FROM problemes";

// exécution de la requête
$resultat = $bdd->query($requete) or die(print_r($bdd->errorInfo()));
?>

<section id="faq">
	<div class="section-header">
		<div class="container"><h2><i class="fa fa-question-circle"></i> Frequent Asked Questions CaisseXL</h2></div>
	</div>
	<div class="container">

	<?php 
	$i = 1;
	while($donnees = $resultat->fetch(PDO::FETCH_ASSOC)) {
	?>
	
	<div class="row">
		<div class="col-lg-12">
			<div class="panel-group" id="accordion">
				<!-- Question -->
				<?php echo htmlentities($donnees['probleme'], ENT_QUOTES, 'UTF-8'); ?>
				<div class="panel panel-default">
					<div class="panel-heading"><h4 class="panel-title"><a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">Question <?php echo $i; ?></a></h4></div>
					<!-- div de la Reponses -->
					<div id="collapseOne" class="panel-collapse collapse">
						<div class="panel-body">
							<?php echo htmlentities($donnees['solution'], ENT_QUOTES, 'UTF-8'); ?>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<?php
		$i++;
	}
	?>

	
	</div><!-- <div class="container"> -->
</section>
Bonne journée

Re: SQL et div sous bootstrap

Posté : 23 oct. 2014, 00:13
par DelphineNC
Bonjour ynx et Aureusms

ynx, J'ai tester votre code, la connexion à la base de données est ok.
Le problème c'est que je n'est rien à l'écran.

Je continue de chercher pour voir comment faire.
Si je réussi, je vous tiendrai au courant.

Merci et à plus tard.
Bonne journée à vous deux.

Re: SQL et div sous bootstrap

Posté : 30 oct. 2014, 22:43
par DelphineNC
Bonjour

J'ai résolu le problème
Merci

Re: SQL et div sous bootstrap

Posté : 03 nov. 2014, 03:01
par DelphineNC
Bonjour

pour ceux qui voudraient savoir comment j'ai fait.
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="panel-group" id="accordion">
                     <?php
                        try {
                           $sql = " SELECT id_probleme, id_categorie, nom, solution  FROM problemes WHERE id_categorie = 401";
                         
                           //$sql = " SELECT id_probleme, id_categorie, nom, solution  FROM problemes WHERE id_categorie = 222
                         
                           $results = $dbHandler->Query($sql);
                               foreach ($results as $row) {
                                    echo" <div class='panel panel-default'> "."\n";
                                    echo"      <div class='panel-heading'>"."\n";
                                    echo"          <h4 class='panel-title'>"."\n";
                                    echo"              <a class='accordion-toggle' data-toggle='collapse'  href='#collapse_"  . $row['id_probleme'] . "'>"."\n";
                                    echo "              " . utf8_encode($row['nom']) . "<br/>"."\n";
                                    echo"              </a>"."\n";
                                    echo"          </h4>"."\n";
                                    echo"      </div>"."\n";
                                    echo"      <div id='collapse_"  . $row['id_probleme'] . "' class='panel-collapse collapse'>"."\n";
                                    echo"          <div class='panel-body'>"."\n";
                                    echo "              solution : " . utf8_encode($row['solution']) . "<br/>"."\n";
                                    echo"          </div>"."\n";
                                    echo"      </div>"."\n";
                                    echo"  </div>"."\n";
                                 }
                            } catch(Exception $e) {
                                   die("erreur");
                            }
                     ?>
               </div><!--   <div class="panel-group" id="accordion">    -->
            </div><!--  <div class="col-lg-12"> -->
        </div><!--   <div class="row">-->
    </div><!--   <div class="container">    -->
</section>