commit cf6bc9f03574496b24a13d144eb7612cde4498a8 Author: Félix MARQUET Date: Tue Jan 23 09:22:58 2024 +0100 Initial commit diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..13566b8 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,8 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ +# Datasource local storage ignored files +/dataSources/ +/dataSources.local.xml diff --git a/.idea/AJAX.iml b/.idea/AJAX.iml new file mode 100644 index 0000000..85ca560 --- /dev/null +++ b/.idea/AJAX.iml @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/.idea/discord.xml b/.idea/discord.xml new file mode 100644 index 0000000..d8e9561 --- /dev/null +++ b/.idea/discord.xml @@ -0,0 +1,7 @@ + + + + + \ No newline at end of file diff --git a/.idea/jsLibraryMappings.xml b/.idea/jsLibraryMappings.xml new file mode 100644 index 0000000..1bc95fa --- /dev/null +++ b/.idea/jsLibraryMappings.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..6ef36ac --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/php.xml b/.idea/php.xml new file mode 100644 index 0000000..f324872 --- /dev/null +++ b/.idea/php.xml @@ -0,0 +1,19 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/TP1/Ex1/index.html b/TP1/Ex1/index.html new file mode 100644 index 0000000..3f90633 --- /dev/null +++ b/TP1/Ex1/index.html @@ -0,0 +1,45 @@ + + + + + + + + + AJAX + + + + + + + + + + +

+
+

AJAX

+ + + + + +

Date et heure

+ + + diff --git a/TP1/Ex1/js/ajax.js b/TP1/Ex1/js/ajax.js new file mode 100644 index 0000000..1c7416c --- /dev/null +++ b/TP1/Ex1/js/ajax.js @@ -0,0 +1,52 @@ +console.log("ajax.js.js chargé"); + +function ajaxRequest(type, url, callback){ + let xhr = new XMLHttpRequest(); + xhr.open(type, url, true); + xhr.onload = () => { + switch (xhr.status){ + case 200: + case 201: + callback(xhr.responseText); + break; + default: + httpErrors(xhr.status) + break; + } + }; + xhr.send(); +} + +function displayTimestamp(response){ + response = ' ' + response; + document.getElementById("timestamp").innerHTML = response; +} + +function httpErrors(errorCode){ + document.getElementById("errors").style.display = "block"; + switch (errorCode) { + case 400: + document.getElementById("errors").innerHTML = " 400: Requête incorrecte"; + break; + case 401: + document.getElementById("errors").innerHTML = " 401: Authentifiez-vous"; + break; + case 403: + document.getElementById("errors").innerHTML = " 403: Accès refusé"; + break; + case 404: + document.getElementById("errors").innerHTML = " 404: Page non trouvée"; + break; + case 500: + document.getElementById("errors").innerHTML = " 500: Erreur interne du serveur"; + break; + case 503: + document.getElementById("errors").innerHTML = " 503: Service indisponible"; + break; + } +} + + +setInterval(() => { + ajaxRequest("GET", "php/timestamp.php", displayTimestamp); +}, 1000); \ No newline at end of file diff --git a/TP1/Ex1/php/timestamp.php b/TP1/Ex1/php/timestamp.php new file mode 100644 index 0000000..2fe4e95 --- /dev/null +++ b/TP1/Ex1/php/timestamp.php @@ -0,0 +1,12 @@ + diff --git a/TP1/Ex2/index.html b/TP1/Ex2/index.html new file mode 100644 index 0000000..a3bdb12 --- /dev/null +++ b/TP1/Ex2/index.html @@ -0,0 +1,43 @@ + + + + + + + + + AJAX-JSON + + + + + + + + + + + + +

+
+

AJAX-JSON

+ + + + + +

+
+

