Untitled
unknown
plain_text
a year ago
4.0 kB
4
Indexable
<?php // Remplacez ces informations par les détails de votre base de données $serveur = "localhost"; $utilisateur = "root"; $motDePasse = ""; $baseDeDonnees = "formation"; // Établir la connexion try { $database = new PDO("mysql:host=$serveur;dbname=$baseDeDonnees", $utilisateur, $motDePasse); $database->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); } catch (PDOException $e) { die("La connexion à la base de données a échoué : " . $e->getMessage()); } // Fonction pour obtenir les sessions de cours de la base de données function getSessions($database) { $query = "SELECT sessionc.IDCO, sessionc.IDF, sessionc.datedS, sessionc.datefS, cours.titreCO, formateur.nomF, formateur.prenomF FROM sessionc INNER JOIN cours ON sessionc.IDCO= cours.IDCO INNER JOIN formateur ON sessionc.IDF = formateur.IDF"; $stmt = $database->prepare($query); $stmt->execute(); return $stmt->fetchAll(PDO::FETCH_ASSOC); } $sessions = getSessions($database); // Fermer la connexion $database = null; ?> <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Calendrier des Sessions de Cours</title> <!-- FullCalendar CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css" /> <!-- Qtip2 CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.min.css" /> <link rel="stylesheet" href="yugy.css" /> <style> body { margin: 40px 10px; padding: 0; font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif; font-size: 14px; } #calendar { max-width: 900px; margin: 0 auto; } </style> </head> <body> <center><h2>Calendrier des Sessions de Cours</h2></center> <div id="calendar"></div> <!-- jQuery --> <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> <!-- FullCalendar JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.js"></script> <!-- Qtip2 JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.min.js"></script> <script> document.addEventListener('DOMContentLoaded', function() { var sessions = <?php echo json_encode($sessions); ?>; $('#calendar').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, events: sessions.map(function(session) { return { title: session['titreCO'] + ' - Formateur: ' + session['nomF'] + ' ' + session['prenomF'], start: session['datedS'], end: session['datefS'], allDay: true, description: 'Début : ' + session['datedS'] + '<br>Fin : ' + session['datefS'] }; }), eventRender: function(event, element) { element.qtip({ content: { title: event.title, text: event.description }, style: { classes: 'qtip-bootstrap' }, position: { my: 'bottom center', at: 'top center', target: 'mouse', adjust: { mouse: false } } }); } }); }); </script> </body> </html>
Editor is loading...
Leave a Comment