TP2 Ex 1 et 2

This commit is contained in:
2024-01-30 14:08:06 +01:00
parent cf6bc9f035
commit 1c630a345d
9 changed files with 283 additions and 1 deletions

View File

@@ -0,0 +1,12 @@
<component name="InspectionProjectProfileManager">
<profile version="1.0">
<option name="myName" value="Project Default" />
<inspection_tool class="PyPep8NamingInspection" enabled="true" level="WEAK WARNING" enabled_by_default="true">
<option name="ignoredErrors">
<list>
<option value="N802" />
</list>
</option>
</inspection_tool>
</profile>
</component>

1
.idea/php.xml generated
View File

@@ -10,6 +10,7 @@
<option name="highlightLevel" value="WARNING" />
<option name="transferred" value="true" />
</component>
<component name="PhpProjectSharedConfiguration" php_language_level="8.2" />
<component name="PhpStanOptionsConfiguration">
<option name="transferred" value="true" />
</component>

6
.idea/vcs.xml generated Normal file
View File

@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$" vcs="Git" />
</component>
</project>

View File

@@ -1,4 +1,4 @@
console.log("ajax.js.js chargé");
console.log("ajax.js chargé");
function ajaxRequest(type, url, callback){
let xhr = new XMLHttpRequest();

70
TP2/Ex1/index.html Normal file
View File

@@ -0,0 +1,70 @@
<!--
@Author: Ayoub KARINE
@Company: ISEN Yncréa Ouest
@Email: ayoub.karine@isen-ouest.yncrea.fr
@Created Date: 21-Apr-2021 - 12:13:30
@Last Modified: 21-Apr-2021 - 20:00:52
-->
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title> index </title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="js/apinavigateur.js" defer></script>
</head>
<body>
<br>
<div class="container">
<div class="row">
<h1> Geolocation API </h1>
<div class="col-3">
<button type="button" class="btn btn-primary" id="latitude">Afficher la latitude de ma position</button>
</div>
<div class="col-3">
<button type="button" class="btn btn-primary" id="longitude">Afficher la longitude de ma position</button> <br>
</div>
</div>
<br>
<div class="row">
<div class="col-3">
<h5><span class="badge bg-secondary" id="lat"></span></h5>
</div>
<div class="col-3">
<h5><span class="badge bg-secondary" id="long"></span></h5>
</div>
</div>
<div class="row">
<h1> Web History API</h1>
<div class="col-3">
<input type="text" class="form-control" placeholder="Entrez le nombre de page" aria-label="Username"
aria-describedby="basic-addon1" id="nbpages">
</div>
<div class="col-3">
<button type="button" class="btn btn-primary" id="reculer">Reculer</button>
</div>
</div> <br>
<div class="row">
<h1> Clipboard API </h1>
<div class="col-3">
<input type="text" class="form-control" aria-label="Username" aria-describedby="basic-addon1" id="textecopie">
</div>
<div class="col-3">
<button type="button" class="btn btn-primary" id="copier">Copier</button>
</div>
</div>
<br>
<div class="row">
<div class="col-3">
<input type="text" class="form-control" aria-label="Username" aria-describedby="basic-addon1" id="textecolle">
</div>
<div class="col-3">
<button type="button" class="btn btn-primary" id="coller">Coller</button>
</div>
</div>
<br>
</div>
<script src="apinavigateur.js"></script>
</body>
</html>

View File

@@ -0,0 +1,39 @@
console.log("apinavigateur.js chargé");
let lat = document.getElementById("lat");
let lat_button = document.getElementById("latitude");
let long = document.getElementById("long");
let long_button = document.getElementById("longitude");
lat_button.addEventListener("click",()=>{
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition((position)=>{
console.log(position);
lat.innerHTML = "Latitude :" + position.coords.latitude;
})
}else{
lat.innerHTML = "Geolocation is not supported by this browser.";
}
})
long_button.addEventListener("click",()=>{
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition((position)=>{
console.log(position);
long.innerHTML = "Longitude :" + position.coords.longitude;
})
}else{
long.innerHTML = "Geolocation is not supported by this browser.";
}
})
let InputPg = document.getElementById("nbpages");
let buttonPg = document.getElementById("reculer");
buttonPg.addEventListener("click",()=>{
console.log("history length :"+window.history.length);
console.log(InputPg.value);
window.history.go(-parseInt(InputPg.value));
})