+ + diff --git a/TP1/Ex2/js/ajax.js b/TP1/Ex2/js/ajax.js new file mode 100644 index 0000000..6610bd6 --- /dev/null +++ b/TP1/Ex2/js/ajax.js @@ -0,0 +1,50 @@ +function ajaxRequest(type, url, callback){ + let xhr = new XMLHttpRequest(); + xhr.open(type, url, true); + xhr.onload = () => { + switch (xhr.status){ + case 200: + case 201: + callback(xhr.responseText); + break; + default: + httpErrors(xhr.status) + break; + } + }; + xhr.send(); +} + +function editTitleAndDetails(response){ + let title = document.getElementById("title"); + let details = document.getElementById("detail"); + let json = JSON.parse(response); + title.innerHTML = json[0]; + details.innerHTML = "Heures : " + json[1].hours + " Minutes : " + json[1].minutes + " Secondes : " + json[1].seconds; +} + +function httpErrors(errorCode){ + document.getElementById("errors").style.display = "block"; + switch (errorCode) { + case 400: + document.getElementById("errors").innerHTML = " 400: Requête incorrecte"; + break; + case 401: + document.getElementById("errors").innerHTML = " 401: Authentifiez-vous"; + break; + case 403: + document.getElementById("errors").innerHTML = " 403: Accès refusé"; + break; + case 404: + document.getElementById("errors").innerHTML = " 404: Page non trouvée"; + break; + case 500: + document.getElementById("errors").innerHTML = " 500: Erreur interne du serveur"; + break; + case 503: + document.getElementById("errors").innerHTML = " 503: Service indisponible"; + break; + } +} + +setInterval(ajaxRequest, 1000, 'GET', 'php/time.php', editTitleAndDetails); \ No newline at end of file diff --git a/TP1/Ex2/js/clock.js b/TP1/Ex2/js/clock.js new file mode 100644 index 0000000..a8a7a9c --- /dev/null +++ b/TP1/Ex2/js/clock.js @@ -0,0 +1,179 @@ +'use strict'; +setInterval(ajaxRequest, 1000, 'GET', 'php/time.php', displayClock); +//ajaxRequest('GET', 'php/time.php', displayClock) +//------------------------------------------------------------------------------ +//--- displayClock ------------------------------------------------------------- +//------------------------------------------------------------------------------ +// Display a clock. +// \param time The time data received via the Ajax request. +function displayClock(time) +{ + let canvas; + let context; + let radius; + + // Define context. + canvas = document.getElementById('clock'); + context = canvas.getContext('2d'); + radius = canvas.height/2; + context.translate(radius, radius); + radius *= 0.9; + + // Draw clock background, numbers and hands. + drawBackground(context, radius); + drawNumbers(context, radius); + drawHands(context, radius, time[1]); + context.setTransform(1, 0, 0, 1, 0, 0); +} + +//------------------------------------------------------------------------------ +//--- drawBackground ----------------------------------------------------------- +//------------------------------------------------------------------------------ +// Draw clock background. +// \param context The drawing context. +// \param radius The clock radius. +function drawBackground(context, radius) +{ + let gradient; + + // White background. + context.beginPath(); + context.arc(0, 0, radius, 0, 2*Math.PI); + context.fillStyle = 'white'; + context.fill(); + + // Gradient contour. + gradient = context.createRadialGradient(0, 0, radius*0.95, 0, 0, radius*1.05); + gradient.addColorStop(0, '#333'); + gradient.addColorStop(0.5, 'white'); + gradient.addColorStop(1, '#333'); + context.strokeStyle = gradient; + context.lineWidth = radius*0.1; + context.stroke(); + + // Clock center. + context.beginPath(); + context.arc(0, 0, radius*0.1, 0, 2*Math.PI); + context.fillStyle = '#333'; + context.fill(); +} + +//------------------------------------------------------------------------------ +//--- drawNumbers -------------------------------------------------------------- +//------------------------------------------------------------------------------ +// Draw clock numbers. +// \param context The drawing context. +// \param radius The clock radius. +function drawNumbers(context, radius) +{ + let angle; + + context.font = radius*0.15 + 'px arial'; + context.textBaseline = 'middle'; + context.textAlign = 'center'; + for (let number = 1; number <= 12; number++) + { + angle = number*Math.PI/6; + context.rotate(angle); + context.translate(0, -radius*0.85); + context.rotate(-angle); + context.fillText(number.toString(), 0, 0); + context.rotate(angle); + context.translate(0, radius*0.85); + context.rotate(-angle); + } +} + +//------------------------------------------------------------------------------ +//--- drawHands ---------------------------------------------------------------- +//------------------------------------------------------------------------------ +// Draw clock hands. +// \param context The drawing context. +// \param radius The clock radius +// \param time The time +function drawHands(context, radius, time) +{ + let hours; + let minutes; + let seconds; + + // Get data. + hours = time['hours']; + minutes = time['minutes']; + seconds = time['seconds']; + + // Hours. + hours %= 12; + hours = (hours*Math.PI/6) + (minutes*Math.PI/(6*60)) + + (seconds*Math.PI/(360*60)); + drawHand(context, radius*0.5, radius*0.07, hours); + + // Minutes. + minutes = (minutes*Math.PI/30) + (seconds* Math.PI/(30*60)); + drawHand(context, radius*0.8, radius*0.07, minutes); + + // Seconds. + seconds = (seconds*Math.PI/30); + drawHand(context, radius*0.9, radius*0.02, seconds); +} + +//------------------------------------------------------------------------------ +//--- drawHand ----------------------------------------------------------------- +//------------------------------------------------------------------------------ +// Draw clock hand. +// \param context The drawing context. +// \param length The hand length. +// \param width The hand width. +// \param value The hand value. +function drawHand(context, length, width, value) +{ + context.beginPath(); + context.lineWidth = width; + context.lineCap = 'round'; + context.moveTo(0, 0); + context.rotate(value); + context.lineTo(0, -length); + context.stroke(); + context.rotate(-value); +} + +function ajaxRequest(type, url, callback){ + let xhr = new XMLHttpRequest(); + xhr.open(type, url, true); + xhr.onload = () => { + switch (xhr.status){ + case 200: + case 201: + callback(JSON.parse(xhr.responseText)); + break; + default: + httpErrors(xhr.status) + break; + } + }; + xhr.send(); +} + +function httpErrors(errorCode){ + document.getElementById("errors").style.display = "block"; + switch (errorCode) { + case 400: + document.getElementById("errors").innerHTML = " 400: Requête incorrecte"; + break; + case 401: + document.getElementById("errors").innerHTML = " 401: Authentifiez-vous"; + break; + case 403: + document.getElementById("errors").innerHTML = " 403: Accès refusé"; + break; + case 404: + document.getElementById("errors").innerHTML = " 404: Page non trouvée"; + break; + case 500: + document.getElementById("errors").innerHTML = " 500: Erreur interne du serveur"; + break; + case 503: + document.getElementById("errors").innerHTML = " 503: Service indisponible"; + break; + } +} \ No newline at end of file diff --git a/TP1/Ex2/php/time.php b/TP1/Ex2/php/time.php new file mode 100644 index 0000000..eb591d4 --- /dev/null +++ b/TP1/Ex2/php/time.php @@ -0,0 +1,15 @@ + $date['hours'], 'minutes' => $date['minutes'], 'seconds' => $date['seconds'])); + + // Send data to the client. + header('Content-Type: application/json; charset=utf-8'); + header('Cache-control: no-store, no-cache, must-revalidate'); + header('Pragma: no-cache'); + header('HTTP/1.1 200 OK'); + $data = json_encode($data); + echo $data; + exit; +?>