Web avancé – Séance de révision du 29/03/2017 – info3

Bonjour,

Ci-dessus les codes souces commentés qu’on a développé au cours de la séance de révision Web avancé du mercredi 29/03/2017.

Je rappelle les thèmes abordés : bootstrap, notions de bases de PHP, la programmation orientée objet (poo) et l’accès aux bdd via PDO.

Bootstrap :


<!DOCTYPE html>
<html>
<head>
    <title>BS- Exemples</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <script src="js/bootstrap.js"></script>
    <script src="js/jquery.min.js"></script>
    <style type="text/css">
        div {
            border: 2px solid #000;
        }
        .row {
            border: 1px solid #ccc!important;
        }
    </style>
</head>
<body>
    <div class="row">
        <div class="col-xs-1"> * </div>
        <div class="col-xs-1"> * </div>
        <div class="col-xs-1"> * </div>
        <div class="col-xs-1"> * </div>
        <div class="col-xs-1"> * </div>
        <div class="col-xs-1"> * </div>
        <div class="col-xs-1"> * </div>
        <div class="col-xs-1"> * </div>
        <div class="col-xs-1"> * </div>
        <div class="col-xs-1"> * </div>
        <div class="col-xs-1"> * </div>
        <div class="col-xs-1"> * </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-md-2 col-sm-4 col-xs-6">
            <h1>COL1</h1> sit amet, consectetur adipisicing elit, sed do citation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
        <div class="col-md-5 col-sm-4 col-xs-3 hidden-xs">
            <h1>COL2</h1> ipsum dolor sit amet, consectetur adipisicing elit, sliquip ex ea commodo consequat. Duis aute irur, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
        <div class="col-sm-4 col-xs-3 ">
            <h1>COL3</h1> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>

    </div>
</body>
</html>

PHP : les notions de base, POO et PDO


<!DOCTYPE html>
<html>
<head>
    <title>JE suis PHP</title>

    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <script src="js/bootstrap.js"></script>
    <script src="js/jquery.min.js"></script>    
</head>
<body>
Bonjour je suis HTML. <br/>
<?php
    echo "<br/> Je suis PHP <br/> \n\n\n";
?>
<br/>
... et du HTML de nouveau
<hr/>
<?php
$x = 555; // PHP est faiblement typé
echo "X = " . $x;
$x = "superman";
echo "<br> X = $x";
$x = true;
echo '<br> X = ' . $x;

//$x = array("batman", "superman", "spiderman");
$x = ["batman", "superman", "spiderman"];
$x[] = "Hulk";
echo "<br> X = ";
echo "<pre>";
var_dump($x);
echo "</pre>";



echo "<h1> My super heros </h1>";
echo "<ol>";
for ($i=0; $i < count($x); $i++)
{
    echo "<li> $x[$i] </li>";
}
echo "</ol>";

?>
<hr>
Tableau associatif
<?php
$x = ['un' => 'batman', 
      'dos' => 'superman', 
      'three' => "spiderman"];
echo "<pre>";
var_dump($x);
echo "</pre>";
echo "<ul>";
foreach($x as $cle => $val)
{
    echo "<li> $val (KEY = $cle) </li>";
}
echo "</ul>";

// POO
class Etudiant
/* Etudiant est une classe*/
{
    private $nom;
    private $age;
    public $classe;

    public function setNom($s)
    {
        $this->nom = $s;
    }
    public function setAge($i)
    {
        if ($i >= 18 && $i <=99)
            $this->age = $i;
        else
            die("Age non valide !");
    }
    public function getNom(){
        return $this->nom;
    }
    public function getAge(){
        return $this->age;
    }
}

$e = new Etudiant(); // $e est une instance/objet de la classe Etudiant
$e->setNom("Superman");
$e->setAge(35);
$e->classe = "Info5";

echo "<h1> POO </h1>";

echo "<pre>";
var_dump($e);
echo "</pre>";

echo "<h1> MySQL / PDO </h1>";
// Accès à la BdD
$idcom = new PDO("mysql:host=127.0.0.1;dbname=pdo","root","root");

$e = $idcom->query("SELECT * FROM etudiant ORDER BY classe DESC");
echo "<pre>";
var_dump($e);
echo "</pre>";

$n = $e->rowCount();
echo "<br> Nombre d'étudiants : $n";

echo "<br> Résultat du fetchAll :";
$liste = $e->fetchAll(PDO::FETCH_ASSOC);
echo "<pre>";
var_dump($liste);
echo "</pre>";


echo "<h2>Liste des étudiants ($n)</h2>";
?>
<table class="table table-striped table-hover">
    <thead>
        <tr>
            <th>ID</th>
            <th>Nom</th>
            <th>Age</th>
            <th>Classe</th>
        </tr>
    </thead>
    <tbody>

<?php
/*
for($i=0; $i<count($liste); $i++)
{
    $un_etudiant = $liste[$i];
}
*/
foreach ($liste as $un_etudiant) 
{

?>
        <tr>
            <td><?php echo $un_etudiant['id'] ?></td>
            <td><?php echo $un_etudiant['nom'] ?></td>
            <td><?php echo $un_etudiant['age'] ?></td>
            <td><?php echo $un_etudiant['classe'] ?></td>
        </tr>
<?php 
}

?>

    </tbody>
</table>

<?php

echo "<h1> JSON </h1>";
echo "<pre>";
$json = json_encode($liste );
echo $json;
echo "</pre>";

?>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>

AJAX : la partie serveur, elle affiche le tour premier étudiant de la table et renvoi un objet JSON

<?php
// Accès à la BdD
$idcom = new PDO("mysql:host=127.0.0.1;dbname=pdo","root","root");

$e = $idcom->query("SELECT * FROM etudiant");


$n = $e->rowCount();

$liste = $e->fetch(PDO::FETCH_ASSOC);


$json = json_encode($liste );
echo $json;

?>

AJAX : la partie client (HTML & jquery), elle fait une requête AJAX (ou XHR : Xml Http Request) au script ci-dessous et affiche les données. On a fait exprès de mettre des <br> en haut et bas afin de montrer que le click sur le bouton (qui lance le traitement ajax) ne rafraichit pas la page car on ne fait pas re requête GET/POST mais plutôt XHR.

<!DOCTYPE html>
<html>
<head>
    <title>
        Liste des étudiants
    </title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <meta charset=utf-8>
    <meta name=description content="">
    <meta name=viewport content="width=device-width, initial-scale=1">  
</head>
<body>
    TOP
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <div id="liste">
        Nom : <span id="nom"></span> <br>
        Age : <span id="age"></span> <br>
        Classe : <span id="classe"></span> <br>
    </div>
    <input type="button" value="Charger" id="go">
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <style type="text/css">
        #liste {
            background-color: yellow;
        }
    </style>
    <script>
    $("#go").click(function() {
        // AJAX : Asynchronous Javascript & XML
        $.ajax({
            url: 'http://127.0.0.1:88/php-2-json.php',

        })
        .done(function( resultat ) {
            console.log("Appel AJAX OK");
            console.log(resultat);
            var o = JSON.parse(resultat);
            $("#nom").html(o.nom);
            $("#age").html(o.age);
            $("#classe").html(o.classe);
        })
});


</script>
</body>
</html>

 

Publicités
par Sami CHANGUEL Posté dans ING3

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s