92
TP2/Ex2/apitierces.js Normal file
View File

@@ -0,0 +1,92 @@
/**
* @Author: Ayoub KARINE
* @Company: ISEN Yncréa Ouest
* @Email: ayoub.karine@isen-ouest.yncrea.fr
* @Created Date: 21-Apr-2021 - 14:31:15
* @Last Modified: 21-Apr-2021 - 20:02:21
*/
// ----------------- utils -------------------
function showhide(id) {
let e = document.getElementById(id);
let eClasses = e.classList;
eClasses.toggle('d-none');
}
// ----------------- Gihub API -------------------
const github = document.getElementById("github");
github.addEventListener('click', showGithub);
function showGithub() {
showhide("githuarea");
showhide("catarea");
}
// To do
// ----------------- Cat API -------------------
const cat = document.getElementById("cat");
cat.addEventListener('click', showCat);
function showCat() {
showhide("catarea");
showhide("githuarea");
}
// To do
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:
break;
}
};
xhr.send();
}
const catbutton = document.getElementById("respcat");
catbutton.addEventListener('click', clickCatBtn);
function clickCatBtn(){
let text = document.getElementById("texteinimage").value;
const date = new Date();
date.getTime()
let url = "https://cataas.com/cat/says/" + text + "?size=40/?ts=" + date;
ajaxRequest("GET", url, showCatResponse);
}
const githubbutton = document.getElementById("respgithub");
githubbutton.addEventListener('click', clickGithubBtn);
function clickGithubBtn(){
let username = document.getElementById("githubname").value;
let url = "https://api.github.com/users/" + username;
ajaxRequest("GET", url, showGithubUser);
}
function showGithubUser(response){
let user = JSON.parse(response);
let githubarea = document.getElementById("githuarea");
githubarea.innerHTML = "";
let img = document.createElement("img");
img.src = user.avatar_url;
img.className = "img-thumbnail";
githubarea.appendChild(img);
let name = document.createElement("h3");
name.innerText = user.name;
githubarea.appendChild(name);
let login = document.createElement("p");
login.innerText = user.login;
githubarea.appendChild(login);
let bio = document.createElement("p");
bio.innerText = user.bio;
githubarea.appendChild(bio);
}
function showCatResponse(response){
let catarea = document.getElementById("catarea");
catarea.innerHTML = "";
let img = document.createElement("img");
img.src = response;
img.className = "img-thumbnail";
catarea.appendChild(img);
}

48
TP2/Ex2/index.html Normal file
View File

@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<meta charset="utf-8">
<title> index </title>
</head>
<body>
<div class="container">
<div class="row">
<h1>Exemples d'API tierce </h1>
</div>
<div class="row">
<div class="col-6">
<button type="button" class="btn btn-primary" id="github">Github</button><br><br>
</div>
<div class="col-6">
<button type="button" class="btn btn-primary" id="cat">Chat</button><br><br>
</div>
</div>
<div class="row">
<div class="col-6">
<div id="githuarea">
<input type="text" class="form-control" aria-label="Username" aria-describedby="basic-addon1"
placeholder="Entrez le login Github" id="githubname"><br>
<button type="button" class="btn btn-outline-secondary" id="respgithub">Rechercher</button> <br>
<div class="col-6">
<div id="githubinfo"></div>
</div>
</div>
</div>
<div class="col-6">
<div id="catarea" class="d-none">
<input type="text" class="form-control" aria-label="Username" aria-describedby="basic-addon1"
placeholder="Entrez le texte à insérer dans l'image" id="texteinimage"><br>
<button type="button" class="btn btn-outline-secondary" id="respcat">Rechercher</button>
<div class="col-6">
<br>
<div id="catimg"></div>
</div>
</div>
</div>
</div>
</div>
<script src="apitierces.js"></script>
</body>
</html>

14
serveur-ajax.conf Normal file
View File

@@ -0,0 +1,14 @@
<VirtualHost *:80>
ServerAdmin felix.marquet@isen-ouest.yncrea.fr
ServerName serveur-ajax-S3.felix
DocumentRoot /mnt/c/Users/BreizhHardware/Nextcloud/Programation/AJAX/
<Directory "/mnt/c/Users/BreizhHardware/Nextcloud/Programation/AJAX/">
Options +Indexes
AllowOverride All
Require all granted
</Directory>
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>