Catégorie : Langages Web

langages Web

  • HighCharts – Création d’un camembert

    HighCharts – Création d’un camembert

    Dans cette nouvelle vidéo dédié à la librairie HighCharts, je vous montre comment faire un diagramme de style « camembert » (ou « pie-chart » en anglais).

    Je vous montre aussi quelques options pour modifier légèrement ce type de diagramme.

    Voici la vidéo :

    Vous pouvez récupérer les source de ce tutoriel sur la page de téléchargement.

  • Highcharts – création d’un diagramme areaspline

    Highcharts – création d’un diagramme areaspline

    Aujourd’hui, je vous présente le premier tutoriel sur la librairie Highcharts.

    Le tutoriel se porte sur la création d’un diagramme à aire de type « areaspline ».

    Voici la vidéo :

    Vous pouvez trouver le script sur la page de téléchargement.
    A la prochaine pour une prochaine vidéo.

  • CRUD, ou les 4 fonctions de base pour gérer les données

    CRUD
    Introduction

    Aujourd’hui, je vais parler d’une notion très importante dans le domaine du web.
    Cette notion pourrait être élargi dans tout le domaine de l’informatique, mais mon exemple sera plus spécifique au Web.

    Définition

    Je vais vous parler du CRUD. C’est un acronyme (en anglais), qui indique les 4 opérations de base pour gérer tous types de données.
    Les fonctions sont :

    1. Create (ou création),
    2. Read (ou lecture),
    3. Update (modification),
    4. Delete (Suppression).

    Chaque fonctions est importantes et s’il vient à en manquer une dans un logiciel, ce dernier serait incomplet.

    Exemple avec MySQL

    Pour ce paragraphe, j’ai décidé de vous montrer un exemple de code pour chaque partie du CRUD. Les codes sont en PHP et MySQL.
    Si vous maîtrisez ces quatre parties, vous pouvez gérer toutes les données que vous voulez.

    Partie « Create » :

    $sql = « 
        INSERT INTO news (nom, prenom, email, sujet, message)
        VALUES ($nom,’$prenom’,’$email’,’$sujet’,’$message’)
    « ;
    $req = $cnx->prepare($sql);
    $req->execute();

    ou

    $sql = $bdd->prepare(« 
        INSERT INTO news (nom, prenom, email, sujet, message)
        VALUES (:nom, :prenom, :email, :sujet, :message)
    « );

    $sql->bindParam(‘:nom’, $nom);
    $sql->bindParam(‘:prenom’, $prenom);
    $sql->bindParam(‘:email’, $email);
    $sql->bindParam(‘:sujet’, $sujet);
    $sql->bindParam(‘:message’, $message);

    $nom = ‘DOE’;
    $prenom = ‘John’;
    $email = ‘john.doe@gmail.com’;
    $sujet = ‘Sujet de message’;
    $message = ‘Lorem ipsum dolor sit amet, consectetur adipiscing elit.’;

    $sql->execute();

    Partie « Read » :

    $sql= »select * from news »;
    $qid=$cnx->prepare($sql);
    $qid->execute();

    Partie « Update » :

    $sql = « 
        UPDATE news
        SET titre=’ ».$titre. »‘, image=’ ».$image. »‘, alt=’ ».$alt. »‘, date=’ ».$date. »‘, texte=’ ».$texte. »‘
        WHERE id=$id
    « ;
     
    $qid=$cnx->prepare($sql);
    $qid->execute();

    ou

    $sql = « 
        UPDATE news
        SET nom=:nom, prenom=:prenom, email=:email, sujet=:sujet, message=:message
        WHERE id=$id
    « ;
    $qid=$cnx->prepare($sql);
    $qid->execute(
        array(
            ‘:id’ => $_GET[‘id’],
            ‘:nom’ => ‘DOE’,
            ‘:prenom’ => ‘John’,
            ‘:email’ => ‘john.doe@gmail.com’,
            ‘:sujet’ => ‘Sujet de message’,
            ‘:message’ => ‘Lorem ipsum dolor sit amet, consectetur adipiscing elit.’
        )
    );

    Partie « Delete » :

    $sql = ‘DELETE FROM news WHERE id=$id’;
    $req = $cnx->prepare($sql);
    $req->execute();

    ou

    $sql = ‘DELETE FROM news WHERE id=$id’;
    $req = $cnx->exec($sql);

     

    Si vous avez des questions par rapport à la notion de CRUD, laissez un commentaire.

  • CarouFredSel – carousel pleine page avec images tronquées

    CarouFredSel – carousel pleine page avec images tronquées

    Grâce à ce tutoriel et le plugin JQuery CarouFredSel, vous pourrez faire un carrousel pleine page avec les images précédente et suivante tronquées.

    Comme tous les autres tutoriel de la formation CarouFredSel, il est facile de créer des carrousels d’images en quelques minutes.

    Le script est téléchargeable sur la page de  téléchargement.

  • CarouFredSel – Accordéon vertical

    CarouFredSel – Accordéon vertical

    Dans cette 8ème vidéo dédié à la formation « CarouFredSel », je vous montre comment faire un accordéon vertical.
    Pour cette exemple, l’accordéon affiche 5 images avec les titres correspondant.
    J’ai ajouté un effet de clic au niveau des titres pour afficher les images directement.


    Le script lié à cette vidéo est sur la page de téléchargement