File "code012.html"

Full Path: /home/analogde/www/Projet/liste/code012.html
File size: 3.65 KB
MIME-type: text/x-php
Charset: utf-8

 
Open Edit   Advanced Editor   Back 
<?php
// Paramètres de connexion à la base de données
$servername = "localhost";
$username = "votre_utilisateur";
$password = "votre_mot_de_passe";
$dbname = "votre_base_de_donnees";


$servername = "analogdepat.mysql.db";   
$username = "analogdepat"; 	   
$password = "Un92pac007";	    
$dbname = "analogdepat";	


// Créer une connexion
$conn = new mysqli($servername, $username, $password, $dbname);

// Vérifier la connexion
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// Requête SQL pour récupérer les données
$sql = "SELECT name, element FROM lists";
$result = $conn->query($sql);

// Tableau multidimensionnel pour stocker les résultats
$data = array();

if ($result->num_rows > 0) {
    // Parcourir les résultats et les stocker dans le tableau
    while($row = $result->fetch_assoc()) {
        $name = $row['name'];
        $element = $row['element'];

        // Si la clé 'name' n'existe pas, créer un nouveau tableau
        if (!isset($data[$name])) {
            $data[$name] = array();
        }

        // Ajouter l'élément au tableau correspondant à 'name'
        $data[$name][] = $element;
    }
} else {
    echo "0 results";
}

// Fermer la connexion
$conn->close();

// Convertir le tableau en JSON
$jsonData = json_encode($data);
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tree View</title>
    <style>
        ul {
            list-style-type: none;
        }
        .nested {
            display: none;
        }
        .caret {
            cursor: pointer;
            user-select: none;
        }
        .caret::before {
            content: "\25B6";
            color: black;
            display: inline-block;
            margin-right: 6px;
        }
        .caret-down::before {
            transform: rotate(90deg);
        }
    </style>
</head>
<body>
    <ul id="treeView"></ul>

    <script>
        // Récupérer les données JSON depuis PHP
        const data = <?php echo $jsonData; ?>;

        // Fonction pour créer le tree view
        function createTreeView(data, parentElement) {
            for (const name in data) {
                const li = document.createElement('li');
                const span = document.createElement('span');
                span.className = 'caret';
                span.textContent = name;
                li.appendChild(span);

                const ul = document.createElement('ul');
                ul.className = 'nested';
                data[name].forEach(element => {
                    const elementLi = document.createElement('li');
                    elementLi.textContent = element;
                    ul.appendChild(elementLi);
                });

                li.appendChild(ul);
                parentElement.appendChild(li);
            }
        }

        // Fonction pour déplier/replier les éléments
        function toggleNested(event) {
            const target = event.target;
            if (target.classList.contains('caret')) {
                target.classList.toggle('caret-down');
                const nested = target.nextElementSibling;
                if (nested && nested.classList.contains('nested')) {
                    nested.style.display = nested.style.display === 'block' ? 'none' : 'block';
                }
            }
        }

        // Créer le tree view
        const treeView = document.getElementById('treeView');
        createTreeView(data, treeView);

        // Ajouter l'événement de clic pour déplier/replier les éléments
        treeView.addEventListener('click', toggleNested);
    </script>
</body>
</html>